Creating Interactive, High-Fidelity Wireframes in InDesign
Throughout these lessons, we'll demonstrate how to create visually engaging wireframe templates and UI libraries that can speed up your workflow and add real value to your digital projects. Software required: InDesign CC, Illustrator CC.
What you'll learn
Throughout these lessons, we'll demonstrate how to create visually engaging wireframe templates and UI libraries that can speed up your workflow and add real value to your digital projects. We'll show you how to create highly interactive, retina-ready, responsive PDF wireframes without the need for any coding experience at all. Software required: InDesign CC, Illustrator CC.
Table of contents
- Setting up a Basic Grid Master Page 5m
- Setting up a Grid for a Desktop Device 9m
- Setting up a Grid for a Mobile Device 7m
- Adding a Color Palette to Our Wireframe Templates 9m
- Defining the Document Typography 9m
- Defining Annotation Typography 10m
- Defining Wireframe Headings 8m
- Defining Wireframe Body Copy 8m
- Discovering the Benefits of Using an Icon Font 5m
- Preparing Your Icons for an Icon Font 6m
- Creating an Icon Font with Icomoon 10m
- Creating Buttons for the UI Library 9m
- Creating Gradient Buttons and Links for the UI Library 10m
- Creating a Top Navigation Bar for the UI Library 10m
- Creating an Off-canvas Mobile Navigation for the UI Library 9m
- Creating Input Fields and Drop-downs for the UI Library 11m
- Creating a Gallery for the UI Library 9m
- Adding Text and a Primary Action to the Gallery 7m
- Creating a Blog Post for the UI Library 10m
- Creating a Page Divider for the UI Library 8m
- Creating Elements for a Sitemap 7m
- Adding a Contents Page to the Wireframe Template 7m
- Creating an Automated Table of Contents 6m
- Adding Page Navigation to the Document 9m
- Adding Interactivity to the Page Navigation 6m
- Adding a Title Page to the Wireframe 7m
- Wireframing a Contents Page and Sitemap 10m
- Adding Navigation to a Desktop Homepage Wireframe 6m
- Adding a Homepage Banner to a Desktop Homepage Wireframe 8m
- Adding a Quote and Products to a Desktop Homepage Wireframe 11m
- Adding a Video Section to a Desktop Homepage Wireframe 8m
- Adding a Footer to a Desktop Homepage Wireframe 7m
- Adding a Navigation and Banner to a Desktop Blog Wireframe 5m
- Adding a Blog Post and Archive to a Desktop Blog Wireframe 9m
- Adding Navigation and a Homepage Banner to a Mobile Homepage Wireframe 7m
- Adding a Quote, Product, and Video Section to a Mobile Homepage Wireframe 8m
- Adding an Off-canvas Navigation to a Mobile Homepage Wireframe 6m
- Adding Navigation, a Banner, and Blog Posts to a Mobile Blog Wireframe 7m
- Setting up the Wireframe for Interactivity 7m
- Adding Buttons and Hyperlinks to the Final Wireframe 9m
- Exporting the Final Interactive Pdf 9m
About the author
Ben Smith is a successful, multi-disciplined freelance UI & UX Designer who has worked on countless digital projects for some of the world's best known media brands, including FOX, ESPN, and the BBC. Currently working on internal web application projects for Barclays Bank, Ben has previously specialized in the mobile sector creating iOS and Android applications for well known UK brands such as Rightmove and Autotrader. One of his most widely regarded accomplishments was the creation of a new res... more