CRyder Design

At this point in the design process, you’ve got most of the groundwork set into place. Now, it’s just building the actual app. But, where do you start? Good question! I’ve got the answer for you. Information architectures and wireframes. But what are those? I’ll tell you!

Information architectures are to UX designers as blueprints are to architects. They provide the basic structure of how your product will work. Functionality and organization go hand in hand with information architectures, as they should represent how the user will move throughout your app or website. In the article “Information Architecture. Basics for Designers.” the author states, “Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software.” They are not something that can be copied and pasted with a few words and aspects changed here and there. They are made custom to each individual product that they represent. “Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives” (“Information Architecture. Basics for Designers.”). They are also so useful because they can change as they need to with the input or takeaway of certain information. They will develop and change as more progress is made with the overall design of the product. “Knowing that IA is a fluid document—one that likely changes weekly, and sometimes even daily—is a powerful way to maintain the overall structure of your app or website without ever touching the code or creating new prototypes” (“The Comprehensive Guide to Information Architecture”). So once you have your information architecture built to your liking, the next step is to build the skeleton of your product, your wireframe.

Wireframes are a basic outline of what your product will look and function like but without any unnecessary elements, like color, images, visuals, and copy text. Its purpose is to see and understand how the layout of your product will work. In the article “How to Make Your First Wireframe (+Video!)” author, Will Fanguy defined a wireframe as “…a low-fidelity design layout that serves three simple but exact purposes: It presents the information that will be displayed on the page. It gives an outline of structure and layout of the page. It conveys the overall direction and description of the user interface.” The wireframes aren’t meant to do much more than that. They are almost like a preliminary outline that is completed before the final artwork. “The key to a good wireframe is simplicity. All you need to do is show how elements are laid out on the page and how the site navigation should work. You can add fancy images and flashy typefaces later. Minimize distractions” (“How to Make Your First Wireframe (+Video!)”). Wireframes should be communicated by a universal language, meaning that anyone on your team with any kind of background should be able to look at it and understand what it is conveying.”

Information architectures and wireframes are just another building block toward the final design of your product. Though they may seem simple, they hold extreme significance in the design process.