Konceptudvikling final

899 views

Published on

Oplæg for Grafik 2010 konferance

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/gonzalobaeza/4096799964/
  • http://www.flickr.com/photos/turkletom/4325703868/sizes/l/
  • http://www.flickr.com/photos/allaboutgeorge/4579793448/
  • http://www.flickr.com/photos/suvcougar/1273657633/sizes/o/
  • http://www.flickr.com/photos/bluesquarething/3596988489/sizes/l/
  • http://www.flickr.com/photos/bluesquarething/3596988489/sizes/l/
  • http://www.flickr.com/photos/cyberdees/2618269398/sizes/l/
  • www.apple.com
  • http://www.flickr.com/photos/ahyatt/3196068902/
  • Og det handler meget om vores syn på brugerne…Traditionel marketing har handlet om, hvad vi som organisation kan gøre ved forbrugerne…
  • Konceptudvikling final

    1. 1. KONCEPTUDVIKLINGTIL DIGITALE MEDIER<br />TRENDS, METODER OG VÆRKTØJER<br />Anna Taws, digital designerJonas Friisberg Nielsen, kommunikationsrådgiver<br />
    2. 2. Kort om os<br />THE BASIC FACTS<br />65 medarbejdere i København, Århus og Malmø.<br />Fokus på strategisk rådgivning og løsning af integrerede kommunikations- og udviklingsopgaver for private og offentlige virksomheder<br />Bysted er med sine 20 år i branchen en velkonsolideret virksomhed, både økonomisk og fagligt. Bysted er en del af IntellectaAB<br />Bysted har indgået en strategisk alliance med Force Technology’s Human factors specialister og produktdesignerne Harrit-Sørensen ASi navnet MANFAC<br />
    3. 3. Kort om os - SPIDSKOMPETENCERNE<br />Kampagne <br />& PR<br />Analyse <br />& Strategi<br />Visuel <br />identitet<br />Finansiel<br />kommunikation<br />Design<br />Management<br />Oplevelses-<br />kommunikation<br />Teknisk rådgivning-<br />og implementering<br />Digital <br />Kommunikation<br />
    4. 4. DEN MEDIEREDEOPLEVELSE<br />
    5. 5. De oplevelser vi skaber, påvirkes af det medie, vi kommunikerer i<br />http://www.flickr.com/photos/hulk4598/3405941761/<br />
    6. 6. 5<br />Tendenserfor det digitalemedie…<br />
    7. 7. 1<br />Det mobile internet<br />http://www.flickr.com/photos/gonzalobaeza/4096799964/<br />
    8. 8. Større muligheder for mobilitet<br />3G<br />4G<br />
    9. 9. Oplevelser knyttes til sted…<br />
    10. 10. Augmented reality…<br />http://www.flickr.com/photos/turkletom/4325703868/sizes/l/<br />
    11. 11. Touchscreen grænseflader…<br />http://www.flickr.com/photos/aperturismo/4488250788/<br />
    12. 12. Påvirkning af tekniske formater…<br />http://www.flickr.com/photos/allaboutgeorge/4579793448/<br />
    13. 13. 2<br />Socialt<br />http://www.flickr.com/photos/suvcougar/1273657633/sizes/o/<br />
    14. 14. Community og deltagelse…<br />
    15. 15. Brugergenereret indhold…<br />
    16. 16. 1<br />3<br />Adfærds-formende design<br />Det mobile internet<br />http://www.flickr.com/photos/bluesquarething/3596988489/sizes/l/<br />
    17. 17. Design, der udelukker eller motiverer til en bestemt adfærd…<br />
    18. 18. 4<br />Remix<br />
    19. 19. Remedieret indhold…<br />
    20. 20. 5<br />Rigere medieindhold<br />http://www.flickr.com/photos/cyberdees/2618269398/sizes/l/<br />
    21. 21. Mange formidlingsmuligheder…<br />
    22. 22. Det betyder alt sammen noget for den måde, brugerne anvender mediet…<br />
    23. 23. Forventningshorisont og tålmodighed har flyttet sig…<br />
    24. 24. Der er kommet rigtig mange om buddet…<br />
    25. 25. Digital intimitet og ambient awareness<br />www.boingboing.net<br />
    26. 26. Vi bruger flere platforme til at tilgå medieindholdet…<br />
    27. 27. Brugskonteksten ændrer sig…<br />http://www.flickr.com/photos/ahyatt/3196068902/<br />
    28. 28. …og det gør det alt sammen (endnu mere) vigtigtmed et nuanceret syn på brugerne<br />
    29. 29. Traditionel marketing:<br />Den forsvarsløse modtager<br />Peter Merholzm.fl.: Subject to Change (2008), O’Reilly<br />http://www.flickr.com/photos/visbeek/2348285288/<br />
    30. 30. Økonomiske modeller<br />Nyttemaksimerende rationel adfærd<br />Peter Merholzm.fl.: Subject to Change (2008), O’Reilly<br />http://www.flickr.com/photos/tao_zhyn/442965594/<br />
    31. 31. Human Computer interaction<br />Adfærd baseret på fastlagte mål og opgaver<br />Peter Merholzm.fl.: Subject to Change (2008), O’Reilly<br />http://www.flickr.com/photos/torley/2587091353/<br />
    32. 32. Ikke helt forkert, men…Mennesker er trods alt mere komplekse<br />
    33. 33. Det gode koncept bør (også) tage højde for:<br /><ul><li> Følelser
    34. 34. Kontekst
    35. 35. Hverdagsliv </li></ul>http://www.flickr.com/photos/janet_calcaterra/266571955/sizes/o/<br />
    36. 36. Det gode koncept er forankret i en klar strategi (og alle efterfølgendedesignaktiviteter bør fokuseres på at opfylde strategiens mål)<br />
    37. 37. Den digitale strategi<br />Målsætninger og forretningsstrategi<br />Hvorfor kommunikerer vi online? Hvilke forretningsmæssige mål ønsker vi at opnå? Hvordan kan det måles (f.eks. i øgede indtægter eller reducerede omkostninger)? Hvilke operationelle mål understøtter forretningsmålene?<br />Identificér målgruppen<br />Hvem skal vi kommunikere med online? Hvad kendetegner dem? Hvordan skal vi prioritere vores målgrupper? <br />Brandposition og værdigrundlag<br />Hvilket brand og hvilke værdier ønsker vi at kommunikere? <br />Måling og opfølgning<br />Hvordan måler vi på, om målene er opfyldt – og hvornår måler vi?<br />
    38. 38. Informationsarkitektur, interaktionsdesign og indhold<br />
    39. 39. Skitser, strukturdiagrammer, flowcharts, interaktive prototyper, visuelt design<br />
    40. 40. Teknik og valg af platform<br />
    41. 41. TYPER AF SITES, MEDIER OG SYSTEMER<br />CLOSED SOURCE<br />PROJEKTRUM, WEBLOGS & GRUPPER<br />SOCIALE MEDIER OG MINI-SITES<br />OPEN SOURCE<br />
    42. 42. VISUELDESIGN <br />
    43. 43.
    44. 44. Visuelle koncepter til digitale medier<br />
    45. 45. Nogle genrer….<br />
    46. 46. Branding <br />
    47. 47. Dansk design center – ddc.dk<br />Branding<br />
    48. 48. Novozymes årsrapport<br />Branding<br />
    49. 49. informative/servicesites<br />
    50. 50. Uddannelsesguiden - ug.dk<br />Informative/service sites<br />
    51. 51. Københavns Kommune - kk.dk<br />Informative/service sites<br />
    52. 52. salg<br />
    53. 53. Kino.dk<br />Salg<br />
    54. 54. oplevelser<br />
    55. 55. Vibeonline.dk<br />Oplevelse<br />
    56. 56. KøbenhavnsBefæstning - befaestningen.dk<br />Oplevelse<br />
    57. 57. Socialeplatforme<br />
    58. 58. FC Savanna – fcsavanna.dk<br />Sociale platforme<br />
    59. 59. Activista – myactivista.org<br />Sociale platforme<br />
    60. 60. DetDanskeSpejderkorps - dds.dk<br />Sociale platforme<br />
    61. 61. Kollektiv handling<br />
    62. 62. WWF Verdensnaturfonden, Earth Hour – wwf.dk/earthhour<br />Kollektivehandlinger<br />
    63. 63. WWF Verdensnaturfonden- burningpanda.dk<br />Kollektivehandlinger<br />
    64. 64. Andre platforme<br /># Mobil: Smartphones<br /># Viralt<br />
    65. 65. Smartphones<br />
    66. 66. Smartphones<br />
    67. 67. Ipad<br />
    68. 68. Viral kampagne<br />
    69. 69. HOW TO DO…<br />
    70. 70. # alt er baseret på vores fortid<br /># tag noget uensartet og lave det til noget nyt<br /># systematisere alt, restriktioner giver frihed<br />Nogleordomkreativproces<br />
    71. 71. Byggeriet<br />
    72. 72. # Design + kode<br /># Wireframes, mockup<br /># Struktur<br /># Grid<br />Byggeriet<br />
    73. 73. Design + kode<br />
    74. 74. Wireframes<br />
    75. 75. Struktur<br />
    76. 76. Grid system<br />
    77. 77. Grid system<br />
    78. 78. Grid system<br />
    79. 79. Grid system<br /># Konsistens<br /># Framework for mange sider<br /># Nemt at bruge<br /># Præ-eksisterende struktur<br />
    80. 80. Ressourcer<br />
    81. 81. # Fonte<br /># Farve<br /># Ikoner<br /># Billeder<br />Ressoucer<br />
    82. 82. Fonte<br />
    83. 83. Font muligheder med CSS<br />Serif eller sans serif<br />Linje længde (12 ord er godt!)<br />Leading (1.1 – 1.5 em)<br />LetterspacingLower cast – gør det ikke!<br />Kerning – spatiering<br />Farve font vs. hvid space<br />
    84. 84. # Georgia<br /># Verdana<br /># Lucida<br /># Palatino<br /># Arial <br /># Gill sans <br /># Helvetica Neue<br />Websikre fonte<br />
    85. 85. Hvad med de non-websikre fonte?<br /># Sifr<br /># Pixel rendering (image file)<br /># Cufon (javascript)<br /># Typekit (javascript)<br />
    86. 86. Font<br />
    87. 87. Font<br />
    88. 88. Font<br />
    89. 89. farve<br />
    90. 90. 3 Farve sites<br /># Kuler<br /># colorotate<br /># colourlovers<br /># designmeltdown<br />
    91. 91. Farve<br />
    92. 92. Farve<br />
    93. 93. Farve<br />
    94. 94. Farve og billeder<br />
    95. 95. Ikoner<br />
    96. 96. Ikoner<br />
    97. 97. Ikoner<br />
    98. 98. Ikoner<br />
    99. 99. Ikoner<br /># istock<br /># famfamfam<br /># Iconfinder.net<br />
    100. 100. Knapper, call to action<br />
    101. 101. Flere<br />Værktøjer<br />
    102. 102. # Software værktøj<br /># Templates<br /># Inspiration<br />
    103. 103. # Fireworks<br /># Photoshop<br /># Flash<br /># Illustrator<br />Software værktøj<br />
    104. 104. CSS layouts og templates<br />
    105. 105. 5 inspirations/nytte links<br />http://www.designfloat.com/<br />http://delicious.com/popular/design<br />http://psd.tutsplus.com/<br />http://www.smashingmagazine.com/<br />http://patterntap.com/<br />
    106. 106. Inspiration<br />
    107. 107. Inspiration<br />
    108. 108. Inspiration<br />
    109. 109. Inspiration<br />
    110. 110. Inspiration<br />
    111. 111. Fremtiden?<br />
    112. 112. 4<br />webDesign<br />tendenser<br />
    113. 113. Design For Delight<br />Print Design Influence<br />Real life metaphor<br />Rich, Strong Typography<br />Kilde: http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/<br />
    114. 114. Design For Delight<br />
    115. 115. Design For Delight<br />
    116. 116. Design For Delight<br />
    117. 117. Design For Delight<br />
    118. 118. Design For Delight<br />
    119. 119. Print Design Influence<br />
    120. 120. Print Design Influence<br />
    121. 121. Print Design Influence<br />
    122. 122. Print Design Influence<br />
    123. 123. Real life methaphor<br />
    124. 124. Real life methaphor<br />
    125. 125. Rich, Strong Typography<br />
    126. 126. Rich, Strong Typography<br />
    127. 127. What’snext<br />Navigation<br />Touchscreen<br />Knapper<br />GPS<br />
    128. 128. Navigation<br />
    129. 129. Navigation<br />
    130. 130. Navigation<br />
    131. 131. Navigation<br />
    132. 132. Zipcar<br />
    133. 133. Iphoneapps<br />
    134. 134. Er du klar?<br />Enkelhed fungerer bedst!<br />Brug metaforer fra den virkelige verden<br />Design til dynamisk indhold<br />
    135. 135. Tak for jeres tid!<br />
    136. 136. Links<br /> Grid<br /> http://960.gs/http://www.designinfluences.com/fluid960gs/#http://www.spry-soft.com/grids/Fonthttp://www.josbuivenga.demon.nl/index.htmlhttp://www.theleagueofmoveabletype.com/Font replacementhttp://www.mikeindustries.com/blog/sifrhttp://cufon.shoqolate.com/generate/http://typekit.com/Farvehttp://kuler.adobe.com/#http://www.colorotate.org/http://www.colourlovers.com/http://2010.designmeltdown.comhttp://www.colourlovers.com/# http://labs.ideeinc.com/multicolr/<br />Ikonerhttp://www.iconfinder.com/http://www.iconwerk.de/http://famfamfam.com/http://www.istockphoto.com/index.php <br /><ul><li>Templates http://www.intensivstation.ch/en/templates/Webværktøjhttp://www.designfloat.com/http://delicious.com/popular/designhttp://psd.tutsplus.com/http://www.smashingmagazine.com/http://patterntap.com/Trendshttp://www.yourauxiliary.com/http://duplos.org/http://www.clholloway.co.za/http://www.fajnechlopaki.com/https://www.drippinginfat.com/http://carbonmade.comhttp://thebolditalic.com/AndreasTrolf/stories/159-dr-feelgoodhttp://thebolditalic.com/Kornlock/stories/185-cinderella-story-day-onehttp://visitmix.com/http://designinformer.com/grid-based-web-design-simplified/</li></li></ul><li>SPØRGSMÅL?<br />JONAS FRIISBERG NIELSEN<br />E-mail: jfn@bysted.dkTwitter: @jonasfriisberg39 16 27 00<br />ANNA TAWS<br />E-mail:anna@taws.dkTwitter: @annataws39 16 27 00www.taws.dk<br />

    ×