Webbdesign

Designtrender och den visuella framtiden enligt David Landgren

David Landgren, AD, är en av de bästa jag jobbat med. Man skulle nästan kunna påstå att han är den digitala branschens kreativa Bruce Springsteen, sprungen ur en håla, ämnad för större ting i livet.

Jag möter honom på ett fik belägen på en bakgata i Vasastan för att ta temperaturen på det visuella och digitala landskapet.

David. Känns det bra att vara du?

Det känns riktigt bra faktiskt.

Jag vet ju vem du är, men kan du berätta lite för läsarna?

I grund och botten är jag en jäkligt skön kille som lärt upp mig själv. Self made. Har jobbat inom den digitala branschen i cirka åtta år nu med allt från start-ups till större byråer och IT-bolag.

Något mer om dig kanske?

Jag är jäkligt bra på bas.

Spännande. Vad fick dig att lockas till webben och den kreativa sidan?

Jag brukar säga att internet är min första och största kärlek. Det kombinerat med min talanglöshet för programmering gjorde att jag rätt naturligt hamnade på den kreativa sidan. Det har alltid vart intressant men beteenden och hur dessa kan formas och mötas med design.

Sammanfattat, jag gillar Photoshop, så enkelt är det.

Ok, ok, vad är du mest stolt över hittills?

Min resa. Jag har inte gått på ”de fina skolorna” utan lärt mig allt från grunden genom intresse och hårt arbete. Envisheten och kämpaglöden kommer nog från min far som alltid vart entreprenör vilket behövs i den bransch han verkat inom, och även den här.

När kände du av brytpunkten, det vill säga självkontrollen som yrkesman?

Jag tror att insikten kom för något år sedan när jag en dag insåg att vilka stora varumärken jag faktiskt jobbade med och den lyhördhet de visade upp inför mina tankar och åsikter.

Med det sagt så försöker alltid att vara ödmjuk inför min roll och försöker aldrig ta något för givet. Det finns alltid något nytt att lära sig och det är bit kvar till att bli en ”Top Dog”.

Tack, nog om dig. Hur har den visuella utvecklingen sett ut på nätet de senaste åren?

Det som har hänt på senare tid är att man jobbat mer med varumärket och låter det ta större plats. Influenser från print-världen är tydliga och man går mer och mer mot en magazine-känslan.

Stora bilder och genomarbetad typografi är lika självklart som en bargata på Kos. Som bonus verkar folk äntligen ha insett att folk mer än gärna scrollar och man kämpar inte lika hårt för att klämma in all information på de första 575 pixlarna.

Varför är det så tror du?

Jag tror att man har insett att design i sig har ett högt funktionsvärde. Det är inte bara “snygga bilder”. Det har en kommunikativ aspekt som man hedrar i mycket större utsträckning. Det används för att engagera och inspirera.

Internet har blivit folkligt helt enkelt och populeras av vanliga människor. Tidigare använde man teknik på ett jäkligt lustigt sätt, man snurrade t.ex. in tuffa flash-sidor vilket i slutändan inte visade sig vara så intressant utan bara någon sorts teknikon-ni. Nu änvänder man teknik till att streama musik, och film. Sjukt användbart och framför allt, folkligt.

Framförallt så används tekniken mer sansat idag och för första gången blir Internet extrovert och tillgängligt på riktigt.

Vad kommer hända det kommande decenniet?

En ökad teknisk utveckling kommer att skapa nya möjligheter och problem. Problem är fantastiska för de kräver kreativa lösningar.

Det som hänt nu t.ex. är anpassningen av alla nya behov som uppstått. Ta till exempel responsiv design som är sprunget ur en mer mobil livsstil och krav på kostnadseffektivisering.

Nästa steg blir att bygga ännu smartare och mer adoptivt i och med att internet har börjat handla mer om mig som person. All information som vi lämnar ifrån oss när vi surfar kan ju nyttjas för massa bra ändamål.

Vi kommer se mer av det samt lösningar byggda på design och koncept. Mer sansad formgivning för informationstunga applikationer och webbplatser.

Storytelling kommer också behöva ta mycket mer plats.

Jaså, hur då?

Man måste låta historien ta mer utrymme, svårare än så är det inte. Ta Apple eller Nespresso som fyller varumärket med historik och känslor. På det sättet känns internet jäkligt efter där man fortfarande försöker uppnå hygiennivåerna som existerar i den verkliga världen.

Vilka trender kommer vi att få se 2013?

Den stora snackisen nu är att folk är riktigt trötta på Skeuomorphism. Det vill säga att man låter t.ex. en anteckningsapp se ut som ett klassiskt skrivblock. Det fina med Skeuomorphism är enkelheten att förstå syftet med appen; utmaningen kan bli en begränsning i gränssnittet.

Mitt digitala beteende skiljer sig från mitt analoga. Jag söker inte på samma sätt bland mina e-böcker som jag gör i min bokhylla och därför ska man akta sig för att överanvända det.

