20 Hotteste tendenser, der vil danne webdesign Kom 2016

Som tiden tommer fremad med hvert år, mange vækker nye designtendenser i horisonten. Webdesignets område ændrer sig altid med nye værktøjer, arbejdsgange og bedste praksis til konstruktion af brugbare layouter.

Det er svært at forudsige, hvilke nøjagtige tendenser der vil være den største opmærksomhed. Men nyere historie viser et mønster af tendenser, der har vokset som brand. Jeg har organiseret 20 unikke trends, der har fået trækkraft over 2015 og vil sandsynligvis fortsætte godt ind i 2016.

1. Skitse App til UI Design

Skitse erstatter hurtigt Photoshop for alle UI designopgaver, der spænder fra lavfidelity wireframes til high-fidelity mockups & ikon design.

Sketch App er en Mac-only applikation, der er lavet specielt til web- og mobildesignere. Det giver et glattere arbejdsmiljø til at lave vektorelementer til enhver grænseflade, men det bevarer også mange funktioner, du kan forvente af Photoshop, som teksteffekter og lag styles.

Selv om der ikke er tegn på, at Sketch nogensinde vil blive frigivet til Windows, er det stadig blevet et værdsat valg af OS X-brugere. Den forenklede workflow og billigere prislapp er at give Adobe et løb for sine penge. Hvis Sketch fortsætter med at give den bedste UI-designoplevelse, så vil det helt sikkert fortsætte med at vokse godt ind i 2016 og derefter.

2. Browserbaserede IDE'er

Desktop IDE'er har eksisteret i årtier med muligheder lige fra Notepad ++ til Xcode og Visual Studio. En IDE gør det nemmere at skrive kode med forslag og syntax fremhævning (blandt andre funktioner).

Men traditionelt er IDE'er blevet frigivet som desktop applikationer. I løbet af de sidste par år har vi set en dramatisk stigning i browserbaserede cloud IDE'er. Disse kræver ikke nogen anden software end en webbrowser, som gør det muligt for devs at skrive kode fra enhver computer med internetadgang.

Cloud IDE'er fungerer mere som webapplikationer, hvor du kan gemme kodestykker til din konto til deling eller personlig opbevaring. CodePen er et af de mest populære IDE'er med støtte til HTML / CSS / JS sammen med brugerdefineret forbehandling som Jade / Haml og LESS / SCSS.

Mozilla Thimble er en anden IDE til begynderudviklere, der ønsker at lære, som de kodes. Codeply er også fantastisk til at teste specifikke lydhørede rammer som Bootstrap eller Zurb's Foundation uden at skulle downloade nogen filer.

3. Gratis Sass / SCSS Mixins

Forprocessorer har været trendy i årevis, men blev først for nylig almindelige nok til at føle sig allestedsnærværende på tværs af hele webdesign / udvikling. I dag forekommer det mærkeligt at skrive vanilla CSS, når Sass / SCSS kan give så meget mere.

En fordel er en voksende udbud af Sass mixin biblioteker. Simple mixins er som kodestykker eller grundlæggende funktioner til at generere gentagelig kode i CSS. Mens du altid kan skrive din egen, har mange udviklere været så venlige at frigive gratis mixins online.

Nogle mixins kommer i biblioteker som Bourbon, mens andre kan være selvstændige ting. Prøv at lave en søgning i GitHub for Sass / SCSS mixins for at se, hvad du kan finde.

4. Kortlayouts

Webstedskortlayouter blev først populært af Pinterest et par år tilbage og er siden blevet en trend for indholds-tunge websider. Gratis plugins som jQuery Masonry kan bruges til at efterligne denne layout stil med animerede kort til forskellige højder og bredder.

Et kortlayout bruges bedst på sider med masser af data, som skal scannes. Destinationssiden til Google Nu bruger et kortlayout til at annoncere valgfrie kort til appen Google Now.

Du kan tænke på kortlayouter som mere dynamiske netværker med fokus på at minimere indhold til det absolut nødvendige for at liste flere elementer sammen. Online magasiner som UGSMAG og The Next Web er begge perfekte eksempler på kortlayouter, der bruges til at fremvise seneste postindhold.

