10 websitetendenser, der definerede 2015

Hvad får et websted til at se moderne ud, og hvad får det til at se dateret ud? Hvert år vælger de stærkeste overlevelse, hvilke tendenser der fungerer, og hvilke der ikke fungerer. Når 2015 nærmer sig slutningen, kan vi nu lokalisere de mest succesrige tendenser i 2015, dem der definerer årets stil og viser tilstrækkelig styrke til at videreføre det nye år. Her er vores top ti designtendenser udtrykt i 2015.

01. Lang rulning

Skyggeside

Shadow (http://shadow.is/) fremhæver tendensen til lang rulning

Med mobil browsing nu overstiger desktop I 2015 så webdesign mere på mindre skærme. Ligesom mange af tendenser på denne liste blev lang rulning populær for sin anvendelighed i responsivt design: mindre skærme betyder længere ruller.



Tidligere frygtede designere at placere indhold under folden, men ny forskning viser, at brugerne ikke har noget imod at rulle . I dag anerkender både designere og brugere værdien af ​​lang rulning: mere kreativ frihed, forbedret historiefortælling, stærkere interaktioner og forenklet navigation (hvis webstedet er lille nok).

Disse fordele har dog en pris; negative SEO-effekter og længere indlæsningstider, blandt de værste. Lang rulning fungerer bedst for websteder med tung mobiltrafik eller ofte opdateret indhold og er mindre effektiv for websteder med tunge medier som videoer.

Bedste praksis

  • Brug en klæbrig navigationsmenu eller en spring-til-sektion-mulighed for at forbedre navigationen. Langrullende websteder og enkeltsides websteder er modtagelige for desorienterende brugere, så læg en sikkerhedsforanstaltning på plads.
  • Tegn de legende aspekter af lang rulning med effekter som parallaks og rulningsudløste animationer
  • Undgå de negative SEO-effekter ved at følge rådene i dette Moz-artikel .

02. Kortlayouter

Behance hjemmeside

Behance (www.behance.net) er et godt eksempel på et rent kortlayout

En anden praktisk tendens, der er populært af mobilbevægelsen, viser kortlayouter et væld af indhold på en ren, organiseret måde. Dette gør dem bedst egnede til at søge på forskelligt og forskelligt indhold, især ved at linke til eksterne websteder: brugerne ved intuitivt at klikke på kortet bringer dem til det relaterede indlæg.

Som forklaret i guiden Webdesigntendenser 2015 og 2016 ved UXPin , kort fungerer bedst som adskillelse af indhold i fordøjelige doser, hver kun indeholder de data, en bruger skal vide:

  • Titel
  • Lokkende billede
  • Beskrivelse (eller relevante tags)
  • Kontrolpanel med indstillinger som favorit, kommentar osv.

Kort fungerer usædvanligt godt med responsivt design, fordi deres rækker og kolonner automatisk kan omarrangeres, så de passer til forskellige skærmstørrelser.

Bedste praksis

Gør, at hele kortet skal være klikbart, i modsætning til kun billedet eller tekstlige links. Fitts lov siger, at dette gør det lettere at interagere.

Kombiner kort med animation, især svæverudløste effekter. Små ekstraudstyr - ændringer i farve eller hele kortets ansigt eller endda snurrende eller snoede effekter - tilføjer liv til det stærkt strukturerede format, men nye og kreative applikationer kan adskille dit websted fra de mange andre ved hjælp af kort.

Det negative mellemrum mellem kort, kaldet 'tagrender', skal defineres tydeligt. Lad ikke brugerne gætte grænserne.

03. Fladt design reimagined

Toyota hjemmeside

Toyota-webstedet (www.toyota-insidedreams.com/dreamcar-collection/) bruger fladt design på en anden måde

For mange år siden hvornår skeuomorfisme var (ironisk nok) en moderne trend, fladt design fremkom som et kontradiktorisk alternativ.

Imidlertid er det flade design i dag langt fra dets oprindelse. Den nye, mere nuancerede iteration af fladt design - Ryan Allen kalder det ' Flat Design 2.0 '- giver mere mulighed for detaljer og blomstrer. Det nye flade design, der dominerede 2015, fik egenskaberne ved:

  • Belysning af blænding og højdepunkter
  • Gradient og / eller drop skygger
  • Større værdier til detaljering

Alt i alt er fladt design dog fladt.

Den generelle enkelhed og minimale udsmykninger er ikke gået nogen steder. Dens næsten tegneserie-grafik, læsbarhed-første typografi og legende farver forbliver uændrede og holder stilen som en, der er beregnet til let forståelse.

Bedste praksis

  • Ghost-knapper , med gennemsigtige baggrunde, der kun er indrammet af en oversigt, fremkom som en tendens inden for en trend. Heldigvis kan spøgelsesknapper bruges uden for fladt design: disse funktionelle kontroller forringer ikke et fremtrædende baggrundsbillede, hvilket gør dem til et populært supplement til heltebilleder.
  • Det smukke ved fladt designs enkle grafik er, at indlæsning er en leg. Dette fungerer perfekt til responsivt design.
  • Fladt design passer godt sammen med den minimalistiske tendens (se 10). Begge stræber efter øget forståelse gennem enkelhed, og begge overholder 'mindre er mere'.

04. Kraftige animationer

Bugaboo hjemmeside

Bugaboo (http://bit.ly/1HjLPyY) indeholder nogle seje animationer

Animationer påtog sig flere pligter og ansvar i 2015 og nåede ud over æstetisk værdi for at tjene mere praktiske roller.

Fordi bevægelse tiltrækker opmærksomhed, kan animation påvirke det visuelle hierarki af det, der først ses. Animerede effekter kan reklamere for visse elementer over andre, med potentialet til at kæmpe med mere traditionelle aspekter såsom størrelse eller farve.

Animationer har også beføjelse til at vise relationer. Tænk på en animeret effekt omkring minimering af et vindue, hvor det krymper og derefter flyver ind i menuen - denne animation bekræfter først handlingens succes, men viser også brugeren, hvor de i menuen kan se vinduet senere.

Fly-in menuen, som prototypet nedenfor i UXPin med no-code animations editoren, demonstrerer dette princip perfekt.

I det mindste fremhæver animation ellers kedelige handlinger. En svævende animation viser, at et link er klikbart mere end en simpel farveændring.

Bedste praksis

  • Web- og app-animationer kan stadig gøre brug af Disneys klassiker 12 animationsregler .
  • Lange rulleformater er stærkt afhængige af animation for at skabe udseendet af glat rulning. Når det er gjort godt, skaber animationer, der udløses ved at rulle, et mere fordybende og underholdende sted.
  • Indlæsning af skærmanimationer er en hæfteklamme med god grund: de giver brugerne et estimat til tiden og underholder dem, mens de venter.
  • Subtile animationer i et baggrundsbillede kan give en side energi og forhindre den i at blive kedelig ... så længe de ikke er overdrevne. For meget baggrundsbevægelse distraherer brugeren fra hovedindholdet, for ikke at nævne øger indlæsningstiderne.

05. Fængslende fotografering

Mario Frigerio hjemmeside

Bryllupsfotograf Mario Frigerios websted (http://www.fotofrigerio.it/da) gør stor brug af fantastiske billeder

Med populariteten af ​​HD-skærme i 2015 begyndte designere at være mere opmærksomme på fotografiernes kunstneriske kvalitet. Flere websteder er afhængige af betagende fotografering for deres visuelle præsentation i stedet for digital grafik.

Blandt årets fotograferingstendenser er heltebilledet kongeriget. Ved at udfylde hele baggrunden med et enkelt billede skaber websteder meget fordybende oplevelser, der kan trække brugerne hurtigere ind, hvilket gør dem perfekte til landings- og login-sider.

Der er også stor fleksibilitet i heltebilleder. Tonen og beskeden kan ændres for ethvert sted, så længe fotografiet matcher målene.

Bedste praksis

  • Mens brugerdefineret fotografering ofte er mere personlig, er stockfotografering en levedygtig mulighed for designere, der prøver at spare tid eller penge. For det bedste fra begge verdener skal du kombinere dem på en sådan måde, at de brugerdefinerede fotos får lagerfotos til at virke brugerdefinerede - for eksempel konsistente temaer gennem både brugerdefineret og lager. Prøv gratis lagerbilleder Uplash , Fra Pixabay og Pexels .
  • Farveoverlejringer gør det muligt for designere at manipulere, hvordan et billede opfattes ud fra farveens attributter. Hvis du giver et ellers trist billede et gult eller orange overlay, ser det ud til at være mere optimistisk og venligt.
  • E-handelswebsteder er begyndt at erstatte traditionelle produktbilleder med fotografier af produktet i deres naturlige miljø. At give sammenhæng omkring, hvordan det faktisk er at eje produktet, har været bevist at øge salget .

06. HD baggrunde

R / m Designskoles hjemmeside

R / m Design Schools websted (http://school.readymag.com/) har en spektakulær HD-baggrund

I samarbejde med trends inden for fotografering steg brugen af ​​HD-baggrunde også i popularitet i år. Med flere og flere mennesker, der ejer HD-enheder , det var bare et spørgsmål om tid.

Vi ser HD-kvalitet til video samt heltebillederne beskrevet ovenfor. Browsere og internethastigheder kan nu håndtere mere video, og filmbaggrund har en tendens til at være mere effektiv i atmosfære og følelsesmæssige forbindelser end et stillestående fotografi.

HD er en anden opløsning, der er større end 200 ppi (dpi), mens standarddefinition er 72 ppi. Dette får billeder designet med SD i tankerne til at virke blokerede eller slørede på HD-enheder, men HD-billeder ser fint ud på SD. Det betyder, at brugere med SD-skærme ikke bemærker forskellen - men dem med HD vil.

Bedste praksis

Scalar vektorgrafik (SVG) oversætter billeder ved hjælp af linjer og punkter, ikke pixel-for-pixel som rasterformater (.jpg, .png, .gif). Brug dem, når du kan til ny grafik, og gem rasterformater til virkelige billeder og video, fordi de har et fast antal pixels fra starten - det er derfor det er vigtigt at fange medierne i HD fra starten.

De fleste enheders baggrunde stemmer ikke overens med det sædvanlige 1: 1,5 billedformat for kameraer, så tag en aktiv rolle i beskæring. Ellers vil du ikke kontrollere, hvad der er skåret ud, og hvad der ses.

Lad ikke de overlegne billeder af baggrunden overskygge de vigtigere elementer på siden.

07. Fed typografi

Startside for Google Ideas

Google Ideas (www.google.com/ideas/) bruger fed typografi for at vise, at det er seriøst med at ændre verden

Da fontgengivelse ikke længere er et problem, og tilgængeligheden af ​​nye, gratis skrifttyper, er typografi begyndt at spille mere af en rolle i webdesign.

Fed typografi henviser til tekst, der henleder opmærksomheden på sig selv, men ikke nødvendigvis vild eller detaljeret. Faktisk er simpel typografi undertiden den mest dristige. Sammen med flade og minimalistiske tendenser favoriserer den aktuelle typografi også enkelhed. Et sans serif-skrifttype, der er sat i en tyk styling, giver et visuelt udsagn, mens det forbedrer læsbarheden.

Uanset skrifttypen er en af ​​de mest almindelige anvendelser af typografi i år ekstrem størrelse. Dette kan være stort eller lille - tendensen bringer simpelthen skrifttypen til sine ekstremer.

Bedste praksis

For at holde det enkelt skal du starte med kun to skrifttyper pr. Websted. For variation, eksperimenter med flere skrifttyper, men hold dig inden for den samme skrifttypefamilie.

Husk det primære mål med typografi er læsbarhed og læsbarhed . Det betyder ikke noget, hvor imponerende dit skrifttype er, hvis det ikke forstås.

Med tilstrækkelig vægt på grafik kan fed typografi overtage rollen som et billede på siden. Tekst kan også være eye candy, og det er almindeligt at se sider med smuk tekst som det centrale fokus.

08. Involveret interaktivitet

Beatbox Academy hjemmeside

Beatbox Academy (www.beatboxacademy.ca/) er vidunderligt interaktivt

Fremskridtene med HTML5, CSS, Javascript og jQuery tillader nu dybere interaktioner, a kraftfuldt værktøj til alle virksomheder . Brugere er nu mere involverede med mere visuel stimulering, stærkere indhold og mere engagerende kontroller. I år oplevede en stigning i:

  • Klikbare / strygbare elementer
  • Tilpasning (især geolokalisering)
  • Kontrol over afslørende indhold
  • Video og animation
  • Rulebaseret navigation
  • Overgange og sløjfefunktioner
  • Push-meddelelser

Stigningen i interaktioner betyder også en stigning i mikrointeraktioner.

Som forklaret i Webdesigntendenser 2015 & 2016 ved UXPin , mikrointeraktioner er detaljerne i interaktivitet: en dinglyd, når du sender en e-mail eller en animation for at henlede opmærksomheden på en ny underretning. Interaktionsdesign bliver kun mere indviklet, hvilket gør dette til en trend, der helt sikkert holder fast i et stykke tid.

Bedste praksis

Kendte signifikatorer - såsom et hamburgerikon mærket 'MENU' for at kommunikere en pullout-menu eller en afspilningsknap, der repræsenterer en klikbar video, omgår forklaring af funktionalitet og gør det lettere at interagere.

Husk brugerens mål. Hvert trin i designprocessen skal justeres for at hjælpe brugeren med at nå deres mål hurtigere. Personas, brugerscenarier og oplevelseskort nævnt i UX Design Process Best Practices fungerer bedst for at forstå dine brugere og deres mål.

Et produkts interaktivitet er dets rolle i samtalen med brugeren. For at bedre forstå brugerstrømme, prøv rollespil mellem bruger og interface , hvor en person faktisk taler for det fremtidige websted.

09. Lyse farver

Spotify: Fandt dem Første hjemmeside

Spotify: Found them First (https://spotify-foundthemfirst.com/en-US) fremhæver den aktuelle tendens til lysere farver

Som vi ser med populariteten af ​​fladt design, er den generelle tendens med visuals glad og mere optimistisk.

Lyse, 'glade' farver matcher den tone med en lys og venlig appel og er i dag mere tilgængelige. Tidligere var designere begrænset til 216 websikkerhedsfarver , men nu er der millioner, et fremskridt tidsindstillet pænt med fremkomsten af ​​HD-skærme.

Lyse farver tilbyder mere end bare en mere optimistisk æstetik. Opmærksomme farver reducerer sandsynligheden for, at et sted ser kedeligt ud - minimalismens naturlige svaghed. Når de bruges aktivt med typografi, kan farver henlede opmærksomheden på bestemte ord eller sætninger. Desuden tjener farver en værdifuld funktion til at antyde anvendelighed: tænk på kort, der skifter farve, når de svæves over, en åbenbar indikator for interaktivitet.

Bedste praksis

  • Hver farve fremkalder en anden følelse, så vælg de rigtige, der passer til dit produkts personlighed.
  • Flere farver er ikke altid bedre. Monokromatiske ordninger bruger forskellige nuancer af samme farve for at skabe en mere samlet grænseflade og give en stærk visuel erklæring, når de er parret med fed typografi.
  • De 3 vigtigste farveskemaer kan skabe den perfekte kontrast på dit websted.

10. Minimalisme

OMEGA Watches hjemmeside

OMEGA Watches websted (www.omegawatches.com/) er smukt minimalistisk

Jeg slutter med et andet resultat af stigende mobiltrafik: minimalisme, en stil defineret ved kun at bruge de nøgle eller minimale elementer.

I eksemplet ovenfor, OMEGA inkluderer kun, hvad der er nødvendigt: sprogindstillinger, udvidelig menu og logoet til at vende tilbage til hjemmesiden. Dette henleder næsten udelukkende opmærksomheden på produktets heltbillede.

Visuelt tilføjer minimalisme webstedet en sofistikeret luft, uanset genre. Men på et mere praktisk niveau reducerer trimning af fedt nedladningstiderne, forbedrer læsbarheden og skaber grænseflader så enkle, at de kan forstås med et øjeblik. Færre elementer gør, at responsivt design også er lettere.

Bedste praksis

  • Spar plads ved at skjule navigationsmenuer i slideouts eller rullemenuer.
  • Anvendelse af forskellige grader af symmetri gør de få resterende elementer mere potente. Overvej asymmetri, hvis du vil have et enkelt element til at skille sig ud, som et stort produktbillede, der opvejes af en lille tekstblok.
  • I betragtning af vægten på indholdet fungerer minimalistiske websteder godt med heltebilleder og videobaggrunde: der er simpelthen mindre UI-elementer til at konkurrere med grafikken.

Konklusion

Hvis du gerne vil vide mere, den gratis guide Webdesigntendenser 2015 & 2016 uddyber teknikker, der inkorporerer alle disse tendenser med endnu mere bedste praksis og 100 online ressourcer.

Du kan læse om, hvorfor de arbejder, og hvordan de anvendes, plus se de tendenser, der praktiseres i over 160 håndplukkede eksempler fra husholdningssider som Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas og mere.

Kan du lide dette? Læs disse!