This week in Comm 350 we discussed CRAP. I know, this sounds a bit weird, but don't worry, its only an acronym- were not studying CRAP in the literal sense. First off, Robyn Williams first coined the term C.R.A.P which stands for contrast, repetition, alignment, and proximity. In order for me to use these components in my own website design, I began researching what some websites had to say about the basic components of website design. Here's what I found to be useful for my own website.
How C.R.A.P is your website design?
Mike Rundle wrote there are 4 components to web design:
1. Contrast: strong contrast helps the readers eye flow through the web content
a. Good contrast makes sites appear organized and clean
b. Allows the reader to figure out what is related and separate
c. Good contrast separates main ideas and allows readers to stay focused
2. Repetition: make sure the site is related and consistent
a. Same page elements
b. Logos- always consistent
c. Gives a feeling of consistency
d. Makes it easier to utilize when actions are in the same location consistently
e. Repeating design elements Reinforces meaning to the user
3. Alignment: Everything on the page is in line, and nothing is out of place
a. Hallmark of good web design
b. Line things up
c. Make sure all is symmetrical
d. Either left align or right align but don’t do both
e. Centered headlines are classy- centered body isn’t
f. Use existing hard edges to line up other elements
4. Proximity: a related meaning which groups elements together when appropriate
a. Similar or related elements can be grouped together to form a whole
i. Synergistic
b. Items that aren’t similar should be visually separated from one another
c. Keep subheadings aligned and close to headings to make clear they are cohesive
d. Headings should appear close to the paragraph they are applied to
5. C.R.A.P:
a. Good components to double check your work
b. Pretty soon, you won’t need to use these tools, it will be imprinted in your brain and become automatic
The principles of beautiful web design:
- Discover:
- What does the company do?
- What is your role in the company?
- Does the company have an existing logo or brand?
- What is your goal in developing a web site?
- What information do you wish to provide online?
- Who comprises your target audience? Do its members share any common demographics, like age, sex, or a physical location?
- Who are your competitors and do they have web sites?
· Implement:
o Use what you have learned about your topic/client and use it to create a design
o Sketch layouts
· Good Design:
o Good vs. bad web design
o Aesthetic perspective which focuses on presentation and graphics
o Don’t get caught up in visually pleasing aspects only, remember the user
o Design is about communication
o If you make a beautiful website what isn’t usable and accessible, people won’t use it
· Users are pleased by the design but drawn to the content
o Design shouldn’t hinder the user, it should act as a bridge between the user and the information
· Users can move about easily through intuitive navigation
o Navigation blocks should be clearly visible
o Each link should have a descriptive title
o Include an active page or section indicator, that way the user can recognize where they are and how to get where they want to go
o Secondary search fields shouldn’t dominate the page
· Users recognize each page as belonging to the site
o Use a cohesive theme or style across all pages
o Different content, same visual indicators which let the user know they are still on the same site
o Repeat identity and navigation blocks
o Repeat color palate to unify the pages
Principles of Design and Page Layout:
1. Structuring Whitespace:
a. The “background color”
b. The white space is as important as the elements placed upon it
c. Never ignore whitespace
d. All space should be accounted for
i. Doesn’t mean you fill all space, just make sure when you have areas of whitespace that they are conscious choices which add to the overall composition of your page
2. Balance:
a. Consider the visual weight of each element when arranging
b. Weight= size of the object, value (dark weighs more than light), or the density of the detail/texture of the object
c. Balance in contrast is vital- balance visual similarity and contrast in composition
d. Proportions and size relationships affect balance
i. A large object seems much larger when placed by small objects
3. Symmetrical Balance:
a. Simplest way to create balance is with a formally/symmetrically balanced page
b. Right side is identical to left side
c. Don’t center
4. Asymmetrical Balance:
a. Skillful arrangement of elements with different visual weights
b. Several small elements can be balanced by one large one
c. Use grids if following this technique
5. Lack of Balance:
a. Unbalanced layout
b. Use if goal is to create a feeling of uneasi-ness or instability
c. Detracts from effectiveness of your site
6. Consistency Across Pages:
a. Stick with theme across pages
b. Encourages the reader to explore your site
7. Designing for Paper vs. Designing for WWW:
a. Computer screens are typically wider than taller
b. Difficult to design for paper and screen
c. Some material may be more practical in a vertical format to ease printability
8. Using Grids:
a. Useful to use a grid when designing layout
b. Invisible structural guide
c. Establishes organized unity to one or more pages
d. Ruler on Photoshop
e. Maintain the balance on your page
9. Focal Points:
a. When you’re done with the webpage, open it up in a browser and stand back without reading the text
b. Close your eyes for a minute than open them up and look at the page
c. What element do you see first
d. Where does your eye move next, intuitively?
e. Ask other people to do this as you may be biased
f. Evaluate the focal point
i. Is it overwhelming?
ii. Are components overwhelming? like Contrast? Size? density? Value?
g. Whether conscious or not, the designer has created a path for the eye to take, if there is no focal point the user will be confused and leave the site.
After researching this, I am sure I will be able to use this advice when I am making my individual and group website, and I hope you will too. I think one main point I will take from this is the importance of white space and balance. I never really understood why some websites seemed a bit off, and now the more I look at some, I realize it is the in-proportional white space and lack of balance across the page. I think these three websites cover the importance of basic web design and layout. Particularly, contrast, repetition, alignment, and proximity. I hope this information helps you as much as it did me, talk to you next week bloggers!