SlideShare a Scribd company logo
1 of 116
Download to read offline
Magnetic Interactivity: Creating Charming Interfaces
The plan
The plan
    Introductions
•
The plan
  Introductions
•
• About Users
The plan
  Introductions
•
• About Users
• Break
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
• Interactivity Training
The plan
  Introductions
•
• About Users
• Break
• Stereotypes and Things You Should Know
• Break
• Interactivity Training
• Celebrate
Dan Mall
Philly representin’
Interactive Director at Happy Cog and
tech editor for A List Apart
Married for 7 months
Love Flash work
Designer, art director, teacher, singer,
coder, husband, author, speaker,
wrestler, son, writer, blogger, brother...
Sunkist addict
You?
What do users want?
Users want to love.
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Our emotions change the way we
think, and serve as constant guides
 to appropriate behavior, steering us
      away from the bad, guiding us
                   towards the good.
                    —Don Norman, Emotional Design
What do users expect?
DEFAULT ELEMENTS
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Users want to know what’s going on.
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
TYPOGRAPHY
What makes readers respond
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
    Intriguing captions
•
TYPOGRAPHY
    What makes readers respond

    Inherently interesting content
•
    Multilevel readership that encourages scanning
•
    Headlines that make me want to know more
•
    Subheads that complete the story
•
    Intriguing captions
•
    Well-built text
•
TYPOGRAPHY
     What makes readers respond

     Inherently interesting content
 •
     Multilevel readership that encourages scanning
 •
     Headlines that make me want to know more
 •
     Subheads that complete the story
 •
     Intriguing captions
 •
     Well-built text
 •


—Alex White, Thinking in Type
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
LAYOUT AND GRID
The purpose of a grid

“Information presented with clear and logically set out
titles, subtitles, texts, illustrations, and captions will not
only be read more quickly and easily but the information
will also be better understood and retained in memory.
This is a scientifically proved fact and the designer
should bear it in mind constantly.”
—Josef Müller-Brockman, Grid systems in graphic design
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
NEGATIVE SPACE
Grouping and order

“Shape and composition have a direct impact on viewer
perception. When elements are not grouped and each is
surrounded by white space, the surrounding spaces are
many and the composition appears chaotic and
unorganized. As elements are grouped, the white spaces
become fewer and larger, and a simplified more cohesive
perception of the composition is created.”
—Kimberly Elam, Grid Systems
Magnetic Interactivity: Creating Charming Interfaces
MOVEMENT
  Movement is very attractive, so it should be used carefully

   “Movement should help you understand the interrelatedness or
   sequence of information you’re presenting. The audience
   should be able to process the information in the order that the
   movement presents it.”
   —Nancy Duarte, slide:ology

• Movement softens transitions
• No snapping
• “Something is happening” vs. “Something happened”
Magnetic Interactivity: Creating Charming Interfaces
ANIMATION
Animation should be natural and alive

“The word animation is derived from the Latin word anima,
which loosely means ‘the breath of life.’ Most presentation
animation sucks the life out of the audience instead of
breathing life into it.
—Nancy Duarte, slide:ology


“Control timing to capture the
audience. Timing conveys a
character’s thought process
and emotions, and strengthens
story points.”
—John Lasseter, Timing for Animation
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
HTML
A structural markup language

“All web pages are written with HTML. [It] lets you format
text, add graphics, sound, and video... [It] has 2 essential
features—hypertext and universality. Hypertext means
you can create a link in a Web page or to practically
anything else on the Internet. Universality means that
virtually any computer can read a Web page. The Web is
open to all.”
—Elizabeth Castro, HTML 4 for the World Wide Web
CSS
A presentational language, used for styling

“With CSS, it became possible to control how a page looked
externally and to separate the presentational aspect of a
document from its content. Presentational tags could be
ditched, and layout could be controlled using CSS instead
of tables. Markup could be made simple again, and people
began to develop a newfound interest in underlying code.”
—Andy Budd, Cameron Moll & Simon Collison, CSS Mastery
JAVASCRIPT
A behavioral language that controls interaction

