A peek inside an aspiring Full-Stack Designer’s toolbox

I love being able to get a detailed look into someone else’s work process, especially when it involves design. Since I enjoy it so much, I thought why not share my process with others? I was originally inspired to do this after reading Eden Vidal’s article on the rise of the Full-Stack Designer and the tools they use.

A Full-Stack Designer is someone who is involved in a design process from ideation to development, aided by a variety of modern tools. If you follow any of the popular web design blogs out there (eWebdesign, Webdesigner Depot etc), you’ll know that there are constantly new tools being developed to make the web design process better, more seamless and more collaborative.

In my opinion, the tools you use are your own preference as a Designer. If you’re still into using Photoshop, and you’ve perfected that process, then go ahead and use it. It is important, however, to be open to changing your process. It’s not easy to change a way of working you’ve been doing for years, and I admit I was reluctant in the beginning, but once I really tried using other tools I haven’t looked back. The transparency and collaboration using new tools has brought to my design process has been the most valuable. I still use Photoshop, but for other things.

So lets get to it, here is what I use and what I use them for:

A pen and paper

Before I start anything, I use the oh-so-humble pen, a notebook or piece of paper. I need to sketch or write something (mainly for myself) before I can start using a computer. This may not be true for everyone, I’m almost 30 so maybe if you’re younger you don’t have that same need. But I simply cannot go without it.

Some of my very rough sketches

Paper App for iPad

Our Head of UX and Design at Next, Shawn uses this app a lot more than me. I like to use it every now and then and it’s really great for basic ideas and wireframe sketches. I still find I need to write things though (this may just be habit), which is not easy to do using this app, so I tend to just go back to pen and paper. But I highly recommend trying it, it’s rather fun.

A sketch Shawn did on Paper

Moqups

Moqups is primarily a tool for wireframing. They have recently made some updates that include a lot more features which in theory is cool, but what I really liked about Moqups was that it was limited. As Designers, we tend to start thinking about the visual appeal of what we’re creating from the minute we start making it (I’m sure I speak for all when I say this), and in the wireframing phase of a project the focus should be on User Experience and functionality. Moqups provides a bunch of common web components that you can drag onto a canvas and edit / move around with ease. It makes it really quick and easy to create a basic wireframe.

The Moqups interface

Sketch

A few of the reasons I love Sketch:

  • Artboards (infinite work space FTW)
  • Intuitive, one letter shortcuts (R = Rectangle. L = Line. V = Vector. O = Oval)
  • Community: anyone, anywhere can contribute and make it better. Check out the plugins, and the resources it has to offer.
  • The customisable grid layout
  • Easy exporting of assets / “slices” — you can make any layer or group exportable with one click.
  • Symbols and shared styles: Save the properties of an element as a “shared style” and make it faster and easier to edit that style, or add those properties to any element.
  • CSS Attributes: I don’t use this very often because I write my own CSS, but it is definitely a handy feature.

There are more, but we would be here all day.

The Sketch interface

Adobe Photoshop and Illustrator

I basically only use Photoshop and Illustrator for exactly what they were made for — photo manipulation and illustration.

  • I use Photoshop for photographic editing, comps, deep etching and grading.
  • I use Illustrator for creating custom iconography, typography and illustrations.

IconJar

This is a handy little tool that was made quite recently. It’s basically a type of Font Book, but for icons. You can upload any icon set into the app and then just drag an icon onto your design as a vector. It’s the easiest way I have found to incorporate icons into a design, especially if you use common icon libraries like Font Awesome, Material Icons etc.

http://geticonjar.com/

IcoMoon

In cases where a project calls for unique iconography, IcoMoon is the best way to create a custom icon font. I have used it A LOT.

A custom icon font created with IcoMoon being implemented using HTML

InVision

At Next, we’ve used InVision for prototyping for about a year now. The more we’ve used prototypes to present our designs, the more we’ve realised how important they are in communicating a design to a client. Interaction is so important. One of our favourite quotes at Next:

A prototype is worth a thousand meetings.

…and it’s so true.

InVision allows you to create an interactive design really easily and quickly using Hotspots. Creating a prototype and getting feedback on a design is super easy, and InVision has a great team behind it, constantly striving to make it better.

I recently tried using another very popular prototyping tool called UXPin, and it’s also really great but for different reasons. It’s quite complicated and takes more time to get used to but is particularly powerful for showing animation.

Adding hotspots in InVision

Kraken

I use Kraken for image optimisation. It shaves off quite a large chunk of file-size while preserving quality, so YAY.

Webstorm

HTML, CSS and JavaScript — I guess this is where a lot of designers jump off the bandwagon. I enjoy coding so I decided to jump on, but it’s obviously not for everyone and requires dedication and constant learning. In his article, Eden suggests Webflow as a tool for turning designs into code. I have used Webflow and it’s very powerful, however, at Next we believe in component-based design and creating HTML and CSS style guides, so this process doesn’t work for us.

Style Guides

Our senior Front-end Developer at Next, Michael, has held my hand through understanding the Front-end Dev process. Michael has created a boilerplate style guide for Next, which we use to create the building blocks of a website design in HTML, CSS and JavaScript.

“The style guide helps to maintain the design and code consistency of the website as it grows over time.”

For more on that, read Mike’s post on why we create style guides.

My text editor of preference is WebStorm upon his recommendation. It has a lot of integrated features which allows for a seamless development process, meaning I can use this one tool for everything from cloning projects to writing code and pushing to GitHub.


So in summary, my full-stack design process would be as follows:

  • Ideas and sketching (pen and paper / Paper App)
  • Wireframing (Moqups)
  • Interface Design and Layout (Sketch)
  • Photo manipulation (Adobe Photoshop)
  • Icon creation / Illustration (Adobe Illustrator)
  • Prototyping and design feedback (InVision)
  • Icon font creation (IcoMoon)
  • Image optimisation (Kraken)
  • Front-end Development (WebStorm)
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.