Embed Size (px)
Citation preview
www.finalsite.com
Design Best Prac.ces
www.finalsite.com
Connect with Us
/finalsite @finalsite @finalsite
Join the conversation using #finalsite or #finalsitewsw
Questions & Feedback: [email protected]
www.finalsite.com
www.finalsite.com
How do people read the web?
• They don’t. • 25% slower than a printed page.
www.finalsite.com
Design
F-‐shaped paAern (Nielsen, 2006) the most common way to consume content on the Web.
User eye movement
www.finalsite.com
Group Project
If the average user spends 7 seconds on a page. First words come to you when see these sites.
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Mobile
Start with your mobile site in mind
www.finalsite.com
Mobile
www.finalsite.com
Mobile
www.finalsite.com
Mobile
www.finalsite.com
Mobile
www.finalsite.com
Responsive Design
www.finalsite.com
www.finalsite.com
Mobile
Naviga.on
www.finalsite.com
Group Project
• The three-‐click rule or three click rule is an unofficial web design rule concerning the design of website naviga.on. It suggests that a user of a website should be able to find any informa.on with no more than three mouse clicks. It is based on the belief that users of a site will become frustrated and oVen leave if they cannot find the informa.on within the three clicks.
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
Portal Page Type Appleby College Portal page type with custom content in page content 1
www.finalsite.com
www.finalsite.com
Mobile
Use Graphics
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
• Interac.ve map • Online campus tours
(given by students) • Video • Facebook feeds
www.finalsite.com
www.finalsite.com
www.finalsite.com
www.finalsite.com
Using Media
www.finalsite.com
Photos
www.finalsite.com
Photos
• Convey your message with photos. Size and save for web correctly
• Photos of people and ac.vity are usually beAer than school buildings
www.finalsite.com
www.finalsite.com
www.finalsite.com
Photos
www.finalsite.com
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Photos
www.finalsite.com
Photos
hAp://www.ljcds.org/page.cfm?p=2438
www.finalsite.com
Photos Some Specs
– 72dpi – 1024 px wide = Matches the display size of the slideshow player
• Best quality – 72 dpi – 1920 px wide = Matches the size of the full size image when viewed at full screen
www.finalsite.com
Finalsite Editor
www.finalsite.com
Photos
www.finalsite.com
Speed Matters
www.finalsite.com
Video
Ques.ons?
