Webdesign 2014 Hva skal du se etter?

I år har det vært a strålende år i webdesign. Mer enn noe annet år har det blitt gjort store skritt mot modning av feltet. La oss ta en titt på noe vi kan forvente for fremtiden for webdesign som en industri.


Løsninger på skiverproblemet

Alle som har gjort webdesign i lengre tid enn noen år har utvilsomt hatt problemer med gapet mellom design og front-end-utvikling. Designere lever i verktøy som ligner på Photoshop eller Sketch, og utviklere lever i deres tekstredigerere.

Denne vanlige arbeidsflyten har sett mange forsøk på en løsning, inkludert ting som SiteGrinder, Dreamweaver og nyere Adobe Muse. Alle disse løsningene kommer med sine problemer, og har ikke blitt mye vedtatt. For det meste har front-utviklere enten sittende fast på sine gamle måter, eller designere beveger seg mer inn i nettleseren for å jobbe, lukker gapet. Men verktøyene kommer frem for å lukke dette gapet enda lenger. Med verktøy som Macaw på randen av å bli løslatt, blir banen til en slutt på det omhyggelige gapet mellom design og frontend-utvikling forkortet.


Skjermbilde fra Macaws grensesnitt

Disse verktøyene vil i stor grad dra nytte av det faktum at webdesigntrender har vedtatt flate farger med svært liten tekstur og forutsigbart gjentatte elementer. Disse elementene er langt mindre komplekse enn de svært bildeavhengige ui-elementene for noen få år siden, så det er et viktig stadium å introdusere verktøy for automatisk å generere velorganisert, semantisk kode.

Hva du ikke vil se ennå: automatisk JavaScript

Du vil ikke se en god "WYSIWYG" -is JavaScript-implementering for noe utover grunnleggende konfigurerbare widgets. Hovedårsaken til dette er at HTML og CSS begge er deklarativ språk, mens JavaScript er et programmeringsspråk. "Lerret" for JavaScript er iboende tekstredigeringsprogrammet. Lerret for HTML er iboende dokumentet.


Betydelig færre grafiske PNGs

Som nettlesere adopterer de nyeste standardene, blir telefonene raskere, skjermbildene blir mer uforutsigbare, og design fortsetter å flate ut, vi ser en betydelig reduksjon i antall grafiske bilder som brukes på et gitt nettsted. Komplekse brukergrensesnittelementer vil fortsette å stole mer og mer på CSS, og for ting som ikke kan oppnås rent med CSS, vil SVG bli vedtatt. Det primære unntaket er fotografering. Store bilder vil fortsette å kreve mer designrom som designere stole mer på innholdsrettet transparent bilder for å definere erfaring og fortellende.


Visuell presentasjon av Exposure.io

Men seriøst, SVG

Med flotte eksempler som dukker opp overalt, slår SVG sitt hovedmål. Vi kan forvente å se mer tilgjengelige verktøy for å lage grunnleggende infovis uten mye problemer (think ChartJS), samt flere pedagogiske verktøy som avslører potensialet og kraften til SVG til personer som ikke har hatt incitament til å utforske SVG tidligere.


SVG dekorasjon med rettighet til fixate.it

Vedtak av Flexbox

Selv om flexbox-spesifikasjonen fortsatt sitter i et ikke-standardisert ingenmans land, er det relativt god støtte på tvers av nettleserne. Det har ikke vært en bred adopsjon av flexbox (av ukjente grunner), men vi tror i år at det vil være en press mot adopsjon.


Philip Walton forklarer hva som kan løses med flexbox

Vi er begeistret nok om flexbox her på Tuts + at vi skal legge ut en guide som forklarer hvordan du lager oppsett med flexbox snart, så pass på det!

Hva du ikke vil se ennå: full adopsjon av srcset

Du vil ikke se full godkjenning av en retina bilde løsning ennå. Selv om Webkit har implementert srcset, løser utviklere allerede dette problemet på litt mindre effektiv eller robust måte. Samtidig som srcset Til slutt vil det være nødvendig, for de fleste utviklere vil fortsette å løse problemene ved å lagre større bilder med lavere kvaliteter.


