20 Hetaste trender som kommer att skapa webbdesign Kom 2016

Som tiden inches framåt med varje år som löper, väger många nya designtrender i horisonten. Fältet för webbdesign förändras alltid med nya verktyg, arbetsflöden och bästa praxis för konstruktion av användbara layouter.

Det är svårt att förutse vilka exakta trender som kommer att dra största uppmärksamhet. Ändå visar den senaste historien ett mönster av trender som har växit som ett eldsvamp. Jag har organiserat 20 unika trender som har fått dragkraft under 2015 och kommer troligtvis att fortsätta bra in i 2016.

1. Sketch App för UI Design

Skiss ersätter snabbt Photoshop för alla UI-designuppgifter från lågfidelity wireframes till high-fidelity mockups & ikon design.

Sketch App är en Mac-only applikation som är gjord speciellt för webb- och mobildesigners. Det ger en mjukare arbetsmiljö för att skapa vektorelement för vilket gränssnitt som helst, men det behåller också många funktioner du kan förvänta dig av Photoshop som texteffekter och lagerstorlekar.

Medan det inte finns några tecken på att Sketch någonsin kommer att släppas för Windows, har det fortfarande blivit ett värdefullt val av OS X-användare. Det förenklade arbetsflödet och billigare prislapp ger Adobe en löpning för sina pengar. Om Sketch fortsätter att ge den bästa UI-designupplevelsen så kommer det säkert att fortsätta växa bra in i 2016 och därefter.

2. Webbläsarbaserade IDE

Desktop IDEs har funnits i årtionden med alternativ från Notepad ++ till Xcode och Visual Studio. En IDE gör det enklare att skriva kod med förslag och syntaxmarkering (bland andra funktioner).

Men traditionellt har IDE: er släppts som stationära applikationer. Under de senaste åren har vi sett en dramatisk ökning av webbläsarbaserade moln-IDE. Dessa kräver ingen annan mjukvara än en webbläsare, vilket gör det möjligt för devs att skriva kod från vilken dator som helst med internetåtkomst.

Cloud IDEs fungerar mer som webbapplikationer där du kan spara kodutdrag till ditt konto för delning eller personlig lagring. CodePen är en av de mest populära IDE-erna med stöd för HTML / CSS / JS tillsammans med anpassad förbehandling som Jade / Haml och LESS / SCSS.

Mozilla Thimble är en annan IDE för början utvecklare som vill lära sig som de kodar. Codeply är också utmärkt för att testa specifika responsiva ramar som Bootstrap eller Zurb's Foundation utan att behöva ladda ner några filer.

3. Gratis Sass / SCSS Mixins

Preprocessorer har varit trendiga i åratal men blev nyligen nyligen mainstream nog att känna sig allestädes närvarande över hela området för webbdesign / utveckling. Nuförtiden verkar det konstigt att skriva vanilj CSS när Sass / SCSS kan ge så mycket mer.

En fördel är ett växande utbud av Sass mixin-bibliotek. Enkla mixins är som kodfragment eller grundläggande funktioner för att generera repeterbar kod i CSS. Medan du alltid kan skriva egna, har många utvecklare varit snällt nog att släppa gratis mixins online.

Vissa mixins kommer i bibliotek som Bourbon, medan andra kan vara fristående föremål. Försök att göra en sökning i GitHub för Sass / SCSS mixins för att se vad du kan hitta.

4. Kortlayouter

Webbplatskartlayouter publicerades först av Pinterest några år tillbaka och har sedan dess blivit en trend för innehållsrika webbsidor. Gratis plugins som jQuery Masonry kan användas för att efterlikna denna layout stil med animerade kort för olika höjder och bredder.

En kortlayout används bäst på sidor med mycket data som ska kunna scannas. Målsidan för Google Nu använder en kortlayout för att annonsera tillvalskort för appen Google Now.

Du kan tänka på kortlayouter som mer dynamiska rutor med fokus på att minimera innehållet till det absolut nödvändiga att lista fler objekt tillsammans. Online tidningar som UGSMAG och The Next Web är båda perfekta exemplen på kortlayouter som används för att visa upp det senaste inlägget.

