Dec 23, 2020
Bring your design ideas by Wireframes
“A wireframe is like a blueprint in the design process that should not be skipped, just as you wouldn’t build a house without a blueprint”
For more than a year, Parcak and her team scanned giant swaths of Egypt with a combination of NASA and commercial satellites, Among other significant locations, Parcak and her colleagues used the technology to create an infrared map of Tanis, an ancient Egyptian capital located near modern-day San El-Hagar that was famously portrayed in the Indiana Jones movie “Raiders of the Lost Ark.” The city provided the most compelling evidence yet for the technique’s accuracy when researchers attempted to unearth sites that cropped up in the satellite pictures.
Sure enough, the results of the dig lined up with the satellite plan of Tanis. “When I saw what they excavated, that was an incredible validation,” Parcak recalled. “It really is like the blueprint of a city,” she added. “To get a map like that with excavation would take so long, and we got it not quite instantly but pretty quickly.”
So What is Wireframes ?
First things first. A wireframe is 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
Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project.
Wireframes serve as a middle ground between pen-and-paper sketches and your first prototype. They help you plan the layout and interaction patterns of your users without distracting details like colors or copy. The proposed user journey should be clear without needing color or shading or fancy menus.
To learn more about wireframes you can use the website “Chrome Extension Tool” https://www.wirify.com/ to see wireframes in action, Wirify lets you turn any web page into a wireframe in one click, and it’s great for getting inspiration or guidance, especially when you’re just starting out.
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added even not to distract our users with colors and visuals.
The purpose of that?
User journeys should be clear without needing to add any colors, shading or menus.
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.
Compared with a high-fidelity mockup or prototype, gathering feedback with a wireframe is much more important than researching usage patterns or user journeys. With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements.
Wireframes serve as a common language between designers, users, stakeholders, and devs.
They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language.
Wireframing takes place early in the project lifecycle
How do you decide you are going to choose a four-column grid or a five-column on a webpage? … Where to put images and where to put videos? … How do you decide you are going to choose horizontally scrollable items or a vertical list while designing? … How do you decide to put four or five components in your navigation bar?
Often used to complete the User Centred Design process, wireframes are also used at the beginning of the design phase. A prototype usability test will often be a test of the wireframe pages to provide user feedback prior to the creative process.
What, Why, When and How?
What is wireframing?
Wireframing is a way to design a website service at the structural level by creating Wireframes.
According to usability.gov — “A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.”
Why wireframes are important?
Simply because wireframing saves a lot of time! Since wireframes are used in the early design process it is much easier to make changes or implement feedbacks at the wireframing stage, rather than making changes in the final mockup with plenty of visual elements.
Wireframes allow us to map out the functionality of the pages, catch problems early, and save time on revisions later.
Wireframes push usability to the forefront. Designers tend to measure a design’s usability throughout the development process, from wireframes to prototypes to the final deliverable.
Types of wireframes:
- Low-Fidelity Wireframes or Lo-Fi
Low-Fidelity Wireframes are generally rough paper sketches and include the most basic content and visuals and are usually static (not interactive).
- High-fidelity Wireframes, also known as Hi-Fi
High-fidelity wireframes are highly detailed and have the details that are generally missing in their low-fidelity predecessors.
When to create wireframes?
Wireframes come in handy generally once you have completed the discovery phase and gathered enough information about the user’s goals and motivations. You also have to understand the structure of your website that can be done by creating a sitemap.
However, if you want to explore other possible or different functionalities options during the discovery process, low-fidelity wireframes can help in that phase too. There’s no such hard and fast rule or fixed sequence for wireframes.
How to create wireframes?
Rough Sketches with pen and paper, Whiteboard, or through brainstorming and ideation.
Tools for lo-fi wireframe:
Balsamiq
Invison Freehand
MarvelApp
Axure
and many more.
Design thinking and wireframes?
Share ideas by using wireframes, used to gather quickly feedback (back & forth through ideate & define to keep validating) to learn more about our target audience.
Using of wireframes with user stories
Step 1: Break the design
Divide up the design into smaller chunks.
Step 2 : Order, prioritize & Estimate
Find the foundation, ensure that the most important features get delivered, obscure the parts that don’t apply to the specific Story.
Step 3 : write the conclusion
The final phase is to use the wireframe to help you figure out the details that the developers need to know to build it.
