Scribd
Upload
28 views9 pages

Reading 7 - Creating Wireframe, Laws of UX

The document discusses wireframing and visual design principles. It provides tips for creating wireframes, including focusing on functionality over aesthetics and using annotations. It also outlines seven laws of user experience design, such as the Von Restorff effect where distinctive items are most memorable.

Uploaded by

Aji Sapta Pramulen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views9 pages

Reading 7 - Creating Wireframe, Laws of UX

The document discusses wireframing and visual design principles. It provides tips for creating wireframes, including focusing on functionality over aesthetics and using annotations. It also outlines seven laws of user experience design, such as the Von Restorff effect where distinctive items are most memorable.

Uploaded by

Aji Sapta Pramulen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Wireframe & Visual

Design
Wireframing and tips, 7 Laws of UX
Design
Wireframing
Disalin dari https://www.usability.gov/how-to-and-tools/methods/wireframing.html

Creating Wireframes
It’s important to keep in mind that wireframes are guides to where the major
navigation and content elements of your site are going to appear on the page. Since
the goal of the illustrations is not to depict visual design, keep it simple.

● Do not use colors. If you would typically use color to distinguish items, instead
rely on various gray tones to communicate the differences.
● Do not use images. Images distract from the task at hand. To indicate where
you intend to place an image and its size, you can instead use a rectangular box
sized to dimension with an “x” through it.
● Use only one generic font. Typography should not be a part of the wireframing
discussion. Within the wireframes, however, you may still resize the font to
indicate various headers and changes in the hierarchy of the text information
on the page.

Since wireframes are two-dimensional, it’s important to remember that they don’t do
well with showing interactive features of the interface like drop-downs, hover states,
accordions that implement show-hide functionality, or auto-rotating carousels.

Important Elements Illustrated in Wireframes:


Although wireframes differ from site to site, the following elements often are
included as standard elements on wireframes:

● Logo
● Search field
● Breadcrumb
● Headers, including page title as the H1 and subheads H2-Hx
● Navigation systems, including global navigation and local navigation
● Body content
● Share buttons
● Contact information
● Footer

Wireframing (Tips)
Disalin dari https://www.interaction-design.org/literature/topics/wireframing
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:

1. Focus on functionality, accessibility, layout and navigation to make a design


easier to use, produce and sell – Leave nice-to-have features out.
2. Structure a hierarchy with a list of prioritized elements for each page –
Determine the information architecture early so you can categorize
information clearly.
3. Divide the screen into large blocks for content.
4. Fine-tune these blocks with details – links, placeholders for images, etc.
5. Maintain a clean grid-oriented view of all content – Apply best practice design
principles to maximize ease of use.
6. Use annotations to help others understand your wireframes faster.
7. Put mobile first – When you start wireframing for the smallest screens, you
can achieve better consistency across devices.
8. 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.
9. Keep your 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.
7 laws of UX design
Disalin dari https://uxdesign.cc/7-important-laws-of-ux-design-fdda087b4f9d

Von Restorff Effect


Also known as the Isolation Effect, it predicts that when multiple similar objects are
present, the one that differs from the rest is most likely remembered. In design, you
can make that important information or key actions more distinctive than others.

Hick’s Law
This is where how long to make a decision depends on how many and how complex
the choices are. For example, too many choices might take the user a long time to
choose. So try to simplify these things out, try not to overwhelm users by highlighting
the recommended options. Additionally, use progressive onboarding to minimize
cognitive load. To simplify, apply the KISS principle (Keep it Simple, Stupid).
Fitts’s Law
Fitt’s Law is like Hick’s Law but it measures how long the target will take to acquire
based on its distance and size of the target. You can shorten the time by making it
huge enough and placed on the bottom to make it easy to reach.

Zeigarnik Effect
The Zeigarnik effect states that incomplete or interrupted tasks are most likely to be
remembered. You could help the users remember certain uncompleted tasks by
adding a simple progress bar.
Serial Position Effect
This effect states that the first and the last terms are most likely remembered.
Placing the least important items in the middle of the list and the key information on
the first and last series is a good rule of thumb.

Law of Common Region


Elements can be grouped together, right? Well, the Law of Common Region expresses
that elements are grouped together when they share an area with a clear boundary
between them. Consider adding a border to an element or define a background
behind an element to create a common region.

Law of Proximity
Objects that are near or proximate tend to be grouped together. Proximity establishes
relationships and it helps users understand and organize information faster and more
efficient.
More Laws:
Visit https://lawsofux.com/

You might also like