Iterate Your Current Design Process To Find A Better One

Posted: 03 Jul 2014 05:30 AM PDT

Has your design process been changing? Are you trying to incorporate new ideas into it as you shift toward a responsive workflow? Feeling a bit overwhelmed with all the new ideas others are suggesting you try?

Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

Today I want to talk about your design process, though not so much the process itself. Rather I want to talk about how you arrive at a design process, especially at a time when the industry is undergoing large changes in how sites are designed and developed and how deliverables are presented to clients.

The idea for this post comes from a similar post from Mark Llobrera, Prototyping Your Workflow, for A List Apart. Mark talked about Bluecadet, the agency he works for, and how they evolved their process to what it is now.

As you read this post keep a few things in mind.

How has your process evolved recently?
Did you incorporate recommended techniques?
Did you copy someone else’s process as a starting point?
Are you feeling overwhelmed with all the changes that are being recommended?

Let’s start with that last question.

Feeling Overwhelmed

Mark and his colleagues at Bluecadet were excited to incorporate some techniques into their workflow. A few things they wanted to work with were:

atomic design
html/css wireframes
style tiles
element collages
front-end style guides

That’s quite a lot of new things and Mark’s team was feeling overwhelmed with all the techniques presented for new responsive workflows.

It’s understandable. The industry is undergoing a big revolution in process mainly due to responsive design. It’s not only responsive design though. We’re thinking mobile first and are using new and different tools. Evolution in what we can do with html and css also adds to the changes in process and workflow.

It really is a lot to absorb and feeling overwhelmed is something many of us will experience as we try to absorb it all. How can we even try to incorporate all the things others suggest?

The Path to Changing Processes

As some designers modify their process, they’re also talking about them. I include myself among this group. It feels like I post about my process every month or two. Hopefully you aren’t getting tired of hearing about it.

Mark’s suggestion is not to follow someone else’s process exactly or treat it as a recipe. I absolutely agree. We’re all different. We work on different teams with different people. We have different ways for working our best.

Bluecadet had to experiment and make mistakes along the way to develop their current process. You have to do the same. You have to make your own mistakes to discover your eventual process.

I do think it’s ok to start out copying someone else’s process. Use it as a template to get you started if you choose. Find the pain points in the process and adapt them to your strengths and weaknesses as a designer.

Imitation is one of the ways we learn. It’s ok to copy someone else’s “style” and copy it so thoroughly you can make it your own and modify it to suit your needs.

Try One Thing at a Time

In his article, Mark suggests we develop our process by iterating the process itself. Lots of people are suggesting our process should revolve around iterating the project. Why not also iterate the process itself.

Instead of trying to incorporate all the new at once, it makes sense to make one change at a time. Try working with html/css wireframes on one project and then try style guides on the next. Or maybe you spend a few projects to feel comfortable with atomic design and work it into your process before moving on to the next thing you want to try.

The idea incorporate one new thing at a time brings me back to my early days learning to build sites with css. I’d go into each new project wanting to try one new thing in the site’s development.

It might have been a new css technique or a new css property I’d heard about. Maybe it was a new way to format my code or a better way to work with classes and ids. I didn’t force these things on projects, but looked at each project to identify what new thing I could try that would complement the project.

With each site I built, I came away a better designer and developer because I continued to learn new things and apply them to my work. I iterated my skills working with css. The same iterative approach can improve your design process.

How I Iterated My Own Process

My current design process evolved through this kind of iteration. I hadn’t really thought about it before coming across Mark’s post, but I did iterate my process. I worked new things into it until it arrived where it is today.

I’ve never been a Photoshop expert. I can do the things I need to do that cover 90% or so of what I need a graphic editor for, but I’ve never been great when it comes to design comps. I can envision the design, but my skills with Photoshop don’t match my vision. My skills have certainly improved over the years, but they’ve never quite gotten to where they should be.

On of the first sites I designed was for an outgoing and fun virtual assistant. I had an idea to create the site’s navigation to look like a file cabinet. It seemed like a good way to communicate what she did as well as something of her personality. I could see the html and css to create what I wanted, but I had no idea how to recreate it using Photoshop.

I did my best on this and other projects to follow industry practice and deliver a design comp and go through a few rounds of back and forth with clients to get to the “final” version of the design. I’d have to ask clients to trust me at times despite what they saw. For me it was a lot of work to redo the comps and I tried to minimize that work.

For a long time I looked for a way to escape graphic editors when presenting a design. I tried using Keynote to create wireframes, but my clients wanted more details. My wireframes grew in fidelity only to find myself back to a few rounds of changes with clients that only slowed me down.

I was doing the same thing I had been, though a little more efficiently, since there was less you could do in Keynote than Photoshop and I could work a little faster.

Responsive Design Brings More Process Changes

Not long before responsive design started making the rounds, I was teaching myself to work with grids and incorporate what I learned into my process. On each site I would try something new and slowly evolve the process.

Shortly after learning about responsive design I reevaluated my process. It seemed clear to me a lot was going to change, including design processes. It made more sense for deliverables to live in a browser, which was fine with me as it reduced the potential work in graphic editors. There was a lot more to learn as well.

It was all similar to when I learned css. On one site I might experiment with responsive grids and on the next look more into how and where to set breakpoints. On one site I began the design in a widescreen browser and on the next I began on a mobile screen. I didn’t try everything at once, but over several sites I was able to incorporate enough new things to feel comfortable with responsive design.

Quick Tip — The first time you try something new it might seem impossible, but if on the next project you try something else new, the first thing can seem much easier than you expect because your focus is now elsewhere.

Redesigning this site

The 2012 redesign of this site was the first where I didn’t use a graphic editor to create a comp. Naturally graphic editors played a part in creating the logo and other imagery, but there was no design comp.

Instead I began by identifying content and content types. I selected typefaces I thought would work. I built a simple web page using copy from the existing site and began trying potential typefaces. I made other typographic decisions about measure and line-height. As the typography advanced I began to evolve the layout before trying different color schemes.

Little by little the site came together. It stayed true to my initial vision even as it evolved from that vision. I gave up the graphic editor in favor of html/css style guides that became prototypes for the pages you see now. Ever since I do the same thing with clients. It’s been a couple of years since I delivered a design comp.

The process evolves a little with each client as I continue to iterate and also to account for the uniqueness of each client and project. The process has come about by trying different things that aligned with my strengths and little by little incorporating some of them into the process for good.

Closing Thoughts

The really big change responsive design brings in regards to our process is that deliverables are being pushed to the browser as soon as possible. Static pictures don’t do justice to the design of a website. The site needs to be seen in its natural environment, the browser.

How you get there is up to you. It’s something you should probably take one step at a time. Consider your current process and understand you need to move from static comps to dynamic prototypes if you haven’t yet made that change.

Start thinking about how to deliver prototyped pages as deliverables and identify what in your process needs to change to deliver working web pages earlier in the process. Then start changing those things one at a time.

Don’t blindly follow someone else’s process, but steal from it if you need a place to start. Ultimately you have to evolve your own process. See what others do and try some of those things. Don’t ever feel like there’s only one process or workflow. They vary as much as the people who use them.

Keep iterating. Make a change here and a small improvement there. Iterate your process until it aligns well with your strengths and weaknesses and also the direction the industry is moving.

Download a free sample from my book Design Fundamentals.

The post Iterate Your Current Design Process To Find A Better One appeared first on Vanseo Design.