Prototyping Toolset 2020

I recently was asked what tools do I use in my process for prototyping new ideas and building out new websites. I decided to compile a list here for reference. What tools and resources do you use when building your prototypes? Please comment below and let’s start a discussion.

Inspiration

• Awwwards - A site of the day list that showcases some of the best modern websites and takes note of current web design trends

• The FWA - “Favourite Websites Award” - a site of the day showcase originally based in the UK

• Behance

• Dribble

Research and Development

Codpen.io - Developed by Chris Coyier of CSS-Tricks, I use codepen to make quick mockups or review design patterns to get the syntax just right before integrating into my project. I can also save these micro-builds into pens or projects which I can then reuse for a later project down the road. In addition, there is a great discovery component to the site which allows you to browse what other developers are doing.

jsfiddle

Compositions

Lo-Fidelity

Pen & Paper

Invision

High-fidelity

Sketch

Adobe XD

Builds

Create-React-App

Expo

Deployment

Gh-pages

Netlify