Hoofdstuk 3 Tools voor WebonTWerp

16 © 2012 Excel With Business

WEB DESIGN

3.0 Populaire Design Software

Nu dat je over een goed overzicht beschikt van webpagina’s, browsers,

hosting en van alle naar buiten gerichte componenten, is het tijd om achter de schermen te gaan en door alle software tools te gaan welke daadwerkelijk websites bouwen.

Het eerste concept om te verduidelijken is het verschil tussen “webontwerp” en “webontwikkeling”. Webontwerp omvat alles van gebruikerservaring en navigatieplanning, tot het maken van de grafische interface. Webontwikkeling, aan de andere kant, is gericht op het programmeren van de code die de pagina bij elkaar houdt, verbindt de site met databases, en stelt je in staat om dingen te doen zoals de aankoop van artikelen met een creditcard. Om dit verschil te tonen, vergelijk de figuren 3-1 en 3-2. Figuur 3-2 toont een afbeelding van de flip-side code van de schitterende website getoond in Figuur 3-1.

In dit hoofdstuk, zullen we ons richten op de ontwerpkant van het systeem. De latere hoofdstukken gaan meer in op onderwerpen m.b.t. ontwikkeling, maar maak je geen zorgen, we zullen niet al te technisch worden – slechts net genoeg om je uit te rusten met de juiste kennis.

Figuur 3-1: iedere webpagina heeft twee kanten: de visuele kant, die gebruikers te zien krijgen en de kant van de

onderliggende codering, die alles bij elkaar houdt.

Figuur 3-2: Deze complex ogende PHP-code is wat Figuur 3-1. bij elkaar houdt.

Hoofdstuk 3 Tools voor WebonTWerp

17 © 2012 Excel With Business

WEB DESIGN

3.1 Rol van Graphics Software in WebontwerpDe ontwerpfase vereist een aantal zeer verschillende soorten software voor de productie van alle benodigde componenten. Niet alleen dien je het informatieontwerp uit te werken, besproken in het navolgende, maar je moet ook site-graphics produceren hetzij voor je eigen project of die je kunt delen met klanten ter goedkeuring, voordat je kunt beginnen met het produceren van de site.

InformatieontwerpTijdens de ontwerpfase, zoals in Hoofdstuk 8 voor details, is de eerste taak het ontwikkelen van de “informatie-architectuur” van een nieuwe website. Informatie-architectuur is een high-falutin term voor blauwdrukken van een site. Eén van de documenten in dit stadium is de “sitemap” welke alle pagina’s van een site laat zien en hoe ze zich met elkaar verbinden. Er zijn een aantal software-tools die je kunt gebruiken om een sitemap te bouwen, zoals weergegeven in figuur 3-3. Sommige zijn dure software applicaties en sommige zijn online tools die gratis 30-dagen trials aanbieden (maar deze bieden minder flexibiliteit ten aanzien van het uiterlijk van

de sitemap).

Software applicaties:• Omnigraffle - (http://www.omnigroup.com/

omnigraffle)

