Improving Your Web Design Workflow
- Gabriel Vasile
- October 25, 2013
One of the most important things these days for web designers, developers and especially freelancers seems to be improving their every day workflow and doing more within less time. If this is done properly, it usually translates in less headaches and more profit.
But usually, changing the actual workflow and tools means time investing in learning some new things… so first thing you should ask yourself is “Am I willing to invest now the time and effort to learn how to use this tool and try to include it in my daily workflow, even if I know that until I get used to it, it will actually make me less efficient instead of saving me time?”
If the answer is yes, then you should consider reading more.
Planning and wireframing
Every project should start with planning, especially if it’s a large one. The more complicated the project, the more time you should invest in planning it. Not doing so, will usually mean more headaches and time invested in “repairing” or adjusting the project.
To make a proper plan, you’ll need as much information from your client as possible. The more you know, the closer the end result will be to his needs. Some of the most important details you should always be aware of are: project/client goals, target audience, what the competition does, specific needs and website functionalities, content, site map, design style, budget, what will the call-to-action be, etc.
Once you know all these details, you can start creating a wireframe or directly jump into Photoshop and create a layout. I usually create a sketch on paper and then jump into Photoshop, but you can also use wireframe.cc which in my opinion is the best online wireframing tool. If you want some alternatives, you can check out this list.
Graphic design workflow (Photoshop, Illustrator)
There are a lot of things you can do to improve your graphic design workflow in Illustrator and Photoshop, but since I’m only using the last one that’s what I’m going to talk about.
First of all, start customizing your workspace. In Photoshop, you can set up all your palettes and panels in the order you want. You’ve got some predefined workspaces like 3D, design, motion, painting and photography, but you can also create your own.
You’ll be able to align and arrange elements much faster if you show guides from View → Show → Guides (or CTRL+; ), create your own guides, show a grid View → Show → Grid (or CTRL+’ ), snap elements View → Snap (or SHIFT+ CTRL+; ), snap to all View → Snap To → All , show smart layers View → Show → Smart Layers and show rulers View → Rulers (or CTRL+R). You can customize your grid from Edit → Preferences → Guides, Grids and Slices.
To have a flexible design, use shape layers. They are scalable, so you can use them for retina display as well. To have your shapes perfectly aligned to the pixel grid, before you draw them, have Snap to pixels clicked. You find this under the shape options little arrow, next to the custom shape tool.
Use smart objects. They preserve an image’s content with its original characteristics, enabling us to make non-destructive changes to the layer. For this, you can drag elements from Illustrator to Photoshop or convert elements to smart objects yourself.
You should definitely do this if you have repeating elements… create an element as a smart object and repeat it as many times you need it… then if you need to make a change to the original element, you’ll just edit in one place and it will be updated in all the copies of that smart object.
You can also use smart objects for the main sections of a web page, which are repeated across different pages of a site like header, footer, menu, sidebar, etc.
Use layer comps when you want to create an element with different states like active, hover, etc. Windows → Layer Comps. This way, you’ll stop creating an element for each state and create just one element with different states.
Use your own color swatches. When you start a project, most likely you already know what colors you’re going to use. Start creating your swatches right there and then if so and stop moving back and forth between whatever colors you found on the web and Photoshop. Place them in your swatch palette and save time.
Just like saving a swatch palette, save your custom styles as well. Then you can simply add the same styles all over your project.
Organize your layers. Create folders (CTRL+G) and place your layers inside. Stop keeping all your layers floating around and wondering where the hack is a specific one.
Record and use actions when you have repeated tasks, take history snapshots to compare and keep different ideas.
Use UI packs to save lots of time. I’m actually using a free Bootstrap 3 PSD to create my elements and after I finish creating some sort of wireframe, I start styling the elements.
Bootstrap 3 and Foundation 4 are the most popular CSS frameworks these days and they can save you a lot of time once you get to know them. Personally, I’m a huge fan of Bootstrap and that’s what I’m using for a long time. I have actually created a tutorial about including Bootstrap 3 in WordPress and it’s the first of a series called Create a Responsive WordPress Theme With Bootstrap 3
Frameworks can save you a lot of time, but if you’re just jumping from using one to another, this will never happen. My advice is pick one and stick to it for a long time.
Know your shortcuts
I’m a huge fan of shortcuts. Maybe I’m lazy or something, but I like to think about myself as efficient. Why would I waste my time doing the same thing over and over again when I can automate it somehow? A few seconds from here, a few from there and bam! I got to create websites much faster then my colleagues. I’ve compiled for you here a huge list of Web Design, SEO, Blogging and Social Media Cheat Sheets.
You don’t like the existing shortcuts? You can create your own using Autohotkey, a fast scriptable desktop automation with hotkeys. Like they say, creating your own apps and macros has never been easier.
If that’s still not enough for you, use Emmet. I’m using it for such a long time, that I can’t imagine my life without it any more. Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow. It gives you tons of easy to remember and to use shortcuts. You’ll code HTML and CSS like a pro!
Use the right editor
Choosing the right editor for you will be probably one of the things you’ll thank me for. Instead of giving you a list of editors, I’d like to talk to you about Sublime Text. Most of the people that tried this editor, believe it’s by far the best one out there. I’m using since the first time I found about it and never went back.
It’s gorgeous, blazing fast, extremely extensible and customizable. You can create your own shortcuts and plugins, install existing plugins (and there are tons of useful ones), have code completion for pretty much everything, create snippets, key bindings and have multiple cursors! Here, let me show you what it can do. Jeffrey Way has an amazing free video tutorial named “Perfect Workflow in Sublime Text 2”. Trust me… once you switch to it, you’ll never go back.
Most of you are probably already aware of CSS preprocessors like SASS with Compass, LESS and Stylus, languages like Coffescript and Haml. It’s time to also start using them. The larger your project is and the more scalable you want it to be, the more useful these preprocessors will be.
If you don’t like using the command line, you can compile your files using CodeKit, Compass App, Scout, Koala, LiveReload, Guard or GruntJS. There are probably other tools out there as well, but I believe these are the most popular ones. In addition, GruntJS doesn’t just compile your files, but it can also lint files, concatenate, minify them, optimize your images, watch your files for changes, livereload your browser and many more.
There are of course a lot of useful browser extensions out there, but let me give you what I permanently use. Chrome Extensions : CollorZilla, Xmarks, Adblock, Explain and Send ScreenShots, WhatFont. Firefox Extensions: ColorZilla, Empty Cache, Firebug, Open with Photoshop, Web Developer Toolbar, Xmarks, Adblock
Our web design workflow can always be improved. Every year new awesome tools try to make our lives easier. The one specific tool that I’m keeping an eye on is LiveStyle which is a plugin for live bi-directional (editor↔browser) CSS editing currently in beta. If they will implement a Firefox extension and preprocessors support, it will be next big hit.
I’m constantly looking to improve my daily workflow and save time. Once I find new solutions I’ll let you know. Follow me on my social accounts and make sure you check out from time to time my blog for new tips. And by the way, let me know what you did before to improve your workflow. What are your tools? What are you doing special?
- 4 Steps to Creating a Winning Web Strategy
- Is Your Website Working Against Your Marketing? 5 Tips to Fix It
- 5 Interactions to Gauge the Effectiveness of Your Content Marketing Campaign
- How to Know Which Mobile Messaging Channel to Use in Any Situation
- Infographic: 2017 Web Design & UX Trends to Boost Conversions
- How the Mannequin Challenge Can Help Your Marketing This Holiday Season
- How Your Local Business Can Benefit From the Pokemon Go Craze
- Infographic: 5 Ways Your Website is Losing You Customers (and 5 Easy Fixes)
- Video: 5 Questions Your Web Designer Should Be Asking You (and why it matters)
- 4 Ways to Get Website Traffic Through Facebook