THINK DIGITAL & DESIGN TO SELL

THINK DIGITAL & DESIGN TO SELL

LEONA BRETSCHNEIDEROVÁ DIGITAL VISION

MARTIN SVETLÍK SYMBIO DIGITAL

MOŽNÁ JSTE SLYŠELI O WEBDESIGNU...

■ ■ ■ ■ ■ ■ ■ ■

design = grafika prázdný prostor není design design je subjektivní záležitost všechny informace musí být nad foldem lidi na webu nečtou nepotřebujeme mobilní verzi web je spuštěný, už s tím nic nenaděláme obsah webu určuje zadavatel

CO VŠECHNO JE DESIGN?


UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza


Realizace konceptu nebo myšlenky do konfigurace, kresby, modelu, návrhu, vzorce, plánu nebo specifikace, která pomáhá dosáhnout stanovených cílů projektu.

DESIGN ZAČÍNÁ U KPI


UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza

CO JE VLASTNĚ UX?

PROČ DĚLAT UX?

■ ■ ■ ■ ■

drátěný model wireframe skeleton outline blueprint

PROČ DĚLAT WIREFRAME?

VÝHODY WIREFRAMES

■ ■ ■ ■ ■ ■

Měnit grafiku je finančně a časově náročné, změna wireframe je jednoduchá Umožňuje odladění navigace Umožňuje uspořádání obsahu Zjednodušuje práci s textem Dává klientovi možnost vyjasnit si, co je a co není na webu důležité Pomůcka pro vývojáře

CHYBY PŘI TVORBĚ WIREFRAMES

■ ■ ■

Zapomeňte na sebe, myslete na svého zákazníka, znejte jeho potřeby Nesoustřeďte se na design Nechtějte po zákazníkovi příliš mnoho informací

KEEP IT SIMPLE AND STUPID!


UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza

NA ZAČÁTEK TROCHA HISTORIE

1997


1997


1998


1999


2000


2001


2002


2004


2006


2007


2007


2010


2014


2004

2006

1996

KRÁTKÝ POHLED NA PHOTOSHOP 1.0

PODÍVEJTE SE NA VÁŠ WEB

PO PŘESTÁVCE:

FLAT, MINIMAL NEBO MATERIAL?

MINIMAL DESIGN

MINIMAL DESIGN

„Omlouvám se, že je můj dopis tak dlouhý, neměl jsem čas napsat kratší.“ Blaise Pascal

MINIMAL DESIGN

When it comes to minimalism, don’t think it’s easier just because it’s simpler. Because there are fewer elements, you must provide the same level of usability (perhaps even better) with less interface. Content-first design is the core of minimalism. The minimalist aesthetics are just means to achieve it. -

The Next Web

7 PRAVIDEL MINIMAL DESIGNU

1. Používejte “negative space” Volný prostor usměrňuje vizuální flow uživatele. Čím více si ho můžete dovolit, tím více pozornosti věnujete jednotlivým elementům na webu.


2. Působte na emoce full-screen fotkami Přidávají vašemu jednoduchému designu emoce a přátelskost. I samotná fotka by ale měla být minimalistická.


3. Typografie? Výrazná! Silné a kontrastní typo (třeba i vytvořené přímo pro váš web) nejlépe táhne oko uživatele k textu a zdůrazňuje jeho význam.


4. Co největší kontrast Typicky černá proti bílé nebo výrazné barvy proti monochromu. Vytváří vizuální hierarchii a pomáhá vést uživatele po stránce.


5. Až stupidně jednoduchá navigace Redukujte ovládání na nejnutnější prvky - čím více dáte uživateli možností, tím spíše ho někde po cestě ztratíte.


6. Udržte vizuální harmonii Jejím základem je silný vizuální grid (mřížka), vizuální balanc a velká pozornost k zarovnání. I jeden pixel je vidět.

horizontální symetrie

přibližná symetrie

radiální symetrie

asymetrie


