Wireframing for Productivity

This talk takes a cursory look into wireframing and the basics that should be noted.

Transcript

1. Abiola Olatubosun @havilahboss Wireframing For Productivity 10/17/2019
2. • A wireframe is a static, low-fidelity representation of different layouts of a product • A wireframe is a detailed visual model of an application’s user interface that is like a blueprint of functionality and content. • In a wireframe, simple shapes are used to showcase objects that will exist on the final design What is a Wireframe? 10/17/2019 2
3. Wire frame Elements CC: https://rangle.io/blog/master-ui-wireframes-with-only-three-shapes/ 10/17/2019 3
4. How does it look like? edx.org 10/17/2019 4
5. How does it look like? cc: https://www.lucidchart.com/pages/templates/wireframe/facebook-wireframe-template Facebook Homepage 10/17/2019 5
6. • Structure • Content • Functionality What does Wireframe Communicate? 10/17/2019 6
7. • We look at the current state • Future vision • The Path to get there * It is more like an architectural Blue print A Wireframe tells the story of the Future? 10/17/2019 7
8. 1. Who are the intended users 2. What are the business goals when interacting with the interface 3. How should the content be arranged to support goals 4. Where should your main message and logo go What you should know 10/17/2019 8
9. 5. Where should your main message and logo go? 6. What should the user first see when arriving at the page? 7. Where is the call to action? 8. What should user expect to see on certain areas of the page? What you should know 10/17/2019 9
10. A Little task for you? cc: https://www.lucidchart.com/pages/templates/wireframe/facebook-wireframe-template 10/17/2019 10 • Go to wirify.com • Drag the link on the left to your browser Booksmarks toolbar • Visit your choice website and click on the wirify toolbar
11. Punchng.com Via wirify.com 10/17/2019 11 A Sample For you to try
12. Punchng.com Via wirify.com 10/17/2019 12 A Sample For you to try
13. A Sample For you to try Unilag.edu.ng Via wirify.com 10/17/2019 13
14. A Sample For you to try Unilag.edu.ng Via wirify.com 10/17/2019 14
15. How does it look like? cc: https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/ Moving from Desktop To Mobile 10/17/2019 15
16. Wireframe Templates 10/17/2019 16
17. Wireframe Templates 10/17/2019 17
18. Wireframe Templates 10/17/2019 18
19. Wireframe Templates 10/17/2019 19
20. NOTES FOR YOU 10/17/2019 20 • At Wireframing look & visuals are not major • It should serve as a visual guide to your site/application framework • Your intention is to see users accomplishing their goals (Get them to a conversation point or a call to actions)
21. REFRENCES • Wirify.com • https://careerfoundry.com/en/blog/ux-design/how-to-create- your-first-wireframe/ • https://www.lucidchart.com/pages/templates/wireframe • www.unilag.edu.ng, www.punchng.com • https://rangle.io/blog/master-ui-wireframes-with-only-three- shapes/ • Everything You Need To Know About Wireframes And Prototypes _ Adobe Blog (Online resource) 10/17/2019 21