Wire to Frame: Our Design Journey

Navigating the world of design can be a transformative journey. As an architect who has transitioned my professional career into another chapter of design, I’ve uncovered many parallel lines between architectural design and UX/UI design. One and maybe the most fundamental one of them is the pivotal role of the wireframes.

Image 1: Architectural concept sketch from First in Architecture

Often underestimated and sometimes skipped or processed in a rush, wireframes are the important elements of the design process. They may not boast the vibrant colors or lure by details of final designs, but they are the essential blueprints, the structural foundation upon which exceptional user experiences are built.

In this article, I will try to explain the importance of the wireframes and try to guide those who are in need of a little bit of courage.

What are wireframes?

Wireframes, simirlar to architectural sketches, function as a roadmap, a skeletal framework that guides the design journey. Yet, they are often regarded as simple and uninspiring because of their apparent simplicity. I hear this issue mostly from the newbies in the design world who have never done sketches or wireframes before. Let’s start with the terms; there are three main titles for the wireframes in the UX design world:

• Low-Fidelity Wireframes: Low-fidelity wireframes are the foundational blueprints of a digital interface. They are intentionally simple and lack the details. Designers create these wireframes quickly to get a sense of the initial design direction. They employ basic shapes, lines, and placeholders to outline the structure and key elements of the user interface. These wireframes prioritize the layout and user flow over aesthetics, making them invaluable for initial brainstorming and rapid prototyping. Their main purpose is to convey the core structure and functionality of a design concept without delving into the finer visual aspects.

  
  

• Mid-Fidelity Wireframes: Mid-fidelity wireframes find a balance point between low and high fidelity. They offer more depth than their low-fidelity counterparts but refrain from getting into the nitty-gritty of visual design. Mid-fidelity wireframes utilize content placeholders, incorporating elements like text labels, buttons, and basic icons to provide a clearer representation of the intended user interface. These wireframes give a better idea of how the final product will look and function, making them ideal for usability testing and refining the user experience. Although they lack the polished appearance of high-fidelity wireframes, mid-fidelity wireframes provide a more comprehensive and structured view of the design.

  
  

• High-Fidelity Wireframes: High-fidelity wireframes are the detailed and polished versions of a digital interface that closely resemble the final product. They integrate actual content, typography, color schemes, and other visual design elements. High-fidelity wireframes are usually reserved for the later stages of the design process when precise visual aesthetics and interactions need to be conveyed to stakeholders or development teams. They offer an accurate representation of the user interface's final appearance and feel, aiding designers and developers in aligning their work and minimizing misunderstandings. These wireframes are often interactive, simulating user interactions and providing a near-realistic preview of the user experience.

What is a good wireframe?

I remember my junior time in architectural design. I was always amazed by the beautiful hand-drawn sketches of my superiors and my bosses. When they asked me to explain what was on my mind, I was in terror that my drawings were not as beautiful as theirs. But by the time I understood the essence that the importance of the sketches was in the middle of 3 questions:

1. Do I think that I explained clearly what was in my mind?

2. Did the person who was listening understand my idea clearly?

3. Can someone who is totally out of the topic understand the main idea of the sketch?

If we can say yes to those questions then the rest is just personal drawing style. Everyone has a different approach and hand aesthetics quality when it comes to drawing or even writing letters. Do we all write the same? No. Then it is very normal to have different-looking sketches and wireframes.

Image 2: Concept sketch of Walt Disney Concert Hall.

Let's have a look at a concept sketch that is drawn by famous architect Frank Gehry for the Walt Disney Concert Hall building in the USA.

It may look like it is not that perfect or not everything is rigidly defined, right? On the contrary, all of the free-form lines. Yet we still can see the general volume, a building that has an amorphous structure. Of course, loose drawings do not mean they will not evolve into clear lines. If we name this early phase sketch as “low fidelity wireframes” the following versions of this design can be mid and the built version or the final renders could be the high fidelity levels.

Image 3: Walt Disney Concert Hall.

The beauty of the wireframes lies precisely in their simplicity. They strip away distractions, focusing solely on functionality and layout, just as architectural sketches distill complex structures into essential lines and forms.

