Jackrabbit Code Website

The project brief is to create a website for the concept brand Jackrabbit Code, a company that makes educational videos for learning web development. The pages should include the landing page with brand values and a call-to-action to view sample course, shop page, and terms of service page. The goal is to advertise the brand and increase the number of users. The website should have a colorful design and use the brand color purple

Wireframes allow for planning the page layout before diving in into color and detailed content, therefore allowing greater focus in organizing the page before even starting the final design. I designed these wireframes the design tool Figma, including the landing page, courses page, and terms of service page, all in desktop, tablet, and mobile layouts. The section layout utilizes the Golden Ratio, which is the mathematical ratio 1.618:1, commonly found in nature. Utilizing it in design can achieve an organic and balanced composition.

Desktop wireframe of the Jackrabbit Code courses page. The hero section shows the current featured course, "Frontend". The page then contains links to each course, a list of every course available, and then the footer.

Desktop wireframe of the Jackrabbit Code terms of service page, containing placeholder text and the footer.

The brand's primary color was used, though rather than having several other secondary colors, I opted to use color pictures to fulfill the colorful design requirement.

I chose colorful images were chosen over colorful graphics in order to portray a relatable feeling by seeing real people and real photos of web development. I then created the high-fidelity design in Figma, using the wireframes as a blueprint.

Desktop high-fidelity design of the Jackrabbit Code landing page. It contains the same content as the wireframe, but now with final images, typography, color, and text content.

Desktop high-fidelity design of the courses. It contains the same content as the wireframe, but now with final images, typography, and color. The number of courses has been shortened and now contains final text content.

Desktop high-fidelity design of the terms of service page. It contains the same content as the wireframe, but now with final images, typography, color, and text content.

I then created the website in the visual web development platform Webflow. To handle course content, Webflow's Content Management System (CMS) is best to create a unified database of content and data, which can then be easily applied to add any data in that database to any page. HTML, the markup language of web pages, was also embedded into pages to add custom elements and use data from the CMS.

See live demo