Webdesign in the browser

View Github Repository Open presentation in a new window

simoncoudeville

See all presentation from simoncoudeville

Webdesign in the browser

0 2

artevelde-wijs

On Github simoncoudeville / artevelde-wijs

Webdesign in the browser

Created by @simoncoudeville

Wie hier designt websites volledig in photoshop, sketch of een ander grafisch programma?

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

Bij Wijs kan elke designer HTML en CSS. Voorbeelden van websites waar geen enkel layer is aan te pas gekomen.

We design rich, usable, responsive HTML pages.

Wij leveren echte bruikbare, responsive HTML-pagina's.

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

Je kan het vasthouden, draaien, er op duwen, klikken of hoveren. Zeker naar klanten toe is dat een groot voordeel. Geef ze een link waarnaar ze kunnen surfen met een smartphone of tablet. Of geef ze gewoon een tablet met Om de 1 of andere manier zijn ze dan minder bezig met details en meer met hoe het werkt. Of bekijken ze het meer vanuit een normaal eindgebruikers-standpunt.

Responsive by default

Designing for different breakpoints is a lot easier.

De meeste websites die we tegenwoordig maken zijn responsive. Het is het handig om de onderdelen van een website direct voor alle breakpoints aan te pakken. Je ziet direct wanneer iets niet meer werkt, leesbaar is, te groot of te klein wordt.

In to the flow

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

In photoshop...

Op een HTML-pagina zit elk element in de flow van het document en oefent invloed uit op andere elementen.
* { position: absolute !important; } Is het alsof je met CSS alles op position absolute zou zetten. Met een dikke vete important erachter, helemaal onderaan in je stylesheet. Zo is het dus om in photoshop te designen.

Technology has moved on

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

Modern browsers kunnen alles wat photoshop of sketch kan en meer. Er zijn inderdaad oudere browser die minder kunnen maar dat weten we al lang. En er zijn altijd workarounds. In deze fase speelt dat nog geen rol. Wie heeft er nog the sliding door technique gebruikt om buttons met afgeronde hoekjes te maken? Dat is een goed voorbeeld waarom photoshop vroeger nodig was.
“Real webdesigners write code. Always have, always will.”

Jeffrey Zeldman

Dit is een quote van Jeffrey Zeldman. Om wat gewicht in de schaal te leggen.

Webdesign = CSS + HTML

And a bit of javascript...

Uiteindelijk is CSS & HTML webdesign. Hoeveel mockups je ook maakt met welke tool dan ook, ze moeten allemaal omgezet worden. En eigenlijk een voor stuk opnieuw gedesigned worden. Ik deed dat sowieso al liever zelf. En uiteindelijk heb ik die stap overgeslaan.

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

Er is nog genoeg frontend werk buiten CSS. Deze presentatie bijvoorbeeld is een knap staaltje frontend werk. Maar ik was geen fan van het design. Dus heb ik het een beetje naar mijn hand gezet.

Ok, but how?

Make your life easy.

Het komt er op neer om je leven zo makkelijk mogelijk te maken

Preprocessors

  • @import _partial.scss for maintainability
  • $variable for returning settings
  • @include for reusable declarations
  • %extends for sharing properties
  • …
Af en toe komen er eens zaken uit waarvan je dacht, hoe heb ik ooit zonder gekunnen? aparte elementen in aparte files op te delen -> onderhoudbaar variabelen bijhouden bij zodat je ze maar 1 keer moet aanpassen Gebruik includes voor terugkerende patronen, zoals een horizontale navigatie Extend elementen voor gedeelde properties, zoals een dropshadow Te veel om op te noemen maar dat zijn de voornaamste vind ik.

Working configured setup

  • HTML boilerplate
  • LESS/SASS files
  • Javascript
Zorg er voor dat je een werkende setup als basis hebt. Een degelijke standaard HTML boilerplate Een goed ingedeelde Less/Sass structuur En een javascript-file waar je direct in kunt beginnen.

Build tools

Build tools zoals Hammer of Gulp zijn onmisbaar geworden. Ze compilen je CSS, je HTML-includes zodat je maar op 1 plaats zaken moet aanpassen. En nog zoveel meer. Hammer is toegankelijker, omdat het een GUI heeft. Gulp is natuurlijk veel uitgebreider.

Livereload, Browsersync

Or live edit with takana.

Zeker in samenwerking met Livereload en browsersync. Takana update je CSS terwijl je typt. Straks een demo

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.

