Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Design Iterations and Algorithms

If you were to ask me what’s the best way to showcase your creativity, then I would definitely say that it is in designing a website. I would not be exaggerating if I said that the sky’s the limit when it comes to creative possibilities1 in web design. Needless to say, we all want to come up with beautiful, usable, and creative designs to make a name for ourselves in the web design community.

You might be interested in the following related posts:

In this process of coming up with the best, our designs often go through a number of iterations until we come up with what we originally envisioned. Nick La published a nice post5 on his blog in which he demonstrated his design process and the manner in which his design went through a number of iterations.

So, why is it that our designs go through so many different iterations?

Let me illustrate this point with a simple example. Suppose our web designer, Joe, decides to design a theme for a Science and Technology blog.


  1. Initially, he comes up with a simple two-column layout. However, in due course, he stumbles upon some great design blogs like Smashing Magazine and Web Designer Depot and is inspired to see all those beautifully designed blogs.
  2. He redesigns his blog only to find out that now his blog looks too similar to some of those which he saw earlier.
  3. To avoid the similarity, he adds a number of different elements and unnecessarily features to his blog which makes it overly complicated to use.
  4. Finally, after all these iterations, Joe decides to have a minimalist but beautiful design for his blog.


So what can we do to keep all these iterations to a minimum? The answer to this question is simple.

We carry out our work in a structured manner or in designer’s terms, we do it in layers.

This is something which I call the “Web Design Algorithm.Link

Theme Link

Deciding upon a theme is the first obvious step in the web design algorithm. For example, in Joe’s case, the theme was Science and Technology.

Style Link

We often come across a number of inspirational blog posts like “20 Extraordinary Blogs With Unique Post Designs6” or “50 Beautiful and Creative Blog Designs7.” I prefer storing the screenshots of all these websites into four different folders, namely:


  1. Professional
  2. Cartoonish/Caricature
  3. Photo Manipulation
  4. Purely Artistic

You will also notice that most websites broadly fall into these four categories. Scanning through these screenshots will give you lots of ideas and inspiration to decide on a style for your website depending upon your skills and project requirements.

Moreover, if you go for a purely artistic style, then you can have many more options like surrealist design8, cubist design9, futurist design10 or a symbolic design.11

For example, in the case of Joe’s Science and Technology blog, he can opt for a a purely artistic style with futuristic artwork.

Elements Link

Elements directly correspond to the central theme of your blog. For a science and technology blog, elements could be robots, planets, satellites and other gizmos. For a child’s website, elements could be slides, toys and teddy bears. You just have to make sure that your elements blend perfectly with your style.

Now that you have decided your theme, style and elements, you can go on to design your layout in Photoshop. This will be your first design iteration.

Third Person View Link

Once you are done with your layout, you can ask a couple of your friends and mentors to give you their honest opinion and any criticisms that they may have. I would also suggest that you get your feedback from those who really know their stuff when it comes to web design. Most people don’t like to ask because they think that the experts would not answer, but quite the contrary. The design community is very tight-knit and helpful, so I suggest getting a panel of experts/mentors that you can refer to for any web design and development questions.

Note: They are not always going to like your designs. There may be times that they may be a little harsh, but be ready for this and don’t take anything personal.

Add / Delete Link

Add / Delete

Thereafter, you can make small additions to the design and you might also remove and change different elements based upon the feedback that you received. This will be your second design iteration, and most probably the last one.

Final Thoughts Link

Now you can see how the web design algorithm can help you minimize your iterations. As a new web designer, this is an extremely helpful process that can simplify the task of designing websites. You might take some time in deciding upon your style and elements, but that will surely improve as you work on more projects. Also, the more you do this, the easier it will be.

In conclusion, please note that this is just my personal process when I design websites and everyone has their own process. I just wanted to share with you what works for me. So did you find this process useful? Is there any steps that I should add to my web design algorithm? Feel free to leave a comment below and let me know. Also, what is your web design process? I’d love to hear your thoughts.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11

↑ Back to top Tweet itShare on Facebook

