Viktiga designtrender, december 2016
Finns du någonsin att du märker att ett visst designelement bara håller på att dyka upp? Även de små detaljer som ser lite obetydliga ut kan vara indikatorer på designtrender. Det är särskilt sant med elementen i den här månadens sammanfattning.
Var och en av dessa trender-vita kanter som inramar en webbdesign, cinemagraphs och små laddningsanimeringar är till synes enkla detaljer som förbättrar visuell upplevelse för användarna.
Här är vad som trender i design denna månad:
1) vita kanter
Fler webbdesign använder vita kanter eller ramar runt omkretsen av designen i webbläsaren. Det är en ny twist på en gammal idé när fler webbplatser byggdes till vissa storlekar och inramning användes för udda webbläsarbredder.
Det är något som bleknade eftersom fler designers valde responsiva, fullbreddsdesigner.
Den nya vridningen med inramning är intressant och är ett trevligt sätt att skapa en duk för designen. De flesta av de webbplatser som använder denna trend inkluderar en vitlig, men inte obligatorisk kant runt designen. Det är några pixlar breda och placeras vanligtvis runt tre eller fyra sidor av designen. (Vissa väljer att lämna ramen från botten av designen för att uppmuntra rullning.)
Det fina med den vita kanten är att designen är ren med vita linjer som kan hjälpa till med fokusering på starka färgval, dra ögat från kanten av skärmen till andra ljuselement (t.ex. textrutor eller samtal till handling) och kantning kan hjälpa till att skapa en bakgrundsduk för parallaxrullning eller andra animerade effekter.
Camden Town Brewery gör det här exceptionellt bra Den vita inramningen fyller in mellan element i designen för att skapa djup och fokus för användaren. Vit separation sätter ut varje ny innehållssektion på skärmen och bidrar till den övergripande organisationen av designen. (Dessutom ger vita accenter verkligen den starka röda och svarta färgpallen för att hålla kombinationen från att känna för överväldigande.)
2) Cinemagraphs
Cinemagraphs är bilder med rörelseelement i dem. Det kan vara allt från ett foto av en person som blinkar ögonen mot den subtila molnrörelsen i himlen där inget annat rör sig. Även om de vanligaste användningarna av designtendensen fortfarande verkar vara i reklam och sociala medier, börjar webbdesigners att integrera denna "live photo" -teknik också.
Det fungerar eftersom användarna är intresserade av rörelse. Det är effektivt för många av samma skäl video är ett bra alternativ för att ta tag i användarens uppmärksamhet. Rörelse och handling är engagerande. Det är intressant. Det känns verkligt.
När det gäller att arbeta med cinemagraphs, är bonusen att du kan skapa en design med rörelse men utan någon av de höga produktion som följer med ett videoprojekt.
Tricket att göra cinemagraphs arbete är att rotera rörelsen i verkligheten. Även om scenen är mer föreställd, till exempel Monokrom Paris , fysikens lagar bör gälla för rörelse på skärmen. Vatten bör strömma nedströms, t ex gravitation bör vara en kraft i hur rörelse uppstår.
Motionen behöver också vara enkel och subtil. För mycket rörelse, och en video kan vara ett bättre alternativ. Vad som gör användarna till en film är det överraskningselementet. Vad som ser ut som ett stillbild på en hjältebild har faktiskt något som händer i den. Den lilla divoten hjälper till att dra in människor, hålla dem engagerade i designen längre och förhoppningsvis resultera i en webbplatsomvandling.
3) Liten laddning Animationer
Lasttider är en stor sak. Men du kan inte alltid redogöra för hastigheten på det nätverk som en användare är på. det är där små laddningsanimationer kan bli en stor sak.
Vad som är annorlunda med den lilla animationsutvecklingen är att det är en ibland du ser det, ibland utformar du inte element. Hur som helst har designteamet tagit särskild försiktighet för att varje användare kommer till webbplatsen med en positiv upplevelse.
Dessa små animeringar är identifierbara av det faktum att de inte är en del av användarupplevelsen som räknas mot det övergripande webbplatsmålet. De är ett enkelt, litet element som fångar din uppmärksamhet för en snabb sekund medan den primära webbdesignen serveras.
Det snygga med trenden är att dessa små laddningsanimationer verkligen är små, från den visuella storleken till handlingen på skärmen, det finns inte mycket att se, men det som finns är helt underbart.
Här är tre bra exempel:
- Hannah Purmort s ladda animering är en enda rörlig stroke i den motsatta färgkombinationen på huvudskärmen. Strejken bärs även genom designen i rullningseffekten.
- Susa Ventures har en liten ikon med en liten belastningsfält. Den här griper din uppmärksamhet eftersom den lilla gorillan är visuellt intressant och gör dig nyfiken på webbplatsens innehåll.
- FPG använder en skiss som tycks dras på skärmen som resten av hemsidan laddas. Den enda aningen att det faktiskt är en laddningsanimation är att resten av skärmen är mycket mer utförlig en gång laddad med springande video och ännu fler skisser. Effekten är sömlös och är över nästan innan användaren inser att den har börjat.
Slutsats
Detaljer är kärnan i varje bra design. Det är viktigt att komma ihåg att det är viktigt att utforma (och redogöra för) saker som inte alla användare kommer att märka. Så är alla dessa trender förenade genom små designelement som inte är en självklar del av det övergripande estetiska.
Dessa små element kan vara den sak som verkligen sätter din webbplats för sig för en användare. Det kan vara en del av glädje som ger någon tillbaka till din design. Detaljer kan vara skillnaden mellan framgång och misslyckande.
Vilka trender älskar du (eller hatar) just nu? Jag skulle gärna se några av de webbplatser som du är fascinerad av. Släpp mig en länk på Twitter ; Jag skulle gärna höra från dig.