20 Hotteste trender som kommer til å danne webdesign Kom 2016

Som tiden tommer fremover med hvert år som går, lover mange nye designtrender seg i horisonten. Feltet for webdesign endrer seg alltid med nye verktøy, arbeidsflyter og beste praksis for bygging av brukbare layouter.

Det er vanskelig å forutsi hvilke nøyaktige trender som vil gi størst oppmerksomhet. Likevel viser nyere historie et mønster av trender som har vokst som en brann. Jeg har organisert 20 unike trender som har fått traksjon over 2015 og vil trolig fortsette godt inn i 2016.

1. Sketch App for UI Design

Skiss erstatter Photoshop raskt for alle UI-designoppgaver, alt fra lavfidelity wireframes til high-fidelity mockups og ikondesign .

Sketch App er et Mac-eneste program laget spesielt for web- og mobildesignere. Det gir et jevnere arbeidsmiljø for å lage vektorelementer for alle grensesnitt, men det beholder også mange funksjoner du kan forvente fra Photoshop, som teksteffekter og lagstiler.

Mens det ikke er noen bevis på at Sketch vil bli gitt ut for Windows, har det fortsatt blitt et verdsatt valg av OS X-brukere. Den forenklede arbeidsflyten og billigere prislappen gir Adobe et løp for pengene sine. Hvis Sketch fortsetter å gi den beste UI-designopplevelsen, vil det sikkert fortsette å vokse godt inn i 2016 og videre.

2. Nettleserbaserte IDEer

Desktop IDEer har eksistert i flere tiår med alternativer fra Notepad ++ til Xcode og Visual Studio. En IDE gjør det lettere å skrive kode med forslag og syntaksutheving (blant andre funksjoner).

Men tradisjonelt har IDEer blitt utgitt som desktop applikasjoner. I løpet av de siste årene har vi sett en dramatisk økning i nettleserbaserte cloud IDEer. Disse krever ikke noe annet program enn en nettleser, noe som gjør at devs kan skrive kode fra hvilken som helst datamaskin med Internett-tilgang.

Cloud IDE-er fungerer mer som webapplikasjoner der du kan lagre kodeoppdateringer til kontoen din for deling eller personlig lagring. CodePen er en av de mest populære IDEene med støtte for HTML / CSS / JS sammen med tilpasset forhåndsbehandling som Jade / Haml og LESS / SCSS.

Mozilla Thimble er en annen IDE for begynnelsen utviklere som ønsker å lære som de koden. Også Codeply er flott for testing av spesifikke responsive rammer som Bootstrap eller Zurb's Foundation uten å måtte laste ned noen filer.

3. Gratis Sass / SCSS Mixins

Preprosessorer har vært trendy i årevis, men bare nylig ble vanlig nok til å føle seg allestedsnærværende over hele feltet av webdesign / utvikling. I dag virker det merkelig å skrive vanilje CSS når Sass / SCSS kan gi så mye mer.

En fordel er en økende tilførsel av Sass mixin-biblioteker. Enkle mixiner er som kodestykker eller grunnleggende funksjoner for å generere repeterbar kode i CSS. Mens du alltid kan skrive din egen, har mange utviklere vært hyggelige nok til å frigjøre gratis mikser online.

Noen mixins kommer i biblioteker som Bourbon, mens andre kan være frittstående elementer. Prøv å gjøre et søk i GitHub for Sass / SCSS mixins for å se hva du kan finne.

4. Kortoppsett

Nettstedskortoppsett ble først populært av Pinterest noen år tilbake og har siden blitt en trend for innholdsrike nettsider. Gratis plugins som jQuery Masonry kan brukes til å etterligne denne layout stilen med animerte kort for ulike høyder og bredder.

Et kortoppsett brukes best på sider med mye data som skal skannes. Destinasjonssiden for Google Nå bruker et kortoppsett for å annonsere valgfrie kort for Google Nå-appen.

Du kan tenke på kortoppsett som mer dynamiske nett, med fokus på å minimere innholdet til de nødvendige nødvendigheter for å liste flere elementer sammen. Online magasiner som UGSMAG og The Next Web er begge perfekte eksempler på kortoppsett som brukes til å vise frem nylig innleggsinnhold.

