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.
Course info
Rating
(10)
Level
Advanced
Updated
Sep 26, 2014
Duration
5h 29m
Table of contents
Introduction and Project Overview
Creating Interactive, High-Fidelity Wireframes in InDesign
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 6m Adding a Color Palette to Our Wireframe Templates 9m Defining the Document Typography 9m Defining Annotation Typography 9m Defining Wireframe Headings 8m Defining Wireframe Body Copy 7m Discovering the Benefits of Using an Icon Font 5m Preparing Your Icons for an Icon Font 5m 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 9m Creating an Off-canvas Mobile Navigation for the UI Library 9m Creating Input Fields and Drop-downs for the UI Library 10m Creating a Gallery for the UI Library 8m 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 7m Creating Elements for a Sitemap 7m Adding a Contents Page to the Wireframe Template 7m Creating an Automated Table of Contents 5m Adding Page Navigation to the Document 8m Adding Interactivity to the Page Navigation 6m Adding a Title Page to the Wireframe 7m Wireframing a Contents Page and Sitemap 9m Adding Navigation to a Desktop Homepage Wireframe 5m Adding a Homepage Banner to a Desktop Homepage Wireframe 7m Adding a Quote and Products to a Desktop Homepage Wireframe 10m Adding a Video Section to a Desktop Homepage Wireframe 7m 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 8m Adding Navigation and a Homepage Banner to a Mobile Homepage Wireframe 6m Adding a Quote, Product, and Video Section to a Mobile Homepage Wireframe 7m Adding an Off-canvas Navigation to a Mobile Homepage Wireframe 5m 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 8m Exporting the Final Interactive Pdf 8m
Description
Course info
Rating
(10)
Level
Advanced
Updated
Sep 26, 2014
Duration
5h 29m
Description

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.

About the author
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.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi, everyone. My name is Ben Smith. I'm a freelance designer, and my current projects include designing web applications for Barclays Bank, and before that I was designing web content and interactive games for the BBC. In this course, we're going to learn how to create interactive, high-fidelity wireframes using Adobe InDesign. Some of the key takeaways from watching this course include learning how to set up a fast and highly effective wireframing workflow, learning how to produce interactive wireframes in an easily accessible PDF format, how to create drag and drop libraries for customized UI patterns and platforms, and tips on how to make your wireframes unique and engaging. By the end of the training, you will have learned how to create visually compelling, interactive wireframes in no time at all. I'm excited to work with Digital-Tutors and share these techniques with you. So let's get started with the first lesson.