Your constantly-updated definition of Wireframing and
collection of videos and articles
574shares
What is Wireframing?
Wireframing is a process where designers draw overviews of interactive products to establish the structure and flow of possible design solutions. These outlines reflect user and business needs. Paper or software-rendered wireframes help teams and stakeholders ideate toward optimal, user-focused prototypes and products.
ShowHide
video transcript
Transcript loading…
“Here is one of the few effective keys to the design problem — the ability of the designer to recognize as many of the constraints as possible — his willingness and enthusiasm for working within these constraints. Constraints of price, of size, of strength, of balance, of surface, of time and so forth.”
— Charles Eames, Pioneering designer, architect and filmmaker
Learn how to use wireframing to spot constraints and opportunities – and bridge the gap between abstract requirements and likely solutions.
Good Wireframes are Skeletons for Powerful Prototypes & Delightful Designs
Wireframes are basic visual guides in which designers propose elements for screens and webpages and show how experimental solutions would flow for target users. Wireframing is invaluable early in the interaction design process for design teams to explore how concepts accommodate user and business needs. You mark out a solution’s bare bones and include navigation features and more detail than in sketches. Good wireframing is the skill of creating realistic-looking, lean layouts so your team and stakeholders can quickly determine if concepts are worth developing. Wireframing is distinct from prototyping in the sense that prototyping deals more with testing interactivity and—when done at the highest level of fidelity—sophisticated versions that might closely resemble the released products. However, it’s similar in that you can also do wireframing by hand (e.g., using boxes and lines to represent pictures, text, etc.) or with software and make low- to high-fidelity versions. In low-fidelity wireframing, you use placeholders to mark content and pictures in grayscale. In high-fidelity wireframing, you introduce more realism, including pictures and perhaps even some interactivity. You can adapt well-crafted wireframes far more easily into prototypes for usability testing.
Software choices vary in price (some are free), options (e.g., click-through interactivity) and suitability (e.g., for mobile). When you do wireframing well, you can help safeguard yourself, your team and your brand against pursuing flawed solutions. Good wireframing can also support agile development as team members needn’t wait for sophisticated deliverables.
Desk with Sketchbook, Pens, and Keyboard. Font: FOCA Stock
Wireframing is the Art of Efficiency
The aim is to communicate the structure of a possible solution so your team can identify solid user experience (UX) design foundations to build on and stakeholders can offer feedback on a visual item.
So, you should show what elements your users would expect to find and how these work in flow. To begin, you should:
Focus on functionality, accessibility, layout and navigation to make a design easier to use, produce and sell – Leave nice-to-have features out.
Structure a hierarchy with a list of prioritized elements for each page – Determine the information architecture early so you can categorize information clearly.
ShowHide
video transcript
Transcript loading…
Divide the screen into large blocks for content.
Fine-tune these blocks with details – links, placeholders for images, etc.
Maintain a clean grid-oriented view of all content – Apply best practice design principles to maximize ease of use.
Use annotations to help others understand your wireframes faster.
Put mobile first – When you start wireframing for the smallest screens, you can achieve better consistency across devices.
With higher-fidelity wireframing, be more specific – Although you shouldn’t overdo content, still show what needs to appear and accurate sizes of fonts, icons, links, etc.
Keepyour wireframes concise – Don’t worry about finer details such as aesthetic appeal.
Remember, wireframes are primarily tools for collaboration toward making better prototypes and products faster. As such, they’re deliverables you shouldn’t overinvest in. Your best wireframes will prove your ability to strip back to basics and recognize constraints in user-centered design. They’ll therefore confirm your expertise as you and your design team iterate toward the most effective solution in a project.
Some of the world’s leading brands, such as Apple, Google, Samsung, and General Electric, have rapidly adopted the design thinking approach, and design thinking is being taught at leading universities around the world, including Stanford d.school, Harvard, and MIT. What is design thinking, and why is it so popular and effective?
Design Thinking is not exclusive to designers—all great innovators in literature, art, music, science, engineering and business have practiced it. So, why call it Design Thinking? Well, that’s because design work processes help us systematically extract, teach, learn and apply human-centered techniques to solve problems in a creative and innovative way—in our designs, businesses, countries and lives. And that’s what makes it so special.
The overall goal of this design thinking course is to help you design better products, services, processes, strategies, spaces, architecture, and experiences. Design thinking helps you and your team develop practical and innovative solutions for your problems. It is a human-focused, prototype-driven, innovative design process. Through this course, you will develop a solid understanding of the fundamental phases and methods in design thinking, and you will learn how to implement your newfound knowledge in your professional work life. We will give you lots of examples; we will go into case studies, videos, and other useful material, all of which will help you dive further into design thinking. In fact, this course also includes exclusive video content that we've produced in partnership with design leaders like Alan Dix, William Hudson and Frank Spillers!
This course contains a series of practical exercises that build on one another to create a complete design thinking project. The exercises are optional, but you’ll get invaluable hands-on experience with the methods you encounter in this course if you complete them, because they will teach you to take your first steps as a design thinking practitioner. What’s equally important is you can use your work as a case study for your portfolio to showcase your abilities to future employers! A portfolio is essential if you want to step into or move ahead in a career in the world of human-centered design.
Design thinking methods and strategies belong at every level of the design process. However, design thinking is not an exclusive property of designers—all great innovators in literature, art, music, science, engineering, and business have practiced it. What’s special about design thinking is that designers and designers’ work processes can help us systematically extract, teach, learn, and apply these human-centered techniques in solving problems in a creative and innovative way—in our designs, in our businesses, in our countries, and in our lives.
That means that design thinking is not only for designers but also for creative employees, freelancers, and business leaders. It’s for anyone who seeks to infuse an approach to innovation that is powerful, effective and broadly accessible, one that can be integrated into every level of an organization, product, or service so as to drive new alternatives for businesses and society.
You earn a verifiable and industry-trusted Course Certificate once you complete the course. You can highlight them on your resume, CV, LinkedIn profile or your website.
Wireframing is a fundamental step in UX design. Imagine building a house without a blueprint. Tough, right? Wireframes a
486 shares
11 mths ago
Open Access—Link to us!
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
