Embed Size (px)
Citation preview
Who will be the king in 2016? Designers or Developers
Code paLOUSA - Mar 30, 2016
Long Live the King!
“They only care that it works, they don't realize how important it is for the site to be user friendly and appealing, so people would actually want to use it.”
"They only care about how it looks, don't realize how hard we have to work to actually make their "minor adjustments”.
Long Live the King!
Bachelors & Masters Computer Applications
1999 - 2002
Software Engineer 2005 - 2008
Web Designer/Developer
2008 - 2011
2011 - Now
UX Designer
Kavitha KrishnanSenior UX DesignerCUNA Mutual Group
“
“Developers are the new kingmakers
- Stephen O’Grady
Long Live the King!
What do you do?
I am a UX designer
There is no such thing as a Web Designer
Interaction Designer
Visu
al D
esig
ner Graphic
DesignerInformation Architect
Usability Specialist
UX Researcher
Usability Analyst
UX
Des
igne
r
Usability Engineer
Interaction Designer24%
UX Designer26%
Usability Analyst2%
Visual Designer23%
Information Architect18%
User Research6%
UX Job Requirements/Duties
10 % Project Management
20% Visual Design 20% Interaction Design10% UX Strategy10% User Testing
10 % User Research
Human Focussed Technology Focussed
Research Info Design
Visual Design
InteractionDesign
Front EndHTML/CSS Back End
User Experience Designer
Visual/Graphic Designer
UI Developer Application Developer
http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
</>
Communication
Empathy and Respect
Object Oriented Programming is a programming language model organized around objects rather than “actions” and data rather than logic.
Object Oriented design is the art of identifying real world objects and map objects so that they work together to create a digital system that is efficient and meets user goals.
Trust
Proximity/Remote Working
Designer/Developer Pairing
What makes you good designer?
‣ Efficiently deliver designs to developers
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
How to deliver design to developers ?
Know your canvas sizes, margins and paddings
Use a grid, Know your grid
Create diagrams and/or storyboards to convey where each link should lead.
Include hover states and describe animations as clearly as possible (either verbally in a quick over-the-shoulder meeting, or as notes affixed to early wireframes).
Graphics, tiles, icons, and photos should be appropriately named and organized. Include HEX codes for all colors and gradients.
‣ How you deliver designs to developers ?
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
‣ How you deliver designs to developers ?
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
5 Good reasons why designers should code
‣The combination of designing in Photoshop (or whatever software you use) along with HTML & CSS is greater than the sum of their parts
‣Your designs will be executed in exactly the way you want them to
‣The bridge between designing in Photoshop and code is relatively small
‣It’s massively time saving to be able to both design and code
‣If you’re a designer who can’t code, learning code opens up a whole new world of job opportunities
THEN“Learn to code” meant “learn HTML and CSS,” or learn enough of it to bring designs to life
NowIt’s not just about turning PSD to HTML anymore, but about developing for iOS and creating web applications in Ruby or AngularJS
Focus on understanding the mechanics coding languages, focus on softer skills, on improving collaboration and communication from a holistic perspective.
‣ How you deliver designs to developers ?
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
How HTML tags are nested and rendered in the browser
The basics of CSS and how it differs from HTML
How CSS properties are used to create effects like box shadows
Which elements can be created using pure CSS vs. which elements require images
How breakpoints work in responsive website layouts
‣ How you deliver designs to developers ?
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
‣ How you deliver designs to developers ?
‣ Use style guide as a collaborative tool
‣ Take interest in development
‣ Understanding development as a designer
‣ Communicating dev-friendly ides
‣ Collaborating with developers on design
Seven Six Commandments
Long Live the King!
Era of Digital Omnivore
90% move between 4 core devices to accomplish a goal
1.75 Billion smartphone users worldwide in 2014
24 Billion wireless connected devices in 2022
225 B app downloads worldwide in 2016
6 connected devices owned on average by tabled owners
86% use mobile devices while watching TV and other media
Designing Multi-Device Experiences, Michal Levin, O’Reilly, 2014
Multi-Device Ecosystem
Designing Multi-Device Experiences, Michal Levin, O’Reilly, 2014
Mobile First
Long Live the King!
Questions ?
