Webdesign
in the browser

Created by @simoncoudeville

At Wijs every designer knows HTML & CSS. And most of us have switched completely to designing in the browser.

We design rich, usable,
responsive HTML pages.

Hold it
Turn it
Touch it
Click it
Hover it
Scroll it
Swipe it

Responsive by default

Designing for different breakpoints is a lot easier.

In to the flow

On a webpage every element on the page influences all the elements that come after it.

In photoshop...

* { position: absolute !important; }

Technology has moved on

CSS and browsers can do everything we used to dream of.

“Real webdesigners write code.
Always have, always will.”

Jeffrey Zeldman

Webdesign = CSS + HTML

And a bit of javascript...

But Don't ask me to write a a customisable javascript slideshow like this reveal.js.

Ok, but how?

Make your life easy.

Preprocessors

  • @import _partial.scss for maintainability
  • $variable for returning settings
  • @include for reusable declarations
  • %extends for sharing properties
  • …

Working configured setup

  • HTML boilerplate
  • LESS/SASS files
  • Javascript

Build tools

Livereload, Browsersync

Or live edit with takana.

Make sure all this works and keep improving it. Make your workflow as easy as possible. So you just have to start it up and start designing.

Don't know how? Ask someone who does, like a frontend-developer. Figure it out together.

Frameworks?

Use pieces of other frameworks that work good. Don't reinvent the wheel.

Every project is a custom framework of it's own.

Save and reuse snippets, patterns, scripts from other projects.

Design workflow

Define the basic stuff

Colors

Typography

Margins

Gridgutters

Building a color palette

$alpha-color: #22313F;
$alpha-bg-color: hsl(hue($alpha-color),20,15);
$alpha-text-color: hsl(hue($alpha-color),10,60);
$beta-text-color: hsl(hue($alpha-color),10,80);
“We’re not designing pages, we’re designing systems of components.”

Stephen Hay

Atomic design by Brad Frost

Input fields

buttons

Media-types

…

Now if you start combining elements,
they will allready look good.

Modules

I like to start with the header, logo, navigation, searchbar and the doormat. The stuff that's the same for most pages.

Every part for the necessary breakpoints.

Grid systems for quickly creating responsive layouts.

<article class="medium-6 large-3 col">…
<article class="medium-6 large-3 col">…
<article class="medium-6 large-3 col">…
<article class="medium-6 large-3 col">…

Design experiments

Layers & layer groups

_partial.scss = layer group

Use comments to toggle visisbility

// @import "modules/header";
@import "modules/header-2";
@import "modules/header-search";
@import "modules/breadcrumb";
// @import "modules/breadcrumb-2";
// @import "modules/site-nav";
@import "modules/site-nav-2";
// @import "modules/search";
// @import "modules/search-2";
@import "modules/search-3";
@import "modules/header";
// @import "modules/header-2";
@import "modules/header-search";
@import "modules/breadcrumb";
// @import "modules/breadcrumb-2";
// @import "modules/site-nav";
@import "modules/site-nav-2";
// @import "modules/search";
// @import "modules/search-2";
@import "modules/search-3";

Code refactoring

After a while you could end up with a lot of unused code, comments. Refactoring it is a big part oft the process.

Just like you would do with a bloated photshop file.

In the end it's all about efficiency. I want to spend as much time as possible designing real stuff.

The end

Created by @simoncoudeville