FIRSTFare 2012 website design for FRC teams

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


4

Design Principles – or what is needed to win a FIRST website award

Bad Designs

Cluttered – hard to find information

Low quality content

Slow


5


6

DIETER RAMS

Having small touches of colour

makes it more colourful than

having the whole thing in colour.http://quotesondesign.com/


7


8

http://www.angelfire.com/super/badwebs/

http://www.angelfire.com/super/badwebs

DESIGN PRINCIPLES

What makes a good website?


9


10


11


12


13

GEORGE SANTAYANA

Graphic design is the paradise of individuality,

eccentricity, heresy, abnormality, hobbies and

humours.http://quotesondesign.com/

FRC Website Criteria


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?


15


16

HUMAN FACTORS INTERNATIONAL

If the users can’t find it, the function’s

not there.


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?


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?


18


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.


Award Winning FRC Websitehttp://www.mvrt.com/


20

http://www.adambots.com/


21


22


23


24


25


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.


Target Your Customers

What do they want to know?

Specific

Timely

Accurate

Relevant

Simple

Speedy


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+


28


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


30

http://feedburner.google.com/

http://feedburner.google.com/

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


31

http://browserlab.adobe.com/




32

PAUL RAND

Don’t try to be original try to be

good.


Browser Market Share2011 to 012 YTD


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


34

http://www.sensational-seo.com/

http://www.sensational-seo.com/


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.


Simple

Consistent Taxonomy

Common colors and fonts

Clean and clear design – first impressions count!

No clutter

No popups!


36


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


38


39

RALPH MARSTON

Excellence is not a skill, it is an attitude.


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!


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


41


42

KEVIN BARNETT

Simplicity will stand out, while

complexity will get lost in the crowd.



43

Firefox Firebug with YSlow

Q&A


44

FIRSTFare 2012 website design for FRC teams

Documents

Transcript of FIRSTFare 2012 website design for FRC teams