Visual Learning - Dakota Lewis

Visual Learning By: Dakota Lewis

Goal: Optimize Comprehension, Minimize Confusion • Create simplistic easy to navigate infographics that are proven to improve comprehension with the respective subject being visually curated.

• Lowering the barrier to entry for respective subjects of the infographics.

• Introducing an efficient option for individuals interested in teaching themselves the respective subjects of the infographics.

Information Graphics Research Prototyping, Design & Redesign Structure Organization Relationships

Infographic: Web Design • Components: • HTML HyperText Markup Language • CSS Cascading Style Sheets • JS JavaScript • Architecture • Examples

Research • After doing research on the available online resources for learning HTML I found the process to be more complex than intuitive.

• Pros: • • • •

In depth explanations Complete reference Free, No Sign-up Regularly Updated

• Cons • • • • •

Large Document Object Model Complex Navigation Distracting & Confusing ads Complex wording Unfriendly introduction

Issue 1: Large Document Object Model

Issue 2: Complex Navigation

Issue 3: Distracting & Confusing ads

Issue 4: complex wording

Issue 5:

Daunting/ unfriendly introduction

HTML

Prototyping, Design & Redesign When designing the infographic for HTML, I wanted to focus on legibility and comprehension.

• Creating clear relationships between Tags, Attributes and Values.

• Providing clear examples of code language application.

• Complete reference at a glance

Skeleton

Skeleton

Iteration’s

CURRENT MODEL

Relationships

Future

HTML no CSS

HTML with CSS

Future Goals: • Add definitions to Tags Attributes and Values • Test model for comprehension • Create CSS model • Create JavaScript Model • Finish Web page explaining infographic • And raw code as example

• Creating a web application that allows for intuitive interaction with the graphic.