071 - 576 13 23

Aanleverspecificaties

voor externe vormgevers

Download de checklist!
Wij gebruiken hem zelf ook ;-)

SWIS maakt websites. We verzorgen de technische implementatie en ontwerpen ze vaak ook zelf. Maar niet altijd. In die gevallen dat anderen de website ontwerpen en aanleveren is het helder een paar afspraken te hebben die er voor zorgen dat de conversie van vormgeving naar uiteindelijke website gemakkelijk verloopt. Waarom? Een website is geen brochure. Het voornaamste verschil tussen ontwerpen voor print of web is dan ook rekening houden met de verschillende beeldschermresoluties en de (on)mogelijkheden van de diverse browsers.

Icoon van grid

Gebruik een grid

Gebruik een grid dat rekening houdt met diverse schermresoluties (even opletten wat er is afgesproken in de offerte!) Het (responsive) grid wat het meest gebruikt wordt is 1170.

Icoon van RGB-controls

Alles in RGB

Het RGB-model wordt gebruikt voor het beschrijven van de kleuren van bronnen die zelf licht produceren, zoals computermonitoren. Dit moet dus gebruikt worden bij het vormgeven voor het web.

Icoon van linialen

Afmetingen in pixels

Het document op 72dpi en alles in pixels: Vlakken, vormen, afbeeldingen en tekst, alles. Het web werkt met pixels, dus hebben wij als ontwikkelaars een PSD nodig waarin alles in pixels is gemaakt. Pixel perfect welteverstaan ;-)

Icoon van muis

Denk ook aan linkstijlen en mouse-overs

Hoe onderscheidt de bezoeker een link van de normale tekst? Hoe ziet een menu-item er uit als er met de muis overheen bewogen wordt. Dit willen we allemaal weten!

Icoon van PSD-bestand

Alle ontwerpen als PSD-bestand

Geen Jpeg, AI, EPS, INDD of PDF. Een PSD -bestand is het enige type dat we accepteren, omdat dit het best geschikt is voor het ontwerp-naar-code proces.

Icoon van bestanden

Beperk het aantal bestanden

Als de ontwerpen in één PSD staan, voorkomt dit verwarring over welk bestand gebruikt moet worden.

Icoon van naamgeving

Geef de bestanden een zinnige naam

Toevoegingen als nieuwer, laatste, etc. hebben meestal geen zin, omdat het waarschijnlijk is dat er nog wijzigingen in plaats gaan vinden gedurende het ontwikkelproces.

Icoon van export naar JPG

Voorbeelden van ontwerpen als JPG

Exporteer alle schermen voor web (CTRL-ALT-SHIFT-S) vanuit Photoshop, kwaliteit 100%, zonder browserkader. (Niet als pdf!)

Icoon van naamgeving lagen

Geef alle lagen een begrijpelijke naam

Maak ze zo beschrijvend mogelijk. Layer 0 copy 2 is te vaag. Goede laagnamen voorkomt verwarring en verduidelijkt in één oog opslag het hele ontwerp.

Icoon van mappen

Gebruik mappen voor verschillende secties

Dit maakt het makkelijk om in één keer verschillende gedeeltes te verbergen en tonen. Daarnaast is navigeren en wijzigen makkelijker.

Icoon van lagen

Verwijder overbodige lagen

Alle niet gebruikte lagen zijn overbodig en maken het document onoverzichtelijk. Ook maken deze het bestand onnodig groot en dit heeft nadelige invloed op de snelheid van Photoshop.

Icoon van composities

Gebruik laagcomposities (layer comps)

Dit is een goede manier om verschillende variaties binnen een ontwerp te tonen. Hierdoor zijn er minder PSD-bestanden nodig en hoeven er minder bestanden onderhouden te worden bij wijzigingen.

Icoon van vector-object

Alle vormen als pad (vector)

Rek vormen niet uit en zet ze niet om naar pixels, zonder een kopie als pad te bewaren.

Icoon van AI-bestand

Logo’s & (branding) iconen als EPS of AI

Zo kunnen we er voor zorgen dat alles altijd scherp blijft op het scherm van de bezoeker.

Icoon van beeldmateriaal

Beeldmateriaal met licentie

Afbeelding gebruikt van een stock website? Of van Google? Zorg dan dat ze zijn aangekocht inclusief de juiste licentie.

Icoon van tekst in pixels

Gebruik alleen hele pixel waardes

Voorkom dat tekst vergroot/verkleind wordt met vrij transformatie tool (Free transorm). Het heeft geen nut om decimalen te gebruiken.

Icoon van webfonts

Geschikt voor het web

Onze developers vinden het niet fijn om na te denken over een alternatief voor lettertypes die niet geschikt zijn voor het web. Zorg dus voor lettertypes die gebruikt kunnen worden op het web en dat de licentie het toe laat en betaald is!

Icoon van uitgerekte tekst

Rek tekst niet uit

Het is niet na te maken in HTML/CSS. Daarnaast kun je je afvragen of de typograaf het voor ogen had met het lettertype en de leesbaarheid ervan.