Van Photoshop naar website

Van Photoshop naar website

1214 woorden

Het aantal websites groeit. Het belang van het gestructureerd opzetten van websites wordt dus steeds groter.

← terug

Over gestructureerd werken en luisteren naar je code.

Begin oktober ben ik naar de Fronteers 2013 conferentie geweest. Een congres dat gaat over mijn vakgebied: frontend development.

Onder de vele goede presentaties van onder andere Bruce Lawson, Robert Jan Verkade en Peter van der Zee was er 1 presentatie die mij goed is bijgebleven; de presentatie van Harry Roberts (@csswizardry). Hij had in zijn presentatie een aantal goede opmerkingen over hoe je een (Photoshop) ontwerp zou moeten vertalen naar een website.

De presentatie van Harry Roberts vormt de basis voor dit artikel, in combinatie met mijn eigen ervaringen.


Jargon

In dit artikel gebruik ik wat simpele vaktaal. De meest voorkomende:

  • Photoshop: Het meest gebruikte beeldbewerkingsprogramma van software maker Adobe;
  • CSS: Cascading Style Sheets - het stijlblad van de website waarin layout, lettertypen en kleuren worden bepaald;
  • HTML: Hyper Text Markup Language - de sjabloon taal van het internet waarin de inhoud van een pagina wordt geschreven;

Het aantal websites groeit

Tegenwoordig is een website een essentieel onderdeel van de bedrijfsvoering van veel bedrijven. Bedrijven die er nog geen hebben zijn vaak bezig om er een te laten ontwikkelen. Bedrijven die er al een hebben zijn bezig met toevoegingen en uitbreidingen.

Het belang van het gestructureerd opzetten van websites wordt dus steeds groter. Een website is niet langer een statisch visitekaartje, maar een interactief communicatie middel tussen het bedrijf en haar klanten.

Aantal websites in miljoenen van 1995 tot 2013

(Bron: Netcraft webserver survey)

Het ontwikkel proces van een website

Het traject van de ontwikkeling van een website verloopt vaak als volgt:

  1. Klant zoekt een website ontwikkelaar en neemt contact op
  2. Wensen van de klant worden in kaart gebracht
  3. Website ontwikkelaar geeft een prijs af
  4. Klant geeft de opdracht
  5. Ontwerpfase wordt gestart
  6. Goedkeuring klant
  7. Ontwikkeling fase wordt gestart
  8. Goedkeuring klant
  9. Oplevering

Hoewel het goed is om als technisch web ontwikkelaar bij het volledige traject betrokken te zijn, wordt meestal bij stap 5 t/m 9 de web ontwikkelaar pas ingeschakeld. Op die stappen wil ik inzoomen.

Van Photoshop naar website

Een Photoshop ontwerp is geen contract

Het ontwerp wordt meestal al gemaakt als nog niet alle informatie voor handen is. De teksten, de pagina’s en het beeldmateriaal kunnen allemaal nog later in het proces van het project nog wijzigen. Het ontwerp communiceert het gevoel, de globale layout en opmaak van de website. Niet hoe het er uiteindelijk uit moet zien.

Het doel van een Photoshop bestand is om een beeld te geven van het totale ontwerp.

Alles is te maken, maar is dat ook echt nodig?

Nagenoeg alles is te maken. Maar dat betekent niet dat we het moeten maken. Lange pagina’s met veel effecten en bewegende elementen zijn misschien leuk, maar brengen problemen met zich mee zoals: beperkte browser ondersteuning, moeilijk in onderhoud en een trage gebruikservaring bij het scrollen.

Omdat het kan, wil niet zeggen we het moeten doen.

Een vet ontwerp dat 20 seconden duurt om in te laden…

… is geen bruikbaar ontwerp. Het ontwerp zelf kan misschien erg mooi zijn, maar niemand gaat zo lang wachten voor dat de pagina is ingeladen. De gebruiker verlaat de website nog voor dat het mooie ontwerp wordt getoond.

Gebruikers zijn erg ongeduldig; prestatie en snelheid zijn zeer belangrijk.

Wat kan je als ontwikkelaar/vormgever doen?