5. Custom Explainer Videoer

Store og små bedrifter har tatt til utviklingen av tilpassede explainer-videoer. Disse er ofte laget med animasjon som Crazy Egg-eksemplet. Men andre videoer stole på levende bilder som Instagram Direct.

Formålet med en explainer video er å demonstrere hvordan et produkt eller en tjeneste fungerer. Besøkende kan skumme en liste over funksjoner og har fortsatt ingen anelse om hvordan produktet fungerer. Videoer klargjøre alt visuelt og dekke de viktige tingene på bare noen få minutter.

Hvis du vil prøve deg på å lage en tilpasset explainer-video, sjekk ut dette Udemy-kurset. Det er en grundig studie med fokus på videoer for destinasjonsside design.

6. Live Product Previews

Landingsside-design har hatt utrolig vekst som følge av større internetthastigheter og nettleserfunksjoner. En stor trend jeg har lagt merke til, er tillegg av liveproduktforhåndsvisninger på hjemmesider eller egendefinerte destinasjonssider.

Ta for eksempel Slacks produktside. Den har en videotur og vektorgrafik som dekker Slack-grensesnittet. Disse produktforhåndsvisningene er ment å gi potensielle brukere et glimt av hvordan produktet fungerer.

Webydo er et annet glimrende eksempel med en levende animasjon som spilles på hjemmesiden. Dette tillater besøkende å se Webydo i aksjon uten å manuelt demo produktet. Men du trenger ikke alltid å stole på animasjoner for produktforhåndsvisning. Iconjar bruker et enkelt PNG skjermbilde for å vise hva produktet er og hvordan det fungerer.

7. Automatiserte oppgaveløpere

Verden av frontendutvikling har forandret seg så mye med en håndfull nye beste praksis for websitetskapasitet. Oppgaveløpere / bygningssystemer som Gulp and Grunt blir brukt mye oftere for en rekke oppgaver som tidligere krevde manuell innsats.

Automatisering er livsnerven for rask omdreining og utrydding av kvalitetskode. Maskiner gjør ikke feil, så jo mer du kan automatisere med selvtillit, færre problemer du har (i teorien).

For å lære mer, sjekk ut dette Reddit-innlegget, og forklar hvordan arbeidsløpere opererer. Disse verktøyene kjører i utgangspunktet JS kode som vil automatisere deler av arbeidsflyten din, enten tilpasset JS eller skript skrevet av andre.

8. Native JS Mobile Apps

Jeg er en stor fortaler for å bruke de riktige verktøyene for jobben. I tilfelle av mobilapputvikling betyr dette Java for Android, Objective-C / Swift for iOS.

Men ikke alle ønsker å lære et nytt språk bare for å bygge en mobilapp. Heldigvis blir det enklere for innfødte apps å bli opprettet og kompilert med alternative biblioteker som NativeScript eller React Native.

Gapet for å bli en mobilapplikasjonsprogrammerer, forkortes med muligheten til å lage mobilapper via JavaScript. PhoneGap er enda et alternativ basert på HTML / CSS / JS kode.

Selv om etableringsprosessen varierer sterkt, blir JS raskt en løsning for kodere som vil bygge mobile apps uten å lære et nytt språk.

9. Samarbeidsverktøy for design

Instant messaging og gruppeklatt har eksistert i godt over et tiår. Imidlertid har disse ressursene tradisjonelt stått på ren tekst med noen mulighet til å legge ved filer.

En ny fremvoksende trend er muligheten til å dele levende designdokumenter innen chat-applikasjoner. Bemerkelsesverdig er et eksempel der merknader og kommentarer kan lagres rett oppå et dokument. Dette gir designere en ren måte å dele arbeid direkte med alle på et lag.

Slack er den mest populære chat applikasjonen for øyeblikket som støtter mange lignende funksjoner. Den voksende Slack-brukerbasen har vært oppriktig om å skape utvidelser som i stor grad forbedrer Slacks evner og knytter seg til andre produkter som Hangouts, MailChimp, og til og med WordPress.

10. Responsive Frontend Framework

