Human Deluxe Handbook
How To

Website Design Process

Purpose

This is for people working in website design at Human Deluxe

Goal

Create world-class website projects for our clients, from start to finish.

Before your start

Make sure that you have a Creative Brief, client documentation and content ready. Seek client feedback in between each phase and iteration.

Steps to Take

  1. Create a new Figma document inside the client project in our workspace. Name it “Client Website” and create the following pages (you can add more later if needed):
    1. Overview
    2. Research
    3. Sitemap
    4. Wireframes
    5. Design
    6. Assets

Design Research

Research: Educate yourself about the client, product and market. Find examples of matching websites or those that were mentioned in the discovery workshop. Use the reference pages mentioned in the Resources Section of the Human Deluxe Handbook.

  1. Take screenshots of relevant pages and website sections. Copy them to the «Research» page of your Figma document
  2. Create a moodboard with relevant website sections and elements to use within the client status deck

Sitemap & Wireframes

Create a visual concept for the website. Usually, this is a sitemap and wireframe in Figma, prepared as an interactive prototype ready to explore.

  1. Use the elements provided in the Sitemap elements figma file.
  2. Assemble a sitemap with all relevant sections on the «sitemap» page of your Figma.
  3. Share a copy of the sitemap with the client, either through a Figma protoype (prefered) or through the website status deck.
  4. Once the sitemap is completed and approved by the client, create a desktop wireframe using the elements in the Desktop Wireframe Figma file - use the «Wireframe» page in your Figma file to do so.

Desktop wireframes should always be created in 1440 pixels width, with a standard side padding of 128 pixels. Use Autolayout if necessary and avoid the use of styles, variables and components at that point.

  1. Once the wireframe is assembled, create components of repeat sections (like Navigation and Footer).
  2. Use the prototype function of Figma to link pages and build an interactive prototype.
  3. Share this prototype with the client, asking for feedback.

Design

Once the wireframe is approved by the client, create the screen design of the website.

  1. Create a style frame of the website, using a representative section of the website (e.g. header section).
  2. Share the style frame with the client and get feedback on typography, color etc.
  3. Once approved, use the style frame to create color and typography styles. Now create repeat sections

Start with typography. Create 5 font styles: Title, Headline, Subline, Paragraph and Call to Action

  1. If you have brand colors defined already, add them as color styles to your document
  2. Create the most basic design components:
    1. Simple button
    2. Headline + paragraph combination
    3. Simple box with image (for article teasers e.g.)
    4. A set of 5-6 icons that will be used in your design
  3. Create 6 basic desktop design sections that will go in your design. Each section should be 1440px wide and built with Auto Layout:
    1. Navigation
    2. Header Section (Title, Subline, Call to Action)
    3. Footer
    4. Call to Action Box (Claim, Button)
    5. Grid with multiple elements (e.g. Feature section or Blog overview)
    6. Content Section (e.g. text + image, article text …)
  4. Arrange those sections in a squarish composition, select all, copy as PNG and paste into the client presentation.

Implementation

Before moving the implementation process to Webflow or Jekyll, make sure that you have all assets needed ready to export. Keep in mind that not all assets can be used or exported from the design files, such as big background images that extend past the viewport or images with rounded corners, that should be rounded in the browser.

  1. On the «Assets» page of your Figma file, collect all the assets necessary to develop your design.
  2. Size and name them accordingly. Follow the rules as stated in the File Management page:
    • All filenames should be lowercase
    • Avoid spaces in filenames
    • Avoid special characters in filenames
    • keep them short and clear
  3. Export all assets to the Dropbox client folder. Use the subfolder “Website Assets” to export the files.
  4. If needed, further compress the assets using ImageOptim.

Use Webflow or Jekyll to implement the website. Process description to follow.

Launch

Once approved, launch the website together with the client. Process description to follow.