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.