• Microsoft Visio - (http://office.microsoft.com/en-us/visio/visio-2010-buy-page-FX101836377.aspx)

• Adobe InDesign - (http://www.adobe.com/products/indesign.html)

Online tools:• Slickplan.com - (http://slickplan.com/)

• Gliffy.com - (http://www.gliffy.com/uses/web-site-map-software/)

WireframesZodra je een sitemap hebt gebouwd, is de volgende stap het bepalen van de details van elke pagina. Je doet dit door het bouwen van schematische teke-ningen genaamd “wireframes” voor elk uniek pagi-natype, zoals het voorbeeld in Figuur 3-4. De meeste van de eerder genoemde tools zijn in staat wireframe schema’s te bouwen. Hier is een lijst van enkele on-line software tools:

Figuur 3-3: Niet alle sitemaps zien er zo gepolijst uit als deze gebouwd in Adobe InDesign. Er zijn veel tools die je kunt gebruiken om sitemaps te bouwen,

van Microsoft Visio tot online tools beschikbaar op Slickplan.com.

Hoofdstuk 3 Tools voor WebonTWerp

18 © 2012 Excel With Business

WEB DESIGN

• Mockingbird - https://gomockingbird.com/

• Mockflow - http://www.mockflow.com/

• Axure - http://www.axure.com/download

Verkenning Visueel OntwerpAls je de site voor iemand anders ontwerpt, wil de klant verschillende visuele ideeën zien om uit te kiezen alvorens het uiteindelijke ontwerp te bepalen. Om de creativiteit de vrije loop te laten gaan, beginnen veel ontwerpers met het samenstellen van “moodboards”, zoals het voorbeeld in Figuur 3-5 welke het totale fotografie gevoel, kleurenpalet gebruik en lettertype gebruik vastlegt. Door het creëren van moodboards, hoef je, je vooralsnog niet te bekommeren omtrent de navigatie en structuur van de site. Het is een

geweldige manier om een voorsprong te verkrijgen in het bepalen van de visuele stijl, terwijl het team voor gebruikerservaring bezig is met het uitwerken van de informatie-architectuur en wireframe details.

Figuur 3-4: Een wireframe is een zwart-wit schema dat de inhoud en navigatieplan van een webpagina laat zien.

Figuur 3-5: moodboards zijn verzamelingen van afbeeldingen, lettertypen en kleuren om klanten te helpen besluiten bij een algemene

visuele aanpak voor een website. Creative Suite van Adobe biedt de ideale hulpmiddelen voor het maken van moodboards.

Hoofdstuk 3 Tools voor WebonTWerp

19 © 2012 Excel With Business

WEB DESIGN

Mood boards, zijn niet per se verbonden aan merkbeelden, dus om een stap verder te gaan, kun je “style tiles” creëren, Style tiles zijn een recent idee dat texturen, kleuren, knopbehandelingen, en lettertypen onderzoekt, samen met merklogo’s en fotografie in quasi webpagina-ontwerpen zoals het voorbeeld in Figuur 3-6.

Creative Suite van Adobe biedt de beste mix van tools die webdesigners nodig hebben voor de eerste creatieve ontwikkeling. Je kunt moodboards en style tiles maken in Photoshop, InDesign of Illustrator, waar je, je het meest prettig bij voelt. Als je niet in bezit bent van Creative Suite, zal zelfs een tool zoals Microsoft PowerPoint werken.

Web “comps”Zodra je gevoel krijgt voor de visuele stijl die het beste werkt, dien je realistisch ogende webpagina-mockups te maken in een voorgesteld ontwerp. Met behulp van de wireframe diagrammen als je gids op het gebied van navigatie en inhoudselementen, geven deze ontwerp-mockups weer hoe de uiteindelijke webpagina eruit zal zien. Ik wil tenminste drie verschillende ontwerp-mockups laten zien waar een klant uit kan kiezen.

Na wat heen en weer te zijn gegaan, zul je uiteindelijk de goedkeuring krijgen op een ontwerp en zul je moeten beginnen met het produceren, design “comps.” Comps zijn source art bestanden, meestal gebouwd in Adobe Photoshop, die verantwoordelijk zijn voor alle samenstellende art componenten die nodig zijn om

een pagina te bouwen of een reeks pagina’s. Zoals je kunt zien in figuur 3-7, zien ze er absoluut echt

Figuur 3-6: Style tiles zijn meer gericht op het merk van een klant dan moodboards. Ze bieden een

mogelijkheid tot het weergeven van lettertypen, kleuren, knopbehandelingen naast merkafbeeldingen en logo’s.

Figuur 3-7: Deze mobiel-veilige website is eigenlijk een mockup “comp” om te laten zien hoe de site eruit

moet zien. Aan de rechterkant zie je de Photoshop lagen welke source art componenten bevatten.

Hoofdstuk 3 Tools voor WebonTWerp

20 © 2012 Excel With Business

WEB DESIGN

uit alsof je ze zo op de webserver kunt zetten en zo zouden werken. Helaas is dit niet het geval. Ontwerp comps moeten opnieuw worden opgebouwd met behulp van web development tools die we zullen bespreken in Hoofdstuk 4.

3.2 PhotoshopAdobe Photoshop krijgt speciale aandacht in deze cursus, omdat het zich heeft ontwikkeld tot de standaard software tool die wordt gebruikt bij webdesign en ontwikkelingsorganisaties. Leren om Photoshop te gebruiken inclusief alle mogelijkheden zal een forse investering in tijd vergen, maar het is zeker de moeite waard. Door zijn alomtegenwoordigheid, zorgt het delen van Photoshop comps tussen verschillende ontwerpers, ontwikkelaars en opdrachtgevers voor een efficiënte workflow.

Terwijl er andere mededingers zijn, zoals Adobe Fireworks, hetgeen speciaal gebouwd om webpagina comps te maken, heeft geen van hen voldoende marktpenetratie verworven om ontwerpers ervan te overtuigen ze op grote schaal te gebruiken . Zoals eerder gezegd, web Comps zien er echt uit, maar ze dienen echter als een bron voor graphics en als een lay-out guide. De comp wordt overgedragen aan een ontwikkelaar die moet het bestand openen om het nodige uit te pakken om de pagina opnieuw te bouwen in de codetalen. Daarom, dienen ontwikkelaars zich op hun gemak te voelen bij het werken met de software en het navigeren door het bronbestand. Zoals je kunt zien in figuur 3-7, Photoshop bronbestanden, of “. Psd” bestanden (genoemd naar de extensie), hebben een groot aantal lagen, die mogelijk honderden individuele grafische elementen bevatten.

Figuur 3-8: iStockphoto.com is een goedkope en uitgebreide creatieve online hulpbron voor fotografie, video, pictogrammen, afbeeldingen en

audioproducten. © iStockphoto LP. www.istockphoto.com

Hoofdstuk 3 Tools voor WebonTWerp

21 © 2012 Excel With Business

WEB DESIGN

3.3 Online Creative Media-hulpbronnenWanneer je webontwerp-comps maakt, dien je de fotografiemiddelen, knoppen en iconen, voorbeeldtekst (bespreken we waarom) op te nemen en gebruik te maken van lettertypen die nog niet zijn geïnstalleerd op je computer. Hieronder is een lijst van online hulpbronnen voor deze creatieve benodigheden :

Stock mediaEen van de beste bronnen van goedkope stockfotografie, illustratie, video en audio is iStockphoto. Hun databank van creatieve materialen groeit elke dag, want amateur- en professionele ontwerpers, muzikanten en fotografen uploaden hun werk en ontvangen royalties wanneer ontwerpers zoals jij hun materialen selecteren en in gebruik nemen.

Zoals Figuur 3-8 laat zien, een robuuste zoekfunctie stelt je in staat om passend materiaal te vinden op kleurprofiel, thema, en beeld oriëntatie. Zodra je een item vindt, wordt de prijs gedreven door zijn grootte en resolutie. Je kunt ook met watermerk gemarkeerde “plaatsaanduidingen” voor afbeeldingen downloaden, zodat je kunt zien hoe het item zich in je webontwerpen gedraagt alvorens het aan te schaffen.

Online lettertypenEen andere favoriete online informatiebron is Veer.com. Hoewel Veer ook een goede bron voor stock fotografie is, blinkt het echt uit als een lettertype-bron. Je kunt voor lettertypen zoeken op gemeenschappelijke bijvoeglijke naamwoorden zoals “modern” of “handgetekende”, of je kunt lettertypen zoeken op stijl zoals “sans serif.” De zoekresultaten die worden weergegeven, zoals weergegeven in Figuur 3-9, laten je, je zoekcriteria verder verfijnen (linker paneel). En nog beter, typ je eigen tekst, zodat je kunt zien hoe uw koppen eruit zullen zien.

“Griekse tekst”Kopieën proberen te verfijnen en bewerken in grafische software tools tijdens het ontwerpproces, is geen efficiënte manier. Niet alleen zijn ontwerpers meestal ook geen schrijvers, maar je wilt niet dat het visuele creatieve proces belemmerd wordt door pogingen om met matige kopteksten en een dito informatieve hoofdkopie te komen. Dus, wat ontwerpers doen is een voorbeeldtekst gebruiken refererende naar (ten onrechte - het is Latijn!) “Griekse tekst” als plaatsaanduiding voor de hoofdtekst in de comps. Ontwerpers zullen gebruik maken van een echte kopie voor navigatie-elementen en de belangrijkste kopteksten zodat de teamleden en klanten beter het pagina-ontwerp kunnen evalueren, maar het dient duidelijk te worden gemaakt dat deze tekst niet definitief is en er alleen is voor visualisatie doeleinden. Bekijk hoe Figuur 3-10 een mix laat zien van leesbare koppen en plaatsaanduiding voor Griekse tekst.

Een geweldige online informatiebron voor het genereren van Griekse tekst is te vinden op http://www.lipsum.com/

Figuur 3-9: Veer.com is een uitstekend middel om benodigde lettertypes te vinden voor je website of mobiele site project.

© Veer, a Corbis Corporation Brand. www.veer.com

Hoofdstuk 3 Tools voor WebonTWerp

22 © 2012 Excel With Business

WEB DESIGN

NEXT HOOfDSTuk 4 Tools voor WebonTWikkeling VOlGENDE

Figuur 3-10: Bij de ontwikkeling van webontwerp comps, gebruik een realistische (niet definitief noodzakelijk) kopie voor de belangrijkste kopteksten, zinnen en navigatie. Gebruik de “Griekse” plaatsaanduiding voor al het andere.

final) pour les principaux titres, locutions et navigation. Utilisez du faux-texte de remplissage pour tout le reste.