Designing in the Browser with Zoe Gillenwater

blogTreehouseFriends

Zoe Gillenwater, author of Stunning CSS3, sits down with Treehouse’s Dan Gorgone to discuss the effect CSS3 has had on front-end design, as well as accessibility, mobile first design, and learning how to code.

Treehouse Gold Members can watch the full interview with Zoe here.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

6 comments on “Designing in the Browser with Zoe Gillenwater

  1. Personally, I am still not convinced about the idea of designing in the browser. I think it confuses the design process by having you entering code while you are still conceiving a website’s layout and overall aesthetic.

  2. I design in the browser, but I haven’t dropped PhotoShop completely. Of course, before anything else I start on paper. I’ve found the best way (your mileage may vary on this) to reconcile between the medium and your design process is to draw up very rough wireframes for layout ideas, and then build it in the browser. Then you might have another HTML file that serves as a living style guide or pattern library, saving Photoshop for assets you might need along the way. I find it effective because the wireframe serves as a canvas, but isn’t as constrained as a static mockup. And through the use of CSS, you can isolate your components and build them individually while fleshing out a unified design within the context it’s going to live.

    Even better, you can take the styles from your pattern library and apply them directly to your wireframe canvas, ensuring consistency. I find the best part is that a living style guide can be modified on its own without touching the live site for a redesign. And then once you’re satisfied, you can apply your changes to a new stylesheet and just replace a few files on the live site. The boon of designing in the browser is that it can make iterative design a breeze. Again, the effectiveness of this process depends on your skill in writing markup and style, but I honestly think HTML & CSS knowledge is becoming mandatory. I’ve always thought that a web designer should be able to deliver his or her designs to the web. And building in the browser (with a process) may just be that mindset taking root in the industry.

    I don’t think the proponents of designing in the browser are saying, “This is the only way.” They’re just acknowledging that a lot about the industry has changed, and we can’t confine ourselves to 960px canvases. The traditional process isn’t doing so well anymore. It’s the reason why we see the emergence of Style Tiles, living style guides, pattern libraries, and style collages. New processes for new situations. Years ago when designers worked comfortably with Photoshop, the web only existed on desktops, and we fought the fluid nature of it doggedly. Even I started with PSDs and slicing, but it’s becoming less feasible to do things the way we’ve always done them. The web adapts. So should we.

  3. The last two projects I worked on were almost exclusively in the browser. The client in both cases was given a choice of Style Tiles to explore their ideas which still allows the client creative input. Designing in the browser was a daunting task to begin with but with a decent CSS frame work to get things rolling (Zurb’s Foundation 4 highly recommended), it’s super easy… and fast! Prototyping/designing this way also helps with client content strategy; content arrived much sooner. One final note is that the project can evolve without having to alter rigid graphic design layouts.

    • @gavinfoster:disqus I agree that Zurb is wonderful for this sort of thing. In fact (shameless plugin coming!) I made a tool to make it even easier to get start on your colors and typography called ditbi: https://github.com/roblevintennis/ditbi – but it’ll work with any CSS, Sass, LESS set up too.

      • @roblevintennis:disqus not that shameless if it proves useful ;) … will give it a whirl sometime during the week. Starred on github.