App Design Lektion 5 Charlotte Lærke Weitze

APP DESIGN KURSUS- et kursus i digital design og konceptudvikling

Lektion 5

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


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 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)


Wireframes


• Lad os se funktioner og sammenhænge



App arkitektur – Flow

Flow


Hvor er I kommet til?


• 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


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?”


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.?



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


• Flow

• Navigation

• Funktioner

• Wireframes

• Moodboard

• Grafik

• Programmering?

• Præsentation


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




GRØ

N




BLÅ


Farver• Gå ind og læs om farvernes betydning på: http://www.mariaclaudiacortes.com/



Farve - Hjulet• Farvehjulet



Farver• https://kuler.adobe.com/#create/fromanimage



Farver• Brug evt. jeres mood-board til at finde farver



Farver• Prøv at lege lidt inde på https://kuler.adobe.com/



Beskæring



Filtre• Filtre kan give gode/ sjove effekter• Prøv et fotoredigerings program: Photoshop, Gimp eller f.eks.

http://www.aviary.com/web-key#



App’ens personlighed?



Ikon• http://www.quirco.com/iPhoneIcon/



Ikon• Eller lav selv et i illustrator


Learn Notes



Pause 10 min


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/


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



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



Alternativer ift. design• www.crowdspring.com

• www.99designs.com

• underenplov.dk



Kod i Seattle clouds• Vælg tema

App Design 2012 - Charlotte Lærke Weitze - Lektion 5 Kilde: http://seattleclouds.com/


Eks. på iPhone kodning?


App Design Lektion 5 Charlotte Lærke Weitze

Documents

Transcript of App Design Lektion 5 Charlotte Lærke Weitze