Here below are my personal wireframes that I made during my coffee break while I was writing this article. The first one (A) is from my personal redesign project, the middle one (B) has just popped into my mind, and the last one © is reflects one of my previous works. -At this point, I spilled coffee on the C redrawn it then stuck those two papers together :)- So I met with many people who were afraid to present those wobbly lines because they thought that they looked too simple.

Image 4: My hand-drawn pen & paper low-fidelity wireframes.

And those below are the refining of my hand-drawn pen and paper wireframes with iPad with Concepts App. Refining and editing is an endless world. With enough practice lines get better, shapes get better and iteration becomes faster. The main point is to be able to tell the core design decisions. I drew the previous image in 10 minutes and spent 30 minutes refining it. If I was trying to create something more pretty from the start it would even take more time. But what is the point if those are going to change after the first concept testing with users or meeting after stakeholders, right?

Image 5: My hand-drawn digital low-fidelity wireframes.

What would be the simple steps for effective wireframes?

1. Start with clarity

In much the same way an architect conceives the purpose and form of a building, a UX/UI designer (also an architect for a better user experience) begins by defining user needs and objectives. Before embarking on wireframing action, we should establish a clear vision of our design goals. What issues are we addressing, and which key user interactions are we facilitating? If we can set everything up clearly in our minds, we can address them in our designs with clarity too.

Image 6: Wireframe evolution from Ana Michan. *(Unfortunately, her website is not working.)

2. Embrace Iteration

Design is alive and lives based on iteration. We should continuously refine our wireframes based on feedback and evolving insights. For example; let's consider the construction of a skyscraper. Architects don't simply sketch the blueprints and then build; they iterate through numerous drafts, addressing structural concerns, optimizing space, and ensuring the building meets safety standards. Similarly, in UX/UI design, wireframes are not static. They are living documents that evolve with feedback and insights.

Image 7: Wireframe evolution example from Frank Mojica.

If I should adapt this example in UX design, this can be about a wireframe for an e-commerce website. Initially, it may outline a basic product listing page. However, through iterative refinement, we might receive user feedback suggesting the need for clearer product categorization. This feedback prompts us to revise the wireframe to incorporate intuitive navigation and filter options, making the user's shopping experience more seamless.

3. Prioritize Functionality

In the early stages of design, functionality takes precedence over aesthetics. This fundamental principle serves as a guiding light in the world of wireframing, emphasizing the importance of getting the core elements right before delving into visual aesthetics. For example, let's consider the process of designing a mobile app for a food delivery service. In the initial wireframes, the primary focus should be on defining the layout and structure. Ensuring the wireframe's clarity in presenting critical functionalities lays the groundwork for a user-friendly experience.

Two Key Elements from Personal Perspective

1. User-Centered Approach: Just as architects consider the occupants of a building, UX/UI designers must adopt a user-centered approach. Wireframes should reflect the needs and behaviors of the target audience. There might be some points that might make no sense in personal taste, but we as designers are not designing for ourselves but for the users that we are advocate for. Sketching user personas can be a valuable tool for aligning our wireframes with user expectations.

   
   

2. Interactive Elements: Incorporating interactivity into our wireframes to convey user actions and transitions effectively is a very game-changing touch. Interactive wireframes provide stakeholders with a tangible sense of the user experience. Design is a way of giving emotions and intentions without speaking to the person. Actions can provide many feelings to the users. We must think of them as the architectural model that allows you to "walk through" the design.

   
   

3. Embrace the Imperfect: Early-phase wireframes are often raw and unpolished, emphasizing capturing ideas rather than achieving perfection. They are meant to convey concepts and structures. Moving forward with embracing imperfections, knowing they will evolve into polished designs in due time is an essential piece of mind.

To sum it up, I (as a designer) find that the principles of clarity, iteration, and a user-centered approach are essential points to seamlessly bridge these two worlds. Low-fi and/or hand-drawn wireframes might seem simple, but they're incredibly important in design. They're the core and the blueprints for a digital project. So, when we are working on wireframes we should always embrace their simplicity and remember their crucial importance.

Cheers.

C.