SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
Sketch &
the Magic Mirror
Hello!
I am Dara Pressley
I love helping people find a voice through art and technology
You can find me on twitter @uxdiva
Sketch
I was a late bloomer. But once I
discovered it, I wanted to use it as
my only design tool.
Magic Mirror completely
changed my workflow and made
using Sketch a fantastic
experience.
http://magicsketch.io/mirror/
A Mirror is not a Symbol
With Symbols
Mirror
items are contrained to the same
layout/size/porportion as the
symbol.
instead, reflects the item. If you
distored the mirror, the reflection
is also distored.
And this is exciting because….
I can take this
And do this
And this
And this
How it works
Create an artboard
or slice
How it works
Create an object (like a retangle)
Then use the drop down to
choose what you want to mirror
Then you get a reflection
For something a little more
complex, I create a template. The
it is already set up to have my
“Mirror” layer.
iPhone Template
More
Templates
And, of course there are lots of templates available from
Magic Sketch and other users.
How I work
I create my process flows
Whether I do this before or after
wireframing, proces flows help
me to make sure I didn’t skip any
steps.
Wireframes
I keep all the wireframes together
in the same page.
Flows updated
Fixing the reflection
If the ratio is off, the reflection
will be off.
• Make the layer the same size as
the artboard
• Lock the aspect ratio
• Make the width 250 again
• Refresh the reflection
Make the Presentation
Make the Presentation
Last, but not
least
Create specifications
use Notes plugin for great specs
http://marcosvid.al/sketch-notebook/
This whole
presentation
was created in
Sketch
And…
btw~
Thanks!
Any questions?
You can find me on twitter: @uxdiva

Mais conteúdo relacionado

Destaque

NDC London - Look at the man in the mirror - The smart way for change in pers...
NDC London - Look at the man in the mirror - The smart way for change in pers...NDC London - Look at the man in the mirror - The smart way for change in pers...
NDC London - Look at the man in the mirror - The smart way for change in pers...Sabine Wojcieszak
 
RMOUG QEW Family Coding Event- Raspberry PI
RMOUG QEW Family Coding Event-  Raspberry PIRMOUG QEW Family Coding Event-  Raspberry PI
RMOUG QEW Family Coding Event- Raspberry PIKellyn Pot'Vin-Gorman
 
Magic Mirror Functions
Magic Mirror FunctionsMagic Mirror Functions
Magic Mirror FunctionsFootfallCam
 
The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideDara Pressley
 
Magic Mirror for Retail Stores
Magic Mirror for Retail StoresMagic Mirror for Retail Stores
Magic Mirror for Retail StoresFootfallCam
 
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage3
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage303172016_ThinkingBehindTheVision_Final_HighRes_NoPage3
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage3Kelly Lauber
 
Smart Mirror Installation Case ( e-Mart Kintex )
Smart Mirror Installation Case ( e-Mart Kintex )Smart Mirror Installation Case ( e-Mart Kintex )
Smart Mirror Installation Case ( e-Mart Kintex )주식회사솔루팜
 
From 2D Map to Mobile 3D Mirror World
From 2D Map to Mobile 3D Mirror WorldFrom 2D Map to Mobile 3D Mirror World
From 2D Map to Mobile 3D Mirror WorldYu You
 
Look at the man in the mirror - the smart way for change management in perso...
Look at the man in the mirror  - the smart way for change management in perso...Look at the man in the mirror  - the smart way for change management in perso...
Look at the man in the mirror - the smart way for change management in perso...Sabine Wojcieszak
 
Smart Mirror Conceptualized - Copyright 09-11-2013
Smart Mirror Conceptualized - Copyright 09-11-2013Smart Mirror Conceptualized - Copyright 09-11-2013
Smart Mirror Conceptualized - Copyright 09-11-2013Glynn Spangenberg
 
3d mirror presentation
3d mirror presentation3d mirror presentation
3d mirror presentationTARIQ FAROOQUI
 

Destaque (20)

Raspberry pi why and what to buy
Raspberry pi why and what to buyRaspberry pi why and what to buy
Raspberry pi why and what to buy
 
NDC London - Look at the man in the mirror - The smart way for change in pers...
NDC London - Look at the man in the mirror - The smart way for change in pers...NDC London - Look at the man in the mirror - The smart way for change in pers...
NDC London - Look at the man in the mirror - The smart way for change in pers...
 
Sketching in code
Sketching in codeSketching in code
Sketching in code
 
