Overview

This is a mock project for an electrician business. The Electricians is an electrician business that operates in boston. My task was to do some branding for The Electricians and create a website that is easy to use for people young and old. I used figma for the Ui design, Adobe illustrator for the logo, and webflow for the development.

My Goal

The goal of this project was to create a website which is easy to use for the visitors. Website visitors needed to be able to easily get in contact with the company or read up about the services they offer. Another objective was to create a design that helps build trust between the visitors and the business since that is such an important factor in this industry.

Branding

The following is the brand guide I created after looking into their vision and mission and creating a brand that can be used to consistently execute their mission to the standards of their core values.

Content strategy

I begin the web design process by researching into competitor websites then creating a list of the content that will be needed in this industry in order to best achieve the website goals. I organize the content into sections and pages then sort these sections and pages in an order that will tell a logical story about the product or service being sold.

Mood board

I go back to look at the competitors to understand what is needed for this project to be succesful in it’s design. I like to look at the competitors because it helps me understand what the current industry standard is. When I know what the standard is, I know how to break away from it or follow it depending on what the project requires. I created a mood board of competitor designs and designs that I felt were inspirational and relevant to my end goal. For this mood board, I was drawn towards high contrasting colours.

Wireframes

I then create sketch wireframes. When I decide on the best sketches, I create a proper wireframe in figma. My wireframes do not contain any brand colours or art direction. The pupose is to create a structure that can be used to understand the flow of the website and create a launch pad for the art direction.

Design

I convert my wireframes into designs by injecting the brand colours into the wireframes and creating design assets. I am constantly applying my design principles to ensure that my designs are consistent and visually pleasing. As I design, I always ensure I am in line with my overall objective. This design was meant to feel like an interactive app to improve how quickly users can get the information they want. I made the services section an interactive menu so that customers can easily navigate between services without going to a different page.

Mobile version

I start with the PC design as I can get more ideas down because of the bigger screen size. However, I ensure that my mobile version is a well optimised design instead of a resized version of the PC design. If a design element is not looking good on mobile, I create a new one for it. This way, the mobile version will be well optimised for google.