5. Custom Explainer Videos

Stora och små företag har tagit sig till trenden med anpassade explainer-videor. Dessa skapas ofta med animering som Crazy Egg-exemplet. Men andra videor är beroende av verkliga bilder som Instagram Direct.

Syftet med en explainer-video är att visa hur en produkt eller tjänst fungerar. Besökare kan skumma en lista över funktioner och har fortfarande ingen aning om hur produkten fungerar. Videor klargör allt visuellt och täcka viktiga saker på bara några minuter.

Om du vill pröva din hand när du gör en anpassad explainer-video, kolla in denna Udemy-kurs. Det är en djupgående studie med inriktning på videor för målsidesdesign.

6. Live Product Previews

Landningssidedesign har visat otrolig tillväxt som beror på större Internethastigheter och webbläsares kapacitet. En stor trend som jag har märkt är tillägget av förhandsvisningar av live-produkt på hemsidor eller anpassade målsidor.

Ta till exempel Slacks produktsida. Den har en videotur och vektorgrafik som täcker Slack-gränssnittet. Dessa produktförhandsvisningar är avsedda att ge potentiella användare en inblick i hur produkten fungerar.

Webydo är ett annat briljant exempel med en levande animation som spelas på hemsidan. Detta gör det möjligt för besökare att se Webydo i aktion utan att manuellt demo produkten. Men du behöver inte alltid lita på animeringar för produktförhandsvisningar. Iconjar använder en enkel PNG skärmdump för att visa vad produkten är och hur den fungerar.

7. Automatiserade uppdragslöpare

Utvecklingsvärldens värld har förändrats så mycket med en handfull nya bästa metoder för att skapa webbsidor. Uppdragslöpare / byggsystem som Gulp and Grunt används ofta oftare för en rad uppgifter som tidigare krävde manuell ansträngning.

Automatisering är livsnerven för snabb vridning och utkrävande kvalitetskod. Maskiner gör inte misstag, så ju mer du kan automatisera med förtroende, desto färre problem kommer du att ha (i teorin).

För att lära dig mer kolla in det här Reddit-inlägget och förklara hur arbetslöpare fungerar. Dessa verktyg kör i grunden JS-kod som automatiserar delar av ditt arbetsflöde, antingen anpassade JS eller skript som skrivits av andra.

8. Native JS Mobile Apps

Jag är en stor förespråkare för att använda rätt verktyg för jobbet. När det gäller mobilapputveckling betyder det Java för Android, Objective-C / Swift för iOS.

Men inte alla vill lära sig ett nytt språk bara för att bygga en mobilapp. Tack och lov blir det lättare för inhemska appar att skapas och sammanställas med alternativa bibliotek som NativeScript eller React Native.

Klyftan för att bli en mobilappsekreterare förkortas med möjligheten att skapa mobilappar via JavaScript. PhoneGap är ett annat alternativ baserat på HTML / CSS / JS-kod.

Medan skapandet avviker mycket, blir JS snabbt en lösning för kodare som vill bygga mobilappar utan att lära sig ett nytt språk.

9. Samarbetsverktyg för design

Direktmeddelanden och gruppchatt har funnits i över ett decennium. Men dessa resurser har traditionellt åberopat ren text med viss förmåga att bifoga filer.

En ny framväxande trend är möjligheten att dela livedesigndokument inom chattprogram. Anmärkningsvärt är ett exempel där anteckningar och kommentarer kan lagras direkt ovanpå ett dokument. Detta ger designers ett rent sätt att dela arbete direkt med alla på ett lag.

Slack är den mest populära chatt applikationen för tillfället som stöder många liknande funktioner. Den växande Slack-användargränssnittet har varit uppriktigt om att skapa tillägg som förbättrar Slacks förmåga och knyter till andra produkter som Hangouts, MailChimp och även WordPress.

10. Responsive Frontend Frameworks

