Web Design Trends för 2010
Purister kommer att säga att den stora designen är tidlös. Ja, i en idealisk värld, bör vi ignorera trenderna.
Pragmatiskt sett finns det dock mycket värde vid övervakning och införlivande av designtrender, särskilt när det gäller webbplatser.
Låt oss möta det: webben ändras i snabb takt. Till skillnad från andra medier är designtrender på webben inte bara drivna av estetik.
Tekniken förändras, vilket kan drastiskt förändra medlets kapacitet.
Under 2010 ser vi att designers fortsätter att driva gränserna för webbdesign, och ställer in följande klara trender ...
Skriv ut design
Utskriftsdesign har alltid varit en inspirationskälla för webben. Webbdesign har funnits tillräckligt länge för att odla en stark kärna av designers som aldrig har arbetat i tryck. Som ett resultat ser vi mer inspiration från tryck, eftersom dessa designers ser bortom webben.
Serif-teckensnitt
En av de viktigaste frågorna i typografi är läsbarhet. Utskriftsdesigners har alltid gynnat serif-teckensnitt eftersom kanterna förbättrar synligheten och gör brevformerna lättare att känna igen.
Sans-serif-teckensnitt har i allmänhet ansetts lättare att läsa på skärmen. Men när fler användare surfar med hög upplösning och förbättringarna i font-utjämningsteknologi har serif-teckensnitt blivit mycket läsbara för kroppstext.
Stora rubriker
Utskriftsdesigners har använt stora rubriker för att fånga uppmärksamhet i åldrarna. Utskriftsmaterialet måste ha stor påverkan om det förväntas läsas alls. Om du såg en tråkig broschyr som satt på ett skrivbord, skulle du bry dig om att hämta det? Antagligen inte.
Denna trend började 2009 och har bara ökat i popularitet. Stora rubriker har visat sig fånga uppmärksamhet och kommunicera tydligt.
Multi-Column Layouts
Designers måste arbeta inom ramen för sitt medium. Till skillnad från webben erbjuder utskriften inget alternativ för bläddring, som är bunden som det är av pappersformatets dimensioner. Med flera kolumner kan du passa mer innehåll i samma utrymme.
Nu, med ökade skärmupplösningar och tillkomsten av rutnätlayouter, anpassar fler konstruktörer denna metod till webben för att göra webbplatser enklare att använda och passa in mer innehåll.
Stor blybild
En bild säger mer än tusen ord. Medan det kan ta ett tag innan ett fotografi har samma inverkan på webben som den gör i tryck (vilket har mycket högre upplösning), har antagandet av bredbandsanslutning gjort stora fotografier mer genomförbara.
Vi ser att fler webbplatser använder stora bilder med hög effekt för att dra in användarna och skapa en uppslukande upplevelse.
Diagram och infographics
Utskriftsdesigners har använt grafik för att förmedla komplicerad information i flera år. Detta ses mest i tidningar och årsrapporter.
Grafik kan kommunicera komplexa relationer och förhållanden på ett sätt som är för svårt att göra med vanlig text. Infographics tenderar att ha ett enkelt men visuellt rikt utseende, och fler designers adopterar infographics eller efterliknar stilen i sina mönster.
Enkelhet
Antoine de Saint-Exupery sa en gång: "Perfektion uppnås inte när det inte finns något att lägga till, men när det inte finns något kvar att ta bort." Fördelarna med enkelhet i design är många.
Hick's Law berättar att tiden som krävs för att fatta beslut ökar med alla alternativ. Dessutom säger signal-till-ljudteorin oss att allt som inte lägger till meddelandet eller funktionen på en webbplats (signalen) kommer i vägen och gör konstruktionen mindre effektiv (bruset).
Enkla mönster är enklare att använda och förstå, och de möjliggör större klarhet när det gäller att kommunicera meddelanden.
Minimalistisk och Grid Design
Minimalismen är kraftfull men svår att behärska. Den innehåller bara de väsentliga. Allt annat tas bort, vilket resulterar i maximal effekt av de element som finns närvarande.
Minimalistiska konstruktioner kräver att ett starkt nätsystem är effektivt. Naturligtvis kommer de att ha gott om vitt utrymme, och så utan det nätet skulle en minimalistisk design känna sig kopplad och slarvig. Nätet ger det organisation och struktur.
One-Page Layouts
Det finns flera sätt att förenkla. En layout på en sida visar två av följande sätt: gömmer och tar bort.
Effektiva layouter på en sida gömmer alla element som inte är prioriterade. Om en användare vill se ett av dessa element kan de klicka för att avslöja det. Detta är mycket effektivare än att lämna allt synligt, vilket skulle göra sidan komplicerad och överväldigande.
På samma sätt gör principen bakom ensidiga layouter extra sidor onödiga. Med tillgången till kraftfulla JavaScript-bibliotek och snabbare anslutningar har många webbplatser nu lite behov av flera sidor. Designers kan enkelt passa information på en sida, utan att störa användaren med en hierarki.
Massiv vit utrymme
I de tidiga dagarna av webbdesign hade vi inte mycket skärmfastigheter att arbeta med, och så visade vi inte mycket vitt utrymme. Om du någonsin har försökt att designa en webbplats för en upplösning på 640 × 480, vet du exakt vad jag pratar om.
Nu när vi har högre upplösningar och möjligheten att dölja och avslöja element med JavaScript, är det mycket lättare att utnyttja det vita utrymmet.
Vitt utrymme är kritiskt för bra design. Det ger ögat ett ställe att vila. Det förbättrar naturligtvis kvaliteten på en design. Och det visar vilka element som är relaterade till varandra genom närhet.
Typografiska layouter
Vi brukade vara begränsade till några valda "webbsäkra typsnitt" med mycket liten kontroll över hur de visades, vi har nu ett brett utbud av verktyg för att berika vår typografi.
Webbdesigners har länge haft att använda typ som ett subtilt verktyg för att kommunicera meddelanden. Med ökande kontroll och kapacitet ser vi fler designers fokus på typografi som det primära designelementet.
CSS3 tekniker
Är du osäker på att du kan utnyttja CSS3 än? Tänk om. Webbpionjärer som Andy Clarke och Jeremy Keith har länge predikat om "progressiv förbättring" i webbdesign.
Progressiv förbättring handlar om att utforma webbplatser så att de är användbara på äldre webbläsare, samtidigt som de blir "förbättrade" för användare som begår sig till den senaste tekniken.
Genom att utforma i detta läger kan du dra nytta av CSS3-egenskaper som avrundade hörn, gränsbakgrunder och text- och rutaskuggor. Användare på moderna webbläsare kommer att se den trevligare versionen, och de som har äldre teknik ( hosta | IE6 | hosta ) kommer att se den grundläggande versionen.
CSS3 Animation
Animering på webben har gått igenom många steg. I början kunde vi bara animera med GIF-bildfiler. Sedan var vi ganska begränsade till Flash. Nu kan vi välja mellan Flash, Silverlight, GIF, JavaScript och till och med CSS3. Subtil animering kan vara minnesvärd, och CSS3 gör det lätt och enkelt.
Rundade hörn
Web 2.0-stilen 2005 och 2006 gjorde avrundade hörn populära, till att vara irriterande. Då var det svårt att skapa dem. Det fanns inget sätt att skapa riktigt rundade hörn. I stället simulerades de med CSS, JavaScript hack och bildfiler.
CSS3 låter oss nu generera avrundade hörn direkt i webbläsaren, vilket gör dem inte bara enklare att skapa men också mycket effektivare, eftersom användaren inte behöver ladda ner ytterligare bilder eller JavaScript-filer.
Designers utnyttjar i allt högre grad denna nya webbläsarkapacitet 2010.
Box- och textskuggor
Användning av skuggor för att skapa djup känsla har gjorts (och ibland överdriven) sedan de tidigaste dagarna på webben. Men det var inte alltid praktiskt. För att lägga till skuggor i text måste du använda bilder, vilket ökade laddningstiden och gjorde underhållet svårare. Boxskuggor krävde flera bilder och CSS-tricks som "skjutdörrar".
CSS3 har mycket anpassningsbara skuggfunktioner, vilket möjliggör ett brett utbud av kreativa effekter, inklusive inte bara droppskuggor utan inre skuggor också. Kreativa designers har redan använt dessa CSS3-effekter för att simulera både präglade och präglade effekter.
RGBa och opacitet
I åratal var det nästan omöjligt att arbeta med opacitet och öppenhet på webben. Du hade tre alternativ: simulera transparens med platta bilder, hantera PNGs inkompatibiliteter på tv-webbläsaren, eller kämpa med CSS: s grundläggande transparensväljare och filter.
CSS3 ger designers mycket bättre konsistens och frihet i att använda opacitet med RGBa-fastigheten. Medan du kan dra nytta av öppenhet på otaliga sätt, har ett område som det hjälpt särskilt med komplexa bakgrunder överlagda med halvgenomskinliga färger. Tidigare var denna effekt opraktisk eller omöjlig att skapa utan att tillgripa komplexa PNG-bilder.
Mobil-kompatibel design
Mobilbanan har gett miljontals användare möjlighet att kontrollera sitt bankkonto medan de väntar i rad, titta upp de senaste poängen på tunnelbanan och uppdatera sin Twitter-status när du kör. (Vilken av dessa är en farlig vana?) Och mobilbanan fortsätter att växa snabbt.
Vi har kommit fram till att varje företag måste överväga huruvida deras hemsida kommer att användas på språng, och i så fall hur. Innovativa företag har redan investerat kraftigt i användbara och användarvänliga mobila versioner av sina webbplatser.
Kreativitet
Den explosiva tillväxten som används av sociala medier är ett bevis för att människor vill koppla och dela saker de är passionerade för.
I designfältet har vi sett stor tillväxt i delningen och bläddring av andras arbete. Som designare bombas vi nu av allians kreativitet. Detta ökar inte bara kvaliteten på designen, men det uppmuntrar idéer att delas, vilket bidrar till en kultur av kreativitet och innovation.
Rena illustrationer
Om du är som jag växte du upp och tittade på Disney-filmer och beundrade all den ansträngning som gick till att skapa varje animationsram. Vi är väl över de dagar då illustrationen gjordes i bläck och markörer, och denna utveckling i verktyg har lett till några väldigt kreativa sätt att designa.
Många designers lär sig att släta, rena, skarpa illustrationer skapar en distinkt känsla som inte kan replikeras av fotografi eller enkel clip art. Resultatet är ett brett spektrum av professionellt illustrerade mönster som är engagerande och inbjudande.
Texturerad bakgrund
Texturerad bakgrund är inget nytt på webben. Men den här tekniken har haft en intressant variation under de senaste månaderna. Jag refererar till det som "mikro-texturer" som är subtila, knappt märkbara texturer i bakgrunden.
miniatyrer
Du kanske säger: "Miniatyrer har funnits sedan webbens början. Hur är det här en trend? "Det är sant att de alltid har använts, men bara helt enkelt. Du skulle ha en miniatyrbild som du kan klicka på för att få en större bild. Det gjorde jobbet men var tråkigt.
Under de senaste månaderna har designers börjat fråga, "Hur kan vi göra miniatyrer mer spännande?" Detta har lett till en uppsving i miniatyrer som är både kloka och användbara.
Vattenfärg
När webben utvecklas ser vi att fler designers inspireras av olika källor och media. Ingen överraskning att de finska konsten är bland dessa källor.
En av de stilar som har uppstått är simuleringen av akvareller. Det mjuka eleganta utseendet på denna stil är distinkt och lugnande.
Handstil
Handskriven och skript typsnitt missbrukas mest. Av denna anledning styr många designers av båda typerna antingen av avsky eller på grund av en rädsla för att se amatöriska. Men på senare tid har många konstruktörer funnit att den handskriven stilen, när den används ordentligt, ger en känsla av hantverk och planering. Används i rätt sammanhang är det ett kraftfullt sätt att kommunicera.
Sociala media
Med människor som spenderar mer tid på Facebook än Google nu, är det inte konstigt att designers letar efter innovativa sätt att integrera sociala medier på sina webbplatser.
Vissa designers har gått så långt som att publicera innehållet på sociala medier nätverk och sedan använda sina webbplatser för att aggregera det.
Det är säkert att säga att när 2010 utvecklas kommer vi att se fler designers hitta kreativa sätt att integrera sociala medier på sina webbplatser för att bättre kunna engagera användare.
Fasta element
Nu kan webbläsare bättre stödja position: fixed element, vi ser smartare användningar av den.
Det finns gott om situationer där ett fast element (som uthållig navigering) kan tjäna ägarens affärsmål och göra webbplatsen mer användbar.
Fasta element är minnesvärda och förbättrar användarupplevelsen. De har otaliga kreativa användningsområden, och vi fortsätter att se att designers utnyttjar dem.
Denna gästpost är ett samarbete mellan de goda människorna på webbhotell och design och utvecklare Ross Johnson. Kolla in webbhotell Sök efter rätt webbhotell och 3point7designs för mer webdesign awesomeness av Ross
Vilka av dessa trender följer du mest? Vad är några andra framväxande trender?