Trendy v dizajne mobilných aplikácií a webov

Trendy v dizajne mobilných aplikácií a webovMARTIN JANEK / Art director

SCR®, Skuteckého 1, 974 01 Banská Bystrica, SLOVAKIAscr@scr.sk, +421 48 415 31 70

Created with passion for digital

- Fullservisová digitálna agentúra- Zakladajúci člen ADMA- Banská Bystrica / Bratislava / Barcelona- 40 ľudí

O2, Heineken, Microsoft, Oracle, Ringier, Radio Expres, Sony, SSE, O'Neill, Markíza, ...

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

SCRInteractive

Fullservisová digitálna agentúra SCR Interactive je zameraná na poskytovanie špičkových online riešení v oblasti digitálneho marketingu integráciou stratégií, kreativity, technológií a médií.

SCRTechnologies

IT spoločnosť SCR technologies je zameraná na vývoj informačných systémov, mobilných technológií, tvorbu internetových / intranetových portálov a poskytovanie webhostingu.

SCRGraphics

Profesionálne kreatívne grafické štúdio SCR graphics je zamerané na poskytovanie špičkových dizajnových riešení v oblasti Graphic design, 3D & Motion graphics a Audio design

SCRPlay

Spoločnosť SCR play je zameraná na vývoj mobilných aplikácií pre rôzne mobilné platformy ako iOS, Android, Windows Phone a iné.

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

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Created with passion for digital

Back to the roots

Flat design (Almost)

Simplifying interfaces.Inšpirované print designom.

Opreté o základné piliere grafického designu:- Kompozícia- Farby- Typografia- Grid- Fotografia

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Ukážky flat designov / prvkov

Porovnanie prístupuApple / Google / Microsoft

Google is the best

Google je značka ktorá uplatňuje Almost flat design zrejme najsofitikovanejšie.

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/homehttp://www.google.com/think/articles/8-pillars-of-innovation.htmlhttp://www.google.com/think/perspectives/

Ale predovšetkým:http://www.haraldurthorleifsson.com/

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

Created with passion for digital

Už nieééééé!

Koniec Skeuomorphic interfaces

Emulácia fyzického sveta.Zrejme to bude problém pri niektorých klientoch :)Pre správne použitie potrebuje správny obsah a cit.

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Created with passion for digital

Design simplicity.

Nová paradigma

Minimalizmus. Menej je viac (visual simplicity)Viac priestoru okolo prvkovMenej dekoráciíPlatí aj v interakcii užívateľa s interface

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Created with passion for digital

„Dokonalosť je dosiahnutá nie vtedy, keď už niet čo pridávať,ale keď už nie je čo uberať.“

Antoine de Saint-Exupéry / spisovateľ, filozof

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

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Created with passion for digital

Responzivitaako základná vlastnosť moderného webu

HTML5 + CSS3Optimalizovaný web pre rôzne zariadenia a rozlíšenia

Mobile firstAdaptívny content

// dočasné potlačenie kreativity?

Ukážka princípu responzivityPodľa zariadenia na ktorom je stránka prehliadaná sa layout mení – od mobilu až po desktop

Responzivita je systém preusporiadania prvkov vzhľadom na rozlíšenie

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Created with passion for digital

Future vision

„When the web is in your car and on your eyeglasses, we’re no longer talking about resizing windows for iPhone or Android devices.“

Davin Wilfrid / Future Insights’ Product Director

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

Created with passion for digital

Farby

Pastelové farbyVeľké farebné plochyFarebné schémyKontrast

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Pastelová zelená

Farba roku 2013

Využívanie farebného spektraVhodne zvolené farby vytvárajú podstatu look&feel

http://www.beatsbydre.com

Úprava farebnej schémy homepage vzhľadom na obsah.

V dnešnej dobe už klasický layout.Fantasticky pracuje s obsahom a brandom.

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

Created with passion for digital

Jeden zo základných stavebných kameňov

Typografia

Využívanie kvalitnej typografieVyužívanie webfontov (Google Fonts, Typekit, Fonts.com, …)Správne využívanie typografiePriestor okolo typografie

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Authentic WeatherApp by Tobias van Schneider

http://builtbybuffalo.com

Autor: Jakub Antalík

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

Created with passion for digital

Znovuzrodená (?!) disciplína

Ikony a ilustrácie

Vo formáte *.svg (škálovateľné)Nadväznosť na Flat design a retro color scheme.Brand look. (Google)

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Shape ikony a ilustrácie

Google

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

Created with passion for digital

Bezflashová doba

CSS3 animácie a interaktivita

HTML5 and CSS3 prináša mnoho možností.Na pol ceste k flashu. (1/10)

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

http://www.cedricmarteau.com/

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

Created with passion for digital

Rýchlosť

Performance

Neakceptácia pomalosti.(načítavanie, spracovávanie animácií, ...)

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Created with passion for digital

InfografikaAko súčasť user interface

Nemyslí sa tým obrázok s potenciálom sharovaniaGrafické vysvetlenie princípov (fungovania, hodnôt, postupu, ...)Veľké číslovky

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Veľké číslovky, popiskyako súčasť user interface

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

Created with passion for digital

Posun design prístupu

UX design centered prístup

UX vytvára kompozíciu.Kompozícia je základ obrazu.Dnes je design z veľkej časti o UX.

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Príklad moderného UX portálu.

- Responzívny layout- Optimalizovaný na 1280x800

// princíp skladačky

App wireframe

- funkcia- kompozícia- obsah

Created with passion for digital

Back to the roots

Výsledné hodnoty

- Použiteľnosť- Jasnosť- Jednoduchosť

Zjednodušená forma dáva vyniknúť obsahu

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Created with passion for digital

Developing prístup

UI patterns (design Lego)

Skladačka.Prístup plynie z mobilných GUI

+ čas realizácie+ kvalita návrhu + modularita

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Ukážka layoutovej skladačky

Obsiahnuté všetky prvky z ktorých je možné vyskladať web.

Obmedzenie na brand a účel.

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

Created with passion for digital

Content first

Všetko je o obsahuTomu sa podriaďuje aj forma. (Mobile first)Storytelling Single page websitesContent flow

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Štýlové podstránky (storytelling)Veľmi zaujímavým spôsobom odpromované vlastnosti automobilu.

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

Created with passion for digital

Weby a online aplikácie

App style User interface

Aplikácie a weby sa začínajú podobať

Touch based UIVyužitie plnej plochy obrazovkyMasonry layoutStĺpcový layout

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2012

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2013

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

Created with passion for digital

Spôsob prezentácie

Nemenej dôležitá časť projektuVizuálna forma hrá dôležitú úlohuObrázky / krátke texty

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Designer

Mockup formy prezentácie projektu/diela

Prezentácia projektuJednoduchým spôsobom vysvetlené základné princípy a benefity aplikácie/produktu

HP redesign

http://www.movingbrands.com/work/transforming-the-worlds-largest-technology-company-into-the-worlds-most-powerful-brand

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

.!Nie je dôležité nasledovať trendy, ale využívať správny vizuálny jazyk pre doručenie obsahu alebo správy.

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Filozofické okienko

Otázky do publika

Čo si myslíte o interface Microsoft Metro?Čo si myslíte o iOS interface?Kde sa bude interface design uberať?Čo je to design?Čo si myslíte o slovenských designéroch?Porovnanie so svetom.

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Created with passion for digital

2012Prezentácia Rulezz + projekt iGuide

iguide.scr.sk

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

Ďakujem za pozornosťMartin Janek / Art director