Herding Code 108: Jin Yang and Nathan Bowers on Web Design

Episode 108

This episode of Herding Code continues a discussion / argument that Jon started with Jin Yang and Nathan Bowers on Twitter a few weeks ago after reading a post he liked from a product designer at Quora about how they don't use Photoshop in their design process. What's the role of visual design in the web design process? Can designers and developers ever be friends? Are HTML and CSS the lingua franca of designers and developers, or just an implementation detail? Do designers need to know HTML to be good web designers? Listen as Jin and Nathan set Jon straight.

• Jon tries to get Jin and Nathan upset, but they both start by agreeing
• Nathan mentions that Photoshop is a production tool, not a design tool
• Jin and Jon talk about the value of wireframes, and how the transition from wireframe
• Nathan talks about how different clients have different demands - Quora can prototype rapidly for their own product, but some clients will require high quality graphic deliverables
• Kevin asks developers and designers work together in HTML based design - who does the HTML?
• Jon talks about how moving the discussion from images to a client accessible stage / demo server early in the project helps everyone communicate
• Jon asks both which sorts of sites work better for HTML based design because they're mostly textual
• Jon asks Jin how he works on StackExchange proposals
• Nathan talks about how the site focus dictates the design process, and how he's mostly done with Photoshop
• Kevin asks if there's a place for a tool that's somewhere between the purely visual Photoshop world and HTML: Nathan says it'd be nice, Jon says the generated HTML is always horrible, and Jin says that's why he thinks designers need some HTML smarts
• Nathan brings up Jon's post on the Designer / Developer Workflow Crisis, and Jin talks about his post on Web Designers and Coding
• The talk moves to a visual-first design focus can end up with a website that doesn't provide the information the users actually want, and some favorite XKCD and The Oatmeal links are shared
• Jin and Jon talk about how your clients aren't really the end customers of your design, the users are
• Nathan asks Jon about how he thinks the design / developer workflow should be
• Nathan, Scott K, Jon, and Jin Jin talk about how developers can involved in the development process after the "design handoff"
• Jin talks about how developers should be part of the design process, and Jon and Scott K talk about how important it is for the whole team to know the context of what they're doing
• Kevin mentions that his wife is a web designer who doesn't do HTML, and every hastily backpedals
• Jon and Jin talk about how the background reasons for wanting designers to know HTML can still be met by the designer knowing the constraints of the web medium really well
• Kevin talks about how today's Ajax heavy sites aren't really just HTML anymore
• Jon talks about how he hates the new trend towards single page applications
• Kevin says that he thinks that saying designers should know HTML is like saying developers should know how to design, but Jin says that HTML isn't programming, it's the medium that both designers and developers are producing for
• Jon says that he thinks developers should try to learn more design
• Scott K asks how developers can learn design, and Jin and Nathan share tips
• Jon mentions some great talks by Robby Ingebretsen on design fundamentals for developers
• Kevin asks how much of design is just natural talent
• Jon talks about how he likes design discussions among the whole dev team, and Nathan says that it's important for the team to be able to communicate about the business and strategy for their project as well
• Nathan talks about the book Mindfulness which shows how working through a lot of ideas helps you come up with great ideas
• Jon talks about how a process that allows for continuous change throughout the project allows you to continue to shape the design as you go, and Scott K accuses him of being agile
• Jon asks Jin how he interacts with a team who develops on Windows when he's on a Mac, and they discuss how Firebug (and similar tools) allow for cross platform development
• Jon asks what sites should be designed using Photoshop / visual design first
• Jin asks Nathan about his thoughts on 960.gs, and Jon rants about how grid systems fight semantic design
• Scott K talks about the Flex Box Model will make it easier to design with grids without giving up on semantic markup
• Jin mentions HTML5 shims, but Scott K says that doesn't work as well for mobile
• Jin talks about how the real challenge in StackExchange design is in creating an emotional reaction, and Kevin says that's the result he cares about a lot more than HTML

Show Links:

• Jin Yang (@jzy)
• Nathan Bowers (@nathanbowers)
• Life without Photoshop
• AVC (designed by Nathan)
• StackExchange sites list - e.g. TEX, Gaming, Cooking, Mathematics, GIS
• Jon: The Designer/Developer Workflow Crisis (That Everyone's Ignoring)
• Jin: Web Designers & Coding
• Jon: Designing websites in Photoshop is like creating your dinner menu in Play Doh
• XKCD: University Website
• The Oatmeal: What I Want From A Restaurant Website
• The Oatmeal: How A Web Design Goes Straight To Hell
• Jin Yang on Hanselminutes
• Robby Ingebretsen's presentations on design for developers: Design Fundamentals for Developers and Ten Ways To Attack A Design Problem And Win
• Jin: talent vs. hard work
• Book: Mindfulness
• Firebug and Web Developer Toolbar
• http://960.gs/
• MIX 2011

Jin's link list for developers who want to learn more about design

• http://www.456bereastreet.com/ (accessibility)
• http://www.alistapart.com/ (web design, standards)
• http://www.drawar.com/ (design community, articles, showcases and forum).
• http://www.lukew.com/ff/ (interaction design)
• http://37signals.com/svn/posts (web app design, inspirations)
• http://www.smashingmagazine.com/ (showcases, freebies, articles)
• http://typography.com/email/2010_03/index_tw.htm (typography)
• http://retinart.net/ (graphics design)
• http://cssglobe.com/ (frontend dev)
• http://ilovetypography.com/ (typography)
• http://www.uxbooth.com/ (User Experience)
• http://scriptandstyle.com/ (frontend dev)
• http://www.thegridsystem.org/ (layout)
• http://52weeksofux.com/ (User experience, design)
• http://tutsplus.com/ (tutorials)
• http://www.zeldman.com/ (web standards)

Download / Listen:

Herding Code 108: Jin Yang and Nathan Bowers on Web Design