5 Ways To Streamline Your Web-Design Workflow

Productivity and efficiency are all the rage these days—and for good reason. As a freelance designer, my income greatly depends on my ability to produce quality work, and if I can do that even slightly faster than the other guy, I will not only have happy clients, but returning customers.
In this post I’d like to share some of the things I’ve learned throughout the years that I use or do on a daily basis to help me with my workflow. Of course the more experience you gain the more time you’ll save, but let’s try to point you in the right direction :)
Optimize And Customize Your Work Environment
Today’s web-designers are required and expected to work with a ton of different types of software. Some are desktop applications and some are web-based. It’s very important to have all the tools you need no matter the project.

It’s great to have a bunch of great tools at your disposal but you can definitely take this further and optimize each application to save you time. It may not seem like much to save 4-5 minutes here and there, but it can quickly add up. What would you do with even just 1 extra hour in your work day? 20 or 25 hours a month?
Pretty much all the applications we use as web-designers have pre-defined shortcuts—use them! If there’s isn’t a keyboard shortcut for something you do often, create it!
Of course being well-organized is also key. Why not create a system of folders on your computer to store the things you need for work? For instance, I have 1 main folder called ‘design work’ where I put everything that’s related to my work. Inside this main folder I have a number of sub-folders like ‘current projects’, ‘done’, ‘articles’, ‘pdfs’, ‘design elements’, etc…
With this system I can quickly locate the file(s) I need for a certain project. No time wasted. This main folder is also backed-up to my external hard-drive everyday. Better be safe than sorry.
Research, Wireframes And Sketches
When I begin work on a new project it almost never involves the computer. I always write things down in my Moleskine or DotGrid notebook, draw some rough sketches and brainstorm ideas.

This may seem like a waste of time for some. After all, why do this when you can jump straight to Photoshop? Trust me, the time spent planning, sketching and wireframing is time well spent. Not only will it help boost creativity because you’re not restricted by the computer interface, it will also have huge benefits down the road. It makes sense to start using the computer only when you actually have an idea of what needs to be done and where to start. It will save you a lot of time in the long run.
Write A To-Do List And Prioritize Tasks
Before going to sleep try writing your to-do list for the next day. Then re-arrange the items on your list by order of importance.
When do you feel most creative? In the morning? Great! Then create a simple schedule and put ‘work on sketches for client’ around the top of your list and ‘accounting and invoicing’ lower down. If you don’t prioritize tasks there’s a good chance you’ll end up having some problems meeting deadlines.
Automate As Many Tasks As Possible
Batch actions in Photoshop are a real time-saver. But don’t forget that you can automate a bunch of other things. For example, if you’re on OS X, you can use the Automator app to take care of those smaller (and time-consuming) tasks like renaming or resizing images.
Use Pre-Made Design Elements And Reusable Templates
Do you create everything from scratch? I don’t, and you probably don’t either. I’m sure there are certain design elements that you use all the time. You probably have a favorite icon set or prefered CSS framework.
Why spend time creating 67 icons for a website when you can use an existing set that probably looks better anyway? You save time and the client saves money. It’s a win-win.
In fact, this is the central idea around which MediaLoot was created; to provide you guys with a ‘design toolbox’ that you can use for your projects, saving you time and energy, and letting you focus on what matters: getting things done and making your clients happy.
Your Turn To Talk
How do you save time? Any tips you’d like to share with us? Please take a minute to chime in and leave a comment below :)
Category: Articles
Download ALL of Our Premium Resources
Signup for a MediaLoot subscription today and get all of our premium resources to use commercially and even in web apps. At just $19, you can't lose...


Comments
This is an awesome article, and one that I’ve been dealing with in my own time lately. I used to draw like crazy when I was younger, but then I found photoshop and stopped - until recently.
Drawing out sketches is definitely more ‘free’ feeling as I’m able to sketch out 10 or so potential layouts on every page (if I draw small enough) and I can do this all within about 10-20 minutes instead of creating new layers and text inside photoshop, just to change it around later.
I just got my first external hard drive too and I back up my work folders to it every couple days. It’s definitely a reassuring feeling to know that when I go to sleep, my stuff is safe.
Sweet pointers. Definitely will agree on automation and organization - saves a lot of times. As far as doing research and sketching out the layout - definitely saves hours of work in Photoshop. Very well written pointers.
@Mike: I’m so with you! Photoshop is an incredible tool, but some times you just need to step away from it. Even just because it helps to design/drawn using a different medium. Paper feels more ‘natural’ I find. We learned to write and draw before we learned PS/AI after all.
@Xander: Thanks! Glad you liked the post :)
I agree with the sketching. It speeds the process of coming up with a layout before you even open up Photoshop.
I also have a baseline PSD, CSS, and XHTML that I use as a framework for starting each project.
Thanks for the tips Jon!
Outstanding ideas! I’m onboard with automating production. I work on a Mac, like you, and I take full advantage of the software OS X provides. Using the built-in Unix Shell applications, Python, and PHP speeds up development and handles all the dull mundane chores.
I’ve written applications in Python to create a web project’s folder, which creates a system of sub folders, like you describe, including an HTML template, CSS style sheet, and a basic JavaScript file with the current jQuery framework added. Even the company’s name is written into the files. With a click of the mouse, I’m ready to start working.
I could go on and on about harnessing the power of these scripting languages. I use them to process images, build HTML code, write server-side commands, build XML sitemaps—I save hours of work on a project. I love letting the computer cross the T’s and dot the I’s.
Thought that I would chime-in; the 960 grid system is a GREAT way to streamline high-impact, scalable, websites.
Great article, thanks!
Nice site too.