Frontend-rammer som Bootstrap har eksistert i mange år, og fortsetter å være nyttige på prosjekter både personlig og profesjonell. Responsive design har tvunget seg inn i rammer og skapt en etterspørsel etter frontend-kode i stedet for bare å backend (Django, Laravel, etc).

Flytter inn i 2016 Jeg tror vi vil lese mye mer om responsive frontend-rammer og deres verdi i webprosjekter. Mange devs venter ivrig på utgivelsen av Foundation 6 og offentlig v1-utgivelsen av Bootstrap 4.

Andre mindre kjente rammer du kan sjekke ut, er Gumby og Pure CSS.

11. Større fokus på UX Design

Feltet av brukeropplevelsesdesign vil fortsette å vokse raskt med flere designere og utviklere som tar varsel. UI-design er en del av UX-design, men det er ikke det endelige målet. UI er et middel til en slutt, med enden som en fantastisk brukeropplevelse.

For bare 5 år siden var jeg knapt kjent med UX eller hvordan det gjaldt for grensesnittdesign. Nå har vi ressurser som UX Stack Exchange og gratis UX eBooks. Hvis du ikke vet mye om brukeropplevelse, er det nå den beste tiden å studere og lære hvordan UX-prinsipper kan brukes på alle former for digitale grensesnitt.

12. Pakkeforvaltere

Digitale pakkeforvaltere har steget så fort at de er praktisk talt et krav til moderne webutvikling. Løsninger som Bower og NPM kan spare mye tid på å starte nye prosjekter.

Mastering av ny teknologi vil ta tid og kommer med en læringskurve. Men hvis det er en ting som hver frontend (eller backend) utvikler burde vite, er det en pakkebehandling. De trenger litt kunnskap om terminalkommandoer, men når du blir vant til prosessen, vil du aldri gå tilbake.

13. Avanserte UI-animasjoner

CSS3-overganger var bare begynnelsen på en langsiktig trend med animasjon på nettet. Nå har vi dusinvis av CSS og JavaScript-biblioteker dedikert til animasjon. Ting jeg aldri drømte om, er nå bygget og tilgjengelig gratis hvis du vet hvor du skal se.

Animasjon er ikke et krav til god design. Men det kan gjøre en god design til en flott design når den brukes riktig.

Hold øye med animerte trender for grensesnitt og se hva du kan ta bort fra ulike nettsteder. Husk at web animasjon ikke er en Disney-film og bør behandles med respekt. Bruk animasjon forsiktig slik at den forbedrer et grensesnitt uten å bli et gener eller forstyrrende element i designet.

14. Designere som lærer å kode

En hot button tema i år har vært tilfelle for designere lære å kode. Noen designere føler at det ikke er jobben deres å skrive kode, mens andre føler at det blir normen og bør omfavnes.

Jeg har lest oppløste diskusjoner og fascinerende innlegg om dette emnet, som bare ser ut til å tegne følelsesmessige svar. En god design er bare et pent bilde uten kode. Likevel å fokusere på begge krever en designer å bruke mindre tid på å praktisere håndverket.

Så er det et definitivt svar? Noen vil hevde at arbeidsledigheten øker for designere som kjenner frontendkoding. Men hva om noen ikke vil skrive kode? Er det verdt å lære bare å konkurrere?

Jeg føler det klarteste svaret er å gjøre hva du vil. Men det ser ut til at dette emnet fortsatt er på bordet for mange designere som sannsynligvis vil fortsette diskusjonen til 2016.

15. Gratis Online Verktøy & Webapps

Det pleide å være at alle programmer ble kjørt fra skrivebordet, uansett hva du trengte å gjøre. Men i dag er jeg konsekvent overrasket over hvor mange webapps som er tilgjengelige gratis online.

Du finner alt fra URL-koding / dekoding til en helt gratis Markdown-editor. Selv Google Disk har tatt Microsoft Office-produkter inn i nettleseren (igjen, helt gratis).

Det nåværende nivået av datakraft og homogene standarder fra nettlesere tilbyr en tilsynelatende ubegrenset mengde muligheter. Komplekse oppgaver som gjenopprettelse til bildekomprimering kan håndteres rett fra et nettleservindu.

16. Veksten av webkomponenter

