SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

5 Ways To Streamline Your Web-Design Workflow

January 14, 2011 by Jon 12 Comments

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

Filed Under: Article, Business, Design

Comments

  1. Princess Shaza says

    January 14, 2011 at 7:15 pm

    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. Jon Phillips says

    January 14, 2011 at 7:18 pm

    Hi Shaza, sure, I’ll see what I can do ;)

  3. Princess Shaza says

    January 14, 2011 at 7:19 pm

    Thanks so much!

  4. Anonymous says

    January 14, 2011 at 8:26 pm

    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.

  5. Albert Lamme says

    January 14, 2011 at 9:04 pm

    Great article, Jon.

    Here is another tip:

    Organising images, templates and icon by extensions is als a good tip.

  6. nataliav says

    January 14, 2011 at 11:05 pm

    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.

  7. ♥ Donna Vitan says

    January 15, 2011 at 7:29 am

    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.

    Cheers,

  8. Boompah says

    January 16, 2011 at 12:58 am

    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!

  9. Long Nguyen says

    January 16, 2011 at 5:02 am

    Although, the headline talks about web design, many elements in this article apply to almost everything.

  10. spinship says

    March 2, 2011 at 12:24 am

    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.

  11. Roman Solomon says

    May 7, 2011 at 5:49 pm

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

    Thanks!

  12. Marco Almeida says

    June 24, 2011 at 12:52 pm

    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 *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022