ID + Visual Design

Category: Education

Presentation Description

No description available.


Presentation Transcript

ID + Visual Design Discussion:

ID + Visual Design Discussion

Intro: Why this presentation?:

Intro: Why this presentation?

Slide 3:

Distance Course Design & Consulting (DCDC) ID Team Design Team Project Manager Account Manager

ID Team:

ID Team ID Team Instructional Designers from ETEC ETEC Faculty Paul McKimmy Ariana Eichelberger

Design Team (DT):

Design Team (DT) From Multiple Disciplines/Backgrounds Graphic/Web Designers from UH Programmer with Design Background Designer with 3-D Background

Goal/Product: Online Course:

Goal/Product: Online Course Examples Hawaiian Voyaging Professional Level: Instructional Designers Technical Visual/UI Design

Benefits of Working with Visual Designers/Programmers:

Benefits of Working with Visual Designers/Programmers

Focus on Sound ID:

Focus on Sound ID Don ’ t have to be a Lone Ranger, Jack of all Trades Visual Design: Color, typography, layout, user interface, etc Programmer: HTML, CSS, Flash, Mobile-friendly solutions, Web standards

Brainstorm tools, strategies for meeting learner objectives:

Brainstorm tools, strategies for meeting learner objectives Not limited to tools you know Not limited to free tools

Work with a Visual Communicator:

Work with a Visual Communicator Graphic/web design is visual communication Transforms text and image from a page - helps communicate it to the reader/learner Example: Distance Ed Flyer

Work with a Programmer:

Work with a Programmer Many Graphic/Web designers have a decent web programming background Strong programmer: unlimited possibilities Accessible, standards-based code

Learn from Working Together:

Learn from Working Together ID forms the basis for the project ID can be positively influenced by collaboration with the designer

The Development Process:

The Development Process

The “Big Picture”:

The “ Big Picture ” Understand Content ID Goals/Objectives Learner/User Goals Audience


Brainstorm/Sketching A lot happens during this phase Begin developing a design concept Information Architecture (Site Map for web) Layout User Interface


Wireframes Similar to Storyboarding Shows basic layout without color, typography, images applied Mockup of User Interface functionality Menus Buttons


Mockups After Wireframe is approved Apply design elements Color Type choices Imagery Graphic elements


Prototype Build one or two pages of the site Test functionality, usability Test learner ’ s experience Meeting goals of the site?

Final Product:

Final Product After a thorough review of the prototype Build out the rest of the site Inserting content, images, etc Reviewing for errors/bugs/typos Delivery

Communicating/Working Together:

Communicating/Working Together

For IDs::

For IDs: Help the Designer get the Big Picture Explain your rationales, how you are trying to meet learner objectives SUGGEST but don ’ t dictate visual design/UI/programming Co-Ownership: Help to provide as much information, resources, planning, content that can assist the designer on a project Be open to a Designer challenging your ID or suggesting changes that could make your ID better


Designers/Programmers Listen to what is important to the IDs Understand why a decision is being made, interpret that into a solution Work to maintain or enhance the instructional integrity of the project Ask for feedback/make revisions based on dialogue

Case Study: Teacher’s Guide & DCDC Support Site:

Case Study: Teacher ’ s Guide & DCDC Support Site

For more information on DCDC:

For more information on DCDC:

authorStream Live Help