Webkomponenter prøver å løse problemer med kompleksitet for utviklere. WebComponents nettside har gode ressurser og materialer for å gi utviklere et hopp i dette emnet.

Hvis du ikke er sikker på hvordan du forstår modulære webkomponenter, sjekk ut dette innlegget for å lære mer.

Selv om komponentene ikke har blitt spesielt oppblåst til vanlige status, diskuteres de av profesjonelle utviklere over hele verden. Google har gitt ut Polymer som er et rammeverk som brukes til å legge til webkomponenter via JS og HTML.

Dette kan ikke være praktisk å bruke i store klientprosjekter ennå. Men teknologien er tilgjengelig, og med litt øvelse kan du enkelt mestre konseptene. For å lære mer og se noen kodeprøver kan du lese gjennom denne CSS-Tricks-posten på modulære webkomponenter.

17. Online Learning Resources

Vi vet alle at det nå er den enkleste tiden å lære noen ferdigheter fra datamaskinen din. Det virker som online læringsmarkedet vokser eksponentielt med nye kurs og nettsteder som dukker opp hvert år.

Jeg føler meg tryggere enn noen gang før at vi vil se en økning i nettbasert læring. Kjente steder som Treehouse og CodeSchool tilbyr utrolige kurs sammen med nyere nettsteder som Bitfountain og Learn-Verified.

Hvis det er et emne du vil lære, er det sannsynligvis et kurs online - spesielt hvis du vil lære digitale teknikker som UI-design eller apputvikling.

18. Server-Side JavaScript

Mens det har vært forbi alternativer for server-side JS, har ingen gjennomtrengt så raskt som Node.js. JavaScript-devs har blitt forelsket i dette biblioteket og så på at det stod i direkte konkurranse med andre backend-språk som Python eller PHP.

Node tillater utviklere å bygge nettsteder ved hjelp av et enkelt språk for både frontend + backend-kode. Og ressurser som Node Package Manager gir enda mer verdi til Node.js.

Fra det jeg kan fortelle, er Node fortsatt på oppgang og fortsetter å få trekkraft fra industrientusiaster. Enten du planlegger å lære Node eller ikke, er det ingen tvil om at det vil fortsette å vokse som en stor trend i 2016.

19. Touch-Supported Website Features

Smartphone-nettlesere har alltid støttet berøringsfunksjoner for alle nettsteder for å opprettholde bakoverkompatibilitet. Likevel har jeg nylig lagt merke til flere plugins og tilpassede funksjoner som er lagt til på nettsteder med det spesifikke målet om å håndtere berøringshendelser.

Plugins som Photoswipe og Dragend.js er bygget for å håndtere sveiping og tapping på berøringsskjermen. Det virker som webutviklere ikke bare bygger responsive nettsteder, men også berøringsaktiverte nettsteder.

Hvis du søker rundt, finner du noen virkelig imponerende funksjoner som er bygget for nettet, og som er avhengige av berøringshendelser.

20. Materialdesign på nettet

Googles utgivelse av materialdesign var en enorm suksess for Android-designere. Materiell design betraktes som et designsspråk som er ment å forenkle prosessen med å lage brukergrensesnitt for Android-smarttelefoner.

Over tid har webdesignere tatt dette til hjerte og bygget hele nettsteder basert på Googles nye designsspråk. Det ser ut til at den materielle designtrenden har beveget seg utover bare mobile apps i verden av webdesign.

Folk som ønsker å bygge materielle nettsteder trenger ikke engang å gjenoppfinne hjulet. Gratis biblioteker som Material UI og Materialize tilbyr tilpassede koder for å strukturere et nytt layout på toppen av det materielle designfondet.

Lukking

Når vi ser på disse trendene, bør det være klart at vi ser en reell samordnet innsats fra nettsamfunnet for å gjøre prosessen med å bygge nettsteder enklere. Vi ønsker alle å spare tid i vår daglige arbeidsflyt.

Siden starten har vi sett mange teknologier stiger, bare for å bli erstattet av bedre alternativer. Disse 2016 trendene presser på for et mer enhetlig sett med designteknikker som vil gjøre byggwebsider enklere og mye mindre komplekse.