“JavaScript is used to add dynamic behavior to your
website. The things that happen when you interact with the
page—by clicking a button, dragging an image, or moving
the mouse—are defined in JavaScript. It works with the
Document Object Model to attach actions to different
events (mouseovers, drags, and clicks).”
—Stuart Langridge, DHTML Utopia: Modern Web Design Using
JavaScript & DOM
FLASH
A feature-rich application with a long history

“Flash has a powerful programming language, a bucket full
of filter and blending tools, and cross-product integration
with tools like Illustrator, Photoshop, and Flex to help you
make great animation, applications, or motion design. It’s
an incredible tool for expressing your creativity, style, and
unique ideas.”
—Jen deHaan, How to Cheat in Adobe Flash CS3
AJAX
Desktop-like experience on the web

Ajax isn’t a technology. It’s really several technologies,
each flourishing in its own right, coming together in
powerful new ways. Ajax incorporates:




—Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•
    asynchronous data retrieval using XMLHttpRequest;
•




    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
AJAX
    Desktop-like experience on the web

    Ajax isn’t a technology. It’s really several technologies,
    each flourishing in its own right, coming together in
    powerful new ways. Ajax incorporates:
    standards-based presentation using XHTML and CSS;
•
    dynamic display and interaction using the Document Object Model;
•
    data interchange and manipulation using XML and XSLT;
•
    asynchronous data retrieval using XMLHttpRequest;
•
    and JavaScript binding everything together.
•


    —Jesse James-Garrett, Ajax: A New Approach to Web Applications
WEB STANDARDS
Separation of content, style, and behavior

“Web standards are the tools with which all of us can
design and build sophisticated, beautiful sites that will
work as well tomorrow as they do today.”
—Jeffrey Zeldman, Designing With Web Standards
PROGRESSIVE ENHANCEMENT
  Web design strategy that focuses on content

   “Begin with the basic version, then add enhancements for
   those who can handle them.”
   —http://accessites.org/site/2007/02/graceful-degradation-progressive-
   enhancement/2/

• http://www.alistapart.com/articles/understandingprogressiveenhancement
• http://www.hesketh.com/publications/inclusive_web_design_for_the_future/
• http://en.wikipedia.org/wiki/Progressive_enhancement
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
DESIGNING A LINK
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur.
LINK TEXT
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
SOME THINGS TO REMEMBER
CONSISTENCY
Users demand it. There’s no way around that.
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
THOROUGHNESS
Plan for everything.
Magnetic Interactivity: Creating Charming Interfaces
APPROPRIATENESS
Effects should exist for a very specific reason.
Magnetic Interactivity: Creating Charming Interfaces
CHOOSING TECHNOLOGIES
Should you use…
HTML?
HTML?
Yes.
HTML?
Yes.

As long as it’s web content.
CSS?
CSS?
Maybe, depending on the average user agents for the
intended audience.
CSS?
Maybe, depending on the average user agents for the
intended audience.

Most of the time, you’ll want to use this.
JAVASCRIPT?
JAVASCRIPT?
Only if you’re looking to modify the existing page structure.
JAVASCRIPT vs. AJAX
JAVASCRIPT vs. AJAX
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.
JAVASCRIPT vs. AJAX
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.

Ajax uses JavaScript to edit the structure of the page,
without being constrained to the data already loaded.
JAVASCRIPT vs. AJAX
AJAX OR NO AJAX?
JavaScript is a client-side scripting language that allows
you to manipulate the structure of the page.

Ajax uses JavaScript to edit the structure of the page,
without being constrained to the data already loaded.
AJAX vs. FLASH
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JavaScript is good for manipulating structure.
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JavaScript is good for manipulating structure.

Flash is good for enhancing structure.
AJAX vs. FLASH
JAVASCRIPT OR FLASH?
JAVASCRIPT + FLASH
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
• Variables
AJAX vs. FLASH
  JAVASCRIPT OR FLASH?
  JAVASCRIPT + FLASH
• SWFObject
• Variables
• Dynamic data, driven by HTML
IS THIS JUST A CRASH
COURSE OF EVERYTHING
WE ALREADY KNOW?
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
Magnetic Interactivity: Creating Charming Interfaces
“It took 34 years for
me to draw that logo
in 4 seconds.”
—Paula Scher
Use real life as your guide.
Magnetic Interactivity: Creating Charming Interfaces
SOME GUIDELINES
Tips for Brainstorming
SOME GUIDELINES
    Tips for Brainstorming

    Every idea is good
