9 Pro Tips til Website Design Alle skal læse

1. Forrang (The Art of Controlling øjet)
godt webdesign, måske endda mere end andre typer af design, handler om information. Et af de vigtigste redskaber i dit arsenal til at gøre dette er forrang. Når du navigerer et godt design, bør brugeren blive ført rundt på skærmen af ​​designeren. Jeg kalder denne forrang, og det &'; s. Om, hvor meget visuel vægt forskellige dele af dit design har
Et simpelt eksempel på forrang er, at i de fleste steder, er det første, du ser, er logoet. Dette er ofte fordi det &'; s store og indstillet på, hvad der er blevet vist i undersøgelser for at være det første sted folk ser (øverst til venstre). Dette er en god ting, da du sandsynligvis vil en bruger til straks vide, hvad webstedet er det de ser.
Men forrang skal gå meget længere. Du skal dirigere brugeren &'; s øjne gennem en række trin. For eksempel kan du ønsker dit bruger at gå fra logo /mærke til en primær positionering erklæring, ved siden af ​​en fyndig billede (for at give webstedet personlighed), derefter til hoveddelen tekst, med navigation og en sidebar tage en sekundær position i .. sekvensen
Hvad dit bruger bør se på er op til dig, web-designer, for at finde ud af
For at opnå det, jeg kalder forrang du har mange værktøjer til din rådighed:
1. Position – hvor noget er på en side klart påvirker i hvilken rækkefølge brugeren ser
2 det.. Farve – hjælp dristige og subtile farver er en enkel måde at fortælle din bruger hvor de skal lede.
3. Kontrast – at være anderledes gør tingene skiller sig ud, og samtidig være det samme gør dem sekundært.
4. Størrelse – stort forrang for lidt (medmindre alt er stort, i hvilket tilfælde lidt kunne skille sig ud takket være Contrast)
5. Design Elements – hvis der er en gigantisk pil, der peger på noget, gæt hvor brugeren vil se?
2. Afstand
Da jeg først begyndte at designe, jeg ønskede at udfylde alle tilgængelige plads op med ting. Jeg troede tomt rum syntes spild. Jeg fandt imidlertid, det modsatte er tilfældet.
Afstand gør tingene klarere. I Webdesign er der tre aspekter af plads, du bør overveje: Salg Linjeafstand: Når du lægger tekst ud, rummet mellem linjerne direkte påvirker, hvor læsbar det ser ud. For lidt plads gør det nemt for øjet at smitte fra den ene linje til den næste; for meget plads betyder, at når du er færdig med en tekstlinje og gå til det næste øjet kan gå tabt. Så du har brug for at finde en gylden middelvej mellem de to. Du kan styre linjeafstand i CSS med &'; line-højden &'; vælgeren. Generelt finder jeg den standard værdi er normalt for lidt afstand til min smag. Linjeafstand er teknisk kaldes førende, der stammer fra den proces, der printere, der anvendes til at bruge til at adskille tekstlinjer i gamle dage – ved at placere stænger af bly mellem linjerne
Padding:. Generelt tekst skal aldrig røre andre elementer. Billeder, for eksempel, bør ikke være rørende tekst, hverken bør grænser eller tabeller.
Padding er rummet mellem elementer og tekst. Den enkle regel her er, at du altid skal have plads der. Der er undtagelser naturligvis, især hvis teksten er en slags overskrift /grapic. Men som hovedregel, at sætte mellemrum mellem tekst og resten af ​​verden gør det uendeligt mere læsbar og behagelig og hvid Space:. Først og fremmest, hvide rum gør ikke &'; t nødt til at være hvid. Udtrykket henviser blot til tomme plads på en side (eller negativ plads, da det &'; nogle gange s kaldes). Hvide rum bruges til at give balance, proportioner og kontrast til en side. En masse hvide rum tendens til at gøre ting synes mere elegant og modeindustrien, så for eksempel hvis du går til en dyr arkitekt websted, du &'; ll næsten altid se en masse plads. Hvis du vil lære at bruge blanke tegn effektivt, gå gennem et magasin og se på, hvordan reklamer er lagt ud. Annoncer for store mærker af ure og biler, de har tendens til at have en masse tom plads, der bruges som et element i designet.
3. Navigation
En af de mest frustrerende oplevelser du kan have på enhver hjemmeside er at være i stand til at regne ud, hvor de skal gå, eller hvor du er. I &'; d gerne tro, at for de fleste webdesignere, navigation er et koncept, vi &'; ve formået at mestre, men der er altid en, der beviser mig forkert. Der er to aspekter af sejlads at huske på:
Navigation:? Hvor kan du gå
Der er et par commonsense regler at huske her. Knapper til at rejse rundt et websted skal være let at finde – mod toppen af ​​siden og let at identificere. De skal se ud navigationsknapperne og være godt beskrevet. Teksten på en knap skal være temmelig klart, hvor det &'; s tager dig. Bortset fra den sunde fornuft, det &'; s også vigtigt at gøre navigation brugbart. For eksempel, hvis du har en rollover undermenu, hvilket sikrer en person kan komme til undermenupunkter uden at miste rollover er vigtig. Ligeledes ændre farven eller billedet på rollover er fremragende feedback til en bruger
Orientering:. Hvor er du nu
Der er masser af måder, du kan orientere en bruger så der er ingen undskyldning for ikke at?. I små steder, kan det være bare et spørgsmål om en stor overskrift eller et &'; ned &'; version af den relevante knap på din menu. I en større hjemmeside, kan du gøre brug af brød crumb stier, sub-overskrifter og et oversigtskort for
4 virkelig tabt.. Design til Build
Livet har fået en hel del lettere, da webdesignere skiftet til CSS layouts, men selv nu er det &'; s stadig vigtigt at tænke over, hvordan du kommer til at opbygge et websted, når du &'; re stadig i Photoshop. Overvej ting som:
Kan det faktisk gøres
du måske har plukket et fantastisk skrifttype for din krop kopi, men er det faktisk en standard HTML skrifttype? Du har måske et design, der ser smuk, men er 1100px bred og vil resultere i en horisontal scrollng for de fleste internet-brugere. Det &'; s vigtigt at vide, hvad der kan og kan &'; t ske, og derfor tror jeg alle webdesignere bør også bygge sites, i det mindste nogle gange
Hvad sker der, når en skærm er Ændrer størrelsen
Har du brug for at gentage.? baggrunde? Hvordan vil de arbejde? Er designet centreret eller venstrestillet?
Er du gør noget, der er teknisk vanskeligt?
Selv med CSS positionering, nogle ting som lodrette justering er stadig en smule smertefulde og nogle gange bedst undgås helt.
Kunne små ændringer i dit design i høj grad forenkle hvordan du bygger det?
Sommetider flytte et objekt rundt i et design kan gøre en stor forskel i, hvordan du skal kode din CSS senere. Især når elementer af et design på tværs over hinanden, det tilføjer lidt kompleksitet til build. Så hvis din design har, siger fire elementer, og hvert element er helt adskilt fra hinanden, ville det være virkelig let at bygge. På den anden side, hvis alle fire overlapper hinanden, kan det stadig være let, men vil sandsynligvis være en smule mere kompliceret. Du skal finde en balance mellem, hvad der ser godt ud og små ændringer, der kan forenkle dit build.
For store sites, især, kan du forenkle tingene?
Der var en tid, hvor jeg plejede at gøre billedet knapper til mine websteder. Så hvis der var en download-knappen, for eksempel, ville jeg lave en lille download-billede. I det sidste års tid, I &'; ve skiftet til at bruge CSS til at gøre mine knapper og har aldrig set sig tilbage. Sikker på, betyder det, mine knapper don &'; t altid have den fleksibilitet jeg kunne ønske sig, men besparelserne i build tid fra ikke at skulle gøre snesevis af lille knap billeder er enorme
5.. Typografi
tekst er den mest almindelige element i design, så det &'; s ikke overraskende, at en masse af tanke er gået ind i den. Det &'; s vigtigt at overveje ting som:
Font Choices: Forskellige typer af skrifter siger forskellige ting om et design. Nogle ser moderne, nogle ser retro. Sørg for at du bruger det rigtige værktøj til jobbet
Skriftstørrelser:. År siden det var trendy at have virkelig lille tekst. Heldigvis er disse dage folk er begyndt at indse, at tekst, beregnet til at blive læst, ikke bare set på. Sørg for, at din tekst størrelser er konsekvente, store nok til at blive læst, og proportioneret så overskrifter og sub-overskrifter skiller sig ud
passende Afstand:. Som beskrevet ovenfor, afstand mellem linier og væk fra andre objekter er vigtigt at overveje. Du bør også tænke på afstanden mellem bogstaver, selv på nettet er det af mindre betydning, da du don &'; t har så meget kontrol
Linie Længde: Der er ingen ufravigelig regel, men generelt dine tekstlinjer. shouldn af &'; t være for lang. Jo længere de er, jo sværere er de at læse. Små kolonner af tekst arbejde meget bedre (tænke over, hvordan en avis udstikker tekst)
Farve:. En af mine værste vaner gør lav kontrast tekst. Det ser godt, men gør ikke &'; t læse så godt, desværre
afsnitsinddeling: Før jeg begyndte at designe, jeg elskede at retfærdiggøre teksten i alt.. Det gjorde for nice kanter på hver side af mine stykker. Desværre, justeret tekst tendens til at skabe mærkelige huller mellem ord, hvor de har været auto-afstand. Denne isn &'; t rart for øjet, når du læser, så holde sig til venstre-justeret, medmindre du tilfældigvis har en magisk krop tekst, der sker til rummet ud perfekt
6.. Usability
Webdesign isn &'; t bare om smukke billeder. Med så meget information og interaktion skal ske på et websted, det &'; s vigtigt, at du, designeren, sørge for det hele. Det betyder, at dit websted design brugbar
Vi &';. Ve allerede drøftet nogle aspekter af brugervenlighed – navigation, forrang, og tekst. Her er tre mere vigtigste:
Overholde standarder: Der er visse ting, folk forventer, og ikke give dem skaber forvirring. For eksempel, hvis tekst har en understregning, forventer du, at det er et link. Doing ellers ikke er god usability praksis. Sikker på, kan du bryde nogle konventioner, men de fleste af dit websted skal gøre præcis, hvad folk forventer det at gøre
Tænk over hvad brugerne rent faktisk vil gøre: Prototyping er et fælles værktøj, der anvendes i design til rent faktisk &'; prøv &';! en design. Dette sker, fordi ofte, når du rent faktisk bruger et design, du bemærker små ting, der gør en stor forskel. ALA havde en artikel et stykke tid tilbage kaldes aldrig bruge en advarsel, når du Mean Fortryd, som er et fremragende eksempel på en lille interface design beslutning, der kan gøre livet suge for en bruger
Tænk brugernes opgaver:. Når en bruger kommer til dit websted, hvad er de faktisk forsøger at gøre? Liste ud de forskellige typer af opgaver mennesker kan gøre på et websted, hvordan de vil nå dem, og hvor let du ønsker at gøre det for dem. Dette kan betyde at have virkelig almindelige opgaver på din hjemmeside (f.eks &'; starte shopping &' ;, &'; lære om, hvad vi gør, og' etc.) eller det kan betyde at sikre noget som at have et søgefelt altid let tilgængelig. I slutningen af ​​dagen, din web-design er et værktøj for folk at bruge, og folk don &';! T ligesom at bruge irriterende værktøjer
7. Justering
holde tingene linet op er lige så vigtig i webdesign som det er i print design. At &'; s for ikke at sige, at alt skal være i en lige linje, men snarere, at du skal gå igennem og forsøger at holde tingene konsekvent placeret på en side. Justering gør din design mere bestilt og fordøjelig, samt at gøre det ser mere poleret.
8. Klarhed (Skarphed)
holde dit design klar og skarp er super vigtigt i Web-design. Og når det kommer til klarhed, det &';. Handler om pixels
I dit CSS, vil alt være pixel perfekt, så der &'; s ikke noget at bekymre sig om, men i Photoshop er det ikke så. For at opnå et skarpt design, du er nødt til at:
Hold form kanter knækkede til pixel. Dette kan indebære manuelt oprydning figurer, linjer og kasser, hvis du &';. Re skabe dem i Photoshop
Sørg enhver tekst er skabt ved hjælp af den relevante anti-aliasing indstilling. Jeg bruger &'; Sharp &'; en masse.
 Sikring af, at kontrasten er høj, så grænserne er klart defineret.
 Over-understrege grænserne bare lidt at overdrive kontrasten.
9. Sammenhæng
Sammenhæng betyder at alt kamp. Udgifts- størrelser, skrifttype valg, farvestoffer, knap stilarter, afstand, designelementer, illustration stilarter, foto valg mv Alt skal være tema for at gøre dit design sammenhængende mellem sider og på samme side.
Holde din design konsekvent handler om være professionel. Uoverensstemmelser i et design er som stavefejl i et essay. De bare sænke opfattelsen af ​​kvalitet. Uanset hvad dit design ser ud, holde det konsekvent vil altid bringe det op et hak. Selv om det &';. Sa dårligt design, i det mindste gøre det til en konsekvent, dårligt design
Den enkleste måde at bevare sammenhængen er at gøre tidlige beslutninger og holde sig til dem. Med en virkelig stor sted, dog kan tingene ændre sig i designprocessen.
Have et godt sæt af CSS style sheets kan også gå en lang vej til at gøre en konsekvent design. Prøv at definere centrale tags som og

på en sådan måde, at gøre dine standardindstillinger matcher korrekt og undgå at skulle huske specifikke klasse navne hele tiden
.