trendy v dizajne a ux

Trendy v dizajne a UX (mobilnch) aplikci a webov

MARTIN JANEK / Art director

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

.:)

Design is like sex.Everybody loves to look at it,but only a few are good at it.SCR Client workshop 2013 | Created by SCR | 06/2013

.01SCR Client workshop 2013 | Created by SCR | 06/2013

Created with passion for digitalBack to the rootsFlat design (Almost)Simplifying interfaces.Inpirovan print designom.

Opret o zkladn piliere grafickho designu:- Kompozcia- Farby- Typografia- Grid- FotografiaSCR Client workshop 2013 | Created by SCR | 06/2013

Ukky flat designov / prvkov

Porovnanie prstupuApple / Google / Microsoft

Google is the best

Google je znaka ktor uplatuje Almost flat design zrejme najsofitikovanejie.

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 predovetkm:http://www.haraldurthorleifsson.com/

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

Created with passion for digitalU nie!Koniec Skeuomorphic interfacesEmulcia fyzickho sveta.Zrejme to bude problm pri niektorch klientoch :)Pre sprvne pouitie potrebuje sprvny obsah a cit.SCR Client workshop 2013 | Created by SCR | 06/2013

Created with passion for digitalDesign simplicity.Nov paradigma

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

SCR Client workshop 2013 | Created by SCR | 06/2013

http://www.discovershadow.com/

http://www.windowsofnewyork.com/

http://www.beetle.com/int/en/home

Created with passion for digitalAko na to. vynechvanie vetkch nepotrebnch informci (redukovanie a rozkladanie obsahu) obmedzenie seznnych grafickch barliiek (leskl butony) spoznanie klasickch postupov a princpov grafickho dizajnu (kompozcia, typografia, ...) prca s farebnmi plochami


SCR Client workshop 2013 | Created by SCR | 06/2013Created with passion for digitalDokonalos je dosiahnut nie vtedy, ke u niet o pridva,ale ke u nie je o ubera.

Antoine de Saint-Exupry / spisovate, filozof

SCR Client workshop 2013 | Created by SCR | 06/2013Created with passion for digitalResponzivitaako zkladn vlastnos modernho webuHTML5 + CSS3Optimalizovan web pre rzne zariadenia a rozlenia

Mobile firstAdaptvny content

// doasn potlaenie kreativity?

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

Responzivita je systm preusporiadania prvkov vzhadom na rozlenie

SCR Client workshop 2013 | Created by SCR | 06/2013Created with passion for digitalFuture visionWhen the web is in your car and on your eyeglasses, were no longer talking about resizing windows for iPhone or Android devices.

Davin Wilfrid / Future Insights Product Director

Created with passion for digitalFarbyPastelov farbyVek farebn plochyFarebn schmyKontrast


Pastelov zelenFarba roku 2013

Vyuvanie farebnho spektraVhodne zvolen farby vytvraj podstatu look&feel

http://www.beatsbydre.com

prava farebnej schmy homepage vzhadom na obsah.

V dnenej dobe u klasick layout.Fantasticky pracuje s obsahom a brandom.

Created with passion for digitalJeden zo zkladnch stavebnch kameovTypografiaVyuvanie kvalitnej typografieVyuvanie webfontov (Google Fonts, Typekit, Fonts.com, )Sprvne vyuvanie typografiePriestor okolo typografie


Authentic WeatherApp by Tobias van Schneider

http://builtbybuffalo.com

Autor: Jakub Antalk

Created with passion for digitalZnovuzroden (?!) disciplnaIkony a ilustrcieVo formte *.svg (klovaten)Nadvznos na Flat design a retro color scheme.Brand look. (Google)


Shape ikony a ilustrcie

Google

Created with passion for digitalBezflashov dobaCSS3 animcie a interaktivitaHTML5 and CSS3 prina mnoho monost.Na pol ceste k flashu. (1/10)


http://www.cedricmarteau.com/

www.pinterest.com (predovetkm iPad app)

Created with passion for digitalRchlosPerformanceNeakceptcia pomalosti.(natavanie, spracovvanie animci, ...)


Created with passion for digitalInfografikaAko sas user interfaceNemysl sa tm obrzok s potencilom sharovaniaGrafick vysvetlenie princpov (fungovania, hodnt, postupu, ...)Vek slovky


Vek slovky, popiskyako sas user interface

Created with passion for digitalPosun design prstupuUX design centered prstupUX vytvra kompozciu.Kompozcia je zklad obrazu.Dnes je design z vekej asti o UX.


Created with passion for digitalDefinciao je to UXUser experience (UX or UE) involves a person's emotions about using a particular product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership


