App Design Lektion 5 Charlotte Lærke Weitze
-
Upload
charlottelarke -
Category
Documents
-
view
224 -
download
1
description
Transcript of App Design Lektion 5 Charlotte Lærke Weitze
![Page 1: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/1.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Lektion 5
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 2: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/2.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
IdagKl. 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
![Page 3: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/3.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Siden sidst
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
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?
![Page 4: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/4.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
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)
![Page 5: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/5.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Wireframes
App Design 2012 - Charlotte Lærke Weitze - Lektion 4
• Lad os se funktioner og sammenhænge
![Page 6: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/6.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
App arkitektur – Flow
Flow
![Page 7: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/7.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Hvor er I kommet til?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
• Aflevering til sidste gang?
• Flow
• Navigation
• Funktioner
• Wireframes
• Moodboard
• Grafik
• Programmering?
• Præsentation
• Emner:• Problemområde
• Faser i udviklingen
• Målgruppe
• Konkurrenter
• Forretningsmodel
• SWOT
• Skitser
• Prototyper
![Page 8: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/8.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Hvordan gør vi/ I?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
• 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?”
![Page 9: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/9.jpg)
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
![Page 10: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/10.jpg)
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
• Faser i udviklingen
• Målgruppe
• Konkurrenter
• Forretningsmodel
• SWOT
• Skitser
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
• Flow
• Navigation
• Funktioner
• Wireframes
• Moodboard
• Grafik
• Programmering?
• Præsentation
![Page 11: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/11.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Farver• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/
GU
L
![Page 12: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/12.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Farver• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/
GRØ
N
![Page 13: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/13.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Farver• Farver kan have forskellige “betydninger” i sammenhæng med hvordan de anvendes.
App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: Claudia Cortes: Colorcommunication and symbolism: http://www.mariaclaudiacortes.com/
BLÅ
![Page 14: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/14.jpg)
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/
![Page 15: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/15.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Farve - Hjulet• Farvehjulet
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 16: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/16.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Farve - Hjulet• Farvehjulet
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 17: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/17.jpg)
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
![Page 18: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/18.jpg)
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
![Page 19: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/19.jpg)
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
![Page 20: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/20.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 21: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/21.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 22: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/22.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 23: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/23.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Beskæring
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 24: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/24.jpg)
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
![Page 25: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/25.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App’ens personlighed?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
![Page 26: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/26.jpg)
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
![Page 27: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/27.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Ikon• Eller lav selv et i illustrator
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
Learn Notes
![Page 28: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/28.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
App Design 2012 - Charlotte Lærke Weitze - Lektion 5
Pause 10 min
![Page 29: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/29.jpg)
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/
![Page 30: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/30.jpg)
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
![Page 31: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/31.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Icon Design GuidelinesiPhone:
• 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
![Page 32: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/32.jpg)
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
![Page 33: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/33.jpg)
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/
![Page 34: App Design Lektion 5 Charlotte Lærke Weitze](https://reader034.fdocument.pub/reader034/viewer/2022042614/5594d79a1a28ab3c3c8b467c/html5/thumbnails/34.jpg)
APP DESIGN KURSUS- et kursus i digital design og konceptudvikling
Eks. på iPhone kodning?
App Design 2012 - Charlotte Lærke Weitze - Lektion 5