Wait a second… information architecture?! Didn’t I click on the wireframes lesson?

Yup, you sure did! Welcome to our Wireframes Lesson! Here we will discover what wireframes are, why wireframes are important, and how to make our own wireframes. Before we get started, we have one very important concept to discuss that will lay the groundwork for what’s to come: Information architecture.

Information architecture is the organization, prioritization, and presentation of information within products, websites, and other software applications. Effective information architecture is important because it allows users to complete tasks with the least effort required. We can visually represent this information using a site map.

A site map is a high-level view representing content hierarchy within a digital interface. Site maps define all pages that need to be built. We have included a site map that features an assortment of tiered blocks interconnected with lines. The blocks represent pages, and the lines represent hierarchical relationships between specific pages. The homepage in this example is at the top of the site map and encompasses the catalog, resources, and community pages. Challenges, articles, videos, and projects are sub-pages under the resources page. Navigational paths throughout the pages are called user workflows.

User workflows illustrate the path a user takes to complete a task. In this site map, a path from homepage -> resources -> projects is considered a user workflow.

Site maps can consist of many pages, and each page within a digital interface will need to be designed. So how do we go about designing these pages?

We start with wireframes!