Kursus i App Design 2012 Lektion 5

1. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Lektion 5
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

2. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Idag
Kl. 16.00 - 16.30 Hvordan er det gået med: mindmap over indholdet, wireframes og flow
diagrammer?
Kl. 16.30 - 16.45 Hvad skal vi bruge tiden på næste gang?
Kl. 16.45 - 16.55 Pause
Kl. 16.55 - 17.30 Farver og billedebeskæring
Kl. 17.30 - 18.00 Ikoner v dit eget ikon til din app
Kl. 18.00 - 18.05 Pause
Kl. 18.05 - 18.25 Sæt en app op i Seattle Clouds
Kl. 18.25 - 18.45 Photoshop/ Gimp øvelse
Kl. 18.45 - 19.00 Kodning i X-code, - eller lidt om Objective C
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

3. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Siden sidst
Hvordan er det gået med: mindmap over indholdet, wireframes og flow diagrammer?
• Mindmap over indholdet (Har I styr på “primary task”?)
• Wireframes
• Flow diagrammer
• Beskrivelse af funktioner
• Andre tiltag? (Kodning?)
• Skal vi arbejde lidt med det nu?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

4. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App arkitektur – Flow
• Lav et mindmap over dit indhold
• www.mindmeister.com/da
• Begynd at strukturere det
• Hvad er over og underordnet?
• Kort sorterings test (Usability)
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

5. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Wireframes
• Lad os se funktioner og sammenhænge
App Design 2012 - Charlotte Lærke Weitze - Lektion 4

6. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App arkitektur – Flow
Flow
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

7. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Hvor er I kommet til?
• Aflevering til sidste gang?
• Emner:
• Problemområde • Flow
• Faser i udviklingen • Navigation
• Målgruppe • Funktioner
• Konkurrenter • Wireframes
• Forretningsmodel • Moodboard
• SWOT • Grafik
• Skitser • Programmering?
• Prototyper • Præsentation
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

8. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Hvordan gør vi/ I?
• Hvordan vil I aflevere sidste gang?
• Poster? F.eks. rent grafisk: http://medialoot.com/blog/how-to-design-an-iphone-app-
in-photoshop/
• Video: http://youtu.be/ep-kLD59uVY
• Andet?
• Hvad har I brug for til det? (Materialer, viden?)
• Skal vi invitere:
• Gæster?
• “Dommere?”
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

9. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Næste gang
• App-design er et stort område!
• Hvad har I lyst til at vi arbejder med næste gang?
• Nye emner?
• Kodning?
• Mere .....xxx....??
• Hvordan tegner man et ikon, - vektor-baseret?
• Gøre app’en klar til fremlæggelse?
• Evaluering af kurset indtil nu? - Hvad “mangler der” evt.?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

10. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Check op på planen
• Hvad vil I gerne stå tilbage med? Notér!
• Og hvilken aflevering?
• Poster? F.eks. rent grafisk: http://medialoot.com/blog/how-to-design-an-iphone-app-in-photoshop/
• Video: http://youtu.be/ep-kLD59uVY
• Emner
• Problemområde • Flow
• Faser i udviklingen • Navigation
• Målgruppe • Funktioner
• Konkurrenter • Wireframes
• Forretningsmodel • Moodboard
• SWOT • Grafik
• Skitser • Programmering?
• Præsentation
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

11. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
GUL
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/

12. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
GRØN
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/

13. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
BLÅ
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/

14. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Gå ind og læs om farvernes betydning på: http://www.mariaclaudiacortes.com/
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/

15. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farve - Hjulet
• Farvehjulet
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

16. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farve - Hjulet
• Farvehjulet
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

17. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• https://kuler.adobe.com/#create/fromanimage
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

18. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Brug evt. jeres mood-board til at finde farver
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

19. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Farver
• Prøv at lege lidt inde på https://kuler.adobe.com/
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

20. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

21. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

22. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

23. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

24. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Filtre
• Filtre kan give gode/ sjove effekter
• Prøv et fotoredigerings program: Photoshop, Gimp eller f.eks.
http://www.aviary.com/web-key#
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

25. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
App’ens personlighed?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

26. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Ikon
• http://www.quirco.com/iPhoneIcon/
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

27. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Ikon
• Eller lav selv et i illustrator
Learn Notes
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

28. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Pause 10 min
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

29. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Tegn et design
• I photoshop/ GIMP
• http://medialoot.com/blog/how-to-design-an-iphone-app-in-photoshop/
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: http://medialoot.com/blog/how-to-design-an-iphone-app-in-photoshop/

30. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Resolution/ density / size
• iPhone 5: 1136px x 640px
• iPhone 4 (high resolution): 640 x 960 pixels
• iPhone 3S og før: 320 x 480 pixels
• Android
• Læs mere om hvordan man kan forstå resolution /density /size ift. hinanden her:
• http://www.tutsrus.com/designing-for-android.html
• http://www.teehanlax.com/blog/density-converter/
• http://developer.android.com/design/style/devices-displays.html
• http://developer.android.com/guide/practices/screens_support.html
• http://android-developers.blogspot.dk/2011/07/new-tools-for-managing-screen-sizes.html
• Video om det kodningsmæssige: 9:30 minutter henne: http://www.youtube.com/watch?v=C8
dGQEN9sRs&feature=related
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

31. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Icon Design Guidelines
iPhone:
• http://developer.apple.com/library/ios/#documentation/userexperience/con-
ceptual/mobilehig/IconsImages/IconsImages.html
Android:
• http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

32. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Alternativer ift. design
• www.crowdspring.com
• www.99designs.com
• underenplov.dk
App Design 2012 - Charlotte Lærke Weitze - Lektion 5

33. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Kod i Seattle clouds
• Vælg tema
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: http://seattleclouds.com/

34. APP DESIGN KURSUS
- et kursus i digital design og konceptudvikling
Eks. på iPhone kodning?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5