As web designers it is very easy to get lost in our own heads. The process of a web design can be broken into many flavors and styles across the globe. Graphics artists and digital animators are just some of the people getting into building applications for the web.
Although it’s bold to pop open Adobe Photoshop and get right into designing, there are many steps which can enhance a website when taken into consideration. The planning process, although not seemingly too long, is an almost essential aspect of what it lends to the creative process. I hope to outline a few ideas here which can be applied towards designing fresh web interfaces.
Starting the Project
This is possibly the most anxious and driving time during project work. When you’ve got an entirely blank slate to work with, thoughts and ideas seem to pile on faster than you can grasp them. It’s important here to breathe and reflect on the project’s ideals. Perhaps take a step back to question a few simple aspects of the project.
What are you or your client looking for in a completed object? Are there any specific items you want to include no questions asked? These may be heading banners, differing navigation menus, a powerful color scheme, or even a simple page logo. Try sketching out a few prototypes before taking to the digital process.
For those amongst us who are less artistically gifted even a crude sketch can provide more inspiration than nothing at all. A prototype offers not only a guideline but a wireframe for which to base all your future pages off. This wireframe may change between differing page styles (ex. home, about us, blog posts) but will ultimately contain the same template.
Scrutinize Design Galleries
I have run into many designers who argue design galleries offer no value into the web. They are seemingly cheap ways to copy designers and rip on their ideas. And while I can respect this viewpoint, I simply cannot agree and actually think quite the opposite. Designers choose to submit their designs into these places and should feel honored that others may draw inspiration from their works.
Further there is nothing wrong with borrowing ideas! This is the beauty of creation as you take a mix of many differing artistic styles and blend them together in your own way. True web designers are able to master this skill and even begin to create their own interfaces simply from memory and inspiration!
Inspiration galleries and showcases are perfect for the beginning designer. A couple good ones to check out are CSSline for CSS/web design and the Logo Design Inspiration gallery for website branding & logo design.
As you train the creative portions of your brain you begin to think outside comfort zones you’ve set up for yourself. This is one of the most difficult aspects in the career of web design, and more specifically during the creation process. But similar to many other things in life, this is one skill which becomes more developed with practice.
Give Your Interface a Test-Run
Before even coding your sketch or mockup design spend some time visualizing the browsing process. If possible (and this comes with practice) place yourself in the shoes of another user entering your website. Consider where they’d click and what they would find most interesting.
Once you get into this zone you may notice an accompanying change in mindset. This technique will help remove yourself from the position of “the designer” and see things from a larger perspective. I often recommend this step before coding to save yourself time in the long run.
I frequently find myself updating page areas or colors mid-design. With enough time it’s simple to step out and envision how a user might interact with your page’s menu or links. This process can be difficult if you’ve been staring at the same design for 3 hours straight. Try taking a break to stretch and walk around – even 15 minutes can play a huge role in opening your perceptions.
Design Numerous Builds for Comparison
This step will take much more time but if you have the luxury I highly recommend pacing yourself. Once you’ve got a strong sketch going you may consider creating a few alternate designs to choose from. This can be done in Photoshop just as easily if you are not artistically gifted with paper and pencil, or simply feel more comfortable in software.
Some people find this step to be annoying and actually slow down the creative process. If you often second-guess yourself this method will save you loads of time during the final stages of production. I find 2-4 strong templates laid out in comparison can help push your indecisive nature towards picking a final stage product.
Keep the Space!
White space is crucial with any great design. This comes as an almost no-brainer and you may consider a few obvious reasons. When page elements are laid out properly you’ll find a natural symmetry in design. Web pages coded with grids and accessibility in mind tend to appear cleaner and much more user friendly.
Walking the same line as white space it’s key to remove any elements which may be taking up un-needed space. This will obviously hold true as a belief during any stage of design – but catching your dislikes or mistakes early on will save hours on project work. Ensure your page’s content – paragraphs, headings, images, and videos – have enough room to breathe and interact with your website’s visitors.
I find writing a small list of mandatory page elements is a great way of getting started. This will change based on what type of website you’re designing, which demonstrates just how fluid this system can become. Typical instances include search boxes, social media sharing buttons, shopping cart icons or links, featured blog posts, or even a small contact form!
Whenever entering the design process feel comfortable letting your mind roam free. It is within this void of space where ideas are born and genius inspiration may be ignited. Stay true to your heart when designing. Creating websites has never been an easy task, however quite fun and often very rewarding when you set aside time for building and learning.
Very nice post! I think writing down ‘mandatory page elements’ is the very important for designers otherwise we get lost in our own ocean of creativity.
Thanks for an interesting article. I agree with the need for white space and using inspiration from design galleries. I’ll be following some of the advice mentioned.
Awesome article! Starting the project with sketches and mockups is the most unexciting task…
Looking at other designers’ gallery helps you filter out all the nonsense from your design too. I got frustrated so many times when looking for inspiration, that I said screw it. I no long look for inspiration when I’m gathering ideas for the specific projects. If I stumble on something while not looking for it, that works best. But getting inspired at the time of the project diminishes creative thought.
Aside from making a website, would you like to blog something about how manage website content, to make the site still look interesting after a month launched, after all a good website need flowing content every week/ month or so.
Hope you’re interested in posting one, looking forward to read it.
Thanks 🙂
Galleries can be helpful, but they’ve become so ubiquitous that I think we are in a state of gallery overload. We’re all looking at the same galleries, and it shows. I use them for inspiration all the time, but it helps to follow 2 rules:
1) Always add value. Find a way to build off the idea and do something new with it.
2) No round pegs in square holes. You might really really want to use the new technique you just saw, but every project is unique, and may require a unique solution. If it’s not the absolute best fit for your project, let it go, and get creative.
Nice article. I agree with pablo, sketches and mockups isnt the high point of a project for me..!
Personally i don’t see how this thinking process can lead to a perfect website?:)
1. Planning your website – well I agree there, if you won’t you are crazy:)
2. Copy ideas of others? – well this will get you as far as others did go so… at the end you will have a good quality website at the most.
3. Place yourself in the shoes of another user? – you will always be subjective. And if that is not enough – you already know what will happen if you enter your site so there is nothing to imagine:)
4. If you are a good designer almost certainly you don’t have a free time. And in my humble opinion if you are really good in what you are doing – you will see that the project is great when you see it.
5. Keep the space – i have to agree there.
So here we are with planned project, copied ideas, subjective point of view, no free time and lots of white spaces that you created going crazy from the hours you’ve put into this project:)
I think someone forgot to add big amount of luck too this equation for this website to be perfect.
Cheers.
Maybe you should write an article, Ddeja. I’d love to hear your perspective.
I would like to share my design process. Here we go :
1. Extensive research about the website’s topic.
2. Competitive analysis.
3. creating a rough draft.
4. Creating a design(PSD)
5. Show the design to other people and get their feedback.
6 some changes for increasing usability
Maria
Thanks for this article. It’s interesting to see all these views on how to plan a website – so many people overlook what I think is such an important stage.
This is a great post and does an excellent job at identifying from the designer’s standpoint how the process should flow.
I think business owner’s need to also be very involved in the process to come up with an effective website. They need to do research on their strength’s, weaknesses to make sure the website is persuasive and can convert traffic. And they also need to do research on their customers and keyword research to be built into the content and copy writing of the site. Without these elements a good design might not get the results it deserves!
-James
Great article. Being an far-too-busy freelance designer I would agree with taking a break, but a break for me generally means grabbing a few hours sleep before the phone rings again! So, instead, run the browsing process past a friend so they can identify your pitfalls for you. This is a great way to work out where to go. Your girlfriend/wife/partner is a good bet, they will not mince their words!
Top tip: knowing how much effort your client expects to put in is a massive part of the design process for me…can they can be bothered updating a blog or image gallery week in week out? After all, this will ruin your beautiful design if its left stale, better to think of something chronologically neutral.
Not addressing this issue is like handing over Kew Gardens maintenance to someone who can’t keep a houseplant alive. You get the picture 😉
Hope my points help someone, I’ve spent many years learning the hard way!
thanks for the great post!
a nice read, as always! when I first started webdesign I had my own process, if you can call it that. After some time I decided to go get a degree on the subject and started to see this planning perspective with more clearly. At first, when you meet the client and do the brief, things look a little blurry , but when you put pen and paper together, lets just say life’s good.
Great post, especially love the white space section. Such an important part of design and it VERY often gets overlooked.
I think writing down ‘mandatory page elements’ is the very important for designers otherwise we get lost in our own ocean of creativity.
Thanks for the great posting!