Embed Size (px)
DESCRIPTION
Presenent
Citation preview
Web Design Etiquette
@sethhinz
Agenda What it is Why it’s important Clean & Simple Design Common Mistakes Tools & Resources
A Recognition Game
What do they offer?
http://www.petersbuss.se/
http://www.wateronwheels.com/
http://www.gatesnfences.com/
What is Web Design Etiquette A set of rules that address the expectations of
the end users of your website.
Users Current Parents Prospective Parents Teachers Students
Why – Build Trust with Users Building trust is key.
If you miss a rule, it violates trust.
29% trust websites that sell services 54% trust charities / nonprofit websites 45% trust the federal government websites
Source: Consumerwebwatch.org
http://www.petersbuss.se/
http://www.gatesnfences.com/
http://www.edgebrook.cps.k12.il.us/
http://www.stmichaelguardians.org/
Why is It Important Credibility is easy to lose
Spelling & Grammar Relevant Information Overall Design
The Web Design Process
Web Design in 6 Steps Learn Plan Design Code Launch Maintain
Web Design in 6 Steps Learn Plan Design Code Launch Maintain
Clean & Simple Design
Clean & Simple Design Font Hierarchy / Typography
Text & Links Style Cohesive Colors Ease of Navigation Clear Calls to Action Information People Want Advanced Topics: Grids
Font Hierarchy
Clean & Simple Design
Six Revisions | http://bit.ly/RHgc2O
Six Revisions | http://bit.ly/RHgc2O
http://www.stmichaelguardians.org/
Cohesive Colors
Clean & Simple Design
www.bestbuy.com
Whitehouse.gov
Wholefoods.com
Find Color Cohesion Eye Dropper Tool
Google Chrome
Find Color Cohesion Search Palettes on Colour Lovers
http://www.colourlovers.com Choose/Create a Color Palette
Ease of Navigation
Clean & Simple Design
http://www.edgebrook.cps.k12.il.us/
http://www.stmichaelguardians.org/
Clear Calls to Action
Clean & Simple Design
http://www.edgebrook.cps.k12.il.us/
http://www.stmichaelguardians.org/
Relevant Information
Clean & Simple Design
The only St. Michael that tells me where it is
Check your <title></title> tags
smikes? Really?
Check <title> tags
http://www.stmike.net
City? State?
Acadia Parish?
Where’s that?
http://www.edgebrook.cps.k12.il.us/
It’s in Chicago, I think.
HTTP://XKCD.COM/773/
http://www.stmichaelguardians.org/
News & Events School Calendar
Great for current parents | Helps show an active community
Contact Information
Right up front
No searching for it
How to apply
Common Mistakes
Common Mistakes to Avoid
MISTAKE #1
Spelling & Grammar Errors
FIX
Team of Proofers, Weekly
Harvard University misspells 'Professors' - http://www.law.harvard.edu/its/
Found on: http://www.prlog.org
Common Mistakes to Avoid
MISTAKE #2
Logo Doesn’t Go to Home Page
QUICK FIX
Wrap the Image in a Link <a href> </a>
*Bonus: Logo Should Be Top Left
http://www.carrollk12.org/ces/
Not an active link
Common Mistakes to Avoid
MISTAKE #3
Underlining Non-Links
Common Mistakes to Avoid
MISTAKE #3
Underlining Non-Links
QUICK FIX
Only Underline Links, if you need to stress something try italics or boldness
Common Mistakes to Avoid
MISTAKE #4
Centering All Web Text
http://www.carrollk12.org/ces/
OK NOT OK
NOT OKOK
http://uxmovement.com/content/why-you-should-never-center-align-paragraph-text/
Common Mistakes to Avoid
MISTAKE #4
Centering All Web Text
QUICK FIX
Left align most text. Utilize Font Hierarchy to differentiate.
Common Mistakes to Avoid
MISTAKE #5
Too Many Fonts, Colors (and any Comic Sans)
JUST SAY NO TO COMIC SANS
Source: http://www.bestedsites.com/
Common Mistakes to Avoid
MISTAKE #5
Too Many Fonts, Colors (and any Comic Sans)
QUICK FIX
Sans Serif for main text. Get creative for headers.
Common Mistakes to Avoid
MISTAKE #6
Large Blocks of Text/Paragraphs
QUICK FIX
Every 2-3 paragraphs, break up with Subheader
http://www.stmichaelguardians.org/
Common Mistakes to Avoid
MISTAKE #7
Long List of Links
Can these be categorized at all?
There must be a way to put theseIn categories…
Categories for a Resource PageIt’s a start!
Bonus Tip: Label PDF files with a(pdf) so users know what’s coming
Common Mistakes to Avoid
MISTAKE #7
Long List of Links
QUICK FIX
Go through all links – start to develop categories.
Common Mistakes to Avoid
MISTAKE #Final
Believing people care about the website as much as you do
What People Use Websites For
They want/need information They want/need to make a purchase /
donation. They want/need to be entertained. They want/need to be part of a community.
Relevant Content for each user group is separated out from them, rather than us providing one long list for them to hunt through.
Tip: • Put each piece of content from your website on a note card. • Lay them on the table. • Shuffle around. • Start sorting. • Perhaps this is how content should start being arranged. •Not based on internal departments.
Common Mistakes to Avoid
MISTAKE #Final
Believing people care about the website as much as you do
QUICK FIX
Relax. Think about the end user.
Tools & Resources Never Stop Learning
http://www.w3schools.com http://webdesign.tutsplus.com http://uxmovement.com/
Review the Dos and Don’ts http://webdosanddonts.com
See What Others Are Doing http://www.bestedsites.com/ http://www.stmichaelguardians.org/ http://www.tripwiremagazine.com/2012/09/education-wordpress-themes.
html
Google “(Common Name) Elementary School” etc. & Click
Offer for You Send me a tweet @sethhinz
“I’d Love Some Website Tips” or something clever…
Link to your website
Within 1-2 weeks (I’ll try ASAP) I’ll get back to you with 5-10 tips specific to your site.
Tweet to @sethhinz
Q & A
Advanced Topic: HTML5 & Responsive Design
Clean & Simple Design
Responsive to Device
Lancaster University | http://www.lancs.ac.uk/
Advanced Topic: Grids
Clean & Simple Design
Simplicity
T H I N KG R I D S
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
Grid images from Six Revisions and 960.gs
https://chrome.google.com/webstore/detail/gridyo/hgiogamnenmgeeaemjebknmlbleeedjl?hl=es-419
GRIDYO in action