Jag tror och hoppas att det kommer en stark mottrend till det inom kort. Vi kommer gå mot det mer stilrena och minimalistiska med så få detaljer som möjligt. Det ska bli intressant att se vilket avtryck Microsofts senaste operativsystem får för avtryck.

Mycket av det vi såg förra året, som till exempel parallax scrolling och responsiv design kommer att landa mer ordentligt. Tekniken är mogen och ett mycket större fokus kommer att ligga på hur vi kan implementera det på bästa (ett användbart) sätt.

2013 kommer kort och gott handla om att ta tillvara på alla de möjligheter som den senaste tiden teknisk utveckling har gett oss. Det finns många vägar att gå och det gäller att hitta en riktning. Hur bemöter vi konsumenterna i de olika kanalerna och med alla de möjligheter som finns tillhanda?

Tack David för denna stund och alla insikter. Vill du avsluta med att säga något smart?

Scrolla mer och scrolla gärna!

Vill du veta mer om David?

Se hans arbete här, kontakta honom här och stalka honom (rent affärsmässigt) här.

 

 

Tre trevliga CSS3-verktyg

CSS3 erbjuder en massa härligheter och börjar synas på allt flera ställen. Tyvärr så stödjer inte alla webbläsare detta men det är bara en tidsfråga innan framtiden är här. Tills dess så finns det en massa schyssta tjänster att leka med för att både effektivisera arbetsflöden men även för att lära sig. Här kommer tre trevliga:

CSS3 Button Maker
css3 button maker

Med CSS3 Button Maker så kan du skapa knappar med olika färger och former.

CSS3 Generator

Välj från en lista med olika CSS3-variabler, förändra deras egensaker och generera ut koden.

CSS3 Gradient Generator

Med CSS3 Gradient Generator kan du enkelt skapa gradienter. Riktigt enkelt.

Lite om design som ALLA borde ha koll på…

Det här med design är inte alltid prioriterat av olika anledningar, men värst är när den förkastas av okunskap eller inkompetens  Det många missar är att design är nått som faktiskt påverkar oss alla, alltid och en dålig sådan leder oftast till oönskade beteende. Hittade en slide med några bra hygienfaktorer som faktiskt alla bode ha koll på och inte bara de som direkt jobbar med design.

1. Design kan förändra företaget
2. Design är mer än bara fina bilder
3. Bra design fokusera på fördelar inte funktioner
4. Bra design täcker flöden inte enskilda steg
5. Bra design talar för sig själv
6. En bra designprocess börjar med en bra story
7. En bra designprocess funkar som en hävstång
8. En bra designprocess sker utanför kontoret
9. En bra designprocess har en bibel
10. En bra designprocess repeteras och förbättras

Låter kanske lite flummigt men skanna genom nedanstående slides så blir det mer självklart!

Webbdesign – hur vill du ha din?

Ah det här med design, så enkelt men samtidigt så svårt! Ingen som helst objektivitet existerar och endast fåtalet inser det extra värde som det faktiskt ger. Men hur påverkas din design av de valen som du gör? Hittade en underbar teckning som sammanfattar alla de paradoxer som man möts av. Nuff said, ta en titt.

webdesign

Responsive Design vs. Device Experiences

Allt fler börjar förstå värdet av att faktiskt finnas på flera enheter än bara datorn och multi-enhetsdesign har blommat upp på riktigt sen all hets kring responsive design. Men i all hets så är det lätt att glömma att responsive absolut inte är till för alla. När skall man använda det och vad finns på andra sidan myntet? Så här kan man se på det:

Responsive design

responsive design

Responsive design är en kombination av flytande gridar och lite annan teknisk magi som gör att layouten förändras beroende på läsarens storlek. Den nyttjar en funktion (på klient-sidan) som kartlägger förutsättningarna och agerar därefter. Enkelt.

Med responsive design får du således en kodbas som endast kräver en produktionssättning och du har dessutom en URL som pekar mot samma innehåll för alla de olika enheterna.

Vilka är utmaningarna då?

Det finns en del utmaningar idag som främst rör bilder, videoklipp, tredje-parts widgets samt klient-baserade funktioner som inte riktigt hänger med i den föränderliga designen. Det gör att videoklipp t.ex. inte blir mindre utan har sin ursprungliga storlek. Testa att kolla på denna sida i en iPhone så får ni se hur videoklippen inte hänger med.

När ska man använda sig av responsive design då?

  1. Du behöver inga enhets-specifika upplevelser
  2. Du har mest access till front-end
  3. När du inte har så mycket resurser
  4. Du tycker det är kul att saker byter plats när man ändrar storleken på webbläsaren

Device Experiences

design experience

Medan responsive design anpassar innehållet till alla enheter så är tanken med device experience att istället optimera innehållet till respektive enhet. Utifrån hur en enhet används (telefon, padda etc…) samt vilka tekniska förutsättningar och begränsningar som finnas så formas upplevelsen och kan därmed optimeras i mycket högre grad än med responsive.

Nackdelar/Utamningar?

