It’s all about the details: web design process in 7 steps

Web design is a bit like running a marathon. You are constantly perfecting your design until you reach the finish line and are greeted with a happy client.

The design’s success depends on how well you combine elements — lines, fonts, colors and textures — to communicate a company’s mission. The attention to details is extremely important during each part of the process!

These 7 steps demonstrate exactly what you should pay attention to while racing to the finish.

Detail 1 – the design brief

To understand client expectations, first look at the website examples they give in the brief — a picture can be worth 1000 words.

But don’t forget the client’s words as they are just as important. I look for key sentences in the brief describing the company’s intentions:

  • We’d like a design that has an artistic feel but is still easy to use and won’t be difficult to make it work with other future elements of the website.

Then, write keywords that will help keep me on track:

  • artistic feel
  • easy and fast to use
  • won’t be difficult to edit
  • elements that attract your attention
  • “typical” navigation that allows you to quickly get to the content
  • most content on the home page

Detail 2 – technical requirements: programs, dimensions and usability

The program you use depends on the visual results you want to achieve. In Fire Exit TheatreI was going for a rough textural feel with imperfections.

For these types of projects I always choose Photoshop as it’s best for creating patterns, using various overlay methods and painting using masks.

After I’ve chosen my program, I look at the client’s technical requirements from the brief:

  • We would like to create our web site using the 1140px grid. Meaning the design should have room to compress to 960 (for 1024 x 768 monitor).

Check out 1140 CSS Grid for some awesome web design grid resources!

The grid helps with usability and readability which are top priorities of your web designs. In this design, I created usability by:

  • creating structure with big headers
  • using a newspaper-like grid divided by dotted lines

Detail 3 – balancing personal with client expectations

It can be difficult to create a design that pleases you as well as your client. It is (usually) a mistake to design a site that is too personal. But there is one rule you should follow — if your design pleases yourself then there’s a good chance others will like it too.

As a professional designer, it’s important to like the specific elements we choose like textures, photos, icons, web fonts and the like. The trick is implementing these elements so the client’s goals and expectations are met as well. There are many times you will come up with an awesome graphic, but if it does not blend with the overall site feel then store it away for another project.

If you can’t bring yourself to get rid of the graphic, then play around with it until it fits. For example, I bought a photo of a burning match on iStockphoto and separated parts of the image from the background then added shadows and transparencies.

Luckily for me, the client liked it but had he not, I would have told my great idea, “see ya later.”

Detail 4 – creating multiple versions of your design

You are not just designing for yourself and the client but for a number of viewers — be mindful of the target audience and overall site function. For example, Fire Exit Theatre is an organization for different types of people thus it should have some kind of cultural neutrality. It’s basic function is to share performances, sell tickets and show posters.

A great way to achieve the right design is by creating multiple versions of it. I often design different mockups that range from fun to subtle. In the first version for Fire Exit Theatre, I went for a “unique” quality, then resigned a few elements to make it more subtle.

Version 1:

Version 2:

Final version:

After a day or two with my first concept, I saw its weaknesses and worked to improve them. I removed the seats which allowed me to extend the page vertically. I used a newspaper-like grid to improve information flow and used a more ergonomic solution for text (dark on light).

As you can see, the final design gave the company’s mission more clarity which made for a happy client.

Again, it was important that I didn’t attach myself to the first design but I also didn’t abandon it.

Detail 5 – create surprise effects and contrast

Look for ways to create surprise effects and contrast as you push your final design. Most viewers stay on sites that incorporate simple tricks — intriguing concepts, surprise visuals and nice contrast.

In Fire Exit Theatre, I combined paper with fire because it created dramatic tension – similar to a dramatic movie. This combination gives the impression that the paper will catch on fire while the fire leads the viewer’s eye to the company’s name — EXIT. Your effects should be clear, expressive and surprising. In this case, the huge match gave the design a wow factor.

But you don’t have to “catch your design on fire” to create a surprise effect — you can add smaller effects. In this case, I added a light effect to the spotlights.

 

And for contrast, I played with textures like on the bird.

 

Detail 6 – stay moderate

As the saying goes, after a storm there comes a silence. You’ve created solid design mockups and now its time to calm things down and bring it all together. It’s likely a client will not identify with every element you incorporated. What should you do? Take the elements out.

For example, the theater spotlights and match were dramatic enough so I decided to keep other design elements more subtle.

Detail 7 – care about the final touches

