In my previous post I went through the basic tools that I will use to work on this project. Now it’s time to look at the file and analyze the supplied file. So let’s start by going to Unmatched Style and looking at the design.
When unzipping what Unmatched Style called the “PSD”, I was hoping to find a creative brief describing the fictional client, the target audience or what the goals of the site were. Knowing these things can make a huge difference on coding decisions. Is my target audience children to teen (same as Nickelodeon) or do I target more the Adult Swim demographic of the 20 to 30 somethings? This will make a huge difference on the type of humour used for all the interaction on the page.
Analyzing the design
It may seem kind of weird to go through a photoshop design to ask who, what, where, why and how but I find this exercise greatly helps me understand the project so I may know how to properly code this site. I think of it as studying the blueprints before building your home. You want to make sure you’re doing it right and always thinking of the big picture when you’re working on the detail stuff.
At first glance the website design is really beautiful. I definitely approve of the colour palette. The design uses very saturated colours and has a style well suited for children. It reminds me of the old school Nickelodeon site. Ah nostalgia. Ain’t it great? Digging a bit deeper into the design I’m finding that the structure and purpose of the site is seriously lacking. This doesn’t affect how I code the site but it does make it difficult to design with a purpose. In the next few paragraphs I’ll be going through the purpose of each section (or lack of it) as I see it. Open the design in a new window and follow along if you like.
The navigation seems pretty straightforward. Each link will go to a specific id. The Back to Top button suggest that the menu will have a fixed position. When you scroll through the site the menu will always be visible on the top of the window. From what I remember this is a bit of a pain for ie6 but we’ll cross that bridge when we have to.
I’m a bit confused as to what the Obstacles section is supposed to be. Should the different obstacles highlight on hover? on click? And what’s the point of showing a photo of a 6ft slide covered in gunk? This seems like a real waste of real estate to me. But I’m only coding the site. So for this section I think I’m going to code it so when you click on one of the six images on the left it will change the larger image on the right.
It seems to me that the prizes section has no interactive aspect whatsoever. Seems odd to have 4 prizes and nothing describing how to win them. I guess they wanted to keep the text at a minimum. It also seems like the designer wants to have the descriptive text of both the keyboard and the TV/VCR to line up. This may mean using specified heights in the css. If I were to make this site responsive this would maybe make things difficult. I might try to spruce this section up if I have the time by having cheesy animated gifs on roll over of each prize but we’ll see how much time I have.
The Be a Contestant section puzzles me. I’m guessing that if you complete the obstacles you win a prize but before you can compete you have to complete. And you have 60 seconds to do so. That’s not a lot of time if you’ve been gawking at the prizes section for 40 of those 60 seconds. I’m still not sure what the heck the timer is for and how you can stop or restart. For that matter why would you want a timer? Regardless, for coding purposes I’ll just find a jquery count down timer to make the clock count down. The form has a few options to fill out. I haven’t figured out why you would want to have the gender pulldown tab after the team name and team color. I would think that name and gender is information that would be better sectioned together but I guess putting the pulldown tabs together makes for a cleaner design. I’m not sure what the profile photo url is all about. Should I just type in a url? This seems counter intuitive. How would “the kids” know to find a photo from a website copy the url and paste it in here? Especially since there’s a time limit. Should this be a “upload your photo” field? I know the contest didn’t want any type of fancy back-end so I’m guessing it’s a compromise. If it was up to me I would remove the field completely, but I digress.
The last section of our page is the footer. This has pretty standard content (address, copyright, disclaimer text). How the content is structured is a bit odd but still pretty straightforward to code. I’m not sure why there are 2 columns for the disclaimer but that is their design choices and we just have to code them.
Ok, I’ve ranted quite enough about the structure of this site. The graphics are gorgeous I just wish a bit more attention was paid to the structure. I swear that in the next post I’ll actually be talking about the code (or where I’m at in the code by the time I post).