Trendy v dizajne mobilnýchaplikácií a webov

7/30/2019 Trendy v dizajne mobilnchaplikci a webov

1/71

Trendy v dizajne mobilnchaplikci a webovMARTIN JANEK / Art director

SCR, Skuteckho 1, 974 01 Bansk Bystrica, [email protected], +421 48 415 31 70


2/71

Created with passion for

- Fullservisov digitlna agentra- Zakladajci len ADMA- Bansk Bystrica / Bratislava / Barcelona- 40 ud

O2, Heineken, Microsoft, Oracle, Ringier, RadiExpres, Sony, SSE, O'Neill, Markza, ...

Workshop MobileRulezz 2013 | Created by SCR | 04/2013


3/71

SCRInteractive

Fullservisov digitlnaagentra SCR Interactive

je zameran naposkytovanie pikovchonline rieen v oblastidigitlneho marketinguintegrciou stratgi,kreativity, technolgi amdi.

SCRTechnologies

IT spolonos SCRtechnologies je zameran

na vvoj informanchsystmov, mobilnchtechnolgi, tvorbuinternetovch /intranetovch portlov aposkytovanie webhostingu.

SCRGraphics

Profesionlne kreatvnegrafick tdio SCR

graphics je zameran naposkytovanie pikovchdizajnovch rieen voblasti Graphic design, 3D& Motion graphics a Audiodesign

SCRPlay

Spolonos SCRzameran na v

mobilnch aplikrzne mobiln pako iOS, AndroiPhone a in.


4/71

.:)Design is like sex.Everybody loves to look at it,but only a few are good at it.



5/71

.01Workshop MobileRulezz 2013 | Created by SCR | 04/2013


6/71


Back to the roots

Flat design (Almost)

Simplifying interfaces.Inpirovan print designom.

Opret o zkladn piliere grafickho designu:- Kompozcia- Farby- Typografia

- Grid

- Fotografia



7/71

Ukky flat designov / prvkov


8/71

Porovnanie prstupuApple / Google / Microsoft


9/71

Google is the best

Google je znaka ktor uplatuje Almost flat design zrejmenajsofitikovanejie.

http://www.google.com/intl/en/chrome/devices/chromebook-pixel/https://www.google.com/intl/en/chrome/devices/chromebox.htmlhttps://www.google.com/intl/en/chrome/webstore/features.htmlhttps://chrome.google.com/webstore/category/home

http://www.google.com/think/articles/8-pillars-of-innovation.htmlhttp://www.google.com/think/perspectives/

Ale predovetkm:http://www.haraldurthorleifsson.com/
https://www.google.com/intl/en/chrome/devices/chromebox.htmlhttps://www.google.com/intl/en/chrome/webstore/features.htmlhttps://chrome.google.com/webstore/category/homehttp://www.google.com/think/articles/8-pillars-of-innovation.htmlhttp://www.google.com/think/perspectives/http://www.google.com/think/perspectives/http://www.google.com/think/articles/8-pillars-of-innovation.htmlhttps://chrome.google.com/webstore/category/homehttps://www.google.com/intl/en/chrome/webstore/features.htmlhttps://www.google.com/intl/en/chrome/devices/chromebox.html


10/71

http://www.fitbit.com/uk/home


11/71


U nie!

Koniec Skeuomorphic interfaces

Umulcia fyzickho svetaZrejme to bude problm pri niektorch klientoch :)



12/71


13/71

.02SCR Creative Lab vol.3 | Created by SCR | 03/2013


14/71


Design simplicity.

Minimalizmus. Menej je viac (visual simplicity)Viac priestoru okolo prvkovMenej dekorciPlat aj v interakcii uvatea s interface



15/71


16/71



Dokonalos je dosiahnut nie vtedy, ke u niet o pridva,ale ke u nie je o ubera.

Antoine de Saint-Exupry / spisovate, filozof


17/71



18/71



Responzivitaako zkladn vlastnos modernho webu

HTML5 + CSS3Optimalizovan web pre rzne zariadenia a rozlenia

Mobile firstAdaptvny content

// doasn potlaenie kreativity?


19/71

Ukka princpu responzivityPoda zariadenia na ktorom je strnka prehliadan sa layout men od mobilu a po desktop


20/71

