Pdf downloaden
Pdf downloaden
Een geweldige website ontwerpen kan een lastige opgave lijken, maar zo lang je de basisprincipes in gedachten houdt, zul je het proces interessant en leuk vinden. Het gaat om meer dan alleen een goed uiterlijk! Wij zullen je de basisprincipes laten zien, en een aantal algemene richtlijnen om je te helpen websites te ontwerpen die mensen steeds opnieuw zullen bezoeken.
Stappen
-
1Regel #1: Luister naar je cliënt . Misschien ontwerp je "'s werelds beste website ooit in de geschiedenis van het heelal en verder," met rijke zwarttinten, verfijnde lettertypes en felle, artistieke kleuren voor een site die schreeuwt "verken me nu!" Helaas wilde je cliënt een oranje menubalk met felroze en oranje letters. Je bent ontslagen, en je beste website ooit-waarvan de cliënt de rechten heeft-ligt ergens op hun backupschijf, zonder dat iemand die ooit weer ziet.
- Bestudeer de huisstijl van je cliënt. Laat de cliënt je een paar websites tonen die ze geweldig vinden. Dit zal je niet alleen een idee geven van wat ze goed vinden, het geeft je ook een paar ontwerpideeën waar je misschien nog niet aan had gedacht.
- Als je dacht dat we een grapje maakten over de oranje en roze website, denk dan eens aan deze coole, geraffineerde site:
-
2Regel #2: Ken je publiek en wat ze zoeken, en pas je ontwerp daarop aan . De reden waarom mensen websites hebben is omdat ze willen dat andere mensen ze zien. Het kan informatief zijn, of commercieel, of om een bepaalde doelgroep te vermaken. Jouw taak als ontwerper is om te weten voor wie je ontwerpt, en om ze op de pagina te houden wanneer ze daar belanden.
- Je zou kunnen denken: "Als het er goed uitziet zullen ze blijven." Maar dit hoeft niet per se zo te zijn. Neem bijvoorbeeld vastgoed. Hier is een site met een helder, leuk ontwerp. Het heeft veel witte ruimte wat een open uitstraling geeft, felle kleuren en een modern breedbeeldformaat met links op een prominente plaats:
- Bekijk nu deze benadering van het verkopen van vastgoed in hetzelfde gebied: rommelig en erg druk, saaie kleuren, en bedekt met reclame.
- Raad eens welke beter werkt voor mensen die een huis zoeken? Juist, degene waar huizen op staan ! Als mensen zoeken naar "huizen te koop in Santa Monica," kan het ze niet schelen hoe een site eruit ziet. Ze willen niet lezen over de makelaar, of mooie plaatjes van de stad zien. Ze willen huizen zien.
-
3Regel #3: Luister naar jezelf . Je begrijpt wat de cliënt wil, en je weet waar je markt naar zoekt. Nu is het eindelijk tijd om aandacht te besteden aan jou, de ontwerper!
- Bouw een sjabloon in de grafische software van je keuze. Maak de elementen van je pagina op verschillende lagen (zodat je later dingen kunt aanpassen zonder het hele sjabloon te vernietigen). Deze elementen kunnen zijn:
- Header . Dit is een element dat op elke pagina van je site hetzelfde is. De header bestaat uit de titel en het logo van de site, evenals links naar de andere onderdelen van de website (bv. Over, Contact, enz.). Visueel en praktisch zal dit alles samenbinden. Het is een goede gewoonte om de eerste knop op een menubalk terug te linken naar de homepagina.
- Laten we bijvoorbeeld eens naar Apple [1] X Bron kijken:
- Zoals met de meeste Apple-dingen heeft hun homepagina een erg strak, ongecompliceerd ontwerp. Let op de menubalk bovenin, met logische onderwerpen voor elke knop, plus een zoekveld-altijd een goed idee als je site het ondersteunt. Laten we nu kijken naar een landingspagina voor een van de knoppen, de iPad, om een paar elementen te bekijken:
- De menubalk verandert alleen door de iPad-knop donkerder te maken.
- Het onderwerp van de landingspagina wordt in grote zwarte letters weergegeven.
- Een nieuw submenu verschijnt zodat je meer te weten kunt komen over het product. Als je op een van deze knoppen klikt, zul je zien dat elke pagina nieuw inhoud biedt afhankelijk van het onderwerp, maar identiek zal zijn in layout en ontwerp.
- Vaak zal elk hoofdonderwerp in je menubalk verschillende subkoppen hebben die je moet invullen. In plaats van een tweede menubalk te maken, kan je popup-menu's gebruiken zoals dit voorbeeld van Musician's Friend [2] X Bron :
- Zijbalk
. Deze zal op veel pagina's van je site te zien zijn, maar niet per se op allemaal--de context bepaalt. Het is echter een erg belangrijk element, en moet zorgvuldig zijn ontworpen om intuïtief te zijn en niet te rommelig. In tegenstelling tot de menubalk kan de inhoud van een zijbalk erg dynamisch zijn. Bekijk deze twee zijbalken van vastgoedmarketeer Trulia [3]
X
Bron
De eerste is voor kopers:
- En de tweede is voor huurders. Let op de compleet verschillende focus voor erg vergelijkbare informatie, en het wordt op precies dezelfde plek op de zijbalk weergegeven:
- Body . Dit is waar het allemaal gebeurt, en het is het meest variabele deel van je ontwerp. Als je bijvoorbeeld een e-commerce site ontwerpt, kan één pagina een productrecensie hebben in de body, terwijl de volgende 20 voorwerpen heeft die te koop zijn. Jouw taak is om de twee samen te binden zodat ze niet visueel onsamenhangend zijn. Gebruik dezelfde kleuren, lettertypes en interface-elementen om alles samen te brengen.
- Footer . Dit is iets dat niet elke site (nodig) heeft. Het wordt vaak gebruikt voor dingen die een verder strakke interface rommelig kunnen maken, of om toegang te bieden tot minder belangrijke delen van de site. Hier is een voorbeeld van Groupon:
Advertentie - Bouw een sjabloon in de grafische software van je keuze. Maak de elementen van je pagina op verschillende lagen (zodat je later dingen kunt aanpassen zonder het hele sjabloon te vernietigen). Deze elementen kunnen zijn:
-
1Ontwerp een goede gebruikersinterface. Positioneer de verschillende elementen van de website, zoals de titel, zijbalken, logo's, afbeeldingen en tekst op elke pagina op dezelfde plek om je site navigeerbaar en intuïtief te maken.
- Houd dezelfde header bovenaan elke pagina . Of de inhoud van je site nu wel of niet veel herhalende elementen toestaat, zorg in ieder geval dat de bovenkant van elke pagina hetzelfde is.
- Gebruik logica in je ontwerp . De elementen op een enkele pagina moeten logisch geordend zijn op belangrijkheid of onderwerp; de verschillende pagina's op de site moeten dat ook zijn.
-
2Creëer een consequente stijl. Waar de layout je site structurele consistentie moet geven, moet de stijl deze thematische harmonie geven.
- Houd het bij twee of drie hoofdkleuren en zorg dat deze goed bij elkaar passen.
- Vermijd het gebruik van te veel letterstijlen of -groottes; als je er een paar wilt afwisselen, gebruik ze dan op elke pagina op dezelfde manier.
- Gebruik Cascading Style Sheets (CSS) om een uniforme stijl te handhaven, en om het makkelijker te maken elementen op een hele website te veranderen zonder naar elke pagina apart te hoeven gaan.
-
3Maximaliseer leesbaarheid. Om je tekst beter leesbaar te maken, kun je deze in kleinere delen opsplitsen.
- Gebruik ondertitels en gepaste spatiëring om elk van de delen te scheiden.
- Gebruik vetgedrukte letters of verschillende groottes om de hiërarchie en belangrijkheid van de onderwerpen te laten zien.
- Let op hoe je tekst behandelt. Maak het lettertype niet te klein, en vergroot de regelafstand om grote stukken tekst beter leesbaar te maken. Grote lappen tekst zijn moeilijker leesbaar; splits deze op in kleinere alinea's.
-
4Maak je website universeel leesbaar. Gebruik standaard HTML en vermijd tags, functies en plugins die alleen voor één merk of versie van een browser beschikbaar zijn.
- Hoewel de meeste moderne browsers en computers om kunnen gaan met complexe afbeeldingen, zal alles er gelikter uitzien als je je afbeeldingen kleiner maakt en optimaliseert voor het web. Weeg het belang van kwaliteit af tegen het belang van snelheid.
-
5Test je website. Zorg dat elke link werkt zoals je zou verwachten, en dat afbeeldingen correct verschijnen.
- Je wilt misschien wat gebruikerstesten organiseren door leden van je doelgroep de duidelijkheid en het gebruiksgemak van je ontwerp te laten testen en feedback te geven over je website.
-
6Publiceer je website. Koop een domeinnaam als je dat nog niet hebt gedaan. Controleer periodiek of links nog werken en luister naar suggesties die bezoekers naar je mailen.Advertentie
Tips
- Hoewel je vrij bent om de layout te ontwerpen gebaseerd op je eigen persoonlijke visie of dingen die je hebt gezien op andere sites, kan het eenvoudiger zijn om een kant-en-klaar ontwerp te kopen.
- Bombardeer de bezoeker niet met schattige, bijzonder plaatjes. Flash-animatie, felle kleuren, achtergronden met patronen, en muziek die automatisch wordt afgespeeld bij het laden van een pagina waren leuke experimenten in de jaren 90, maar nu zullen ze gebruikers wegjagen. Houd het bij simpele achtergronden die contrasteren met de tekstkleur, voor maximale leesbaarheid.
- Je kunt altijd CSS gebruiken om de afstand tussen alinea's te optimaliseren.
- Voor bezoekers met een auditieve of visuele beperking kun je video's ondertitelen, audio transcriberen en een bericht over toegankelijkheid toevoegen. Hoewel tabellen een efficiënte manier kunnen zijn om informatie te organiseren, zullen visueel beperkte bezoekers die schermleessoftware gebruiken het materiaal misschien niet in de juiste volgorde horen.
- Laat je bezoekers inkt besparen: gebruik een aparte style sheet voor printpagina's.
- Schakel achtergrondafbeeldingen uit als je de printparameters instelt.
- Gebruik zwarte tekst op een witte achtergrond.
- Verwijder de menubalk en onnodige afbeeldingen.
Advertentie
Waarschuwingen
- Vermijd plagiaat en houd je aan alle copyrightwetten. Voeg niet zonder goedkeuring willekeurige afbeeldingen toe die je online vindt, of zelfs structurele elementen. Alles wat je gebruikt op je site moet zowel legaal als ethisch verantwoord zijn.
Advertentie
Advertentie
Meld je aan voor de gratis nieuwsbrief van wikiHow!
Je vindt dan elke week handige handleidingen in je inbox.
Meld me aan!
