Blueprints for Mobile Design: Wireframing 101

759 views

Published on

Ultan Ó Broin

Looking to build your first mobile app? Wait! Before you do, learn one skill you need to know before you open the laptop – how to wireframe. Hear Ultan O’Broin discuss how and why Oracle user experience professionals wireframe before they build, and why we teach wireframing in all of our developer outreach activities. Save time, money, and frustration.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
759
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Blueprints for Mobile Design: Wireframing 101

  1. 1. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.1
  2. 2. Blueprints for Mobile Design Wireframing 101 Ultan Ó Broin (@usableapps) Director Oracle Applications User Experience March 18, 2014 Nieuwegein, NL
  3. 3. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.3 Safe Harbor The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle s products remains at the sole discretion of Oracle.
  4. 4. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.4 Bringing Design to Life through Sketching Leonardo da Vinci (1452–1519)
  5. 5. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.5 What is Wireframing? •  Planning and design communication: designers + developers, quality, documentation •  Input: User requirements and product use cases •  Output: Lightweight (“low-fidelity”) drawing without visual design •  Objectives •  Explore page designs and user task flows •  Blueprint interaction design •  Evaluate page layout and components •  Approvals and buy-in by stakeholders UX Communication 3
  6. 6. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.6 Mobile Wireframing Benefits §  Rapid way to explore design alternatives and key issues §  Can easily make changes §  Not tied to look-and-feel; lets you focus on core interactions and navigation without distractions §  Prevents locking into a design because there is minimal effort to undo compared with prototype or coded app
  7. 7. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.7 Paper Wireframing Examples
  8. 8. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.8 On-the-Go Mobile Wireframing Simple, Form Factor
  9. 9. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.9 On-the-Go Mobile Wireframing Simple, Form Factor
  10. 10. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.10 Oracle’s User Experience Strategy is About … Simplicity Easily access the essential information and actions to support your work. Mobility Optimized UIs for wherever and however you work. Extensibility Tailor the user experience to best fit your company’s identity and business processes.
  11. 11. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.11 Learn More About Oracle Apps UX Online •  Oracle.com/UsableApps •  Blogs.oracle.com/VoX •  Blogs.oracle.com/UsableApps •  @usableapps
  12. 12. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.12
  13. 13. Copyright © 2014, Oracle and/or its affiliates. All rights reserved.13

×