David Does Design.

Hi there, my name is David. Primarily, I'm a Full Stack JavaScript Developer but I also have a growing fascination and interest in the world of design and user experiences.

My dream is continually water my design and UX skill set so it eventually blossums into an user experience design career after laying strong roots in front-end development and coding.

As a freelance developer I am often doing my own web design based on a client's desires and needs. Throughout the process I use modern tools like Trello and keep an open feedback loop with the client to make sure my designs meet their needs.

Seattle By Bike: A mini case study

For this mini case study I will give a birds-eye flyover on how my design process went for a recent freelance client of lindahl studios.

A sketch showing an early iteration of the website wireframe.

Always start on paper

Paper wireframing allows for quick iterations and just feels so right when starting a logo or web design. After my initial meeting with the client I had a good idea of the branding and design for his business based on his answers to my branding collection questionnaire.

A sketch showing an early iteration of the website wireframe.

Paper Iterations

Because I want to sketch out different concepts and ideas I always draw out different wireframes on paper. I'm inspired by excellent designs like Stripe, Digital Ocean, anything Steve Schoger touches and other great online sources like pages.xyz.

A screenshot from Sketch showing all the website mock ups.

Various Mock Ups in Sketch

After settling on a design on paper, I transition to rebuilding several mockups in Sketch. I presented several options to the client and we collaborated on the client's likes and dislikes to perfect a design that I would later code.

A screenshot from Sketch showing the final website mock ups.

High Fidelity Prototype

After settling on a final design layout, I gave the Sketch design a few more tweaks and explained to the client how the interaction model would work for visitors to the website. Because I'm always iterating, the design was being constantly improved as I coded.

Coding the Website

For this client, GatsbyJS (a ReactJS static website builder) made the most sense. So I began coding the site and used a really great CSS Framework called TailwindCSS.

Below you can see a screenshot of the final website.

A device mockup showing the Seattle By Bike website on devices.

Design Tips

Inspired by Steve Schoger, I like to share design tips and refactors as I encounter them. The below tip was published by myself on twitter after I refactored a design on The Appex project. I look forward to creating and publishing more in the future!

For more...

...design shares like logos and other mockups, check out my twitter and dribbble.

ยฉ David A. Lindahl.
All rights reserved ยท Built Using Carrd