It’s always interesting to hear how designers go about creating their designs, especially when it comes to web design as there are so many variables to consider when choosing the right design and deciding on what it is that you want to communicate through the design of a website.
I thought I’d share my experience of how I go about designing a website. The important thing to remember is that this is not a set formula and things don’t necessarily always happen in this order – I don’t think there really is a set formula on design nor should be one as design is an adaptive free flowing intuitive process. With that being said here are the important factors that help me in design (post brainstorming session).
Find Inspiration
Inspiration helps me spark those creative juices flowing in my brain and just gives me sense of knowing that I am about to embark on an adventure of creation. Inspiration also motivates me to design something of high quality which I can be proud of at the end of the trip.
Where I find – or what I use to find inspiration isn’t an important factor as much as the inspiration process itself. I usually find inspiration looking at something visually beautiful ranging from other websites, css galleries, photography, architecture or CG art to name a few. That is pretty much the reason why I started this blog as a space to explore inspiration as well as sharing that inspiration with other like-minded individuals.
Look at Competition
Looking at the competition of the same topic of the site which I am about to design is not about copying what they are doing, but merely a method of getting another angle on what can be done or has been done. This gives me a visual comparison to use when making decisions on what works and what doesn’t.
Looking at the competition is also a good way of quickly getting a sense of what the target audience is like, which is a point on its own. (below)
Target Audience
This is a very important factor I consider when diving into a design process as it influences me on my creative journey to know who I am creating this design for…not the client, but for the client’s clients. I find it very useful to put myself in the shoes of the target audience by asking myself what I want to see or do if I was a site user. This in turn goes hand in hand with the user experience.
Define Content
The content of a website plays a BIG role in what the layout is going to look like at the end of the design process and I make a point of it to get to grips with what – and where – the content should be placed throughout the website. From a top level this includes copy, imagery and navigational items and definitely steers the way in which I will represent this content through my layout process.
Decide on a Layout
Once I have defined the content I can easily start working on layouts to be used in the design of the website.
This is usually a fun exercise for me as I like to scribble on paper different ways of how the website could be segmented. These drawings are by no means anything to look at from an artistic point of view, but rather a quick glance to see what could work and what just doesn’t.
I like using rough sketches like these to bounce off the client, colleague or friend to see if they are on the same page as I am.
A crucial part of the layout process is the navigation which sets the tone for the website’s user experience and interface. I usually like to keep two or three options open of where I am going to place the navigation and look at this more in depth when going in to the user experience and interface.
Consider UX and UI
The user interface can determine the user experience on a website and I cannot emphasise enough how important user experience is as mentioned in a previous post of mine, I boldly adapt a quote from Adaptive Path “the experience is the product” to my own version of “the experience is the design“, because when I design a website I am in a mindset that my design is the product during the design process.
Putting myself into the target audience guides me through the UX and UI as this is where these two topics matter most. This is the part where I look at how the user experiences the website – how can my design help the user in experiencing the website.
Image Sourcing
I like spending a few hours looking for the perfect images that will compliment my design as well as the experience and this is another great time to get the inspiration flowing again.
Create 3 Mockups
Once I have gone through all the above the real magic happens…I put on a big smile and start carving and molding the creativeness into shape using my right-hand (Photoshop), which I cannot live without. This is where the action is and this is where I am at my happiest – in the process of design creation.
Spell check, spell check, spell check 
I cannot tell you how important this step is in my design process.
Input and Opinions
After I have completed 2 mockups, before going on to a third mockup I like to get opinions and input from others and learn what they think about my designs. The reason I like doing this before going in to a third mockup is that it can – consciously – influence my decision of design in the final mockup.
Remember – as a designer you have to be able to take criticism from others on your work, but you also have to stay open minded. Not everyone has the same taste; beauty is in the eye of the beholder, so look at what the people around you are saying from a distance and decide what advice is relevant to your design. I will not necessarily go change the way the design looks if someone doesn’t like the colour I am using, but if someone raises a point of usability, UX, or something relevant to that effect then by all means change is necessary.
Finalise Design
So by this time I would have gone to the client a number of times (maybe three or four) to see what their input and feeling is on my designs. Once the client has given me feedback on the mockups I can finalise the final design (LOL – how many of you designers out there have named your final design? final.psd…final2.psd…finalfinal.psd…hehe)
The reaction is usually “Yes I like this one, but I like what you’ve done in this one and can we add this block used in the third one” – so my journey continues through the last stretch of combining elements from the different mockups to unveil the final design.
Design
After finalising the design, going back and forward with the client, I tweak and tweak the design (with more of those finalfinal2.psd, finalfinal3.psd
) until the final…final…final end result is ready…and I cannot help to admire the design I had created.
As a designer, I’m sure a lot of you will agree, I cannot help to get emotionally attached to my designs. This is not a bad thing as I know that even if I am emotionally attached to my design, I can just as easily scrap it and start from scratch if needed.
So there you have it – a glimpse into my process of how I go about designing a website.
Do you have an interesting way or technique to share on how you design? Please share by commenting…







[...] This post was mentioned on Twitter by Adriaan Fenwick and Vishal V. Kaura, #webDesign (less). #webDesign (less) said: A look at my design process http://bit.ly/7gUExP #design #webdesign [...]