Responzivita je systm preusporiadania prvkov vzhadom na rozlenie


21/71



Future vision

When the web is in your car and on your eyeglasses,were no longer talking about resizingwindows for iPhone or Android devices.

Davin Wilfrid / Future Insights Product Director


22/71



23/71


Farby

Pastelov farbyVek farebn plochyFarebn schmyKontrast



24/71

Pastelov zelen

Farba roku 2013


25/71

Vyuvanie farebnho spektraVhodne zvolen farby vytvraj podstatu look&feel


26/71

Autor: Jakub Antalk


27/71



28/71


Jeden zo zkladnch stavebnch kameov

Typografia

Vyuvanie kvalitnej typografieVyuvanie webfonts (Google Fonts, Typekit, Fonts.com, )Sprvne vyuvanie typografiePriestor okolo typografie



29/71

Authentic WeatherApp by Tobias van Schneider


30/71

http://builtbybuffalo.com


31/71


| C SC | /


32/71


Znovuzroden (?!) disciplna

Ikony a ilustrcie

Vo formte *.svg (klovaten)Nadvznos na Flat design a retro color scheme.Brand look. (Google)



33/71

Shape ikony a ilustrcie


34/71

Google


35/71




36/71


Bezflashov doba

CSS3 animcie a interaktivita

HTML5 and CSS3 prina mnoho monost.Na pol ceste k flashu. (1/10)



37/71


38/71

http://www.cedricmarteau.com/


39/71




40/71


Rchlos

Performance

Neakceptcia pomalosti.(natavanie, spracovvanie animci, ...)


41/71




42/71


InfografikaAko sas user interface

Nemysl sa tm obrzok s potencilom sharovaniaGrafick vysvetlenie princpov (fungovania, hodnt, postupu, ...)Vek slovky


43/71


44/71

Vek slovky, popiskyako sas user interface


45/71




46/71


Posun design prstupu

UX design centered prstup

UX vytvra kompozciu.Kompozcia je zklad obrazu.Dnes je design predovetkm o UX.


47/71


48/71

Prklad modernho UX portlu.

- Responzvny layout- Optimalizovan na 1280x800

// princp skladaky


49/71

Appwireframe

- funkcia- kompozcia- obsah



50/71


Back to the roots

Vsledn hodnoty

- Pouitenos- Jasnos- Jednoduchos

Zjednoduen forma dva vynikn obsahu


51/71




52/71


Developing prstup

UI patterns (design Lego)

Skladaka.Prstup plynie z mobilnch GUI

+ as realizcie+ kvalita nvrhu+ modularita- negatvum s brand obmedzenia


53/71

Ukka layoutovej skladaky

Obsiahnut vetky prvky z ktorch je monvysklada web.

Obmedzenie na brand a el.


54/71


55/71




56/71


Content first

Vetko je o obsahuTomu sa podriauje aj forma. (Mobile first)StorytellingSingle page websitesContent flow


57/71

tlov podstrnky (storytelling)Vemi zaujmavm spsobom odpromovan vlastnosti automobilu.


58/71




59/71


Weby a online aplikcie

App style User interface

Aplikcie a weby sa zanaj podoba

Touch based UIVyuitie plnej plochy obrazovkyMasonry layoutStpcov layout


60/71

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2012


61/71

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2013


62/71


63/71




64/71


Spsob prezentcie

Nemenej dleit as projektuVizulna forma hr dleit lohuObrzky / krtke texty

Designer

Mockup formy prezentcieprojektu/diela


65/71

p j


66/71

Prezentcia projektuJednoduchm spsobom vysvetlen zkladn princpy a benefity aplikcie/produktu


67/71



68/71

.!Nie je dleit nasledova trendy,ale vyuva sprvny vizulnyjazyk pre doruenie obsahu alebosprvy.




69/71

Filozofick okienko

Otzky do publika

o si myslte o interface Microsoft Metro?

o si myslte o iOS interface?Kde sa bude interface design ubera?o je to design?o si myslte o slovenskch designroch.Porovnanie so svetom.



70/71

2012Prezentcia projektu iGuide

iguide.scr.sk


2013Prezentcia na stiahnutie

scr.sk/rulezz



71/71

akujem za pozornosMartin Janek / Art director

Documents

Trendy v dizajne mobilnýchaplikácií a webov