Elements of Great Web Design Den polske

Når jeg legger sammen design, gjør jeg det vanligvis i to faser - Layout og polsk. Under layoutfasen legger jeg hovedobjektene på siden som regel etterbehandling med noe som ser relativt fullstendig ut. I den andre fasen - den polske - går jeg over designet og justerer farger, skriver behandlinger, skygger, lag, og rengjør det generelt. I denne første av en serie av opplæringsprogrammer på webdesign, ser vi på polsk.

Et kort forord

I motsetning til med Photoshop-effekter, kan ikke webdesign virkelig bli undervist i et sett med lett repeterbare trinn. Hvis du ser på de fleste flotte webdesign, er de ikke vanskelig å reprodusere teknisk. Du kan sannsynligvis skjermbilde et design, sette det inn i Photoshop og deretter kopiere det samme designlaget etter lag. Tricket kommer imidlertid opp med det designet i utgangspunktet.

Av denne grunn, i disse veiledningene på webdesign skal jeg prøve noen forskjellige teknikker for å formidle ulike aspekter av prosessen som jeg personlig går gjennom når du designer et nettsted.

I dag ser vi på et nettsted som jeg satte sammen tidligere i år, kalt Not By The Hour, som er en underplass for en av våre blogger kalt FreelanceSwitch. Heldigvis da jeg designet det for noen måneder siden, holdt jeg en versjon av PSD-filen før og etter jeg polerte den opp, så akkurat som i et vekttap kommercielt skal vi gjøre litt "før og etter" ...

Før jeg forklarer noen av de tingene jeg gjorde for å polere opp på nettstedet, er det viktig å se på før og etter.

Se før og etter

Trinn 1 - Klarhet:

Du vil høre meg si denne gangen, men når du designer for nettet, er det ALLE om pikslene. Et av dine mål bør alltid være å holde ting skarpt og rent. Dette betyr for eksempel:

Tekst Klarhet
Når du legger ut tekst, bør du tenke på hvilken anti-aliasing du bruker. For å gjøre dette vil du få opp tegnpanelet, som du kan gjøre ved å gå til Vindu> Tegn, eller når du har valgt Typeverktøyet og noe tekst uthevet, trykk Ctrl-T (ja det er samme snarvei for transformasjon, så du må sørg for at teksten er valgt). I panelet Karakter, ned nederst til høyre kan du velge mellom Ingen | Sharp | Crisp | Sterk. For forskjellige skrifttyper og forskjellige størrelser bør du eksperimentere. Jeg bruker for det meste innstillingen Sharp som vil tvinge noen piksler til å justeres og noen ganger forvrenger fonten litt ved mindre innstillinger. Men for eksempel i bildet under teksten Lager er satt til skarp, og derfor er jeg veldig klart definert når jeg bruker en 1px disposisjon.
fôr
Som du kan se mellom de lysere grå og mørkere gråstengene, har jeg lagt til en svak 1px linje. Dette trikset etterligner effekten av slipefilteret. Hvis du noen gang har kjørt en av skjerpfiltrene for ofte på et bilde, vil du legge merke til at de små grensene begynner å vises. Dette er fordi det legges vekt på grensen mellom at de to delene vises mer skilt for øyet og dermed skarpere. Så ofte vil jeg bruke en svak linje for å understreke grensen og få de to delene til å virke klarere.
farging
Farge kan også gjøre en stor forskjell i å skarpe ting opp. I dette tilfellet desaturerte jeg bakgrunnen fra en sort av grå / grønn til ren grå. Dette betyr at trykket, som har en grønn tone, skiller seg ut mer fra bakgrunnen og vinder opp og ser skarpere ut.
Rengjøring av objekter
En annen ting jeg ikke gjorde i dette bildet, men at du kan gjøre for å skjerpe ting er å gå gjennom objekter som logoen eller det trygge og sørg for at kantene er pikseljustert. Så, for eksempel, ta en titt på den venstre kanten av safeen sammenlignet med den høyre kanten. Du vil se at den høyre kanten ser litt sløret ut. Vi kunne fikse dette ved å bruke Polygonal Lasso Tool (L) og velge en liten kant fra høyre side og trykke Slett. Selvfølgelig er dette ikke viktig, og jeg mener ikke å høres nitskallet, men det er en god ide å tenke på disse detaljene og sørg for at alt er fint og skarpt!

