Embed Size (px)
DESCRIPTION
Slides from my talk at 2014 WordCamp Maine: http://2014.maine.wordcamp.org/session/designing-deciding-in-the-browser/
Citation preview
Designing (Deciding) in the Browser
Sang-Min Yoon August 16th, 2014
!
Let’s change the phrase “designing in the browser” to “deciding in the browser.”
-Dan Mall
When I mention “PSDs”, I’m referring to fully fleshed out comps
Sang-Min Yoon
Web Designer & Front-End Developer at Wentworth Institute of Technology
(Boston, MA)
I have designed and/or developed websites for
I learned web design & development with WordPress
About 4 years ago…
Typical Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Typical Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design decisions were made
Design• Create the PSD
• Get feedbacks
• Make millions and millions of edits
• Get sign off
• Start building the website only when clients/stakeholders are satisfied with the PSDs.
Typical Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Most of the design decisions were made
Does this make sense?
We aint talkin ‘bout how the website looks on a browser
We talkin ‘bout how the website looks on a PSD.
How silly is that. We talking about PSDs.
!
-Allen Iverson
These are printouts of websites and not websites.
Even more issues now
Pictures of Phone Usage
Photo Credit: www.flickr.com/photos/lukew
Create PSDs for every single one of these devices?
“We only need designs for desktop computer, iPhone and iPad.”
“Most of our users use a desktop computer, iPhone and iPad.”
“we’ll see a larger screen, with a 4.7-inch model launching first and a 5.5-inch model also being
unveiled at the same time”
Touch Experience
Touch Experience
Interactions (hover, animations and transitions)
Show Animations
Show Animations
Can not make these design decisions on a PSD
Past Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design decisions were made
Present Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the design decisions
Make SOME of the design decisions
Designing in the Browser
1) Saves Time
CSS3 is Powerful
CSS3 is Powerful
CSS3 is Powerful
2) Allows for rapid iteration
3) Content
On a PSD, more time is spent on look and feel of the website. This puts content second.
Show Animations
CSS3 is Powerful
Content is given priority
Content is given priority
Content is given priority
4) Makes RWD easier
Let the content determine the breakpoints
5) Icon Fonts and SVG
6) Browser and Devices
Video Credit: https://www.youtube.com/watch?v=_iidwn2kfJU
I Use CodeKit
BrowserStack
8) Performance
9) Accessibility
Accessibility
Accessibility
Testing (user experience, browser & device compatibility, performance, accessibility)
should not be done at the end.
Should be done during the design process…
..in the Browser!
Let's Wrap it up
Continue to use Photoshop but quickly move to the browser
Workflow• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the design decisions
Make SOME of the design decisions
Make all the important decisions in the browser
Questions?
