Web design process – planning

Posted: January 13, 2013 in Uncategorized, web design
Tags: ,

In our first lesson for web design, we discussed the need to brief the client thru questionnaire. Unfortunately, I was unable to open my prior blog so I had to come up with another 10 questions but I think it is almost the same as my first. These questions were used as guide for creating the wireframe of a fictitious website. A wireframe of a website is like the blueprint of a building wherein parts, functions and contents were placed and arranged together to form the structure of a website.

Wireframes too are like sketches of web layout but more detailed so clients will have a feel of how the website will function and appear. It is void of color to be able to really focus on the functionality of the layout and not the aesthetic part of it. So, here are the 10 questions that I used in making this wireframe.

1. Why do you need a website? purposes and goals.
2. What do you want the visitors do on your website?
3. Who are your competitors and how do you differ from them?
4. What is your timeframe and budget?
5. Do you have an existing logo?
6. Do you have an existing website?
7. Would the site use social media like facebook, twitter etc?
8. Would you be using search engines?
9. Would the site support multiple languages?
10. Please list the names of three sites that you like and explain what you like about them.

Here is a wireframe of a website based on the questionnaire.

2013-01-13 09_08_06-articlepage   The header which includes the navigation buttons, banner and search/log-in/language button stays on the page all throughout as well as the social media links. The navigation buttons on top functions straight forward and will change color when clicked.


next button The next button will show more articles/blogs/entries.

languages  The triangle on the multiple language button will show multiple languages when clicked. The search button will show a writing field when clicked as well as the log-in field.

I was about to use low-tech wireframe but I have no access to a scanner so I chose high-tech. I would love to use low-tech as it gives me fast result and is very versatile when it comes to modification. If I am going to show the client a low tech wireframe, we will be able to write notes right there and then.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s