Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design

Mobile Design

Projektowanie mobilne w praktyce.

Adam Jodłowski

April 27, 2013
Tweet

More Decks by Adam Jodłowski

Other Decks in Design

Transcript

  1. Mobile Design
    Mobile Design
    projektowanie mobilne w praktyce
    projektowanie mobilne w praktyce

    View full-size slide

  2. adaptatywne interfejsy
    adaptatywne interfejsy

    View full-size slide

  3. rozmiar ma znaczenie
    rozmiar ma znaczenie

    View full-size slide

  4. widok pionowy
    widok pionowy

    View full-size slide

  5. widok poziomy
    widok poziomy

    View full-size slide

  6. multi-pane layout
    multi-pane layout

    View full-size slide

  7. metryki i układy
    metryki i układy

    View full-size slide

  8. rozdzielczości/gęstości ekranów
    rozdzielczości/gęstości ekranów

    View full-size slide

  9. metryki, zasada 48dp
    metryki, zasada 48dp

    View full-size slide

  10. 9-patch drawables
    9-patch drawables

    View full-size slide

  11. grupy wymiarów
    grupy wymiarów

    View full-size slide

  12. marginesy
    marginesy

    View full-size slide

  13. typografia i kolory
    typografia i kolory

    View full-size slide

  14. nietypowe czcionki
    nietypowe czcionki

    View full-size slide

  15. stonowane kolory
    stonowane kolory

    View full-size slide

  16. palety kolorów
    palety kolorów

    View full-size slide

  17. ikonografia
    ikonografia

    View full-size slide

  18. http://www.androidicons.com/
    http://www.androidicons.com/

    View full-size slide

  19. spójne rozmiary, kształty, marginesy, style
    spójne rozmiary, kształty, marginesy, style

    View full-size slide

  20. spójne rozmiary, kształty, marginesy, style
    spójne rozmiary, kształty, marginesy, style

    View full-size slide

  21. nawigacja
    nawigacja

    View full-size slide

  22. action bar – Frequent, Important, Typical
    action bar – Frequent, Important, Typical

    View full-size slide

  23. dashboard
    dashboard

    View full-size slide

  24. sliding/ribbon menu
    sliding/ribbon menu

    View full-size slide

  25. grid view
    grid view

    View full-size slide

  26. carousel
    carousel

    View full-size slide

  27. flip/swipe
    flip/swipe

    View full-size slide

  28. showcase
    showcase

    View full-size slide

  29. guided your
    guided your

    View full-size slide

  30. dotyk i gesty
    dotyk i gesty

    View full-size slide

  31. gesty dotykowe
    gesty dotykowe

    View full-size slide

  32. różne stany interakcji z komponentami
    różne stany interakcji z komponentami

    View full-size slide

  33. usuwanie elementów
    usuwanie elementów

    View full-size slide

  34. pull to refresh
    pull to refresh

    View full-size slide

  35. swipe/longpress list menu
    swipe/longpress list menu

    View full-size slide

  36. Samsung Air View
    Samsung Air View

    View full-size slide

  37. komunikacja zwrotna
    komunikacja zwrotna

    View full-size slide

  38. brak treści
    brak treści
    http://emptystat.es/
    http://emptystat.es/

    View full-size slide

  39. potwierdzanie akcji
    potwierdzanie akcji

    View full-size slide

  40. powiadomienia
    powiadomienia

    View full-size slide

  41. powiadomienia kontekstowe
    powiadomienia kontekstowe

    View full-size slide

  42. rozwijane powiadomienia, akcje
    rozwijane powiadomienia, akcje

    View full-size slide

  43. undo bar
    undo bar

    View full-size slide

  44. look & feel
    look & feel

    View full-size slide

  45. integracja z platformą
    integracja z platformą

    View full-size slide

  46. integracja z platformą
    integracja z platformą

    View full-size slide

  47. skeuomorphism
    skeuomorphism

    View full-size slide

  48. skeuomorphism
    skeuomorphism

    View full-size slide

  49. skeuomorphism
    skeuomorphism

    View full-size slide

  50. skeuomorphism
    skeuomorphism

    View full-size slide

  51. narzędzia
    narzędzia

    View full-size slide

  52. http://www.uistencils.com/
    http://www.uistencils.com/

    View full-size slide

  53. http://proto.io/
    http://proto.io/

    View full-size slide

  54. https://www.fluidui.com/
    https://www.fluidui.com/

    View full-size slide

  55. http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
    http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

    View full-size slide

  56. http://jgilfelt.github.io/android-actionbarstylegenerator/
    http://jgilfelt.github.io/android-actionbarstylegenerator/

    View full-size slide

  57. źródła inspiracji
    źródła inspiracji

    View full-size slide

  58. warto odwiedzać
    warto odwiedzać

    http://androiduiux.com/
    http://androiduiux.com/

    http://meer.li/
    http://meer.li/

    http://mycolorscreen.com/
    http://mycolorscreen.com/

    http://www.androiduipatterns.com/
    http://www.androiduipatterns.com/

    http://emptystat.es/
    http://emptystat.es/

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

    http://androidniceties.tumblr.com/
    http://androidniceties.tumblr.com/

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

    http://iosicongallery.com/
    http://iosicongallery.com/

    View full-size slide

  59. warto używać
    warto używać

    http://androiduiux.com/2013/01/01/wireframe­screen­flow­
    http://androiduiux.com/2013/01/01/wireframe­screen­flow­
    template­free­download/
    template­free­download/

    http://androiduiux.com/2013/04/15/android­ui­design­kit­
    http://androiduiux.com/2013/04/15/android­ui­design­kit­
    pptx­1­0­free­download/
    pptx­1­0­free­download/

    http://androiduiux.com/2013/03/12/android­ui­design­kit­
    http://androiduiux.com/2013/03/12/android­ui­design­kit­
    psd­4­2­free­download/
    psd­4­2­free­download/

    http://iconmonstr.com/
    http://iconmonstr.com/

    http://www.bongizmo.com/blog/android­resources­each­
    http://www.bongizmo.com/blog/android­resources­each­
    developer­should­know/
    developer­should­know/

    http://androiduiux.com/2012/06/27/new­to­android­
    http://androiduiux.com/2012/06/27/new­to­android­
    designdevelopment­heres­a­list­of­great­resources­and­
    designdevelopment­heres­a­list­of­great­resources­and­
    references­available/
    references­available/

    http://www.androidviews.net/
    http://www.androidviews.net/

    http://jgilfelt.github.io/android­actionbarstylegenerator/
    http://jgilfelt.github.io/android­actionbarstylegenerator/

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

    View full-size slide

  60. Dziękuję za uwagę
    Dziękuję za uwagę
    Adam Jodłowski
    Adam Jodłowski
    jodlowski.net
    jodlowski.net

    View full-size slide