En overbelastning av videoorientert design

Husk da parallax ble den neste heten? Alle begynte å bruke det på nye og spennende (så vel som slitte og skremmende) måter å fortelle historier og forbedre brukeropplevelsen. Du kan forvente at folk kommer til å adoptere video som et designelement (for eksempel som bakgrunn) i stedet for bare som en "teater" opplevelse som vi har sett med YouTube.


Ja, det klopt. De får en baby.

Dette har eksistert lenge (det var til og med inkarnasjoner bygd i Flash), men har ikke fått popularitet med kommersielle ventures til nylig. Med dette kommer det interessante utfordringer, spesielt relatert til videoformat og komprimering.


Animerte og responsive ikoner

Mens animasjoner absolutt ikke er en ny ting, øker animert logo og ikonelementer i popularitet. SVG-animasjon kan gjøres med CSS, og prosjekter som Iconic, som økte over 6 ganger deres mål på Kickstarter, samt åpen kildekodeinnsats som Climacons, viser løfte om en ny trend i brukeropplevelsesdesign basert på vektorbaneanimasjoner.

SVG Ikoner Animert med CSS av Noah Blon (@noahblon) på CodePen


Vedtak av andre skjerm

I løpet av det siste året har TV-serier som Breaking Bad tilbudt en annen skjermopplevelse, noe som gir seerne en dypere måte å samhandle med innholdet.


Breaking Bads andre skjermopplevelse

I 2014, som vedtak av mobil fortsetter å nå lavere sluttmarkeder og tilkobling øker i ubiquity, vil vedtakelsen av andre skjerm utvide til flere viser og flere formater. Dette kan til og med inkludere ting som å synkronisere telefonen til datamaskinen din mens du ser på et show på Hulu, eller koble nettbrettet ditt med spillkonsollen for å tilby sekundær informasjon om hva du ser eller gjør på skjermen.

Dette er et helt annet designområde enn grunnleggende innholdsdesign. Designere må vurdere enda mer begrepet sekundær oppmerksomhet, oppfylle rollen som "akkompagnement" i stedet for "hovedstadiet".


Enklere mobiloptimalisering

"Responsive" er tydeligvis den dominerende metoden i webdesign. Til tross for hvordan du håndterer det økende behovet for teknologi-agnostisk design og kode, fortsetter brukerne å flytte til flere enheter i flere miljøer. Opptil nå har mobiloptimalisering vært et ikke-trivielt foretak; gjør kodene dine så små som mulig, byggemessige spørringer, å oppnå høye framerater, bruk av caching og mange andre hensyn tar betydelige investeringer.

I 2014 vil mange rammeverk fullt ut vedta den første mobile metoden, og barrieren for å skape svært effektive nettsteder for enhver teknologi vil senke. Kodebiblioteker som Hammer.js, Zepto.js, Animate.css, og mange andre har ledet avgiften. Som vi tidligere har opplevd med næringenes adopsjon av HTML5, håper vi også å se en bransjebasert adopsjon av beste praksis for mobiloptimalisering som går utover bare å skrive CSS-spørringer.


Du kan berøre dette, takket være hammer.js

Publisert innhold uten Fluff

Medium, Svbtle, Editorial, exposure.so, Ghost, og mange andre verktøy og plattformer har innvarslet en ny epoke av webinnhold som fokuserer rent på å presentere skriving i et høyt tilgjengelig format uten noen design krykker. Dette skiftet vil fortsette, påvirke temautvikling, nye webtjenester og "kollektiv design estetisk".


Medium

Videre lesning

Du vil kanskje også sjekke ut Collis 'siste tanker om trender for webdesign for det kommende året: 2014 Forutsigelser for webdesign.


Hva ser du til?

Tror du på tvers-nettlesertesting er på vei ut? Har du en ide om en ny stigende trend? Del det i kommentarene!