Het ontwerpen van een website, webwinkel of andere digitale media voor het web is met de komst van responsive design op z’n zachtst gezegd een stuk uitdagender geworden. Waar staan we anno 2014 qua webdesign software?
Hadden we tot voor kort te maken met een paar browsers, een Windows of een Mac desktopcomputer en grofweg een tweetal resoluties, sinds een aantal jaar moeten we serieus rekening houden met nog steeds een fiks aantal browser(versies), meerdere operating systemen (Windows, Mac, iOS, Android) en vooral een legio aan devices, resoluties en pixeldensiteiten. En de stroom aan nieuwe apparaten en resoluties groeit nog elke dag. Zo hebben veel Mac apparaten een pixeldensiteit die twee keer hoger is (retinascherm) dan het gemiddelde beeldscherm en de nieuwe generatie mobile devices zoals HTC Butterfly, Nexus 5 en Samsung Galaxy S4 zelfs al drie keer de pixel ratio. Veel zaken om rekening mee te houden.
Welke software gebruiken we bij het ontwerpen voor het web? Photoshop als imageditor in combinatie met het handmatig schrijven van frontend code (html, css, jquery) is nog steeds een standaard en biedt veel controle, maar vergt tevens enorm veel kennis, tijd en ervaring. Maar Photoshop is niet zo goed in een responsive ontwerptraject aangezien je niet direct voor meerdere resoluties kunt ontwerpen. Inmiddels zijn er verschillende nieuwe softwaretools op de markt om het (responsive) ontwerpproces wat eenvoudiger te maken. Het doel is niet zozeer om al deze softwarepakketten te bespreken en reviewen (hier is denk ik voldoende online over te vinden), maar om een overzicht te bieden wat er zoal op de markt is.
Webflow
Deze online webeditor is bedoeld om responsive websites mee te ontwerpen. Naast standaardfuncties om te ontwerpen voor vormen, kleur, typografie en positie biedt Webflow ook css transities, Google fonts, Typekit en de mogelijkheid voor het ontwerpen van werkende formulieren. Webflow genereert redelijke html code zonder een letter code te schrijven, ideaal bij beperkte of geen html kennis. De ontwerpen worden gehost op de servers van webflow, niet op je eigen computer.
Macaw
Een redelijke nieuwkomer, pas begin dit jaar op de markt na een overweldigende start via Kickstarter. Macaw biedt de vertrouwde interface die we van beeldeditors zoals Photoshop gewend zijn en produceert automatisch semantische HTML en CSS. Ze claimen zelfs dat de code zo goed is dat het productiecode is, dit alles volledig responsive. Op dit moment is de code nog niet Mobile First, maar daar wordt aan gewerkt. Verder biedt deze tool alle opties voor vormen, kleur, typografie, Google fonts, animaties en hergebruik via componenten. Draait niet in de cloud, maar op je eigen PC.
Adobe Edge Reflow CC
Een responsive ontwerptool met eigen ontwerptools, maar tevens ook de mogelijkheid om een basisontwerp ontworpen in Photoshop direct om te zetten naar een responsive ontwerp. Je kunt je Photoshop ontwerp optimaliseren en verder ontwerpen voor verschillende devices en breakpoints. Genereert ook html en css, maar deze is meer geschikt voor previews en prototypes in plaats van productiecode.
Froont
Wederom een visuele responsive online editor, Desktop First. Draait in de cloud, niet op je PC. Ook hier alle tools voor vorm, kleur, webfonts, de mogelijkheid om styles uit Photoshop om te zetten naar css en een export voor HTML en CSS. Dit pakket heeft (zoals ze zelf zeggen) een duidelijke focus op het ontwerpproces en prototyping en niet zozeer op bruikbare productiecode. Alhoewel hun eigen site wel met Froont is gebouwd.
Adobe Edge animate
Sinds Flash niet meer breed wordt ondersteunt op meerdere devices lijkt de toekomst voor interactieve animaties richting HTML5 te gaan. Qua interface enigszins vergelijkbaar met de bekende tools als Adobe Premiere en After Effects. Ideaal voor animaties voor websites, interactieve presentaties en media-advertenties. Alhoewel HTML5 advertenties nog niet door alle mediabureaus 100% wordt ondersteund (maar daar wordt aan gewerkt).
Google Webdesigner
Het eerste deel van de productnaam klopt: het is een product van Google. Het tweede deel iets minder: de software is met name bedoeld voor het ontwerpen van (Google) (html5) advertenties en is minder geschikt om websites te ontwerpen.
Adobe Photoshop
Good old Photoshop. Initieel eigenlijk helemaal niet bedoeld voor webdesign, maar voor fotografie bewerking en is verworden tot een webdesignstandaard waarmee je elke pixel op z’n plek zet. Door de vaste formaten van een document minder geschikt voor responsive design, maar velen van ons kunnen er mee lezen en schrijven.
Adobe Illustrator
Nog steeds de standaard voor al je vectorafbeeldingen, logos, iconen etc. Zeker nu Scalable Vector Graphics(SVG) zo langzamerhand door bijna alle browsers ondersteund wordt.
Zoals gezegd geen uitgebreide review van al deze tools, maar hopelijk wel een handig overzicht van wat er nu speelt in de markt. Welke tool voor jou het meest geschikt is hangt helemaal af van de werkzaamheden en het einddoel wat je in gedachten hebt: een ontwerp, een prototype of een werkelijke productiewebsite. Wij houden nog steeds veel in eigen hand, zeker wat betreft HTML en CSS code, om een zo goed mogelijke support voor verschillende browsers en devices te kunnen garanderen. Bij een e-commerce site is tenslotte elke afvaller een potentieel omzetverlies. Maar voor sketching, prototyping en demos kunnen deze tools je snel op weg helpen om je ideeën te visualiseren.
Mis je nog tools en software in dit overzicht? Ik hoor het graag!
Het bericht Webdesign software anno 2014 – een overzicht verscheen eerst op De Nieuwe Zaak.
Lees het originele bericht op www.denieuwezaak.nl