Design til små skærme

design tilmobile enheder

design tilmobile enheder

Ohøj!

Karsten Vestergaard

Hvad sker der?

Hvad kan du?

Hvad vil du?

Hvordan gør du?

Hvad sker der?

Hvad kan du?

Hvad vil du?

Hvordan gør du?

Hvad sker der?Hvad sker der?platforme

browsere

brugermønstre

PlatformeneHvor kan det vises

Platformene

en dagi Danmark

Tastatur

WIMP

Skærm

maskinen

browsere

Nuværende tilstand

kraftige enheder

opdaterede browsere

udvidet rækkevidde og platforme

stor forskel på skærmstørrelse

Portræt eller landskab

brugsmønster

browservindue ikke maksimeret på desktop

flere åbne vinduer på store skærme

brugsmønster

Input ændrer vores relation til mediet

Mediet ændrer vores relation til designet

Hvad vil du?Hvad vil du?

Indholdselementer

Det nye canvas

design teknik

WebsiteWebApp

Native App

website

IndholdNavigationMaster/DetailTouch centreret

website

NavigationMaster/DetailTouch centreret

WebApp

Afvikles over Internet/i en browserEr ofte skrevet med HTML/CSS/JSBrowser eksekvererTynd klientNem at vedligeholdeVirker på tværs af platforme

WebApp

Native App

Installeres på maskinenHøjtydendeDedikeret til én platformEr ofte skrevet platformens eget sprog

Native App

Native AppNative App

Hvad kan du?Hvad kan du?gammel vin på nye flasker

design teknik

WebdesignerWebdesigner

Webdesigner

HTML/CSS (JavaScript)

Flash (ActionScript)

Webdesigner

HTML/CSS (JavaScript)

Flash (ActionScript)

WebsiteWebAppNative Apps

Native Apps

Grafiskdesigner

Grafiskdesigner

Grafisk designer

InDesign

Layout

Typografi

Alt er pixels

Du er stadig designer!

Kan du lave Web?

Kan du Flash?

Nyt format

Nye brugerpositioner

Ny tankegang

Nye muligheder

&Grafisk designer

Webdesigner

"nye"teknologier

her skal du måske lære nyt

"nye"teknologier

The Homies

iOS:Objective-C (XCode)

Android:Java (Eclipse family)

Windows Phone:C++/C# (Visual

Studio/MonoDevelop)

Perterapeuterne

Mono Project:C++/C#

PhoneGap:HTML/JS

Flash:ActionScript/AIR

Klassiske designværktøjer

Dreamweaver:HTML/CSS/JS

Adobe Flash:ActionScript

InDesign:ePub/Flash/HTML

Udvalgte metoder/ord

Responsive designDesign Patterns

jQueryAJAX

(Single Page Application) SPA

http://www.youtube.com/watch?v=W8DQ1dyKKQk

Hvordan gør du?Hvordan gør du?hvordan kommer du igang

WebsiteWebAppWebsiteWebApp

http://youtu.be/s72uTrA5EDY?t=41m44s



http://www.youtube.com/watch?v=s72uTrA5EDY

Denmobileforskel

Du browser ikke det mobile web

Du har et specifikt formål med besøget

Du kan være motiveret af placeringen

Søger lokal information

Du kan ofte lide at dele information

1. Søgemaskiner

2. Sociale netværk

3. Forretning/Virksomhed

4. Videodelingstjenester

http://googlemobileads.blogspot.dk/2011/04/smartphone-user-study-shows-mobile.html

Mobilthierarki



