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
Colors
Typography
Margins
Gridgutters
$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-2";
@import "modules/header-search";
@import "modules/breadcrumb";
@import "modules/site-nav-2";
@import "modules/search-3";
@import "modules/header";
@import "modules/header-search";
@import "modules/breadcrumb";
@import "modules/site-nav-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