Jackrabbit Code Website

A website for a concept brand, Jackrabbit Code, that makes educational videos for learning web development. The goal of the website is to advertise the brand and increase the number of users.

Project on Behance See live site

Process

Wireframes were created in 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 to achieve balance in its elements.

Desktop wireframe of the Jackrabbit Code landing page.

Desktop wireframe of the Jackrabbit Code courses shop page.

Desktop wireframe of the Jackrabbit Code terms of service page.

Tablet wireframe of the Jackrabbit Code landing page.

Tablet wireframe of the Jackrabbit Code courses shop page.

Tablet wireframe of the Jackrabbit Code terms of service page.

Mobile wireframe of the Jackrabbit Code landing page.

Mobile wireframe of the Jackrabbit Code courses shop page.

Mobile wireframe of the Jackrabbit Code terms of service page.

Colorful images were chosen over colorful graphics in order to portray a relatable feeling by seeing real people and real photos of web development.

The desktop layout of the courses shop page. The hero section shows a featured course, being frontend development. There is a list of all courses. Every course is displayed with descriptions, a list of lessons, and option to buy. Text at the end encourages users to choose a path if they can't decide on a course.

The desktop layout of the terms of service page. The page is titled "Terms of Service" and placeholder text follows to represent the terms.

The tablet layout of the courses shop page.

The tablet layout of the terms of service page.

The mobile layout of the courses shop page.

The mobile layout of the terms of service page.

The website was then developed in Webflow using a Content Management System (CMS) to handle course content, and embedded HTML to further enhance the markup of the website.

Project on Behance See live site