Wireframes

Question 1

Wireframe definition

Answer 1

low-fidelity prototype of a web page or an app screen. It is used to identify the elements that will be displayed on the page or screen.

Question 2

Elements of wireframes

Answer 2

• Navigation
• Features
• Content sections
• Imagery and/or media - Form elements
• Call to actions (CTAs)

Question 3

Wireframes creation

Answer 3

The same screen can be built in a lot of different ways, but only a few of them will get your message across correctly and result in an easy-to-use software or website. Nailing down a good interface structure is possibly the most important part of designing software.

Question 4

Who will see your wireframes

Answer 4

• Project manager: for strategy and technical discussions
• Business Analyst: to validate requirements
• Developers: to prepare their code and tools
• Other designers (visual, print…): to know pages and features they will need to design
• Content creators: copywriters, marketing teams, everybody who needs a content matrix
• Clients: for giving feedback before building - Users: for testing before building.

Question 5

Wireframes: Do’s

Answer 5

1. Use a grid!
2. Responsive web: A site that performs correctly in all type of devices.
3. Mobile first: think where/when will you users interact with your tool the most
4. Consistency: use the same styling and typography
5. Be selective and keep it simple.

Question 6

Wireframe: Dont’s

Answer 6

1. Don’t use color, photos or fancy Typography.

2. You are your copywriter. Write provisionally copy —-> NO “LOREM IPSUM”!!! 3. Don’t get too attached to it 3