As you can see, I care a lot about the details from selecting the right fonts to selecting the perfect background. Just when I’m seeing the finish line, there is no reason to slow down — it’s important to tweak and finalize the overall design.

For example, I felt it was necessary to fade the background into darkness.

I also improved the horizontal bar by softening gray shades of the city and strengthening contrast around the “tickets” text.

And when all seemed finished, I took 3 steps back and looked at my design thinking, “what is missing here?”

And yes, I found something missing – in this case it was the nails. :)

And finally, this work brought me victory! I won the contest and got to see it implemented on the client’s site. It was also featured on “Are You The Platypus” Design Competition and Top 9 at 99.

You can have these rewards too if you practice, practice, practice these 7 detailed steps. :)

Do you have any tips or questions? Post your question.

Joanna Krenz Kurowska since 12 years has been working as a freelance graphic designer and web designer. She lives in mountains on south west of Poland. Last few years she spent working for clients on five continents, blogging about web design and technology for 99designs community blog, winning dozens of web design contests and following her passions: art photography, running marathons, graphic art. Member of art union “New Mill - Artists Colony”. In team with Jerzy Kurowski she creates complete digital products like websites or multimedia programs. She loves challenges like swimming in ice air holes, long distance mountain running or exploring new areas in web design. More about her work on 23dragons.com. My 99designs profile: http://99designs.com/users/413631. Email: jkk2332@gmail.com
Joanna Krenz-Kurowska

17 Comments

  1. kto

    Very nice work. Thanks for sharing your design process!

    Reply June 27, 2012 at 7:52 pm
  2. MEMOSTUDIOS

    Although the design process is great, there are many things the designer didn’t take in consideration. Don’t try to view the website on a mobile platform. It is a mess.

    Reply June 27, 2012 at 11:53 pm
    • Joanna Krenz-Kurowska

      MEMOSTUDIOS
      Thank you for your comment.
      It’s possible to make a fluid layout based on design like this one with media queries, but designing other resolutions was not a part of this contest.

      Reply June 28, 2012 at 3:37 pm
  3. Alhuzin

    Very cool, amazing. And helpfull, great articles. I have some questions krenz. Do you create or copy the spotlight? Do you create it just with photoshop Totally or also with ilustrator? Thanks krenz and congratulations.

    Reply June 28, 2012 at 6:20 am
    • Joanna Krenz-Kurowska

      Alhuzin
      Thank you I’m happy to hear that. Spotlight – the reflector is a photo I bought, and the light beam going out of it I made using just Photoshop (shape with mask, gradient and transparency). I hope that helps.

      Reply June 28, 2012 at 3:30 pm
  4. janryc

    thank you for the nice tips!

    Reply June 28, 2012 at 6:21 am
  5. Joanna Krenz-Kurowska

    I want to thank you for all your comments :)

    Reply June 28, 2012 at 4:05 pm
  6. grafsol

    Witam, miło, że jest tu ktoś z Polski i do tego tak dobry w tym co robi, jak Ty, Good luck for you :)

    Reply June 30, 2012 at 4:04 am
    • Joanna Krenz-Kurowska

      Cześć! Wielkie dzięki za słowa uznania :) I również cieszę się, że jest nas tu więcej. Życzę powodzenia w świecie designu i na 99designs! :)

      Reply June 30, 2012 at 7:10 am
  7. Custom Software

    hi, This is an interesting blog and pics are good too….

    Reply June 30, 2012 at 5:57 am
  8. web design

    It is excellent post.So informative and helpful in designing process.I think putting the correct process in place will help grow the excitement and craft ideas into executable goals.Thank you so much for this fine piece of quality content. Keep sharing.

    Reply July 1, 2012 at 11:48 pm
  9. smith warnes

    excellent post.great design.thanks for sharing.:)

    Reply July 2, 2012 at 5:46 am
  10. webzindagi

    Very good articles. Thanks and congratulations.

    Reply July 4, 2012 at 8:44 pm
  11. YellowCorn

    Very nice work. This would be very helpful.

    Reply July 5, 2012 at 3:52 am
  12. Jitu

    Thx……

    Reply July 10, 2012 at 10:11 pm
  13. Steve

    Really great post Joanna, love the way you have broken down your working process, it provides some very useful insight, cheers for sharing. Nice to see how the design evolved and the steps you went through to end up with the final result. Some really useful tips too thrown in their too, all round great job, thanks again!

    Reply July 12, 2012 at 12:57 am
  14. Joanna

    Thanks again!!!

    Reply September 7, 2012 at 4:49 am

Leave a comment