Design rechtstreeks in de browser

Als webdesigners ontwerpen we pagina’s en user interfaces die je in een browser gebruikt. Moderne browsers en oudere, kleine en grote. Op een laptop aan tafel, op een tablet in de zetel of op een smartphone op straat. Het moet er goed uitzien. De browser is onze canvas.

Real webdesigners write code. Always have, always will. - Jeffrey Zeldman

Design is meer dan visuele elementen uitwerken. We schrijven ook code. HTML om de structuur vast te leggen, CSS voor de stijl. Dit alles in combinatie met javascript voor animaties of interactieve elementen. Vroeger gebruikte een designer vooral Photoshop om daarna de mockup door te spelen aan een front-end developer. Daar waren heel wat nadelen aan verbonden. Nu werken we sneller en staat de basiscode ter ondersteuning van het ontwerp.

De voordelen van designen in de browser

Into the flow

Het grootste voordeel is dat elk element in de flow van het document zit. Daardoor oefent het invloed uit op andere elementen. Standaard gaat de flow van boven naar onder en van links naar rechts. Als je ergens een element aan toevoegt, schuift alles automatisch mee. Want als je in Photoshop een element ergens wil tussen plaatsen, dan moet je alles handmatig op de pixel juist verschuiven.

In CSS zou de werking van Photoshop er zo uitzien:
* {
position: absolute
}

Design is hoe het werkt

Design is ook veel meer dan hoe iets eruit ziet, het is ook hoe iets werkt en aanvoelt. Hoe intuïtief je met iets overweg kan, zoals een website, wordt voor een groot deel door design bepaald. Naar klanten toe is dit een heel groot voordeel. Je kan een link sturen en ze kunnen direct alle interacties en mogelijkheden ontdekken. Ze kunnen klikken, invullen en dingen uitproberen. We merken dat ze dan minder op de kleine ontwerp-details letten, maar meer met hoe het werkt.

Responsive design

Design in de browser geeft je de mogelijkheid om direct responsive te werken. Je kan elke toevoeging onmiddellijk testen en je bent - in tegenstelling tot mockups in Photoshop - niet gebonden aan pixels.
Pixels are dead. Alles is relatief

Controle behouden

Als designer was het vroeger niet gemakkelijk om je mockup door te spelen naar een front-ender, in de hoop dat hij respect zou hebben voor jouw ontwerp. Hoewel je je collega’s vertrouwt, toch was het lastig dat je de beslissingen niet kon nemen op bepaalde breaking points. Dankzij designen in de browser kan je langer de controle bewaken over je project.

Herbruikbare code

De initiële code mag vuil zijn en hoeft helemaal niet DRY te zijn (Don’t Repeat Yourself). Er is tenminste al een basis om op verder te werken. Het is een koud kunstje voor een front-end developer om ermee aan te slag te gaan en het te verfijnen. Dit zelf doen kan ook wel een leuke afwisseling zijn om designer-block te vermijden. Het kan bovendien tot inzichten leiden en “AHA!-momenten”.

Systeem ontwikkelen, naast visuals ontwerpen

Een online omgeving is een systeem. Het bestaat uit kleine blokjes die allemaal samen het grotere geheel vormen. Je bent je meer bewust van dat systeem door te designen met code. Je ziet ook meer onderlinge gelijkenissen. Na verloop van tijd heb je heel wat kleinere componenten die je kan combineren tot nieuwe modules.

Geen tijdverlies meer door photoshop

Photoshop is niet nutteloos geworden, maar je kan veel sneller en efficiënter werken in de browser. Stel dat je komt vast te zitten met de code, kan je nog altijd naar Photoshop switchen om iets visueel uit te werken en dan doe je weer voort in de browser.

Animatie en interactie

Tijdens het design interacties en animaties kunnen bekijken is onvervangbaar. Bij het ontwerpen van een statische mockup moet je je mentaal inbeelden hoe iets er zal uitzien. Nu kan je dit ontwerpen en onmiddellijk uittesten. Dankzij de verschillende modules die je kan gebruiken, doe je de basis van design veel sneller. Daardoor heb je meer tijd over om aan animaties en interactieve elementen te werken.

Get comfy

Om te beginnen met een nieuwe design in de browser is een goed geconfigureerde omgeving essentieel. Als je bij de start van elk project daar opnieuw moet over nadenken, verlies je veel tijd en energie. Gebruik liefst software waar je graag mee werkt, maar vooral, software die je tot in de diepste vezels kent. Shortcuts zijn de sleutel tot snel en efficiënt én kwalitatief design.

• Start alvast met een up to date boilerplate. Een map met een aantal default-files waarmee je ieder project kan starten en waarvan je weet dat ze werken.
• Een goede text-editor is een grote hulp. Kies voor een editor met auto-completion zodat je veelgebruikte code snel kan invoeren tijdens het designen in de browser.
• Onderschat ook de waarde niet van degelijke frameworks zoals Bootstrap en Foundation. Je kan zonder, maar het versnelt het proces aanzienlijk. Het kan ook interessant zijn om een eigen framework op te bouwen. Telkens wanneer je een design opdracht afwerkt, kan je kijken welke elementen je voor volgende opdrachten nog zou kunnen gebruiken. Zet die elementen samen en je bouwt je eigen framework. Zoiets kan bijvoorbeeld een formulier zijn.
• Livereload is onmisbaar geworden. Als je met twee schermen werkt, kan je op de ene code schrijven en op de andere het resultaat direct zien, zonder te moeten veranderen van scherm of refreshen van je browser. Je kan zelfs met meerdere devices werken en daar telkens auto-refresh hebben. Voorbeelden van tools hiervoor zijn Hammer en Gulp.
• Een precompressor zoals Sass of Less al overwogen? Zeker gebruiken. Het maakt je leven gemakkelijker om CSS te schrijven.
• Via GitHub kan je gemakkelijk verschillende fases afzonderlijk als branches opslaan. Kom je op een punt waarvan je denkt dat je er een boeltje van gemaakt hebt, kan je snel switchen naar vorige versies of elementen gaan ophalen die je misschien verwijderd hebt uit je huidige versie.
• Code-layers zijn perfect om meerdere versies van een ontwerp bij elkaar te hebben en snel te kunnen switchen van de ene naar de andere. Zo zie je snel welke de beste is, zonder telkens te moeten opnieuws schrijven. De screenshot hieronder illustreert hoe dit in zijn werk gaat.

Of je in browser design tools kan gebruiken?

Design tools voor design in de browser zijn ideaal voor wie niet in het vak zit en gewoon snel iets wil ontwikkelen. Je hoeft weinig technische kennis te hebben om dit te gebruiken. Maar als je samenwerkt met front-enders of programmeurs, werk je beter direct in de browser.