Wireframes are the least costly and least reproducible design representations. It mainly has the following design structure.
- Groups of content
- Placement of content
- Description of content and relationship between interfaces
Advantages of creating wireframes
- You can organize information.
- You can organize the layout (arrangement of contents) in advance.
- You can organize in advance how to display the information, images, text, and other content.
- Recognition matching is possible.
- It can be used as a communication tool between engineers, designers, and customers to prevent mutual misunderstandings. As a result, man-hours can be shortened.
- It can be used as a base for startup as an idea or a draft.
Notes on creating wireframes
- Don’t use inappropriate colors
- Don’t overdo the design
- Avoid Ugly Images, Icons and Wacky Fonts
- Don’t overdo the colors (because wireframes don’t have to be colorful)
- Use shades of gray for interface and content wireframe structures
- Visually suggest hierarchy and use different shades of gray to set order in the wireframe
- Images and icons are always gray (if you don’t want them to be visually obtrusive)
- Appropriate contrast between elements, especially text needs to be legible
- You can use blue for links, red boxes for alerts, green boxes for confirmations, blue boxes for information, yellow for warnings
- Avoid black For example black borders and wireframe clutter.
- Use actual size. (use existing smartphone size, e.g. 980px
- Do not include signs or codes that other people cannot understand.
- Imagine and write comprehensible affordances.
Things to know before creating a wireframe
- Write useful screen-to-screen documentation. (Recommended for small documents like alerts and boxes
- The design components used in the main are likely to be used in other places, and there is little rework Therefore, it is recommended to create from the main screen.
- When the status changes, divide the screen and describe it.
