Week 12 project using CSS is located at http://bcts-potomac.aacc.edu/128b/10/week12/sample-design-lauram.html

Week 12 project using tables is located at http://bcts-potomac.aacc.edu/128b/10/week12/design_lauram.html

Information Interaction Design - by Nathan Shedroff

In the article, Information Interaction Design - by Nathan Shedroff, Nathan discusses design as an intricate intersection of Information, Interaction, and Sensorial Design.  He starts off talking about needing a process to solve “information overload.”  This I agree with as we are in the Information era and need to sift through so much information in so many medias.  In Information Design, he describes data as being “fairly worthless to most of us.”  I have to disagree with him here, or maybe I don’t fall in the “most” category.  As an engineer, I like to deal with the actual data rather than the author’s interpretation.  I tend to feel that most information (being described as “relationships between data”) is data with an opinionated spin on it, making it pretty worthless to me.  You can take data and present it as a statistic showing pretty much whatever you want it to show.  
Nathan notes that there are seven ways to organize data by:  alphabet, location, time, continuum, number, category, or random.  Experiment to find the best method.
He gives an example of the Vietnam Memorial, in which the names are listed by time, creating an emotional reaction and how the memorial would be completely different had it been organized in another way.  Of course, most organizations use multiple methods. 
Metaphors can be used when appropriate.
Define goals as early in the design process as possible.
Clarity
Interaction Design
Nathan says the best way to learn about interaction design is through the performing arts.
Encourage participation

Sample from Chapter 9 is located at http://bcts-potomac.aacc.edu/128b/10/chap_09/layout.htm

I couldn’t get Exercise 2 Adding Layers to work even after trying Jed’s changes.

Sample from Chapter 8 are located at http://bcts-potomac.aacc.edu/128b/10/chap_08/css-teapots.htm

Questions and comments from Chapters 8 & 9

Dreamweaver Chapter 8

1.       In Dreamweaver book, Chapter 8, page 202, #4 – book mentions dotted lines defining table cells – mine doesn’t have this – is this a difference between 8 and CS3?

2.       On page 205-206, the table shown in the book has the second column expanded in width to hold the description in 3 lines.  Mine did not expand automatically and my column is 8 lines long.

3.       On page 207, my browser shows borders.  On page 208, mine already had 1 typed in the Border field.

4.       On page 225, I can’t find Format Table in the Commands heading.

5.       On page 236, I don’t understand the two numbers at the bottom of the columns – includes padding?

6.       On page 239, my photo column changed sizes only when it got bigger – it never tried to display the image as two parts.  When I set the width to 92, it did the exact same thing.

7.       My table was a different color than the rounded corners.  When I tried to change the color of my table by selecting the table and then putting in a different color in the bg field, nothing changed.  How do I make the change correctly.

Dreamweaver Chapter 9

1.       On page 251 Browser Offset – Do we want to design our web page with this offset, or do we want design to begin right at upper left-hand corner?

2.       Page 253 Adding Layers – Insert>Layout Objects>Layer – No Layer – Help!!!  Comments in Jed’s blog – didn’t work for me either.  Jenn, for some reason I did not get your email on this subject.  I also didn’t get the last one on a mistake in the book.  I’m getting all your other emails, so this doesn’t make sense, but can you send me those 2 emails – thanks

3.       Page 261 – There is no Layout Table Object button – use Insert-Layout Objects – Layout Table (Note that when you drag, make sure you’re not in the hashed area or it doesn’t work)

4.       Page 262 – No Draw Layout Cell button – use Insert-Layout Objects – Layout Cell

5.       Page 263 – mine was 203 x 76 vs. 204 x 76

6.       Page 263 – mine was 323 x 300 vs. 324 x 320

7.       Page 267 #2 – Should “with” be “will?”

My comps are located at:  http://bcts-potomac.aacc.edu/128b/10/project/homepage.png and at http://bcts-potomac.aacc.edu/128b/10/project/photopage.png

After reviewing the Search Engine Presentation, I have the following questions:

1.  How do we notify search engines of our site?

2.  Are key words specified as key words or just located from words typed in our website?

3.  How do we put META descriptions in Dreamweaver?

4.  What is a key page?

5.  How do we submit key pages to search engines?

6.  How many search engines are there and how do we know if we got them all?

oops -forgot to post.

These are my comments and places where I struggled on tasks from Chapter 9 in Fireworks book. 

1.  On page 191, I kept using the wrong circle tool - there are two - one in the web section, which you don’t want, but I kept using without realizing it and then I couldn’t work with it.

2.  On page 203, File-Preview in Browser - didn’t show the animation, only the Specials layer.  After optimized, this worked.

3.  On page 204, the author said to change colors or other options.  What are the other options available to change?

4.  On page 204, #2 click Export - no Export button, I clicked Save.

5.  On page 208 #1 I couldn’t remember how to add an inner bevel to the star - use Add filter - inner bevel.

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.

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.

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.