5. Brugerdefinerede forklaringsvideoer

Store og små virksomheder har taget til udviklingen af ​​brugerdefinerede explainer videoer. Disse er ofte lavet med animation som Crazy Egg eksempelet. Men andre videoer er afhængige af live-optagelser som Instagram Direct.

Formålet med en explainer video er at demonstrere, hvordan et produkt eller en tjeneste fungerer. Besøgende kan skimme en liste over funktioner og har stadig ingen idé om, hvordan produktet fungerer. Videoer afklarer alt visuelt og dækker de vigtige ting på få minutter.

Hvis du vil prøve din hånd ved at lave en brugerdefineret explainer-video, skal du tjekke dette Udemy-kursus. Det er en grundig undersøgelse med fokus på videoer til landingsside design.

6. Live Product Previews

Landingsside-design har oplevet en utrolig vækst som følge af større internethastigheder og browserfunktioner. En stor tendens, jeg har bemærket, er tilføjelsen af ​​liveproduktforhåndsvisninger på hjemmesider eller brugerdefinerede destinationssider.

Tag for eksempel Slacks produktside. Den indeholder en video tour og vektor grafik dækker Slack interface. Disse produktoversigter er ment at give potentielle brugere et indblik i, hvordan produktet fungerer.

Webydo er et andet glimrende eksempel med en levende animation, der afspilles på hjemmesiden. Dette gør det muligt for besøgende at se Webydo i aktion uden at skulle manuelt demo produktet. Men du behøver ikke altid at stole på animationer for produktforhåndsvisninger. Iconjar bruger et simpelt PNG-skærmbillede til at vise, hvad produktet er, og hvordan det virker.

7. Automatiserede opgaveløbere

Verden af ​​frontend-udvikling har ændret sig så meget med en håndfuld nye bedste praksis til oprettelse af hjemmesider. Opgaveløber / bygningssystemer som Gulp and Grunt bruges ofte hyppigere til en lang række opgaver, der tidligere krævede manuel indsats.

Automatisering er livsnerven for hurtig omdrejning og udkvalificering af kvalitetskode. Maskiner gør ikke fejl, så jo mere kan du automatisere med selvtillid, jo færre problemer, du får (i teorien).

For at lære mere, tjek dette Reddit-indlæg for at forklare, hvordan opgaveløberne opererer. Disse værktøjer kører i grunden JS-kode, der automatiserer dele af din workflow, enten brugerdefinerede JS eller script skrevet af andre.

8. Native JS Mobile Apps

Jeg er en stor fortaler for at bruge de rigtige værktøjer til jobbet. I tilfælde af mobilappudvikling betyder dette Java for Android, Objective-C / Swift for iOS.

Men ikke alle ønsker at lære et nyt sprog bare for at opbygge en mobilapp. Heldigvis bliver det lettere for indfødte apps at blive oprettet og kompileret med alternative biblioteker som NativeScript eller React native.

Gabet for at blive en mobilapplikator er forkortet med evnen til at oprette mobilapps via JavaScript. PhoneGap er endnu en mulighed baseret på HTML / CSS / JS kode.

Selvom skabelsesprocessen varierer meget, bliver JS hurtigt en løsning for kodere, der ønsker at opbygge mobilapps uden at lære et nyt sprog.

9. Samarbejdsværktøjer til design

Instant messaging og gruppechat har eksisteret i godt et årti. Men disse ressourcer har traditionelt været afhængige af ren tekst med en vis evne til at vedhæfte filer.

En ny udvikling er evnen til at dele levende designdokumenter inden for chat applikationer. Bemærkelsesværdigt er et eksempel, hvor annoteringer og kommentarer kan lagres lige oven på et dokument. Dette giver designere en ren måde at dele arbejde direkte med alle på et hold.

Slack er den mest populære chat applikation i øjeblikket, der understøtter mange lignende funktioner. Den voksende Slack-brugerbase har været vedholdende med at oprette udvidelser, der forbedrer Slacks muligheder kraftigt og knytter sig til andre produkter som Hangouts, MailChimp og endda WordPress.

10. Responsive Frontend Framework

