9 Pro Tips voor Website Ontwerp Iedereen Must Read

1. Voorrang (De kunst van het controleren van de Eye)
Goed webdesign, misschien zelfs meer dan andere type ontwerp, is alles over informatie. Een van de belangrijkste instrumenten in je arsenaal om dit te doen is voorrang. Bij het navigeren van een goed ontwerp, moet de gebruiker worden geleid rond het scherm door de ontwerper. Ik noem deze voorrang, en it &';. S over hoeveel visuele gewicht verschillende delen van uw ontwerp hebben
Een eenvoudig voorbeeld van voorrang is dat in de meeste sites, het eerste wat je ziet is het logo. Dit is vaak omdat het &'; s grote en ingesteld op wat er in de studies aangetoond dat de eerste plaats mensen kijken (linksboven) zijn. Dit is een goede zaak, omdat je waarschijnlijk wilt een gebruiker onmiddellijk weten welke site het is ze te bekijken.
Maar voorrang moeten veel verder gaan. Ogen door een opeenvolging van stappen, je moet de gebruiker &' richten. Bijvoorbeeld, wilt u misschien uw gebruikers om van logo /merk tot een primaire positionering statement, naast een punchy afbeelding (op de site persoonlijkheid te geven), dan naar de hoofdtekst, met navigatie en een zijbalk nemen van een tweede positie in .. de volgorde
Wat uw gebruikersnaam moeten kijken naar is aan jou, de webdesigner, om erachter te komen
om te bereiken wat ik noem voorrang heb je veel tools tot je beschikking:
1. Positie — waar iets is op een pagina duidelijk invloed in welke volgorde de gebruiker ziet. Pagina 2. Kleur — met behulp van vet en subtiele kleuren is een makkelijke manier om uw gebruiker te vertellen waar te kijken.
3. Contrast — verschillend maakt dingen opvallen, terwijl ze het zelfde maakt ze secundaire.
4. Size — grote voorrang heeft op kleine (tenzij alles is groot, in welk geval weinig zou opvallen dankzij Contrast)
5. Design Elements — als er een gigantische pijl op iets, raden waar de gebruiker zal zien?
2. Spacing
Toen ik voor het eerst begonnen met het ontwerpen, wilde ik elke beschikbare ruimte vullen met spullen. Ik dacht dat lege ruimte leek verspilling. Toch vond ik het tegendeel is waar.
Afstand maakt het wat duidelijker. In Web design zijn er drie aspecten van de ruimte die je moet overwegen:
Regelafstand: Wanneer u tekst lay out, de ruimte tussen de lijnen rechtstreeks invloed op hoe leesbaar het lijkt. Te weinig ruimte maakt het gemakkelijk voor je ogen om over te lopen van de ene lijn naar de volgende; te veel ruimte betekent dat wanneer u een regel tekst te beëindigen en naar de volgende uw oog kan verdwalen. Dus je moet een gulden middenweg tussen de twee te vinden. Line-height &'; kunt u de regelafstand in CSS met de &' controleren; selector. Over het algemeen vind ik de standaard waarde is meestal te weinig afstand naar mijn smaak. Regelafstand wordt technisch genoemd leidt, die is afgeleid van het proces dat printers die gebruiken om regels tekst te scheiden in de oude dagen — door het plaatsen van staven van lood tussen de lijnen
Vulling:. In het algemeen tekst mag nooit andere elementen raken. Beelden, bijvoorbeeld, moet niet aanraken tekst zijn, geen van beide moet grenzen of tabellen.
Padding is de ruimte tussen de elementen en tekst. De simpele regel is dat je altijd de ruimte moeten hebben daar. Er zijn uitzonderingen natuurlijk, in het bijzonder wanneer de tekst is een soort van koers /grapic. Maar als een algemene regel, waardoor de ruimte tussen de tekst en de rest van de wereld maakt het oneindig veel beter leesbaar en aangename
White Space:. Allereerst, witte ruimte doesn &'; t moet wit zijn. De term verwijst eenvoudigweg naar lege ruimte op een pagina (of negatieve ruimte als het &'; s ook wel). Witte ruimte wordt gebruikt om evenwicht, proportie en contrast om een ​​pagina te geven. Veel witte ruimte heeft de neiging om dingen te laten lijken meer elegante en chique, dus bijvoorbeeld als je naar een dure architect site, you &'; ll bijna altijd een veel ruimte. Als u wilt leren om witruimte effectief te gebruiken, gaan door middel van een tijdschrift en kijken hoe advertenties worden aangelegd. Advertenties voor grote merken van horloges en auto's, hebben ze de neiging om veel lege ruimte gebruikt als een element van het ontwerp hebben.
3. Navigatie
Een van de meest frustrerende ervaringen die je kan hebben op elke website is niet in staat om erachter te komen waar te gaan of waar je bent. I &'; graag denken dat voor de meeste webdesigners, navigatie is een concept dat we &'; ve in geslaagd om meester, maar er is altijd een die me verkeerd bewijst. Er zijn twee aspecten van scheepvaart in gedachten te houden:
Navigatie:? Waar kunt u terecht Heb er een paar gezond verstand regels om te onthouden. Knoppen om te reizen rond een site gemakkelijk te vinden &ndash moet zijn; naar de bovenkant van de pagina en gemakkelijk te identificeren. Ze moeten eruit navigatieknoppen en worden goed beschreven. De tekst van een knop moet vrij duidelijk als waar het &'; s die u. Afgezien van het gezond verstand, it &'; s ook belangrijk om de navigatie bruikbaar te maken. Bijvoorbeeld, als je een rollover submenu, zodat een persoon kan naar het submenu items te krijgen zonder dat de rollover is belangrijk. Evenzo de kleur of afbeelding op rollover veranderen is een uitstekende feedback voor een gebruiker
Oriëntatie:. Waar ben je nu Heb Er zijn veel manieren waarop u kunt een gebruiker oriënteren dus er is geen excuus om niet te?. In kleine plaatsen, zou het gewoon een kwestie van een grote post of een &' zijn; beneden &'; versie van de juiste knop in je menu. In een grotere site, kan u gebruik maken van broodkruimel paden, sub-rubrieken en een sitemap voor de echt verloren.
4 te maken. Ontwerp tot
leven op te bouwen is een stuk gemakkelijker geworden sinds Webdesigners overgestapt op CSS-lay-outs, maar zelfs nu is &'; s nog steeds belangrijk om na te denken over hoe je gaat om een ​​site te bouwen als je &'; re nog in Photoshop. Denk aan zaken als:
Kan het eigenlijk gedaan worden
Je zou een fantastische lettertype hebt gekozen voor je lichaam te kopiëren, maar is het eigenlijk een standaard HTML-lettertype? Je zou een ontwerp dat mooi uitziet, maar is 1100px breed en zal resulteren in een horizontale scrollng voor de meerderheid van de internet gebruikers. It &'; s belangrijk om te weten wat wel en niet kan ' van &; t worden gedaan, dat is de reden waarom ik geloof dat alle webdesigners moet ook bouwen websites, tenminste soms
Wat gebeurt er als een scherm is resizes Heb Heeft u behoefte herhalen.? achtergronden? Hoe werken ze? Wordt het ontwerp gecentreerd of links uitgelijnd
Bent u iets dat technisch moeilijk?
Zelfs met CSS positionering te doen, sommige dingen zoals verticale uitlijning zijn nog steeds een beetje pijnlijk en soms best helemaal vermeden.
Kan klein veranderingen in uw ontwerp sterk vereenvoudigen hoe je bouwen?
Soms een object bewegen in een ontwerp kan een groot verschil in de manier waarop je je CSS later coderen te maken. Met name wanneer onderdelen van een ontwerp kruis over elkaar voegt een beetje ingewikkeld om de opbouw. Dus als uw ontwerp heeft, zeggen vier elementen en elk element is volledig gescheiden van elkaar, zou het heel gemakkelijk om te bouwen. Anderzijds als alle vier elkaar overlappen, kan het nog steeds eenvoudig, maar waarschijnlijk iets ingewikkelder. Je moet een balans tussen wat er goed uitziet en kleine veranderingen die je build kan vereenvoudigen vinden.
Voor grote sites, in het bijzonder, kunt u zaken te vereenvoudigen?
Er was een tijd dat ik gebruikte om het toetsen voor mijn sites. Dus als er een download knop, bijvoorbeeld, zou ik het een beetje downloaden. In het afgelopen jaar of zo, ik &'; ve overgestapt op het gebruik van CSS aan mijn knoppen te maken en hebben nooit meer achterom gekeken. Tuurlijk, het betekent dat mijn knoppen don &'; t heeft altijd de flexibiliteit Ik zou wensen, maar de besparingen in de bouwtijd van het niet hebben van tientallen kleine knop beelden te maken zijn enorm
5.. Typografie
tekst is de meest voorkomende element van het ontwerp, dus het &'; s niet verwonderlijk dat veel aandacht is besteed aan het. It &'; s belangrijk om zaken als overwegen:
Font Keuzes: Verschillende soorten lettertypen zeggen verschillende dingen over een ontwerp. Sommigen kijken modern, sommige kijken retro. Zorg ervoor dat u het juiste gereedschap voor de job
Font maten:. Jaren geleden was het trendy om echt kleine tekst te hebben. Gelukkig, deze dagen mensen zijn begonnen om te beseffen dat de tekst is bedoeld om gelezen te worden, niet alleen gekeken. Zorg ervoor dat uw tekst formaten consistent zijn, groot genoeg is om te lezen, en geproportioneerd zodat rubrieken en subrubrieken opvallen
adequaat Afstand:. Zoals hierboven besproken, afstand tussen de lijnen en uit de buurt van andere objecten is het belangrijk om te overwegen. Je moet ook nadenken over de afstand tussen letters, maar op het web is dit minder van belang, zoals u don &'; t hebben dat veel controle
Line Lengte: Er is geen vaste regel, maar over het algemeen uw tekstregels. niet moeten van &'; t te lang. Hoe langer ze zijn, hoe moeilijker ze zijn te lezen. Kleine kolommen tekst werk veel beter (denken over hoe een krant legt uit tekst)
Kleur:. Een van mijn slechtste gewoonte is het maken van een laag contrast tekst. Het ziet er goed uit, maar doesn &'; t lezen zo goed, helaas
alinea-: Voordat ik begonnen met het ontwerpen, ik hield van de tekst in alles te rechtvaardigen.. Het zorgde voor mooie randen aan weerszijden van mijn alinea. Helaas, gerechtvaardigd tekst heeft de neiging om rare openingen creëren tussen woorden waar ze auto-afstand van elkaar zijn geweest. Dit isn &'; t leuk voor uw ogen bij het lezen, dus vasthouden aan links uitgelijnd, tenzij je toevallig een magische hoeveelheid tekst die er gebeurt met de ruimte perfect
6 hebben.. Usability
Webdesign isn &'; t alleen over mooie foto's. Met zo veel informatie en interactie te zijn verricht op een website, it &'; s belangrijk dat u, de ontwerper, voor het allemaal. Dat betekent dat het maken van uw website ontwerp bruikbare
We &';. Ve al een aantal aspecten van usability &ndash besproken; navigatie, voorrang en tekst. Hier zijn drie belangrijkste zijn:
Vasthouden aan de normen: Er zijn bepaalde dingen die mensen verwachten, en niet waardoor ze veroorzaakt verwarring. Bijvoorbeeld, als de tekst heeft een onderstreping, verwacht je dat het een link zijn. Doen anders is niet goed usability praktijken. Tuurlijk, kunt u een aantal conventies te breken, maar het grootste deel van uw website moet precies doen wat de mensen verwachten dat het doen
Denk na over wat gebruikers daadwerkelijk zal doen: Prototyping is een gemeenschappelijk instrument dat wordt gebruikt in het ontwerp om daadwerkelijk &'; probeer &';! een ontwerp. Dit wordt gedaan omdat vaak wanneer u daadwerkelijk gebruik maken van een ontwerp, de kleine dingen die een groot verschil maken merk je. ALA had een artikel een tijdje terug nooit genoemd Gebruik een waarschuwing When You Mean Undo, dat is een uitstekend voorbeeld van een kleine interface design beslissing die kunnen maken dat het leven zuigen voor een gebruiker
Denk gebruiker taken:. Wanneer een gebruiker gaat om uw site wat ze eigenlijk proberen te doen? Een lijst van de verschillende soorten taken mensen kunnen doen op een site, hoe ze zullen bereiken, en hoe makkelijk je wilt om het te maken voor hen. Dit zou betekenen dat echt gemeenschappelijke taken op uw homepage (bijvoorbeeld &'; beginnen met winkelen &' ;, &'; te leren over wat wij doen, &'; etc.) of het zou kunnen betekenen zorgen zoiets als het hebben van een zoekvak altijd gemakkelijk toegankelijk. Aan het eind van de dag, uw web design is een hulpmiddel voor mensen om te gebruiken, en de mensen don &'; t als het gebruik van vervelende gereedschap
7. Alignment
houden dingen opgesteld is net zo belangrijk in web design als in print design. Dat &'; s niet zeggen dat alles moet in een rechte lijn, maar dat je door moet gaan en probeert om dingen consequent geplaatst op een pagina te houden. Uitlijnen maakt uw ontwerp meer besteld en verteerbaar, evenals het maken van het lijkt meer gepolijst.
8. Clarity (Scherpte)
houden van uw ontwerp helder en scherp is super belangrijk voor webdesign. En als het gaat om duidelijkheid, it &';. Niets aan de hand is, maar in Photoshop is het niet zo, allemaal om de pixels
In uw CSS, zal alles pixel perfect dus er &' zijn. Om een ​​scherpe ontwerp moet u te bereiken: Heb Houd randen vorm snauwde naar pixels. Dit kan handmatig betrekken opruimen vormen, lijnen en vakken als je &';. Re creëren ze in Photoshop Heb Zorg ervoor dat alle tekst wordt gemaakt met behulp van de juiste anti-aliasing setting. Ik gebruik &'; Sharp &'; veel.
 Ervoor zorgen dat contrast is hoog, zodat de grenzen duidelijk zijn omschreven.
 overmatige nadruk op grenzen net iets om het contrast te overdrijven.
9. Consistentie
consistentie betekent waardoor alles match. Rubriek groottes, lettertype keuzes, kleuren, knop stijlen, afstand, design elementen, illustratie stijlen, foto keuzes, enz. Alles moet worden thema van uw ontwerp samenhang tussen pagina's en op dezelfde pagina maken.
Houden van uw ontwerp in overeenstemming is over zijn professioneel. Inconsistenties in een ontwerp zijn als spelfouten in een essay. Ze verlagen alleen de perceptie van kwaliteit. Wat uw ontwerp eruit ziet, houden het consequent zal brengen altijd het op een inkeping. Zelfs als het &';. Sa slecht ontwerp, tenminste maken het een consistente, slecht ontwerp
De eenvoudigste manier om consistentie te behouden is te vroeg beslissingen te nemen en vast te houden aan hen. Met een echt grote site, maar dingen kunnen veranderen in het ontwerpproces.
Het hebben van een goede set van CSS style sheets kan ook een lange weg te gaan naar het maken van een consistent ontwerp. Proberen om de kern tags zoals en

definiëren op een zodanige wijze dat uw standaardinstellingen goed te passen en te voorkomen dat te herinneren aan speciale klasse namen alle tijd Restaurant  .;