Att skapa anpassade upplevelser till olika enheter är självklart mer resurskrävande och det behövs unika insatser både på front-end och gällande den tekniska utveckling för varje enskild enhet du vill satsa på. Dessutom behövs en magisk funktion (ligger ofta på server-sidan) som upptäcker enheterna i fråga och kan skicka ut dina skapelser. Detta gör även att de olika enheterna kommer att innehålla olika information för du sänder bara exakt den information som respektive enhet skall ha. Varken mer eller mindre.

När ska man använda sig av device experience då?

  1. När du vill maximera optimeringen/konverteringen för varje enhet
  2. När du vill erbjuda olika upplevelser och funktioner till de olika enheterna
  3. När du har resurser
  4. Du vill ha full kontroll på varenda liten pixel

Liten summering

Personligen så gillar jag responsive design, det gör allt rätt enkelt. Men har du större krav på din digitala närvaro eller jobbar du till exempel med e-handel då är responsive definitivt inget för dig.

Att använda design som ett strategiskt verktyg

Hittade en presentation på Slidshare av en Herr Munoz som lyfter frågan kring en designs begränsningar. Genom att utnyttja ett antal givna principer kan vi frångå den platthet som ofta upplevs kring design och istället kan vi börja att använda det ur ett strategiskt perspektiv.

När jag skummar genom presentationen så känns många tankar bekanta vilket skapar en genuin lyckokänsla i magen (är inte helt ute och cyklar, wohoo!).

Presentationen innehåller rätt många slides (154!) men är absolut värd att se igenom.

Designer As Catalyst

Hade jag vart lite piggare hade jag sammanfattat mer but not today.

Snygga & kostnadsfria designelement på Premium Pixels

Ibland så sitter man där och önskar att det fanns en magisk sida på webben som kostnadsfritt delade ut riktigt snygga sidelement. Dessutom skulle användningen av dessa element heller inte vara reglerade på något sätt utan det enda motkravet skulle vara tacksamhet.

Låter det som en dröm? Inte längre. Sen ett tag tillbaka har Orman Clark som driver Premium Pixels skapat och distribuerat vackra element för webbplatser helt kostnadsfritt och det tycker jag är riktigt trevligt. Se nedan för ett urval av olika element och skynda till hans webbplats för att gotta dig bland allt som är gratis!

En växande designtrend: Parallax scrolling

Parallax scrolling är bland de snyggare designeffekterna som har slagit ner i den digitala världen på bra länge!  Effekten i sig är dock ingen ny uppfinning utan har funnits länge i den närbesläktade spelbranschen. Ordet härstammar från det grekiska ordet parallaxis och betyder förändring. Spelbranschen började använda denna teknik redan 1982 i arkadspelet Moon Patrol.  Kortfattat så handar det om att få objekt i för- och bakgrunden att röra sig med olika hastigheter vilket skapar en illusion om djupet, pseudo3d-effekt at its best! (eg härstammar tekniken från 40-talet och traditionell animering)

Silverback — guerrilla usability testing

Silverback

Effekten fick en stor uppmärksamhet på webben när den för första gången implementerades på webbplatsen Silverbackapp.com. Den enkla effekten användes för att krydda till designen och träder endast fram när användarna ändrar storleken på sina webbläsare. Effekten har sedan dess utvecklats och synts till på ett flertal sidor runt om på webben. Det snyggaste exemplet på parallax scrolling hittils har Nike lyckats åstadkomma med sin webbplats  Nike Better World där hela sidan är uppbyggd som en enda stor parallax effekt för att skapa en intressantare upplevelse.

Nike Better World

Nike Better World

iutopi

Iutopi

Effektivare webbdesign med inspiration av infographics

Infographics är något som jag tycker riktigt mycket om. De är inte bara snygga, men har dessutom charmen att förenkla något som annars kan var väldigt svårförklarat. Allteftersom informationsflödena ökar och även vårt behov av att förstå komplexiteten i mycket av det vi möter, så har infographics blivit en riktigt värdefull tillgång.

Det är med andra ord inte så så konstig att infographics bara ökat de senaste åren. Det vi ser är ett unikt sett att förmedla information och göra det tillgängligt vilket väcker frågan, är det inte samma sak vi försöker göra med våra webbplatser? Är det inte ofta själva huvudsyftet med många av de webbar vi bygger, förmedla information på ett lättsmält sätt?

Varför inte då försöka applicera infographicstänket på webben? Genom att kombinera pedagogik med visuella hjälpmedel och nya kreativa tankebanor kring hur information kan förmedlas finns möjligheten att inte bara underlätta för användarna att ta till sig information men även förankra våra budskap på ett djupare plan. Lättförstådd information är lättare att minnas. För visst är det mycket trevligare att mötas av visuell elegans framför textuel nonchalans?

Här kommer ett gäng webbplatser som insett fördelarna med att förmedla information mer visuell och jag hoppas starkt på att detta bara är början på en ny era i webbdesign.

Amazeelabs.com

amazeelabs.com

Pointlesscorp.com

pointlesscorp.com

Imagemechanics.com.au

imagemechanics.com.au

Cornerd.com

cornerd.com

Carbonmade.com

carbonmade.com

 Scroll to top