Design til små skærme

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

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

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

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

WebsiteWebAppWebsiteWebApp

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

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)

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

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

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

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

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

Windows Phone

Windows Phone Design Guidelines

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

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

User Interface

enkelt kompleks

ikoner

Systemets ikonerer kendte ...

Visuel logikKonsistensAflæsningNavigation

Dine egne er ikke

menu slider

KonventionerEnkelt/præcisVejledendeKnapstørrelse

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

programmer

Dreamweaver

responsivt design - HTML5 -PhoneGap

InDesign tilgang - Ingen kodning - Mobil design

Edge Animate

Websafe animation - Flash/After Effects

Edge Reflow

Responsivt Design - Preview release

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://thenextweb.com/dd/2012/09/09/check-25-sources-great-mobile-design-inspiration/

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/

Design til små skærme

Design

Transcript of Design til små skærme

de små skridts metode · Værestederne er et eksempel på social innovation. De tilpasser sig løbende til bruger-nes behov, til det øvrige hjælpesystems organisering og til det

FRA TOPPEN! · Små driftsmidler 2016 – søknadsfrist torsdag 31.mars Det er også for 2016 lagt inn i rammebevilgningen for museet en sum som skal gå til "Små driftsmidler" til

Morsom strikk til små sjarmtroll

Sådan hjælper EKF med eksport til Peru og Colombia · ses/Sider/SGM-Film.aspx. De små ... - Tal med EKF, hvis du skal med til Peru og Colombia til efteråret og ønsker møder

Tilsynet for små avløpsanlegg i Drammensregionen · 2014. 8. 14. · • Administrasjon slamtømming (fra 2012). • Kartlegge forurensing fra små avløpsanlegg . • Bistand til

Hverdagslivet til fods lang vej med små skridt...Hverdagslivet til fods lang vej med små skridt Ændrede rammer giver nye muligheder Ole Mygind, UCN Videncenter for kommunikation

”Dette er vel de minste for sm å til? ” minste for små til?” · Nina Nakling 1 ”Dette er vel de minste for små til?” ”Dette er vel de minste for sm å til? ” Et teoretisk

VELKOMMEN til 'Det resultatskabende team' · Skiftet til et mere moderne 'mindset' Vi har længe vidst at mennesket er “bygget” til at arbejde i små, hurtige og agile teams -

ØYTE KRS RSOAKEVF MEDVIRKNING I UTVIKLINGSPROSESSER...Derfor omfatter eksempelsamlingen alt fra små tips for å få til et bedre møte, til fullstendige oppskrifter på et verksted

FRA ENSOMHED TIL FÆLLESSKAB EGV 100 ÅR · formål, forskning og udvikling til gavn for dårligt stillede gamle mennesker. Arv og gaver til EGV ... om året små legatportioner til

MB400/MB500-serienbehov og budgetter. Spar tid og omkostninger Hvert produkt er designet til at være brugervenligt med tydelige skærme, intuitive menusystemer og dedikerede funktionsknapper.

Soleklare fordele med maksimalt udbytte · optimalt til opvarmning af brugsvandet og som supplement til centralvarmesystemet til såvel små som store behov – med solfangerarealer

Break Gender Stereotypes DK · workshop, til at berige og supplere uddannelsesprogrammer om HR-ledelse og virksomhedsorganisation og til at give praktiske ideer til, hvordan små

STOR TEST 4K-skærme til computeren · billedet til 4K. Altså teknologien, hvor tv’et gætter sig til de manglende pixel. Det er ikke ægte UHD/4K, men giver alt andet lige et

Mad til små - fra mælk til familiens mad

5 stk. Små shots rør - spritfabrikken-danmark.dk · anrcrnRL smÅ soun SHOT 1 vau smÅ SmÅ SHOT SPIRIT orang I VOL

Fra undervægtig til sund normalvægtig! · COPRIGH Lene Hansson Wellness Center - Holbergsgade 24 - 1057 København K lf: 70258800 - 3 Forslag til små, hurtige ...

Kompakt og praktisk monokrom MFP til små arbejdsgrupper

før du køber 39 KUN 95 - Planteskolen Rosenvang · blade, med smukke mørkerøde – violette høstfarver. Hvide blomster samlet i talrige, små skærme i juli til september. ...

Aktiviteter – November 16 – November 16.pdf · til Teater Vestvolden og så ’’Taynikma Skyggens Vilje’’ mens de små tog til Folketeatret og så ’’Hodja fra Pjort’’.