Tips voor printdesigners die toch websites willen ontwerpen
Vaak wagen printdesigners zich aan de wondere wereld van het webdesign. Alleen beseffen ze in de meeste gevallen niet de fundamentele verschillen tussen beide werelden. Bij printdesign zijn er bepaalde constanten. Een brochure, boek of magazine ziet er zo uit, met dat lettertype, die grootte en opmaak. Bij het web ligt dat anders: verschillende browsers, lettergroottes, schermresoluties,… Allemaal parameters waar je als designer weinig controle over hebt.
Dus vandaar deze tips, verzameld uit eigen frustraties bij het verwerken van enkele van die designs.
Webdesign is geen printdesign
Webdesign is een vak apart, en heeft zijn eigen karakteristieken. Het heeft dus geen enkele zin om een website eruit te laten zien als een boek, magazine, brochure of ander printproduct. Een website ziet er best van al uit als een website. Lijkt logisch, maar dat is blijkbaar al een eerste drempel voor printdesigners. Probeer er dus eerst achter te komen hoe goede websites er tegenwoordig uitzien en leer de beperkingen van HTML kennen.
Flash is passé
De printsector is toch wel eerder bekend om een vrij traag evoluerende sector te zijn. Hun technieken zijn de laatste jaren ook wel hevig gemoderniseerd, maar toch evolueert het veel minder snel dan de webdesignsector. Zo zweren nog veel printdesigners bij Flash intro’s, navigatie in Flash of zelfs volledige Flash websites.
Mijn ervaring is dat mensen zo snel mogelijk informatie willen. Ze willen geen complexe interfaces met animaties of spielereien. Vermijd elke barrière die mensen afschrikken, of verhinderen om snel hun doel te bereiken.
Flashnavigatie was misschien 5 jaar geleden trendy, maar de tijden zijn veranderd. Flash is ook tijdrovend wanneer je er navigaties of websites moet in ontwikkelen. Wat je in HTML op een 5-tal minuten kan, duurt in Flash misschien 5 uren.
Uiteraard is Flash wel voor andere toepassingen een uitstekende technologie, zoals multimediatoepassingen met video en audio, maar voor interactiviteit op websiteniveau kan je beter gebruik maken van webstandaarden zoals XHTML, CSS en Javascript.
Hou rekening met uitzonderingen
Zoals ik al zei in de inleiding moet je bij webdesign rekening houden met verschillende parameters. Je kan er dus niet van uitgaan dat wat je ontwerpt ook zo ervaren wordt door de eindgebruiker. Welke browser gebruiken ze? Gebruiken ze grotere lettergroottes voor een betere leesbaarheid? Bekijken ze de site op kleinere schermen van mobiele toestellen?
Het is een zeer abstracte wetenschap en je moet al die factoren kunnen incalculeren en proberen op te vangen. Het is dus onmogelijk om pixel perfecte designs te maken. Zeker vaste hoogtes voor tekstblokken zijn dus uit den boze.
Hou er rekening mee dat er vaak meer content op een site geplaatst wordt, dan je oorspronkelijk voorzien had.
Lettertypekeuze
Als je toch Flash gebruikt, dan zijn geschreefde en cursieve letters niet aanbevolen. Ze werken storend en zijn moeilijk leesbaar. Ook te dunne letters moet je zeker vermijden. Een bijkomend nadeel van Flash is dat de tekst niet kan vergroot worden, dus dan is de lettertypekeuze zeker belangrijk.
Voor HTML kan je geen speciale lettertypes gebruiken en dien je gebruik te maken van een van de standaardlettertypes. Voor kortere tekstelementen kan je eventueel wel van image replacement gebruik maken. Probeer in je designs ook de anti-aliasing van de letters uit te schakelen, omdat het dan een realistischere weergave geeft van het eindproduct.
Als je gebruik maakt van exotische lettertypes, zorg dan dat de lettertypes meegeleverd worden bij het design. Let er ook op dat ze niet alleen op Mac werken, want in de webwereld wordt in tegenstelling tot de printsector veel gebruik gemaakt van PC’s.
Het is ook niet nodig om exact dezelfde fonts te gebruiken in je offline campagnemateriaal als op de website. Zo kan je even goed in dezelfde stijl blijven met andere fonts.
Softwarepakketten
De verleiding is natuurlijk groot om in je vertrouwde softwarepakket te ontwerpen, wat in de meeste gevallen InDesign zal zijn. Toch kan je beter gebruik maken van programma’s als Photoshop, of eventueel Illustrator. Dat maakt het makkelijker voor diegene die je ontwerp moeten slicen, want webdesigners gebruiken praktisch nooit Indesign. Je kan wel exporteren naar PDF, maar dat is alles behalve praktisch en zeker geen perfect bronmateriaal.
Webformulieren
Formulieren hebben een vrij standaard uitzicht over de verschillende browsers. Kom dus niet op de proppen met mooi ogende, maar onuitvoerbare designs voor formulieren.
Voorbeelden van goede webformulieren kan je vinden in de Wufoo Form Template & CSS Design gallery.
Conclusie
Uiteraard wil ik printdesigners niet in een slecht daglicht plaatsen met dit artikel, maar het is opvallend dat ze vaak niet genoeg op de hoogte zijn van de beperkingen die wij dagelijks moeten omzeilen. Als iemand van jullie nog meer tips wil geven, of ervaringen wil delen, doe maar gerust.
Reacties
“Zeker vaste hoogtes voor tekstblokken zijn dus uit den boze.”
Kan voor mij als de teksten vast staan, en de website eentalig is.
“Probeer in je designs ook de anti-aliasing van de letters uit te schakelen, omdat het dan een realistischere weergave geeft van het eindproduct.”
Moderne computers kunnen tekst ook aliasen, weetwel. Ik alias mijn tekst bewust wel, als daar reactie op komt weet ik al wat voor klant het is :D.
“Let er ook op dat ze niet alleen op Mac werken, want in de webwereld wordt in tegenstelling tot de print sector veel gebruik gemaakt van PC’s.”
Dit geldt dan voor de programmeurs, want de meeste webdesigners die ik ken werken toch op Mac. Maar toch terecht punt.
@Wolf: En wat als de fontgrootte door de gebruiker geschaald wordt? Dan loop je veel kans dat je hele design breekt. Je moet gewoon flexibiliteit in je ontwerp voorzien. Toegankelijkheid staat hoog op mijn prioriteitenlijst.
Let op met tekst negatief zetten (zeker geschreefde letters). Vandaag iemand bijna z’n haar zien uittrekken om die reden.
@wolf: nog nooit heb ik een website gezien waar een bepaalde tekst tot het einde der tijden net zolang was dat hij in dat oppervlak past. Copy schrijven, die in een bepaald oppervlak moet passen is niet de juiste manier van werken. (trouwens, totally unrelated: de meeste webdesigners die ik ken werken toch op PC)
@davy: goede post. ik zou er zelf een paar ‘typische fouten en hoe die te voorkomen’ aan toegevoegd hebben:
- reken in pixels, en niet in een andere maat (ofte: photoshop is er niet alleen om foto’s te retoucheren)
- scrollen mag. mensen scrollen. al wie het tegendeel beweert is mis.
- bekijk je design ook op PC. De intensiteit/kleuren/helderheid van een Mac scherm is anders dan dat van een PC scherm (en CRT vs LCD is ook nog eens een issue)
- niet alles kan. in print kan alles (iets scheef zetten, ik zeg maar iets). html heeft technische beperkingen
Niet dat het zal helpen…
Schoenmaker, blijf bij uw leest?!
Tussen de regels ontwaar ik een soort opgekropte woede, Davy ;)
Goeie post Davy. Ik zie ook nog altijd mensen die al jaren in webdesign werken maar uit een printachtergrond komen en die nog steeds in print denken.
Enkele belangrijke verschillen:
* de resolutie en het contrast van een scherm tov papier
* de inhoud van een webpagina is niet meteen volledig zichtbaar (scrollen)
* de informatiestructuur van een webpagina en website is anders dan van een magazine, krant of andere papieren uitgave…
En geen stukken tekst onderlijnen die niet aanklikbaar zijn! Onderlijnde tekst = link.
Als je dan toch in Flash ontwerp maak dan de tekst selecteerbaar zodat ik geen contactgegevens moet beginnen overtypen maar een simpele cut & past kan doen.
Ik zweer nog steeds bij Adobe Fireworks zelfs boven Photoshop! En werk op een PC om op Internet Explorer (nog steeds de meest gebruikte browser) te kunnen testen. Uiteraard zijn er nog tal van andere voordelen bij een PC ;)
[...] geeft enkele tips, tips voor de print-designer die zich waagt aan web design. Ikzelf werk in een omgeving die voor 99% print is. Die andere 1% is [...]
Webdesign gaat over loslaten, iets waar de meeste ontwerpers, die toch wel controlefreaks zijn, enorme moeite mee hebben. Improvisatie design noem ik het. Je ontwerpen moeten desdanig robuust zijn dat een gegeven pagina binnen een ontwerp er goed moet uitzien met 3 of 7 paragrafen tekst, met of zonder foto bij de inhoud, etc…
Ontwerpen voor print heeft ook wel zijn grenzen maar die liggen qua puur ontwerptechnische aspecten veel ruimer als bij ontwerpen voor web.
Een uitstekend boekje dat kan helpen je referentiekader als designer verruimen is “Improvisational Design Continuous, Responsive Digital Communication” van S. Ishizaki. Try it, it’s a twister.
@vincent: Calibreer het scherm van de PC of Mac waar je op ontwerpt. Calibreren geeft je een gemiddelde beeld weergave.
Er waren blijkbaar een aantal comments bij de spam terecht gekomen.
@Roel: Soms word ik wel gefrustreerd hierdoor ja. Tegen je principes werken haat ik, maar soms kan je niet aan de eisen van de klant onderuit. Gelukkig valt dat niet vaak voor.
[...] online drukker. Drukkers zijn ’slow movers’, als het aankomt op innovatie, dat weet iedereen. Toch zit er enorm veel beweging in de, overigens bijzonder boeiende, [...]
Flash is passé? Wat een dooddoener die eigenlijk geen argument is. Flash laat ons toe om zeer innovatieve interfaces te bouwen. Als je eens kijkt naar het portfolio van Firstbornmultimedia.com dan weet je het wel.
Het bouwen van een flash site duurt niet noodzakelijk langer dan een html/css site. In tegendeel. Om een relatief gelijk ontwerp te hebben op de verschillende platvorm- en browsercombinaties kan je heel lang zitten tunen met css. Met Flash ben je gewoon 100% zeker van de layout.
@Jeroen: Een ervaren HTML’er die goed overweg kan met CSS en die bovendien op de hoogte is van de verschillende beperkingen van browsers, kan een HTML website relatief snel slicen.
Je weet echter niet hoe een gebruiker je website bezoekt (mobiel, via schermlezer, op klein formaat)… Allemaal beperkingen waar Flash geen kant-en-klare oplossing voor heeft. Je kan wel HTML content voorzien naast de Flash content, maar dat is dan dubbel werk.
Flash biedt misschien wel extra interactiviteit, maar ik vind die persoonlijk vaak over-the-top en de dingen die wel een verrijking zijn kunnen vaak ook via Javascript.