Frontend-ramar som Bootstrap har funnits i många år och fortsätter att visa sig användbara på projekt både personligt och professionellt. Responsive design har tvingat sin väg in i ramverk och skapat en efterfrågan på frontend-kod istället för att bara backend (Django, Laravel, etc).

Flyttar till 2016 Jag tror att vi kommer läsa mycket mer om responsiva frontendramar och deras värde i webbprojekt. Många devs väntar ivrigt på lanseringen av Foundation 6 och public v1 release av Bootstrap 4.

Andra mindre kända ramar du kan kolla in är Gumby och Pure CSS.

11. Större fokus på UX Design

Fältet för användarupplevelse design fortsätter att växa snabbt med fler designers och utvecklare som märker. UI-design är en del av UX-design men det är inte det slutliga målet. UI är ett medel till ett slut, med slutet som en fantastisk användarupplevelse.

För bara 5 år sedan var jag knappt bekant med UX eller hur den applicerade på gränssnittsdesign. Nu har vi resurser som UX Stack Exchange och gratis UX e-böcker. Om du inte vet mycket om användarupplevelse är det nu dags att studera och lära dig hur UX-principer kan tillämpas på alla former av digitala gränssnitt.

12. Paketförvaltare

Digitala paketchefer har stigit så snabbt att de är praktiskt taget ett krav på modern webbutveckling. Lösningar som Bower och NPM kan spara mycket tid på att starta nya projekt.

Mastering av ny teknik kommer att ta tid och kommer med en inlärningskurva. Men om det finns en sak som varje frontend (eller backend) utvecklare borde veta, är det en pakethanterare. De behöver viss kunskap om terminalkommandon, men när du väl blivit van vid processen kommer du aldrig att vilja gå tillbaka.

13. Avancerade användargränssnitt

CSS3-övergångar var bara början på en långsiktig trend på animationen på webben. Nu har vi dussintals CSS och JavaScript-bibliotek dedikerade till animering. Saker som jag aldrig drömde om är nu byggda och tillgänglig gratis om du vet var du ska leta efter.

Animering är inte ett krav på bra design. Men det kan göra en bra design till en bra design när den används ordentligt.

Håll ögonen på animerade trender för gränssnitt och se vad du kan ta bort från olika webbplatser. Kom ihåg att webbanimering inte är en Disney-film och bör behandlas med respekt. Använd animering försiktigt så att den förstärker ett gränssnitt utan att bli ett obehag eller distraherande element i designen.

14. Designers Learning to Code

Ett hot-knappämne i år har varit fallet för designers som lär sig att koda. Vissa designers tycker att det inte är deras jobb att skriva kod, medan andra känner att det blir norm och bör omfamnas.

Jag har läst uppvärmda diskussioner och fascinerande inlägg om detta ämne, som bara verkar rita emotionella svar. En bra design är bara en vacker bild utan kod. Men att fokusera på båda kräver en designer att spendera mindre tid att öva hantverket.

Så är det ett definitivt svar? Vissa skulle argumentera för att lönsamheten ökar för designers som känner till frontendkodning. Men vad om någon inte vill skriva kod? Är det värt att lära sig bara att tävla?

Jag tycker att det tydligaste svaret är att göra vad du vill ha. Men det verkar att detta ämne fortfarande finns på bordet för många designers som sannolikt fortsätter diskussionen till 2016.

15. Gratis Online Verktyg & Webapps

Det brukade vara att alla program kördes från skrivbordet oavsett vad du behövde göra. Men nuförtiden är jag konsekvent förvånad över hur många webbapps som finns tillgängliga gratis online.

Du hittar allt från URL-kodning / avkodning till en helt gratis Markdown-editor. Även Google Drive har tagit Microsoft Office-produkter i webbläsaren (igen, helt gratis).

Den nuvarande nivån på datakraft och homogena standarder från webbläsare erbjuder en till synes gränslös mängd möjligheter. Komplexa uppgifter som återupptagning till bildkomprimering kan hanteras direkt från ett webbläsarfönster.

16. Växten av webbkomponenter

