Team 423's New Website

Technical Website Design/Showcase
1

Hello everyone. To help bring our team into the modern age of FRC, we have finally made ourselves a website! You can find it at 423robotics.org. We are still waiting on a few pictures (robots from 2015-2013), but otherwise the site is mostly done. We would really appreciate any comments or criticism you can offer.

2

Thanks for looking at the website and giving your suggestions. I would appreciate it if future suggestions could be posted here instead of PM’ed to me.

3

I love the overall design. However, the body text is too dark to be easily readable on that background, and the “welcome visitor” thing is a little outdated. Overall, though, it’s a very nice, clean, modern website, so nicely done!

4

Nicely done.

I have a few ideas to help make your site even better.

For viewing accessibility we need a reasonable amount of contrast between a background and the font. This is a Government standard that most corporations comply with.
http://www.w3.org/TR/WCAG10/full-checklist.html

A 7% contrast ratio is good. If you are not sure, you can try a contrast checker like this one:
http://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=454545

I noticed low contrast on the Robots page. You have orange colored year buttons with white font. Black font would be better. One might wonder why are some buttons orange and some gray?

The team logo looks great. One minor point is that you could save the user some scrolling by reducing the vertical space around the logo in the wide screen version. (move the logo and nav bar up.)

One other point about font. You should minimize the number of fonts used. Aim for one body style and add only one more font for very limited and specific reasons.

Another minor point about spacing on the robot page. Having objects closer informs the user of a geometric association. To enhance this feeling in your users, reduce the spacing between the sub-title and the bulleted content and increase the spacing between sections.

User control - carousel
An important usability guideline is to allow the user to control the site. Buttons and links are a good example of this. But when it comes to a carousel the user has to wait for the image to loop around. A better design is have an indication of which image is being shown, allow the user to pause the image or to skip to the next image.

Dave
Build Mentor and UX Designer

5

Just a disclaimer: this site was made with Weebly. While using Weebly made it infinitely easier to design and build, it does take away a certain amount of customizability.

I took out the “Welcome Visitor” (I didn’t like it either) and lightened the text color.

Thanks for your input. To address some of your issues:

  • I lightened the text color on most pages for easier reading.
  • The orange buttons were an artifact of when we only had pictures of recent robots. Since we found older pictures, all of the orange buttons have now been changed to be grey.
  • I also thought there was too much header space, but I didn’t know how to fix it. I just figured out how to edit the site’s .css page, so I was able to reduce the empty space in the header.
  • There are only a few fonts on the page. One for the menu, one for the headers, and one for the body text. If that is too many, I wouldn’t know how to change it.
  • I think the excess space you see on the robot pages is due to waiting for pictures for 2015-2013 robots. If you look at the 2012 page there shouldn’t be extra space.
  • The carousel on the home page should have controls that appear when you hover the mouse over it. You should be able to pause and manually advance or go back.
6

Here are my thoughts, feel free to take or leave them. (Just so you know, I’m a graphic designer so I love critiquing websites.)

Good:

  • I commend you for working on a good team website - many teams don’t put much thought into their websites.
  • I love the overall clean look of the website.
  • The logo matches the grey background nicely.

Could change:

  • About
    ](http://www.423robotics.org/about.html): don’t make the visitor click on one of the images to see the full descriptions about FIRST and your team. Have all that information available straight from the About page. You could even eliminate the dropdown menu that way.
  • Robots
    ](http://www.423robotics.org/robots.html): it would be nice to see the title and a short summary of each year next to the year’s button.
  • Sponsors
    ](http://www.423robotics.org/sponsors.html): make sure there’s enough contrast between the sponsor images and the background. One way to do this could beto have one solid image with all Wheel and Axle Sponsors on a white background, then lower down all Pullley Sponsors in one image with a white background, etc.
  • Team Blog
    ](http://www.423robotics.org/team-blog): I think whenyou updated the text color to improve contrast for the rest of the website, the blog text formatting was not updated. It’s hard to read.
  • Contact Us
    ](http://www.423robotics.org/contact-us.html): the Twitter link is broken (www.twiter.com/frc423).
  • Footer Links
    : Sponsors isn’t linked anywhere.
7

Your site looks pretty nice so far, but there is one thing that is bothering me. I’m not too familiar with weebly, but would it be possible to change the favicon to your logo?

8

Didnt look through it too much but noticed no robot pictures on the pages.

9

From the OP:

10

Geez I need sleep