Et annet element for å diskutere her er at i teksten vil du se en svak gradient / slagvirkning. Dette oppnås med tolagsstiler, et indre slag på 1 px og en subtil gradient. Jeg har brukt dette her fordi det er en del av FreelanceSwitch-merkevaren, og det er også ganske en Web 2.0-type effekt. Det gjøres best med skarp tekst som nevnt tidligere. Du kan se de eksakte lagformatene i Sample PSD nedenfor.

Trinn 2 - Lys og skygge:

Gradienter, gradienter, gradienter. Noen vil si at de er kjennetegnet til Web 2.0 design, og jeg må innrømme at jeg bruker dem hele tiden i designene mine. I bildet nedenfor ser du at jeg har lagt til skygger og gradienter til et par forskjellige steder for å gi designet mer dybde.

En av de viktigste forskjellene mellom print og webdesign etter min mening er mengden dybde du trenger i ditt design. Det jeg mener med dette er at i utskriftsteknologi, hvis du skulle ha et brosjyredeksel med en rett, flat farge, vil det ofte fremdeles se nydelig ut på grunn av papirmagasinet eller en celleglas som kan påføres og lysets reaksjon til det papiret / belegget. Så i "design" kan det se ut som en enkel flat farge, men i utgangen vil den ha en dybde likevel. På skjermen har du ikke denne effekten.

Dette er ikke å si at du ikke kan ha flate bakgrunner eller paneler med farger i webdesign, men alle de designere jeg har skrevet om kunstnerisk til å lage nettsteder, de vanligste to feilene jeg har lagt merke til er

Ikke klarer å fokusere på skarphet og klarhet i designet
I utskrift zoomer du sjelden rett inn for å endre individuelle piksler siden når noe skrives ut, vil det detaljnivået ofte unnslippe øyet uansett. Du tenker i millimeter ikke piksler.
Unnlater å legge til dybdeord og tilstrekkelig visuell interesse
Gradienter fungerer generelt ikke så godt i print, men på skjermen jobber de en godbit. På samme måte fungerer svakt skygger og høydepunkter godt på skjermen. Sammen kan de gjøre et nettsted mye mer visuelt tiltalende da de forskjellige elementene på skjermen spiller mot hverandre. I bildet nedenfor for eksempel ble pengesekkene, som var i utgangspunktet rette vektorbilder med flat farging, gitt svært subtile graderinger ved hjelp av Burn Tool (O) slik at de så mykere ut.

Trinn 3 - Precedence:

Precedence er det enkelt viktigste visuelle aspektet av informasjonsdesign. Og siden webdesign er i stor grad om hvordan du legger ut og presenterer informasjon til brukeren din, er forrang derfor av største betydning.

Hva mener jeg med forrang? Vel når du ser på siden, må du spørre deg selv, hva ser jeg først, hva er neste, hva er etter det, og så videre. Og hvorfor ser du på bestemte ting i en bestemt rekkefølge?

Visuell forrang er en blanding av faktorer:

