10 design & layout principles guaranteed to improve
DESCRIPTION
10 basic layout and design principles that every web designer should be aware of. Improve scan-ability, accessibility, readability and conversions.TRANSCRIPT
![Page 1: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/1.jpg)
10 DESIGN & LAYOUT PRINCIPLES GUARANTEED TO
IMPROVE YOUR WEBSITE
Lauren Martinwww.sitemotif.com
![Page 2: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/2.jpg)
Get your visitors attention on your website’s goal.
1. Visual Call to Action
![Page 3: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/3.jpg)
Visual Call to Action
One primary action you want your visitors to take.
Use contrast and size to catch attention.
The action text should be clear and obvious.
Located near the top of page above the fold.
![Page 4: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/4.jpg)
Page Fold
Below fold, hard to read, unclear action.
![Page 5: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/5.jpg)
“Click to Play!” doesn’t have nearly as much contrast as the 5 other buttons lower on the screen which compete for your attention.
![Page 6: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/6.jpg)
![Page 7: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/7.jpg)
![Page 8: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/8.jpg)
![Page 9: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/9.jpg)
Importance based structure and scan-ability.
2. Organized Layout
![Page 10: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/10.jpg)
Organized Layout
Convey information about what’s important.
Lead the user into content there looking for.
Improves scan-ability. Use header tags (h1, h2, h3, etc…)
appropriately. Provides visual breaks, groups, and
chunks. Use alignment, date, subject, etc to
create sections. Size and color to convey priority and
importance.
![Page 11: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/11.jpg)
Nothing really stands out, the section headers are hard to read and fade into the background, most of the text is the same size, I’m not sure where to look.
![Page 12: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/12.jpg)
![Page 13: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/13.jpg)
![Page 14: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/14.jpg)
508 Compliance = websites should work for everyone, that includes people with disabilities.
3. Accessibility
![Page 15: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/15.jpg)
Accessibility
Use ALT tags on images for screen readers Ensure HTML is ordered by hierarchy. Improve readability for those with low-vision
through size and contrast Options to increase font size Avoid pop-ups Use proper input-field/labeling Don’t use color as a sole indicator for
differentiation Design for smaller screen sizes, then scale.
![Page 16: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/16.jpg)
Small, light blue text, on a lighter blue background. Very hard to read.
![Page 17: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/17.jpg)
Extremely small and hard to read. The text bar also only appears when you over the area, so the page appears empty otherwise.
![Page 18: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/18.jpg)
Indicate where you can take an action.
4. Affordances
![Page 19: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/19.jpg)
Affordances
Links should not be the same color as your text
Buttons should appear beveled or have a hover to differentiate them from plain graphics.
Form items should be grayed out if they are not clickable.
Mouse icon should change to indicate when something is clickable.
Textures and patterns can imply grips when things can be dragged.
![Page 20: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/20.jpg)
The only reason I even thought to see if “CONTACT ME” was a button, is because the text was a verb. There is no hover effect either.
![Page 21: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/21.jpg)
While the yellow chalk arrows appear to be part of the background, they are actually the only way to interact with this gallery.
![Page 22: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/22.jpg)
Which things are clickable? I’ll give you a hint… “Featured Work” is not a button, and “Web Design” is not a link.
![Page 23: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/23.jpg)
![Page 24: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/24.jpg)
Don’t leave me hanging, give me some help.
5. Assistance
![Page 25: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/25.jpg)
Assistance
Provide an FAQ or help section Try to avoid allowing errors, but when they
occur explain: What’s wrong What you need from the user How they need to do it
Instructions should be clear, specific and to the point.
Provide good defaults and constant feedback.
![Page 26: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/26.jpg)
![Page 27: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/27.jpg)
We throw things away in the trash, we do not re-allocate disk space.
6. Real-World Mental Model
![Page 28: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/28.jpg)
Real-World Mental Model
Avoid fancy, industry, or techie terms. Use Layman’s terms.
When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase.
Design concepts to be consistent with how they work in everyday life.
Similar in functionality, language and appearance.
![Page 29: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/29.jpg)
![Page 30: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/30.jpg)
The simplest explanation or strategy tends to be the best one – Occam’s Razor
7. Keep it Simple
![Page 31: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/31.jpg)
Keep it Simple
80/20 Rule Avoid excessive text or explanation Forms shouldn’t ask for unnecessary\
additional information. Reduce clutter, and appreciate white
space like a pause in a sentence. Be upfront, clear, and to the point. The
rest is unnecessary. Focus on the core goals and tasks.
![Page 32: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/32.jpg)
I’m not sure where to look, how to interact with it, or what it’s for. So… I left (as soon as I took this screen shot)
![Page 33: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/33.jpg)
There is simply WAY too much text on this page.
![Page 34: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/34.jpg)
![Page 35: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/35.jpg)
![Page 36: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/36.jpg)
We tend to look at smiling faces, and products. Our eyes seem to jump over the rest resulting in just more stuff on the page we have to get past.
8. Suitable Graphics
![Page 37: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/37.jpg)
Suitable Graphics
Put thought into your graphics. Stick to a color scheme. Avoid overly generic clip art just to add to
the page. Every image and graphic should have a
specific purpose. Stick to a theme or consistency in
appearance. (all sketchy, or all photos etc) Focus on your product or offering.
![Page 38: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/38.jpg)
There is no connection with this background graphic and the content, not to mention it kills the readability of the page.
![Page 39: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/39.jpg)
![Page 40: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/40.jpg)
![Page 41: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/41.jpg)
Where am I? Where can I go?
9. Navigation
![Page 42: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/42.jpg)
Navigation
Take advantage of standards, and place the navigation near the top, or down the left side.
Clean, clear, simple labels, easy to read and see.
Highlight the visitors current location vs. other locations.
Provide feedback when in sub-levels as to the visitors location and how to get back.
Should be easy to see how much information the site offers, how deep each level is.
![Page 43: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/43.jpg)
See if you can find the navigation…
![Page 44: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/44.jpg)
Page FoldAside from the fact that I had to scroll forever, you can’t tell what’s clickable or where you can go. Is there only a home page?
…After much further investigation, I found there is more content…
Page Fold
Page Fold
Page Fold
![Page 45: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/45.jpg)
![Page 46: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/46.jpg)
![Page 47: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/47.jpg)
![Page 48: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/48.jpg)
There’s just something fun about this.
10. Delight
![Page 49: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/49.jpg)
Delight
Once you have everything else figured out, add a smile.
Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc.
Little fun interactions used sparingly. Take the user away from the mundane. Pleasant surprises.
![Page 50: 10 Design & Layout Principles Guaranteed To Improve](https://reader033.vdocuments.net/reader033/viewer/2022042814/54c236294a7959b9758b45f7/html5/thumbnails/50.jpg)