firstfare 2012 website design for frc teams
TRANSCRIPT
Website Design for FRC
Bob Goetz - FIRST Fare
2012
Who am I?MentorEight year veteran of FIRSTRobot InspectorBoard member for Oregon FIRST Robotics20+ year IT guyOregonFIRST.org Webmaster
Website Design for FRC Teams
2
Website 101 for FRC Teams
3
ERIK ADIGARD
Design is in everything we make, but it’s also between those things. It’s a
mix of craft, science, storytelling,
propaganda, and philosophy.
http://quotesondesign.com/
What We Will Cover
Website Design for FRC Teams
4
Design Principles – or what is needed to win a FIRST website award
Bad Designs
Cluttered – hard to find information
Low quality content
Slow
Website Design for FRC Teams
5
Website 101 for FRC Teams
6
DIETER RAMS
Having small touches of colour
makes it more colourful than
having the whole thing in colour.http://quotesondesign.com/
Website 101 for FRC Teams
7
Website Design for FRC Teams
8
http://www.angelfire.com/super/badwebs/
DESIGN PRINCIPLES
What makes a good website?
Website Design for FRC Teams
9
Website Design for FRC Teams
10
Website Design for FRC Teams
11
Website Design for FRC Teams
12
Website 101 for FRC Teams
13
GEORGE SANTAYANA
Graphic design is the paradise of individuality,
eccentricity, heresy, abnormality, hobbies and
humours.http://quotesondesign.com/
FRC Website Criteria
Website Design for FRC Teams
14
The Website Award recognizes excellence in student designed, built and managed FIRST team websites. Three (3) subcategories are awarded: • “Website Excellence” - Every submission that meets the first website design standards
of excellence (80% or better of total possible score) will receive the website excellence award.
• Regional, District and State/Regional Championship Best Website – One Best Website Award will be given at each Regional and District Competition. The Best Website from each District Competition will go on to compete at the corresponding State/Region Championship. A team that wins a District Best Website Award does not have to attend the State or Region Championship to be considered for the State/Region Championship Best Website Award.
• Championship Best Website – One winner will be chosen from the Regional and
State/Region Championship Best Website Award winners. A team that wins a Regional or State/Region Championship Best Website Award does not have to attend the Championship in order to be considered for this award.
Content
How well does the website explain FIRST and promote its vision to people not familiar with the organization?
How current is the website content?
How well does the website convey the team story?
How well does the website recognize the team sponsors, mentors and volunteers?
To what extent does the website support other FIRST teams?
How well is the website content written?
Website Design for FRC Teams
15
Website 101 for FRC Teams
16
HUMAN FACTORS INTERNATIONAL
If the users can’t find it, the function’s
not there.
http://quotesondesign.com/
Functionality
How well does the site function
How extensive is the website’s use of multimedia? How cross-browser compatible is the website?
How much of the website design is original to the team?
How much care was taken when designing the website with regards to web standards such as valid HTML and CSS?
Website Design for FRC Teams
17
DesignHow does the website look overall? Does it give a positive first impression?
How inviting is the site to potential visitors?
How easily can a new user navigate the website?
How reader friendly is the website?
How engaging is the website?
How well does the website give a sense of team identity?
How does the website handle distribution of information to team Members?
Website Design for FRC Teams
18
Website 101 for FRC Teams
19
JEFFREY VEEN
I’ve been amazed at how often those
outside the discipline of design assume
that what designers do is decoration. Good design is
problem solving.
http://quotesondesign.com/
Award Winning FRC Websitehttp://www.mvrt.com/
Website Design for FRC Teams
20
Website Design for FRC Teams
21
Website Design for FRC Teams
22
Website Design for FRC Teams
23
Website Design for FRC Teams
24
Website Design for FRC Teams
25
Website 101 for FRC Teams
26
ROBERT PELOSCHEK
I believe that a good user interface is
carefully targeted towards its
audience, with the right mixture of
simplicity, elegance and innovation.
http://quotesondesign.com/
Target Your Customers
What do they want to know?
Specific
Timely
Accurate
Relevant
Simple
Speedy
Website Design for FRC Teams
27
✪
Specific
Titles are meaningful
Concise postings – people don’t read they scan
Remember the 5 W’s – don’t ramble
Who, What Where, When & Why
Use Facebook, Twitter, Google+
Website Design for FRC Teams
28
Website 101 for FRC Teams
29
PAUL HECKEL
Because every person knows what
he likes, every person thinks he is an expert on user
interfaces.http://quotesondesign.com/
Timely
Post every 48 – 72 hours
And show your Twitter Feed
Give 4 to 8 weeks notice for major events
Post no more than 24 hours after a major events
Use google’s feedburner to promote your postings: http://feedburner.google.com
Don’t post everything…keep them coming back for more
Website Design for FRC Teams
30
Accurate
Spell Check
Get the day & date right
Don’t forget to add the address information
Check & double check every URL
Check every browser & OS combination
OSX, Windows, Linux, iPad, iPhone, AndroidIE7, IE8, IE9, Firefox, Chrome, SafariUse http://browserlab.adobe.com Use “Inspect Element” – Firebug or Chrome Developer Tools
Get the basic facts right
Website Design for FRC Teams
31
Website 101 for FRC Teams
32
PAUL RAND
Don’t try to be original try to be
good.
http://quotesondesign.com/
Browser Market Share2011 to 012 YTD
Website Design for FRC Teams
33
Relevant
Stay on topic - focus on your team
Target your four customers
Tell stories that impact each
Tie the pictures to your story
Easily found on google, bing, etc:
SenSeo: http://www.sensational-seo.com
Website Design for FRC Teams
34
Website 101 for FRC Teams
35
PHILIPPE STARCK
When I design, I don’t consider the technical
or commercial parameters so much
as the desire for a dream that humans have attempted to
project onto an object.
http://quotesondesign.com/
Simple
Consistent Taxonomy
Common colors and fonts
Clean and clear design – first impressions count!
No clutter
No popups!
Website Design for FRC Teams
36
Website 101 for FRC Teams
37
BOB BAXLEY
Like all forms of design, visual design
is about problem solving, not about
personal preference or unsupported
opinion.http://quotesondesign.com/
Speedy
People are impatient!
Speed is critical
Hosting has biggest impact
Use
Firefox’s FirebugYahoo’s yslowGoogle’s pagespeed
Website Design for FRC Teams
38
Website 101 for FRC Teams
39
RALPH MARSTON
Excellence is not a skill, it is an attitude.
http://quotesondesign.com/
Typography
Text that is too small to read
Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Underlined text that is not a link
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Spelling erorrs …err… errors!
Website Design for FRC Teams
40
Images
Graphics
Large graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large as the full-sized images they link to
Graphics with no alt labels
Missing graphics, especially missing graphics with no alt labels
Graphics that don't fit on the screen (assuming a screen of 800 x 600 pixels)
Blinking graphics
Website Design for FRC Teams
41
Website 101 for FRC Teams
42
KEVIN BARNETT
Simplicity will stand out, while
complexity will get lost in the crowd.
http://quotesondesign.com/
Website Design for FRC Teams
43
Firefox Firebug with YSlow
Q&A
Website Design for FRC Teams
44