7 Steps To A More Effective And Productive Web-Design Process

Designing for the web is fun and we as web-designers are constantly learning new techniques and improving our skills. But to be honest, kicking-### at Photoshop doesn’t mean your new website will be a success. It sure will be pretty, but there are many things you should do before you actually sit at the computer and start designing. I’ve touched on the topic before but this time I figured we could go more in depth. :)

The tips and tricks below are my personal experience. It has worked for me and I’ve learned many of them from working with other designers, too. They’re little insights into my own design process. I hope you find it useful.

Turn Off Your Computer And Grab Your Notepad

I’m not talking about doing sketches or wireframing here. Before you get there you need to brainstorm and write ideas down.

I find that Ideas often come more easily when working on a personal project than on a website for a client, mostly because the decision process if simplified. No back and forth with the client (though we tend to complicate things since we are our own worst critic, right?).

But no matter the project, there are some questions you should ask yourself:

• What is the website about?
• Is it a personal site or a business website?
• When do you plan on launching it? Set yourself a deadline.
• Who’s the target audience?
• How much traffic are you expecting?
• Will it be a blog? A forum? A static site?
• Is there content ready for the site yet? Is it a redesign of an existing site?
• Do you want to posting videos, audio or other rich media files?
• Do you plan on monetizing the site? How?

The list could go on and on, but you get the idea.

I usually start by writing down a list of questions and then I’ll try to answer them the best I can without going too much into details. My goal at that point is to get a general idea, not to create a detailed business plan.

I will later revisit that list and add more questions and even change some of my answers. It is to be expected that more questions will pop up later on anyway.

Once I have a better idea of where I’m going I’ll make another list with more refined ideas, which brings us to the next step…

Organize, Structure And Plan Ahead

Now that you have a better idea of where you’re going, it’s time to start organizing and planning for the next steps.

Everybody works differently, but I think we can all agree that if you start looking for inspiration, or start asking for feedback only two days before your launch date, you’re pretty much screwed. So let’s create a plan!

At this point I will usually grab my trusty Moleskine (I use that thing a lot!) and create an approximate timeline. I’ll set a deadline and then go backwards from there. Of course make sure you give yourself a break and don’t set a super tight deadline. Instead, why not give yourself an extra day or two in case life gets in the way?

I’ll write down every single thing that I can think of that will need to be done before I launch the website. If you can, write down how much time each task should take.

This list will usually include what CMS I’ll use and how many page templates I’ll probably need. Then I’ll also think of some color schemes, font choices, grid system/layout I’m thinking of using, etc… I try to write down as much info as possible.

Did You Miss Anything?

Now, I’m sure that at this point many people would just open up Photoshop and start designing. But I believe there’s still a ton of stuff that needs to be done before that.

Don’t you think that now would be a good time to ask some people for feedback on your ideas? ;)

For sure, you could ask for feedback earlier in the process, but I think it’s a good idea to be prepared for whatever people will throw at you. So that’s why I prefer to make up a more detailed plan before I start looking for feedback. This way I’m ready to answer questions or counter objections or concerns they may have.

I try not to ask too many people though - 4 or 5 is usually enough. Of course don’t just ask your mom and dad, you’ll probably get biased opinions :)

Make sure you take some notes and ask them to clarify what needs to be clarified. In fact you should probably come up with a list of 8 to 10 questions to ask them and then compare their answers.

Now we’re getting somewhere!

Ahh! So You Need Inspiration?

Ok, so you should now have a very good idea of where you’re going and what needs to be done. Just make sure you revisit your ‘ideas sheet’ and your detailed plan before you start looking for inspiration.

There’s a truck load of CSS galleries out there and I visit a lot of them on a regular basis, but inspiration often hits me when I’m not in front of the computer. I guess it’s a subconscious thing. I’ll look at website designs, galleries and showcases and end up not particularly inspired. And then hours later while doing something completely unrelated, it’ll hit me like a brick.

When that happens I know it’s time I sit down and start drawing and work on some sketches. On to the next step.

Drawing, Sketching And Wireframing

There’s some great wireframing tools on the market, some are free, some are paid, but I don’t use any of them just yet. Instead I’ll grab my ‘DotGrid’ book and start drawing.

This part is extremely important. It’s the first time I actually put my ideas visually on paper. Now I can see, and imagine what the end result ‘may’ look like.

I’ll start with some very rough sketches of logos and website layouts and try to integrate pretty much everything I had written down on my ‘ideas sheet’ and detailed plan. Then it’s always a good idea to create different versions and variations of the same design and also try completely different things.

Once I have 5 or 6 versions I’ll usually let this sit for at least a day. If I’m still happy when I come back to it I know I’m ready to start wireframing. I personally like iPlotz very much.

Now I’m sure many designers will think ‘yeah but I can’t draw to save my own life’. Well guess what? I used to think the exact same thing a couple years ago. Now fast forward today and I cannot start a project without going through a couple rounds of sketches.

There isn’t any secret, you just need to grab a pen and paper and start drawing. It will probably suck at first, but you get better the more you do it. Practice doesn’t make perfect, but it’s part of the game. You weren’t born with Photoshop skills, it’s something you learned. Same thing with drawing.

Open Up Photoshop (or your favorite software)

I find this is the easy part. I know some don’t find it easy at all, but trust me, it’s a lot easier to design a website (using any software/app) when you know where you’re going and if you already have an idea of what the end result should look like.

Photoshop, Fireworks, Illustrator and Pixelmator are simply tools to help you get the job done. They’re useless if you don’t have a plan and a very clear idea of what needs to be done and what your design needs to achieve.

I spend way more time brainstorming and planning than I do designing. Like I said earlier, we all work differently and have different habits, but this has always worked very well for me :)

Refine, Tweak, Ask For Feedback - Then Let It Sit For A While

That’s the hard part: letting it sit.

I sometimes get quite excited about a design I did and I start slicing images and writing markup and CSS right away. This has never turned out good for me. I usually end up working all night on coding only to realize that I don’t actually like the design.

Before you start coding, you should always let your design sit for a while. Whether it’s 2 days or a week doesn’t matter - for as long as it doesn’t affect your deadline. Let it sit there, don’t look at it and don’t think about it. Then when you’re ready, open it up again and grab your ‘ideas sheet’ and plan and make sure your design is in line with what you had written down.

Start tweaking things, add some polish and refine it as much as possible.

Then, if you have doubts, let it sit there for another day or two and then ask for feedback and opinions. This time make sure you ask designer friends of yours and also 1 or 2 close friends. Then tweak it some more till you’re satisfied with it.

Your Turn To Talk

Like I said at the begining of the article, those are tips and tricks I’ve learned along the way, my experiences. I hope you enjoyed this post. Of course feel free to chime in and share your stories by leaving a comment below :)