SlideShare une entreprise Scribd logo
1  sur  89
Télécharger pour lire hors ligne
INTRODUCTION TO
BUILDING WIREFRAMES
Davide ‘Folletto’ Casali
NIGHT.EU

UX Designer

Advisor
What do you do?
TODAY
1 / Wireframes · how to work with them
2 / Wireframes management · how to use them effectively
3 / OmniGraffle Pro · introduction

90’

Junior/Mid
PART 1

Wireframes
THE IDEA OF
WIREFRAME COMES
FROM 3D MODELLING

@hjmediastudios
Wikipedia:
“A website wireframe 

is a visual guide 

that represents 

the skeletal framework 

of a website”
Nielsen/Norman Group:
“Wireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for gaining
design insight early”

http://www.nngroup.com/courses/wireframing-and-prototyping/
THERE ARE
DIFFERENT QUALITIES
OF WIREFRAMES
Even if wireframes display a single interface/page
they are less like photos and more like movie stills
WIREFRAMES
AS STORIES

© Ivor Beddoes
@awfulshot
WIREFRAMES
AS STORYBOARDS
FOR INTERFACES

© Ivor Beddoes
DIFFERENT WAYS TO TELL A STORY
frame by frame, drawings
key frames, textual descriptions
key frames, spoken narrative
Even if the storyboard is not visible
it’s still the foundation of wireframes
Wireframes are a static representation
of a dynamic non-linear flow of activity
The wireframe represents also the very first
moment when the project team sees
everything coming together.
Box

The minimal visual building block
of a wireframe is the box.
Box

Boxes usually contain a uniform kind of
content, not the individual elements.
However, it’s important to choose the right level
of breakdown to support the discussion.
Logo
Navigation

Box

Box
Content
Box
Let’s wireframe Twitter.
Boxes only.
Introduction to Building Wireframes (with OmniGraffle)
Global Navigation

User Page

Navigation
User profile

Multimedia 

Content of the User

User Stats

Who to follow
suggestions

Tweets

Trends

Messages
This high level box view is
implicit most of the time, but it’s
incredibly useful when applied
on a number of pages to ensure
consistency and reusability.

N
C

N
Box

N
Box

C
S

Box

Box
Box
Box

Box
Box

S
TEXT

BUTTONS

Lorem ipsum gaium sit
amet isciquitur elit in
ellam lacustre pulzella.

Button

Box
IMAGES

MORE...

···
Box
Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzella.
Expand
OFTEN EACH
HIGH-LEVEL
BOX CONTAINS
A REPEATING
PATTERN

Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand

Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand

Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand

Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand

Thomas Talker:!
TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY
Let’s build a journey.
Imagine Twitter’s registration process.
LOGIN PROCESS
The main steps of the journey

Home

Reg. Form

Confirmation
LOGIN PROCESS
How do we guide the user to the value?

?
Home

Reg. Form

Confirmation

Your Page
LOGIN PROCESS
An e-mail based approach

Home

Reg. Form

Confirmation

Email

Your Page
LOGIN PROCESS
A more direct way to engage the user

Home

Reg. Form

Confirmation

Email

Your Page
LOGIN PROCESS
Review journeys for the edge cases: errors, problems, etc

!
Home

Reg. Form

Confirmation

!
Email

Your Page
LOGIN PROCESS
The story is even bigger in reality

Tweet

Third party

Home

Reg. Form

Confirmation

Email

Your Page

Third party
1 / Wireframes as stories

2 / From boxes to elements
PART 2

Wireframes management
AGILE APPROACH TO WIREFRAMING

Ask yourself:
What’s the level of detail
I need to communicate
effectively?

HD
DETAILED
HIGH LEVEL
PAPER SKETCH
WHITEBOARDS
NAPKINS
Wireframes are made to be thrown away.
They are steps in the process of design.
Only the final one stays... until it gets developed.
In other words:
they can be delivered as documentation
but they are not for most of the process
THE INTERMEDIATE STEPS
ARE VALUABLE:
THEY SUPPORT
COMMUNICATION AND
CONSENSUS
AT EACH STEP YOU CAN
· test the journey
· discuss with management
· discuss with technical team
· share with other parties
observe

dot
LOOP

do

think