7. Vizuální akcenty k minimalismu Klasickým vizuálním akcentem minimalismu je “flat design”. Zatímco minimalismus je filozofie, flat design je vizuální estetika.

FILOZOFIE VS. ESTETIKA

MINIMAL DESIGN

SKEUOMORFNÍ DESIGN

FLAT DESIGN

MATERIAL DESIGN

SKEUOMORFNÍ DESIGN

SKEUOMORFNÍ DESIGN

Základem skeuomorfního designu je mimetika. Jednotlivé objekty se pokoušejí vypadat jako skutečné, imitují realitu a její vlastnosti v digitálním světě.

SKEUOMORFNÍ DESIGN

It’s not that they look real, but they looked rich, like a lot of work had been put into them. That’s what people latch on to. In flat design, you end up with some designs that are stunning in their minimalism but not as friendly anymore. And when they age, they will age in a way that people say, “Oh, that’s when we went simple with things rather than, “isn’t this incredible.” - Neven Mrgan

SKEUOMORFNÍ DESIGN

SKEUOMORFNÍ DESIGN

FLAT DESIGN

FLAT DESIGN

V roce 2006 vydal Microsoft hudební přehrávač Zune, ve kterém se objevily první systematické prvky flat designu. ■ ■ ■

výrazná typografie v mínuskách jednobarevná pozadí siluetová loga

FLAT DESIGN

2013

MATERIAL DESIGN

MATERIAL DESIGN

4-5 years ago, all Google products looked pretty distracting in different ways. Every single product looked inconsistent on different platforms. But everything began to change back in 2011, when Google started to work hard on the visual part unification of the ecosystem of its products and called it Project Kennedy.

MATERIAL DESIGN

MATERIAL DESIGN

MATERIAL DESIGN

Materiálový design je postavený na vrstvách materiálu (digitální nebo kvantový papír). Materiál se umí spojovat, měnit tvar a velikost. Ostatní vlastnosti plně respektují fyzikální zákony.

MATERIAL DESIGN

Vrstvy se skládají, uspořádávají v různých výškách a vrhají na sebe stíny, což uživateli umožňuje pochopit anatomii systému a intuitivně s ním interagovat.

MATERIAL DESIGN

MATERIAL DESIGN

Ve skutečném světě se věci neobjevují a neztrácejí - proto materiálový design používá “realistické” animace materiálu, jeho změn, pohybu a reakcí. Uživatel tak přesně ví, co se právě stalo, kde se nachází a jak se vrátit zpět.

MATERIAL DESIGN

Principy materiálového designu vycházejí z dotykových zařízení, ale musejí fungovat napříč platformami, velikostmi displejů a rozlišeními.

MATERIAL DESIGN

> Google designers explaining material design > How to do material design

PO PŘESTÁVCE:

COPY, VIZUÁL A INTERAKCE

MOBILNÍ DESIGN

MOBILNÍ DESIGN

Traffic z mobilních zařízení předčil traffic z desktopu na největších webech: ■ Facebook v roce 2013 ■ Google v roce 2015 60 % přístupů na sociální sítě je z mobilu 30 % lidí navštěvuje sociální sítě už výhradně z mobilu 30 % veškerého trafficu na webu v ČR je z mobilu

MOBILNÍ DESIGN

GRACEFUL DEGRADATION

VS .

PROGRESSIVE ENHANCEMENT

GRACEFUL DEGRADATION

Full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system simpler (no Flash support, etc.).

PROGRESSIVE ENHANCEMENT

Provide the users with minimal screen experience that both looks great and functions perfectly. As the need arises, the site can gradually be “enhanced” and even completely rethought for larger platforms with fewer constraints.

MOBILE FIRST VS. DESKTOP FIRST?

Desktop first When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. Mobile first You’ve already gone trimming down the content to most vital elements. Now when it’ s time to bring this design to the desktop, instead of facing the decision of what to cut, you instead get to decide how to make it even more robust!

KDE BRÁT INSPIRACI?







UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza

LIDI NA WEBU NEČTOU

DESIGNING COPY

