Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FIRSTFare 2012 website design for FRC teams


Published on

  • Be the first to comment

  • Be the first to like this

FIRSTFare 2012 website design for FRC teams

  1. 1. Website Design for FRC Teams2 Who am I?  Mentor  Eight year veteran of FIRST  Robot Inspector  Board member for Oregon FIRST Robotics  20+ year IT guy  Webmaster
  2. 2. Website 101 for FRC Teams3 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.
  3. 3. Website Design for FRC Teams4 What We Will Cover Design Principles – or what is needed to win a FIRST website award
  4. 4. Website Design for FRC Teams5 Bad Designs Cluttered – hard to find information Low quality content Slow
  5. 5. Website 101 for FRC Teams6 DIETER RAMS Having small touches of colour makes it more colourful than having the whole thing in colour.
  6. 6. Website 101 for FRC Teams7
  7. 7. Website Design for FRC Teams8
  8. 8. Website Design for FRC Teams9 DESIGN PRINCIPLES What makes a good website?
  9. 9. Website Design for FRC Teams10
  10. 10. Website Design for FRC Teams11
  11. 11. Website Design for FRC Teams12
  12. 12. Website 101 for FRC Teams13 GEORGE SANTAYANA Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies and humours.
  13. 13. Website Design for FRC Teams14 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
  14. 14. Website Design for FRC Teams15 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. 15. Website 101 for FRC Teams16 HUMAN FACTORS INTERNATIONAL If the users can’t find it, the function’s not there.
  16. 16. Website Design for FRC Teams17 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. 17. Website Design for FRC Teams18 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?
  18. 18. Website 101 for FRC Teams19 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.
  19. 19. Website Design for FRC Teams20 Award Winning FRC Website
  20. 20. 4Website Design for FRC Teams21
  21. 21. Website Design for FRC Teams22
  22. 22. Website Design for FRC Teams23
  23. 23. Website Design for FRC Teams24
  24. 24. Website Design for FRC Teams25
  25. 25. Website 101 for FRC Teams26 ROBERT PELOSCHEK I believe that a good user interface is carefully targeted towards its audience, with the right mixture of simplicity, elegance and innovation.
  26. 26. Website Design for FRC Teams27 Target Your Customers What do they want to know? Specific Timely Accurate ✪ Relevant Simple Speedy
  27. 27. Website Design for FRC Teams28 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. 28. Website 101 for FRC Teams29 PAUL HECKEL Because every person knows what he likes, every person thinks he is an expert on user interfaces.
  29. 29. Website Design for FRC Teams30 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: Don’t post everything…
  30. 30. Website Design for FRC Teams31 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 Use “Inspect Element” – Firebug or Chrome Developer Tools Get the basic facts right
  31. 31. Website 101 for FRC Teams32 PAUL RAND Don’t try to be original try to be good.
  32. 32. Website Design for FRC Teams33 Browser Market Share 2011 to 012 YTD
  33. 33. Website Design for FRC Teams34 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:
  34. 34. Website 101 for FRC Teams35 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.
  35. 35. Website Design for FRC Teams36 Simple Consistent Taxonomy Common colors and fonts Clean and clear design – first impressions count! No clutter No popups!
  36. 36. Website 101 for FRC Teams37 BOB BAXLEY Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion.
  37. 37. Website Design for FRC Teams38 Speedy People are impatient! Speed is critical Hosting has biggest impact Use Firefox’s Firebug Yahoo’s yslow Google’s pagespeed
  38. 38. Website 101 for FRC Teams39 RALPH MARSTON Excellence is not a skill, it is an attitude.
  39. 39. Website Design for FRC Teams40 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
  40. 40. Website Design for FRC Teams41 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 dont 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
  41. 41. Website 101 for FRC Teams42 KEVIN BARNETT Simplicity will stand out, while complexity will get lost in the crowd.
  42. 42. Website Design for FRC Teams43 Firefox Firebug with YSlow
  43. 43. Website Design for FRC Teams44 Q&A