Part 6 of the design process

Present your design

Selling the designs and the process in the best possible light

Find out more

How to present


Deciding what to show and when

Luckily through the design process I documented heavily through sketches, photographs, soundbites, mockups and videos. This makes the process of presentation a lot easier as you can thread the design narrative with artifacts of choice. I decided to present the process in a step by step approach as to afford importance on the way I work, giving heft to every step as opposed to focusing on the solution.

Tools used


HTML, CSS and JS

This site relies on Bootstrap for a lot of the CSS elements allowing for quicker production times

Sketch

Built in a github pages repo which allows for code review, and code management and free hosting

Marvel

Used for rapid prototyping of flat sketch files, alternatively invision is sometimes used

Illustrator and Photoshop

Still useful for editing SVGs and bitmap images when sketch isn't powerful enough

Resources


Bootstrap

This site relies on Bootstrap for a lot of the CSS elements allowing for quicker production times

Github

Built in a github pages repo which allows for code review, code management and free hosting

FlatIcon

Free resource where most icons used on this site were found

Pexels

Free resource of images used for the sporting header images on most pages

Important factors


Stick to brand

From selecting the right fonts, Lato and Oswald (Free alternative to trade condensed) to the right colors, images and button styles. This creates a consistent and recognizable experience and decreases production/design time.

Design for mobile

The site is fully responsive and optimized for mobile and tablet use. Using the bootstrap grid makes this process extremely simple.

Tell a story

Arrangement of the site has been designed to tell a story of the design process, split into chapters than have a chronological order but can also be skipped to get to the results, which helps with overall context.

Up next

The design process is finished

See the results of the task and explanations on how they solve the brief