8 ideer, teknikker og triks for webdesignverktøyet ditt

Like viktig som informasjon og grensesnitt design er det en fornøyd følelse av å designe noe som bare ser flott ut som holder oss i gang når de kreative brønnene er tørre, når du har stirret på et tomt lerret i flere timer, Jeg har reddet hundre attempt.psd, og når du er lei av design. Det er fordi du vet at når du har det ferdige, polerte, verre kunstverket på skjermen, og du har byttet Photoshop til fullskjermmodus, og du ser på det fra forskjellige vinkler rundt i rommet, og du er basking i ære av dine perfekt posisjonerte piksler, vet du bare at dette er verdens største yrke!

Dette innlegget er dag 5 i vår webdesignsession. Creative Sessions "Session Day 4Session Day 6"

1 - Ikke vær fornøyd med 1 Iteration

Når du designer en nettside for en klient, må du ofte gi et par forskjellige designkonsepter. Når du føler at du har fått det riktig første gang, er det ganske irriterende å mudre opp en annen versjon som du er ganske sikker på, vil ikke gjøre det ut av Photoshop. Men over tid har jeg innsett at det faktisk er en god ide å lage mer enn én versjon, uansett hvor glad du er med den første.

Enten det er flere iterasjoner av samme design, eller flere design, generelt synes mer tid å få et bedre resultat. Det er ikke å si at du bør fortsette å legge til et design, faktisk er det ofte bedre å ta ting unna. Hvis du gjør flere designkonsepter, kan du noen ganger slå sammen de beste elementene i ett design til et annet.


Teknikk: PSD Snapshots


Snapshots er en enkel måte å eksperimentere med et design uten å miste noe eller lage bazillions av kopier

Photoshop har en kul funksjon som lar deg lage øyeblikksbilder av et punkt i dokumentets historie. Når du har opprettet et øyeblikksbilde, kan du bla frem og tilbake mellom forskjellige stillbilder, det første historikkpunktet og de siste 20 eller så trinnene. Dette betyr at du kan fortsette å ta øyeblikksbilder og deretter prøve nye tanker om å se hvor de tar deg. Men vær forsiktig, øyeblikksbilder blir ikke lagret når du lagrer en fil, så du må gå gjennom hverandre og lagre hvert øyeblikksbilde på slutten av dagen.

Slik tar du et øyeblikksbilde:

  1. Åpne en PSD-fil du har jobbet med
  2. Gjør et par endringer
  3. Åpne History Palette (Vindu> Historie)
  4. Nede på bunnen av History Palette klikker du på det lille kameraikonet
  5. Og du burde nå ha et øyeblikksbilde! Du kan nå bla mellom stillbildet og det første historikkskjermbildet

2 - Lær et bibliotek med stiler å tegne på


Det er så mange flotte stiler og ser seg rundt, gallerier som Creattica er en fin måte å se dem på

Som jeg har nevnt tidligere, er det aldri en god ide å bare hoppe på bandet av de nyeste trenderne og bruke visse stiler blindt. Det er imidlertid helt fint å bruke en bestemt stil når det passer. Så hvis du designer et nettsted som fortjener et fint, rent web 2.0-utseende, betyr det ikke at du bør unngå å gjøre det, bare fordi det skjer for å være trendy på den tiden. På samme måte hvis du designer et nettsted som fortjener en fin grungy, distressed design, så hvis skoen passer, bruk den!

Så med dette i tankene, hjelper det å ha et bibliotek med stiler å tegne på. Når du tegner et tomt når du starter et nytt prosjekt, kan det noen ganger være bra bare å falle tilbake på et forhåndsdefinert stilistisk valg og deretter la det lede deg. Uansett vil du komme opp med noe helt annet enn alt du har designet før, og det vil i det minste hjelpe deg med å komme i gang.

Men vær veldig forsiktig med å bruke feil stil, bare fordi det ser kult ut, og ikke fordi det passer for klienten / meldingen / innholdet. Den eneste motgiften til å gjøre dette er å vite og ha mange forskjellige designstiler. Hvordan lærer du design stiler? Vel, du kan begynne med å observere og etterligne dem. Jeg elsker å surfe gjennom gallerier med flott webdesign og absorbere visuelle ideer, se hvilke typer skrifter fungerer med hvilke typer utseende, og generelt lære andre menneskers teknikker. Når det kommer tid til å lage mine egne design, er informasjonen i hodet mitt et sted, men når det kommer ut, har det den unike vridningen av prosjektet jeg jobber med, så vel som mine egne kreative ideer.


