Deze post is gearchiveerd.
7 augustus 2014 - Story
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.
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.
Into the flow
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.
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.
Of je in browser design tools kan gebruiken?