Much more goes into web design than simply moving around blocks of content and fiddling with typography. Web design requires diligent planning and structure, but it also requires great communication skills: responding to the needs of your clients and their customers is paramount when it comes to starting a web design project.
In this article, we’ll go over the basics of how to plan a web design project, working in a bunch of helpful tips and ideas along the way. As always, your comments are welcome.
The Meeting
The purpose of the meeting is to get everybody involved in the web design project to gather around the same table. You should be comfortable with each other, make sure you know who everybody is, and make sure you understand what the agenda is. Take the first meeting for introductions, deciding on how the project will flow, and what the time frame will be. Set up a Google Doc or shared platform that everybody on the table can access for updates and modifications. This will also help in everybody stay in sync.
Following meetings involve getting everyone up to speed, and checking on performances. Of course, the meetings involve brainstorming in case there are problems and random idea generation. You should make sure that everything is clear, on the table, and accounted for before you leap onto the design and planning process.
The Information Architecture
Every project is different, and so is its information architecture. Information architecture is just a fancy word for your website’s structure, including different content that needs to be covered, branding and marketing elements that need to be considered, and design concepts that need to be implemented. Here are common information architecture components that should be covered as you plan its structure:
Branding Statement: A branding statement establishes the core ethos of a business, explaining in a couple sentences its beliefs as well as the problems it solves. Not so much a concrete element as an aura over all other aspects of a website, your branding statement sets the tone of all your other content.
Featured Content: Featured content refers to the information that you want to give a particular spotlight to on your page. Don’t be deceived by its seeming simplicity, though: Deciding on featured content is often the source of the most tension in design meetings, and should be given plenty of time to negotiate.
Navigation: Your website’s navigation is, quite simply, the path your visitors will follow as they locate information on your website. Mapping a site’s navigation is perhaps the lengthiest of all aspects of information architecture, as it needs to take into account all information. There are plenty of strategies to help with navigation mapping, but take a look at this Smashing Magazine article to give you a bit of inspiration.
Services: Understanding the value of your business is essential when listing your services. Make sure to take a good look at your competition to think about ways that you can orient what you do suit your customers’ needs.
About Us: This area will detail everything about the company including origins, purpose, values and mission etc.
Inquiry Form: If a visitor to the website has a question, he would be able to get in touch with the company by means of an inquiry form. IM Creator offers a form element that can be easily embedded into a design, but if you need a more elaborate contact area, consider using a JotForm widget.
Footer Content: This area may include important links for website navigation, legal pages and social media pages etc. Also provide the copyright information at the bottom.
The Wire-frame
Finally, we have the wire-frame. Wire-framing is an important concept, not only in web design projects, but even when designing mockups for different products. However, being specific to web design projects, you will use wire-framing to create content-free simulation of what the website will actually look like. Basically divide a canvas into various black and white boxes, and decide what content goes where. There are plenty of wire-framing tools use can use online for free, take a look at this list by CodeCondo for 11 of the best.
To get started, go for lo-fi wireframes. You are just looking for how the layout is going to set and look like finally. Furthermore, you will only decide where content will go. You do not have to get into the nitty gritty of it all and draw everything to scale with the proper hierarchy. If you are working on a responsive project (the vast majority of websites these days are responsive), then you may want to start designing your mobile version of the website first.
Chances are, the majority of your layouts will be similar or exact, and you do not need to repeat the entire process for every single page. If a particular area of a website has a completely different template and look, you should wire-frame it so that you do not waste time while actually developing the website in thinking of all the ways a particular page could be designed.
There you go folks, this is all you would need to start a web design project. It does not matter whether the project is big or small, you just need to have appropriate resources, a talented team and there has to be communication. After the wire-framing, it moves on to the developers and they take care of the rest.