Størrelse
Det er ganske tydelig at noe stort kommer til å ha forrang over noe lite. Så i dette designet har trygt og hovedtittel topp prioritet. Når du ser på siden, er det første du ser på de to elementene.
Farge
Farge skaper også forrang. For eksempel i Før bildet vil du se at undertekstene i området merket 4 i bildet nedenfor var i utgangspunktet like mørkeblå som ordene Hei der! Dette betydde at det var mindre forskjell mellom de to, og det var ikke så klart som var ment å bli lest først. Ved å fade dem tilbake til en beige får de mindre betydning, og det er tydeligere at de har mindre betydning i informasjonshierarkiet.
Bakgrunnsfarge
Med både bakgrunnsfarge og farge generelt er det viktig ikke så mye hvilken bestemt farge noe er som hva farger alt annet er i forhold. Så for eksempel hvis alt er svart på en side og det er en hvit gjenstand, åpenbart at det hvite objektet kommer til å hoppe ut på deg. I dette tilfellet med kontrasterende lys gul med mørkegrå får vi vekt. Så selv om det aller første på siden du ser er sikkert og ordene Å gjøre passiv inntekt, du vil sikkert merke En guide til neste og Del 1 | Del 2 |... navigasjon andre. Dette er hensiktsmessig da jeg vil at brukeren først skal se et visuelt bilde og en tittel slik at de vet hva de ser på, så vil jeg at de skal se primærnavigasjonen slik at de forstår hvordan man skal komme seg rundt på siden.
Stilling
Endelig plassering i oppsettet gjør også en forskjell i hvordan elementer oppfattes. Som du sikkert har hørt, viser studier at brukerens øye går fra øverst til venstre til nederst til høyre i en viss variasjon (jeg har sett begge studiene som sier at den går øverst til venstre til høyre og deretter nederst til venstre til høyre og alternativt at det går i en slags buk fra hjørne til hjørne.) Det viktige her er at å ha noe høyere opp gir vanligvis mer forrang, og å ha noe lenger igjen gir vanligvis noe mer forrang.

Trinn 4:

Jeg har sagt det før, jeg sier det igjen ... Det handler om pikslene!

I dette bildet vil du se hva som synes å være en ganske enkel gradient. Faktisk er det tre gradienter trukket inn og tre 1-pixel linjer brukt. Det er ganske subtilt, og utvilsomt gjør det ikke så stor forskjell, men etter min mening teller hver detalj mot slutten.

Trinn 5:

Noen i kommentarene spurte om Web 2.0 slags stiler. Her er en enkel effekt hvor du gir en 1- eller 2-pixel disposisjon og deretter en svak gradient for en bakgrunn. Hvis du ikke allerede hadde lagt merke til det allerede, vil du begynne å innse at det er over alt, muligens litt overbrukt, men fint, uansett.

Trinn 6:

På dette bildet kan du se hvordan noen ganger i løpet av polsk kan du til og med endre den faktiske informasjonen på siden. I dette tilfellet bestemte jeg meg for at selv om det var mer infromationally rik å ha alle titlene for de forskjellige delene under pengeposene, så det så rotete jeg trodde ikke det var spesielt informativt - selv om dette er noe diskutabelt. Så i stedet fjernet jeg det overskytende brune på brun tekst og erstattet den med fet gul på mørkegrå, som på grunn av kontrasten sprang ut.

Og der har du det!

Så det er min første webdesign opplæring. Gi meg beskjed i kommentarene hvis dette er informativt. Det er utfordrende å forklare webdesign! Vær også oppmerksom på at min stil på webdesign er selvfølgelig min smak, spesielt siden jeg er min egen klient i 99% av prosjektene jeg gjør i disse dager :-)

Neste gang jeg har et webområde for å designe, planlegger jeg å ta opp hele greia med et skjermopptaksprogram og deretter øke hastigheten til noen få minutter. Så du kan se frem til det! Jeg tror det kommer til å bli ganske kult, selv om jeg er litt nervøs fordi som alle designere noen dager kommer det lett, og noen dager er det en tom skifer inni.

Uansett håper du likte opplæringen. Vennligst gi det en Digg hvis du gjorde det!

Eksempel PSD

En rask notat om denne PSD, jeg har ikke merket noen av lagene eller gruppert dem. Dette er ganske bokstavelig talt PSD-en som jeg bygget på siden av, og jeg har zippet opp for at du skal se gjennom. Utformingen og innholdet til PSD er gitt rent til instruksjonsformål. Opphavsrett for design og illustrasjoner hviler hos respektive eiere. Vennligst ikke bruk elementer av designet andre steder.

Last ned PSD for denne opplæringen

Design og illustrasjon