6 porad - jak projektować na system Android i iOS

STUDIOOSOM

JAK PROJEKTOWAĆ na system Android i iOS

6 porad

STUDIOOSOM

Do kogo skierowany jest poradnik?

1

6 porad skierowanych jest przede wszystkim do grafików i osób interesujących się grafiką projektową, którym obce

nie są także tematy związane z mobile. To także świetny przewodnik dla samouków i tych, którzy

chcą zaprojektować aplikację, lecz nie wiedzą, jak się do tego zabrać.

6 poraddotyczących projektowania na system Android i iOS

STUDIOOSOM

dla których warto prowadzić projekty niekomercyjne

5 powodów

2STUDIOOSOM

6 porad, z których dowiesz się jak...

2

...projektować na dwa najpopularniejsze systemy operacyjne - Android i iOS.


STUDIOOSOM


5 powodów

Integrują zespół i dostarczają rozrywki

9STUDIOOSOM


5 powodów

Podbniebny twór

2

Głównym celem projektu jest promocja Łodzi. Odbywa się to za sprawą Latającego Kamerzysty, który korzysta z drona i filmuje ciekawe zakątki

miasta. Oprócz dostarczania odbiorcom wizualnej rozrywki, Latający Kamerzysta edukuje

- jego filmy urozmaicone są informacjami dotyczącymi historii Łodzi.

STUDIOOSOM

Flat Design i Material Design

3

Przed przystąpieniem do projektowania warto poznać terminy, tj. Flat Design i Material Design.

Są to nowoczesne metody projektowania, w których królują “spłaszczone” elementy.


STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM

Flat Design

4

To “spłaszczanie” elementów interfejsu użytkownika w celu poprawy jego funkcjonalności. Oznacza to np. stosowanie kanciastych krawędzi przy jednoczesnej

rezygnacji z gradientów, cieni i odbić. Brak wymiarowości i efektu 3d.

Koncentracja wyłącznie na wzajemnej spójności ikon, typografii i koloru.


STUDIOOSOM


5 powodów

Pierwszy sukces

11

Realizacja projektów niekomercyjnych daje tym więcej satysfakcji i motywacji, gdy spotyka się

z aprobatą odbiorców. Tak było przy okazji projektu “Latający Kamerzysta”. Został on doceniony nie tylko przez

lokalną społeczność, ale również podczas pierwszego i jedynego w Polsce - Dron Festiwalu

- podczas którego zwyciężył w kategorii Story. Zwycięski film przedstawiał Cmentarz Żydowski

przy ul. Brackiej w Łodzi.

STUDIOOSOM


5 powodów

Podniebni pasjonaci

9

Jeśli nie dla pieniędzy, to… z pasji. Jako wielbiciele nowych technologii i fabrykanckiego miasta Łodzi postanowiliśmy

połączyć te dwie pasje. Tak właśnie narodził się ten niekomercyjny projekt. Uznaliśmy, że Latający Kamerzysta

oprócz treści wizualnych będzie też przedstawiał opowieści o mieście, jego mieszkańcach, promując je

i jednocześnie pokazując Łodzianom jego zawiłą historię.

STUDIOOSOM


5 powodów


9

Nic tak nie łączy ludzi, jak wspólna pasja i cel. Podczas burz mózgów możemy lepiej poznać poglądy na dany temat wszystkich uczestników. Nie dość, że grupowa dyskusja dostarcza zespołowi rozrywki i go integruje, to jeszcze pozwala na podjęcie najlepszych decyzji.

No i oczywiście dopracowanie pomysłów.

STUDIOOSOM


5 powodów

Podbniebny twór

2




STUDIOOSOM

Material Design

5


To zespół wytycznych, stworzony, kontrolowany i rozwijany przez Google. Podobnie, jak Flat Design, opiera się na minimalizmie i “płaskości”.

Wykorzystuje się w nim technikę nakładania warstw, dzięki czemu dodane elementy przy jednoczesnej płaskości są “pogłębione”, bardziej wyrazistei zrozumiałe dla użytkownika. Znajduje też zastosowanie przy tworzeniu

animacji. Wspomniane warstwy i animacje są drogowskazami. Dokładnie informują użytkownika o tym, co się dzieje,

co z czego wynika i jaki jest przepływ akcji.

STUDIOOSOM


5 powodów

Pierwszy sukces

11






STUDIOOSOM


5 powodów

Podniebni pasjonaci

9





STUDIOOSOM


5 powodów


9



STUDIOOSOM


5 powodów

Podbniebny twór

2




STUDIOOSOM 6


iOS

Jako pierwszy na warsztat bierzemy system iOS, który dedykowany jest urządzeniom marki Apple.

STUDIOOSOM


5 powodów

Pierwszy sukces

11






STUDIOOSOM


5 powodów

Podniebni pasjonaci

9





