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.
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.
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.
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.
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.
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.
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.
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites…icomoon.io
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.
Just upload your designs and add hotspots to transform your static screens into clickable, interactive prototypes…www.invisionapp.com
I use Kraken for image optimisation. It shaves off quite a large chunk of file-size while preserving quality, so YAY.
You need to be confident that the quality of the results you are getting have not been compromised for the sake of…kraken.io
“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)