CRyder Design

Moving through the process of designing an app or website, information architectures, and wireframes set up the basic elements of the framework that are needed to bring the design to life. Both can equally serve as a blueprint for the design of the product, but each serves its own unique purpose. In most cases, information architectures would be developed before wireframes. The reason for this is quite simple, you can’t design the screens of an app or website if you do not know where you are going to start, and where you are going to end. The information architecture can be developed similar to a flowchart to visually explain how a user gets from point A to point B. A wireframe is a basic sketch of what each screen in this user journey would look like.

Authors at Tubik Studio define information architectures as “…a science of organizing and structuring content or websites, web, and mobile applications, and social media software” (“Information Architectures Basics for Designers”). Information architectures are truly a very basic design of what the content in a product would be organized and structured like. In most cases, these are designed as flowcharts and use a variety of different shapes and colors to represent different types of pages in an app or website. It is important to keep hierarchy in mind when developing the information architecture and present the information from most to least important. “When building IA from scratch, unless your website or application is following a standard format, drawing out anything after the top level is very difficult. It’s like asking a mechanic to build a car from the top down instead of in parts. Each piece has to be constructed in advance with its own research, time for design, and development. The same is true with IA” (“The Comprehensive Guide to Information Architecture”). Once a solid information architecture down that seems to flow smoothly, you can use it to assist in developing a wireframe.

Author Will Fanguy defines 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” (“How to Make Your First Wireframe”). The significance in designing a wireframe as low-fidelity is because they are subject to change as the product develops over time. “Wireframes are fast, cheap, and perhaps most importantly, impermanent. Wireframes (and the sketches you draft before wireframing) are meant to change as you gather more information through user research or stakeholder input” (“How to Make Your First Wireframe”). A designer doesn’t want to spend a large portion of their time illustrating a detailed design of an app in a wireframe to be told what to move, change, and scrap. They are meant to only represent how the information will look on that page, and not hold any real aspects of the design aesthetic.

As you create your information architectures and wireframes, it is so interesting to see how one page can go through a number of changes, versions, and renditions from beginning to end. Though they may seem as something that can be done in 5 minutes in a sketchbook, they require real amounts of time and effort and hold significant value in the design process of a website or an app.