Chartbeat found that most visitors scroll through about only 50-60 % of an article page. There seems to be no correlation between sharing and scrolling: people readily share your articles even without reading them.

DESIGNING COPY

One of the most important fact about web users is that they don’t read, they scan. -

Steve Krug / Don’t make me think

DESIGNING SCANNABLE COPY

Nielsen testoval různé druhy textového designu na webové stránce. Stručný, skenovatelný a faktický text dosahoval o 124 % lepší výsledky. ■ ■ ■ ■ ■ ■

zvýrazněná klíčová slova (můžete použít hypertext nebo variace typografie - bold, italika, podtržení, barevnost…) smysluplné headliny a subheadliny, které uživateli říkají, jaké informace najde v dalším odstavci. odrážky, seznamy a obecně strukturovaný text jedna myšlenka na jeden odstavec obrácená pyramida, kde začínáme výsledkem poloviční (nebo menší) rozsah než v obyčejném textu







UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza

http://rainforest.arkivert.no/#kar

http://lacostewinter.seeourwork.cn/en/intro

http://www.beoplay.com

http://refugeerepublic.submarinechannel.com/

http://akce.kia.com/cz/

https://reg.avonkariera.cz/cz/lp/


UX

grafika

foto & video

animace

interakce

copywriting

kód

analýza

INTERAKCE - THE RULE OF THUMB

INTERAKCE - DOTYKOVÉ OVLÁDÁNÍ

INTERAKCE - DOTYKOVÉ OVLÁDÁNÍ

INTERAKCE - HLASOVÉ OVLÁDÁNÍ

INTERAKCE - OVLÁDÁNÍ POHYBEM

INTERAKCE - OVLÁDÁNÍ POHYBEM


UX

grafika

foto &video

animace

interakce

copywriting

kód

analýza

PO PŘESTÁVCE:

VÝKON A VÝSLEDKY

ZÁŽITEK SE ZNAČKOU

KONVERZE

REDESIGN SKYPE

REDESIGN SKYPE

REDESIGN SKYPE

REDESIGN HP SKYPE

Nárůst stáhnutí o více než 5 %

REDESIGN LP BASECAMP

REDESING HP BASECAMP

Co proměnilo 14 % návštěvníků webu v zákazníky? Jednoduchý a čistý design.

REDESIGN OPENMILE

REDESIGN OPENMILE

Co způsobilo nárůst sběru kontaktů o 232 %? Jasná výzva k akci.

REDESIGN CLOUDSPONGE

REDESIGN CLOUDSPONGE

Co způsobilo nárůst konverzního poměru o 33 %? Současný design.

TIPY & TRIKY

TIPY & TRIKY

JAK POSUZOVAT KVALITU WEB DESIGNU?

STRATEGIE

■

Je na mém webu jasné v jaké kategorii podnikám?

■

Podporuje design cíle webu?

■

Kdo je moje cílová skupina? Jak k ní design mluví?

■

Co chceme,aby cílová skupina po návštěvě webu udělala? Podporuje design tento cíl?

USIBILITY/PŘÍSTUPNOST

■

Jak dlouho se web načítá?

■

Jak je jednoduché najít informace?

■

Je na webu vyhledávání ?

■

Fungují všechny odkazy?

■

Jak funguje web v různých vyhledávačích?

■

Jak funguje na různých zařízeních?

STYL

■

Je styl webu v souladu se stylem značky?

■

Je styl/tonalita konzistentní napříč celým webem?

■

Konvenuje zvolený styl cílové skupině?

■

Jaký je celkový dojem?

OBSAH

Dvě hlavní kritéria při posuzování obsahu - prospěšnost a čitelnost! ■

je zvolený font čitelný?

■

Je kontrast mezi pozadím a fontem dostatečný?

■

Je velikost fontu správná?

■

Jsou informace relevantní pro mého uživatele?

■

Jsou to užitečné informace?

■

Podporuje design jednoduchost vyhledávání obsahu?

WORKSHOP

THINK DIGITAL & DESIGN TO SELL

Recommend Documents