Helheten og detaljene
•
3 likes•951 views
På tre år har Netlife Research vokst fra 0 til 15 designere. – Vi har ingen utviklere, men leverer stadig større designsystemer og 99% av dem er responsive nettsteder. Derfor har vi endret måten vi jobber med design på. Foredraget handler om hvordan Netlife jobber med design og hvorfor prototyper er en helt sentral del av designprosessen. Du får også et innblikk i hvordan vi jobbet med å redesigne vår egen profil.
Recommended
More Related Content
Similar to Helheten og detaljene
Similar to Helheten og detaljene (20)
Helheten og detaljene
- 1. Helheten og detaljene Inge Fossland Making Web, 24. oktober 2013
- 2. Design = funksjon Er det lett å bruke det vi lager?
- 3. Design = innhold Hvordan snakker vi til brukerne? Hvilken stemme har nettstedet?
- 4. Design = merkevare Passer designet til merkevaren vi prøver å formidle?
- 5. Design = flyt Hvordan føles det å bruke det vi har laget?
- 7. 22 eksperter på brukeropplevelse • Nett- og innholdsstrategi • Brukersentrert design • Test, evaluering og måling • • • Spesialisert Uavhengig Høyt faglig fokus
- 13. Ansetter kokk Netlife 52 Satser på innhold Ny daglig leder Ekstern styre 2000 Første testlab (med Telenor) 2001 Første kontor i Oslo 2002 2003 ansatte Satser på design Første ansatte Etableres i Vest-Agder Ansetter barista Ny profil Gazelle bedrift 2004 2005 2006 2007 2008 2009 2010 2011 Flytter til Stenersgata 2012 2013 Åpner Bergenskontor
- 14. Mål: 1. Posisjonere selskapet som en designbedrift og leverandør av helhet. 2. Jobbe med større, strategiske prosjekter. 3. Øke kvaliteten på leveransene våre. Lage produkter som setter spor.
- 15. Strategi: 1. Redesigne nettstedene våre. 2. Utvikle en ny grafisk profil. 3. Utvikle en bedre designprosess og implementere den hos de ansatte.
- 16. Prosessen
- 18. Prosessen
- 19. ... bare hjerne.
- 20. ... bare hjerte.
- 29. Innsikter fra analysen: 1. Sterk nisjeposisjon (UX og IXD), men ingen posisjon som designbyrå. 2. Sterkt fagmiljø med kompetente, engasjerte konsulenter. 3. Profilen er vennlig, men for nøytral og viser ikke selskapets egenart.
- 32. Konsept Problemet er at insiktene fra analysefasen bare baseres på det kunden og brukerne kjenner til fra før.
- 33. Konsept Nå må vi se på hvilke innsikter vi kan bidra med.
- 34. Konsept Det denne fasen handler om er å skape retning og gjøre produktet unikt.
- 37. Utforske Utforske ulike ideer og virkemidler. • • • Tips: Lag en idebrief og bruk den som et utgangspunkt. Samle teamet og jobb med ideer sammen. Kom deg ut! Se på verden, ikke bare på Internett.
- 38. Idebrief 1-3 setninger som oppsummerer målet eller målene med prosjektet. En god idebrief er et problem som søker en løsning.
- 39. Idebrief: Hvordan kan vi fremstå som en seriøs designleverandør og bygge en sterk merkevare av 20 forskjellige konsulenter med mange ulike meninger? Et poeng om gangen Bedre typografi Kutte ut tåkeprat Bruke humor Færre farger Vise effekt Bygge profiler Illustrere personer? Avatarer!
- 43. Velge retning Prioritere ideer og velge retning for konseptet. • • • • Tips: Svarer ideen på analysen (idebriefen)? Hvilke ideer har størst potensiale? Hvilke konsekvenser har valget av retning? Velg én retning som dere tror på.
- 44. Idebrief: Hvordan kan vi fremstå som en seriøs designleverandør og bygge en sterk merkevare av 20 forskjellige konsulenter med mange ulike meninger? Et poeng om gangen Bedre typografi Enklere, tydeligere Kutte ut tåkeprat Grønt, svart og hvitt Færre farger Vise effekt Bygge profiler Illustrere personer? Bruke Vise mer illustrasjoner Bruke personlighet humor Avatarer!
- 47. Konsekvenser: 1. Vi må investere i illustrasjoner. 2. Vil fargebruken gå på bekostning av tilgjengelighet? 3. Vil vi fortsatt bli oppfattet som enkle, vennlige og tilnærmelige?
- 48. Spisse konseptet Finne kjernen i konseptet, bygge ut og tydeliggjøre konseptet. • • • • Tips: Hva må bygges ut for å formidle konseptet? Bygg opp konseptet gjennom få, men tydelige prinsipper. Bruk tid til å presentere hvert enkelt prinsipp. Forankre prinsippene i målene med prosjektet.
- 49. 1. Bygge personligheter Bygge profilen rundt de ansatte. Vise personlighet og egenskaper. Illustrere alle de ansatte. 2. Spisse budskapet Spissformulere, provosere. Rett på sak. Ett budskap om gangen. 3. Enklere, tydeligere Forenkle og tydeliggjøre formspråket. Ta eierskap til grønt.
- 53. På samme måte som at konseptet er basert på innsikter fra analysen, legger konseptet grunnlaget for designet.
- 54. Viktig! Design er ikke bare hvordan det ser ut.
- 55. Bra design har 3 ingredienser, alle er like viktige for kvaliteten på sluttresultatet.
- 57. Overordnet design Innholdsdrevet design av kjernesider. Sette en retning for designet.
- 58. Kjerne
- 59. Kjernesider 3-4 av de viktigste sidene eller funksjonene på nettstedet.
- 66. Innholdsstrategi Tekst- og bildestrategi. Utvikle stil og tone. Design uten innhold er bare dekor.
- 67. Eirik: Vi kutter innhold! 90% av innholdet ditt er søppel. Kontakt oss i dag! Eidar: Hverdagsstrategi Når så du sist strategidokumentet ditt? Her er vår tilnærming. Jostein: Elefanten må ut! Vi hjelper deg med å ta de vanskelige avgjørelsene. Kontakt oss i dag.
- 71. Jostein: pointing out the elephant in the room. Elephant in the room" is an English metaphorical idiom for an obvious truth that is either being ignored or going unaddressed. The idiomatic expression also applies to an obvious problem or risk no one wants to discuss.
- 76. Jostein: Elefanten må ut! Vi hjelper deg med å ta de vanskelige avgjørelsene. Kontakt oss i dag.
- 77. Detaljert design Videreutvikle og detaljere løsningen i iterasjoner. Dokumenere designsystem. Produsere innhold.
- 78. Detaljert Produksjonsklar prototype Designskisser Klikkbare designskisser Rik, interaktiv prototype Proof of concept Simpel Wireframes Klikkbare wireframes Papirskisse Rik, interaktiv wireframe Papirprototype Enkel Avansert
- 79. Detaljert Produksjonsklar prototype Designskisser Klikkbare designskisser Rik, interaktiv prototype Proof of concept Simpel Wireframes Klikkbare wireframes Papirskisse Rik, interaktiv wireframe Papirprototype Enkel Avansert
- 81. 1. Etablere prototype Modularisere kjernesider og innhold. Sette opp innholdsstruktur, layout, typografi.
- 89. Stilling og kontaktinfo .metadata Sitat .quote Prosjekter og erfaring .experience
- 99. Hvorfor prototype i HTML? • • • Realistiske design Mer konkret og presist. Færre oversettelser. Bedre kommunikasjon Teamet forstår hverandre, kunden forstår hva de får. Bedre leveranser Prototyper er enkle å teste og justere underveis.
- 100. Design kan deles opp For å jobbe effektivt må vi dele opp designet i mindre, håndterbare enheter og moduler.
- 102. person.php <div id="grid"> <?php include("inc/header.php"); ?> <section id="content"> <h1>Jostein Magnussen</h1> <?php include("personmetadata.php"); ?> <p>(...)</p> <?php include("personexperience.php"); ?> </section> <?php include("inc/footer.php"); ?> </div>
- 103. person-metadata.php <section class="metadata"> <ul> <li><strong>Telefon:</strong> +47 402 26 409</li> <li><strong>E-post:</strong> <a href="mailto:jostein@netliferesearch.com ">jostein@netliferesearch.com</a></li> <li><strong>Twitter:</strong> <a href="http://twitter.com/ josmag">@josmag</a></li> </ul> </section>
- 106. screen.scss // compass framework @import "compass/reset"; @import "compass/css3"; // global structure @import "grid"; @import "colors"; @import "typography"; // templates @import "template-frontpage"; @import "template-person"; @import "template-project"; // modules
- 107. SASS: variables // colors $netlife_green: #95cd28; $netlife_green_medium: #619210; $netlife_green_light: #496e1b; $netlife_grey_light: #e6e8e0; $netlife_grey_dark: #353535; body { background: $netlife_green; }
- 108. SASS: nesting #content { float: right; width: 640px; padding: 0 10px; aside { float: left; margin-left: -320px; &.small { width: 280px; } } }
- 109. SASS: mixins @mixin scopedmediaquery($queries...) { $length: length($queries); @for $i from 1 through $length{ @if $i % 2 == 1 { @media #{nth($queries, $i)} { #{nth($queries, $i+1)} { @content; } } } } }
- 110. 2. Innhold og design Jobbe iterativt med innhold, design og funksjonalitet. Utvikle designprinsipper.
- 111. Innholdsstruktur Før vi kan jobbe videre bør vi få oversikt over omfanget på designjobben.
- 118. Skisse, prototype, skisse Når basisstrukturen er på plass kan vi jobbe videre med designet.
- 130. HTML CSS .contact img { float: left; width: 90px; } .contact h2 { font-size: 20px; line-height: 24px; } .contact p { font-size: 14px; line-height: 20px; margin: 0; }
- 134. Designprinsipper Design handler om å etablere regler for forholdet mellom ulike elementer. Ved å jobbe med prinsipper og moduler gjør vi det mulig for andre å utvide designet uten at det går på bekostning av konseptet.
- 135. Spisse budskapet Tøffere, mer tabloid språk. Snakke tydelig, vise resultater. Skru opp volumet Ta eierskap til grønt. Velge bort alt annet. Komplettere med svart/hvitt og grått. Enkle, geometriske former Enkle, geometriske former er basis for grafiske elementer.
- 136. Prinsipper og moduler • • • • • • Designprinsipper Stil og tone. Layout, typografi, farger. Bilder, ikoner og illustrasjoner. Innhold og moduler Hva er innholdet? Hva skal forsterkes, hva skal tones ned? Hva er forholdet mellom ulike moduler?
- 137. Utstyr og verktøy Felles prototype. Forskjellige verktøy.
- 138. Standardutstyr: • Webserver: MAMP/Apache+PHP • Versjonshåndtering: Git (Tower) • HTML+CSS. • Valgfritt designverktøy. • Valgfritt kodeverktøy.
- 139. Forskjellige rammeverk: • HTML+CSS – små, enkle design • PHP+SASS – modularisere • XML – komplekse data • Statamic – enkelt, filbasert CMS • WordPress – selvstendig nettsted
- 140. 3. Evaluere og justere Evaluere designsystemet. Justere enkeltmoduler og designprinsipper. Teste og måle.
- 141. Design endrer seg Vi klarer ikke å planlegge alt før vi starter. Derfor må vi justere helheten underveis.
- 143. Evaluere og justere • • • • • • Designprinsipper Er design og innhold konsistent? Må vi justere typografi, layout, fargebruk? Hvordan fungerer språket vi bruker i grensesnittet? Innhold og moduler Hvilke moduler er like? Hvilke er unike? Er det noe vi bør slå sammen eller dele opp?
- 144. Test alt. Alltid. Brukertesting behøver ikke å være komplisert. Det er bedre å teste enkelt, enn å ikke teste i det hele tatt.
- 146. Prototypen = systemet Designsystemet er summen av alle prinsipper og moduler. Prototypen viser hvordan ting skal se ut, hva innholdet er og hvordan ulike sider og elementer forholder seg til hverandre.
- 151. Grafisk profil
- 166. Utfordringer Hva skjer når man ansetter 15 designere og prøver å jobbe på en helt ny måte?
- 167. Verktøy og metode Må alle kode HTML og CSS? Må vi standardisere verktøyene vi bruker og hvordan vi koder?
- 168. Samarbeid Hvordan sikrer vi at alle tar eierskap? Må alle være med på alt? Hvem skal gjøre hva?
- 169. Hvor langt skal vi gå? Hvor detaljerte prototyper skal vi lage? Hvor går skillet mellom design og teknologi?