Overview

Itacorp Digital is a web design, development, and SEO agency for electrician companies . My task was to create a brand and website. I did all the branding, design, and development for this project. Joeseph Elikili did the copywriting for the project.I used figma for the Ui design, Adobe illustrator for the logo, and webflow for the development. I did not make the illustrations in this design.

My Goal

The goal of this project was to form a strong foundation for their brand to grow from as the business grows then create a website that is in line with said brand that can then convert visitors into prospects.

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.

Logo

I created this logo to be easy to understand and minimal since that is the current industry trend. The reason for sticking to the industry norm is to ensure that Itacorp Digital can join the market without confusion as to what they do. The products they offer are not revolutionary rather they focus on maximising the value offered by their products. For this reason they need to fit in with the industry leaders.

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. I then create a content guide that outlines what the copywriting should cover and send this to the copywriter.

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. I was mainly inspired by clean designs with a few colours and gradients for this design.

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. I played around with adding depth in this project to make it feel more alive. I did this by adding gradients, shadows, and overlapping design elements.

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.