9 Pro Tips för webbdesign Alla måste Read

1. Företräde (Konsten att styra Eye)
bra webbdesign, kanske ännu mer än andra typer av design, handlar om information. En av de viktigaste verktygen i din arsenal för att göra detta är företräde. Vid navigering en bra design bör användaren ledas runt på skärmen av designern. Jag kallar detta företräde, och det &';. Handlar om hur mycket visuell vikt olika delar av din design har
Ett enkelt exempel på företräde är att i de flesta platser, är det första du ser är logotypen. Detta beror ofta på att det &'; s stora och ställs in på vad som visats i studier för att vara den första plats människor ser (uppe till vänster). Detta är en bra sak eftersom du vill förmodligen en användare att omedelbart veta vilken webbplats är det de tittar på. Omdömen Men företräde bör gå mycket längre. Du bör rikta användar &'; s ögon genom en sekvens av steg. Till exempel kanske du vill att din användare att gå från logotyp /varumärke till en primär placering uttalande, bredvid en punchy bild (för att ge plats personlighet), sedan till huvudtexten, med navigation och en sidebar med en sekundär plats i .. sekvensen
Vad ditt användarnamn bör titta på är upp till dig, webbdesigner, att räkna ut
att uppnå vad jag kallar företräde du har många verktyg till ditt förfogande:
1. Position – där något är på en sida tydligt påverkar i vilken ordning användaren ser det. Omdömen 2. Färg – med hjälp av djärva och diskreta färger är ett enkelt sätt att berätta ditt användarnamn var du ska leta.
3. Kontrast – att vara annorlunda gör saker sticker ut, samtidigt som samma gör dem sekundär. Omdömen 4. Storlek – stort företräde framför lite (om inte allt är stor, i vilket fall lite kan stå ut tack vare Kontrast) Review 5. Designelement – om det finns en gigantisk pil som pekar på något, gissa där användaren kommer att se ut?
2. Distans
När jag först började designa, jag ville fylla varje tillgängligt utrymme med grejer. Jag trodde tomt utrymme verkade slöseri. Men hittade jag det motsatta är sant. Omdömen avstånd gör saker klarare. I webbdesign finns det tre aspekter av utrymme som du bör överväga: Zazzle.se Radavstånd: När du lägger text ut utrymmet mellan raderna direkt påverkar hur läsbar det verkar. För lite utrymme gör det enkelt för ögat att spilla över från en linje till nästa; för mycket utrymme innebär att när du är klar med en textrad och gå till nästa ögat kan gå vilse. Så du behöver för att hitta en gyllene medelväg mellan de två. Du kan styra radavstånd i CSS med &'; line-height &'; väljaren. Generellt finner jag standardvärdet är vanligtvis för lite avstånd för min smak. Radavstånd är tekniskt kallas leder, som härrör från den process som skrivare brukade använda för att separera textrader i gamla dagar – genom att placera stänger av bly mellan raderna Omdömen Padding. Generellt text ska aldrig röra andra element. Bilder, till exempel, inte bör vara röra text, inte heller bör gränser eller tabeller. Omdömen Padding är utrymmet mellan element och text. Den enkla regeln här är att du alltid ska ha utrymme där. Det finns undantag förstås, i synnerhet om texten är något slags rubrik /grapic. Men som en allmän regel, att sätta utrymme mellan text och resten av världen gör det oändligt mycket mer lättläst och trevlig
tomt utrymme. Först av allt, vita rymden doesn &'en; t måste vara vit. Uttrycket syftar helt enkelt på tomt utrymme på en sida (eller negativ utrymme som det &'; s ibland kallas). Tomt utrymme används för att ge balans, proportioner och kontrast på en sida. En mycket vitt utrymme tenderar att göra saker och ting verkar mer elegant och fastigheterna, så till exempel om du går till en dyr arkitekt webbplats, du och' ll nästan alltid se en hel del utrymme. Om du vill lära dig att använda blank effektivt gå igenom en tidning och titta på hur annonser läggs ut. Annonser för stora märken av klockor och bilar, de tenderar att ha en hel del tomt utrymme som används som en del av designen.
3. Navigation
En av de mest frustrerande upplevelser du kan ha på någon hemsida är att inte kunna räkna ut var att gå eller var du är. I &'; D gärna tro att de flesta webbdesigners, är navigation ett koncept som vi och' ve lyckats herre, men det finns alltid en som bevisar mig fel. Det finns två aspekter av navigation att tänka på:
Navigation: Var kan du gå Review Det finns några sunt förnuft regler att komma ihåg här. Knapparna för att resa runt en webbplats ska vara lätt att hitta – mot toppen på sidan och lätt att identifiera. De ska se ut navigeringsknapparna och vara väl beskrivna. Texten på en knapp borde vara ganska tydligt om var det &'; s tar dig. Bortsett från sunt förnuft, det &'; s också viktigt att göra navigeringen användbar. Till exempel, om du har en rollover undermeny, vilket garanterar en person kan komma till undermenyalternativen utan att förlora välta är viktigt. På samma sätt ändra färg eller bild på överrullning är utmärkt respons för en användare Omdömen Orientering:. Var är du nu Review Det finns många sätt du kan orientera en användare så det finns ingen ursäkt att inte?. I små platser, kan det vara bara en fråga om en stor rubrik eller en &'; ner och' version av lämplig knapp i din meny. I en större webbplats kan du använda bröd smula spår, underrubriker och en sidkarta för iPhonen 4 verkligen förlorade.. Design att bygga Omdömen Livet har blivit mycket enklare eftersom webbdesigners över till CSS-layouter, men redan nu är det &'; s fortfarande viktigt att tänka på hur du ska bygga en webbplats när du &'; re fortfarande i Photoshop. Överväga saker som:
Kan det faktiskt göras Omdömen Du kanske har plockat en fantastisk typsnitt för din brödtext, men det är faktiskt en vanlig HTML typsnitt? Du kanske har en design som ser vacker men är 1100px bred och kommer att resultera i en horisontell scrollng för de flesta Internetanvändare. It &'; s viktigt att veta vad som kan och kan &'en; t göras, vilket är anledningen till att jag tror att alla webbdesigners bör också bygga webbplatser, åtminstone ibland
Vad händer när en skärm är ändrar storlek Review Behöver du upprepa.? bakgrunder? Hur kommer de att arbeta? Är designen centrerad eller vänsterjusterad
Gör du något som är tekniskt svårt? Omdömen Även med CSS positionering, vissa saker som vertikal inriktning är fortfarande lite smärtsamt och ibland bäst att undvika helt. Omdömen Kan små ändringar i din design förenkla hur du bygger det?
Ibland flytta ett objekt runt i en konstruktion kan göra stor skillnad i hur du måste koda CSS senare. I synnerhet när delar av en design kors över varandra, lägger den till en liten komplexitet till bygga. Så om din design har, säger fyra element och varje element är helt separat från varandra, skulle det vara riktigt lätt att bygga. Å andra sidan, om alla fyra överlappar varandra, kan det fortfarande vara enkelt, men kommer förmodligen att vara lite mer komplicerat. Du bör hitta en balans mellan vad som ser bra och små förändringar som kan förenkla din build. Idéer för stora webbplatser, i synnerhet, kan du förenkla saker?
Det fanns en tid när jag brukade göra bildknappar för mina webbplatser. Så om det fanns en nedladdningsknappen, till exempel, skulle jag göra en liten nedladdning image. Under det senaste året eller så, jag och' ve gått till att använda CSS för att göra mina knappar och har aldrig tittat tillbaka. Visst betyder det min knappar don &'en; t har alltid den flexibilitet jag skulle önska, men de besparingar i byggtiden från att inte behöva göra massor av små knappbilderna är enorma Omdömen 5.. Typografi
Text är den vanligaste konstruktionselement, så det &'; s inte förvånande att en hel del tankar har gått in i den. It &'; s viktigt att tänka på saker som:
Font val: Olika typer av typsnitt säger olika saker om en design. Vissa ser moderna, vissa ser retro. Se till att du använder rätt verktyg för jobbet
Font storlekar. År sedan var det trendigt att ha riktigt liten text. Lyckligtvis är dessa dagar människor har börjat inse att text avsedd att läsas, inte bara tittat på. Se till att dina textstorlekar är konsekvent, tillräckligt stor för att läsas, och proportioner så att rubriker och underrubriker sticker ut Mellanrum Omdömen lämpligt. Som diskuterats ovan, är viktigt att tänka på avståndet mellan linjerna och bort från andra föremål. Du bör också tänka på avståndet mellan bokstäver, men på webben detta är av mindre betydelse, eftersom du don &'en; t har så mycket kontroll Omdömen Linje Längd: Det finns ingen hård och snabb regel, men i allmänhet dina textrader. borde, &'; t vara för lång. Ju längre de är, desto svårare är de att läsa. Små kolumner med text arbetet mycket bättre (fundera på hur en tidning lägger ut texten) Review Färg:. En av mina värsta vanor gör låg kontrast text. Det ser bra ut, men doesn &'; t läsa så bra, tyvärr Omdömen stycke: Innan jag började designa, jag älskade att motivera texten i allt.. Det gjorde för fina kanter på ömse sidor om mina punkter. Tyvärr tenderar justerad text för att skapa konstiga gap mellan ord där de har varit auto-avstånd. Denna isn och' t trevligt för ögat när du läser, så håll dig till vänsterjusterad om du råkar ha en magisk textmassa som händer till rymden ut perfekt Omdömen 6.. Användbarhet
Webbdesign isn &'; t bara om vackra bilder. Med så mycket information och interaktion skall ske på en webbplats, det &'; s viktigt att du som designer, ge allt. Det innebär att göra din webbdesign Web användbar
Vi &';. Har redan diskuterat vissa aspekter av användbarhet och ndash; navigering, företräde och text. Här är ytterligare tre viktigaste:
Följa standarder: Det finns vissa saker som folk förväntar sig, och inte ge dem orsakar förvirring. Till exempel, om text har en understrykning, du förväntar dig att det är en länk. Gör annars är inte bra användbarhet praxis. Visst, kan du bryta några konventioner, men de flesta av din webbplats ska göra exakt vad folk förväntar sig att göra Omdömen Tänk på vad användarna faktiskt kommer att göra: Prototyping är ett gemensamt verktyg som används i design för att faktiskt och '; försöka &';! ut en design. Detta görs eftersom det ofta när du faktiskt använder en design, märker man små saker som gör en stor skillnad. ALA hade en artikel för ett tag sedan kallas aldrig Använd en varning när du menar Ångra, som är ett utmärkt exempel på en liten gränssnitt design beslut som kan göra livet suger för en användare
Tänk på användaruppgifter. När en användare kommer till din webbplats vad de faktiskt försöker göra? Lista ut olika typer av arbetsuppgifter människor kan göra på en webbplats, hur de kommer att uppnå dem, och hur lätt du vill göra det åt dem. Detta kan innebära att verkligen vanliga uppgifter på din hemsida (t.ex. &'; börja shoppa &' ;, &'; lär dig mer om vad vi gör, och' etc.) eller det kan innebära att se något som att ha en sökruta alltid lättillgänglig. Vid slutet av dagen, är din webbdesign ett verktyg för människor att använda, och folk don &'en;! T som att använda irriterande verktyg
7. Anpassning
hålla saker uppradade är lika viktigt i webbdesign som det är i tryckdesign. Att &'; s inte säga att allt ska vara i en rak linje, utan snarare att du ska gå igenom och försöker hålla saker konsekvent placerade på en sida. Justera gör din design mer beställas och lättsmält, samt gör det verkar mer polerat. Omdömen 8. Klarhet (Skärpa) Review hålla din design klara och skarpa är superviktigt i webbdesign. Och när det kommer till klarhet, det &';. Handlar om pixlarna
I ditt CSS, kommer allt att vara pixel perfekt så det &'; s ingenting att oroa sig för, men i Photoshop är det inte så. För att uppnå en vass design som du måste: Review Håll formen kanter fästs pixlar. Det kan handla om manuellt städa upp former, linjer och rutorna om du &';. Re skapa dem i Photoshop Review Kontrollera någon text skapas med hjälp av lämpliga anti-aliasing inställning. Jag använder &'; Sharp &'; en hel del. Omdömen  Se till att kontrasten är hög så att gränserna är klart definierade. Omdömen  Över betona gränserna bara något överdriva kontrasten. Omdömen 9. Konsekvens
Konsekvens innebär att allt match. Rubrik storlekar typsnitt val, färgämnen, knapp stilar, radavstånd, designelement, illustration stilar, foto val, etc. Allt ska vara tema för att göra din design konsekvent mellan sidor och på samma sida.
Hålla din design konsekvent handlar om att vara professionell. Inkonsekvenser i en design är som stavfel i en uppsats. De sänker bara synen på kvalitet. Oavsett din design ser ut, att hålla det konsekvent kommer alltid ta upp ett snäpp. Även om det och'. SA dålig konstruktion, åtminstone göra det en konsekvent, dålig design
enklaste sättet att upprätthålla konsekvens är att göra tidiga beslut och hålla fast vid dem. Med en riktigt stor plats, men kan saker och ting förändras i designprocessen. Äter en bra uppsättning av CSS-formatmallar kan också gå en lång väg att göra en enhetlig design. Försök att definiera kärn taggar som och Omdömen

på ett sådant sätt att göra din standardinställningarna stämmer ordentligt och slippa komma ihåg speciella klassnamn hela tiden Omdömen  ..