5 Ways To Streamline Your Web-Design Workflow

Productivity and efficiency are all the rage these days – and for good reasons. 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. Those tips might be quite useful especially if you’re getting started as a freelance designer :)

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 adds 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 if it’s possible!

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 I’m sure a lot of you don’t either. There are certain design elements that I use all the time. You probably have a favorite icon set or preferred CSS framework? I often use my own shape library that includes social media sites’s logos and marks. This greatly reduces the time spent creating icons.

Why spend time creating 67 icons for a website when you can use an existing set that you’ve downloaded or previously designed yourself? Unless it makes sense to create new icons from scratch for a particular project or that the design requires completely original icons. You can save time and save your client money. Win-win.

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 :)


  1. says

    Hi Jon Philips :) Thanks for the great article that you wrote. Could I share a tip? Is it alright to add the published date along with the article? It could help a lot :) Thanks!

  2. Anonymous says

    I find your articles to be some of the most well written and well thought out pieces of journalism online.

    I’ve yet to read one that I haven’t gained something from, or had a strong opinion on.

    Thanks for all the work you do.

  3. says

    I do use a framework, I agree that it saves a lot of time, if necessary I make customized changes, but for most of the projects it works pretty well.

    I don’t draw things on paper, because then I waste time digitalizing the sketches, since I design mostly websites, I find more productive to do quick prototypes with Fireworks or Mockflow.

    I think that choosing the perfect software can make a big difference in productivity. For example, I recently started using Versions/Kaleidoscope and it helps me to deal with files, before I wasted time saving files with another name and then opening each one to see the differences.

  4. says

    These tips should definitely become rote in every designer’s process. Because the more time you save by having pre-defined steps, the more you can focus on the creative process and problem solving.

    And regarding reusable elements and templates and frameworks, the most important is organization – properly naming files and labelling folders.


  5. says

    This might sound kind of silly but whenever I’m going into a massive project and I’ve been running my computer for a long time I like to give it a restart. I find it just clears up the ram and ensures things are 100% ready to go.

    I find sketches to be a really good approach and I need to be more engaged with them.

    Using existing CSS is key and jumping to other sites for examples and grabbing elements is key!

  6. says

    Automation makes life so much easier. Each manual task you take on is added time that you can be doing other productive things.

    The idea of a successful business is not to have to work for money but have money work for you.

  7. Roman Solomon says

    Love the article… Great tips that apply to virtually everywhere.
    Any tips on handling frequent copy revisions when timelines are tight?


  8. Marco Almeida says

    For the first time I saw something going directly to the point, it’s simple, clean and sharp.

    Well done…

    Congratulations, I have been inspired…

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *