狠狠撸

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?

Web Design Etiquette - #POLS2013

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.edgebrook.cps.k12.il

http://www.stmichaelguardians
.org/

Why is It Important
? Credibility is easy to lose
? Spelling & Grammar
? Relevant Information
? Overall Design

Web Design in 6 Steps
? Learn
? Plan
? Design
? Code
? Launch
? Maintain

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

Six Revisions | http://bit.ly/RHgc2O

Typography Resources
? Font Combinator
? http://font-combinator.com/

Cohesive Colors

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

Clear Calls to Action

Relevant Information

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
It’s in Chicago, I think.

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 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

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

MISTAKE #3
Underlining Non-Links

MISTAKE #3
Underlining Non-Links
QUICK FIX
Only Underline Links, if you need to
stress something try italics or boldness

MISTAKE #4
Centering All Web Text

http://www.carrollk12.org/ces/

OK NOT OK
NOT OK
OK
http://uxmovement.com/content/why-you-should-never-center-align-paragraph-

MISTAKE #4
Centering All Web Text
QUICK FIX
Left align most text. Utilize Font
Hierarchy to differentiate.

MISTAKE #5
Too Many Fonts, Colors
(and any Comic Sans)

Source: http://www.bestedsites.com/

MISTAKE #5
Too Many Fonts, Colors
(and any Comic Sans)
QUICK FIX
Sans Serif for main text. Get creative for
headers.

MISTAKE #6
Large Blocks of Text/Paragraphs
QUICK FIX
Every 2-3 paragraphs, break up with
Subheader

MISTAKE #7
Long List of Links

Can these be categorized at all?

There must be a way to put these
In categories…

Categories for a Resource Page
It’s a start!
Bonus Tip: Label PDF files with a
(pdf) so users know what’s
coming

MISTAKE #7
Long List of Links
QUICK FIX
Go through all links – start to develop
categories.

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.

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

Advanced Topic: HTML5 &
Responsive Design

HTML5 & Responsive Design
DotComInfoway

Responsive to Device
Lancaster University | http://www.lancs.ac.uk/

Advanced Topic: Grids

Simplicity
T H I N K
G R I D S
Grid images from Six Revisions and 960.g

Grid images from Six Revisions and 960.g

https://chrome.google.com/webstore/detail/gridyo/hgiogamnenmgeeaemjebknmlbleeedjl?hl=es-419

狠狠撸

Web Design Etiquette - #POLS2013

More Related Content

Web Design Etiquette - #POLS2013