Share
Tidigare i Web Design Week såg vi hur en enkel layout kan blandas och matchas med olika bakgrunder, mönster och foton, idag ska vi ta det ett steg längre. Vi kommer att helt ändra utseendet på en webbplats genom att ändra inte bara bakgrunden, men den övergripande utformningen av designen.
Vi börjar med Grungy Paper Texture Site som vi skapade i ett tidigare handledning, då ändrar vi designen så att den ser minimal, metallisk, abstrakt och web2! Och efter det kommer vi att prata om processen att lära ett bibliotek av webbdesignstilar. Så låt oss börja ...
Denna inlägg är dag 8 i vår webbdesignsession. Creative Sessions "Session Day 7Session Day 9"Så som du kommer ihåg från vår ursprungliga handledning ser webbplatsen ut så här:
Det är en grungy utseende, texturerad design baserad på en enkel, solid, underliggande layout. Vad vi ska göra är att ta den underliggande layouten och behandla den som en coathanger, byta olika stilar och titta på varför varje utseende fungerar.
I varje stil finns det gott om variation, men här är några kännetecken av ett grungigt slags utseende:
En relativt ren design gift med några grungy element - papper, texturer.
Besök sida
Av placeringstekst, collageelement och texturer.
Besök sida
Ett bra exempel på en grungy look läggs till beställt användning i en bloggstruktur.
Besök sida
Massor Fler exempel på allt grungy!
Besök sida
Vårt första designsteg är att förbereda vårt utseende helt och bli av med något som inte är nödvändigt. Vi vill göra det så att vi har en utgångspunkt för de andra mönsterna, men längs vägen kommer vi att skapa ett slags minimalt utseende.
Det här är stegen att ta:
Här är vår minsta version:
Av alla de utseende vi ska göra idag är det minst lämpade för denna layout - speciellt för flikområdet. Fortfarande är det en OK approximation ...
I varje stil finns det gott om variation, men här är några kännetecken av ett minimalt slags utseende:
Verkligen minimal med ett färgschema
Besök sida
Minimal typografi och rena linjer blandas med ett streck av djärva fotografi / designelement
Besök sida
Minimal möter Flash - och kolla in portföljen av arbete som innehåller många fler exempel på minimal design.
Besök sida
Mycket mer minimal design att kolla in
Besök sida
Med det minimala utseende som vi just skapat kan vi nu lägga till lite stil tillbaka. Den här gången vill vi göra en metallisk slags utseende. För det behöver vi lite ljusa gråar, och dessa ser speciellt fantastiska ut på en mörk bakgrund.
Det här är stegen att ta:
Här är vår metallversion:
Och här är några anteckningar:
I varje stil finns det gott om variation, men här är några kännetecken för en metallisk slags utseende:
Apple har använt en metall topp nav nav för en tid nu, med lilla fasader på texten, en inbäddad Apple-ikon och några andra metalliska effekter.
Besök sida
Lance är en mästare i Photoshop-gränssnittsdesign, kolla in sin portfölj av metallgränssnitt
Besök sida
En mycket smidig metallisk design.
Besök sida
En blick som alltid är populär är att använda en abstrakt bakgrund, lite genomskinlighet och en del super ren typografi. Så det ska vi göra nästa gång!
Så, börjar igen från minimal design:
Här är vår abstrakta version:
Och här är några anteckningar om designen:
I varje stil finns det gott om variation, men här är några kännetecken för ett sådant utseende:
Fantastiskt rökig bakgrundsutseende.
Besök sida
Kombinerar en lysande grungy bakgrund med skikt och sektioner till stor effekt
Besök sida
Vår sista stil stopp är i cliche'd land av Web 2.0 design. Jag måste erkänna att jag inte ens är säker på vilken web2 design egentligen är, men jag har försökt att göra denna version snäll och användbar - vilket jag antar är den främsta egenskapen hos stilen.
Börja igen med minimal design:
Här är vår web 2.0 version:
Och här är några anteckningar!
I varje stil finns det gott om variation, men här är några kännetecken för en web 2.0-typ av utseende:
För mig började dessa killar verkligen mycket av vad jag associerar med Web 2.0
Besök sida
Jag älskar den lilla killen! En essdesign av SimpleBits.
Besök sida
En super ljus gradient gör denna webbplats.
Besök sida
Så här är de alla, du kan klicka på bilden nedan för att se dem i full storlek. Även om du är en Plus-medlem kan du ta alla fem PSD-filer från Plus-området.
Så låt oss vara ärliga, de fem layouterna är inte nödvändigtvis särskilt bra exempel på deras respektive stilar. Mitt mål snarare i denna handledning är att visa dig hur du kan ge en design ett visst utseende eller stil genom att följa vissa visuella signaler. Du borde kunna se att du kan klä samma layout på olika sätt.
För att verkligen producera ett bra exempel på en viss designstil skulle du förmodligen ändra din layout mer specifikt för att passa den stilen. Och såklart skulle de alla behöva mycket mer tid än jag hade :-) Jag hoppas fortfarande att det här bytet av stilar illustrerar hur du kan börja titta på webbdesign för att lära sig olika designstilar.
I vår tidigare artikel - 8 Idéer, tekniker och tricks för din webbdesignverktyg, nämnde jag att det är en bra idé att ha ett bibliotek av stilar att dra på.
När du skriver ett tomt när du startar ett nytt projekt kan det ibland vara bra att bara falla tillbaka på ett fördefinierat stilistiskt val och sedan låta det styra dig. Oundvikligen kommer du att sluta med något helt annat än vad du har utformat förut, och det kommer åtminstone att hjälpa dig att komma igång. Men var väldigt försiktig med att använda fel stil bara för att det ser cool ut, och inte för att det är lämpligt för klienten / meddelandet / innehållet. Den enda motgiften för att göra detta är att känna till och ha många olika designstilar.
I den här artikeln har vi kortfattat tittat på fem utseende eller stilar, och det finns miljontals stilar, substyler, kombinationer, anpassningar och utseende som bara trotsar stilen tillsammans.
Det enda verkliga sättet att lära sig designstilar är att titta på dem. Nu ser det ut och då finns det ser! En vanlig person brukar se på en webbplats, affisch eller någon annan design och bara se innehållet, meddelandet och kanske känslan av designen. Som designer måste du titta på allt på ett analytiskt sätt, se varför en design har en viss känsla, vilket meddelande designen själv ger, vilka teckensnitt har använts, vilka visuella element och tekniker som designern har använt, hur det har kombinerats och hur det har arrangerats.
Du bör alltid titta på design - inte bara online, men överallt - eftersom design stilar inte på något sätt begränsas till webbplatser. Affischer, reklam, tv-krediter, flygblad och var som helst där finns design, det finns möjlighet att lära.
Ju mer titta och lära sig desto mer kommer du att ha på ditt kommando. När du sätter dig ner för att designa ett nytt projekt, kommer du att kunna dra upp nya visuella idéer, även när du möter en tomt duk. När du får designmaterial eller varumärken kommer saker som typsnitt, logotyper och meddelanden att utlösa stilistiska val som ledtrådar till ett mysterium.
När du använder stiler som du sett tidigare, bör du alltid sträva efter att låta din egen designröst höras. Ge den din egen snurr, du är egen blandning eller blick, så att din designröst hörs. Och alltid alltid se till att du tillämpar design som passar och förbättrar meddelandet - faller inte i fällan för att bara tänka på det estetiska.
Kom ihåg formuläret följer funktionen. De stil och estetiska val du gör är att hjälpa webbplatsen att uppfylla sin funktion.
Denna inlägg är dag 8 i vår webbdesignsession. Creative Sessions "Session Day 7Session Day 9"
Accentsconagua