Wireframing & Prototyping Flashcards
Which phase of the design thinking process is “Prototype” in?
Iteration
What are wireframes?
Two-dimensional illustrations of a page’s interface that progress into prototypes.
Wireframes are used to plan the information hierarchy of a page, specifically how space should be allocated, where content will go, and what functionalities will be available.
This includes the positioning of menu items, headers, and buttons.
Why is it important for you to create a wireframe?
They allow you to test your ideas with your users before spending copious amounts of time and capital developing them into full-fledged products.
What is design mainly all about?
Communication
As designers, we communicate information and content visually so that people can accomplish critical tasks and achieve their goals.
What are the benefits of sketching?
A sketch acknowledges the incomplete nature of ideas and leaves room for visual exploration and ideation.
- Cheap: All you need is a pencil and a piece of paper.
- Disposable: Sketches are an articulation of designers’ very first ideas that can be pushed aside to allow bigger and better ideas to surface.
- Fast: Designers don’t have to wait to get to their computer or studio to start the ideation process.
- Ambiguous: A focus on basic structure and functionality prevents designers from getting bogged down in details.
- Accessible: While not everyone understands complex wireframes and visual design, sketches are universally understood, creating a shared understanding of ideas and concepts.
- Versatile: Sketching can take many forms, from three-dimensional storyboards to two-dimensional wireframes.
What should you think of a wireframe?
Like a blueprint for a house, except it represents a digital interactive system such as a website or mobile application.
What don’t wireframes typically include?
Styling, graphics, or color
Wireframes can be linked together to create what’s known as a _______.
prototype
What is a prototype?
A sample version of a product that allows you to portray a specific function or design solution.
A set of linked wireframes that emulate the functionality of a website or app
What is the goal in creating prototypes?
It is to learn as much as possible about how users interact witht he product or service you’re designing before developing the complete project.
The overall goal of prototypes is to be able to move forward quickly while feeling confident that your design decisions are human centered.
Depending on the maturity of the project, a prototype could be a set of hand-drawn wireframes that simulates a user flow or a fully functioning site.
What distinguishes prototypes from wireframes?
Their element of interactivity.
This can range from moveable note cards and sticky notes on a pencil drawing to pointing and clicking with a touchpad or mouse.
The overall goal of prototypes is to be able to move forward quickly while feeling confident that your design decisions are _____-______.
human-centered
What is a design fidelity?
Refers to the level of detail of a wireframe or prototype.
Refers to not only to the visual design, but also the level of functionality or a wireframe or prototype.
What is a low-fidelity wireframe?
Contains only very basic details and initial ideas
Low-fidelity wireframes and prototypes allows designers to focus on what?
On fundamental structure and navigation over pefect visual design and complex features
