Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bridging UX and Web Development

Jack Moffett
October 23, 2014

Bridging UX and Web Development

These slides are from the full day workshop I lead at Midwest UX 2014 in Indianapolis.

Jack Moffett

October 23, 2014
Tweet

More Decks by Jack Moffett

Other Decks in Design

Transcript

  1. Bridging UX & Web Development Jack Moffett | @jackmoffett Senior

    Interaction Designer Inmedius, a Boeing Company designaday.tumblr.com Midwest UX 2014
  2. “The way we work at Apple is that the complexity

    of these products really makes it critical to work collaboratively, with different areas of expertise. I think that’s one of the things about my job I enjoy the most. I work with silicon designers, electronic and mechanical engineers, and I think you would struggle to determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making great products.” Sir Jonathan Ive
  3. “I get most frustrated when, after providing a pixel-perfect mockup,

    I see the finished implementation during the testing phase, and it’s drastically different than what I spec’d (fonts, colors, sizes, spacing, alignment, positioning, etc).”
  4. “If you’re in a room filled with designers, bring up

    the topic of whether it’s valuable for a designer to also code. Immediately, the room will divide faster than Moses split the Red Sea. One side will tell you coding is an essential skill, while the other will vehemently argue how it dilutes the designer’s value.” An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/ Jared Spool
  5. “Coding and designing are collections of skills. What we’ve learned

    is teams with a better distribution of skills, not segmented by roles, produce better results.”
  6. “Coding and designing are collections of skills. What we’ve learned

    is teams with a better distribution of skills, not segmented by roles, produce better results.”
  7. Why HTML/CSS? Syntax Error - Folded Up Beyond All Recognition

    by Simon Pow http://www.flickr.com/photos/simonpow/252312738/
  8. Developers don’t want to spend time adjusting padding. Developers don’t

    have an eye for visual design details. I don’t want developers mucking with my code. Why HTML/CSS?
  9. How much time do you spend creating visual design specifications?

    It takes less time to implement a layout than to specify it. It takes a lot less time to change a layout in CSS than in Photoshop. Why HTML/CSS?
  10. Working in the Production Code I don’t have to ask

    permission to make changes or ask someone else to make them for me. I know that the final product will be the one that I designed. With great power comes great responsibility.
  11. A successful tool is one that was used to do

    something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/ tools Code editor Browsers with developer tools File comparison tool Issue Tracking Wiki Version control client
  12. Text Editor Features Syntax coloring Line numbers Code folding Auto-indent

    Auto-completion Auto-pairing Snippets Find and replace Multiple views Sublime Text
  13. Issue Tracking Create items for your design tasks, as well

    as implementation tasks. Assign tasks to devs when you have completed your work or need something from them. Enter issues/bugs against the application for yourself or others. May integrate with your code repository, showing check-ins.
  14. Wiki Subscribe to see what the developers are thinking. Document

    your own thinking so it is available to them.
  15. Version Control Subversion (SVN) • Versions • Cornerstone • TortoiseSVN

    Git • GitHub • Mercurial • GitBox • Tower • SourceTree
  16. Formatting Standards Geodesic shapes on Project Eden, Cornwall dome by

    Elias Gayles http://www.flickr.com/photos/elias_daniel/6019904580/
  17. Formatting Standards Create and enforce coding standards for your CSS.

    Whitespace matters: pick tabs or a specific number of spaces for indentation. Define consistent rules for comments.
  18. Formatting Standards • Use one discrete selector per line in

    multi-selector rulesets. • Include a single space before the opening brace of a ruleset. • Include one declaration per line in a declaration block. • Use one level of indentation for each declaration. • Include a single space after the colon of a declaration. • Use lowercase and shorthand hex values, e.g., #aaa. • Use single or double quotes consistently. Preference is for double quotes, e.g., content: "". • Quote attribute values in selectors, e.g., input[type="checkbox"]. • Where allowed, avoid specifying units for zero-values, e.g., margin: 0. • Include a space after each comma in comma-separated property or function values. • Include a semi-colon at the end of the last declaration in a declaration block. • Place the closing brace of a ruleset in the same column as the first character of the ruleset. • Separate each ruleset by a blank line. Nicolas Gallagher Idiomatic CSS
  19. OOCSS Don’t design your CSS for now. Design it for

    the future. Instead of a mile-long stylesheet with roll-of-the-dice inheritance, you’ll have an understandable, easily maintainable library of documented components.
  20. Ground Rules Share the HTML, own the style sheet Comment

    your code Silly designer, IDs are for devs Just say “No!” to embedded styles Use sprites
  21. OOCSS As CSS advances and implementations improve, more and more

    is possible purely using style sheets and without the need for additional scripting on either a site’s front- or back-end, which reduces the amount of executable code. Meitar Moscovitz
  22. Credits Typefaces: Blanch, by Atipus Myriad Pro, by Adobe Survey

    visualizations created with Parallel Sets by Robert Kosara.
  23. 1. State of the Industry 2. Looking for Group 3.

    Collaboration Life Cycle 4. Why HTML and CSS? 5. Tooling Up 6. Formatting Standards 7. OOCSS 8. Owning Behavior 9. Looking Toward the Horizon Chapter