Principles of web design original

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.