pages

Wednesday, February 13, 2013

The Elements of (Web) Style

Site Design Basics

Is there a web design manifesto like Strunk and White's Elements of Style? I thought that I had one found at The Elements of Style Blog. But no, I must search on.


Web Style Guide
I didn't like this one.  It has too many design elements with twelve.  This one does have some good ideas though, that some of the others don't have. This are ideas that you want to begin to think about before you begin to build that site--that are not as obvious as a design element like a color palate--but are vital for the functioning of a good website.

1. process
2. universal usability
3. information architecture
4. interface design
5. site structure -- (I think this is the one that is really important

                              that the other design elements are NOT terribly
                              explicit about.)
6. page structure
7. page design
8. typography
9. editorial style
10. forms and applications
11. graphics
12. mulitmedia


My Ink Blog


So this one is the same list that comes from The Non-Designer's Web Book, that Rosenzweig and Cohen reference. 

1. contrast
2. repetition
3. alignment
4. proximity

Digital Web Magazine

I actually think that these five design elements. They are more helpful than the four listed previously (but truly include those).

1. balance               -- (alignment)
2. rhythm                --(proximity - movement between text, images,

                                   and white spaces)
3. proportion
4. dominance          -- (contrast - both in color, space, size)
5. unity                    -- (repetition)


ConversionXL

This is one that I found. I liked these. It used good images. Got some very good ideas also, but maybe the Gestalt Design Laws got a little to intense. Also the names of these don't necessarily identify what you are looking for, so you have to know that Hick's Law is, or Fitt's Law.

1. visual hierarchy
2. divine proportions
3. Hick's Law     --every choice require addition time for a decision
4. Fitt's Law       --time it takes to move to an area is because of the
                             distance away and its size
5. Rule of Thirds -- use a 3x3 grid to help organize
6. Gestalt Design Laws -- people see the whole before each part
                            --Law of Proximity
                            --Law of Similarity
                            --Law of Closure
                            --Law of Symmetry
                            --Law of Common Fate
                           --Law of Continuity
7. White space and clean design
8. Occam's Razor -- the simplest solution is usually the best

Site Design Analysis

I am going to review the HOS sites I discussed in the previous post for their "elements of style." And perhaps, I should keep in mind my Strunk and White elements while I'm at it.

The Galileo Project

balance                -- pretty good
rhythm                 -- simple, good
proportion            -- proportions pretty good, would like the 
                               "reading" text to be a little bit bigger
dominance           -- color palate is great, but the text is NOT a
                                dominant color, images just big enough to 
                                contribute to the text
unity                    -- very nicely done, love the inclusion of the site 
                                map, really shows the repetition and ease of 
                                finding info on the site

The History of Science Society


This site is very simple and very well done. But it is a very basic site on the Society itself, so it's not a very complex site with a lot of different information. Simple. Elegant. Front page is update with information and news. I didn't scroll all the way down, and found that in comparison with the SHOT site, I like to see the WHOLE front page, so maybe a static page?

The Society for the History of Technology

Like the HOSS site, SHOT's site is very simple and very well done. Again, it's not a very complex site with a lot of different information. Simple. Elegant. Nice colors. Cool addition right on one of the tabs at the top is a "Resource" page. HOSS could use one of those.

Cultures of Knowledge

balance and rhythm -- a pattern emerges, index on the side, larger 
                                    scroll of the "reading" text, white space to
                                    edge of page (one one or both sides, Galileo
                                    had white space only on one side)             
                                   dominance -- colors nicely done, dominant 
                                   text shows highlighted readings
unity                        -- page to page stays the same, good unity

I'd like a site map, not exactly clear what information was where. Also a link to their super cool project should be on that front page! -- Early Modern Letters Online.

Ptak Science Books

balance                 -- nice balance, breaks model I mentioned 
                                 earlier
rhythm                 -- nice relationship to the white space and images
proportion            -- images that should be bigger are
dominance           -- not a whole lot of dominant text, so eyes don't 
                                really know where to go; colors are ok - not 
                                offensive, but could use, some background 
                                color to split off sections of informationthis 
                                makes information hard to find and use right 
                                away, takes some time to swim through
unity                    -- nice repetition

Also pintrest? I can't keep up. I'll figure that out when it's been around for ten years.

From Cave Paintings to the Internet

There is nothing not awesome about this. Beautifully developed and SOOOOO easy to use.  Crazy good design. 



The Scientific Revolution HomePage

balance 
rhythm                -- the rhythm of this site is not perfect, sometimes
                               you'll be following along and a link will take 
                               you back to Hatch's home page, rather than the                     
                              Sci Rev homepage, requires more hunting about  
                             how to get back to where you were
proportion
dominance           -- Sometimes pages can be really busy, with 
                                colors and patterns, but it is OLD SCHOOL
unity                    -- what is identified as a link to a new page is not    
                                very uniform

I love this site, because I've been using it since 2001 or 2002, but that is in part because it has great basic (while still a wide berth) of information on what I studied. Dr. Hatch has continued to add new idea, information, and research, but it is definitely not the most up-to-date on information or design. This site is kind of a window into the history of the History of Science.

No comments:

Post a Comment

Question? I have answers...