Design Process

Communication

Slack channel

There is a dedicated channel #design for designers to discuss relevant work.

Sharing Files

We use Dropbox to share files between the team, with a dedicated Design folder for designers to use. Use sub-folders to group related project files. It should be named using a short two or three-word description (separated by hyphens), along with the associated GitHub repository and issue number e.g. niteo.co-design-ops#401

Tools

• Wireframes: Balsamiq
• Mockups: Figma
• Mood boards: Invision
• Design mockups: Photoshop
• HTML Implementation: Bootstrap

Workflow

These are the stages that the designers follow to create a new application or website.

Wireframe

Project lead and marketing talk about the goals of the application or website. They will outline the first content and explain the requirements to the designers and the creation of a wireframe model will be the result (a monochrome sketch). A Mockup is a wireframe with more detail and is only done when such detail is required (usually for sales pages).

Design Mockup

A mood board (a collage consisting of images and text) is created to enable collaboration on the style of the product. Once a consensus is reached, the details of the wireframe and mood board are captured in a graphical design mockup. The final version will be approved by the project lead and the process moves on to implementing the design.

Implementation

The implementation stage is where the actual website or application front-end is created in HTML/CSS/JS using a preferred framework. The final version is approved by the assigned developer.