Created with passion for digitalBack to the rootsPostup realizcieUkka postupu realizcieSCR Client workshop 2013 | Created by SCR | 06/2013

Postup realizcie UXOblasti, ktor je nutn analyzova a spracova

1.Vskum

Tto fza je predovetkm o vymedzen trhu, potrieb a prleitost.

Ak s hlavn mechaniky a postupy podnikania? Ak s sasn slab body v komunikcii smerom na spotrebitea?Ako meme lepie sli potrebm novinrov a prispievateov a pomc im vybidova o najirie publikum? Ako meme ponknu vynikajci zitok ako pre klienta tak aj pouvateov?2. Inovcie

Na zklade predchdzajcej fzy, je as definova svoj prstup k zmierneniu slabch miest, tie identifikova prleitosti.

Okrem toho, ako to urobme tak, e dielo bude skutone uniktne a revolun? Ak opre klienta tak aj pouvateov?3. Experience strategy

Mapovanie uvateskch tokov a ciest smerujcich k nkupu.

Pokraovanie, upravovanie a opakovanie.Ako sa dostaneme do stavu, kedy je naplnenie cieov z predchdzajcich krokov najlepie a najefektvnejie?4. Creative concept

S kadou zlokou predchdzajcich fz teraz robme to, o vieme najlepie: design.

Jasne stanoven pravidl a poiadavky dvaj vinikn obsahu. Forma sa tomu podriauje a to je dobr design.

Analza uvateskho toku

Analza uvateskho sprvania poda person

Porovnanie wireframe s vslednm webom

Created with passion for digitalBack to the rootsVsledn hodnoty- Pouitenos- Jasnos- Jednoduchos

Zjednoduen forma dva vynikn obsahu

Smerovanie chovania uvatea. Naplnenie ciea. SCR Client workshop 2013 | Created by SCR | 06/2013

Prklad modernho UX portlu.

- Responzvny layout- Optimalizovan na 1280x800

// princp skladaky

http://demo.gavick.com/wordpress/news/

App wireframe

- funkcia- kompozcia- obsah

http://budnitzbicycles.com/

http://www.esquire.co.uk

Created with passion for digitalDeveloping prstupUI patterns (design Lego)Skladaka.Prstup plynie z mobilnch GUI

+ as realizcie+ kvalita nvrhu + modularitaSCR Client workshop 2013 | Created by SCR | 06/2013

Ukka layoutovej skladaky

Obsiahnut vetky prvky z ktorch je mon vysklada web.

Obmedzenie na brand a el.

http://house.pl/

Created with passion for digitalContent firstVetko je o obsahuTomu sa podriauje aj forma. (Mobile first)Storytelling Single page websitesContent flow


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

Created with passion for digitalWeby a online aplikcieApp style User interfaceAplikcie a weby sa zanaj podoba

Touch based UIVyuitie plnej plochy obrazovkyMasonry layoutStpcov layoutSCR Client workshop 2013 | Created by SCR | 06/2013

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2012

www.flooly.com

Ukazka struktury shopu.(homepage + category)

2013

Created with passion for digitalSpsob prezentcieNemenej dleit as projektuVizulna forma hr dleit lohuObrzky / krtke texty


Designer

Mockup formy prezentcie projektu/diela

Prezentcia projektuJednoduchm spsobom vysvetlen zkladn princpy a benefity aplikcie/produktu

HP redesign

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

.!

Nie je dleit nasledova trendy, ale vyuva sprvny vizulny jazyk pre doruenie obsahu alebo sprvy.SCR Client workshop 2013 | Created by SCR | 06/2013

Click blick(linky, ktor stoja za to si pozrie)

http://carreraworld.com/en/http://www.diesel.com/http://cropp.com/http://www.solasie.com/en/apple.comhttp://global.tommy.com/int/en/Collections/starthttp://www.zeicinofilia.it/http://www.giorgio1958.com/en/http://www.beatsbydre.com/http://us.burberry.com/store/http://aarkcollective.com/http://robertrodriguezcollection.com/http://www.teslamotors.com/goelectric#

Filozofick okienkoOtzky do publikao 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. SCR Client workshop 2013 | Created by SCR | 06/2013Created with passion for digital

akujem za pozornosMartin Janek / Art director

2012

Prezentcia Rulezz + projekt iGuideiguide.scr.skSCR Client workshop 2013 | Created by SCR | 06/20132012

Prezentcia Rulezz + projekt iGuideiguide.scr.sk

***********************************************************************************************************************************************************************************

trendy v dizajne a ux

Documents