Choose your Sport The goal of this assignment was to create an interactive game or learning tool to teach people a skill or about a particular topic. I decided to focus on fouls and penalties in sports. I envision this concept as being easily accessible on a mobile phone for fans at a game or watching on television if they don't understand why a particular play was called. This would be useful for both the avid fan and a newcomer to a sport.
NCAA Football Home page As was shown on the home page, the greater concept would allow for many sports to be included at multiple levels. For the project, I focused on football and eight fouls commonly called in NCAA Football. Here people can choose which penalty they want to learn more about. The penalties are shown both by name and ref signal.
Individual Foul Page All of these pages include a video of the call in a real game, the rulebook definition, the penalty assessed, and links to the pages of similar calls. The goal of this page is to show visitors what the foul looks like and which scenarios warrant the call. After reading the page, newcomers will better understand what is happening in the game and avid fans will be able to defend their arguments against the refs. Keep scrolling to learn about my design process.
Step 1 The project began with different brainstorming exercises including brainstorming lessons from elementary and middle school and routines from daily and professional life.
Step 2 After brainstorming a bunch of different routines, lessons, and passions. I chose 6 possible sites to create including teaching about fouls in various sports, teaching how to do credits and debits in accounting, a quiz telling people what to see on broadway, and a nail painting game. I created wireframe sketches for all 6 ideas.
Step 3 After discussing the possible games with classmates, I settled on my first idea of creating a database where sports fans could learn about the rulebook definition and the actual application of fouls and penalties. Next, was creating a lo-fi prototype and user testing it.
Step 4 I began this stage with a static wireframe created in Adobe XD. I then used html and css to code a interactive wireframe which can be found by following this link.
Step 5 Next, I focused on the creative side of the project and created mood boards, style tiles, and a static mockup to decide exactly how the website would look. I focused on bringing in sports imagery and a bolder text similar to those seen in logos for major sports leagues. My mood board included colors chosen from the field color, flag color, and ball color. It also included the striped shirt of a ref and texture of a football.
Step 6 I created 3 style tiles varying background colors, background textures, heading colors, and button colors. I eventually went with something most similar to the middle style tile.
Step 7 The last step prior to coding the actual site was to create a static mockup. I created static mockups for each page which were very similar to the final product. I decided to create a field in the background and use the yellow of the flags as the color for each penalty. After creating the mockup, I decided to limit the zebra striping of the letters to "WHAT."