2. Website Design for FRC Teams
2
Who am I?
 Mentor
 Eight year veteran of FIRST
 Robot Inspector
 Board member for Oregon FIRST Robotics
 20+ year IT guy
 OregonFIRST.org Webmaster

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

4. Website Design for FRC Teams
4
What We Will Cover
Design Principles – or what is needed
to win a FIRST website award

5. Website Design for FRC Teams
5
Bad Designs
Cluttered – hard to find information
Low quality content
Slow

6. Website 101 for FRC Teams
6
DIETER RAMS
Having small touches
of colour makes it
more colourful than
having the whole
thing in colour.

7. Website 101 for FRC Teams
7

8. Website Design for FRC Teams
8
http://www.angelfire.com/super/badwebs/

9. Website Design for FRC Teams
9
DESIGN PRINCIPLES
What makes a good website?

10. Website Design for FRC Teams
10

11. Website Design for FRC Teams
11

12. Website Design for FRC Teams
12

13. Website 101 for FRC Teams
13
GEORGE SANTAYANA
Graphic design is the
paradise of
individuality,
eccentricity, heresy,
abnormality, hobbies
and humours.

14. Website Design for FRC Teams
14
FRC Website Criteria
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

15. Website Design for FRC Teams
15
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?

16. Website 101 for FRC Teams
16
HUMAN FACTORS
INTERNATIONAL
If the users can’t find
it, the function’s not
there.

17. Website Design for FRC Teams
17
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?

18. Website Design for FRC Teams
18
Design
How 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?

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

20. Website Design for FRC Teams
20
Award Winning FRC Website
http://www.mvrt.com/

21. 4
Website Design for FRC Teams
21

22. Website Design for FRC Teams
22

23. Website Design for FRC Teams
23

24. Website Design for FRC Teams
24

25. Website Design for FRC Teams
25

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

27. Website Design for FRC Teams
27
Target Your Customers
What do they want to know?
Specific
Timely
Accurate ✪
Relevant
Simple
Speedy

28. Website Design for FRC Teams
28
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+

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

30. Website Design for FRC Teams
30
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…

31. Website Design for FRC Teams
31
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, Android
IE7, IE8, IE9, Firefox, Chrome, Safari
Use http://browserlab.adobe.com
Use “Inspect Element” – Firebug or Chrome Developer Tools
Get the basic facts right

32. Website 101 for FRC Teams
32
PAUL RAND
Don’t try to be
original try to be
good.

33. Website Design for FRC Teams
33
Browser Market Share
2011 to 012 YTD

34. Website Design for FRC Teams
34
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

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

36. Website Design for FRC Teams
36
Simple
Consistent Taxonomy
Common colors and fonts
Clean and clear design – first impressions count!
No clutter
No popups!

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

38. Website Design for FRC Teams
38
Speedy
People are impatient!
Speed is critical
Hosting has biggest impact
Use
Firefox’s Firebug
Yahoo’s yslow
Google’s pagespeed

39. Website 101 for FRC Teams
39
RALPH MARSTON
Excellence is not a
skill, it is an attitude.

40. Website Design for FRC Teams
40
Typography
Text that is too small to Paragraphs of type in all
read caps
Text crowding against the Paragraphs of type in bold
left edge
Paragraphs of type in italic
Text that stretches all the
way across the page Paragraphs of type in all
caps, bold, and italic all at
Centered type over flush once
left body copy
Spelling erorrs …err…
Underlined text that is not errors!
a link

41. Website Design for FRC Teams
41
Images
Graphics Graphics with no alt labels
Large graphic files that Missing
take forever to load graphics, especially
missing graphics with no alt
Meaningless or useless labels
graphics
Graphics that don't fit on
Thumbnail images that are the screen (assuming a
nearly as large as the full- screen of 800 x 600 pixels)
sized images they link to
Blinking graphics

42. Website 101 for FRC Teams
42
KEVIN BARNETT
Simplicity will stand
out, while complexity
will get lost in the
crowd.

43. Website Design for FRC Teams
43
Firefox Firebug with YSlow

44. Website Design for FRC Teams
44
Q&A