** Pizza Planet Style Tile was created as a project in Advanced Web 2 during my studies towards my masters in Web Design and Online Communication through the University of Florida. Many of the aspects in this site were required per project requirements and was created for education purposes. I am in no way affiliated with Pixar or Disney.**
This is the second phase of my Advanced Web 2 final. The first deliverable was designing a Style Tile and Prototype, you can read about my creative design process here.
Since we have a style tile and a responsive prototype we don’t have to start with an empty slate, we have a direction from the beginning. This then allows me to focus my efforts on the more important question: what would the users be looking for? Some of these answers were requirements for the project
- Contact information
- Restaurant Menu
PAGE DESIGN DECISIONS
Because those are the top motives a user will visit the site I designed the header so that the above information is available within one click of entering any page. The font colors of these items are neon and on a dark background attract the users eye. A large header photo anchors the homepage inviting the user to envision themselves at Pizza Planet. Hover over the welcome to pizza planet header to display a fun surprise (this is a custom jQuery code that adds interactivity).
ARCADE | EVENTS | CONTACT
The content on the arcade page is within theme, displays information about the games, and includes a photo to attract the user. In addition, an eye catching promotion is displayed letting the user know about token discounts on a particular day of the week.
The events page houses a fun compilation broken up between 3 different categories: current promotions, upcoming events, and info about how to host a birthday party. The layout breaks up each event into outlines sections allowing the user to easily distinguish header, content, and photo for each.
There are various contact methods on the contact page, which allows the user the ability to choose which one they want to use. A phone number, address, social media links, and a contact form is displayed for ease of use.
The key requirement of this project was to create the site mobile first allowing the user to view the site easily on any device. A red mobile nav appears in the top right corner when viewed on a smaller device screen. The color helps to attract the users eye for they can easily find the navigation links. Although responsive development requires thoughtful planning, making the transition between smaller screens to large is not as difficult as the reverse, and honestly for this site I prefer the mobile layout design over the “desktop”.
To view the full website click here & feel free to change the size of the screen to see the responsive design.