74
Trendy v dizajne mobilných aplikácií a webov MARTIN JANEK / Art director SCR®, Skuteckého 1, 974 01 Banská Bystrica, SLOVAKIA [email protected], +421 48 415 31 70

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

  • Upload
    scr

  • View
    200

  • Download
    4

Embed Size (px)

Citation preview

Page 1: 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

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

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

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

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é.

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

.:)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

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

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

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

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

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

Ukážky flat designov / prvkov

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

Porovnanie prístupuApple / Google / Microsoft

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

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/

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

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

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

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

Page 12: Trendy v dizajne mobilných aplikácií a webov
Page 13: Trendy v dizajne mobilných aplikácií a webov

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

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

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

Page 15: Trendy v dizajne mobilných aplikácií a webov
Page 16: Trendy v dizajne mobilných aplikácií a webov

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

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

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

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

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?

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

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

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

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

Page 21: Trendy v dizajne mobilných aplikácií a webov
Page 22: Trendy v dizajne mobilných aplikácií a webov

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

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

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

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

Created with passion for digital

Farby

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

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Pastelová zelená

Farba roku 2013

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

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

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

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.

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

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

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

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

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

Authentic WeatherApp by Tobias van Schneider

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

http://builtbybuffalo.com

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

Autor: Jakub Antalík

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

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

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

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

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

Shape ikony a ilustrácie

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

Google

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

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

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

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

Page 39: Trendy v dizajne mobilných aplikácií a webov
Page 40: Trendy v dizajne mobilných aplikácií a webov

http://www.cedricmarteau.com/

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

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

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

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

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

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

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

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

Page 45: Trendy v dizajne mobilných aplikácií a webov
Page 46: Trendy v dizajne mobilných aplikácií a webov

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

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

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

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

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

Page 49: Trendy v dizajne mobilných aplikácií a webov
Page 50: Trendy v dizajne mobilných aplikácií a webov

Príklad moderného UX portálu.

- Responzívny layout- Optimalizovaný na 1280x800

// princíp skladačky

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

App wireframe

- funkcia- kompozícia- obsah

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

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

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

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

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

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

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

Ukážka layoutovej skladačky

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

Obmedzenie na brand a účel.

Page 56: Trendy v dizajne mobilných aplikácií a webov
Page 57: Trendy v dizajne mobilných aplikácií a webov

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

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

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

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

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

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

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

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

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

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

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2012

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

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2013

Page 64: Trendy v dizajne mobilných aplikácií a webov
Page 65: Trendy v dizajne mobilných aplikácií a webov

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

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

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

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

Designer

Mockup formy prezentácie projektu/diela

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

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

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

HP redesign

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

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

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

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

.!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

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

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

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

2012Prezentácia Rulezz + projekt iGuide

iguide.scr.sk

Workshop MobileRulezz 2013 | Created by SCR | 04/2013

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

Ďakujem za pozornosťMartin Janek / Art director