Normaliseer het ontwerp

  • Zoek naar herhaling
  • Bespeur mogelijke herhaling
  • Voeg dingen samen
  • Maak het herbruikbaar

De regels van een ontwerp

Een goed ontwerp is gebaseerd op regels. Regels zoals de lettergrootte van de koppen. De ruimte onder de koppen. De regelafstand van de tekst. Als je van deze regels afwijkt ‘breekt’ het ontwerp. De balans tussen de elementen raakt verloren.

Hoe meer uitzonderingen je toevoegt op de basis regels, hoe onoverzichtelijker je code wordt en hoe moeilijker het is aan te passen bij onderhoud.

Webdesign is 95% typografie dus is het wijs om de standaard tekst de basis van je ontwerp te laten zijn. Begin met het opzetten van de standaard tekst en de structuur van de koppen en de rest vloeit daar uit voort.

Gebruik een tekst opmaak programma, zoals bijvoorbeeld Typecast.

Gebruik vaste maten

Maak gebruik van vaste maat eenheden. Gebruik miniscuul, klein, normaal, groot en reusachtig als basis en koppel hier vaste waarden aan: 0,25x 0,50x 1x 2x en 4x. Als alle elementen in deze vaste verdeling worden weggezet is het ontwerp in proportie.

Voeg elementen samen

Ruimte tussen elementen die maar 1 pixel afwijken kun je beter samen voegen.

/* Voor */

body { font-size: 16px; }
p { font-size: 17px; }
address { font-size: 15px; }

/* Na */

body,p,address { font-size: 16px; }

Het 2e voorbeeld is ~200% kleiner en zal ‘2 keer zo snel’ worden ingeladen.

Het visuele verschil voor de gebruiker is nauwelijks merkbaar. Het verschil in snelheid wel.

Vals spelen

Bij elk element die je uit een Photoshop bestand haalt, moet je je afvragen of dit met CSS kan worden nagemaakt. Het schrijven van 2 regels tekst is eenvoudiger dan het uitsnijden van een los element uit Photoshop, daarna te optimaliseren voor gebruik op een website, plaatsen in de afbeelding map en koppelen in de template of stylesheet.

Het ontwerp van een vormgever kan worden aangepast als de website er sneller van wordt doordat:

  • er minder code hoeft worden geschreven;
  • er minder afbeeldingen moeten worden opgehaald van de server.

Laat me dit toelichten met een praktijk voorbeeld.

Voor een website moest er onder het kopje een lijn van 1 pixel worden geplaatst met een verloop erin. Dit is met standaard CSS niet eenvoudig te doen. Ik heb de afbeelding met de verloop erin vervangen door een rand van 1 pixel. Dat is wel eenvoudig met CSS te maken.

Voorbeeld met pixel border

Afbeelding van de homepage van Steins Bisschop en Schepel advocaten. De border fade is vervangen door een 1 pixel lijn.

Als het namaken van een element vanuit een ontwerp onnodig moeilijk is, maak het dan niet.

Tot slot

Websites bestaan veelal uit tekst en afbeeldingen. Een website is opgebouwd uit HTML code en niet uit statische afbeeldingen zoals bij drukwerk. De flexibiliteit van HTML code zorgt er voor dat de informatie van websites op alle apparaten en in allerlei verschillende formaten beschikbaar is. Er is dus altijd een conversie nodig van een statisch ontwerp, naar een interactieve website. Soms moeten er visuele concessies worden gedaan, om de website code beheersbaar en flexibel te houden. Als je dit doet binnen de regels van het ontwerp, heeft niemand hier problemen mee.

Een ontwikkelaar maakt geen 1 op 1 vertaling van een ontwerp. Een ontwikkelaar maakt een website.


De ontwikkeling van een website is een proces dat een goede samenwerking tussen vormgevers en ontwikkelaars vereist. Hiervoor heb ik een eenvoudig tekst document opgezet.

Rutger Laurman
~ webontwikkelaar en adviseur

Freelance front-end webontwikkelaar met voorliefde voor gebruiksvriendelijkheid en interfaceontwerp. Samen met freelancers en internet bureau's uit regio Utrecht maak ik al meer dan 15 jaar websites en webapplicaties.