WORK IN ITERATIONS
This works
from startups to big enterprises
WEEKLY ITERATION
Helps with project activities
scoping, clarifies expectations,
supports continuos progress review.

WEEKLY MEETING
Sets formal progress steps to help the
client keeping the pace while being in
touch with the project progress
Let’s see an example
PREPARE
The first iteration is
about understanding
the problem.
Let’s see an example

WORKSHOP
First wireframes made
collaboratively by the stakeholders
in a workshop, in groups.
WHITEBOARD
Let’s see an example
TEST WITH USERS
Take the whiteboards and
formalize them in individual
proposals to be tested.
Let’s see an example

REVIEW ALTERNATIVES
In this review propose a few
alternatives refining the solutions
from the workshop.
PAPER SKETCH
Let’s see an example
TEST WITH USERS
Yup, again, if it’s possible. Try a
more guerrilla approach maybe.
Let’s see an example

REVIEW FIRST DRAFT
Ask explicitly to involve
developers if it didn’t happen
before the review.
HIGH LEVEL
1 ITERATION = No review*

* or review in a different next step (visual design? development?)
2 ITERATIONS = Draft, then feedback, then refine
Introduction to Building Wireframes (with OmniGraffle)
3 / Wireframes as steps

4 / Iterative approach
PART 3

OmniGraffle Pro
OmniGraffle
Professional
Why Pro?
OmniGraffle is a powerhouse
Wireframes

Interactive
PDFs

From
sketches to
HD prototypes

IA

HTML export

Presentations

Diagrams

Build any PDF

Pixel perfect
...even if it lacks some pieces
No built-in
collaboration

No motion design
OMNIGRAFFLE CAN
EXPORT INTERACTIVE
PDFS THAT CAN BE
USED AS PROTOTYPES
·
·
·
·

You can send them via email
You can use them as prototypes
You can use them for testing
They show flows, not stills
FUNDAMENTALS
Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)
select

shape

lines

text

freeform
Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)
Let’s try!
Let’s sketch Twitter’s wireframe
Global Navigation

User Page

Navigation
User profile

Multimedia 

Content of the User

User Stats

Who to follow
suggestions

Tweets

Messages
Let’s sketch a single tweet wireframe

Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzella.
Expand
Let’s sketch Google’s homepage
Let’s sketch Twitter’s homepage
Let’s sketch Dropbox’s homepage
Let’s sketch Wordpress.com homepage
Lots of actions...

SIGN UP

VIDEO
LOGIN

MORE INFO
Introduction to Building Wireframes (with OmniGraffle)
PROPERTIES: ACTION
1.
2.
3.
4.
5.

Properties panel
Action
Jump elsewhere
Switch to a Specific Canvas
Select canvas
INTERACTIVE PDF
1. File → Export…
2. PDF vector image
3. Entire Document
TIPS
Grouping

Shared Layers

Smart Objects
Grouping
Shared Layers
Smart Objects
SET THE PAGE SIZE IN PX BY
SPECIFYING THE “PX” (OR “PT”) UNIT
BY HAND
IT’S A GOOD IDEA TO KEEP THE ZOOM
AT 100%, TO DESIGN AT THE RIGHT
SCALE. KEEP ALSO THE HEIGHT SHORT
TO FEEL THE SCROLL POSITION.
REVIEW THE KEYBOARD SHORTCUTS
FROM PREFERENCES TO ADAPT THEM
TO YOUR STYLE.
REVIEW ALSO “KEEP TOOL ACTIVE”.
5 / Basics of OmniGraffle Pro

6 / Grouping, masters, smart objs
“

To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.
Bruno Munari

”
Thanks.

@Folletto

Contenu connexe

Tendances

UID_AZY_COMP1650
UID_AZY_COMP1650UID_AZY_COMP1650
UID_AZY_COMP1650Aung Zay Ya
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativityuxpin
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...Seattle Interactive Conference
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
Interaction design comp1649
Interaction design comp1649Interaction design comp1649
Interaction design comp1649Htet Htet Aung
 
Writing Effective User Stories
Writing Effective User StoriesWriting Effective User Stories
Writing Effective User StoriesJaneve George
 
Visio Tutorial
Visio TutorialVisio Tutorial
Visio Tutorialmacleodc
 