Frontend-rammer som Bootstrap har eksisteret i årevis og fortsætter med at vise sig nyttige på projekter både personligt og professionelt. Responsivt design har tvunget sig ind i rammer og skabt en efterspørgsel efter frontend-kode i stedet for bare at bakke (Django, Laravel osv.).

Flytter ind i 2016 Jeg tror, ​​vi læser meget mere om lydhørige frontend-rammer og deres værdi i webprojekter. Mange devs venter ivrigt på udgivelsen af ​​Foundation 6 og offentlig v1-udgivelse af Bootstrap 4.

Andre mindre kendte rammer kan du tjekke ud omfatter Gumby og Pure CSS.

11. Større fokus på UX Design

Området med brugeroplevelsesdesign fortsætter med at vokse hurtigt med flere designere og udviklere, der tager mærke til det. UI design er en del af UX design, men det er ikke det endelige mål. UI er et middel til en ende, med enden at være en fantastisk brugeroplevelse.

For kun 5 år siden var jeg næppe bekendt med UX eller hvordan den anvendte interface design. Nu har vi ressourcer som UX Stack Exchange og gratis UX eBøger. Hvis du ikke ved meget om brugeroplevelse, så er det nu den bedste tid til at studere og lære, hvordan UX-principper kan anvendes på alle former for digitale grænseflader.

12. Pakkeforvaltere

Digitale pakkeforvaltere er steget så hurtigt, at de praktisk talt er et krav til moderne webudvikling. Løsninger som Bower og NPM kan spare meget tid på at starte nye projekter.

At mastere enhver ny teknologi vil tage tid og kommer med en læringskurve. Men hvis der er en ting, som hver frontend (eller backend) udvikler skal vide, er det en pakkechef. De kræver en vis viden om terminalkommandoer, men når du vænner dig til processen, vil du aldrig gå tilbage.

13. Advanced UI Animationer

CSS3-overgange var kun begyndelsen på en langsigtet tendens til animation på internettet. Nu har vi snesevis af CSS og JavaScript-biblioteker dedikeret til animation. Ting, jeg aldrig har drømt om, er nu bygget og tilgængelig gratis, hvis du ved, hvor du skal se.

Animation er ikke et krav til godt design. Men det kan gøre et godt design til et godt design, når det bruges korrekt.

Hold øje med animerede trends for grænseflader og se, hvad du kan tage væk fra forskellige hjemmesider. Husk at web animation ikke er en Disney film og bør behandles med respekt. Brug animationen forsigtigt, så den forbedrer en grænseflade uden at blive et gener eller distraherende element i designet.

14. Designere, der lærer at kode

Et hot button emne i år har været tilfældet for designere, der lærer at kode. Nogle designere føler, at det ikke er deres job at skrive kode, mens andre føler, at det bliver normen og skal omfavnes.

Jeg har læst opvarmede diskussioner og fascinerende indlæg om dette emne, som kun synes at tegne følelsesmæssige reaktioner. Et godt design er bare et smukt billede uden kode. Men at fokusere på begge kræver, at en designer bruger mindre tid på at udøve håndværket.

Så er der et definitivt svar? Nogle vil hævde, at job levedygtighed stiger for designere, der kender frontend kodning. Men hvad nu hvis nogen ikke vil skrive kode? Er det værd at lære bare at konkurrere?

Jeg føler det klogeste svar er at gøre, hvad du vil. Men det ser ud til, at dette emne stadig er på bordet for mange designere, der sandsynligvis vil fortsætte diskussionen til 2016.

15. Gratis online værktøjer og webapps

Det plejede at være, at alle programmer blev kørt fra skrivebordet, uanset hvad du skulle gøre. Men i dag er jeg konsekvent forbløffet over, hvor mange webapps der er tilgængelige gratis online.

Du finder alt fra URL-kodning / dekodning til en helt gratis Markdown-editor. Selv Google Drive har taget Microsoft Office-produkter i browseren (igen, helt gratis).

Det nuværende niveau af computerkraft og homogene standarder fra webbrowsere tilbyder en tilsyneladende ubegrænset mængde muligheder. Komplekse opgaver som genoptagelse af oprettelse til billedkomprimering kan håndteres lige fra et browservindue.

