Responsive Design for Houden

Houden is an e-ccomerce store, soon to launch with stylish bags and accessories for laptops, tablets, and cameras.

I was hired to improve aspects of the design and user experience with the help of new brand guidelines and a base template already under development at Shopify. Below is a preview of the design and code I’ve been working on.

Design in CodePen

My first task was to update the header / navigation, and design a responsive hero unit. This would need to support multiple layouts. I decided on a new approach for me, using CodePen as a tool for live, in-browser designing.

Houden hero unit designed in CodePen

The client provided access to their code repository, along with an automated workflow to push CSS and Liquid template changes to the development server.

Even with an automated process there is some friction uploading to a remote environment. By using CodePen I could eliminate this delay while still allowing my client to see immediate progress. I was able to design rapidly, and once happy with the direction, it was a simple task of copying the code back into the templates.

Houden hero unit (alternate designs)

One simple but immensely useful feature of CodePen is the ability to fork (duplicate) pens and continue editing. This allowed me to play around with different concepts while leaving behind a nice design history. This isn’t so easy when working with local files — occasionally I’ll branch of in Git and tag key milestones, but often I won’t bother if I’m “in the zone” designing.

Like any tool, CodePen isn’t going to design or code for you, but like a good night’s sleep or a strong cup of coffee, I found the experience very conducive to good work.

Houden product features

Throughout my work with Houden I utilised CodePen whenever design required some experimentation. Other times, I would make small tweaks using Chrome’s developer tools, before committing them to the CSS source.

As always the methods change to use what is most effective for ideation with the client.

Be sure to check back when the website is open for business!


Follow @dbushell on Twitter
Return to Blog