MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Creating Interactive, High-Fidelity Wireframes in InDesign

Course Summary

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 Syllabus

    Introduction and Project Overview
    - 1m 0s

    —Introduction and Project Overview 1m 0s
    Creating Interactive, High-Fidelity Wireframes in InDesign
    - 5h 28m

    —Setting up a Basic Grid Master Page 5m 21s
    —Setting up a Grid for a Desktop Device 9m 19s
    —Setting up a Grid for a Mobile Device 6m 46s
    —Adding a Color Palette to Our Wireframe Templates 9m 12s
    —Defining the Document Typography 9m 26s
    —Defining Annotation Typography 9m 55s
    —Defining Wireframe Headings 8m 6s
    —Defining Wireframe Body Copy 7m 45s
    —Discovering the Benefits of Using an Icon Font 5m 21s
    —Preparing Your Icons for an Icon Font 5m 30s
    —Creating an Icon Font with Icomoon 10m 22s
    —Creating Buttons for the UI Library 9m 22s
    —Creating Gradient Buttons and Links for the UI Library 10m 13s
    —Creating a Top Navigation Bar for the UI Library 9m 45s
    —Creating an Off-canvas Mobile Navigation for the UI Library 9m 17s
    —Creating Input Fields and Drop-downs for the UI Library 10m 47s
    —Creating a Gallery for the UI Library 8m 56s
    —Adding Text and a Primary Action to the Gallery 7m 16s
    —Creating a Blog Post for the UI Library 10m 11s
    —Creating a Page Divider for the UI Library 7m 32s
    —Creating Elements for a Sitemap 7m 26s
    —Adding a Contents Page to the Wireframe Template 7m 25s
    —Creating an Automated Table of Contents 5m 41s
    —Adding Page Navigation to the Document 8m 39s
    —Adding Interactivity to the Page Navigation 6m 4s
    —Adding a Title Page to the Wireframe 7m 6s
    —Wireframing a Contents Page and Sitemap 9m 42s
    —Adding Navigation to a Desktop Homepage Wireframe 5m 50s
    —Adding a Homepage Banner to a Desktop Homepage Wireframe 7m 58s
    —Adding a Quote and Products to a Desktop Homepage Wireframe 10m 31s
    —Adding a Video Section to a Desktop Homepage Wireframe 7m 46s
    —Adding a Footer to a Desktop Homepage Wireframe 7m 19s
    —Adding a Navigation and Banner to a Desktop Blog Wireframe 5m 22s
    —Adding a Blog Post and Archive to a Desktop Blog Wireframe 8m 39s
    —Adding Navigation and a Homepage Banner to a Mobile Homepage Wireframe 6m 57s
    —Adding a Quote, Product, and Video Section to a Mobile Homepage Wireframe 7m 58s
    —Adding an Off-canvas Navigation to a Mobile Homepage Wireframe 5m 54s
    —Adding Navigation, a Banner, and Blog Posts to a Mobile Blog Wireframe 7m 6s
    —Setting up the Wireframe for Interactivity 7m 5s
    —Adding Buttons and Hyperlinks to the Final Wireframe 8m 58s
    —Exporting the Final Interactive Pdf 8m 33s


Course Fee:
USD 29

Course Type:

Self-Study

Course Status:

Active

Workload:

1 - 4 hours / week

This course is listed under Development & Implementations Community

Related Posts:

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top