Designer vs Developer - A Battle Royal v1.0
-
Upload
nicole-maynard -
Category
Technology
-
view
795 -
download
0
description
Transcript of Designer vs Developer - A Battle Royal v1.0
![Page 1: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/1.jpg)
![Page 2: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/2.jpg)
DESIGNER DEVELOPER
Bryan “Rock Star” Gulley @uxjester Interaction Design
UI Development
Information Architecture SharePoint UI Sleuth
Nicole “Nicky” Maynard @punkynixter User Research
Information Architecture
Interactive Design Visual Design
![Page 3: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/3.jpg)
DESIGNERS DEVELOPERS
![Page 4: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/4.jpg)
ROUND 1 Designer
![Page 5: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/5.jpg)
“Design is not just what it
looks like and feels like.
Design is how it works.”
Steve Jobs
![Page 6: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/6.jpg)
Yes, it’s beautiful.
![Page 7: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/7.jpg)
Started when humans made
tools to make tasks easier
After WWII ·Engineers research, lessons learned
·Human Factors & Ergonomics Society
Paul Fitts ·Improved cockpits
·Fitts’s law still used today
![Page 8: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/8.jpg)
Dieter Rams · Braun industrial designer
· “Less, but better”
Walt Disney · First immersive experience by UCD · “Imagineers” first UX team?
![Page 9: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/9.jpg)
Donald Norman
![Page 10: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/10.jpg)
Researchers Information Architects
Design Strategists
Content Strategists
Visual Designers
Interactive Designers
![Page 11: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/11.jpg)
us·er noun A person who uses or operates something, esp. a computer or other machine. Synonyms Consumer, customer, employee, client, patient
Antonyms Stakeholder, steering committee member, designer, developer
Defined by Google.
![Page 12: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/12.jpg)
What is UX
a person's perceptions and responses
that result from the use or anticipated
use of a product, system or service ISO1924
![Page 13: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/13.jpg)
Includes The Users’
emotions, beliefs, preferences, perceptions,
physical and psychological responses,
behaviors and accomplishments
that occur before, during and after use
![Page 14: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/14.jpg)
Influential Factors
System User Context of Use
What Who Why When Where
![Page 15: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/15.jpg)
Everything That Affects A User’s Interaction
![Page 16: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/16.jpg)
Meet the users’ needs & reach business goals
Solve business problems!Improve communication!Drive adoption & productivity!Ensure profitability!Enjoyable to use!
![Page 17: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/17.jpg)
Meet the users’ needs & reach business goals
Make people happy by creating great experiences
![Page 18: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/18.jpg)
User Experience Drives Behavior & Action
How a user feels about a system
Impacting time, cost, profit and satisfaction Impacting time, cost,
profit and satisfaction
Affects their
behavior & choices
How a user feels
about a system
Negative Impact Undesired Behavior Bad Experience
![Page 19: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/19.jpg)
User Experience Drives Behavior & Action
How a user feels about a system
Impacting time, cost, profit and satisfaction Impacting time, cost,
profit and satisfaction
Affects their
behavior & choices
How a user feels
about a system
Positive Impact Desired Behavior Good Experience
![Page 20: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/20.jpg)
![Page 21: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/21.jpg)
01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD
EVALUATE
User Centered Design Process
![Page 22: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/22.jpg)
ROUND 2 Developer
![Page 23: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/23.jpg)
A Developer’s Approach to UX
23
! White boarding
! Wireframing
! Prototyping
! Implementation
![Page 24: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/24.jpg)
White Boarding
24
! Think “Sketch”
! Information Architecture
! User Centered Design
![Page 25: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/25.jpg)
Wireframes & Prototypes
25
! Think “Skeleton”
! Sketch to Screen
! Annotated User Interface
! Shareable
! Testable
![Page 26: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/26.jpg)
26
DEMO
![Page 27: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/27.jpg)
Disclaimer
27
! Previous 4 slides are an example of how not to conduct development tasks with users
! More on that later
![Page 28: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/28.jpg)
Implementation
28
! Skeleton to SharePoint
! Putting it all together
! Migrating the “design” with Design Manager
! We are not limited to the Design Manager
! Use of SharePoint Designer Strongly Discouraged
![Page 29: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/29.jpg)
29
DEMO
![Page 30: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/30.jpg)
Tips, Tricks & Tools ! Tips ! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc. ! Use tools that work well in your workflow
! Tricks ! Network Drives ! Build reusable frameworks, libraries, plug-ins, “Starter” assets ! Utilize proven work by others
! Tools ! Raw HTML, CSS, and JavaScript ! Libraries like Twitter Bootstrap, YUI, jKit, Wirefy ! Sublime Text, Notepad ++, Coda, Plain Ol’ NotePad ! Axure, OmniGraffle, Fireworks, etc.
![Page 31: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/31.jpg)
Designer Developer
TIE MATCH
![Page 32: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/32.jpg)
01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD
EVALUATE
User Centered Design Process
![Page 33: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/33.jpg)
How we work together · Communication - keep everyone involved in the whole process
· Check your ego at the door
· Set expectations and boundaries, build trust
· Know each other’s lingo
· Understand each other’s process, job and value
· Be excited to teach one another – not chastise for gaps in knowledge
· Devs aren’t machines, they have feelings too
· Designers aren’t machines, great work takes time
![Page 34: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/34.jpg)
Key Take Aways · NNg’s Intranet Design Annuals
· UX is valuable investment · $10 change in UX phase, $100 in Design, $1,000 in Development
· UX bridges the gap between business and IT by being
the spokesperson for the user
· Design and Development are equally important
· Keep communication open throughout the entire process
· Learn each others’ job, limitations, lingo
· Collaboration is more important than your ego, you are working
toward he same goal
![Page 35: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/35.jpg)
35
Robert Toro Portals & Collaboration Practice Director
[email protected] 630.309.4042
Nicole Maynard UX Designer
[email protected] 630.251.8821
Bryan Gulley UI Developer
[email protected] 773.359.3384
SLALOM CONTACTS
![Page 36: Designer vs Developer - A Battle Royal v1.0](https://reader033.fdocuments.in/reader033/viewer/2022042522/559c365b1a28aba32e8b45cd/html5/thumbnails/36.jpg)
© 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.