Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. 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.

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 post2 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.

Example

  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.

Algorithm

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 Designs3” or “50 Beautiful and Creative Blog Designs4.” I prefer storing the screenshots of all these websites into four different folders, namely:

Style

  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 design5, cubist design6, futurist design7 or a symbolic design.8

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. By the way, you can follow the Design Informer on Twitter here9.

Footnotes Link

  1. 1 http://designinformer.com/the-wow-factor-in-web-design/
  2. 2 http://www.webdesignerwall.com/tutorials/design-process-of-wdw/
  3. 3 http://designinformer.com/20-extraordinary-blogs-unique-post-designs/
  4. 4 https://www.smashingmagazine.com/2009/11/03/50-beautiful-and-creative-blog-designs/
  5. 5 http://en.wikipedia.org/wiki/Surrealism
  6. 6 http://en.wikipedia.org/wiki/Cubism
  7. 7 http://en.wikipedia.org/wiki/Futurism#Futurist_artists
  8. 8 http://en.wikipedia.org/wiki/Symbolism_(arts)
  9. 9 http://www.twitter.com/designinformer
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

    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.

    0
  2. 2

    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” :)

    0
    • 3

      “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. :)

      0
  3. 4

    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.

    0
    • 5

      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.

      0
  4. 6

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

    0
  5. 7

    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. :)

    0
    • 8

      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!

      0
  6. 9

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

    0
  7. 12

    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! :)

    0
  8. 13

    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. :)

    0
  9. 14

    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.

    0
  10. 15

    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. :)

    0
  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.

    0
    • 17

      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!! :)

      0
    • 18

      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! :)

      0
      • 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.

        0
      • 20

        Hey Don, thanks for sharing that.

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

        0
  12. 21

    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.

    0
  13. 22

    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.

    0
  14. 23

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

    0
  15. 25

    Thanks mate!! :)

    0
  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. :)

    0
  17. 29

    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.

    0
  18. 30

    Design feedback last line, Dwain!

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

    0
    • 31

      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

      0
  19. 32

    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.

    0
    • 33

      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.

      0
    • 34

      “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

      0
  20. 35

    Very useful indeed. Thanks mate!

    0

↑ Back to top