Helheten og detaljene

640 views

Published on

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.

Published in: Design
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
640
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Helheten og detaljene

  1. 1. Helheten og detaljene Inge Fossland Making Web, 24. oktober 2013
  2. 2. Design = funksjon Er det lett å bruke det vi lager?
  3. 3. Design = innhold Hvordan snakker vi til brukerne? Hvilken stemme har nettstedet?
  4. 4. Design = merkevare Passer designet til merkevaren vi prøver å formidle?
  5. 5. Design = flyt Hvordan føles det å bruke det vi har laget?
  6. 6. Netlife Research 2010
  7. 7. 22 eksperter på brukeropplevelse • Nett- og innholdsstrategi • Brukersentrert design • Test, evaluering og måling • • • Spesialisert Uavhengig Høyt faglig fokus
  8. 8. 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
  9. 9. 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.
  10. 10. Strategi: 1. Redesigne nettstedene våre. 2. Utvikle en ny grafisk profil. 3. Utvikle en bedre designprosess og implementere den hos de ansatte.
  11. 11. Prosessen
  12. 12. Prosessen Analyse Konsept Design
  13. 13. Prosessen
  14. 14. ... bare hjerne.
  15. 15. ... bare hjerte.
  16. 16. Hjerne og hjerte!
  17. 17. Tverrfaglige team Design Innhold UX PL
  18. 18. Roller AD GD Design ID CS Innhold UA UX PL
  19. 19. Ansvar AD GD Design ID CS Innhold Konseptansvar UA UX Prosjektledelse PL
  20. 20. Analyse Analyse Konsept Design Leveranse
  21. 21. Analyse Forretningsmål Brukernes behov
  22. 22. Analyse Forretningsmål Brukernes behov
  23. 23. Analyse Forretningsmål Brukernes behov Insikter
  24. 24. 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.
  25. 25. Konsept Analyse Konsept Design Leveranse
  26. 26. Konsept Problemet er at insiktene fra analysefasen bare baseres på det kunden og brukerne kjenner til fra før.
  27. 27. Konsept Nå må vi se på hvilke innsikter vi kan bidra med.
  28. 28. Konsept Det denne fasen handler om er å skape retning og gjøre produktet unikt.
  29. 29. Unikt Unikt Brukervennlig Pålitelig Funksjonelt
  30. 30. Unikt Konsept Mål og brukerbehov
  31. 31. 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.
  32. 32. 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.
  33. 33. 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!
  34. 34. 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å.
  35. 35. 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!
  36. 36. 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?
  37. 37. 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.
  38. 38. 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.
  39. 39. Retning 1. 2. 3. 4. 5. 6. Kundens brief Analyse Innsikter Vår kunnskap Konsept Tydelig retning
  40. 40. Design Analyse Konsept Design Leveranse
  41. 41. Design Analyse Konsept Design Leveranse
  42. 42. På samme måte som at konseptet er basert på innsikter fra analysen, legger konseptet grunnlaget for designet.
  43. 43. Viktig! Design er ikke bare hvordan det ser ut.
  44. 44. Bra design har 3 ingredienser, alle er like viktige for kvaliteten på sluttresultatet.
  45. 45. Konsept Form Innhold Funksjon
  46. 46. Overordnet design Innholdsdrevet design av kjernesider. Sette en retning for designet.
  47. 47. Kjerne
  48. 48. Kjernesider 3-4 av de viktigste sidene eller funksjonene på nettstedet.
  49. 49. Forside Tjenester Prosjekter Kurs Om oss Tjeneste Prosjekt Kurs Person Kontakt
  50. 50. Innholdsstrategi Tekst- og bildestrategi. Utvikle stil og tone. Design uten innhold er bare dekor.
  51. 51. 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.
  52. 52. 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.
  53. 53. Jostein: Elefanten må ut! Vi hjelper deg med å ta de vanskelige avgjørelsene. Kontakt oss i dag.
  54. 54. Detaljert design Videreutvikle og detaljere løsningen i iterasjoner. Dokumenere designsystem. Produsere innhold.
  55. 55. Detaljert Produksjonsklar prototype Designskisser Klikkbare designskisser Rik, interaktiv prototype Proof of concept Simpel Wireframes Klikkbare wireframes Papirskisse Rik, interaktiv wireframe Papirprototype Enkel Avansert
  56. 56. Detaljert Produksjonsklar prototype Designskisser Klikkbare designskisser Rik, interaktiv prototype Proof of concept Simpel Wireframes Klikkbare wireframes Papirskisse Rik, interaktiv wireframe Papirprototype Enkel Avansert
  57. 57. Detaljert Simpel Rik, interaktiv prototype Enkel Avansert
  58. 58. 1. Etablere prototype Modularisere kjernesider og innhold. Sette opp innholdsstruktur, layout, typografi.
  59. 59. Logo og meny #header Introduksjon #feature Tjenester #services Kurs #events Blogg #blog
  60. 60. Logo og meny #header Sidespalte aside Hovedspalte #content
  61. 61. Stilling og kontaktinfo .metadata Sitat .quote Prosjekter og erfaring .experience
  62. 62. #header #content #footer
  63. 63. #header #content aside.small aside.large #footer
  64. 64. 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.
  65. 65. Design kan deles opp For å jobbe effektivt må vi dele opp designet i mindre, håndterbare enheter og moduler.
  66. 66. Modulær HTML med PHP http://php.net/
  67. 67. 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>
  68. 68. 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>
  69. 69. Dokumentstruktur index.php index-blog.php index-events.php index-feature.php index-services.php person.php person-experience.php person-metadata.php project.php project-metadata.php inc/ footer.php header.php
  70. 70. Modulær CSS med SASS+Compass http://sass-lang.com/ http://compass-style.org/
  71. 71. 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
  72. 72. 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; }
  73. 73. SASS: nesting #content { float: right; width: 640px; padding: 0 10px; aside { float: left; margin-left: -320px; &.small { width: 280px; } } }
  74. 74. 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; } } } } }
  75. 75. 2. Innhold og design Jobbe iterativt med innhold, design og funksjonalitet. Utvikle designprinsipper.
  76. 76. Innholdsstruktur Før vi kan jobbe videre bør vi få oversikt over omfanget på designjobben.
  77. 77. Tjenester Prosjekter Kurs Om oss Tjeneste Prosjekt Kurs Person Kontakt
  78. 78. Tjenester Prosjekter Kurs Om oss Tjeneste Prosjekt Kurs Person Kontakt
  79. 79. Tjenester Prosjekter Kurs Om oss Tjeneste Prosjekt Kurs Person Kontakt
  80. 80. Skisse, prototype, skisse Når basisstrukturen er på plass kan vi jobbe videre med designet.
  81. 81. 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; }
  82. 82. 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.
  83. 83. 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.
  84. 84. 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?
  85. 85. Utstyr og verktøy Felles prototype. Forskjellige verktøy.
  86. 86. Standardutstyr: • Webserver: MAMP/Apache+PHP • Versjonshåndtering: Git (Tower) • HTML+CSS. • Valgfritt designverktøy. • Valgfritt kodeverktøy.
  87. 87. Forskjellige rammeverk: • HTML+CSS – små, enkle design • PHP+SASS – modularisere • XML – komplekse data • Statamic – enkelt, filbasert CMS • WordPress – selvstendig nettsted
  88. 88. 3. Evaluere og justere Evaluere designsystemet. Justere enkeltmoduler og designprinsipper. Teste og måle.
  89. 89. Design endrer seg Vi klarer ikke å planlegge alt før vi starter. Derfor må vi justere helheten underveis.
  90. 90. 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?
  91. 91. Test alt. Alltid. Brukertesting behøver ikke å være komplisert. Det er bedre å teste enkelt, enn å ikke teste i det hele tatt.
  92. 92. Design Innhold Skisser Form Funksjon Teste og evaluere Leveranse Prototype Designretning Designprinsipper Designsystem
  93. 93. 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.
  94. 94. Netlife Research 2013
  95. 95. Grafisk profil
  96. 96. Men, virker det? 2010 2011 2012 2013
  97. 97. Utfordringer Hva skjer når man ansetter 15 designere og prøver å jobbe på en helt ny måte?
  98. 98. Verktøy og metode Må alle kode HTML og CSS? Må vi standardisere verktøyene vi bruker og hvordan vi koder?
  99. 99. Samarbeid Hvordan sikrer vi at alle tar eierskap? Må alle være med på alt? Hvem skal gjøre hva?
  100. 100. Hvor langt skal vi gå? Hvor detaljerte prototyper skal vi lage? Hvor går skillet mellom design og teknologi?
  101. 101. Spørsmål? Inge Fossland netliferesearch.com/inge/ @ingefossland

×