RMOUG QEW Family Coding Event- Raspberry PI
RMOUG QEW Family Coding Event-  Raspberry PIRMOUG QEW Family Coding Event-  Raspberry PI
RMOUG QEW Family Coding Event- Raspberry PI
 
Magic Mirror Functions
Magic Mirror FunctionsMagic Mirror Functions
Magic Mirror Functions
 
The Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guideThe Living Style Guide: How CustomInk created a their new ux lead style guide
The Living Style Guide: How CustomInk created a their new ux lead style guide
 
Magic Mirror for Retail Stores
Magic Mirror for Retail StoresMagic Mirror for Retail Stores
Magic Mirror for Retail Stores
 
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage3
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage303172016_ThinkingBehindTheVision_Final_HighRes_NoPage3
03172016_ThinkingBehindTheVision_Final_HighRes_NoPage3
 
MEMORI Project - Philip Bowe, DCU2
MEMORI Project - Philip Bowe, DCU2MEMORI Project - Philip Bowe, DCU2
MEMORI Project - Philip Bowe, DCU2
 
Smart Mirror Installation Case ( e-Mart Kintex )
Smart Mirror Installation Case ( e-Mart Kintex )Smart Mirror Installation Case ( e-Mart Kintex )
Smart Mirror Installation Case ( e-Mart Kintex )
 
Cognitive in Retail
Cognitive in RetailCognitive in Retail
Cognitive in Retail
 
From 2D Map to Mobile 3D Mirror World
From 2D Map to Mobile 3D Mirror WorldFrom 2D Map to Mobile 3D Mirror World
From 2D Map to Mobile 3D Mirror World
 
Look at the man in the mirror - the smart way for change management in perso...
Look at the man in the mirror  - the smart way for change management in perso...Look at the man in the mirror  - the smart way for change management in perso...
Look at the man in the mirror - the smart way for change management in perso...
 
Mirror
MirrorMirror
Mirror
 
Smart Mirror for Digital Signage
Smart Mirror for Digital SignageSmart Mirror for Digital Signage
Smart Mirror for Digital Signage
 
Dress Yo'self
Dress Yo'self Dress Yo'self
Dress Yo'self
 
Smart Mirror Conceptualized - Copyright 09-11-2013
Smart Mirror Conceptualized - Copyright 09-11-2013Smart Mirror Conceptualized - Copyright 09-11-2013
Smart Mirror Conceptualized - Copyright 09-11-2013
 
3d mirror presentation
3d mirror presentation3d mirror presentation
3d mirror presentation
 
NRF 2015
NRF 2015NRF 2015
NRF 2015
 
Smart Mirror for Digital Signage
Smart Mirror for Digital SignageSmart Mirror for Digital Signage
Smart Mirror for Digital Signage
 

Semelhante a Sketch and the Magic Mirror

Semelhante a Sketch and the Magic Mirror (20)

Evaluation
EvaluationEvaluation
Evaluation
 
Summary Presentation: Place in Question
Summary Presentation: Place in QuestionSummary Presentation: Place in Question
Summary Presentation: Place in Question
 
Evaluation task 6
Evaluation task 6Evaluation task 6
Evaluation task 6
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
 
Digital Techniques
Digital TechniquesDigital Techniques
Digital Techniques
 
Evaluation, question 6
Evaluation, question 6Evaluation, question 6
Evaluation, question 6
 
Development pro forma
Development pro formaDevelopment pro forma
Development pro forma
 
Production Experiments
Production ExperimentsProduction Experiments
Production Experiments
 
Morales_A_Week14_FinalPortfolio
Morales_A_Week14_FinalPortfolioMorales_A_Week14_FinalPortfolio
Morales_A_Week14_FinalPortfolio
 
Sholto ccr3
Sholto ccr3Sholto ccr3
Sholto ccr3
 
Experiments for FMP
Experiments for FMPExperiments for FMP
Experiments for FMP
 
Living art
Living artLiving art
Living art
 
Q6
Q6Q6
Q6
 
Q6
Q6Q6
Q6
 
What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...What have you learnt about technologies from the process of constructing this...
What have you learnt about technologies from the process of constructing this...
 
Q6
Q6Q6
Q6
 
Presentation on Technologies
Presentation on Technologies Presentation on Technologies
Presentation on Technologies
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro forma
 
Q6
Q6Q6
Q6
 
Q6
Q6Q6
Q6
 

Último

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
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
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
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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
 
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
 
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
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
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
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 

Último (20)

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
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
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...
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
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
 
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
 
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
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
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...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 

Sketch and the Magic Mirror