I am a web designer and developer from India. I have deep interests in computer science, art, math and astrophysics in-spite of the fact that I graduated as a Petroleum Engineer. I am a devoted fan of Salvador Dali and have spent a considerable amount of time in studying various art movements. I spend most of my time in web design and in coming up with new ideas to enhance productivity. Oh, and this is an additional but somewhat useless fact - I have four international research papers in the field of petroleum engineering.

  1. 1

    That’s completely right. Getting other people’s opinion is critical. Sometimes, you stare at your own design for so long that you don’t see any more things that needs improvement.

    I learned from one of my favorite artists, James White, to sleep on it, and then in the morning, when your eyes and mind are fresh, to re-evaluate the design. :)

    • 2

      Thanks Michelle. I’ve actually never heard of that website before. I just checked it out and it looks very interesting and helpful. Added it to my bookmarks!

  2. 3

    You have a point there Josh, but I think you misunderstood Adit a little. I think it’s good to have a random, funny illustration, like on the header of this blog, but you can’t do that with every kind of site. For example, if you went to a hospital website, most likely, you wouldn’t see a funny illustration or comic. I think it all depends on your target niche.

    Anyway, thanks for bringing that up! :)

  3. 4

    You really know your stuff Janko. That makes sense. I think what Adit is trying to say is with one iteration done right, you most likely won’t have to do another iteration. Hence, the algorithm.

    I think too many designers don’t have a process or plan when they design. One thing I would have added though is a sketch and wireframe stage. What do you think Janko?

    Thanks for adding your comment. You have a lot of experience and it’s good to hear from someone who has been in the community as long as you have. :)

  4. 5

    I am glad that you liked the article. It’s true that a certain blog might not be designed to reflect the topic, especially when the designer opts for a purely artistic style. Still, the user should understand what the blog is all about and elements play a vital role in conveying the message to the user. A designer might opt to present something totally different and unrelated to the central theme of the blog. This is where the “Third Person View” can assist him in either enhancing his design or simplifying his design for the user.

  5. 6

    Particularly if it is a target audience user.

    That makes sense as well. Lots of times, on our personal portfolios, we tend to try to impress designers more than our clients, when it should be the other way around. That’s why we should also get someone from our target audience to look at the site.

  6. 7

    Thanks Janko for your valuable comment!
    Jad just took my words – “With one iteration done right, you most likely won’t have to do another iteration” :)

    • 8

      “If we think about design process in broader sense which includes other activities (wireframing, testing, etc.), iterations become a key for delivering a product.”

      Well said, Janko. While this web design algorithm is great because it gives designers a logical way to approach a project, I definitely think that there are other areas that can and should be added to the entire process. Wireframing should be done before designing the site, and testing should definitely be done after the site is complete.

      Thank you for adding that Janko. :)

  7. 9

    Sometimes, looking for inspiration from several blogs might prove a bit demoralizing because the more we see, the wider our range of choices get.

    That’s actually often the case for me. I can’t decide on a theme. I love minimalism, but at the same time I love the bright and colorful illustrations and the cartoonish look. I also like the vintage/retro look. I guess in the end, it’s all about just choosing the style that you want.

    I think that’s the hardest part of the process. The theme, elements, etc. are a lot easier to choose. :)

  8. 10

    Thanks for your comment Richie!
    I think one should always take advise from fellow designers and blog readers. I also have a poll on my website to take suggestions from blog readers.
    To be completely honest, I came up with this “algorithm” after I launched my blog. :)
    Currently, I am redesigning my blog according to the “algorithm”. I hope you will notice some improvements in the next design.

    • 11

      Hey Rich, really nice excerpt from Mike Kus. He is an excellent web designer and he is really pushing the limits and boundaries of web design. I definitely follow his work.

  9. 12

    Thanks for your comment Mike!! It’s really good to know that you liked the article. :)

  10. 13

    It is great thinking and sharing good experience … Really nice.

  11. 16

    I enjoyed reading your article and found it very informative. The recommendation of taking screen shots and categorizing them for inspiration or future design ideas, is a great tip. There definitely is a process to great design and labeling it as an algorithm seems to fit nicely. I totally agree that a third person helps to point out both positive and most importantly the negatives of the design, or the usability . I use a few people, my girlfriend who teaches design as well as being a top notch designer (always honest in her critique and has great ideas for improvements), a friend who is also my local competitor in web design, he loves to pick stuff apart (I use my own intuition to decide what comments from him are legit) and I also use a novice or two to get their reaction to using the site and it’s look. I also make sure that I can explain the whys of the design to the client, this usually helps cutback on their changes, which can destroy a good design. Good article and the other comments were also very informative.

    • 17

      Thanks for the insightful comment Don. I really appreciate you taking the time to stop by, read the article and leave your thoughts.

      I agree with you as well, the screenshot archiving seems like a good idea. I would however, suggest using some type of online system for this, just for better archiving/organizing and for easy access on multiple computers. It’s also easier to share with others.

      BTW, that’s neat that you already have a panel of people that you approach to critique your design. I’m sure that their advice has been very valuable and effective for you.

      I’m glad that you found the article and the comments useful. Thanks! :)

      • 18

        Hey Don, thanks for sharing that.

        I also use Google Docs quite a bit and it’s very useful.

      • 19

        I use Google docs for saving links and information on those links, like categories, brief descriptions, and such. This works pretty well, but having an image of a site’s design/look in a gallery online would also help…Thanks for the tip.

    • 20

      Thanks Don!! I am really glad that you enjoyed reading the article. I think I spend so much time with algorithms in computer science that I eventually saw it in a design process!! :)

  12. 21

    That’s true Lam. Lots of our designs are based of the bigger blogs designs. I think the reason for that is because their blogs and websites are very popular with the community so we get into the mindset than in order for our website to be successful, we need to replicate and copy their model.

    I do think however that we should always try to break out from the mold and inject some creative thinking into our designs.

  13. 22

    Thanks Lam!! First of all, I must say that your blog is very impressive! I have subscribed to it.
    Its true that many websites look quite similar to each other, but I think designers are now coming up with new and creative ideas. Designers can experiment with different styles to come up with something unique every time.

  14. 23

    Good job Adit !!!. Truly appreciate with this article.Enjoyed a lot reading this article.Thanks, keep it up.

    • 24

      Hey Vivek, thanks for stopping by and reading Adit’s article. I’m glad you enjoyed it. :)

  15. 25

    Thanks mate!! :)

  16. 26

    Fantastic read adit.. one point i really like is to take screenshot and categorized it for design inspiration.. woow nice idea. And thanks for this great article looking forward for upcoming articles from DI. :)

    • 27

      Thanks Vikas!! Good to know that you liked the article!! :)

    • 28

      Thanks Vikas! I’m glad that you found that point helpful.

      Also, I will definitely try my best to get good content published in 2010.

  17. 29

    Very useful indeed. Thanks mate!

  18. 30

    After ten years in the field as a self-taught designer, my process is surprisingly similar.
    My own idea of iterations, was a recent idea of shuffling the design elements. Creating three versions at once stacked vertically in Photoshop file.
    This was for a header design and this technique worked great for getting some early Dwain feedback also.

  19. 31

    Design feedback last line, Dwain!

    That’s what I get for typing on my new iPod touch
    and not proof-reading.

    • 32

      That’s a great idea. I don’t remember which designer does, I think it’s Collis Taeed, but someone does something similar where they take snapshots of the different layout and design variations in Photoshop. Great idea! :D

  20. 33

    Good stuff. The only thing I’d add is that I think you should start the process by thinking about what’s right for that particular client and let that drive the look, rather than reaching into a library of standard ones. You’re right – there are a lot of websites that look the same – the technology seems to drive the style as oppose to the content dictating how the site looks.

    • 34

      Thanks Mark for your comment! I agree that a designer should always think about his client’s needs. In fact, he can discuss every step of the “algorithm” with his client, that is, deciding upon the style and elements. (if the client is highly demanding).
      This might take away some freedom from the designer, but it’s better to discuss them with the client rather than iterating over it again and again.
      I think the designer can experiment with various styles so as to get more creative with his design.

    • 35

      “The technology seems to drive the style as oppose to the content dictating how the site looks.”

      That’s very true. I actually have a post in the qeue that discusses this in more detail. Thanks for sharing your opinion. I appreciate it Mark! :D

  21. 36

    Great article. A good step by step guide for designers.

    I would like to hear your thoughts further on the third person view. I by all means agree sharing your design and acquiring feedback but how do you know what is acceptable feedback? Is it all just a matter of opinion? Furthermore, what would you advise if you receive contradictory feedback?

    • 37

      Thanks for the comment and for asking questions Liam.

      “How do you know what is acceptable feedback?”

      (LOL! Your question is about opinions, and this is my opinion on your question about opinions :D ) Well, I believe that acceptable feedback is subjective, it all depends on the feedback and your opinion about it. While not all feedback is acceptable, you should definitely consider all of it. Sometimes, it just helps for another set of “eyes” to view the design and they might bring out something that you didn’t notice, but in the end, you’re still the judge of your work. But you definitely need to take all feedback and analyze it and see if it will improve your website.

      “What would you advise if you receive contradictory feedback?”

      You know what, I actually like contradictory or constructive feedback. I don’t always want them to agree with every design that I make.

      What you can do is try to genuinely analyze the feedback without a bias of your design. A lot of times, we fall in love with our design and if we receive a negative feedback, we take it personal and offensive. I would say that we need to be willing to change and adapt the feedback that we receive. By the way, some of the feedback that you will receive will definitely be against your opinion so you don’t have to apply it to your design.

      Oh, and keep in mind that they might not necessarily know the purpose behind the entire design so that’s something that you need to take into account as well.

      For example: There was someone who analyzed and broke down the recent redesign of Smashing Magazine. While he made a lot of valid and helpful criticisms, he did miss out on a few things that Vitaly pointed out. He did not know the purpose of the entire design so he jumped to conclusions to soon. It’s always good to explain to them first your mentality about why you did something in your design so they can better analyze your design.

      WOW! That was a long comment. Hope that helps a little bit. :)

      • 38

        Thanks for the detailed answers :) Unfortunately more to come ;)

        The dilemma that I was trying to describe was, who is right? Is the person with the most experience right? Or should you just go with your gut feeling? What happens if you don’t like the so-called improved version?

        I would love to hear your thoughts.

      • 39

        Liam, thanks for all the follow up questions. I’m glad to answer them and give my opinion.

        “who is right?”

        Technically, nobody is right since design is subjective. But in reality, you make the final call so you are right. I think it’s a case by case basis. Maybe with an amateur designer, I would listen to the critics. But if you have been designing for some time and you have a solid foundation on design principles, then you can certainly be the judge of your own work.

        I hope that helps. :)

  22. 40

    Thanks for the comment Liam!!
    I think Jad has pretty much clarified everything!! :D
    I am always open to constructive suggestions and I think they can play a crucial part in enhancing your design. As Jad said, you just have to analyze those suggestions with a clear head.

    • 41

      What if you disagree with the feedback given. Would you still ‘improve’ a design if you didn’t like the end result?

      • 42

        Different designers can have different opinions about a design. What is important here is that a designer must be totally clear about the purpose of his design.
        For example, a designer wants to come up with a design with creativity as the central theme. He designs something which is unique and creative and is nothing like the standard two or three column layout. Now, some designers might not like this. They even might suggest to switch back to the two or three column layout.
        In this case, the designer should stick with what he designed as the very aim of his design is to reflect the central theme, that is, creativity.
        The final decision always lies with the designer. One must not blindly reject suggestions without analyzing them. If the suggestions are in accordance with the purpose of the design, then I think it’s good to make some improvements.

      • 43

        Liam, I feel, it really depends on who you’re trying to please.

        For example,

        1) If its for your Clients (they can be difficult at times), they have thought of certain things and would like to see them in the end result, even if they don’t understand the design perspective of it. The best you can do in this situation is to explain why you designed what you did. If they understand, well and good. If they don’t, you sometimes have to give in and let them have it their way. Its not always easy but you have to. Try understanding their point of view as well. It’ll help.

        2) If you’re in school and you’re disagreeing with the Professor’s feedback, it normally does not work well :D, my experience says that. That happened to me a couple of times and I tried to understand the Professor’s point of view. Sometimes, writing a detailed description of what your design says, helps a lot. It will not only help the other party understand what you have in mind but will also help you get a clearer picture of what you design is about. Sometimes improvisations suggested, do make your design better. I think I’d try making those and see for myself , how I feel about them. Again, time could be a constraint, which is almost always when you are a student. So keeping in mind all of these, you need to evaluate for yourself.

        3) If you’re designing it for your Portfolio, I’d say, that is one place where you can express “YOU” the best. In my case , the ” Third Person View” has been the most helpful to me. Take in the feedback, see if you can play with the different possibilities. Its your portfolio, its your creativity, the end result is gonna be what you want it to be.

        If I have to frame an answer in a few words, it would be:
        If you disagree with the feedback given, don’t make changes to it, without any rhyme or reason. Its hardly gonna be an improvement if you are doing it unwillingly. Try and understand the other party. If it totally does not make sense, go by your gut feeling. You have the right to express yourself the way you would like to.

        @Adit, great article. I think as designers we all have an algorithm set in our subconcious, that we may or may not be aware of , that we follow when we design. You did a great job putting it down in simple words. Its been informative and always good to share your opinions with fellow designers on the comments that follow. :)

      • 44

        @Adit – Thanks for answering Liam’s question. Your answer is very insightful.

        @Preiya – I can’t say how great it was to read your answer. Thank you for taking the time to reply with the insightful and valuable comment.

        I really like the fact that you broke it down into three sections. I guess the answer to Liam’s question will be different based on the the type of project that we are designing and who we are designing it for. Thanks for pointing that out. :)

        I definitely hope to read more comments from you, Preiya.

  23. 45

    I am glad that you liked this article. This will sound geeky, but sometimes I see algorithms everywhere;and design process was no exception!! lol! :D

  24. 46

    Great article! In my honest opinion I think that the crucial step of the algorithm is “Third Person View.”

    Often we consider a design perfect without asking feedbacks and suggestions. Sure, the Designer has a complete view of the problems and step to build an usable web site with a good look and feel, but the real Users, with their impressions about the “final work”, can provide some useful elements.
    Besides the iterative process in web design can build a powerful Database of ideas and inspirations that can improve quality of the future works and save our time ;)

    Thanks for tips and ideas, Adit.

    • 47

      Hey Piervix, thanks for stopping by. I really love the new design over at your blog. Excellent!

      but the real Users, with their impressions about the “final work”, can provide some useful elements.

      That’s definitely true. In the end, when designing for a client, it’s really important that they are at least happy with the final result. I think we can get a fine balance between a great looking website but at the same time, a design that the client really likes. :)

  25. 48

    Thanks mate!! As an Engineer, I was taught that it’s always important to save time and money. I think that applies everywhere – hence the design algorithm. (Although now I follow my passion as a web designer, there are some things which always remain with you) ;)

  26. 49

    Thanks James!! Its’really nice that you have also shared your design process. It’s great that you get people involved in the process throughout. This can really help! And ya, you have a nice blog! :)

  27. 50

    Thanks for sharing to us your web design process, James. We all have different ways that we do things, and while none of them are wrong, we all can definitely learn and pick up things from each other that can help us be more effective and work faster.

  28. 51

    Awesome.. I really like your article and your reply to those comment.. This article is filled with Lots of Vital Information.

    Muchas gracias!..:)

    • 52

      Thanks Jaisa!! It”s so good to know that you liked this article! Thanks for leaving your comment! All these comments gives me so much motivation to come up with more content for the design community!

    • 53

      Yes, I’m also glad that you liked the article.

  29. 54

    Thanks Skylar for sharing your design process!! That surely is a neat process. However, I sometimes have a different approach when it comes to content because most of the times I don’t get it from the client. And I don’t get the time to make content for every project I handle. You can actually view another post on this blog- “Lorem Ipsum is killing your design” where an awesome debate is going on about using Lorem Ipsum in design process.

    I came up with “Web Design Algorithm” because I wanted to have a systematic approach towards web design. The algorithm also helps me to diversify my portfolio as I can try as many different styles as possible. It helps me keep a log of what styles and elements i have already used, what can be used in future and the areas on which I can improve. I could have included wire framing in that algorithm, but i thought that it’s too obvious a step for a web designer.

    We all have different design processes and it’s really good that you shared yours with the design community. :)

  30. 55

    thanks, this very usefull… nice article

  31. 56

    I’m glad you liked it :)

  32. 57

    It’s hard to get something really new and creative so Web Design Iterations would be forever :)


↑ Back to top