In the past, it’s generally taken me about twenty hours to complete a home page comp in Photoshop which I feel is a bit long. I’d be curious to know, on average, how long it takes other designers.
My Recent Workflow
A workflow that has helped me recently is actually one that I have applied when painting. In essence, I simply limit the amount of options I have. When painting, this would mean deliberately reducing the number of colors I can use or only allowing myself to paint with a palette knife. Applying a similar method to web design has helped me design faster because I don’t have so many decisions to make. There’s less time for self doubt, something that I find is rampant in my creative processes.
One: Add Content
I like to get all of my content in Photoshop first – this includes text, images, logos, icons, etc. I make a commitment to not be distracted by the desire for details.
Two: Structure & Balance
As soon as I have my content plugged in, I focus on hierarchy, layout, and balance. Here’s where I try and be organized (in life, it’s perhaps my biggest weakness). The goal here is to make the site look structured and aesthetically pleasing without adding details. This is the part where my problem solving happens - I need to arrange the content where it makes the most sense, keeping in mind the goal of the content. For me, and certainly for other designers, this step varies greatly depending on your target audience, client requirements, and length of content.
It’s been said that typography is the foundation of web design. The goal for this step is to focus on the readability and beauty of typography… if I nail this step, the rest is icing on the cake because typically the design can hold together without any other details. I suppose it could also be butchered by adding clashing colors, but let’s assume nobody will do that. :)
A big challenge for me is choosing typefaces. There are thousands out there, many of which are now even available by using @font-face. It helps to think about the tone of the site – how is the client trying to convey their business? Are they casual enough to choose a handwritten font? Or are they serious and stern – perhaps I should just stick with Helvetica Neue? Although this step can get overwhelming, it’s also the one that inspires me most. I have so much inexperience here, but it’s so fascinating how much emotion can be conveyed through type. The general question I’m continually asking myself during this part of the process is: “Does the design work without any color, depth, lighting, or special effects? If so, I’m onto step four – the details.
Once I feel that I’m done with the previous steps, I start adding details like drop shadows, patterns, texture, color, lighting. This part is also littered with choices and it’s one that I also struggle with. I imagine that I could set up pattern libraries that convey particular emotions and tweak those wherever it makes sense. If you’ve got any suggestions on how best to tackle this step, I’m all ears!
If you find yourself struggling with design, maybe limiting your options in this way will help!