To successfully build a solid website, a website blue print (website organization map) has to be created before a new design or optimization begins. This will make sure the important pages and components are included and it will you a clear expectations to design from. This planning stage helps spare unnecessary redesign or additional programming work. Think of a website’s map purpose like building a house for you need to identify what rooms of the house will need to be built. A website map can be as simple as a document that has a list of the web pages in the order that they will appear in your website navigation system. The following example demonstrates the same.
1) Website Navigation
a) Main Navigation
Home Page
About
About the company
“Company” Team
Jobs at “Company”
Services
News
In the Media
Press Releases
“Company” Events
Case Studies
Blog
“Company” Blog
Latest Articles
Contact
b) Footer Navigation
Terms & Conditions
Privacy Policy
Testimonials
Advertise with us
Weather you are designing your own website, designing for an organization or managing a web designer, this is a critical online marketing step as it ensures that a site is built with all the important pages and in one order. Pre-planning saves a lot of out-of-scope work if the strategy first, execution second formula is applied. In the planning process you would want to include pages for the main navigation, sub navigation and even footer navigation links. Things like logins for eCommerce or client admin access are called utilities which must also be noted.
2) Website Components
As you move from identifying the rooms you want in your house (the pages on your website) you also need to start thinking about the website components as those who need to be built into your wire-frame. Think of the website components as the things you would want in the main room of your house. Do you plan to have online marketing widgets like Twitter, Facebook, YouTube or LinkedIn that users can click to? Is building your email newsletter a priority? Is so, you might want a sign-up box designed for your website. Things like “Request FREE quote”, Free pdf download, FREE trial buttons, Social media profiles, awards & achievements, prestigious clients, etc make good site components for the main page of your website. You don’t have to design the site components exactly like you see here, you just have to clearly document what components you want to include on the site which might get lost in the designing process.
3) Website Wireframe
Your website’s home page and other critical pages of your website can be architectured through a wireframe so that the critical pages are visible and certain actions are encouraged by the website visitors. Think of your website as online marketing nucleus. We can use the opportunity or lose it. Website visitors need to be guided through your site once they get to it. Before the web designing work begins a wireframe ensures that the placement of pages, navigation order and site components, all have a place. A website wireframe is typically done in black and white to keep the focus on mapping out where things would go on a page before people/clients start critiquing about things like colors. The goal of a wireframe is to show the placement of the navigation elements like the “main navigation”, “footer navigation”, “social media buttons”, “email news letter block”, etc The purpose here is to define the website architecture versus colors, texts or fonts. This wireframing step helps keep the focus on getting approval on layout before color and copy might get picked. If you have ever purchased a website theme/template, you must have noticed the default “Lorem ipsum” text instead of the real text during the wireframing process to show where the text would go even if the actual content isn’t ready for the site. Wireframes can be designed using graphic tools and many times they are simply sketched out on a piece of paper. ux wireframes can be done with or without the graphic tools. Just approach the step which works best for you.
Olasto 