BBDO brought me in to flush out and push forward Cesar.com mockups. Basic wireframes and the initial look and feel of the home page were provided as a starting point. Some of the feedback that had been received was to use more black and gold like the dog food packaging and to overall make the site more fun and inviting. The scope of this project was for desktop iterations only.
Below are the concepts that I designed and were presented to the client.
Home Page
– Updating the grid everywhere to be more in line with current web standards. In this case the framework that the designs were going to be implemented around was 1040px wide. Created a 12 column grid with a 12px gutter.
– Selected fun dog images. For the hero header image, I also came up with headline.
– Added the ribbon concept with black and gold to bring attention to important content areas
– When their were spaces available, used cute/fun dog images to break the grid create additional layering
– Improved footer organization and design so that there were clear actions to be taken such as signing up for the newsletter or navigate to another area of the site. The content of the footer also takes into account what would happen in a responsive situation after scrolling to provide the user a next step without having to go find the menu again.
Product Page with filters
– Include look and feel of dropdowns
Product Page with Product Category Selected
– Includes product hover state example
Individual Product Page
– Reviews include fun randomized dog portraits
List of Blog Posts Page
– 1 column
List of Blog Posts Page (Option)
– 3 column grid
Single Blog Post