Zorg ervoor dat je daar niet meer moet over nadenken. Clone of download de laatste versie. Start het op en begin met designen. Als je niet weet hoe? Vraag het iemand of maak het samen. Bijvoorbeeld met een frontend-dev. Ik ben daar zelf ook niet zo goed in. Maar eens het werkt is het geweldig.

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.

Ik ben geen fan van uitgebreide frameworks zoals bootstrap of Zurb. Sommige zaken zijn superhandig zoals de javascript. Modals, dropdowns, enzovoort, superhandig. Het zou dom zijn om daar geen gebruik van te maken. Maar design-stuff zoals typography, margins, breakpoints doe je best zelf. Elk project is z'n eigen framework. We zijn zelf slim genoeg om eigen handige snippets, patronen en scripts te schrijven. Spaar ze en hergebruik ze.

Design workflow

Voila, eens dat dit allemaal goed werkt kan je beginnen designen.

Define the basic stuff

Begin met de basis.

Colors

Typography

Margins

Gridgutters

Zaken zoals kleuren, typography, margins, het grid. Maak dit zo gemakkelijk mogelijk. Zodat je het later goed kan hergebruiken.

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); Elk project heeft een aantal basiskleuren. Op basis van die kleuren, tekstkleur, achtergrondkleuren bepalen die bij elkaar aansluiten met kleurfuncties. De HSL functie is super. In je settings.scss kan je zo een kleurenpalet bouwen.
“We’re not designing pages, we’re designing systems of components.”

Stephen Hay

Daarna kan je gaan kijken naar veelvoorkomende componenten. puzelstukjes die samen passen. Die vormen samen een design systeem. In plaats van pagina's ontwerpen we een design systeem met allerlei componenten, puzelstukjes die samen passen.

Atomic design by Brad Frost

Brad Frost vat het mooi samen in zijn artikel atomic design.

Input fields

buttons

Media-types

…

En alles wat veel voorkomt in een project. 1 van de eerste dingen die ik voor delijn.be ontworpen heb zijn de lijstjes. Dit komt zo veel voor op de site dat het logisch is om dat eerst te doen. Header en navigatie gingen wel in orde komen dacht ik.

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

En als je nu elementen begint toe te passen op pagina's zien ze er al goed uit. Dan kan je beginnen verfijnen.

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.

Ik start dan graag met de header, logo, navigatie, search en bijvoorbeeld de doormat. Eigenlijk de zaken die voor alle pagina's hetzelfde zijn.

Grid systems for quickly creating responsive layouts.

Een uitgebreid grid systeem is handig om snel layoutmogelijkheden te verkennen.
<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">… Ik gebruik graag voorgedefineerde classes. Als die niet volstaan kan je er altijd bijmaken of zelf meer

Design experiments

Wat ik vroeger deed was een stuk van de interface ontwerpen, zoals de header/navigatie/zoekbalk. Dit zat dan in verschillende layers en layer groups Als ik content was daarvan, een kopie maken en nog eens iets anders proberen.

Layers & layer groups

Wat ik vroeger deed was een stuk van de interface ontwerpen, zoals de header/navigatie/zoekbalk. Dit zat dan in verschillende layers en layer groups Als ik content was daarvan, een kopie maken en nog eens iets anders proberen.

_partial.scss = layer group

Use comments to toggle visisbility

Je kan een partial die je inlaad in de globale CSS, zien als een layer group.
// @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"; Hierin staan de verschillende modules. En eigenlijk kan je die bekijken als layer-groups. En ik doe nu eigenlijk juist hetzelfde. Ik design een module in een aparte scss file. En daarvan maak ik kopies en alternatieve versies. Degene in comments zijn niet zichtbaar. Zo kan je ook heel makkelijk switchen.
@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"; Hierin staan de verschillende modules. En eigenlijk kan je die bekijken als layer-groups. En ik doe nu eigenlijk juist hetzelfde. Ik design een module in een aparte scss file. En daarvan maak ik kopies en alternatieve versies. Degene in comments zijn niet zichtbaar. Zo kan je makkelijk switchen.

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.

Voor mij gaat het vooral over efficiëntie. En daarmee bedoel ik niet om sneller gedaan te hebben. Ik wil zo veel mogelijk tijd spenderen aan het echte design werk.

The end

Created by @simoncoudeville Voila, hopelijk vonden jullie het interessant. Zijn er nog vragen, opmerkingen, vervloekingen?