Streamline Your Design Workflow

design-process

In this article, Allison gives some tips for designers on how we can manipulate and streamline the design process to fit into our everyday workflow.

We’ve read countless articles, heard tons of presentations and own lots of books on “The Design Process,” and we see the awesome work that results from following it. You can’t help but drool at the extensive amount of research, the picture-perfect timelines and of course – what must be an unlimited budget. While it’s inspiring, and definitely sets the bar for what can be achieved in ideal circumstances, how does it affect the designer working under quite the opposite scenario?

For those of us who work independently or for small studios, we know what it’s like to be expected to turn around design solutions in several days, or even hours. What we don’t read or hear enough about is how we can manipulate the design process to fit into our everyday workflow. And when we do streamline the design process, which phases do we skip and which can we never work around?

Discover

During this phase we’re provided a creative brief, perform research and a competitive analysis, create user personas, and determine stakeholders. These all sound intimidating and time consuming, but we can include them into even the smallest of projects on a lesser scale than the big budget projects.

Tip: Designing an email or newsletter? If you get a lot of similar clients like I do, register a test email account and subscribe to your clients’ competitors’ email newsletters and tag them for quick reference. They’ll be impressed that you know what their competitors are doing. Even though it’s on a smaller scale, it’s still considered competitive analysis. Not so scary, right?

Define

In this stage we gather the findings we’ve discovered and move on to define the project. We’ll begin establishing our information architecture through methods like card-sorting. We’ll also begin forming a vision for the design solution through sketches, wireframes, and prototypes. This might sound impossible to make time for during small projects, but there are less involved techniques, too.

In this article Allison H. gives a super fast sketching technique for assigning value and arranging UI elements.

Tip: More likely than not, you’ll find UI Stencil’s browser sketch pad on my desk. Omnigraffle is one of my favorite applications for creating prototypes. It’s a fairly robust program that lets you share layers and link up pages. For designers, you’ll feel right at home in the user interface.

Design and Refine

Now we can focus on the look and feel of the user interface, and like most designers it’s the phase I’m always anxious to get to. Since we’ve already established our layout and information architecture, we can narrow our focus on everything from (but not limited to) photography, typography and color palettes to styling UI elements like buttons, forms and CTA’s.

Starting from scratch can make this seem pretty overwhelming. For clients I frequently design for, I’ll create a global PSD that contains everything from button and form styles to dummy header and paragraph text. This helps ensure brand cohesiveness, consistency and improves efficiency.

Tip: I have a folder on my desktop filled with design inspiration for everything from emails, newsletters, websites, forms, buttons, etc. and browse with Adobe Bridge for easy access. It’s so much easier and more efficient than visiting design inspiration websites that can distract you from the task at hand. (Guilty!)

Develop and Test

It’s during this phase where we start building the actual website/application. We know how important it is to write clean, semantic and multi-browser compatible code. That doesn’t sound too overwhelming until you start including different operating systems, multiple email clients, various devices and screen resolutions. Be a pal to your future self and use grid systems, resources like Boilerplate and Compass, which will take care of a lot of the legwork for you.

Tip: I have a small library of templates I’ve created to make the coding process quick and painless. When I’m coding, I use tools like TextExpander to avoid typing things over and over from project to project.

Deliver and Manage

In the final stage of the project we’ll hear terms like quality assurance, focus groups, heuristic inspections and user testing. In smaller environments where the knee jerk reaction is to get started on the next “ASAP” project, it can be tempting to forgo this phase. Instead of skipping it all together when time is of the essence, perform them on a much smaller scale.

Tip: When I need some quick feedback on a project I’ll prepare a few specific questions to ask individuals in the office who have less of a creative and/or technical background. This could be the sales rep, the project manager, the programmer, etc. I’ve found that the less attached to the client and project – the better. Don’t limit yourself to your fellow creatives or account executives, take advantage of the people around you.

While I’ve only skimmed the surface of The Design Process, I hope this got you thinking about different ways to manipulate techniques and processes normally only associated with large budget projects and big time clients.
For those of you who work for yourselves or small agencies, how have you streamlined The Design Process to fit into your everyday workflow?

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

19 comments on “Streamline Your Design Workflow

  1. Very nice article, Allison. Really like the tips provided. Really helpful. I am always curious on what others use to create a wire frame for web application. I’m gonna try the Sketch pad out. :)

  2. Very nice article, Allison. Really like the tips provided. Really helpful. I am always curious on what others use to create a wire frame for web application. I’m gonna try the Sketch pad out. :)

  3. Thanks for the streamlining tips Allison! I really like the idea of creating one global PSD for each client.

    One thing that has helped my workflow a lot is Dropbox. I can share files with clients, easily email files from my phone, and easily access files from any computer.

  4. Thanks for the streamlining tips Allison! I really like the idea of creating one global PSD for each client.

    One thing that has helped my workflow a lot is Dropbox. I can share files with clients, easily email files from my phone, and easily access files from any computer.

  5. I love the idea of keeping a folder of inspiration rather than browsing the web … I often start down that rabbit hole and forget what I started :)  I’ve never figured out what Adobe Bridge is actually for, so now I’ll have an excuse to open it up and figure it out.

  6. I love the idea of keeping a folder of inspiration rather than browsing the web … I often start down that rabbit hole and forget what I started :)  I’ve never figured out what Adobe Bridge is actually for, so now I’ll have an excuse to open it up and figure it out.

  7. I’ve tried for years to figure out the simplest way to explain this to others. It can be a cumbersome topic of diagrams and charts, but this is a very easy and not scary way to explain the process. Thanks!

  8. I’ve tried for years to figure out the simplest way to explain this to others. It can be a cumbersome topic of diagrams and charts, but this is a very easy and not scary way to explain the process. Thanks!

  9. Hi Alison, this is the type of article that really helps self learning web designers that are trying to make the career change. As web designnis not my full time job, my workflow is similar to the above and the tips have really helped. You talk about a global psd file sounds a time saving idea, i would be interested to see what you included or are you willing to share the psd file to help others get started quicker with designs. Great article.

  10. Hi Alison, this is the type of article that really helps self learning web designers that are trying to make the career change. As web designnis not my full time job, my workflow is similar to the above and the tips have really helped. You talk about a global psd file sounds a time saving idea, i would be interested to see what you included or are you willing to share the psd file to help others get started quicker with designs. Great article.