Designing it better in the browser

Brought to you by Sam Jiang

Many of us work, or have worked in a linear/waterfall process.

Wireframes

Sticking to this process as designers, we normally begin by making wireframes.

Designs

Then wed make our static comps for visual designs.

Front-end

Wed send mockups to our trusty front end developers who will code things up in HTML and CSS. This assembly line process kept things relatively simple and efficient.

20072010

also 2010

In 2007, the iPhone arrived, in 2010, the iPad - and Ethan Marcotte coined the term Responsive Web Design.

Wireframes *2

Now, if were to make a responsive website, well need to make two or even three versions of every page in our wireframes.

Designs *2

And our designs.

Front-end *?

(Image inspiration - Brad Frost)

But for our front-end developers, this was a new challenge they were facing.

Designing in browserUsing HTML & CSS to mock up our designs

More UX and design thinking goes into the making of a fluid width page template.We need to account for all the screen widths - instead of just two or three static variants.

Designing in browser means instead of spending time refining pixel-perfect comps in photoshop, we use a different tool: HTML/CSS markup to mock-up our designs.

Doesnt solve everything

Designing in browser isnt going to solve everything. There are always pros and cons.

And nowadays, there are also some alternative tools that you can use which allow you to design for a fluid width layout (Macaw, Adobe Muse)

Designing in browser can give you more precise results

But, since Im convinced that responsive web design is here to stay - I believe that designing directly in-browser through HTML/CSS can give you more precise results.

TonightWhat are some limitations?Where are there benefits?Whats our process at Yellow Pencil?+Tips & tricks

At Yellow Pencil, weve been tinkering with the process for a while now, Ill share some thoughts on where weve experienced limits, and also benefits with design in browser.

The limitsTechnologyClientsPaint by numbersSome content managements systems arent compatible.Wont see results right away because it takes more time.Being confined to HTML & CSS impacts our creativity.

The benefitsClientsDesignersTime & teamShow them not just how it looks, but also how it works. Testing in multiples screens and devices saves a lot of frustrationLess time spent pushing static pixels. Minimize hand-off.

What does our process look like at Yellow Pencil?

It all starts at research and discovery: Look for adjectives clients use to describe what they want. Work with clients on a competitive audit.

Style tiles

And well make style tiles

Style tiles in Photoshop

in photoshop even though we are designing in browser, we should never be starting from scratch. We need a way to iterate our visual designs.

Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web.- Samantha Warren

Asking semantic differential questionsModernOld-Fashioned

If you ask semantic differential, keep in mind - what a client sees as modern or old-fashioned, may be completely different from how we see it. So, we should always show varying degrees of these adjectives and cast a wide net though our style tiles.

Heres an example. With ACAD - our client wanted Bold and professional, but also wanted Easy-going and casual so we put them on a scale to figure out what our clients really wanted.

Once we learn what our clients like or didn't like, well compile one final tile - that represents the visual direction for the project going forward. Style tiles are crucial to our design process because they reduce the risk involved with generating our visual design directly in-browser.

Wireframes

At the same time that were sorting out our style tiles - we can start wireframing for our prototype.

We always start by sketching the layout on good old pencil and paper. Well show these to our clients & walk them though the structure to make sure were meeting their expectations around functional requirements. Once approved

Well start building out our in-browser wireframes using certain features and components from foundation - again, never start from scratch. Ideally, these will also be our base front-end templates.

This is also a good point to test your structure - its all about eliminating risk early on.

Now were ready to add our styles directly in browser

So now, we have our visual design direction set, along with our layout and structure. Its time to begin coding in the visual design in browser.

Start sketching! again

First, we go back to basics and sketch it out. We plot out our html structure and ask questions like: what divs/sections need to be nested where? How can we add this visual treatment to an element through CSS?

Use CSS preprocessors

Once you get to coding your CSS - use CSS preprocessors

SASS/CSS

Set up SASS - this is how I like to organize my files.

Layout: All the SCSS relating to your templates Components: All of the smaller, repeatable elements inside your template (forms, tables, buttons, images)Modules: a grouping of unique components that perform a specific function (news feed, image slider)

This will help you find what your looking for faster!

Add your media queries inside your class selectors - instead of the other way around. So.. youre not scrolling back and forth between different media query sections to style the same element.

Progressively enhance

Always try to build with progressive enhancement in mind starting with your mobile devices or minimum browser requirements first. This isnt always possible though because you might be working with tight timelines - and your clients may need to see the full desktop version first.

(Image source - MuleSoft blog)

Dont forget best practices - building it right the first time will take more time, but save you lots of time down the line.

In-browser design is a lot like sculpting with clay!

Wed like to get to a point where we have a pattern library that maps to a custom Drupal theme.

Never start from scratch Eliminate risk earlySketch

The key things to designing in browser.

Never start from scratch: use photoshop, or whatever tool you like as a canvas for iterating your visual styles (not your static comps). Use existing pattern libraries like foundation or bootstrap to build your wireframes.

Eliminate risk early: Set a direction for your visual designs and test your structure and layout before you design in code.

Sketch: Always be sketching. Its the simplest way of expressing your ideas - and also a great way to avoid that painting by the numbers problem.

Again, designing in browser isnt the solution to all situations.

Again, designing in-browser isnt the solution to all situations - but - it may be the most precise and efficient way to produce a responsive website from start to finish.

Thanks :)@samjiangasam@yellowpencil.com