Presented by Sarah Parmenter.
- Rebranded! “The Responsive Workflow”
- Responsive design is like a never-ending piece of art. It’s always evolving.
- Read Luke Wroblewski’s “Mobile First” already!
- 2015: Mobile and Desktop usage collide!
- Trent Walton: “To think about the web responsively is to think about the web in proportions, not pixels.”"
- Aptus: screenshot your responsive designs at different breakpoints.
- responsive.is
Sarah’s Workflow
Structure
- 65% of designers say they work to common breakpoints.
- Mark Boulton: “You can create good experiences without knowing the content. You can’t create good experiences without content structure.”
- Gridset, by Mark Boulton, for creating custom grids.
- Gridpak, a responsive grid generator.
- Crazyegg heatmapping service.
Content
- Time to let go of using lorem ipsum in our designs.
- Traffic light system for identifying important content. Color-coding content green, yellow, or red. Green content for all devices/experiences. Yellow for context-specific content. Red for content that may not be entirely necessary or useful.
- Voice & Tone
Typography
- Typecast for laying things out quickly and pairing webfonts. Exports CSS.
- Village
- YouWorkForThem
Mood board
- styletil.es
- Pinterest can be a good source for imagery for mood boards.
- Andy Clarke: “Static visuals are the currency of the web.”
UI Pattern Library
- Using recurring interface elements builds a library of solutions to repeating problems. Think: three-line menu button on iOS, pull-to-refresh on iOS.
- UI Patterns design patterns
- Mobile UI Patterns
- Static visuals (designing a comp for every page) are dying. Pattern libraries are the future.
- Reeoo, a web design inspiration gallery.
- Photoshop CSS3 plugin
- CSS3Toolkit
- Starbucks’ pattern library and style guide
Asset Management
- Slicy (née Layer Cake) for busting out design elements/assets from a PSD by layers/groups. Would be very useful for a pattern library full of buttons and other similar UI patterns. Automatically create retina-ready graphics by adding +@2x to end of filename.
Native considerations
- Touch guidelines: 45-47px averge index finger, 72px average thumb size when used on a touch device.
- When designing, keep a set of overlays at 44px x 44px touch size to see if hit areas overlap. If so, adjust your design.
- When developing for mobile, don’t forget about
border-image
for creating assets. - OS cross-contamination: design patterns on iOS do not translate to Android do not translate to Blackberry, etc.
- Use Automator to add @2x to a bunch of filenames.
- Brad Frost: “This is web design not religion.”