16. Væksten af ​​webkomponenter

Webkomponenter forsøger at løse problemer med kompleksitet for udviklere. WebComponents hjemmeside har gode ressourcer og materialer til at give udviklere et spring start i dette emne.

Hvis du ikke er sikker på, hvordan du forstår modulære webkomponenter, så tjek dette indlæg for at lære mere.

Selv om komponenter ikke er særlig sprængt op til mainstream status, diskuteres de af professionelle udviklere rundt om i verden. Google har udgivet Polymer, som er en ramme, der bruges til at tilføje webkomponenter via JS og HTML.

Det kan ikke være praktisk at bruge i større klientprojekter endnu. Teknologien er dog tilgængelig, og med lidt øvelse kan du nemt håndtere koncepterne. For at lære mere og se nogle kodeprøver kan du læse denne CSS-Tricks-indlæg på modulære webkomponenter.

17. Online Learning Resources

Vi ved alle, at det nu er den nemmeste tid at lære evner fra din computers komfort. Det ser ud til, at online læringsmarkedet vokser eksponentielt med nye kurser og websteder, der dukker op hvert år.

Jeg føler mig mere selvsikker end nogensinde før, at vi vil se en stigning i onlineindlæring. Kendte steder som Treehouse og CodeSchool tilbyder utrolige kurser sammen med nyere websteder som Bitfountain og Learn-Verified.

Hvis der er et emne, du vil lære, er der sandsynligvis et kursus online - især hvis du vil lære digitale teknikker som UI-design eller appudvikling.

18. Server-Side JavaScript

Mens der har været tidligere muligheder for server-side JS, har ingen gennemsyret så hurtigt som Node.js. JavaScript-devs er forelsket i dette bibliotek og så det op i direkte konkurrence med andre backend-sprog som Python eller PHP.

Node tillader udviklere at opbygge hjemmesider ved hjælp af et enkelt sprog for både frontend + backend-kode. Og ressourcer som Node Package Manager giver endnu mere værdi til Node.js.

Fra det jeg kan fortælle, er Node stadig på opsvinget og fortsætter med at få trækkraft fra industrientusiaster. Uanset om du planlægger at lære Node eller ej, er der ingen tvivl om, at det vil fortsætte med at vokse som en stor tendens i 2016.

19. Touch-understøttede Website-funktioner

Smartphone-browsere har altid understøttet berøringsfunktioner for alle websteder for at opretholde kompatibilitet bagud. Endnu for nylig har jeg bemærket flere plugins og brugerdefinerede funktioner, der er tilføjet til websites med det specifikke mål at håndtere berøringshændelser.

Plugins som Photoswipe og Dragend.js er bygget til at håndtere swiping og tapping på touchscreen skærme. Det ser ud til, webudviklere bygger ikke kun lydhørige hjemmesider, men også touch-aktiverede websteder.

Hvis du søger rundt, finder du nogle virkelig imponerende funktioner bygget til internettet, der udelukkende afhænger af berøringshændelser.

20. Materiale design på nettet

Googles frigivelse af materiale design var en enorm succes for Android-designere. Materiale design betragtes som et designsprog, der er beregnet til at forenkle processen med at lave brugergrænseflader til Android-smartphones.

Over tid har webdesignere taget dette til hjerte og bygget hele hjemmesider baseret på Googles nye designsprog. Det ser ud til, at den materielle designtendens har flyttet ud over bare mobilapps i verden af ​​webdesign.

Folk, der ønsker at bygge et materiale, behøver ikke engang at genopfinde hjulet. Gratis biblioteker som Material UI og Materialize tilbyder brugerdefinerede koder til strukturering af et nyt layout oven på materialet design fundament.

Lukning

Hvis man ser på disse tendenser, skal det være klart, at vi ser en reel samordnet indsats fra websamfundet for at gøre processen med at opbygge hjemmesider lettere. Vi ønsker alle at spare tid i vores daglige arbejdsgang.

Siden webens start har vi set mange teknologier stiger, kun for at blive erstattet af bedre alternativer. Disse 2016 tendenser skubber til et mere ensartet sæt designteknikker, der vil gøre bygningswebsteder nemmere og meget mindre komplekse.