Webkomponenter försöker lösa problem med komplexitet för utvecklare. WebComponents hemsida har stora resurser och material för att ge utvecklare ett hopp om att börja med i det här ämnet.

Om du inte är säker på hur du förstår modulära webbkomponenter, kolla in det här inlägget för att lära dig mer.

Medan komponenter inte har blivit särskilt uppblåsta till den vanliga statusen diskuteras de av professionella utvecklare runt om i världen. Google har släppt Polymer som är ett ramverk som används för att lägga till webbkomponenter via JS och HTML.

Det kanske inte är praktiskt att använda i stora klientprojekt ännu. Tekniken är dock tillgänglig och med lite övning kan du enkelt hantera koncepten. För att lära dig mer och se några kodprover kan du läsa igenom den här CSS-Tricks-posten på modulära webbkomponenter.

17. Online Learning Resources

Vi vet alla att det nu är den enklaste tiden att lära sig någon färdighet från datorns komfort. Det verkar som om online-lärande marknadsplats växer exponentiellt med nya kurser och webbplatser som dyker upp varje år.

Jag känner mig mer självsäker än någonsin för att vi ska se en ökning av online-lärande. Kända platser som Treehouse och CodeSchool erbjuder otroliga kurser tillsammans med nyare webbplatser som Bitfountain och Learn-Verified.

Om det finns ett ämne du vill lära dig finns det troligtvis en kurs online - speciellt om du vill lära dig digitala tekniker som UI-design eller apputveckling.

18. Server-Side JavaScript

Medan det har gått över alternativ för server-sida JS, har ingen genomsyrats så snabbt som Node.js. JavaScript-devs har blivit förälskad i det här biblioteket och såg att det stod i direkt konkurrens med andra backend-språk som Python eller PHP.

Node tillåter utvecklare att bygga webbplatser med ett enda språk för både frontend + backend-kod. Och resurser som Node Package Manager ger ännu mer värde till Node.js.

Från vad jag kan berätta är Node fortfarande på uppgången och fortsätter att få traction från branschentusiaster. Oavsett om du planerar att lära dig Node eller inte, det är ingen tvekan om att det fortsätter att växa som en stor trend år 2016.

19. Touch-Supported Website Funktioner

Smartphone-webbläsare har alltid stödit beröringsfunktioner för att alla webbplatser ska kunna behålla bakåtkompatibilitet. Ännu nyligen har jag märkt fler plugins och anpassade funktioner som bifogas webbplatser med det specifika målet att hantera beröringshändelser.

Plugins som Photoswipe och Dragend.js är byggda för att hantera swiping och tappning på pekskärmskärmar. Det verkar som webbutvecklare bygger inte bara lyhörda webbplatser, utan även beröringsaktiverade webbplatser.

Om du söker runt hittar du några riktigt imponerande funktioner som är byggda för webben, som endast är beroende av beröringshändelser.

20. Materialdesign på webben

Googles utsläpp av materialdesign var en enorm framgång för Android-designers. Materialdesign anses vara ett design språk som är avsett att förenkla processen för att skapa användargränssnitt för Android-smartphones.

Med tiden har webbdesigners tagit detta till sitt hjärta och byggt hela webbplatser baserat på Googles nya design språk. Det verkar som den materiella designutvecklingen har flyttat bortom bara mobila appar till världen av webbdesign.

Folk som vill bygga materialwebbplatser behöver inte ens uppföra hjulet. Gratis bibliotek som Material UI och Materialize erbjuder anpassade koder för att strukturera en ny layout ovanpå materialkonstruktionen.

Stängning

Om vi ​​tittar på dessa trender bör det vara tydligt att vi ser en riktig samlad insats från webbgemenskapen för att göra processen att bygga webbplatser enklare. Vi vill alla spara tid i vårt dagliga arbetsflöde.

Sedan webbens början har vi sett att många teknologier stiger, bara för att ersättas av bättre alternativ. Dessa 2016 trender strävar efter en mer enhetlig uppsättning designtekniker som gör byggwebbplatser enklare och mycket mindre komplexa.