Contact Info Contact Info
(+632) 654 0001
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog


Web Design: A snippet on Information Architecture

What is Information Architecture in Web Design?

Web Design primarily concerns the images, layout, white space, colour combination, and typographic choice. Let’s look at Web Design landscape in a deeper level. Web Design is the overall structure of your site. It’s the relationship of your website’s visual contents, text contents, hierarchy, and navigation to fully achieve a usable and organize online platform. It’s by means of Information Architecture that we let those interact with each other. Remember, visual elements convey information too.

Why Information Architecture is important in Web Design?

Maybe your site got eye-catching colours and images, but how about the placement of text contents and the hierarchy of pages? If your website is messy, then it has a shortfall in the overall idea of the site’s structure. Information Architecture is the answer to that challenge. I, you, all of us want to stay in a site that is organize and usable. A website is supposed to deliver quick details.  No one wish to be confused when he starts browsing the net.

How you can apply Information Architecture in Web Design?

Information Architecture begins from the moment you identify your goals and define the needs of your website users—skipping and not minding these initial steps yield weak web foundation. Afterwards, you may use the following methods and instruments to go on with your task.

1. Managing Content Areas via Card Sorting

Have a pen and ample pieces of small cardboards or cut papers. This time do not worry about the visual elements and exact labels of your site. Focus yourself on the content that must be in your online platform. Is that Company History, Location, Products, Staffs? Go on write as many as you need.

Next, place your cards on the floor or table—wherever you’re comfortable. Determine the major categories then put the other cards where it should belong. In that way, you can determine what are missing and what should be eliminated.

2. Sitemap with Labels

Sitemap aids in visualizing the chain of pages you have and its association with each other. There is no strict rule on how you should format a sitemap. Process flow type, organizational chart type, spread sheet, boxes will do as long as it’s clear which are the parent pages and subpages.

Continue your structuring by assigning the improve labels of your pages. Example, for Company History you may term it as About Us, and Who We Are for the page that tells about the staffs. Labels should be short and descriptive.

3. Wireframes and Mock-ups

Although these are just terminologies, we sometimes interchange wireframe and mock-up. You think wireframe as the architectural (building/house) blueprint of your website wherein you can perceive its PLP (point, line, plane) plus the content layout and white space. Mock-up, on the other hand, is the model of the website itself wherein you can closely scrutinize the site balance, unity, dominance, colours, and typography.

You are now slowly integrating the Web Design Elements and Principles in these Information Architecture Instruments. Make sure that what’s in your wireframe and mock-up reflects the goals and needs you identify in the beginning of the process.

Web Design and Information Architecture do not end in wireframes and mock ups. At times you will meet adjustments as you go on with your coding process. The important thing here is you know what you want and what the users need. Right planning results into manageable time for web developing.

Tags: , , ,