STUDIOOSOM


5 powodów


9



STUDIOOSOM


5 powodów

Podbniebny twór

2




STUDIOOSOM

kolorystyka

7

Pierwsza wskazówka dotyczy wykorzystywanej kolorystyki. W tym przypadku świetnie sprawdzą się żywe barwy,

zaproponowane przez samo Apple.



5 powodówdla których warto prowadzić projekty niekomercyjne



5 powodówIkona


Bardzo ważny jest także projekt ikony. To w dużej mierze od jej wyglądu zależy, czy użytkownik będzie chciał się zapoznać z “zawartością” naszej aplikacji. Powinna być ona minimalistyczna, a jednocześnie sugerująca czego appka dotyczy. Apple w dalszym ciągu nie wydało oficjalnego szablonu, dlatego warto przy projektowa-

niu tego elementu skorzystać z nieoficjalnej jego wersji – na przykład takiego

STUDIOOSOM 11STUDIOOSOM 9STUDIOOSOM 9STUDIOOSOM 2STUDIOOSOM 8

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM

Font

9

Warto pozostać w tym temacie spójnym i konsekwentnym, i skorzystać z czcionek zbliżonych wyglądem do tych,

które na co dzień widzimy w ekranie smartfona. Domyślną stosowaną przez Apple jest Helvetica Neue. Oprócz niej mamy alternatywy. Listę zainstalowanych i dostępnych

czcionek znajdziesz tutaj.

6 poraddotyczących projektowania na system Android i iOS FONTANDROID

FONTANDROIDFONTANDROID

STUDIOOSOM


5 powodów

Pierwszy sukces

11






STUDIOOSOM


5 powodów

Podniebni pasjonaci

9





STUDIOOSOM


5 powodów


9



STUDIOOSOM


5 powodów

Podbniebny twór

2




STUDIOOSOM

FONT

10

Problemem może okazać się niekiedy zdobycie licencji (lub jej wysoka cena) na komercyjną, zastrzeżoną czcionkę.

Warto w takim przypadku skorzystać z bazy czcionek (znajdziesz ją tutaj), które znajdują swoje zastosowanie

w aplikacjach mobilnych.


FONTfONTFONTFONTfONTFONT

FONTfONTFONT

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 11


FONTfONTFONTFONTfONTFONT Android

Czas wziąć pod lupę tajniki projektowania na system operacyjny Android. Jak już wspomniano wcześniej,

Android opiera się na Material Designie, a ten z kolei umiejscowiony jest na trzech fundamentach.

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 12


Pierwszy z nich to metaforyczność. Projektując wykorzystuj wiele atrybutów.

Ich celem jest jak najszybsze naprowadzenie użytkownika na punkt, do którego zmierza.

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 13


Wizualizacja to kolejna z fundamentalnych zasad, o której trzeba pamiętać w procesie

projektowania. Chodzi tutaj o spójność wszystkich graficznych elementów: fontów,

kolorów, rozmieszczenia przestrzennego…

Ważna jest również płynność. Dzięki niej użytkownik przechodzi

przez poszczególne kroki w sposób, który nie zakłóca jego uwagi.

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 14


STUDIOOSOM

5 powodów

11STUDIOOSOM

5 powodów

9STUDIOOSOM

5 powodów

9STUDIOOSOM

5 powodów

2STUDIOOSOM 15

Jak zawsze, zależy to od wielu czynników, a także w dużej mierze od preferencji twórcy.


Na który system lepiej projektować?

łatwe przeprowadzenie testów

możliwość szerszej dystrybucjipowolność emulatora systemu

brak obsługi grafiki wektorowej

(przymus tworzenia warstw)

ZA PRZECIW

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 16


Android - nie taki straszny, jak go malują

STUDIOOSOM


5 powodów

11STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

9STUDIOOSOM


5 powodów

2STUDIOOSOM 17


ZA PRZECIW

kompatybilność i pewne wsparcie

przyszłych wersji systemowych

stabilność systemu

mniej elastyczna nawigacja, niż w Androidzie

(utrudnione wprowadzanie poprawek)

brak obsługi grafiki wektorowej

(przymus tworzenia warstw)

iOS

STUDIOOSOMOSOMSTUDIO - Agencja Interaktywna specjalizująca się w tworzeniu i projektowaniu stron internetowych

oraz aplikacji mobilnych, w działaniach z zakresu e-marketingu i e-PR, projektowaniu graficznym na potrzeby Internetu i Mobile oraz realizacji video.

[email protected] (+48) 791 169 208www.osomstudio.com

Dzięki za czas poświęcony na zapoznanie się z naszą prezentacją.

Jeśli moglibyśmy jeszcze jakoś Ci pomóc - skontaktuj się z nami!

6 porad - jak projektować na system Android i iOS

Mobile

Transcript of 6 porad - jak projektować na system Android i iOS