Share
Tidligere i Web Design Week så vi hvordan en enkel layout kan blandes og matches med forskjellige bakgrunner, mønstre og bilder, i dag skal vi ta det ett skritt videre. Vi skal helt endre utseendet på et nettsted ved å endre ikke bare bakgrunnen, men den generelle stilen til designet.
Vi begynner med Grungy Paper Texture Site vi opprettet i en tidligere opplæring, så endrer vi designen for å se minimal, metallisk, abstrakt og web2! Og etter det vil vi snakke om prosessen med å lære et bibliotek med webdesign stiler. Så la oss komme i gang ...
Dette innlegget er dag 8 i vår webdesignsession. Creative Sessions "Session Day 7Session Day 9"Så som du husker fra vår opprinnelige opplæring, ser nettstedet ditt ut som dette:
Det er en grungy utseende, strukturert design basert på en enkel, solid, underliggende layout. Det vi skal gjøre er å ta den underliggende oppsettet og behandle det som en coathanger, bytte forskjellige stiler inn og se på hvorfor hvert blikk fungerer.
I hver stil er det rikelig med variasjon, men her er noen kjennetegn på en grungy slags utseende:
En relativt ren design gift med noen grungy elementer - papir, teksturer.
Besøk nettstedet
Av plasseringstekst, collageelementer og teksturer.
Besøk nettstedet
Et godt eksempel på et grungy utseende som skal bestilles i en bloggstruktur.
Besøk nettstedet
Rikelig flere eksempler på alt grungy!
Besøk nettstedet
Vårt første designtrinn er å få tilbake vårt utseende helt og bli kvitt alt som ikke er avgjørende. Vi ønsker å gjøre dette slik at vi har utgangspunkt for de andre designene, men underveis vil vi skape en slags minimal utseende.
Dette er trinnene for å ta:
Her er vår minimale versjon:
Av alle de utseende vi skal gjøre i dag, er dette minst egnet for denne utformingen - spesielt til det flippede området. Likevel er det en OK tilnærming ...
I hver stil er det rikelig med variasjon, men her er noen kjennetegn på en minimal utseende:
Virkelig minimal med fargeskjema
Besøk nettstedet
Minimal typografi og rene linjer blandet med en dash med dristige fotografering / designelementer
Besøk nettstedet
Minimal møter Flash - og sjekk ut porteføljen av arbeid som inneholder mange flere eksempler på minimal design.
Besøk nettstedet
Mye mer minimal design for å sjekke ut
Besøk nettstedet
Med det minimale utseende vi nettopp har opprettet, kan vi nå legge til litt stil inn igjen. Denne gangen ønsker vi å lage en metallisk utseende. For det trenger vi litt lysgrå, og disse ser spesielt kjempebra ut på en mørk bakgrunn.
Dette er trinnene for å ta:
Her er vår metalliske versjon:
Og her er noen notater:
I hver stil er det rikelig med variasjon, men her er noen kjennetegn ved en metallisk slags utseende:
Apple har brukt en metallisk topp navbar for en stund nå, med små fasetter på teksten, et innebygd Apple-ikon og noen andre metalliske effekter.
Besøk nettstedet
Lance er en mester i Photoshop-grensesnittdesign, sjekk ut sin portefølje av metalliske grensesnitt
Besøk nettstedet
En veldig glatt ser metallisk design.
Besøk nettstedet
Et blikk som alltid er populært, er å bruke en abstrakt bakgrunn, litt gjennomsiktighet og litt super ren typografi. Så det skal vi gjøre neste gang!
Så, starter igjen fra minimal design:
Her er vår abstrakte versjon:
Og her er noen notater på designen:
I hver stil er det rikelig med variasjon, men her er noen kjennetegn ved et slikt utseende:
Stunning røyke bakgrunn utseende.
Besøk nettstedet
Kombinerer en strålende grungy bakgrunn med lag og seksjoner til stor effekt
Besøk nettstedet
Vår siste stil stopp er i cliche'd land av Web 2.0 design. Jeg må innrømme at jeg ikke engang er sikker på hva web2-design egentlig er, men jeg har forsøkt å gjøre denne versjonen vennlig og tilnærmet - som jeg antar er den viktigste egenskapen til stilen.
Starter igjen med minimal design:
Her er vår web 2.0 versjon:
Og her er noen notater!
I hver stil er det rikelig med variasjon, men her er noen få kjennetegn på et web 2.0 slags utseende:
For meg begynte disse gutta mye av det jeg knytter til Web 2.0
Besøk nettstedet
Jeg elsker den lille fyren! Et ess design av SimpleBits.
Besøk nettstedet
En super lys gradient gjør dette nettstedet.
Besøk nettstedet
Så her er de alle, du kan klikke på bildet nedenfor for å se dem i full størrelse. Også hvis du er et pluss medlem, kan du ta alle fem PSD-filene fra pluss-området.
Så la oss være ærlige, de fem layoutene er ikke nødvendigvis spesielt gode eksempler på deres respektive stiler. Mitt mål i denne opplæringen er å vise deg hvordan du kan gi et design et visst utseende eller stil ved å følge visse visuelle tegn. Du bør kunne se at du kan kle på samme layout på forskjellige måter.
For å virkelig lage et godt eksempel på en bestemt design stil, ville du sannsynligvis endre layoutet ditt mer spesifikt for å passe den stilen. Og selvfølgelig ville de alle ha behov for mye mer tid enn jeg hadde :-) Jeg håper fortsatt at denne bytte av stiler illustrerer hvordan du kan begynne å se på webdesign for å lære forskjellige designstiler.
I vår tidligere artikkel - 8 ideer, teknikker og triks for Webdesign Toolkit, nevnte jeg at det er en god ide å 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.
I denne artikkelen har vi kortfattet sett på fem utseende eller stiler, og det er millioner av stiler, substyler, kombinasjoner, tilpasninger og utseende som bare utfordrer stilen sammen.
Den eneste virkelige måten å lære design stiler på er å se på dem. Nå ser det ut og da er det ser! En vanlig person vil vanligvis se på et nettsted, en plakat eller en annen design, og bare se innholdet, meldingen og kanskje følelsen av designet. Som designer må du se på alt på en analytisk måte, se hvorfor et design har en viss følelse, hvilken melding selve designet gir, hvilke skrifttyper har blitt brukt, hvilke visuelle elementer og teknikker som designeren har brukt, hvordan det er kombinert og hvordan det er blitt arrangert.
Du bør alltid se på design - ikke bare på nettet, men overalt - fordi design stiler er på ingen måte begrenset til nettsteder. Plakater, reklame, TV-kreditter, flygeblad og hvor som helst der er design, det er mulighet til å lære.
Jo mer ser og lærer, desto mer vil du ha på din kommando. Når du setter deg ned for å designe et nytt prosjekt, vil du kunne trekke opp nye visuelle ideer selv når du står overfor et tomt lerret. Når du får designmaterialer eller merker, vil ting som skrifttyper, logoer og meldinger utløse stilistiske valg som ledetråder til et mysterium.
Når du bruker stiler du har sett før, bør du alltid forsøke å la din egen design stemme bli hørt. Gi det ditt eget spinn, du er egen bestemt blanding eller utseende, slik at designstemmen din blir hørt. Og alltid alltid sørg for at du bruker design som passer og forsterker meldingen - ikke faller i fellen for bare å tenke på den estetiske.
Husk skjemaet følger funksjonen. Stil og estetiske valg du gjør er der for å hjelpe nettsiden til å oppfylle sin funksjon.
Dette innlegget er dag 8 i vår webdesignsession. Creative Sessions "Session Day 7Session Day 9"
Accentsconagua