A fast and modern web design workflow


My methodology
In order to design future proof websites and web apps, I wanted to use tools that allow me to keep most of my designs resolution independent, therefore vector based, and then build them on top of a responsive framework, such as Zurb’s Foundation. I try to save most of my icons as .svg as much as possible, or convert them to an icon font using Fontastic.

Mockups and design — Sketch 3

Bohemian Coding’s Sketch 3

I’ve recently made the switch from Photoshop to Sketch 3, because it is much more lightweight, and allows me to work much faster than I would in Photoshop. I’ve found that when I work on intensive UI designs which has a lot of layers, Photoshop doesn’t seem to handle it well, and it slows to a crawl, even on more powerful machines. Sketch on the other hand is quite speedy and handles large amounts of layers well. I can also create multiple artboards and multiple pages, which keeps my projects much more organized.

There are a few amazingly useful plugins as well for Sketch, such as the Content Generator plugin, which allows you to select a bunch of text boxes, and automatically generate and insert anything from names, to addresses, to phone numbers. There’s also the Measure plugin which allows you to select elements, and automatically generate markup that shows the width and height, essentially allowing you to create a blueprint to hand off to developers in a single click. How amazing is that!?

Coding — Sublime Text

Sublime Text 3

This one goes without saying, Sublime Text is probably the best text editor out there. It’s incredibly fast, lightweight, and I love the way it handles your file tree in the sidebar. There are simply too many time saving functions in Sublime to list here, but some of my favorites are the way that you can search across multiple files, make and edit multiple selections, and install from a vast library of plugins.

Some of the plugins I use are: Emmet (previously Zen Coding), which installs shorthands which will expand to become full html code, it definitely saves a lot of time where you will never have to manually type a <p> or <div> tag again. Package Control, which allows you to install external plugins directly within Sublime. Sublime Sidebar Enhancements, which gives you a more functional right click menu in your file sidebar. And lastly, the Sublime Git plugin which lets you access Git right within Sublime.

Check out Nettut’s wonderful guide here for some tips and tricks to speed up your coding in Sublime.

HTML/CSS Framework — Foundation

I’ve used both Bootstrap and Foundation, and both are great frameworks, but I personally prefer Foundation for its Interchange.js. The grid system also seems more straight forward in my opinion, where there are only 3 classes to manage; .large.medium, and .small. Essentially, Large means Desktops, Medium means Tablets, Small means Mobile, got it. Easy as pie.

If you’re not already using a framework in your workflow, I strongly advise learning how to use one right away. It gives you a blank canvas with a strong skeletal structure to start all of your projects on, and ensures that it is cross browser compatible to a certain degree, and completely responsive, which is an absolute necessity.

For one of my side projects, an e-commerce business, the traffic we get daily are over 90% mobile. It’s an incredible jump from just a few years ago, where there’s a closer parity between desktop and mobile traffic.

Time Saver — Codekit

CodeKit by Incident57

Codekit (Mac only) saves me an incredible amount of time when developing locally. It’s kind of a bridge between my coding environment, and seeing a live site. If you haven’t used it, it automatically compiles your SASS or LESS files into .css, and automatically refreshes your browser whenever you save your files. It certainly makes it much more of a joy to see your styling changes right away.

It may not sound like an essential tool, but once you start using it, you’ll realize just how much time it saves in the long run. It allows me to spend more of my time focusing on tweaking the visuals of my site, and less time flipping back and forth between windows, so I stay focused and make changes quickly, and see them instantly.

Additional Resources

Colorzilla
Great for generating those pesky color gradients

Fontastic
Lets you upload a bunch of icons and turns it into a font, awesome right??

Sketch App Resources
Comprehensive resource of Sketch plugins, freebies, and more.

Ultimate guide to Free Images
Comprehensive resource on where to find free images you can use in your work by Pat over at Smartpassiveincome

One clap, two clap, three clap, forty?

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