Jeffrey Pease
CITA 330 Design Guide
Contents
1 Ben Hunt Design: White on White Web Design Style ................................................................ 3
2 Ben Hunt Design: Web 2.0 How to Design Style Guide ............................................................. 4
3 Elliot Stocks Chap 2 Research ..................................................................................................... 8
4 Elliot Stocks Chap 3 Structure ..................................................................................................... 9
5 Steve Krug Chap 1 Don't Make Me Think! (Usability) ............................................................. 10
6 Steve Krug Chap2 How We Really Use the Web (scanning) .................................................... 10
7 Elliot Stocks Chap 4 Navigation and Interaction ....................................................................... 11
8 Steve Krug Chap 3 Billboard Design 101 (scanning) ................................................................ 12
9 Steve Krug Chap 6 Street Signs and Breadcrumbs (navigation) ............................................... 13
10 Steve Krug Chap 7 Designing the Homepage ......................................................................... 14
11 Chap 8 Arguments about Usability .......................................................................................... 15
12 Chap 9 Usability Testing ......................................................................................................... 15
13 Elliot Stocks Chap 6 Deliverables ........................................................................................... 17
1 Ben Hunt Design: White on White Web Design Style
http://www.webdesignfromscratch.com/web-design/white-on-white-web-design/
Save the Pixel is the web design discipline that teaches a minimal approach to using pixels.
Following the pixel-saving standard, web designers should use pixels with care, as though they
are a precious limited resource.
Pixels should only be used to communicate with the site’s visitors, whether by presenting hard
information (text & data), or using images and graphics to convey softer meaning.
Over time, my design has taken the following direction:
Backgrounds have tended towards soft light grey, giving nothing to draw the eye, with
softer gradients.
Headings have grown bigger and more contrasting; larger text in black or strong colors
drawing attention to the primary meaning of the page.
Strip "page furniture" down to the basics, to the point that if you take out all the content,
there should be very little page left to see.
Layouts are simpler and plainer than ever, usually conventional, and having fewer
columns, often distinguished just by shades of tone.
The background, or page canvas, tends to be light grey, for the following reasons.
Usually have a background tone because almost all the layouts we do today are zoom-
width (i.e. master width defined in ems in CSS), to avoid the layout and line length being
stretched too wide.
It’s good for your background to look like a background, distinct from the content area,
so that it’s clear for visitors where to look to get what they need.
You don’t want your background to contrast too much against the content area, because
this would create a high-contrast edge, which draws the eye away from the content.
And if our content area is white, the background should be a close plain tone, which
means light grey or very pale colors.
When you have a simple, plain, fresh environment, it gives you a great space to show your
content for high impact and good, clean communication.
The term "white on white" comes in where, not only is the background spacious and well-lit, but
when you find the main "furniture" elements are taken from a bleached-out palette.
Your eye is drawn to color and contrast that stands out, so when we white out the background of
the page, you have to look at the content, and the designer can easily make the most important
bigger, bolder, and more contrasting to make visitors see it.
The main principle here is that we use just enough contrast in tone and color to let you
distinguish one element from the next, but no more, in order to minimize the visual draw of
background graphics.
2 Ben Hunt Design: Web 2.0 How to Design Style Guide
“Web 2.0″
a resurgence in the web economy
a new level of technological interactivity between web sites and services
or social phenomena deriving from new types of online communities and social networks
Simplicity
Web design is simpler than ever, and that’s a good thing. 2.0 design means focused, clean and
simple.
Why simplicity is good?
Web sites have goals and all web pages have purposes.
Users’ attention is a finite resource.
It’s the designer’s job to help users to find what they want (or to notice what the site wants them
to notice)
Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to
notice, and the less likely a user is to notice the important stuff.
So we need to enable certain communication, and we also need to minimize noise. That means
we need to find a solution that’s does its stuff with as little as possible. That’s economy, or
simplicity.
Remove unnecessary components, without sacrificing effectiveness.
Try out alternative solutions that achieve the same result more simply.
Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual
elements.
Central layout
Basically, the vast majority of sites these days are positioned centrally within the browser
window. Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a
few years ago.
Why a central layout is good
This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple,
bold and honest.
Also, because we’re being more economical with our pixels (and content), we’re not as
pressurized to cram as much information as possible above the waterline/fold.
We’re using less to say more, so we can be a bit more free and easy with the amount of space
used, and pad out our content with lots of lovely white space.
Position your site centrally unless there’s a really good reason not to.
Fewer columns
Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating
less information more clearly.
No more than 3 columns, simply because you should use no more of anything than you
need to
Separate top sections
This means making the top of the screen (the main branding & nav area) distinct from the rest
(the main content).
Why distinct top sections are good
The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know
clearly where the page starts.
It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited.
We like strong, simple, bold attitude.
On any site, both the main branding and main navigation should be obvious, bold and clear
Solid areas of screen real-estate
Leading on from the clearly differentiated top area, you’ll notice that lots of sites define the
various areas of real-estate boldly and clearly.
Real estate comes in various forms, including:
Navigation
Background / canvas
Main content area
Other stuff
Callouts / cross-links
Simple nav
Permanent navigation – your global site nav that appears on every page as part of the page
template – needs to be clearly identifiable as navigation, and should be easy to interpret, target
and select.
2.0 designs make global navigation large, bold, clean and obvious.
Inline hyperlinks (links within text) are typically clearly differentiated from normal text.
Why simple navigation is better
Users need to be able to identify navigation, which tells them various important information:
Where they are (in the scheme of things)
Where else they can go from here
And what options they have for doing stuff
Following the principle of simplicity, and general reduction of noise, the best ways to clarify
navigation are:
Positioning permanent navigation links apart from content
Differentiating navigation using color, tone and shape
Making navigation items large and bold
Using clear text to make the purpose of each link unambiguous
Bold logos
A clear, bold, strong brand – incorporating attitude, tone of voice, and first impression – is
helped by a bold logo.
Here are some (100% scale). Notice that logos are tending to be quite large, in line with the
general 2.0 principles.
Your logo should:
Work visually in its main context, and any other uses in which it may be used (like flyers or t-
shirts?)
Be recognizable and distinctive
Represent your brand‘s personality and qualities on first viewing
Bigger text
Lots of “2.0″ web sites have big text, compared to older-style sites.
If you fill the same amount of space with less “stuff”, you have more room.
When you’ve made more room, you can choose to make more important elements bigger than
less important elements (if they’re still there).
Bold text introductions
Leading on from the big text theme, many sites lead with strong all-text headline descriptions.
These normally set out the site’s USP, elevator pitch or main message.
Strong colors
Bright, strong colors draw the eye. Use them to divide the page into clear sections, and
to highlight important elements.
When you have a simple, stripped-out design, you can use a bit of intense color to help
differentiate areas of real-estate and to draw attention to items you want the visitor to notice.
Rich surfaces
Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.
We all know that these little touches just feel nice, but we may not know why.
Gradients
Web 2.0 design has more gradients than the Alps.
Why gradients are so useful
Gradients soften areas that would otherwise be flat color/tone.
They can create the illusion of a non-flat surface
Reflections
The illusion of reflection is one of the most common applications on gradients.
These commonly come in 2 kinds:
Highlights caused by light reflecting on shiny surfaces
That shiny table effect!
Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular
over the past couple of years.
That shiny table effect!
Pioneered by Apple again (I’m sure). This is a really nice effect which is so prevalent now; it’s
in danger of being overused, now starting to look tired and is falling out of favor with designers.
Cute icons
Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry
more meaning.
Icons can be useful when they’re easily recognizable and carry a clear meaning. In lots of other
cases, a simple word is more effective.
Star flashes
These are the star-shaped labels that you see stuck on web pages, alerting you to something
important.
They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up
ethic of many 2.0 sites, but for the same reason may cheapen other sites.
They can really work well, but of course should only be used to draw attention to something
important.
Only use one on a page (at most!).
3 Elliot Stocks Chap 2 Research
Design brief
details what the client expects of the design you’ll build.
5 W’s - who, what, when, where, why, & how
Briefs must include specific questions and details in order to obtain the best information possible
to build a frame work, or build off an existing frame work.
Brief provides main goals, a look; feel and technology
Desirables are what are wanted in the project such as main and secondary objectives, general
objectives, information and how to display it
Technical requirements
Provide specific information such as a fixed width
What kind of navigational hierarchy (top, side – left or right)
What other technology to use (flash, java etc…)
What images and headings to use and any advertising that will be added
When creating a site you need to evaluate the core concepts and brand values
Sites must be fun but also creditable and free from malarkey
Brand consistency – Goal of keeping a consistent look, feel and message across all of the
company’s communications, including website.
Research is one of the most valuable ways to spend as a designer. Keep your eyes and mind open
and let yourself be influenced as much as possible. The more research you do the better and
likely your design will be a success.
4 Elliot Stocks Chap 3 Structure
Sitemap – list of the pages you will find on that site, displays structure.
Wireframes – deal with structure of individual pages. See Below
Global elements – sponsor logo, event title, date, venue, navigation, and a register button.
Wire frames use bold lines to display importance of content and sections as well as use of text to
display what located there such as a logo.
Wire frames can apply to any page to help design. Including speakers, party and registration
pages.
Site maps lay out the design and look of how you want a site to work, navigation shows how it
actually works out from page to page.
Label sketches as you work.
Upon completing sketches a neater version might be helpful to create in a program like Visio or
sitemap to give a neater and electronic copy to be able to send out if needed.
5 Steve Krug Chap 1 Don't Make Me Think! (Usability)
Don’t make me think!
Less thinking when looking at a website
Make everything clear (buttons, links etc…)
Eliminate questions in the site, where do I start, what do I do etc…
Be clear in you naming, don’t name a jobs link/button job-a-rama.
Make clickable items obvious
Label everything clearly; no need to jazz things up it will only cause questions or create more
thinking
Try and eliminate some of the thought process in browsing a site or searching.
Try and make things self evident but not everything has to be. Just be clear in your message and
what users can do or you want them to do.
6 Steve Krug Chap2 How We Really Use the Web (scanning)
Rule #1: We don’t read pages we scan then.
People are in a hurry. They don’t read everything
Not all information needs to be read on every page.
We are good at scanning things.
Rule # 2: We don’t make optimal choices we Satisfice – choosing first reasonable strategy.
There’s not much penalty for guessing wrong – usually results in an extra click or two if wrong.
Rule # 3: People muddle through not work things out. – googling ebay even though they visit it
every day and know the link address.
If it’s not important to us it doesn’t matter if we understand how it works as long as it works.
If we find something that works we stick to it as long as it works.
7 Elliot Stocks Chap 4 Navigation and Interaction
Navigation = list
Navigation always takes form in a list-why? Because they are a way of displaying
information in a simple clear easy to read manner.
Online navigation can be laid out as bigger topics take top level of menu and littler topics and
take submenus
Homepage buttons? Should we link them back with a home button? Or should the logo act as a
home button?
Main or Global navigation appears on every page of the site allowing users to go back and forth
as they please.
Supporting navigation is used to supplement global navigation for example links to pages you’d
like to have on every page but done need the same visual weight as a global link.
Local navigation – guides a user to certain sections in a long page – for example jump to a
particular section such as a speaker or event etc…
Breadcrumb trails show the user a path. For example a list of pages hit from the homepage
Ex: homepage, shop, software, adobe
Search bars allow users to quick and easy search the site for a particular search term they input.
It can either search the site or go out to the web and search also.
Pagination – provides a way to divide up chunks of info like blogs or articles into more
manageable easy to read blocks.
Ex: page selector Page 1 of 12 1,2,3,4,5,6,7 ….. Last >>
Navigation styles – there are many styles of navigation, each with certain expectations of how it
should act. Ex: tabs, side nav, horizontal nav
Drop down menus - provide handy ways of showing submenu’s without the clutter. Only appear
when clicked or hovered over.
Tabs – tabs suggest that the content they link to is all part of the same cohesive whole.
Refers to hanging folders or a real world desk
Collapsible/expandable – accordion menu – animated effect – dynamic – resemble an accordion
file folder and how it expands and collapses while you flip through it.
Tag clouds - visual way of presenting sets of topics
Implies a sense of what topics are most discussed
Usually dynamic
o Size constantly subject to fluctuation as site and content changes
o The terms that form it are updated as new topics arise
Forms – aim is to achieve balance between getting as much info as possible and too much info to
give
Typical form has name, address, email, username, password, birthday, and a confirmation code
Audio and visual content – extremely common to portray extra information in a more appealing
manner compared to text
Video
Music
Images
8 Steve Krug Chap 3 Billboard Design 101 (scanning)
Create a clear visual hierarchy.
The more important something is the more prominent it is
Emphasis important content
Things that are related logically are also related visually
Group related topics
Things are nested visually to show, what’s part of what
Conventions are your friend
Break pages into clearly defined areas
Easier to read and understand
Make what’s clickable obvious
Don’t make people think if it’s a link or not
Keep noise down
Busy-ness
The sense that all elements on a page are competing for your attention with
bright colors, and exclamation points.
Background Noise
No one noise is loud enough or distracting enough to direct your attention to
it - Lots of visual noise competing for your attention.
9 Steve Krug Chap 6 Street Signs and Breadcrumbs (navigation)
Scene from a mall – looking at navigation/direction signs high on the walls, vague signs that lead
you all around the store searching for that product you need.
Web navigation 101
You’re usually trying to find something – cheap DVD’s to whatever you need your trying to find
something at the price you want, easier is better.
You decide whether to ask first or browse first – no one is on a website to guide you to what
you’re looking for, you have to find it yourself unlike in a store. Search bars can be helpful
unless you know where you’re going or have no idea what you’re looking for.
If you browse you use signs to guide you through the hierarchy of the site, such as home, tools,
and power tools.
Eventually if you can’t find what you’re looking for you’ll leave – if you can’t find what you’re
looking for you get convinced they don’t carry it or get sick of looking so you leave the site.
The unbearable lightness of pages
No sense of scale – is the site 50 pages? 20? Maybe 10? Even after we visit a site most of
the time we have no concept of how big that site was or what we missed or could have
found.
No sense of direction – there’s no sense of left or right in a website, just forward and
backwards. Or up and down the hierarchy
No sense of location – in physical spaces we gain knowledge of the space. We develop
senses of shortcuts and use those shortcuts to get to things quicker and easier.
The over looked purpose of navigation
It gives us something to hold onto
It tells us what’s here
It tells us how to use the site
It gives us confidence in the people who built it
Site logos and ids provide the user with the information ok, I’m at MSNBC, and it lets them
know where there are at what site.
Sections break the site down for users into more manageable easy to use sections and give an
idea what they can expect under the contact us section or the image section.
Every site should have a home button as a way to get back to the homepage if users desire. Most
sites now days are using the logo to do this instead of a “home” button.
Searching can be tough in pages, you don’t always know what to type in to search r what you
will get or get the wrong thing.
You are here – where are you in the site? Where’s the little red x, how do you know where you
are in a site? Wheres the bread crumbs to help you know where you are? Is there bread crumbs?
10 Steve Krug Chap 7 Designing the Homepage
What’s in a homepage?
Site identity & mission
Site hierarchy
Search
Teases
Site promos (content and features)
Teases
Timely content
Deals
Shortcuts
Registration
Show me what I’m looking for
What am I looking for?
Where do I start?
Establish credibility and trust
How to get your message across
Taglines
Welcome blurb
Don’t be afraid to use space to get your message across
o Don’t use TOO much or more than necessary though
o Don’t use a mission statement as a welcome statement
o Trust other peoples judgments on the homepage, not your own, you are too close
to it.
Taglines can’t be beat Ex: all the news fit to print
Not all sites need taglines like eBay Amazon and CNN but most do
Where do I start? The 5th question
Pull down menus can be hard because you have to seek what you want if its there, hard to scan
and twitchy.
You be the judge
What’s the point of this site?
Where do I start?
11 Chap 8 Arguments about Usability
Everybody likes something different
Webdev teams aren’t notoriously successful with decisions about usability questions.
They spend lots of precious time going over and rehearsing issues over and over
Everyone’s a web user we all have that in common
Personal vs professional
&
Farmer’s vs cowmen
They both have different perspectives and beliefs
All web users are unique and al web use is basically idiosyncratic
Decisions and opinions are based on many variables such as pull-downs, logos and content.
There is no simple right answer
There is also certain things that should not be said as never be done, there’s always exceptions
12 Chap 9 Usability Testing
Sample Usability Testing Session
Steve Krug. 2006. Don’t Make Me Think. New Riders Publishing. Berkeley, CA
Explain to the test users you are asking for their feedback to improve a web site, and that their
comments are private and will not be shared with anyone other than the developer who is
working to make the web site better.
1 When you take a look at the page, what do you think it is? What strikes you about the page?
She thinks is home page and the picture strikes her
______________________________________________________________________
2 Don’t click or scroll, quite yet. Tell me what you would click first
She will click Assignment first
______________________________________________________________________
3 As much as possible, try to think out loud …. Try to tell me what you’re thinking about as you
examine the page.
She trying to see where the picture was taking
______________________________________________________________________
4 What do you think this page is about?
The guy in the picture because he have no name on the page
______________________________________________________________________
5 If you were someplace else, and happened to visit this site, tell me what you would click first
(but don't click yet)?
She will still click the assignment link, because that what she see first
6 Can you list 3-4 things on the page that capture your attention?
The picture, the title, the links, and the sentence that says” please feel free to look around”
______________________________________________________________________
7 What do you understand these 3-4 things to be? What do you make of them?
She understand that the picture because is a picture
8 Is there any reason you paid attention / did not pay attention to these things before I asked?
She paid attention to the picture because that’s the only one that stands out
9 Now, go ahead and click on something that captures your attention. What do you see? What is
your first impression?
When she clicks on the assignment link, she doesn’t see anything different.
10 If you wanted to go deeper into the content of this site, list 2-3 things you would do. What
would you do first?
She found it boring and the I” is in lower case
______________________________________________________________________
11 Go ahead and click /go further into the site content. (Observer, record what the test user
does). Ask the test user to try to think out loud as they explore the site.
She will do something to separate the links from the background.
______________________________________________________________________
12 Repeat the step above 2-3 times. What does the test user do? What does the test user think
about?
She thinks the site is boring
______________________________________________________________________
13 Can you make 2-3 statements that sum up your experience on this site?
Nothing stands out with the grey background
______________________________________________________________________
14 If there was one thing you could change on this site, what would that be?
A different background color then gray because she don’t grey as a fun color
Related Topics to Consider in Discussion with Test User
What stands out on the page as important?
What things do you have to think about for a second or two?
What things raise a question for you?
Are there names of things that are not clear to you? Is there a simpler way to name these things?
List any questions that occur to you when you visit the site.
What are the most important things on this page?
Do you know where you are in the site?
Do you know where to begin?
Do you know why they call it that?
Do you think you “get it” --- understand what this page is about?
Do you understand how to proceed?
Do you find this page easy to use?
13 Elliot Stocks Chap 6 Deliverables
Organizing layers
layer groups
o folders that contain layer and further subfolders
clearly label labels for easy recognition
Photoshop notes tool is handy for annotates parts of your design and helps save trying to
describe to a developer via email.
Well organized layers is helpful when exporting in both full-size mockups and individual
parts of the design
Create layer groups for each page to allow for easier page viewing
Main background
Has become a rather complex image – gradients, effects etc…
Noise and texture can repeat on axis’s
Presenting mockups
Clients want to see the product in the context it will be used for
o Paper, web etc…
Attaching as an email is a mistake, avoid it at all cost. If it’s for a website present it
online because that’s where websites get viewed no in email or on paper.
Templates can be simple to create and use with the help of CSS and also help in
productivity and simplicity
Functional mockups – a semi functional site that is basic html allows for limited
functionality but also give a sense of how the site will work.
Style guides
One of the most important deliverables of all.
They ensure that anyone else who works on the site after you’ve handed it over your design has a
clear idea of type, layout, color etc…
Can be put together in almost any means
Shows things used like what colors, content, headings, fonts and more….