Daily UI – Landing page (nad zlomem)

V rámci třetí Daily UI výzvy jsem měl navrhnout Landing page (nad zlomem) pro nějaký produkt, službu nebo cokoliv by mě napadlo.

Abych se přiznal, landing pages mi nikdy příliš nešly. Jsou hodně o detailech a ladění konverzních poměrů, což se od stolu dělá těžce. Nicméně jsem se do výzvy i přesto pustil a navrhl stránku pro fiktivní kurýrní službu.

Jsem víceméně spokojený

Landing page, kterou jsem v rámci výzvy navrhl.
Landing page, kterou jsem v rámci výzvy navrhl.

Pro řešení landing page jsem vymyslel kurýrní službu safecart, která staví na bezpečnosti a spolehlivosti přepravy. Tedy že:

  • Nepoškodí balíčky.
  • Vše doručí tak, jak slíbí.

Název jsem (očividně) zkombinoval ze dvou slov „safe“ (bezpečný) a „cart“ (vozík, kárka).

  • Ve smyslu služby a primární hodnotě, na které staví, jsem vypíchl slovo safe, aby názvu více dominovalo, protože to je to zároveň primárně to, o co zákazníkům jde.
  • Slovíčko „cart“ (vozík, kárka) jsem zvolil pro symboliku menšího přepravce a zároveň také jako náhradu delších názvů jako je například carrier.

Na primárních hodnotách jsem se také pokusil postavit textaci, tedy něco ve smyslu:

  • Překvapte své přátele dárky, v jednom kuse – jsme spolehliví, po cestě nic nerozbije.
  • V doplňujícím textu jsem vypíchnul 3 klíčová hesla, na kterých je služba postavená.

Chtěl jsem si to usnadnit

V rámci této výzvy jsem se zaměřil spíše na samotnou prezentaci než na různé kreativní koncepty. Jako hlavní principy jsem si tedy definoval jako klíčové:

  • Jednoduchost.
  • Vypíchnout zásadní hodnotu a proč to firma dělá, resp. proč se o to zajímat.
  • Hezký a odlišující vizuální styl s využitím pár barev, resp. kontrastu.
  • Snažit se odlišit od konkurence.
Pro stránku jsem zkoumal spíš možné formy, než odlišné koncepty.
Pro stránku jsem zkoumal spíš možné formy, než odlišné koncepty.

Zároveň jsem si rozepsal cíle stránky a možná témata, resp. produkty, pro které bych stránku navrhoval.

Snaha o jednoduché řešení

Pro kompozici stránky, tedy mřížku, jsem využil zlatý řez, stejně tak pro spacing a velikosti fontů. Chtěl jsem víceméně jednodné rozměry, aby se mi s případnou explorací možností lépe pracovalo.

Ukázka toho, jak jsem pro rozložení využil zlatý řez.
Ukázka toho, jak jsem pro rozložení využil zlatý řez.

Nad výběrem barev jsem trochu zapřemýšlel. Chtěl jsem, aby stránka působila trochu:

  • Solidně,
  • Důvěryhodně.

Proto jsem si pohrál s kombinací různých odstínů modré. Zároveň také ale můžeme najít pouze pár podobnách služeb, které využívají modrou barvu (na základě rešerše asi 20 kurýrních služeb).

Pro stránku jsem zkoušel různé odstiny modré.
Pro stránku jsem zkoušel různé odstiny modré.

Přemýšlel jsem ale také nad tím využít barvy, které se používají na přepravních kontejnerech. Nakonec jsem je nezvolil, protože:

  • Dost z nich využívají další dopravci.
  • Mému oku příliš nelahodily.
Zvažoval jsem také barvy podle přepravních kontejnerů.
Zvažoval jsem také barvy podle přepravních kontejnerů.

Ve Sketch jsem tedy s využitím stylů a symbolů vyzkoušel různé barevné kombinace, ze kterých jsem si poté vybral tu finální.

Pro stránku jsem zkusil různé barevné kombinace
Pro stránku jsem zkusil různé barevné kombinace

Zároveň jsem se ale nechtěl, aby stránka působila příliš „zkostnatěle“. Proto jsem:

  • Použil písmo Source Sans Pro.
  • Stránku doplnil o jednoduchou animaci jedoucího náklaďáku.

Animace měla symbolizovat, že balíčky jsou neustále v pohybu a nic se s nimi nestane. Přemýšlel jsem také nad tím, že by náklaďák mohl najet na kámen, vyskočit a „přistát“ aniž by se s balíčky cokoliv stalo. Ve výsledku mi to ale příšlo, že by to mohlo být příliš rozptylující a možná kontraproduktivní.

Jak jsem si představoval animaci, kdy náklaďák najede na kámen, skočí a s balíčky se nic nestane.
Jak jsem si představoval animaci, kdy náklaďák najede na kámen, skočí a s balíčky se nic nestane.

Protože šlo o návrh landing page s obsahem nad zlomem, umístil jsem pod hlavičku ještě text další sekce jako náznak, že níže najdou ještě něco dalšího.

Zároveň abych trochu narušil symetrii, hlavičku jsem od zbytku obsahu oddělit pootočeným obdelnikem, který může fungovat trochu jako vodící linka a pozornost táhnout směrem níže, tedy k dalšímu obsahu.

Bylo by co zlepšovat

Když se na návrh dívám zpětně, určitě bylo co zlepšovat. Přeci jen jsem návrhu věnoval přibližně jen 4 hodiny.

Sám jsem si všiml několik věcí. Například, že:

  • Výzva k akci v podobě tlačítka se do celkové kompozice nehodí, možná kdybych zvolil jinou barvu. I jeho popisek je hůře čitelný.
  • Možná bych otočil rozložení a věnoval více prostoru sdělení a méně doplňkové vizualizaci.
  • Název bych musel zvolit jiný, protože služba s tímto názvem již existuje.
  • Písmo mi přeci jen ke stránce příliš neladí, prozkoumal bych tedy více možností.

Zase jsem si vyzkoušel něco nového a trochu si pohrál s kompozicí, barvami a stylem. (K čemuž se v práci příliš často nedostanu.)

Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.

Komentáře

  1. Ahoj, nevedel jsem, ze se venujes i UI;)
    – animace je super, light…v cem jsi to delal?
    – animace celou sluzbu dava do skupiny startup..jako eshopar nevim, jestli to tu za rok bude, ale taky kriteria vyberu dopravce jsou jiny

    • Ahoj, díky moc za komentář.

      • UI se v poslední době věnuji více, chtěl bych být více univerzální designér a vlastně tak být schopen zastřešit komplet celý designový proces. Jak se tomu dnes říká, Full-Stack Designér, Product Designér?
      • Animaci jsem udělal v Principle.
      • Ano, je to vlastně takový menší startup, resp. začínající služba. I když jsem chtěl vzbudit trochu více důvěryhodnosti, ale nic korporátního.

      Ještě jednou díky za komentář.

Napsat komentář