3 - Kast gjenstander rundt for å se etter lykkelige ulykker


Da jeg designet RockablePress, tegnet jeg bare tilfeldige rektangler og bestemte meg for at sidebaret så ganske pent, å være litt utenfor balanse, det var en lykkelig ulykke.

Noen av de beste designene jeg noensinne har jobbet med var resultatet av det som en kollega av meg en gang kalte "lykkelige ulykker". Du vet når du slår av et lag, eller ved et uhell lim inn feil figur, eller sving Hue-skyvekontrollen for langt, og plutselig ser du på skjermen din og tenker "OMG dette er designgull!"

Jeg tror vi alle ønsker at vi kunne produsere fantastiske designideer på cue, men la oss innse det, noen ganger går du til tanken og du kjører tomt. Glade ulykker vil ofte starte din kreative tenkning, så det er fornuftig å ikke bare kjøre med dem når de skjer, men å oppmuntre dem ved å rote om. Jeg beveger noen ganger bare figurer rundt vilkårlig, prøver ut forskjellige farger eller gjør andre "tilfeldige" ting for å se om jeg kan løpe inn i noe jeg aldri tenkte på.


4 - Lag et tema rundt et visuelt element


TabCorp ved DTDesign tar stjerner til et helt nytt nivå

Noe som jeg finner fungerer bra, spesielt på nettsteder med mindre innebygd visuell design (tenk bedriftens sider) er å lage et spill på noe visuelt element. For eksempel kan du bruke stiplede linjer i ditt design, så du kan speile det temaet i menyen, i horisontale separatorer, i fotokollager, diagrammer, som punktposter og så videre. Det er tonnevis av forskjellige visuelle elementer du kan plukke opp og bruke som tema, eksempler inkluderer former, hjørnetyper som kurver eller diagonaler, mønstre, tekstkarakterer som parentes og så videre.

Selvfølgelig må du finne en balanse mellom en subtil speil og gå over toppen, men det er en nyttig teknikk for å knytte et nettsted sammen til et konsistent tema - spesielt som jeg sier om du ikke har mye annet å jobbe med!


5 - Ryd opp hvert piksel


Ta vare på piksler og de vil ta vare på deg. Sjekk ut artikkelen min om polering av et webdesign

Jeg er ganske glad i å si at webdesign handler om pikslene. Besøkende til nettstedene du designer vil se på arbeidet ditt nært og personlig, ofte med trette øyne og kløende musfinger. Det er viktig å ta vare på hver piksel på siden din, og slett og skarpe og ryddig slik at designen er skarp og klar.

Dette betyr at du sørger for at teksten er godt plassert mellom mellom bokstaver og mellom linjer, at kantene dine er skarpere og piksel perfekt, at grafikken er skjerpet (men ikke gå for langt og overskred!), Og at du bruker teknikker som 1px å få alt til å hoppe av siden.

For litt over et år siden skrev jeg en opplæring her på Psdtuts + ringte om polering av et webdesign som har mye informasjon om sletting og rydding av et nettsteddesign.


6 - Bruk Struktur!


Wilson Miners vakkert designet nettsted er avhengig av strukturen for å se fantastisk ut!

Fordi jeg lærte meg selv webdesign, er det noen virkelig grunnleggende designprinsipper jeg savnet på å lære tidlig. Et par år etter at jeg hadde begynt å lage nettsteder, kom jeg til en lokal designforening og møtte en fyr ved navn Matt Leach som ble redaktør for det underjordiske Empty magazine. Uansett gjorde Matt to ting for meg som jeg er evig takknemlig for. Den første er han introdusert meg til min kjære kone Cyan (yay!) Og det marginalt mindre viktige andre er at han lærte meg å bruke struktur i designet mitt.

På den tiden pleide jeg bare å kaste ting på en side, og noen ganger ble det lined opp eller jevnt fordelt eller ganske vanlig brukt et rutenett, og noen ganger godt, de bare falt, falt hvordan de falt. Matt kritiserte et design jeg hadde gjort og viste meg underverkene til justering og avstand, og jeg har aldri sett tilbake.

