PROJECT INTRODUCTION
Virtual Chalk
This a web design and branding project. The client is a new E-learning agency, soon to be launched.
They create online learning courses.
Try the prototype at the bottom of the page!
Brief
To create a brand identity including logo, branding and user interface of the website. Also print designs for business cards.
Outcomes
-
Logo
-
Website
-
Mobile version of the website
-
Business card design
Objective
The website must appear sleek and professional, but also have an element of fun. To appeal to many types of business who may want to commission 'Virtual Chalk' to create their e-learning courses.
Scroll down to see the process.
IDENTITY DEVELOPMENT
Identity / logo development
I started the project by working on the brand identity. After talking through some concepts with the client, I went on the sketch out a number of ideas.
I then developed the best of these sketched logos. After multiple rounds of iteration, I was left with a 'top 3' (shown in the image below). I then took these top 3 to the client, and they selected their favourite.
Logotype
The client selected the logo on the far right of the above image. I then expanded this further to create combination of logo and type and an alternate logo.
The client also wanted the identity to be used on a business card. So I created a design for this (shown below).
WEB DESIGN DEVELOPMENT
Page layout
I started by sketching out some layout ideas, for the home page on desktop and mobile. The Client had a pretty good idea of how they wanted the layout of the website, so I didn't have do much planning around the information architecture.
Initial designs
I made a first iteration mock-up of the website, and sent it to the client for feedback. Whist they liked the colour and overall theme of the site. They said that the landing page could be more bold and striking. And make each of the sections look more independent from one another.
So I modified the design taking this on board and the resulting finished site design is shown below. The first image shows the landing page, both mobile and desktop browser version. And the second shows all the pages, as they would appear on a phone.
MOCKUPS
PROTOTYPES
Above is a video run-through of the desktop prototype. It shows the home page, 'projects' page, 'where we can help' page and the blog/ news page.
Below is a full working prototype of the mobile version of the site. Please try the prototype below!