Oplæg for Grafik 2010 konferance

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

34. Kontekst

35. Hverdagsliv 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

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!