There’s nothing like hearing a professional’s opinion, so we interviewed our Senior Graphic Designer, Kristille Junio, on her thoughts and tips on quality site-mapping. Kriztille has been site-mapping, designing, wire-framing, and optimizing websites at our office in Industry City since 2014.

 

What is information architecture? What’s an example of bad information architecture?

  • Information Architecture (IA) refers to a system where whatever content you’d like to feature is readable and logical. An example of bad IA in regards to web design and development is a site that lacks structure and organization. One instance of this might manifest in a site’s navigation. The inconsistency in navigation will hinder your users from understanding how to make connections within your site. A well-structured navigation ensures the users know exactly where to go for the information they need.

What are the top most important aspects of website architecture?

  • There is no one important aspect of IA; the goal of a good IA is to balance how you want your users to interact with your site and what you need them to do.

What do you hate seeing in a website?

  • Cluttered navigation – poor structure/language. If a site changes the location of the “contact us” page, to perhaps underneath the “about” top level navigation, that location may not be as obvious to the average user who has been trained to look for this specific item at the top-level tier.

What do you love seeing in a website?

  • I love seeing clean / polished site with a clear objective. Airbnb’s site for instance makes it very easy to book a place and creating a level of trust / credibility between the parties involved (The customer and the merchant) This is in part to a great UI.

What’s your favorite site-mapping tool?

  • Pen/Paper for initial iteration
  • Post-its work very well!
  • In terms of software: SketchApp, Adobe XD

Why is site-mapping important in 10 words or less?

  • Site-mapping is important because it clarifies and reinforces the goal of your website.

Thanks, Kriztille! Have any more questions about site-mapping for our design department? Leave a comment below. Looking to create a sitemap for YOUR next project? Reach out to us at amazing@ajaxunion.com, and let’s get to work!

You’ve just purchased land to build a mini-mall. What crucial step must take place, before you even pick up a shovel?

YOU NEED A BLUEPRINT.

Without a properly laid-out plan, your building is doomed to fail before you even begin. And what does this have to do with your website? We tend to eagerly jump into projects without proper thought as to what our goals are. By crafting a well-executed sitemap, you can ensure that your website’s design is practical, beautiful, functional, and goal-oriented.

WHAT’S A SITEMAP?

A sitemap is an outline of the basic layout and functionality of your website. There’s no right or wrong format to use when site-mapping, but there are a few crucial rules and regulations your design team should be cognizant of when site-mapping.

Most web designers will subdivide the site-mapping process into 8 stages:

1:  Decide on key priorities for your

Do you have the time, resources and availability to create a multi-dimensional site? Examine this honestly with your website team. Prioritize the degrees of functionality, beauty and interactivity of your website.

2:  Brainstorm your basic content

Have you ever written a pamphlet? A company guidebook or mantra? Aggregate all of your business’ content and come up with an overall picture of what you’d like you site to portray about your vision, values, and team. This step is where you ensure your Information Architecture (IA) is organized: meaning whatever content you’d like to feature is readable and logical.

3: Determine your primary navigation

The “Primary Navigation” of your site is the key to the map: most websites divide content into categories like “Home”, “About Us”, “What We Do”, “Projects” and “Contact Us”. These overall categories keep your website organized and readable. The lucky number of primary navigations is between 5-9 headers.

4: Outline your second and third levels of content  

Take each of your primary navigation categories and break it down further. For example, in your “About Us” section, you could have links to a “When we started” page, “Our vision and values” page, “Meet the Team” page, etc. Those pages can contain additional pages as well. In essence, this is where the “mapping” takes place.

5: Determine which utility pages are necessary

A legal disclaimer is almost always necessary, and additional utility pages are determined by industry. Work on these pages early on so they don’t hold you up close to your websites launch date.

6: Write notes/define expectations for each page, both functionally and aesthetically

Now that you have the content, decide on the User Experience and User Interface (UX & UI) you’d like visitors to have on your site. Write notes of what you’d like each page to feel like and what message it should contain.

7: Choose your design

This is the fun part: make it LOOK GOOD! Decide on a color scheme, logo, effects, and the overall feeling. Should the buttons be large or small? Should the images slide or shuffle? Do you want to add video? At this point, your website designer can already begin prototyping and wire-framing the site.

8: Rehash (ongoing)

Nothing is ever a finished product, especially continuously updated websites. A/B testing your site is a great way to determine the greatest UX for your visitors! Invite as many professionals and laymen as you know to review your site and give you constructive feedback. Keep perfecting it!