Trendy v dizajne mobilných aplikácií a webov
Transcript of 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, [email protected], +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
.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