•
SOME GUIDELINES
    Tips for Brainstorming

  Every idea is good
•
• What if...?
SOME GUIDELINES
    Tips for Brainstorming

  Every idea is good
•
• What if...?
• Techniques, not technology
SPLITTING UP
THE BRIEF
Catering to a specific user

Imagine that Carsonified approached your
team to design next year’s Future of Web
Design site.
Magnetic Interactivity: Creating Charming Interfaces

More Related Content

Similar to Magnetic Interactivity: Creating Charming Interfaces

Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Chris Castiglione
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Chris Castiglione
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW InteractiveSteve Fisher
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersMark O'English
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchrohitcse52
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
NAP review
NAP reviewNAP review
NAP reviewpducy
 
One Web To Rule Them All
One Web To Rule Them AllOne Web To Rule Them All
One Web To Rule Them AllDen Odell
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - UpdateJohn Yesko
 
Open Source and the MEAN stack
Open Source and the MEAN stackOpen Source and the MEAN stack
Open Source and the MEAN stackLiran Tal
 
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitResponsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitMike Donahue
 
Stolley Book review
Stolley Book reviewStolley Book review
Stolley Book reviewmzedalis
 
Planning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsPlanning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsChristian Heilmann
 
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceUsable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceRandall Snare
 
Responsive web design
Responsive web designResponsive web design
Responsive web designChris Love
 

Similar to Magnetic Interactivity: Creating Charming Interfaces (20)

Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW Interactive
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the Users
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
NAP review
NAP reviewNAP review
NAP review
 
One Web To Rule Them All
One Web To Rule Them AllOne Web To Rule Them All
One Web To Rule Them All
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
What’s Up, EDoc?!
What’s Up,EDoc?!What’s Up,EDoc?!
What’s Up, EDoc?!
 
Open Source and the MEAN stack
Open Source and the MEAN stackOpen Source and the MEAN stack
Open Source and the MEAN stack
 
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV SummitResponsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
Responsive Experience Design (RXD): A holistic approach to web - UXDEV Summit
 
Stolley Book review
Stolley Book reviewStolley Book review
Stolley Book review
 
Planning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teamsPlanning JavaScript and Ajax for larger teams
Planning JavaScript and Ajax for larger teams
 
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User ExperienceUsable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 

More from Dan Mall

Joining Forces
Joining ForcesJoining Forces
Joining ForcesDan Mall
 
Design Deliverables for a Post-Comp Era
Design Deliverables for a Post-Comp EraDesign Deliverables for a Post-Comp Era
Design Deliverables for a Post-Comp EraDan Mall
 
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to BeJust My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to BeDan Mall
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Dan Mall
 
Prototyping Your Business
Prototyping Your BusinessPrototyping Your Business
Prototyping Your BusinessDan Mall
 
Hulkamania & Design
Hulkamania & DesignHulkamania & Design
Hulkamania & DesignDan Mall
 
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...Dan Mall
 
Flash & Web Standards: Getting Along on the Playground
Flash & Web Standards: Getting Along on the PlaygroundFlash & Web Standards: Getting Along on the Playground
Flash & Web Standards: Getting Along on the PlaygroundDan Mall
 
The Experience Layer—FOWD NYC 08
The Experience Layer—FOWD NYC 08The Experience Layer—FOWD NYC 08
The Experience Layer—FOWD NYC 08Dan Mall
 

More from Dan Mall (9)

Joining Forces
Joining ForcesJoining Forces
Joining Forces
 
Design Deliverables for a Post-Comp Era
Design Deliverables for a Post-Comp EraDesign Deliverables for a Post-Comp Era
Design Deliverables for a Post-Comp Era
 
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to BeJust My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
 
Prototyping Your Business
Prototyping Your BusinessPrototyping Your Business
Prototyping Your Business
 
Hulkamania & Design
Hulkamania & DesignHulkamania & Design
Hulkamania & Design
 
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...
Master of None Boot Camp: Thriving and Surviving in the Aftermath of Traditio...
 
