Konceptudvikling final

  • 683 views
Uploaded on

Oplæg for Grafik 2010 konferance

Oplæg for Grafik 2010 konferance

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
683
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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…

Transcript

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