Hvis du ikke allerede gjør det, må du bruke litt tid på å gjøre disse tingene:

  1. Jevnt mellomrom ting
    For eksempel hvis du har litt tekst i en boks i sidelinjen, er det vanligvis en god ide at teksten skal være like langt fra toppen og siden. Det er en enkel vane, men gjør boksen ser balansert og uniform.
  2. Linj opp ting
    Hvis du har en haug med bokser, en logo, noen overskrifter, litt tekst, alle omtrent i samme posisjon, bør du sette opp kantene så mye som mulig. Det er noen triks til dette fordi noen bokstaver i overskrifter ikke skal være nøyaktig lined opp - det beste eksempelet er en hovedstad "T", eller hvis du har tekst i en boks, har du mulighet til å velge mellom lining opp i kassen eller kanten av teksten med de andre elementene. Jo mer du praktiserer justering og jo mer du ser på hvordan andre mennesker og design gjør det, desto bedre får du det til det blir instinktivt, og du finner det begynner å gjøre deg gal når folk ikke justerer ting riktig: -)
  3. Bruk rutenett
    Gitter er en forlengelse av foring av ting. Her forhåndsdefinerer du et sett med vertikale og horisontale mellomrom og stikker til dem (med variasjon). Må du gjøre dette ved å faktisk tegne i guider og kolonne linjer - egentlig ikke, personlig gjør jeg det for det meste ved bare å gjette og "få det til å se riktig ut". Men selvfølgelig jo mer komplisert nettverket og bruken av det, desto mer vil du kanskje bruke guider og hjelpere.
  4. Vær systematisk i fontstørrelser og familier
    En rookie feil er å bli gal med skrifttyper og mismatch størrelser, skrifter og farger. Mens variasjon er bra, vil du også ha konsistens. Det er best hvis du har 1-3 skrifttyper du bruker, og du gjør det helt konsekvent.

7 - Bland nå i noen ustrukturerte


Jay Hafling har et nettsted som faktisk er veldig strukturert, men det føles ustrukturert takket være noen godt posisjonerte designelementer.

Når du har struktur i designet, og du har blitt vant til å justere og bli bestilt og systematisk, bare deretter er det på tide å bryte ut og begynne å blande opp ting. Det er det gamle ordtaket du må forstå reglene før du knuser dem.

Å blande noen ustrukturerte elementer til en strukturert design er en veldig fin måte å få et resultat som ser bestilt og forståelig ut, men det er ikke kjedelig. Hovedformålet er å bryte ut av strukturen ved å bruke et par dristige visuelle elementer, for å variere mellomrom, skrifttyper og bruk av rutenettet, og likevel ha en underliggende struktur.

Faktisk kan du til og med bare helt bryte ut av strukturen helt, men det er ganske jævla vanskelig å gjøre det bra. En kjent designer som er kjent for å bryte regler - i stor grad å gjøre med typografi, men også med rister og designstrukturer - er David Carson.

SmashingMagazine har en rekke artikler om grid-basert design, inkludert denne om å bryte ut av rutenettet av vår egen Psdtuts + redaktør Sean Hodge.


8 - med hver prosjekt, gjør en ting du aldri har gjort før


Da jeg designet Creattica Daily bestemte jeg meg for å prøve å blande opp kommentarformen litt, det var ganske kult, og jeg har siden brukt det på tre andre temaer.

Hvis jeg kunne gi et råd til en ny designer, ville det være å gjøre dette til en personlig designvaner: Med hvert enkelt prosjekt du tar på, gjør du en ting du aldri har gjort før. Enten det er en ny skrift, et nytt rutenett, en ny visuell stil, et nytt fargevalg, en ny grafisk effekt, en ny menystruktur, en ny teknologi, noe. Selv om det betyr at jobben tar litt lengre tid enn det burde, selv om det fører til noen døde ender, kan du ha unngått, selv om det betyr at du må bruke litt ekstra for å kjøpe en ny skrifttype, bare gjør det.

Denne vanen vil gjøre en rekke ting for deg. Det vil tvinge deg til å kontinuerlig utvide horisonter som designer. Det vil holde arbeidet ditt frisk. Og det vil forhindre deg i å falle inn i et designrute og bare pumpe ut det "vanlige". Det er en vane du kan ta på tidlig i karrieren din som en måte å bli bedre på, og så lenge du er etablert, vil den fortsette å betale utbytte.

Hvis du bare tar en ting unna alle disse Web Design Week innleggene jeg har jobbet så hardt på, gjør det slik: å presse deg selv som designer, prøve nye ting, eksperimentere, å alltid lære, og å aldri slutte å finne glede i nye teknikker, stiler og ideer.

Dette innlegget er dag 5 i vår webdesignsession. Creative Sessions "Session Day 4Session Day 6"