Flash & Web Standards: Getting Along on the Playground
Flash & Web Standards: Getting Along on the PlaygroundFlash & Web Standards: Getting Along on the Playground
Flash & Web Standards: Getting Along on the Playground
 
The Experience Layer—FOWD NYC 08
The Experience Layer—FOWD NYC 08The Experience Layer—FOWD NYC 08
The Experience Layer—FOWD NYC 08
 

Recently uploaded

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 

Recently uploaded (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 

Magnetic Interactivity: Creating Charming Interfaces

  • 3. The plan Introductions •
  • 4. The plan Introductions • • About Users
  • 5. The plan Introductions • • About Users • Break
  • 6. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know
  • 7. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break
  • 8. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break • Interactivity Training
  • 9. The plan Introductions • • About Users • Break • Stereotypes and Things You Should Know • Break • Interactivity Training • Celebrate
  • 10. Dan Mall Philly representin’ Interactive Director at Happy Cog and tech editor for A List Apart Married for 7 months Love Flash work Designer, art director, teacher, singer, coder, husband, author, speaker, wrestler, son, writer, blogger, brother... Sunkist addict
  • 11. You?
  • 12. What do users want?
  • 13. Users want to love.
  • 17. Our emotions change the way we think, and serve as constant guides to appropriate behavior, steering us away from the bad, guiding us towards the good. —Don Norman, Emotional Design
  • 18. What do users expect?
  • 24. Users want to know what’s going on.
  • 28. TYPOGRAPHY What makes readers respond Inherently interesting content •
  • 29. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning •
  • 30. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more •
  • 31. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story •
  • 32. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions •
  • 33. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions • Well-built text •
  • 34. TYPOGRAPHY What makes readers respond Inherently interesting content • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions • Well-built text • —Alex White, Thinking in Type
  • 40. LAYOUT AND GRID The purpose of a grid “Information presented with clear and logically set out titles, subtitles, texts, illustrations, and captions will not only be read more quickly and easily but the information will also be better understood and retained in memory. This is a scientifically proved fact and the designer should bear it in mind constantly.” —Josef Müller-Brockman, Grid systems in graphic design
  • 44. NEGATIVE SPACE Grouping and order “Shape and composition have a direct impact on viewer perception. When elements are not grouped and each is surrounded by white space, the surrounding spaces are many and the composition appears chaotic and unorganized. As elements are grouped, the white spaces become fewer and larger, and a simplified more cohesive perception of the composition is created.” —Kimberly Elam, Grid Systems
  • 46. MOVEMENT Movement is very attractive, so it should be used carefully “Movement should help you understand the interrelatedness or sequence of information you’re presenting. The audience should be able to process the information in the order that the movement presents it.” —Nancy Duarte, slide:ology • Movement softens transitions • No snapping • “Something is happening” vs. “Something happened”
  • 48. ANIMATION Animation should be natural and alive “The word animation is derived from the Latin word anima, which loosely means ‘the breath of life.’ Most presentation animation sucks the life out of the audience instead of breathing life into it. —Nancy Duarte, slide:ology “Control timing to capture the audience. Timing conveys a character’s thought process and emotions, and strengthens story points.” —John Lasseter, Timing for Animation
  • 51. HTML A structural markup language “All web pages are written with HTML. [It] lets you format text, add graphics, sound, and video... [It] has 2 essential features—hypertext and universality. Hypertext means you can create a link in a Web page or to practically anything else on the Internet. Universality means that virtually any computer can read a Web page. The Web is open to all.” —Elizabeth Castro, HTML 4 for the World Wide Web
  • 52. CSS A presentational language, used for styling “With CSS, it became possible to control how a page looked externally and to separate the presentational aspect of a document from its content. Presentational tags could be ditched, and layout could be controlled using CSS instead of tables. Markup could be made simple again, and people began to develop a newfound interest in underlying code.” —Andy Budd, Cameron Moll & Simon Collison, CSS Mastery
  • 53. JAVASCRIPT A behavioral language that controls interaction “JavaScript is used to add dynamic behavior to your website. The things that happen when you interact with the page—by clicking a button, dragging an image, or moving the mouse—are defined in JavaScript. It works with the Document Object Model to attach actions to different events (mouseovers, drags, and clicks).” —Stuart Langridge, DHTML Utopia: Modern Web Design Using JavaScript & DOM
  • 54. FLASH A feature-rich application with a long history “Flash has a powerful programming language, a bucket full of filter and blending tools, and cross-product integration with tools like Illustrator, Photoshop, and Flex to help you make great animation, applications, or motion design. It’s an incredible tool for expressing your creativity, style, and unique ideas.” —Jen deHaan, How to Cheat in Adobe Flash CS3
  • 55. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 56. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 57. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 58. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 59. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 60. AJAX Desktop-like experience on the web Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates: standards-based presentation using XHTML and CSS; • dynamic display and interaction using the Document Object Model; • data interchange and manipulation using XML and XSLT; • asynchronous data retrieval using XMLHttpRequest; • and JavaScript binding everything together. • —Jesse James-Garrett, Ajax: A New Approach to Web Applications
  • 61. WEB STANDARDS Separation of content, style, and behavior “Web standards are the tools with which all of us can design and build sophisticated, beautiful sites that will work as well tomorrow as they do today.” —Jeffrey Zeldman, Designing With Web Standards
  • 62. PROGRESSIVE ENHANCEMENT Web design strategy that focuses on content “Begin with the basic version, then add enhancements for those who can handle them.” —http://accessites.org/site/2007/02/graceful-degradation-progressive- enhancement/2/ • http://www.alistapart.com/articles/understandingprogressiveenhancement • http://www.hesketh.com/publications/inclusive_web_design_for_the_future/ • http://en.wikipedia.org/wiki/Progressive_enhancement
  • 66. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 67. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 68. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 69. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 70. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • 72. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99. John Coltrane’s ‘A Love Supreme’ is on sale at iTunes for $7.99.
  • 73. SOME THINGS TO REMEMBER
  • 74. CONSISTENCY Users demand it. There’s no way around that.
  • 80. APPROPRIATENESS Effects should exist for a very specific reason.
  • 83. HTML?
  • 85. HTML? Yes. As long as it’s web content.
  • 86. CSS?
  • 87. CSS? Maybe, depending on the average user agents for the intended audience.
  • 88. CSS? Maybe, depending on the average user agents for the intended audience. Most of the time, you’ll want to use this.
  • 90. JAVASCRIPT? Only if you’re looking to modify the existing page structure.
  • 92. JAVASCRIPT vs. AJAX JavaScript is a client-side scripting language that allows you to manipulate the structure of the page.
  • 93. JAVASCRIPT vs. AJAX JavaScript is a client-side scripting language that allows you to manipulate the structure of the page. Ajax uses JavaScript to edit the structure of the page, without being constrained to the data already loaded.
  • 94. JAVASCRIPT vs. AJAX AJAX OR NO AJAX? JavaScript is a client-side scripting language that allows you to manipulate the structure of the page. Ajax uses JavaScript to edit the structure of the page, without being constrained to the data already loaded.
  • 97. AJAX vs. FLASH JAVASCRIPT OR FLASH? JavaScript is good for manipulating structure.
  • 98. AJAX vs. FLASH JAVASCRIPT OR FLASH? JavaScript is good for manipulating structure. Flash is good for enhancing structure.
  • 99. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH
  • 100. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject
  • 101. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject • Variables
  • 102. AJAX vs. FLASH JAVASCRIPT OR FLASH? JAVASCRIPT + FLASH • SWFObject • Variables • Dynamic data, driven by HTML
  • 103. IS THIS JUST A CRASH COURSE OF EVERYTHING WE ALREADY KNOW?
  • 107. “It took 34 years for me to draw that logo in 4 seconds.” —Paula Scher
  • 108. Use real life as your guide.
  • 110. SOME GUIDELINES Tips for Brainstorming
  • 111. SOME GUIDELINES Tips for Brainstorming Every idea is good •
  • 112. SOME GUIDELINES Tips for Brainstorming Every idea is good • • What if...?
  • 113. SOME GUIDELINES Tips for Brainstorming Every idea is good • • What if...? • Techniques, not technology
  • 115. THE BRIEF Catering to a specific user Imagine that Carsonified approached your team to design next year’s Future of Web Design site.