Wat te verwachten in Web Design in 2015

Twaalf maanden geleden plaatsten we enkele voorspellingen over wat we zouden zien (en niet zien) in 2014. Het sloeg een touw met jullie allemaal, dus we hebben besloten hetzelfde te doen dit jaar!

Vorig jaar voorspelden we de aanhoudende stijging van de SVG, de afname van PSD-slicing en een overload aan videogestuurd ontwerp, naast tal van andere dingen. Komend jaar zullen we meer van hetzelfde zien. Dit is wat we denken dat u zult zien in webdesign in 2015!

Prototypen van Extravaganza

Prototyping is niet zomaar een modegril, het is een belangrijk onderdeel van de toekomst van webdesign.

Naarmate het web steeds geavanceerder en gecompliceerder wordt, blijven we verder van statische mockups en meer afstappen naar volledig interactieve ervaringen die veel meer vereisen dan een nog te beschrijven beeld. Met tools voor prototypen kan een ontwerper niet alleen laten zien hoe een bepaalde digitale ervaring eruit ziet, maar ook wat hij kan do.

Prototyping-tools worden gebruikt voor veel verschillende specifieke interacties, waaronder eenvoudig ontwerp van animaties, overgangen en ondersteuning voor meerdere apparaten. Maar prototypen kunnen veel meer dan alleen de visuele esthetiek laten zien, ze kunnen werken als wireframingoplossingen met een hoge resolutie. Ontwerpers en informatiearchitecten beginnen elkaar een beetje meer te trainen in elkaars territorium omdat de applicatiearchitectuur zal blijven worden geïntegreerd met het ontwerpproces.

Hulpmiddelen die u zou kunnen gebruiken om Prototype te gebruiken

  • Framer - Schetsgeïntegreerde prototype-tool op basis van Coffeescript, gebouwd voor interactieprototyping met hoge resolutie. 
  • Origami - gebouwd door de mensen op Facebook, Origami werkt met Quartz Composer om interactieve prototypen te bouwen. 
  • InVision - InVision is een geweldige manier om aan de slag te gaan met prototyping. Door statische schermafbeeldingen te maken en deze op een heel eenvoudig niveau interactief te maken, kunnen gebruikers een koppeling maken tussen weergaven, commentaar geven op specifieke plekken in het ontwerp en gebruikmaken van een versie met een versie van het prototype zelf. 
  • Codepen - Codepen is een tool waarmee je heel snel iets in de browser kunt proberen. Met een paar eenvoudige klikken, kunt u een leeg canvas hebben met populaire JavaScript-, CSS- en HTML-bibliotheken. Codepen bevat ondersteuning voor zaken als HAML, LESS / SASS en het koppelen van externe bestanden (zoals jQuery). Demo's bouwen in de browser heeft ook het voordeel dat het draagbaar is en direct bruikbaar in een echt live project.

Verder lezen, luisteren en kijken:

  • Wat een prototype is (en is het niet) 
  • Prototyping: A Practitioner's Guide (Book) door Todd Zaki Warfel
  • Prototyping (@ Facebook) | Origami | Quartz Composer | Framer 
  • Introductie tot prototyping
  • PrototypingTools.co

Wat u niet ziet: gereedschappen om prototypering rechtstreeks naar productie te nemen

Prototyping-tools zijn nog niet voldoende geperfectioneerd om ze rechtstreeks in de browser te zetten (tenzij ze natuurlijk in de browser starten, zoals Codepen). Sommigen zullen proberen dit te bereiken, maar uiteindelijk zal de conversie van prototypen naar voor de productie geschikte gecodeerde digitale producten nog steeds worden uitgevoerd door menselijke ontwikkelaars. De vaardigheden hebben om prototypen om te zetten in voor productie geschikte code blijft een zeer gewaardeerde skillset voor anderszins strikt visuele ontwerpers om te bezitten.

Meer schetsacceptatie

Schets is in populariteit gestegen sinds de release door Bohemian Coding. Sketch is speciaal ontworpen om digitale ontwerpen te maken. Misschien heb je nog nooit van Sketch gehoord, maar we denken dat dit zal veranderen en dit jaar zul je zien dat het blijft groeien.

De vorige leider van het pakket, Photoshop, was eigenlijk nooit bedoeld om specifiek te worden gebruikt voor webdesign. Adobe heeft producten zoals Muse en Edge blijven gebruiken om een ​​aantal van de webspecifieke ontwerpuitdagingen aan te pakken waar Photoshop tekortschiet. Desalniettemin nemen Sketch en andere alternatieven die zijn gebouwd door kleinere ontwikkelingsbedrijven toe.

Wat u niet zult zien: Death of Adobe

Hoewel Sketch en soortgelijke tools worden gebruikt, is Adobe nog steeds een krachtige kracht in de ontwerpgemeenschap. Adobe is publiekelijk blijven reageren op de stemmen van ontwerpers. Adobe heeft bijvoorbeeld een site gemaakt om het onderwerp Photoshop for Design te herkennen. 

Adobe is ook een zeer groot bedrijf, wat hen het voordeel geeft van snellere releasecycli en meer middelen om grootschalige functies te lanceren. Vanwege de bestaande gebruikersbasis kunnen samenwerkingsfuncties gemakkelijker worden toegepast. De aanhoudende aanwezigheid van Adobe in de ontwerpgemeenschap zal hun toepassingssuite blijven behouden in de lijst met benodigdheden voor ontwerpers.

Overmatig gebruik en misbruik van "materiaalontwerp"

Materiaalontwerp is het langverwachte conceptuele raamwerk van Google voor de manier waarop digitale producten moeten worden opgemaakt en gerationaliseerd. Als onderdeel van het materiaalontwerp heeft Google praktische handleidingen uitgegeven voor het implementeren van de concepten.

Materiaalontwerp wordt weliswaar grotendeels geïnspireerd door de esthetiek van het "platte" ontwerp. Omdat de esthetiek van Google deze trend volgt, is de massale acceptatie al begonnen. Materiaalontwerp wordt geïntegreerd in Wordpress-thema's en herbruikbare widgets / downloadbare bibliotheken, plug-ins en zelfs Polymer, een krachtige webcomponentbibliotheek die niet alleen plug-and-play functionaliteit, maar ook componentspecifieke styling biedt.

Hoewel Google's Material Design absoluut een goede baseline en richting voor het web biedt, kunnen we ook het volgende van de trend verwachten ten koste van de producten die worden gemaakt. Material design esthetiek is geen "one size fits all" oplossing voor het web als geheel. Net zoals we zowel geweldige als gruwelijke implementaties van videobeelden en parallaxeffecten op internet zien, zullen we ook geweldige (en ongelooflijk vreselijke) implementaties van Material Design zien.

Wat u niet zult zien: minder ontwerpparadigma's

Toen het web nog in de kinderschoenen stond, was het webontwerp relatief vergelijkbaar in een bepaalde willekeurige selectie van sites. Noch technologie noch cultuur hadden het medium gepusht om een ​​manier van uitdrukken te zijn.

Dit gold voor de meeste media. Zo leken veel van de vroegste boeken waarschijnlijk erg op elkaar, met vergelijkbare lay-outs en voornamelijk gebaseerd op de inhoud voor de expressieve verschillen..

Naarmate de technologie vorderde, de internetsnelheid toenam en CSS werd goedgekeurd, werd nieuwe esthetiek op het internet geïntroduceerd. Deze vooruitgang was ook niet klein; esthetische technieken op het web explodeerden. Maar zelfs in de vroege jaren 2000 vertoonden veel websites vergelijkbare stijlen.

Snel vooruit naar de spreekwoordelijke dood van Flash en de introductie van smartphones en mobiele applicaties. Dit was een periode waarin het ontwerp op het web volwassen werd. Krachtige nieuwe ontwikkelingen brachten ons voorbij het bedrijfsgestuurde 'Web 2.0'-tijdperk en naar een tijdperk waarin het web een leeg canvas werd. Tegenwoordig kan elke willekeurige selectie van websites enorm verschillen, en dit zal niet veranderen.

De kracht en veelzijdigheid van de browser en de verscheidenheid aan apparaten die toegang hebben tot het internet zullen alleen nieuwe en andere ontwerpoplossingen blijven aanmoedigen voor nieuwe en andere problemen. Material Design is geen signaal van een convergentie, maar eerder een signaal van een collectieve erkenning van het belang van een doordacht ontwerp.

Growing Pattern: Collections als een deelbare interactie

Natuurlijk heeft het internet iedereen toegang gegeven tot een podium voor het creëren van inhoud. Een aanzienlijk deel van de wereldbevolking maakt regelmatig gebruik van Facebook en op een gegeven dag creëert het menselijk ras ruim 2,5 miljard gigabytes aan gegevens.

Natuurlijk veranderen de soorten dingen die we creëren naarmate de tijd vordert en worden er nieuwe wegen voor creatie geopend. Vijf jaar geleden bijvoorbeeld hebben we misschien alleen Facebook-berichten op muren en geüploade foto's gemaakt, maar nu maken we complete merkwinkels op Etsy en verkopen we handgemaakte en digitale items eenvoudig online.

In 2015 zullen we waarschijnlijk een aanhoudende trend zien in de richting van tastemaking als een vorm van expressie. Tastemakers zijn personen die items ordenen of posten of een verzameling items voor anderen om te zien en mogelijk te gebruiken als onderdeel van hun eigen smaak. Dit patroon bestaat al lang bij het maken van muziekafspeellijsten; we drukken ons uit door het beheren van liedjes en delen die afspeellijsten vervolgens via Spotify (of, in de jaren 80 en 90, mixtapes).

Maar het gaat verder dan muziek.

Vandaag delen we Pinterest-kaarten, Amazon-lijsten, YouTube-afspeellijsten en oneindig veel meer collecties. De kansen in deze ruimte zijn niet afgenomen, maar groeien alleen maar verder. We waarderen dit soort interacties omdat ze menselijk zijn en veel persoonlijker dan 'suggesties' die door een algoritme worden geboden.

Een geweldige verklaring waarom dit zo krachtig is, is te vinden op ASongADay.co:

"Geen fancy algoritmen (nog), nog geen automatisering. Ik zal je persoonlijk een nummer sturen waarvan ik denk dat je het elke dag leuk zult vinden, geheel bepaald door je muzikale voorkeuren zoals hieronder aangegeven en mijn eigen muzikale mening. Ik ben geen expert, ik luister gewoon naar veel muziek en mensen lijken me te vertrouwen. Elk nummer komt als een verrassing, waarschijnlijk niet elke dag op hetzelfde tijdstip. Omdat ik (nog) geen mens ben. "

De service van Shannon is zo veel gevraagd dat ze vrijwilligers moest gaan vragen om haar te helpen eenvoudigweg een aangepast nummer te sturen, geselecteerd op basis van de muzikale smaak van die persoon.

We kunnen dingen als filmcuraties verwachten (zoals Netflix-afspeellijsten / collecties - we kunnen het hopen, toch?), Productcuratie voor beroemdheden, en zelfs toepassingsvoorkeuren en instellingen die worden gedeeld.

Zakelijke vraag naar mobiel wordt universeel

We hebben geweten dat de toekomst van het web zal blijven diversifiëren en meer naar de mobiele ruimte zal gaan. Maar tot dit jaar hebben we nog steeds weerstand ondervonden tegen volledige mobiele overwegingen als een algemene vereiste voor serieuze zaken.

Een kritieke massa gebruikers zal dit jaar voornamelijk via mobiele apparaten internetten. Dit vereist een zakelijke reactie, om te gaan waar de klanten hun tijd en geld doorbrengen.

Voor webontwerpers betekent dat dat het vandaag de dag is om te gaan nadenken over hoe je moet ontwerpen voor een wereld met meerdere apparaten.

Cliënten zullen om een ​​premium handgemaakte gebruikerservaring vragen (hoewel ze niet weten wat dat betekent)

Vanwege de voortdurende verzadiging van de startup designcultuur, is de taal van een "handgemaakte gebruikerservaring" de discussie blijven doordringen over wat een geweldig product is. Ze weten misschien niet wat dat betekent, maar dat zou je wel moeten doen.

Een geweldig product is niet noodzakelijkerwijs over het volgen van de trends. "Premium handgemaakte gebruikerservaringen" zijn niet eenvoudig te realiseren; ze vereisen zeer opzettelijke, gerichte en complete ervaringen die zeer relevant zijn voor de gebruiker en wat de gebruiker probeert te bereiken. 'Handgemaakt' verwijst in het bijzonder naar het gevoel voor karakter en 'ziel' dat u kunt vinden in een handgemaakte tafel of een paar laarzen. Het gevoel van vakmanschap en aandacht voor detail wordt steeds belangrijker voor klanten. Webontwikkelaars van wereldklasse zullen degenen zijn die de vaardigheden ontwikkelen die nodig zijn om dat gevoel van vakmanschap en ziel toe te voegen aan iets dat anders aanvoelt als een koude, levenloze reeks pixels.

Kaarten, 'Micro-Ervaringen' en Composable Portable Embeds

Je zou deze voorspelling elders in andere eindexamens kunnen zien, maar het is zo prominent dat we het niet eens konden zijn: draagbaar kaartontwerp is een enorm onderdeel van het heden en de toekomst van webdesign. Twitter doet dit al een tijdje, maar andere sites raken aan. Er wordt op het internet voortdurend verwezen naar online-inhoud op verschillende manieren die veel verder gaan dan eenvoudige hyperlinks. YouTube en andere sites voor het delen van video's doen dit in feite ook sinds hun oprichting.

Het patroon is eenvoudig: maak een ingesloten, integreerbare interface die de gebruiker een samenhangende set interacties biedt en relevante inhoud weergeeft voor de externe inhoud waarnaar wordt verwezen.

Deze integreerbare kaarten hoeven niet per se op afstand te wonen van hun host-sites. Deze kaarten vertonen een ander patroon dat "micro-ervaringen" wordt genoemd. Een goed voorbeeld van een micro-ervaring is de Like-knop. Als een Facebook-gebruiker is de actie "Vind ik leuk" een enkele klik die veel betekenis heeft. Ten eerste kan Facebook doorgaan met het verzamelen van uw voorkeuren en voorkeuren. Het staat ook andere gebruikers toe om deze voorkeuren en smaken te zien. Door dit soort micro-ervaring kan een gebruiker communiceren met een bepaald merk of een bepaalde site zonder de huidige context te hoeven verlaten. Het biedt ook de mogelijkheid voor een gebruiker om op verschillende niveaus te communiceren resolutie. Met andere woorden, de gebruiker hoeft niet een reeks stappen te doorlopen en je hele applicatie of ervaring in één keer te gebruiken; ze kunnen communiceren op verschillende niveaus van inputvereisten.

Er zijn veel redenen waarom micro-ervaringen belangrijk zijn, maar de belangrijkste reden is de verschillende resoluties van verschillende apparaten. Een bepaalde gebruiker die een stoep tegenkomt of een gebruiker die met zijn laptop op de bank zit, heeft zeer verschillende interactievaardigheden en -doelen. Micro-ervaringen zorgen voor een progressieve benadering van interactievereisten voor gebruikers.

Wearables: nog geen big deal, maar klaar voor gebruik

De Apple Watch signaleert het begin van de draagbare revolutie, maar verwacht niet dat het te snel omhoog schiet. Voor Apple, andere grote apparatenbedrijven en applicatieontwikkelaars, zal het cultiveren van applicatiepijplijnen voor wearables enige tijd vergen. Als webontwikkelaars moeten we ons voorbereiden op deze uitbreiding naar een nieuwe klasse apparaten, maar dit gebeurt niet meteen. De veiligste gok is om je geld op mobiele apparaten te plaatsen met aanraakschermen, vooral 'phablets' (grote telefoons en kleinere tablets).

Van http://sketchresources.com/elements/apple-watch

Conclusie

Er is een gemeenschappelijk thema in veel van de voorspellingen voor 2015. Als 2014 een jaar was voor mobiel, is 2015 het jaar van meer van hetzelfde soort verandering. De wereld zal zich verder blijven ontwikkelen in de richting van mobiliteit en een landschap met meerdere apparaten. Webesthetiek zal blijven diversifiëren, en webontwerpers zullen hun aandacht moeten verleggen van "pagina" -ontwerp naar flexibel, handgemaakt digitaal ontwerp dat steunt op sterke prototypevaardigheden en een bewustzijn van interactie in verschillende omgevingen..

Wat zie je gebeuren in het komende jaar? Laat het ons weten in de comments!