User Interface Design Coursework (UID CW)
User Interface Design Coursework (UID CW)User Interface Design Coursework (UID CW)
User Interface Design Coursework (UID CW)Aung Hein Htet
 
Interaction Design COMP 1649
Interaction Design COMP 1649Interaction Design COMP 1649
Interaction Design COMP 1649Shane Min Zaw
 
Example mapping - slice any story into testable examples - SoCraTes 2022.pdf
Example mapping - slice any story into testable examples - SoCraTes 2022.pdfExample mapping - slice any story into testable examples - SoCraTes 2022.pdf
Example mapping - slice any story into testable examples - SoCraTes 2022.pdfSeb Rose
 
Component based architecture
Component based architectureComponent based architecture
Component based architectureZaiyang Li
 
Writing Good User Stories (Hint: It's not about writing)
Writing Good User Stories (Hint: It's not about writing)Writing Good User Stories (Hint: It's not about writing)
Writing Good User Stories (Hint: It's not about writing)one80
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Erin 'Folletto' Casali
 
Ux Camp: Selling the value of UX
Ux Camp: Selling the value of UXUx Camp: Selling the value of UX
Ux Camp: Selling the value of UXKat K. Richards
 
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn KoUser Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn KoNay Linn Ko
 

Tendances (20)

UID_AZY_COMP1650
UID_AZY_COMP1650UID_AZY_COMP1650
UID_AZY_COMP1650
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativity
 
Sample SRS format
Sample SRS formatSample SRS format
Sample SRS format
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...
Strategic Writing for UX: Choosing Your Words Carefully | Seattle Interactive...
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Interaction design comp1649
Interaction design comp1649Interaction design comp1649
Interaction design comp1649
 
Ui design
Ui designUi design
Ui design
 
Writing Effective User Stories
Writing Effective User StoriesWriting Effective User Stories
Writing Effective User Stories
 
Visio Tutorial
Visio TutorialVisio Tutorial
Visio Tutorial
 
User Stories explained
User Stories explainedUser Stories explained
User Stories explained
 
User Interface Design Coursework (UID CW)
User Interface Design Coursework (UID CW)User Interface Design Coursework (UID CW)
User Interface Design Coursework (UID CW)
 
Interaction Design COMP 1649
Interaction Design COMP 1649Interaction Design COMP 1649
Interaction Design COMP 1649
 
Example mapping - slice any story into testable examples - SoCraTes 2022.pdf
Example mapping - slice any story into testable examples - SoCraTes 2022.pdfExample mapping - slice any story into testable examples - SoCraTes 2022.pdf
Example mapping - slice any story into testable examples - SoCraTes 2022.pdf
 
Component based architecture
Component based architectureComponent based architecture
Component based architecture
 
Writing Good User Stories (Hint: It's not about writing)
Writing Good User Stories (Hint: It's not about writing)Writing Good User Stories (Hint: It's not about writing)
Writing Good User Stories (Hint: It's not about writing)
 
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
 
Ux Camp: Selling the value of UX
Ux Camp: Selling the value of UXUx Camp: Selling the value of UX
Ux Camp: Selling the value of UX
 
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn KoUser Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko
User Interface Design (University of Greenwich BIT Coursework) by Nay Linn Ko
 

Similaire à Introduction to Building Wireframes (with OmniGraffle)

The definitive guide to Web flowcharts
The definitive guide to Web flowchartsThe definitive guide to Web flowcharts
The definitive guide to Web flowchartsFelixDing
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug Gapinski
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLDee Sadler
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesПрофсоUX
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Dylan Wilbanks
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web DesignHitesh Mehta
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with JoomlaPaul Delbar
 
Designing technical documentation for tablets
Designing technical documentation for tabletsDesigning technical documentation for tablets
Designing technical documentation for tabletsMaxwell Hoffmann
 
Launching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to LaunchLaunching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to LaunchNick Floro
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsFergus Roche
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic Environmentsguestf4f7a4b38
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldmStoner, Inc.
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14Shilpa Thanawala
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Lifegoodfriday
 

Similaire à Introduction to Building Wireframes (with OmniGraffle) (20)

Module 07: Wireframes
Module 07: WireframesModule 07: Wireframes
Module 07: Wireframes
 
The definitive guide to Web flowcharts
The definitive guide to Web flowchartsThe definitive guide to Web flowcharts
The definitive guide to Web flowcharts
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile DevicesMarcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
 
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
Twin Redheaded Stepchildren of a Different Mother: The Usability of Accessibi...
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
Vg prezi pres Regent
Vg prezi pres RegentVg prezi pres Regent
Vg prezi pres Regent
 
Lean Prototyping Guide
Lean Prototyping GuideLean Prototyping Guide
Lean Prototyping Guide
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with Joomla
 
Designing technical documentation for tablets
Designing technical documentation for tabletsDesigning technical documentation for tablets
Designing technical documentation for tablets
 
Launching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to LaunchLaunching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to Launch
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic Environments
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic Environments
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
 

Plus de Erin 'Folletto' Casali

Mastering Feedback: You, the Team, the Product
Mastering Feedback: You, the Team, the ProductMastering Feedback: You, the Team, the Product
Mastering Feedback: You, the Team, the ProductErin 'Folletto' Casali
 
New Managers: Good Intentions, Half Delegation
New Managers: Good Intentions, Half DelegationNew Managers: Good Intentions, Half Delegation
New Managers: Good Intentions, Half DelegationErin 'Folletto' Casali
 
Design without Ego — TEDxBologna Talk
Design without Ego — TEDxBologna TalkDesign without Ego — TEDxBologna Talk
Design without Ego — TEDxBologna TalkErin 'Folletto' Casali
 
Designing Inclusive Open Source Communities
Designing Inclusive Open Source CommunitiesDesigning Inclusive Open Source Communities
Designing Inclusive Open Source CommunitiesErin 'Folletto' Casali
 
The Making of WordPress·com Calypso: A Team Perspective
The Making of WordPress·com Calypso: A Team PerspectiveThe Making of WordPress·com Calypso: A Team Perspective
The Making of WordPress·com Calypso: A Team PerspectiveErin 'Folletto' Casali
 
Teamwork at the Extremes: WordPress.com and UX for Good
Teamwork at the Extremes: WordPress.com and UX for GoodTeamwork at the Extremes: WordPress.com and UX for Good
Teamwork at the Extremes: WordPress.com and UX for GoodErin 'Folletto' Casali
 
Distributed Companies: A WordPress.com Team Perspective
Distributed Companies: A WordPress.com Team PerspectiveDistributed Companies: A WordPress.com Team Perspective
Distributed Companies: A WordPress.com Team PerspectiveErin 'Folletto' Casali
 
The Shift: UX Designer as Business Consultant (2016)
The Shift: UX Designer as Business Consultant (2016)The Shift: UX Designer as Business Consultant (2016)
The Shift: UX Designer as Business Consultant (2016)Erin 'Folletto' Casali
 
Social Brand Experience: a model for the sociality of brands
Social Brand Experience: a model for the sociality of brandsSocial Brand Experience: a model for the sociality of brands
Social Brand Experience: a model for the sociality of brandsErin 'Folletto' Casali
 
The Six Elements of Focus to Improve Your Craft
The Six Elements of Focus to Improve Your CraftThe Six Elements of Focus to Improve Your Craft
The Six Elements of Focus to Improve Your CraftErin 'Folletto' Casali
 
Design Principles for Social Change: UX for Good and Inzovu Curve
Design Principles for Social Change: UX for Good and Inzovu CurveDesign Principles for Social Change: UX for Good and Inzovu Curve
Design Principles for Social Change: UX for Good and Inzovu CurveErin 'Folletto' Casali
 
Grow Your Personal Leadership with Your Hybrid Traits
Grow Your Personal Leadership with Your Hybrid TraitsGrow Your Personal Leadership with Your Hybrid Traits
Grow Your Personal Leadership with Your Hybrid TraitsErin 'Folletto' Casali
 
Gestalt Design Principles for Developers
Gestalt Design Principles for DevelopersGestalt Design Principles for Developers
Gestalt Design Principles for DevelopersErin 'Folletto' Casali
 
The shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsThe shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsErin 'Folletto' Casali
 
The Three Speeds of Effective Collaboration
The Three Speeds of Effective CollaborationThe Three Speeds of Effective Collaboration
The Three Speeds of Effective CollaborationErin 'Folletto' Casali
 

Plus de Erin 'Folletto' Casali (20)

Mastering Feedback: You, the Team, the Product
Mastering Feedback: You, the Team, the ProductMastering Feedback: You, the Team, the Product
Mastering Feedback: You, the Team, the Product
 
Design Remote: The Async Advantage
Design Remote: The Async AdvantageDesign Remote: The Async Advantage
Design Remote: The Async Advantage
 
Foundations of Chat Bot Design
Foundations of Chat Bot DesignFoundations of Chat Bot Design
Foundations of Chat Bot Design
 
New Managers: Good Intentions, Half Delegation
New Managers: Good Intentions, Half DelegationNew Managers: Good Intentions, Half Delegation
New Managers: Good Intentions, Half Delegation
 
Design without Ego — TEDxBologna Talk
Design without Ego — TEDxBologna TalkDesign without Ego — TEDxBologna Talk
Design without Ego — TEDxBologna Talk
 
Designing Inclusive Open Source Communities
Designing Inclusive Open Source CommunitiesDesigning Inclusive Open Source Communities
Designing Inclusive Open Source Communities
 
The Making of WordPress·com Calypso: A Team Perspective
The Making of WordPress·com Calypso: A Team PerspectiveThe Making of WordPress·com Calypso: A Team Perspective
The Making of WordPress·com Calypso: A Team Perspective
 
Teamwork at the Extremes: WordPress.com and UX for Good
Teamwork at the Extremes: WordPress.com and UX for GoodTeamwork at the Extremes: WordPress.com and UX for Good
Teamwork at the Extremes: WordPress.com and UX for Good
 
Distributed Companies: A WordPress.com Team Perspective
Distributed Companies: A WordPress.com Team PerspectiveDistributed Companies: A WordPress.com Team Perspective
Distributed Companies: A WordPress.com Team Perspective
 
The Shift: UX Designer as Business Consultant (2016)
The Shift: UX Designer as Business Consultant (2016)The Shift: UX Designer as Business Consultant (2016)
The Shift: UX Designer as Business Consultant (2016)
 
Social Brand Experience: a model for the sociality of brands
Social Brand Experience: a model for the sociality of brandsSocial Brand Experience: a model for the sociality of brands
Social Brand Experience: a model for the sociality of brands
 
The Six Elements of Focus to Improve Your Craft
The Six Elements of Focus to Improve Your CraftThe Six Elements of Focus to Improve Your Craft
The Six Elements of Focus to Improve Your Craft
 
Design Principles for Social Change: UX for Good and Inzovu Curve
Design Principles for Social Change: UX for Good and Inzovu CurveDesign Principles for Social Change: UX for Good and Inzovu Curve
Design Principles for Social Change: UX for Good and Inzovu Curve
 
Kickstarting Design Thinking
Kickstarting Design ThinkingKickstarting Design Thinking
Kickstarting Design Thinking
 
Grow Your Personal Leadership with Your Hybrid Traits
Grow Your Personal Leadership with Your Hybrid TraitsGrow Your Personal Leadership with Your Hybrid Traits
Grow Your Personal Leadership with Your Hybrid Traits
 
The Thought Pump Model for Meditation
The Thought Pump Model for MeditationThe Thought Pump Model for Meditation
The Thought Pump Model for Meditation
 
Design with Personas: A Lean Approach
Design with Personas: A Lean ApproachDesign with Personas: A Lean Approach
Design with Personas: A Lean Approach
 
Gestalt Design Principles for Developers
Gestalt Design Principles for DevelopersGestalt Design Principles for Developers
Gestalt Design Principles for Developers
 
The shift: UX Designers as Business Consultants
The shift: UX Designers as Business ConsultantsThe shift: UX Designers as Business Consultants
The shift: UX Designers as Business Consultants
 
The Three Speeds of Effective Collaboration
The Three Speeds of Effective CollaborationThe Three Speeds of Effective Collaboration
The Three Speeds of Effective Collaboration
 

Dernier

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 

Dernier (19)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 

Introduction to Building Wireframes (with OmniGraffle)