Webontwerp kan bedrieglijk moeilijk zijn, omdat het gaat om het bereiken van een ontwerp dat zowel bruikbaar als aangenaam is, informatie levert en het merk opbouwt, technisch verantwoord is en visueel coherent.
Voeg daarbij het feit dat veel webontwerpers (inclusief ikzelf) autodidact zijn, dat webontwerp nog steeds nieuw genoeg is om slechts een zijvak te zijn in veel ontwerpinstellingen, en dat het medium even vaak verandert als de onderliggende technologie.
Dus vandaag heb ik mijn 9 principes voor een goed webontwerp samengesteld. Dit zijn alleen mijn meningen en ik heb geprobeerd om te linken naar meer lezen over onderwerpen zodat je niet alleen mijn stem hoort. Uiteraard heb ik veel disclaimers: regels worden gemaakt om te worden verbroken, verschillende soorten ontwerpen werken anders en ik voldoe niet altijd aan mijn eigen advies. Dus lees deze als ze bedoeld zijn - slechts enkele observaties die ik deel ...
Capture the Valley maakt gebruik van gekleurde balken om uw oog te begeleiden door secties van boven naar beneden ...
1. Voorrang (het oog begeleiden)
Een goed webontwerp, misschien zelfs meer dan een ander type ontwerp, gaat over informatie. Een van de grootste tools in je arsenaal om dit te doen is voorrang. Bij het navigeren door een goed ontwerp moet de gebruiker door het scherm rond het scherm worden geleid. Ik noem deze prioriteit, en het gaat over hoeveel visuele gewicht verschillende delen van je ontwerp hebben.
Een eenvoudig voorbeeld van voorrang is dat op de meeste sites het logo het eerste is dat u ziet. Dit komt vaak omdat het groot is en is ingesteld op wat in studies is aangetoond als de eerste plaats waar mensen kijken (linksboven). zijn is een goede zaak, omdat je waarschijnlijk wilt dat een gebruiker meteen weet welke site ze bekijken.
Maar de voorrang zou veel verder moeten gaan. U moet de ogen van de gebruiker door een reeks stappen leiden. U wilt bijvoorbeeld dat uw gebruiker van logo / merk naar een primaire positioneringsinstructie gaat, naast een pittige afbeelding (om de site-persoonlijkheid te geven) en vervolgens naar de hoofdtekst, waarbij navigatie en een zijbalk een secundaire positie innemen in de reeks.
Waar je gebruiker naar moet kijken, is de webontwerper, om erachter te komen.
Om voorrang te krijgen, hebt u veel gereedschappen tot uw beschikking:
Positie - Waar iets op een pagina staat, heeft duidelijk invloed op de volgorde waarin de gebruiker het ziet.
Kleur - Het gebruik van gedurfde en subtiele kleuren is een eenvoudige manier om uw gebruiker te vertellen waar hij moet kijken.
Contrast - Anders zijn, maakt dingen opvallen, terwijl hetzelfde hetzelfde maakt ze secundair.
Grootte - Big heeft voorrang op weinig (tenzij alles groot is, in welk geval weinig kan opvallen dankzij Contrast)
Ontwerp elementen - als er een gigantische pijl naar iets wijst, raad dan waar de gebruiker zal kijken?
Verder lezen:
Je kunt meer van mijn gedachten lezen over Precedence in een oud Psdtuts + bericht genaamd Elements of Great Web Design - the polish. Joshua David McClurg-Genevese bespreekt principes van goed webdesign en design bij Digital-Web. Joshua heeft ook de langste naam ooit :-)
Marius heeft een zeer schone, zeer eenvoudige site met veel ruimte
2. Afstand
Toen ik voor het eerst begon met ontwerpen wilde ik elke beschikbare ruimte opvullen met spullen. Lege ruimte leek verspilling. In feite is het tegenovergestelde waar.
Afstand maakt dingen duidelijker. In Webdesign zijn er drie aspecten van de ruimte die u moet overwegen:
Regelafstand Wanneer u tekst opneemt, beïnvloedt de ruimte tussen de regels direct hoe leesbaar deze wordt weergegeven. Te weinig ruimte maakt het gemakkelijk voor je oog om van de ene naar de andere regel te spuiten, te veel ruimte betekent dat wanneer je een regel tekst voltooit en naar de volgende gaat je oog verloren kan gaan. Dus je moet een gelukkig medium vinden. U kunt de regelafstand in CSS regelen met de selector 'lijnhoogte'. Over het algemeen vind ik dat de standaardwaarde meestal te weinig spatiëring is. Regelafstand wordt technisch genoemd leidend (uitgesproken ledding), dat is afgeleid van het proces dat drukkers vroeger gebruikten om tekstregels van elkaar te scheiden - door staven van lood tussen de lijnen te plaatsen.
vulling In het algemeen mag tekst nooit andere elementen raken. Afbeeldingen moeten bijvoorbeeld geen tekst aanraken, noch randen of tabellen. Opvulling is de ruimte tussen elementen en tekst. De eenvoudige regel hier is dat je zou moeten altijd heb daar ruimte. Er zijn natuurlijk uitzonderingen, vooral als de tekst een soort van kop / afbeelding is of je naam David Carson :-) Maar als een algemene regel maakt het plaatsen van ruimte tussen tekst en de rest van de wereld het oneindig leesbaarder en aangenamer.
Witte ruimte Allereerst hoeft witte ruimte niet wit te zijn. De term verwijst eenvoudig naar lege ruimte op een pagina (of negatieve ruimte zoals het soms wordt genoemd). Witte ruimte wordt gebruikt om het evenwicht, de verhoudingen en het contrast met een pagina te bepalen. Veel witruimte heeft de neiging om dingen eleganter en duurder te laten lijken, dus als u bijvoorbeeld naar een dure architectensite gaat, ziet u bijna altijd veel ruimte. Als je effectief wilt leren witruimte te gebruiken, ga dan door een tijdschrift en kijk hoe advertenties worden neergelegd. Advertenties voor grote merken horloges en auto's en dergelijke hebben vaak veel lege ruimte die wordt gebruikt als een element van ontwerp.
Verder lezen:
Bij WebDesignFromScratch is er een geweldig artikel genaamd de Web 2.0 how-to design guide, waarin Eenvoud wordt besproken - een concept dat veel gebruik maakt van spatiëring. Er zijn ook nog veel andere handige dingen!
Noodlebox doet het goed om de aan / uit-status in zijn navigatie te gebruiken om de gebruiker georiënteerd te houden.
3. Navigatie
Een van de meest frustrerende ervaringen die je op een website kunt hebben, is dat je niet weet waar je heen moet of waar je bent. Ik zou graag willen denken dat navigatie voor de meeste webontwerpers een concept is dat we hebben leren beheersen, maar ik vind nog steeds een aantal behoorlijk slechte voorbeelden. Er zijn twee aspecten van navigatie om in gedachten te houden:
Navigatie - Waar kan je gaan? Er zijn enkele gezondsheidsregels om hier te onthouden. Knoppen om rond een site te reizen, moeten gemakkelijk te vinden zijn - naar de bovenkant van de pagina en gemakkelijk te identificeren. Ze moeten op navigatieknoppen lijken en goed beschreven zijn. De tekst van een knop moet vrij duidelijk zijn waar deze je naartoe brengt. Afgezien van het gezond verstand, is het ook belangrijk om navigatie bruikbaar te maken. Als u bijvoorbeeld een rollover-submenu hebt, is het belangrijk om ervoor te zorgen dat een persoon de submenu-items kan bereiken zonder het kantelen te verliezen. Het is ook een uitstekende feedback voor een gebruiker om de kleur of het beeld bij het omrollen te veranderen.
Oriëntatie - Waar ben je nu? Er zijn veel manieren waarop u een gebruiker kunt oriënteren, dus er is geen excuus om dat niet te doen. In kleine sites is het misschien gewoon een kwestie van een grote kop of een 'down'-versie van de juiste knop in uw menu. Op een grotere site kunt u gebruik maken van broodkruimelpaden, subrubrieken en een sitemap voor de echte verloren.
Verder lezen:
SmashingMagazine heeft een selectie CSS-gebaseerde navigatiestijlen die leuk zijn om doorheen te gaan, en # 3 is een van mijn! A List Apart heeft ook een goed artikel over oriëntatie, Where Am I?
4. Ontwerp om te bouwen
Het leven is een stuk eenvoudiger geworden sinds webontwerpers zijn overgestapt op CSS-lay-outs, maar zelfs nu is het nog steeds belangrijk om na te denken over hoe je een site gaat bouwen als je nog in Photoshop bent. Overweeg dingen als:
Kan het echt worden gedaan? Misschien heb je een geweldig lettertype gekozen voor je lichaamsexemplaar, maar is het eigenlijk een standaard HTML-lettertype? Misschien heeft u een ontwerp dat er mooi uitziet maar 1100px breed is en voor de meeste gebruikers een horizontale schuifbalk oplevert. Het is belangrijk om te weten wat wel en niet kan worden gedaan. Daarom vind ik dat alle webontwerpers ook op zijn minst sites moeten bouwen.
Wat gebeurt er wanneer het formaat van een scherm wordt gewijzigd?? Heeft u herhalende achtergronden nodig? Hoe zullen ze werken? Is het ontwerp gecentreerd of links uitgelijnd?
Doe je iets dat technisch moeilijk is?? Zelfs met CSS-positionering zijn sommige dingen zoals verticale uitlijning nog steeds een beetje pijnlijk en soms het beste te vermijden.
Kunnen kleine wijzigingen in uw ontwerp enorm vereenvoudigen hoe u het bouwt? Soms kan het verplaatsen van een object in een ontwerp een groot verschil maken in hoe je later je CSS moet coderen. Met name wanneer elementen van een ontwerp elkaar kruisen, voegt het een beetje complexiteit toe aan de build. Dus als je ontwerp, zeg drie elementen en elk element volledig van elkaar gescheiden is, zou het heel gemakkelijk te bouwen zijn. Aan de andere kant, als alle drie elkaar overlappen, kan het nog steeds gemakkelijk zijn, maar zal het waarschijnlijk iets gecompliceerder zijn. Je moet een balans vinden tussen wat er goed uitziet en kleine veranderingen die je build kunnen vereenvoudigen.
Vooral voor grote sites kun je dingen vereenvoudigen? Er was een tijd dat ik beeldknoppen gebruikte voor mijn sites. Dus als er een downloadknop was, zou ik een kleine downloadafbeelding maken. In het laatste jaar of zo ben ik overgeschakeld naar het gebruik van CSS om mijn knoppen te maken en heb ik nooit achterom gekeken. Natuurlijk, dit betekent dat mijn knoppen niet altijd de flexibiliteit hebben die ik zou wensen, maar de besparingen in build-tijd van het niet hoeven maken van tientallen kleine knopafbeeldingen zijn enorm.
Als iemand een goed type kent, is het iLoveTypography!
5. Typografie
Tekst is het meest voorkomende element van ontwerp, dus het is niet verrassend dat er veel aandacht aan is besteed. Het is belangrijk om dingen als:
Lettertype keuzes - Verschillende soorten lettertypen zeggen verschillende dingen over een ontwerp. Sommige zien er modern uit, sommige zien er retro uit. Zorg ervoor dat u de juiste tool voor de klus gebruikt.
Lettergrootte -Jaren geleden was het trendy om heel kleine tekst te hebben. Gelukkig hebben mensen tegenwoordig ingezien dat tekst bedoeld is om te lezen, niet alleen om naar te kijken. Zorg ervoor dat uw tekstafmetingen consistent zijn, groot genoeg om te worden gelezen en geproportioneerd, zodat kopjes en subkopjes op de juiste manier opvallen.
tussenruimte - Zoals hierboven besproken, is afstand tussen lijnen en uit de buurt van andere objecten belangrijk om te overwegen. Je moet ook nadenken over de afstand tussen letters, hoewel dit op het web minder belangrijk is, omdat je niet zoveel controle hebt.
Lijnlengte - Er is geen vaste regel, maar over het algemeen zouden uw tekstregels niet te lang moeten zijn. Hoe langer ze zijn, hoe moeilijker ze zijn om te lezen. Kleine tekstkolommen werken veel beter (denk aan hoe een krant tekst opmaakt).
Kleur - Een van mijn slechtste gewoonten is het maken van tekst met een laag contrast. Het ziet er goed uit, maar het leest helaas niet zo goed. Toch lijkt het me te doen met elk websiteontwerp dat ik ooit heb gemaakt, tsk tsk tsk.
alinea- - Voordat ik begon met ontwerpen, vond ik het leuk om de tekst in alles te rechtvaardigen. Het zorgde voor mooie randen aan beide kanten van mijn alinea's. Helaas, gerechtvaardigde tekst heeft de neiging om rare gaten tussen woorden te creëren waar ze automatisch zijn gespreid. Dit is niet leuk voor je ogen tijdens het lezen, dus houd je aan de linkerkant uitgelijnd, tenzij je toevallig een magisch tekstgedeelte hebt dat toevallig perfect uitkomt.
Verder lezen:
Nick La van WebDesignerWall heeft een geweldig artikel over online typografie genaamd Typographic Contrast and Flow .
Happycog kent de bruikbaarheid van binnenuit en hun eigen site is eenvoudig en gebruiksvriendelijk.
6. Usability
Bij webontwerp gaat het niet alleen om mooie foto's. Omdat er zoveel informatie en interactie op een website moet plaatsvinden, is het belangrijk dat u, de ontwerper, alles in huis hebt. Dat betekent dat u uw websiteontwerp bruikbaar kunt maken.
We hebben al enkele aspecten van bruikbaarheid besproken: navigatie, voorrang en tekst. Hier zijn nog drie belangrijkere:
Naleving van normen Er zijn bepaalde dingen die mensen verwachten, en het niet geven ervan veroorzaakt verwarring. Als tekst bijvoorbeeld een onderstreping heeft, verwacht u dat dit een koppeling is. Anders doen is geen goede gebruikspraktijk. Natuurlijk kun je een aantal conventies breken, maar het grootste deel van je website zou precies moeten doen wat mensen verwachten dat het doet!
Denk na over wat gebruikers daadwerkelijk zullen doen Prototyping is een veelgebruikt instrument dat wordt gebruikt in ontwerp om een ontwerp daadwerkelijk uit te proberen. Dit gebeurt omdat vaak wanneer u daadwerkelijk een ontwerp gebruikt, u kleine dingen opmerkt die een groot verschil maken. ALA had een tijdje geleden een artikel genaamd Never Use a Warning When You Mean Undo, wat een uitstekend voorbeeld is van een kleine beslissing over een interfaceontwerp die het leven voor een gebruiker kan doen zuigen.
Denk aan gebruikerstaken Wanneer een gebruiker naar uw site komt, wat proberen ze dan eigenlijk? Maak een lijst van de verschillende soorten taken die mensen op een site kunnen uitvoeren, hoe ze deze zullen bereiken en hoe gemakkelijk u het voor hen wilt doen. Dit kan betekenen dat u echt algemene taken op uw startpagina hebt (bijvoorbeeld 'begin met winkelen', 'meer informatie krijgt over wat we doen', enzovoort) of dat u ervoor moet zorgen dat iets als een zoekvak altijd gemakkelijk toegankelijk is. Aan het eind van de dag is uw webontwerp een hulpmiddel voor mensen om te gebruiken, en mensen houden niet van vervelende tools!
Verder lezen:
AListApart heeft veel artikelen over gebruiksvriendelijkheid op het web.
Elektrische pulp ziet er ruig uit, maar als je goed kijkt, realiseer je je dat er een stevig rooster is en dat de dingen eigenlijk allemaal op één lijn liggen.
7. Afstemming
Het op één lijn houden van dingen is net zo belangrijk in webdesign als in printontwerp. Dat wil niet zeggen dat alles moet in een rechte lijn staan, maar eerder dat je door moet gaan en moet proberen de dingen consequent op een pagina te plaatsen. Door uitlijnen wordt uw ontwerp geordender en verteerbaarder en wordt het ook mooier.
U kunt uw ontwerpen ook op een specifiek raster baseren. Ik moet toegeven dat ik dit niet bewust doe - hoewel een site als Psdtuts + inderdaad een heel stevige rasterstructuur heeft. Dit jaar heb ik een aantal echt goede artikelen over gridontwerp gezien, waaronder SmashingMagazine's Designing met Grid-Based Approach & A List Apart's Thinking Outside The Grid. Als u geïnteresseerd bent in het ontwerp van het raster, moet u zeker een bezoek brengen aan het toepasselijk genaamde huis van DesignByGrid.com voor alles wat griddy is..
De ExpressionEngine-site is de ziel van helderheid. Alles is scherp en schoon.
8. Duidelijkheid (scherpte)
Uw ontwerp scherp en scherp houden is super belangrijk in webdesign. En als het om duidelijkheid gaat, draait het allemaal om de pixels.
In je CSS is alles pixel-perfect, dus er is niets om je zorgen over te maken, maar in Photoshop is dat niet het geval. Voor een scherp ontwerp moet u:
Houd vormranden vast aan pixels. Dit kan te maken hebben met het handmatig opschonen van vormen, lijnen en vakken als u ze in Photoshop maakt.
Zorg ervoor dat elke tekst is gemaakt met de juiste anti-aliasing-instelling. Ik gebruik vaak 'Sharp'.
Ervoor zorgen dat het contrast hoog is, zodat de randen duidelijk worden gedefinieerd.
Te weinig benadrukken van randen om het contrast te overdrijven.
Verder lezen:
Ik schreef iets meer over duidelijkheid in Elements of Great Web Design - de lak. Ik heb gemerkt dat drukwerkontwerpers die overgaan op webontwerp in het bijzonder niet in pixels denken, maar het is echt van levensbelang.
Veerle doet er alles aan om zelfs de kleinste details over de hele linie consistent te houden.
9. Consistentie
Consistentie betekent dat alles overeenkomt. Kopgroottes, lettertypekeuze, kleur, knopstijlen, spatiëring, ontwerpelementen, illustratiestijlen, fotokeuzes, etc. Alles moet een thema hebben om uw ontwerp samenhangend te maken tussen pagina's en op dezelfde pagina.
Het consistent houden van je ontwerp gaat over professioneel zijn. Inconsistenties in een ontwerp zijn als spelfouten in een essay. Ze verlagen gewoon de perceptie van kwaliteit. Hoe je ontwerp er ook uitziet, het consistent houden zal het altijd een beetje opvrolijken. Zelfs als het een slecht ontwerp is, maak er dan in ieder geval een consistent, slecht ontwerp van.
De eenvoudigste manier om de consistentie te behouden, is om vroege beslissingen te nemen en hieraan vast te houden. Met een hele grote site kunnen dingen echter veranderen in het ontwerpproces. Toen ik bijvoorbeeld FlashDen ontwierp, duurde het proces maanden, en uiteindelijk waren sommige van mijn ideeën voor knoppen en afbeeldingen veranderd, dus ik moest teruggaan en eerdere pagina's herzien om ze later exact aan te passen.
Het hebben van een goede set CSS stylesheets kan ook een lange weg gaan naar het maken van een consistent ontwerp. Probeer kerntags te definiëren zoals
en
op een zodanige manier dat uw defaults op de juiste manier overeenkomen en dat u zich niet altijd specifieke klassennamen hoeft te herinneren.
Verder lezen:
Het ThinkVitamin-artikel Hoe is CRAP uw ontwerp? bespreekt herhaling naar de volgende pagina en hoe belangrijk het is. Het artikel is geschreven door Mike Rundle die 9rules ontwerpt, dus je weet dat het het lezen waard is!
Koop mijn boek!
Genoten van dit artikel? Ik heb zojuist een boek over freelancen voltooid dat je online als een eBoek kunt kopen. Ga naar voor meer informatie over How to Be a Rockstar Freelancer.
Share
Accentsconagua