ID + Visual Design

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

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:

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

Wireframes:

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

Mockups:

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

Prototype:

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:

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: http://hawaii.edu/coe/dcdc/:

For more information on DCDC: http://hawaii.edu/coe/dcdc/

authorStream Live Help