Click-to-call (href="tel:12345678)

SMS (href="sms:12345678)

Links til sociale medier

Check-in (Yelp, Google places, 4sq etc.)

Maps (Google, Bing)


Mobilfunktionalitet



K.I.S.S. (keep it simple)

Prioriter indholdet

Fokuser på konvertering

Mobilens muligheder

Tap-able ikke clickable

Tænk vertikalt

Minimer scroll

Minimer loadetid

mobil/desktop version

Websitesindhold

Websitesteknologi

"Business as usual"

Ingen Flash

Rolig med JS-effekterne

HTML5 og CSS3 er fjong

Minimer billedstørrelser

CSS gradients

media queries

https://docs.google.com/file/d/0B7FNVipl6pmjUVdVMUl2Q1ZQODA/edit?usp=sharing

HTMLer responsivt

responsivt design

Et layout til flere platformeNemt at gå tilIndbygget i HTML/CSS

Unødig stor filKompleksitetHvor skalerbar er du?

sites designetspecifikt tilmobile enheder

www.site.dk/mobil, m.site.dk e. lign.

Templatestyret?

Databasestyret indhold?

fokuseret layout contra

kompromisløsning

WebApps

Et website med en App følelse

Oprindelig en desktop ting

Uddøende race på mobile enheder?

http://www.sumopaint.com/app/



design guides

iOS

Apple Human Guide Interface

● https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

● https://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007072

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html




Android

User Interface Guidelines

http://developer.android.com/design/index.html

http://developer.android.com/develop/index.html





Windows Phone

Windows Phone Design Guidelines

http://dev.windowsphone.com/en-us/design

http://dev.windowsphone.com/en-us/develop





User Interface

enkelt kompleks

http://dribbble.com/shots/612116-Simplistic-UI-Kit

ikoner

Systemets ikonerer kendte ...

Visuel logikKonsistensAflæsningNavigation

Dine egne er ikke

menu slider

menu slider

KonventionerEnkelt/præcisVejledendeKnapstørrelse

http://awesomeinspiration.net/post/42991161694/options-slider

Efterligning

Du kender platformenDe tilgiver ting de kender

"If we find something that works, we stick to it"

- Steve Krug

Brug bredden

Ofte kan du holde dig til en eller to kolonner.

Der kan være indbygget funktionalitet i knapper eller andre interaktive elementer.

Fokuser på opgaven

Det gør brugeren

For det meste kun én ting

Dyk ind i sitet via enkelte skærmbilleder

navigation flow

http://awesomeinspiration.net/post/42991242214/bmw-app-concept



Flat design

Etpar

programmer

Etpar

programmer

Dreamweaver

responsivt design - HTML5 -PhoneGap

Muse

InDesign tilgang - Ingen kodning - Mobil design

Edge Animate

Websafe animation - Flash/After Effects

Edge Reflow

Responsivt Design - Preview release

Hvordankommerdu videre

Hvordankommerdu videre

Design GuidesVideotræning

KodeskolerBlogs/Artikler

Fysisk træning

Webdesign er webdesign

Giv dig tid til at lære reglerne

Vær nysgerrig

Research ... som du plejer?

Navigér i høj sø

Tænk på brugeren og behovet

Nyttelæsning eller nydelseslæsning

Karsten Vestergaard

@ockleywww.hjaelpmignu.dk

Links and resources

http://thenextweb.com/dd/2012/09/09/check-25-sources-great-mobile-design-inspiration/

http://abduzeedo.com/design-trends-2013-flat-and-minimal

http://androidpttrns.com/

http://pttrns.com/

http://iphone.meer.li/

http://ui.theultralinx.com/

http://www.lovelyui.com/

http://www.mobile-patterns.com/

http://inspired-ui.com/

http://dribbble.com/search?q=mobile+app

http://www.designyourway.net/blog/inspiration/navigation-inspiration-for-mobile-user-interfaces-57-designs/


http://www.mobileawesomeness.com/

http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

http://mobilewebslinger.com/2012/04/20/16-mobile-website-best-practices/

http://labs.thesedays.com/blog/2010/07/16/10-tips-for-designing-mobile-websites/







http://pttrns.com/

http://pttrns.com/


























Design til små skærme

Design

Transcript of Design til små skærme