PURPOSE What is it for? Who are the users?
http://google.com
COMMUNICATION Easy to read Easy to find info ● Headlines ● Sub headlines ● Bullet points ● Very short paragraphs
http://apple.com
TYPEFACES Sans-serif font best for body type ● ● ●
16 px (or relative size) 3 typefaces max 3 font sizes max
http://www.weather.com
COLO(U)RS Well-planned, purposeful Functional AND Aesthetic ● ●
● ●
Contrast for text Vibrant - use sparingly for accents or calls to action Consider negative space Consider accessibility (color blindness)
http://na.leagueoflegends.com/en/
IMAGES High quality, professional Carefully chosen ● ●
Consider copyright When you can, use images, infographics, video, graphics instead of words
St. Paul’s Reflection By Chris Robinson https: //flic.kr/p/9ct6HN CC BY-NC 2.0
NAVIGATION How easy is it to get around your site? **Do what the user expects Three-click rule ● ● ● ●
Logical page hierarchy Breadcrumbs Clickable buttons Redundancy
http://www.newegg.com
GRID-BASED LAYOUT Organized and balanced Works well with natural constraints of code ● ● ●
sections columns boxes
Random placement is messy and uncomfortable for the user, gives unprofessional impression http://nytimes.com
F PATTERN DESIGN People’s natural eye tracking of page is in an F pattern Work with users’ natural behavior to place important items (top and left)* *Could be different for Arabic readers?
Eye tracking visualizations
http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
LOAD TIME Ensure fast load times by: â—? optimizing images/media â—? use external CSS and Javascript
40% of people will abandon a web page if it takes more than three seconds to load.
https://econsultancy.com/blog/10936-site-speedcase-studies-tips-and-tools-for-improving-yourconversion-rate
OPTIMIZE
MOBILE FRIENDLY Is your site mobilefriendly? Are your site’s users using mobile devices? Tablets, different sizes of monitors? If so, consider: ● Responsive layout ● Mobile-specific CSS ● Dedicated mobile site
UNFORGETTABLE GOLDEN RULES 1.
The HOME page is unique. Treat it that way.
2.
The user comes first in all design decisions. (Clients won’t always see it this way.)
3.
No website should be TUTE (Too Ugly To Exist).
4.
Always consider “screen real estate” and especially what you are putting “above the fold”.
5.
A website is NOT: print a slideshow
6.
The web IS: easily changeable interactive
7.
KNOW your users and ENGAGE them. (How can you keep them coming back for more?)
8.
Plan for The Future.
9.
Just Because You Can Doesn’t Mean You Should.
ITGS IA Documenting your design
Criterion D Sketches of pages Show your design decisions about layout, type/font choices, colors, treatment of images. These decisions should be made BEFORE you produce the site Wireframes showing navigation and main elements on page Sitemap - shows relationship between pages on the site, external links, documents Prototypes - layouts created on paper or in a program like Photoshop, different designs you considered and different choices for your client, if appropriate **Very important to get information about the site’s intended users during your investigation with the client
GOING FORWARD Commit to teaching yourself and constantly learning new things: ● Analyze sites you see - what do you like/dislike? why? ● Figure out “how they did that” ● Use CodeAcademy.com or W3C Schools and teach yourself the fundamentals of HTML and CSS ● Accept that you won’t know everything but you CAN find out Some good resources for now and the future: Sites: http://codeacademy.com http://www.w3schools.com http://alistapart.com/ http://sixrevisions.com/ http://www.webpagesthatsuck.com/worst-websites-of-2013.html http://www.webdesignermag.co.uk http://www.webdesignerdepot.com Books: Don’t Make Me Think – By Steve Krug – designing for users/user interface Head First Web Design – By Ethan Watrall