C.R.A.P. on the Web

Robin Williams (no, not the actor and comedian -- the design genius) lays out four basic principles of good design: contrast, repetition, alignment, proximity (C.R.A.P.). While these principles can also apply to print, my COMM 350 class is looking at how they work wonders on a Web page.

First, a rundown of C.R.A.P.:

• Contrast: Make different things look different than each other. Make dominant elements stand out while muting the lesser elements (basically convey their importance in the way you display them). This makes your website look more dynamic and guides the audience through the content by telling them what to look at.
• I'm doing this on my personal website, ginacole.net, by through my use of three main colors: gunmetal, cream and rose. I took the latter from a photo of an actual rose that dominates the home page. Because the site is about me, my name is the same color as the rose. The other text is cream on the gunmetal background and vice versa.
• I'm also using contrasting type to convey importance. My name is the biggest thing on my home page; it, my title and my navigation buttons are all in the same bold sans serif typeface, Gautami. I put the required sentence at the bottom of the page in a serif typeface, Garamond, so it wouldn't stand out as much to my general audience, but put a rose-colored asterisk next to it so Jason could find it more easily. I also may keep that asterisk as a consistent design element. Read on...
• Repetition: Design elements should be consistent throughout the interface. This creates unity.
• I'll use the same two typefaces and three colors throughout.
• I may also repeat the double lines on the menu bar and the rose-colored asterisk.
• Alignment: Things should line up to create a visual flow. You should be guiding your audience's eyes over the page and visually connecting the elements.
• The "View > Rulers" function on Photoshop has been my lifesaver here. I never knew Photoshop had rulers, but I always used to use them in InDesign to line things up and make them look clean.
• Proximity: Group related elements together and separate unrelated ones; this makes navigating your website and reading your content easier.
• I lined all my page links together into a navigation bar.
• I might need to use subheads in my written content, which will help group topics together.

Some other helpful hints on Web layout and design:

• Jason Beaird explains on SitePoint the design process, what good design is and how to implement it.
• "Users should be pleased by the design but drawn to the content," Beaird says. I hope to make this the case on my site by not using loud, garish color schemes and taking advantage of what the rose photo offers as a background. It makes for a pleasing home page, and I can cover it with an opaque-ish rectangle of content on the other pages, leaving just the top part exposed to look pretty while keeping the focus on the content in the center. I'd been struggling with how to present content on the other pages, but I think this rectangle design will do it. It will help fulfill another of Beaird's recommendations: "Users should recognize each page as belonging to the site." My only concern about this is the link to a PDF of my resume, which matched my initial site design but has a different color scheme than the site does now. I might need to redesign my resume yet again!
• Read more of Jason Beaird's "Principles of Beautiful Web Design" here:  http://www.sitepoint.com/principles-beautiful-web-design/
• On Inspect Element, a Web design and development blog, Tom Kenny explains layout in part one of a four-part series.
• The first thing Kenny talks about is white space. This doesn't necessarily have to be white; it just means the blank space between elements on a page. It harkens back to Williams' principle of proximity -- when you group things together, you naturally end up with white space between them (if you're doing it right!). Letting elements "breathe" calls more attention to each of them. I'll try to keep this in mind as I work on fitting all my content into an admittedly small space.
• Read more of Tom Kenny's four-part series "The Principles of Good Web Design" here:  http://inspectelement.com/articles/the-principles-of-good-web-design-part-1-layout/
• Brandon Jones of Tuts Plus' Web Design site explains the "F-layout."
• Eye-tracking studies have shown users scan a Web page in a particular way, so layouts that mimic that pattern are successful. For example, Jones points out that users look at the top left of a page first -- probably because that's how we read. I'm glad I put my name and title in the top left of my site!
• Users then scan the top of the site from left to right, then down the left side. This is probably why most navigation bars are horizontal across the top or vertical down the left. While I don't have a horizontal navigation bar, I'm hoping the fact that eyes land at the top right before moving on downward helps me out.
• Read more about this layout and why it works in Brandon Jones' article "Understanding the F-Layout in Web Design":  http://webdesign.tutsplus.com/articles/design-theory/understanding-the-f-layout-in-web-design/

That's all for now. I hope this post gave you some idea of what makes effective Web design and layout. Researching for it definitely gave me some things to think about -- and good ideas -- for my own site!