Overview

This is a mock project for a team app’s marketing website. My task was to design a website that communicates the benefits and features of using this product.I used figma for the Ui design.

My goal

The goal of this project was to create a website which informs the visitors about how this app can be beneficial to their team. This website consists of a homepage, blog page, and blog article page.

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.

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.