The Basics of Wireframe Design

Wireframe in web design works as the outline or framework of the website. This should be the first draft of the web design where screen layouts, content organization and visual hierarchies, navigation, and other functionalities must be finalized before the web designer can proceed to creating the mockup.


Purpose of a Wireframe

Wireframe, as the skeleton of the website, is a necessary stage because it’s the simplest phase to plan the foundation of the website. It’s also simpler and easier to sketch, so web designers can make a lot of concepts to choose from.


In this stage, content planning will also be prioritized. It’s easier to strategize the layout and placement of the content on the wireframe since there will be less distraction and the focus won’t be on designing yet. Furthermore, it’s better to make the changes and finalize the design early on in this stage. Imagine having to start again from scratch when the mockup or development is already in the process, or worse, completed.


Ways to Create a Wireframe

How to create a wireframe depends on the available resources and tools, as well as on what you’re comfortable with. Some designers start wireframing on paper, an easier way to draw a wireframe and ideal for brainstorming. However, wireframes on paper eventually need to be transferred or recreated digitally to create a prototype from them.


It’s a requirement for graphic and web designers to be proficient in editing programs, such as Adobe Photoshop and Illustrator. These types of software make it easier for designers to create the basic shapes and placeholders to create a wireframe.


It would be better if the wireframe can be directly transformed into a prototype by adding interactions and animations. This is possible through specialized platforms dedicated to creating wireframes and prototypes. However, not everyone has access to these kinds of platform. A more accessible alternative way is creating wireframes through presentation programs, such as Microsoft PowerPoint. It can be more challenging and more time-consuming to add interactions this way, but not impossible.


Basic Steps to Wireframing

Which comes first, design or content? For the wireframe to be more effective, content planning should come first before anything else. Content planning is necessary for planning the visual hierarchy, which is the next phase.


During content planning, the content and design teams discuss what should be on every page: the story or message, how the users will get there, how the design supports the message, and the types of pages and content needed. The actual content is not needed yet, but having an outline is useful – the length, type, target audience, and design limitations. To keep the plan documented and organized, build a content inventory. List all the content needed, categorized by topic or by page. With this, the designer can now consider these content elements and build visual hierarchies around them.


Assigning visual hierarchies involve deciding on the look of the page as well as on what content should be prioritized. This part also tackles how users get to a page and how to get them to go where you want them to go.


After assigning visual hierarchies, now it’s time to create the wireframe, consisting of content blocks or placeholders. Start with the content wireframe, representing images and with blocks with an X across them, and representing text with a simple box with description or with ambiguous lines.


With the content placeholders in place, more details can be added, including icons and buttons. Keep in mind user flows and visual hierarchies when doing this. Make sure that the important content will not be obstructed.


The final step is creating the prototype. This is where the wireframe will be added with interactivity and functionalities. Testing and feedback should begin at the lo-fi prototype level, where it will be easier to apply necessary changes.


To learn more about wireframes and how they benefit web design, feel free to reach out to our web designers and web developers at MicroCreatives.