Webdesign Trends for 2010
Purister vil sige, at det store design er tidløst. Ja, i en ideel verden skal vi ignorere tendenser.
Pragmatisk set er der dog stor værdi for at overvåge og indarbejde designtendenser, især med hensyn til hjemmesider.
Lad os se det i øjnene: nettet ændres i et hurtigt tempo. I modsætning til andre medier er designstrendene på nettet ikke blot drevet af æstetik.
Teknologi er ved at ændre sig, som kan ændre mediet kraftigt.
I 2010 ser vi designere fortsætter med at skubbe grænserne for webdesign og fastsætter følgende klare tendenser ...
Udskriv design
Print design har altid været en inspirationskilde til internettet. Webdesign har eksisteret længe nok for at dyrke en stærk kerne af designere, der aldrig har arbejdet i print. Som følge heraf ser vi mere inspiration fra print, da disse designere ser ud over nettet.
Serif Fonts
Et af de vigtigste spørgsmål om typografi er læsbarhed. Print designere har altid favoriseret serif skrifttyper, fordi kanterne forbedrer synligheden og letter lettere at genkende letterformularer.
Sans-serif skrifttyper er generelt betragtet lettere at læse på skærmen. Men med flere brugere, der browser med høj opløsning og forbedringer i skrifttype-udjævningsteknologi, er serif skrifttyper blevet meget læselige for kropstekst.
Store overskrifter
Print designere har brugt store overskrifter til at gribe opmærksomhed i aldre. Udskriftsmateriale har haft stor indflydelse, hvis det forventes at blive læst overhovedet. Hvis du så en kedelig brochure sidder på et skrivebord, ville du gider at hente det? Sikkert ikke.
Denne tendens startede i 2009 og er kun vokset i popularitet. Store overskrifter har vist sig at gribe opmærksomhed og kommunikere tydeligt.
Multi-Column Layouts
Designere skal arbejde inden for rammerne af deres medium. I modsætning til internettet tilbyder udskrivning ingen mulighed for at rulle, idet den er bundet, som det er ved papirets dimensioner. Ved at bruge flere kolonner kan du tilpasse mere indhold i samme rum.
Nu med flere skærmopløsninger og fremkomsten af gitterlayouter tilpasser flere designere denne metode til internettet for at gøre hjemmesider lettere at bruge og tilpasse sig mere indhold.
Big Lead Image
Et billede siger mere end tusind ord. Selvom det kan tage et stykke tid, før et fotografi har samme indflydelse på internettet som det gør i print (hvilket har meget højere opløsning), har vedtagelsen af bredbåndsadgang gjort store fotografier mere gennemførlige.
Vi ser flere websteder bruger store, effektive billeder til at trække brugere ind og skabe en fordybende oplevelse.
Diagrammer og infografier
Print designere har brugt grafik til at formidle komplekse oplysninger i årevis. Dette ses mest i blade og årsrapporter.
Grafik kan kommunikere komplekse relationer og forhold på en måde, der er for svært at gøre med almindelig tekst. Infographics har en tendens til at have et simpelt, men visuelt rige udseende, og flere designere vedtager infographics eller efterligner stilen i deres designs.
Enkelhed
Antoine de Saint-Exupery sagde engang: "Perfektion opnås ikke, når der ikke er noget mere at tilføje, men når der ikke er noget tilbage at tage væk." Fordelene ved enkelhed i design er mange.
Hick's Law fortæller os, at den tid, der kræves for at træffe en beslutning, stiger med hver mulighed. Derudover fortæller signal-til-støj teorien os, at alt, hvad der ikke tilføjer beskeden eller funktionen af et websted (signalet), kommer i vejen og gør designet mindre effektivt (støj).
Enkle designs er lettere at bruge og forstå, og de giver mulighed for større klarhed i formidling af meddelelser.
Minimalistisk og netdesign
Minimalisme er kraftig, men alligevel svært at mestre. Den indeholder intet andet end det væsentlige. Alt andet fjernes, hvilket resulterer i maksimal effekt af de elementer, der er til stede.
Minimalistiske design kræver, at et stærkt gittersystem er effektivt. Naturligvis vil de have masser af hvidt mellemrum, og så uden det gitter ville et minimalistisk design føles afbrudt og sjusket. Gitteret giver det organisation og struktur.
One-Page Layouts
Der er flere måder at forenkle. Et layout på en side viser to af disse måder: skjule og fjerne.
Effektive layouter på en side skjuler elementer, der ikke er prioriterede. Hvis en bruger ønsker at se et af disse elementer, kan de klikke for at afdække det. Dette er meget mere effektivt end at lade alt være synligt, hvilket ville gøre siden kompliceret og overvældende.
Ligeledes gør princippet bag layout på en side ekstra sider unødvendige. Med tilgængeligheden af kraftfulde JavaScript-biblioteker og hurtigere forbindelser har mange hjemmesider nu ringe behov for flere sider. Designere kan nemt tilpasse oplysninger på en side uden at forstyrre brugeren med et hierarki.
Massivt hvidt rum
I de tidlige dage af webdesign havde vi ikke meget skærm fast ejendom til at arbejde med, og så viste vi ikke meget hvidt rum. Hvis du nogensinde har prøvet at designe en hjemmeside til en 640 × 480 opløsning, vil du vide præcis, hvad jeg taler om.
Nu hvor vi har højere opløsninger og evnen til at skjule og afsløre elementer med JavaScript, er det meget lettere at udnytte det hvide rum.
Hvidt rum er afgørende for godt design. Det giver øjet et sted at hvile. Det forbedrer naturligvis kvaliteten af et design. Og det viser, hvilke elementer der er relateret til hinanden ved hjælp af nærhed.
Typografiske layouter
Mens vi plejede at være begrænset til et par udvalgte "web-sikre skrifttyper" med meget lidt kontrol over, hvordan de blev vist, har vi nu en bred vifte af værktøjer til at berige vores typografi.
Webdesignere har længe nydt ved at bruge typen som et subtilt værktøj til at kommunikere meddelelser. Med øget kontrol og kapaciteter ser vi flere designere fokus på typografi som det primære designelement.
CSS3 teknikker
Er du sikker på, at du kan udnytte CSS3 endnu? Tænk igen. Webpionerer som Andy Clarke og Jeremy Keith har længe præsenteret om "progressiv forbedring" i webdesign.
Progressiv forbedring handler om at designe websites, så de kan bruges på ældre browsere, samtidig med at de bliver "forbedret" for brugere, der forpligter sig til den nyeste teknologi.
Ved at designe i denne lejr kan du udnytte CSS3-egenskaber som afrundede hjørner, grænsebaggrunde og tekst- og bokseskygger. Brugere på moderne browsere vil se den pænere version, og de med ældre teknologi ( hoste | IE6 | hoste ) vil se den grundlæggende version.
CSS3 Animation
Animation på internettet har gået gennem mange faser. Vi kunne oprindeligt kun animere med GIF-billedfiler. Så var vi temmelig begrænset til Flash. Nu kan vi vælge fra Flash, Silverlight, GIF, JavaScript og endda CSS3. Subtile animationer kan være mindeværdige, og CSS3 gør det let og nemt.
Afrundede hjørner
Web 2.0-stilen i 2005 og 2006 lavede afrundede hjørner populært, til punktet at være irriterende. På det tidspunkt var det vanskeligt at skabe dem. Der var ingen måde at skabe rigtige afrundede hjørner på. I stedet blev de simuleret med CSS, JavaScript hacks og billedfiler.
CSS3 giver os nu mulighed for at generere afrundede hjørner direkte i browseren, hvilket gør dem ikke kun nemmere at skabe, men også meget mere effektive, fordi brugeren ikke behøver at downloade yderligere billeder eller JavaScript-filer.
Designere udnytter i stigende grad denne nye browser kapacitet i 2010.
Boks og tekstskygger
Brug af skygger til at skabe dybdefølelse er blevet gjort (og undertiden overdrevet) siden de tidligste dage på nettet. Men det var ikke altid praktisk. For at tilføje skygger til tekst måtte du bruge billeder, hvilket øgede belastningstiden og gjorde vedligeholdelsen vanskeligere. Boxskygger krævede flere billeder og CSS-tricks som "skydedøre".
CSS3 har stærkt tilpassede skyggefunktioner, som giver mulighed for en bred vifte af kreative effekter, herunder ikke kun dropshadows, men også indre skygger. Kreative designere har allerede brugt disse CSS3-effekter til at simulere både prægede og prægede effekter.
RGBa og Opacity
I årevis var det umuligt at arbejde med uigennemsigtighed og gennemsigtighed på nettet. Du havde tre valgmuligheder: simulere gennemsigtighed ved hjælp af flade billeder, håndtere PNG's inkompatibiliteter på tværs af browseren eller kamp med CSS 'grundlæggende gennemsigtighedsselektorer og filtre.
CSS3 giver designere meget bedre konsistens og frihed i at bruge uigennemsigtighed med RGBa-ejendommen. Mens du kan udnytte gennemsigtigheden på utallige måder, er et område, som det har hjulpet særligt, med komplekse baggrunde overlejret med halvgennemsigtige farver. Tidligere var denne effekt upraktisk eller umulig at skabe uden at benytte komplekse PNG-billeder.
Mobil-kompatibel design
Mobilettet har givet millioner af brugere mulighed for at tjekke deres bankkonto, mens de venter i kø, se de seneste resultater på metroen og opdatere deres Twitter-status under kørslen. (Hvilken af disse er en farlig vane?) Og mobilbanen fortsætter med at vokse hurtigt.
Vi har fået til det punkt, at enhver virksomhed skal overveje, om deres hjemmeside vil blive brugt på farten, og i så fald hvordan. Innovative virksomheder har allerede investeret meget i brugbare og brugervenlige mobile versioner af deres hjemmesider.
Kreativitet
Den eksplosive vækst i brug af sociale medier er et bevis for, at folk vil forbinde og dele ting, de er lidenskabelige om.
I designfeltet har vi oplevet stor vækst i deling og browsing af andres arbejde. Som designere bliver vi nu bombarderet af alles andres kreativitet. Dette hæver ikke kun kvaliteten af design, men det tilskynder til ideer, der skal deles, hvilket bidrager til en kultur af kreativitet og innovation.
Rene illustrationer
Hvis du er ligesom mig, voksede du op med at se Disney-film og beundrede al den indsats, der gik ud på at skabe hver animationsramme. Vi er godt forbi de dage, hvor illustrationen blev udført i blæk og markører, og denne udvikling i værktøjer har ført til nogle meget kreative tilgange til design.
Mange designere lærer, at glatte, rene, skarpe illustrationer skaber en karakteristisk følelse, der ikke kan replikeres af fotografering eller simpel clip art. Resultatet er en bred vifte af professionelt illustreret design, der er engagerende og indbydende.
Textured Backgrounds
Teksturerede baggrunde er ikke noget nyt på nettet. Men denne teknik har set en interessant variation i de sidste par måneder. Jeg henviser til det som "mikro-teksturer", som er subtile, næppe mærkbare teksturer i baggrunden.
Miniaturer
Du siger måske, "Thumbnails har eksisteret siden morgendagens begyndelse. Hvordan er dette en trend? "Sandt nok har de altid været brugt, men kun meget enkelt. Du ville have et miniaturebillede, som du kunne klikke på for at få et større billede. Det gjorde jobbet, men var kedeligt.
I de sidste par måneder har designere begyndt at spørge: "Hvordan kan vi gøre miniaturebilleder mere spændende?" Dette har ført til en opsving i miniaturebilleder, der er både kloge og brugbare.
akvarel
Når nettet udvikler sig, ser vi flere designere inspireret af forskellige kilder og medier. Ingen overraskelse over, at de fine kunstarter er blandt disse kilder.
En af de stilarter, der er opstået, er simuleringen af akvareller. Det bløde elegante udseende af denne stil er tydeligt og beroligende.
Håndskrift
Håndskrevne og script skrifttyper mishandles mest. Af denne grund styrter mange designere sig af begge typer, enten ude af afsky eller på grund af en frygt for at se amatørlige. Men på det seneste har mange designere fundet ud af, at den håndskrevne stil, når den bruges korrekt, giver en følelse af håndværk og planlægning. Bruges i den rigtige kontekst, er det en stærk måde at kommunikere på.
Sociale medier
Med folk bruger mere tid på Facebook end Google nu, er det ikke underligt, at designere søger innovative måder at integrere sociale medier på deres hjemmesider.
Nogle designere har gået så langt som at offentliggøre deres indhold på sociale medier netværk og derefter bruge deres hjemmesider til at aggregere det.
Det er sikkert at sige, at som 2010 skrider frem, vil vi se flere designere finde kreative måder at integrere sociale medier på deres hjemmesider for bedre at engagere brugere.
Faste elementer
Nu har browsere bedre støtte til position: fixed element, vi ser mere kloge anvendelser af det.
Der er masser af situationer, hvor et fast element (som vedvarende navigation) kan tjene ejerens forretningsmål og gøre hjemmesiden mere anvendelig.
Faste elementer er mindeværdige og forbedrer brugeroplevelsen. De har utallige kreative anvendelser, og vi vil fortsætte med at se designere drage fordel af dem.
Denne gæstepost er et samarbejde mellem de gode folk på Web Hosting Search og designer og udvikler Ross Johnson. Tjek Web Hosting Søg efter korrekt web hosting og 3point7designs for mere webdesign awesomeness af Ross
Hvilke af disse tendenser følger du mest? Hvad er nogle andre nye tendenser?