Choco Bomb - Site Header

Project title: The Choco Bomb – Landing Page

Date: Nov 2017

Project Goal:

Note: This is a fictional company/project etc.

Choco Bomb now requires a strong web presence, to make them stand out in the online community. They want to market and sell the latest version of their book “The Choco Bomb”. As such, they require a landing page designed, to get as many Sign Up’s as possible.

Creative Strategy:

As the goal of this landing page was to attract visitors and get them to sign up, I wanted to create a simple but clear web page which showed off the unique selling point of the company, their new cookbook. Based on the requirements for the page, I jotted down a number of sections to include and sorted them accordingly on an A4 page before designing anything more concrete. Once I had established the structure and layout of the content, I began to build the page in Sublime text using the Bootstrap design framework.

As the company needed to establish a web presence it was also important that an eye-catching logo be created. I played around with a number of ideas, I thought against the idea of a bomb for the logo just in case this was not well received! Overall though, I was drawn to the idea of having a character / mascot for the company that would be memorable. I decided on a cute little chocolate bar that contained the abbreviated company name on his head. This logo was created in Adobe Illustrator.

As there wasn’t a copy of the book to hand, I needed to create a book cover to use for the page. The photograph of the Choco bomb needed to take center stage, with the logo and book title featuring on the cover also. This book cover was created in Adobe Illustrator.

I decided to choose a blue color scheme with a pink accent color – I felt that this choice was pleasing to look at for a lot of content and the use of the pink accent color would really emphasize assets such as the sign up button.

Tools Used:

  • Good old pen and paper to jot down initial requirements and design rough wireframes etc.
  • Sublime text 3 as a text editor and the Bootstrap design framework.
  • Adobe Illustrator – To design the logo and other design assets required.
  • Google’s Material Palette color scheme generator to create the color palette for the site
  • Chrome developer tools etc – To test the website out on different screen sizes to ensure responsiveness.
  • Font Awesome Icon Set – for use of icons across the website

Website Features:

  • Fully custom made web page created using the Bootstrap design framework
  • Custom made logos, images, icons in Illustrator created by Mishacreatrix
  • Sign up form to get users to sign up
  • Fully responsive web page

Gallery:

Check out this project on Behance

Visit a live version of this project