Week 9

Chapter 7 of the Dreamweaver book on typography resulted in this figure.

Windows and Mac versions/names of fonts that come with the OS:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

This was a good site to keep a reference of.  I printed it out for future reference.  It’s good to know which fonts are available to all and its also nice to see a printing of the fonts to help select an appropriate font.

 VERY useful round-up of best web sites of Feb 2007:
http://www.smashingmagazine.com/2007/03/08/best-of-february-2007/

Originally, I thought this was a list of well designed web sites, but I think it’s a list of web sites that may be helpful to designers as they are sites about upcoming events, how much you should charge for services, tutorials, job prospects, and such.  Am I right or did I miss the boat?  The other thing to keep in mind is that the top four websites that have useful information are actually ads, not part of this Best Web Sites of Feb 2007 article, I do believe.

Just for my information and others to use as a reference – some of the more interesting web sites they mention are: My Hourly Rate Calculator, Upcoming Events in 2007, Job Pile – Aggregating the Best Job Boards on the Web, Multi-Column Layouts Climb Out of the Box, Tutorials on Microformats, Flash embed test suite, SimpleLog 2.0.2, Creating a 3D effect with image editing software (GIMP or Photoshop), How Web 2.0 Logos are drawn (Adobe Photoshop), Papervision3D, Mozilla Firefox Cheat Sheet, Web Directions North | February 6 – 10, 2007 – WDN07 , Logo Design Trends 2007, Fireform, Internet marketing videos from Tubetorial, Web Browser CSS Support, Quick Highlighter, Weebly – Website Creation Made Easy, Spotplex, WordPress Feed Styler,
Mini tabbed pages, Vertical Bar Graphs using CSS and PHP, Suckerfish HoverLightbox Redux, Flexible fixed layouts, CSS Speech Bubbles
, Tableless forms, Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - oh, that sounds familiar, Five Principles to Design By - another familiar one, Evaluation of WYSIWYG editors (2007), 8 Web Design Tactics to Help You When You Are Stuck,
CSS techniques I use all the time, Web Misunderstandards, The Best of 2006 Logo Trends, LogoSauce – Logo design, inspiration and information., advertisement – domain name web site hosting.  I’ll have to look into these. Microformats – the idea of microformats is to make web documents smarter. Use words in your website design that will help search engines find your site.  (For example, if you’re working with family names, be sure to add the hcard class= family-names to your xhtml code, no matter how you present the name.

Week 8

I read the Article Dao of Web Design by John Allsopp.  As mediums change, we must change.  As radio turned into television; the printed page has turned into the web.  The first thoughts are to make it like the old, but John says we must be flexible and let the new medium work better than the old.  He stresses that you must first be more concerned about what your pages do rather than how they look.  “Let form follow function…”  Use the <em> element for emphasis rather than the <i> element.  “…use style sheets for your presentational information.”  Absolute units, like pixels and points, should be avoided and nevre rely on colors.  Font type and size may vary depending on the system (Macintosh vs. PC) in use.  Use relative sizes rather than rigid (e.g., headers are 30% larger than body text).  Let the user select the font size on his browser.  Think adaptability and accessibility.  Avoid fixed page layout.  Use relative sizes here also.  That way the user has the flexibility to change the size of his window.  With color, keep in mind that some people are color-blind and can’t tell the difference between red and green.  The web is flexible and therefore we should make it accessible to all.

The work from Chapter 6 of the Dreamweaver book is shown below.

Week 7 – “The Principles of Beautiful Web Design”

I finally got this chapter to come up the way I guess it should have from the start.  Did anyone else have trouble with this?  I tried several times at the college computers.  This is the first time I tried at home and it came right up.   Well, here’s my summary:

In the Article: Design beautiful websites with Fireworks, by Jason Beaird, to begin the web site design, sketch a few layouts, choose one, pick the color scheme, and draw a comp of it. 

Defining Good Design

• Aim for good visual appeal and user functionality

• User should be happy with the design, but attracted to the content.
• Design should have easy navigation
• All pages should be easily recognized as being a part of the same site

·        Consistent use of colors

·        Consistent navigation

·        Repetition of identity (e.g., logo)

Components of web site

• Containing Block
• Company Identity (e.g., logo, color, business cards, letterhead, brochures)
• Navigation (keep close to top)
• Content (important – user must be able to find info in seconds)
• Footer (copyright, contact info, legal info, & links to main sections of site.
• White space (should guide the user around the page & help to create balance & unity)

Grid Theory

Golden Ration or divine proportion – divide length by about 1.62

            Occurs a lot in nature

            Compositions using this proportion are “aesthetically pleasing”

Rule of Thirds

            Use to layout page design

Balance

Symmetrical – mirror images on either side of layout

            Horizontal

            Bilateral

            Radial

Last two rarely used in web design, but used in logo creation

Asymmetrical – objects of differing size, shape, tone, or placement – placed in such a way as to equalize the weight on the page – size vs. number

Unity

Different pieces work together as a whole

Unity achieved with proximity and repetition

Repetition refers to a group of similar objects or like colors, shapes or textures

Emphasis

Focal point – a particular element draws user’s attention.

Emphasis can be made with

• Dominance
• Placement (direct center)
• Continuance (e.g., arrow pointing to focal point)
• Isolation
• Contrast (difference in color, size or shape)
• Proportion (difference in the scale of objects – i.e., something much larger or much smaller than it should be in life compared to other objects in picture)

HTML tags & CSS properties designed to create emphasis:

• Block quote – HTML tag used for isolation
• CSS position property
• Blink & Marquee – avoid these

Layouts

Left-column Navigation – most common

Right-column Navigation (allows content to be first thing user sees)

Three-column Navigation (use for lots of navigation, small content, or advertising)

Getting Inspired

Check out these web sites:

http://www.csszengarden.com

http://www.cssbeauty.com

http://www.stylegala.com/archive

http://cssvault.com

http://www.designinternet.com/sow/

Using a Morgue File

Capture screen shots of web site pages:

• Press Alt Print Screen
• Paste
• Save

Fresh Trends

Expansive Footer Navigation

Instead of main links & copyright notice – use footnote for contact info, expanded site navigation, & extra content such as blogrolls, link rolls, Flikr badges,… – bonus navigation vs. main navigation

  

Three Columns with Content First

Content on far left

Homepage – 3 columns, inside pages – 2 columns

Content expands naturally on inside pages

Resizing:  Fixed Width vs. Liquid Width

Fixed Width

• Designer has more control over appearance of floated image within content
• Allows for planned white space
• Narrower text blocks are easier to read
• Can appear dwarfed in large windows
• User loses control

Liquid Width

• Adjusts to most screen resolution & devices
• Decreases user scrolling
• Text extending over a wide area is harder to read
• More difficult to execute
• Can change white space – changing balance & unity

An Alternative:  Variable Fixed-Width Layout

When expand browser window from 800 pixels to 1024 pixels wide, the right column separates into a 3^rd column.

Screen Resolution

In 2006, 58% of users had their screens set to 1024 x 768 pixels, 19% had higher, and 17% had 800×600.

To design for 800 and 1024 resolutions, design important content within 800 pixels width; display another column for search functionality, topic links, & advertising.  That way important info is shown without need for scrolling.

Week 7 Assignments

My FOGE homepage redesign is presented here.  It should be locatated at

Http://bcts-potomac.aacc.edu/128b/10/fogecompzip.zip.  I would like the buttons to change when rolled over, but couldn’t get it to work.  Does anyone remember how to do this?  The Help isn’t very helpful.

The Article: Best Faces For the Screen, by Daniel Will-Harris, was a great article for us to read at this time.  There are so many fonts from which to choose that it becomes baffling.  This article helps by giving good examples for specific fonts that are good for the screen (such as Memphas/Rockwell or Bitstream Geoslab703, Verdana & Georgia, Lucida fax, Serifa, PNM Caccilia, Melior, Times New Roman, Arial, Avenir, Blueprint, Gill Sans, ITC Officina Sans, ITC Legacy Sans, Lucida Sans, Myriad Multiple Master, and Lucida Handwriting) as well as pointing out things to watch for while choosing a font for viewing on-screen:  size, serif or sans serif, large x-height, tracking, and hinting.  He also has links to download specific fonts mentioned in the article.

The Article: Design beautiful websites with Fireworks, by Jason Beaird, wouldn’t load correctly so I couldn’t read it.  The 11.91 MB pdf file is 44 pages long and kept erroring out (network error).

So far, I have read the first three pages.  He suggests your first step in designing a web site for a client is to meet with him/her in person (after having learned what you can about the company from the internet or from competitors).  Ask questions about the company and take notes.  Ask about what the company does, what the role of the person you’re interviewing is, the logo, web site goal, what information will be provided online, target audience – share any common demographics, such as age, sex, or physical location, competitors and their web sites.

Week 6 Assignment continued

Storyboard for Redesigned FOGE Home Page.  This link contains the storyboard for the redesigned FOGE home page.  Recommendations for the FOGE website should be located at http://bcts-potomac.aacc.edu/128b/10/week6/fogereview.zip

Assignment for week 6

Chapters 3 & 4 were easy to follow.  The following was produced:

Couldn’t find the article ”Five Principles to Design By.” 

I read the article, 8 Web Design Tactics to Help You When You’re Stuck, by Matthew Inman (Oatmeal) .   My favorite was number 8.  I think he’s right.  You do want to get others’ feedback, but be careful they’re the right “others.”

Assignment 5 – picture from Chapter 2

Week 5 assignments

My design link should be at:

bcts-potomac.aacc.edu/128b/10/week5/designzip.zip

About this assignment,

It was a good assignment for becoming familiar with various parts of the Fireworks program.  The one thing I found difficult was matching the fonts.  Is there a good way to find  a match?  There are so many of them, it’s mind boggling.

Regarding the article by Jakob Nielsen, Top Ten Mistakes in Web Design:

Mistake #1:  Bad Search – I’m assuming he’s talking about the search engines vs our website design.  Should we be putting keywords with common misspellings?  Also, the search engines do tend to return a “Did you mean ____?  when you misspell a word.

Mistake #2:  PDF Files.  I totally agree with him here.  I hate PDF files.

Mistake #3:  Changing Color of Visited Links.  I’ve found that even when websites do change the color of visited sites, they don’t all change.  For instance, when there are many links and you click on each one, several will turn purple, but one stays blue.  This is confusing and I’m not sure why it happens.

Mistake #4:  Non-scannable text.  Sometimes it’s necessary, but generally I agree.

Mistake #5:  Fixed Font Size.  I wasn’t aware you could change the size of the font.  It’s a nice idea, especially for the very small font.

Mistake #6:  Low Search Engine Visibility.  Do the search engines nowadays search through the web pages to find results?  In the old days (a couple years ago), my husband had to send his keywords to each search engine.

Mistake #7:  Advertisement appearance.  I agree with this.  I tend to avoid anything resembling an ad.

Mistake #8:  Consistency.  I agree with him here.  Consistency is key in writing for print as well as online.

Mistake #9:  Opening New Browser Windows.  I agree with not wanting mega-windows opening on the user; however, I like the idea of opening a new window when going outside the site (agree with professor here).

Mistake #10:  User’s questions.  I agree.  A lot of times I will go to a website looking for prices and they’re not listed.

Regarding the Webpages That Suck website by Vincent Flanders, specifically  “The 10 Worst Web Sites to Navigate in 2006″ :

I thought the ads that came up at the top were part of the site.  Also, once you click on a link you can’t get back to his site.

Diner’s Club:   archive.org  The doors are interesting – they should be consistent – either be new links or all the same as the top buttons.  It’s not intuitive that the doors are buttons.  New site still takes too long to open. 

Shulman Fleming:  Tjere’s nothing wrong with using a baby.  The baby signifies growth.  I kept staring at the screen expecting something to come forward.  Finally I realized the side bar would open when rolled over – agree, not a good design.

Matthew Mahon:  Takes too long to open.  Can’t get back to original site.

Campbell Mithum:  Search is important

Medium:  Not good.

Sjb:  Navigation should be very user friendly and intuitive, not fancy.

When designing a website, is there a way to make sure that if someone clicks an outside link, they can get back to yours.  This is important for your business and frustrating when you have to keep entering the business address again and again.  Also when the user opens a site, that site should open on top, not be buried down deep in the open windows.  These are comments relating to the  “The 10 Worst Web Sites to Navigate in 2006″  website.

ushida findlay architects.  When I opened this website in a small window, it appeared blank.  Not so good.

Gaiai Group. same as above

Crumpler Bags.  Very cute, but I can’t read the words that pop down from the pictures on top.  Text that pops up with pictures on bottom are more readable.  Should use consistency and be readable. Also takes too long to open. 

Optimal World.  What does the countdown mean?  not intuitive.

Chapter 2 is in last week’s assignment.