Grafisch design of html code?

Een aantal bezoekers van html-site zal zichzelf geleerd hebben om een website te maken met html code. Een andere groep bezoekers zal een website eerst maken met bijvoorbeeld photoshop en dan het grafische design slicen naar code. Voor beiden is wat te zeggen, maar code schrijven is beter dan slicen, waarom?

Grafisch designen

Grafisch designen is vooral gericht op hoe iets er uit ziet. Het visuele aspect van de site is de belangrijkste vereiste. Er wordt door middel van beeld iets gecommuniceerd.

Website is meer dan beeld

Een website is meer dan beelden. Een goede website is interactief en leesbaar voor iedereen. Tekst lezen is een visueel aspect voor ziende mensen, maar voor blinden is lezen een auditief gebeuren.

Verschillende wensen

Bezoekers hebben verschillende wensen. De een gebruikt graag een groter lettertype, de ander juist een kleiner. Wanneer je je dus alleen maar toelegt op de grafische kant van een website, ga je dus niet in op de wens van een groep gebruikers om zaken aan te passen aan hun wensen.

Grafische site slicen

Wanneer je een grafische opzet gaat omzetten naar code, slicen genoemd, dan maak je van de site allemaal kleine plaatjes. Deze plaatjes moeten allemaal op exact de juiste plek staan. Wanneer je ook maar een verandering doorvoert, gaat dat vaak ten koste van de layout. Daarnaast is de informatie die in deze plaatjes staat niet beschikbaar voor zoekmachines en dit gaat dus ten koste van de vindbaarheid.

Code schrijven

Een mooi design maken voor een website is een goede zaak, maar dit design omzetten in flexibele en goede code is een tweede. Zaak is om veel sites te bouwen met behulp van html. Op onze site valt hier veel over te leren.

8 Reacties

  1. Ik ben webdesigner/webdeveloper en ben het er helemaal niet mee eens. Eerst maak je een design of meerdere designs om te overleggen naar de klant. Een dergelijk design is een impressie van hoe de site er in een specifieke situatie uitziet dat de daadwerkelijke site flexibel is is logisch. Zonder te designen heb je overigens helemaal geen afbeeldingen, waar zouden die dan vandaan moeten komen (of worden die ergens geript)? Als iemand een website wil hebben wil hij een bepaalde boodschap overdragen, dat gebeurt behalve door tekst ook door de eerste indruk (grafische impressie). Dat je een design sliced is juist omdat je geen pixel to pixel conversie maakt naar HTML, anders had je immers je hele design wel als background kunnen gebruiken. Het slicen gebeurt juist zodat je de site flexibel kan implementeren, dat het er anders uitziet afhankelijk van de instellingen, bv. de resolutie. Daarnaast is het ook niet zo dat plaatjes niet toegankelijk zouden zijn het is immers verplicht om die van alternatieve tekst te voorzien voor wie de weergave van afbeeldingen niet aan heeft staan (m.n. bots en mensen met visuele beperkingen). Al met al is het grafisch ontwerp een belangrijk onderdeel van het proces. Het maken van een ontwerp doet natuurlijk niets af aan good practice bij het implementeren ervan. Als je je artikel zou herschrijven voor WYSIWYG designers i.p.v. photoshoppers is er al veel meer voor te zeggen. WYSIWYG (grafische implementatie) gaat namelijk wel voorbij aan veel semantische informatie in HTML code.

  2. ik ben het er ook niet mee eens, ik ben amateur in webdesign maar ik maak altijd eerst ontwerp in PS (of iets dergelijks) en die ga ik dan slicen dan zoek ik plaatjes die ook vervangen kunnen worden door tekst of gewoon codes.

    maar mijn site is ook niks voor blinde/slechtziende mensen dus laat ik het design zeker het belangrijkste zijn

  3. Het bouwen van een site bestaat uit verschillende disciplines.
    – Een Informatie architect zoekt uit welke informatie hoe en wanneer moet worden aangeboden.
    – Een designer ontwerpt de grafische vormgeving. Als hij/zij het vak verstaat, met gebruikersgemak in het achterhoofd.
    – De paginabouwer vertaalt het grafisch ontwerp en de informatie architectuur naar HTML en CSS.
    – Een scriptschrijver ontwikkeld de nodige scripts, die voor de nodige interactie en logistiek zorgdragen.

    Deze verschillende taken hebben ieder hun eigen vakkennis nodig. Een goede designer heeft zelden interesse in de code, en goede codeerders zijn zelden goede vormgevers.
    Je heb dus eigenlijk al minstens twee mensen nodig om een site te bouwen.
    Natuurlijk zullen bovengenoemde personen als een team moeten samenwerken. De designer zal moeten begrijpen dat sommige van zijn ideeen op het web niet werken. Bijvoorbeeld de beperkte hoeveelheid fonts die bruikbaar zijn. De codeerder wil een nette code afleveren, maar zal moeten begrijpen dat het visueel aspect van een site zeer belangrijk is voor het succes hiervan.

    Ik van de strijd tussen designers en codeerders dan ook een verspilling van tijd. Wil je een goede site bouwen dan zullen ze naar elkaar moeten luisteren en van elkaar moeten leren.

  4. Even een reactie,

    Ik geef in het artikel aan dat ik geen voorstander van slicen ben, daarmee wil ik niet zeggen dat je geen mooi ontwerp met photoshop kunt maken, integendeel. Zoals Ton van Lankveld al aangeeft gaat het meer om het samenwerken. Met behulp van een mooi design kun je als codeerder een uitstekende website maken. Helemaal eens met het gegeven dat een mooi design onontbeerlijk is voor een goede website. Goede code is dit ook en een combinatie van beiden maakt een website echt sterk. Goede aanvullingen trouwens deze reacties!

  5. Zoals dikwijls ligt de waarheid in het midden. Het ene sluit het andere niet uit.

    Het kunnen tonen van een ontwerp aan de klant is echt wel must.

    En ja… ook ik maak eerst een ontwerp in Photoshop, maar ik ga echter niet slicen in PS zelf. Na de PS-fase ga ik immers aan de slag in broncode om overbodige html (wat je met zuiver slicen toch dikwijls hebt) te voorkomen. Zaken van het ontwerp die ik kan coden, worden gewoon in code nagemaakt (bijv. een gekleurd vlak), andere zaken zijn dan weer een pic die onderdeel zijn van het grafische ontwerp.

  6. Ik ben het eens met Ton van Lankveld. Het gaat om de samenwerking. Ik ken iets andere disciplines: eerst het grafisch ontwerp. Die wordt vervolgens uitgewerkt naar de verschillende pagina’s op een website. De 2e is het omzetten naar een webpagina. Daarin wordt gesliced, maar de HTML code wordt zoals Zino ook zegt helemaal zelf geschreven omdat PS code vies is. Hier wordt ook JavaScript voor het grafische deel ingevoegd. Vervolgens de 3e discipline zijn de developers, die vooral de website server-side coderen. Maar ook JS voor AJAX bijv (wat eigenlijk ook op server-side neerkomt).

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *