Vad förväntas i webbdesign 2015

För tolv månader sedan lade vi fram några förutsägelser om vad vi skulle se (och inte se) 2014. Det slog en ledning med er alla, så vi har bestämt oss för att göra samma sak i år!

Förra året förutspådde vi SVG: s fortsatta utveckling, minskningen av PSD-skivning och en överbelastning av videoinriktad design bland många andra saker. Det här året kommer vi att se mer av detsamma. Här är vad vi tror att du kommer att se i webbdesign 2015!

Prototypning Extravaganza

Prototypning är inte bara en kram - det är en stor del av webdesignens framtid.

Eftersom webben blir mer och mer avancerad och komplicerad fortsätter vi att flytta längre bort från statiska mockups och mer mot helt interaktiva upplevelser som kräver mycket mer än en stillbildsfilosofi att beskriva. Prototypverktyg tillåter en designer att visa inte bara vad en viss digital upplevelse ser ut, men också vad det kan do.

Prototypverktyg används för många olika specifika interaktioner, inklusive enkel animationsdesign, övergångar och flera överensstämmelser för enhetstöd. Men prototyper kan göra mycket mer än bara visa den visuella estetiken, de kan fungera som trådlös lösning med hög upplösning. Designers och informationsarkitekter kommer att börja korsa i varandras territorium lite mer, eftersom applikationsarkitekturen fortsätter att integreras med designprocessen.

Verktyg du kan använda till prototyp

  • Framer - Skiss-integrerat, Coffeescript-driven prototypverktyg byggt för prototyper med hög upplösning. 
  • Origami - byggt av folket på Facebook, arbetar Origami med Quartz Composer för att bygga interaktiva prototyper. 
  • InVision - InVision är ett utmärkt sätt att komma igång med prototyper. Genom att ta statiska skärmdumpar och göra dem interaktiva på en mycket enkel nivå kan användarna koppla mellan synpunkter, kommentera specifika punkter i designen och använda en versionad vy av prototypen själv. 
  • Codepen - Codepen är ett verktyg som gör att du kan prova något i webbläsaren mycket snabbt. Med några enkla klick kan du ha en tom duk med populära JavaScript, CSS och HTML-bibliotek. Codepen innehåller stöd för saker som HAML, LESS / SASS, och länka externa filer (som jQuery). Att bygga demos i webbläsaren har också fördelen av att vara bärbar och omedelbart användbar i ett verkligt live-projekt.

Ytterligare läsning, lyssna och titta på:

  • Vilken prototyp är (och inte) 
  • Prototyper: En utövarehandledning (bok) av Todd Zaki Warfel
  • Prototypning (@ Facebook) | Origami | Quartz Composer | Framer 
  • Introduktion till prototypning
  • PrototypingTools.co

Vad du inte kommer att se: Verktyg för att ta prototyper direkt till produktion

Prototypverktyg har inte blivit perfekta nog för att ta dem rakt in i webbläsaren (såvida de förstås inte startas i webbläsaren, till exempel Codepen). Vissa kommer att försöka åstadkomma detta, men slutligen kommer omvandlingen av prototyper till produktionskodade digitala produkter fortfarande att utföras av humana utvecklare. Att ha färdigheter att konvertera prototyper till produktionsklar kod fortsätter att vara en högt värderad kompetens för att annars strikt visuella designers ska ha.

Mer skissupptagning

Skiss har stigit i popularitet sedan den släpptes av Bohemian Coding. Skissen är speciellt utformad för att skapa digitala mönster. Du kanske aldrig hört talas om Sketch, men vi tror att det kommer att förändras och i år ser du det fortsätter att växa.

Den tidigare ledaren av paketet, Photoshop, var aldrig faktiskt avsedd att specifikt användas för webbdesign. Adobe har fortsatt att släppa ut produkter som Muse and Edge för att ta itu med några av de webbaserade designutmaningarna där Photoshop är kort. Ändå ökar Sketch och andra alternativ som byggs av mindre utvecklingsföretag.

Vad du inte kommer att se: Död av Adobe

Även om Sketch och liknande verktyg antas är Adobe fortfarande en kraftfull kraft i designgemenskapen. Adobe har fortsatt att reagera offentligt på designers röster. Till exempel har Adobe skapat en webbplats för att känna igen ämnet Photoshop for Design. 

Adobe är också ett mycket stort företag, vilket ger dem fördelen av snabbare frigöringscykler och fler resurser för att starta storskaliga funktioner. På grund av det befintliga användargrundlaget är samarbetsfunktioner lättare att anta. Adobes vidhängande närvaro i designgemenskapen fortsätter att behålla sin applikationssvit i listan över nödvändiga saker för designers.

Överanvändning och missbruk av "Material Design"

Materialdesign är Googles långvariga konceptuella ram för hur digitala produkter ska läggas ut och rationaliseras. Som en del av materialdesign har Google lagt ut praktiska guider för hur man implementerar sina koncept.

Materialdesign är visserligen inspirerad av estetiken av "platt" design. Eftersom Googles estetik följer denna trend har massupptagning redan börjat. Materialdesign integreras i Wordpress-teman och återanvändbara widgets / nedladdningsbara bibliotek, plugins och till och med Polymer, ett kraftfullt webbkomponentbibliotek som innehåller inte bara plug-and-play-funktionalitet utan även komponentspecifik styling.

Medan Googles materialdesign definitivt ger en bra baslinje och riktning för webben, kan vi också förvänta oss följande trend till nackdel för de produkter som skapas. Material design estetik är inte en "one size fits all" lösning för webben som helhet. Precis som vi ser både stora och fasansfulla implementeringar av videobakgrunder och parallaxeffekter över hela webben kommer vi också att se stora (och otroligt hemska) implementeringar av Material Design.

Vad du inte ser: färre designparadis

När webben var i sin spädbarn var webbdesign relativt likadan över ett givet slumpmässigt urval av webbplatser. Varken teknik eller kultur hade drivit mediet för att vara en yttre aveny.

Detta har varit sant för de flesta medier. Till exempel var många av de tidigaste böckerna sannolikt väldigt lika, sportiga liknande layouter och baserade sig främst på innehållet för de uttryckliga skillnaderna.

Som tekniken avancerade, ökade internethastigheten, och CSS antogs, nya estetik introducerades på webben. Denna utveckling var inte heller liten; estetiska tekniker på webben exploderade. Men även i början av 2000-talet uppvisade många webbplatser liknande stilar.

Snabbspolning fram till Flash 'smarta död och introduktionen av smarta telefoner och mobila applikationer. Det här var en period när designen mognades på webben. Kraftfulla nya framsteg tog oss förbi den affärsdrivna "Web 2.0" eraen och i en tid där webben blev en tom duk. Idag kan valfritt slumpmässigt urval av webbplatser se väldigt olika ut, och det här kommer inte att förändras.

Kraften och mångsidigheten i webbläsaren och de olika enheter som använder Internet kommer bara att fortsätta att uppmuntra nya och olika designlösningar till nya och olika problem. Materialdesign är inte en signal om konvergens, utan snarare en signal om ett kollektivt erkännande av vikten av genomtänkt design.

Växande mönster: Samlingar som en delaktig interaktion

Naturligtvis har Internet tillhandahållit alla som har tillgång till ett steg för att skapa innehåll. En betydande del av världens befolkning kommer regelbundet åt Facebook, och på en given dag skapar mänskligheten över 2,5 miljarder gigabyte data.

Självklart är de saker som vi skapar förändring som tiden går och nya vägar för skapandet öppnas. För fem år sedan kanske vi bara skapat Facebook-inlägg på väggar och uppladdade bilder, men nu skapar vi hela märkesbutiker på Etsy och säljer handgjorda och digitala artiklar online enkelt.

Under 2015 kommer vi sannolikt att se en fortsatt trend mot tastemaking som en form av uttryck. Tastemakers är individer som curate och posta objekt eller en samling av saker för andra att se och eventuellt adoptera som en del av sin egen smak. Detta mönster har funnits för längsta tiden med skapandet av musikspellista; vi uttrycker oss genom härdning av sånger och delar sedan de här spellistorna via Spotify (eller i 80- och 90-talen, mixtapes).

Men det går längre än musik.

Idag delar vi Pinterest-kort, Amazon-listor, YouTube-spellistor och oändligt fler samlingar. Möjligheterna i detta utrymme har inte minskat, men fortsätter bara att växa. Vi uppskattar dessa slags interaktioner eftersom de är mänskliga och mycket mer personliga än "förslag" som tillhandahålls av en algoritm.

En bra förklaring till varför detta är så kraftfull finns på ASongADay.co:

"Inga fina algoritmer (ännu), ingen automatisering (ännu). Jag skickar personligen en låt som jag tror att du kommer att tycka om varje dag, helt bestämd av dina musikaliska preferenser som anges nedan och min egen musikaliska åsikt. Jag är ingen expert, jag lyssnar bara på mycket musik, och folk verkar lita på mig. Varje sång kommer att komma som en överraskning, förmodligen inte på samma gång varje dag. Eftersom jag är mänsklig, inte en robot (ännu). "

Shannons tjänst är så efterfrågad att hon måste börja be om volontärer att hjälpa henne att helt enkelt skicka en anpassad sång utvald utifrån den personens musikaliska smak.

Vi kan förvänta oss saker som filmkörningar (som Netflix-spellistor / samlingar-vi kan hoppas, eller hur?), Kändisproduktkurering och till och med applikationspreferenser och inställningar delas.

Affärsbehovet för mobil kommer att bli universellt

Vi har visat att webbanans framtid fortsätter att diversifiera och flytta mer in i mobilutrymmet. Men fram till i år har vi fortfarande sett motstånd mot fullständiga mobila överväganden som ett vanligt krav för allvarliga affärer.

En kritisk massa användare kommer att få tillgång till Internet framför allt via mobila enheter i år. Detta kräver ett företagssvar, att gå där kunderna spenderar sin tid och sina pengar.

För webbdesigners betyder det att det idag är dags att börja tänka på hur man ska designa för en multi-device-värld.

Kunderna kommer att begära en Premium Handcrafted User Experience (även om de inte vet vad det betyder)

På grund av den fortsatta mättnaden av startdesignkulturen har språket i en "handgjord användarupplevelse" fortsatt att genomgå diskussioner om vad som gör en bra produkt. De kanske inte vet vad det betyder, men du borde.

En bra produkt handlar inte nödvändigtvis om att följa trenderna. "Premium handgjorda användarupplevelser" är inte lätta att uppnå; De kräver mycket avsiktliga, fokuserade och kompletta erfarenheter som är mycket relevanta för användaren och vad användaren försöker åstadkomma. "Handcrafted" hänvisar specifikt till karaktärsinnehållet och "själen" som du kan hitta i ett handgjort bord eller par stövlar. Känslan av hantverk och detaljerad detaljer är allt viktigare för kunderna. Webbutvecklare i världsklass kommer att vara de som utvecklar den kompetens som krävs för att lägga till den känslan av hantverk och själ i vad som annars skulle kunna känna sig som ett kallt livlöst utbud av pixlar.

Kort, "Micro-Experiences" och Composable Portable Embeds

Du kanske ser den här förutsägelsen i andra årsskiftet, men det är så framträdande att vi inte kunde hjälpa men att hålla med: bärbar kortdesign är en stor del av nuvarande och framtiden för webbdesign. Twitter har gjort det här ganska länge, men andra webbplatser hamnar på. Online-innehåll fortsätter att refereras över hela webben på olika sätt som går långt utöver enkla hyperlänkar. YouTube och andra videodelningssidor har gjort detta i grunden sedan starten.

Mönstret är enkelt: skapa ett inbyggt, inbäddningsbart gränssnitt som ger användaren en sammanhängande uppsättning interaktioner och visar relevant innehåll för det refererade fjärrinnehållet.

Dessa inbäddade kort behöver inte nödvändigtvis leva på distans från sina värdwebbplatser. Dessa kort visar ett annat mönster som heter "mikroupplevelser". Ett bra exempel på en mikroupplevelse är Liknande knappen. Som Facebook-användare är "Like" -åtgärden ett enda klick som rymmer betydande betydelse. För det första tillåter Facebook att fortsätta samla dina preferenser och smakar. Det tillåter även andra användare att se dessa preferenser och smakar. Denna typ av mikroupplevelse gör det möjligt för en användare att interagera med ett visst varumärke eller webbplats utan att behöva lämna sitt nuvarande sammanhang. Det gör det också möjligt för en användare att interagera på olika nivåer av upplösning. Med andra ord behöver användaren inte gå igenom en rad steg och använda hela applikationen eller uppleva allt på en gång. De kan interagera på olika nivåer av insatsbehov.

Det finns många anledningar till varför mikroupplevelser är viktiga, men den främsta orsaken är olika upplösningar av olika enheter. En viss användare som går nerför en trottoar mot en användare som sitter på soffan med sin bärbara dator har mycket olika interaktionsförmågor och mål. Mikroupplevelser möjliggör ett progressivt tillvägagångssätt för interaktionskrav för användare.

Tröjor: Inte än en stor överenskommelse, men bli redo ändå

Apple Watch signalerar början av den bärbara revolutionen, men förvänta dig inte att det ska skyrocket för snabbt. För Apple, andra stora enhetsföretag och applikationsutvecklare, kommer det att ta lite tid att odla applikationsledningar för bärbara datorer. Som webbutvecklare borde vi förbereda oss för denna expansion till en ny klass av enheter, men det kommer inte att hända omedelbart. Den säkraste satsningen är att sätta dina pengar på mobila enheter med pekskärmar, speciellt "phablets" (stora telefoner och mindre tabletter).

Från http://sketchresources.com/elements/apple-watch

Slutsats

Det finns ett vanligt tema i många av förutsägelserna för 2015. Om 2014 var ett år för mobil är 2015 det år med mer av samma typ av förändring. Världen kommer att fortsätta att gå vidare mot rörlighet och ett mångsidigt landskap. Web-estetik fortsätter att diversifiera och webbdesigners kommer att behöva flytta sitt fokus bort från "sida" -design och mot anpassningsbar, flexibel, handgjord digital design som bygger på starka prototypfärdigheter och en medvetenhet om interaktion i olika miljöer.

Vad ser du på att hända inom det närmaste året? Låt oss veta i kommentarerna!