Na blogu Uplab Kitchen jsme se nedávno dotkli tématu účasti na digitálních soutěžích a hovořili jsme o tom, jak připravit svůj web na účast v nich. Abyste vyhráli, je důležité se něčím odlišit, upoutat pozornost, mít na paměti. V tomto článku vám řekneme, jaké prvky designu stránek se mohou stát takovým akcentem a pomáhají si toho všimnout.
Standard sada požadavků na moderní web je jeho funkčnost, bezpečnost a pohodlí. Pokud existuje jasná a srozumitelná struktura, je provedena hlavní funkce, texty a významy jsou ověřeny, pak můžete přemýšlet o konstrukčních technikách. Pomohou zdůraznit výhody produktu nebo společnosti, zapůsobit na uživatele a kompetentně ho nasměrovat na akce, které potřebujeme.
Existuje ještě něco, čím se váš web může lišit od standardního:
- Emoce. Jen málo lidí přemýšlí o tom, jaké emoce by měl web vyvolávat. Pokud tedy stránka může způsobovat radost nebo smutek, sympatie, a to bude vyjádřeno v designu, pak si takový projekt určitě zapamatují.
- Myšlenka. Taková stránka vás nutí přemýšlet o důležitých věcech, učit se nové věci, něco přehodnocovat. Mohou to být stránky, které vyvolávají důležité otázky: práva žen, ekologie, diskriminace atd. Ale i když téma není sociální, ale stránka sděluje nějaký problém lidem s vysokou kvalitou, zůstává v jejich paměti, můžete být na svou práci hrdí. O takových projektech se ve společnosti obvykle diskutuje dlouho a často získávají nejvyšší ocenění v soutěžích.
V tomto článku navrhujeme hovořit podrobněji o tom, jaké prvky pomohou zprostředkovat požadovanou emoci nebo nápad a odlišit se od jiných webů …
1. Kvalitní typografie. To je, když web používá moderní geometrické bezpatky, mezi nadpisy a hlavním písmem je kontrast. Tato písma nemají formu, na kterou jsme zvyklí, ale něco nestandardního. Například písmo Gosha. Má některé zvláštnosti: je stále čitelný, ale některé znaky mají tvrdé rohy, které dávají tomuto písmu charakter.
Více Jeden charakteristický znak dobré typografie je kvalitní textový obsah. Při práci na webu vývoj často začíná návrhem, který místo budoucího textu vloží pahýl Lorem ipsum.
Jak ale potom přemýšlet o kompetentním umístění všech významů a podat informace stručně a jasně? Dobrá struktura webu znamená umístění již upraveného textu do potřebných částí ve fázi návrhu.
Použití proměnných písem pomůže zprostředkovat náladu projektu, vytvořit atmosféru a ukázat moderní svěží vzhled jeho tvůrců.
Nezapomeňte také na název domovské stránky, který dělá první dojem. Když klient navštíví stránku, má přibližně 30 sekund na posouzení, zda zde zůstane nebo ne. Proto je tak důležité umět formulovat motto vaší značky nebo jedinečný návrh několika jasnými slovy a zahrnout jej s designovými prvky, včetně typografie. Neztrácejte čas uživatele, ale okamžitě zaměřte pozornost na požadovaný obsah.
Některé projekty si vystačí jen s typografickou prací. Toto je stránka Jaro, digitálního návrháře z Berlína. Od samého začátku konkrétně říká: „Ahoj, jsem designér a budu k dispozici od srpna.“ Poté trochu mluví o sobě, zanechává odkazy na své projekty a kontakty. Všechno je velmi stručné a striktně k věci.
V naší praxi Uplab také často pracujeme s typografií. Například na mediálním portálu KPMG jsme v názvu použili písma, která vyjadřují přísné téma služby: ekonomika, daně, průmysl, investice.
2. Obrázky obrázků. Pod touto technikou máme na mysli velké šťavnaté obrázky na webu, které jsou umístěny od okraje k okraji. Mohou to být fotografie, ilustrace, klíčové vizuály a další reklamní grafika.
Klienti obvykle poskytují fotografické materiály. Ne každý má ale kvalitní fotografie, takže při tvorbě designu webových stránek přemýšlíme, kde a jaké fotografie a videa jsou potřeba. Poté napíšeme podrobné pokyny a předáme je klientovi, aby vyrobil potřebné materiály. Pokyn obsahuje požadavky na úhly, plán fotografování, rozlišení obrazu, požadovaný formát a hmotnost. Stejně jako odkazy na navigaci.
Fotografové věnují atmosféře fotografování stále větší pozornost. Vzhled, držení těla, poloha rukou modelek – vše by mělo zprostředkovat kýžené emoce.
Nabídka zboží na trhu je dnes velmi velká, o dodávky není nouze. A člověk se rozhoduje na základě hodnot a ekosystému, který produkt může dát. Reklama reprodukuje okolnosti, za kterých se člověk bude cítit šťastný nebo velmi chladný a sebevědomý (a mnoho dalších emocí, které jsou pro lidi důležité). Obchodníci už dávno přišli na to, že „lidé kupují emoce, nikoli výrobky“.
To souvisí s rychlým rozvojem bloggerů na různých platformách, protože ukazují životní styl, který pro sebe chceme. Pokud máme rádi okolí a emoce, které jsou způsobeny příspěvky na Instagramu, pak začneme cítit touhu vypadat stejně nebo být ve stejném prostředí. To tlačí na nákupní rozhodnutí.
Na webu stejnou funkci plní vysoce kvalitní vizuál a jeho hlavním úkolem je dávat potřebné emoce. Styl stránek byl částečně ovlivněn stylem obsahu na Instagramu: plochá rozložení, přizpůsobení rámečku obrázku na čtverec a další.
Dnes jsou lidé již zvyklí na skvělé vizuální efekty, a proto, abyste si je zapamatovali a odlišili, musíte to zkusit. Například jako autoři webu Písně od nuly. Zde vidíme spoustu barevných módních fotografií a videí, které se střídají jedna za druhou.
V roce 2019 hudební vydavatelství Keep Cool a Adidas uspořádalo akci, na které se sešlo 100 umělců, aby vytvořili hudbu. Stránka po něm zveřejnila nejlepší skladby. Proto má tato spolupráce zvukový a vizuální obsah.
Naše portfolio zahrnovalo projekt Severstal, kde jsme představili různé druhy oceli ve formě robotů. Takový vizuál se stal nestandardním řešením pro velkou průmyslovou společnost. Pokud tedy tvrdíte, že výše popsané techniky jsou vhodné pouze pro sféru B2C, pak vám odpovíme: „Na trhu B2B můžete najít i zajímavá a nestandardní řešení.“ Další podrobnosti na stránce případu.
3. Vzduch, prostor, minimalistické volné rozložení bloků. Toto kritérium je trendové již dlouhou dobu, ale stále existuje mnoho společností, které jej zanedbávají a obsah umísťují velmi hustě.
Minimalismus dnes pravděpodobně není rozmar, ale požadavky na styl stránek. Když se podíváte na nejlepší stránky na Awwwards, všimnete si, že jejich autoři mohou volně hostovat jejich obsah. Například autoři stránek pro obchod s lampami Empty State vědí, že lidé mohou posouvat, a rozhodli se umisťovat obsah po částech (v blocích). Taková prezentace odlehčuje rozhraní, činí jej atraktivnějším a pohodlnějším pro interakci. A lidé jsou již zvyklí hledat potřebné informace, takže se mohou zdržovat a listovat stránkou.
Intuitivní cesta zákazníka je vždy lepší než list textu. Na webových stránkách elitního rezidenčního komplexu Reef Residence fotografie na první obrazovce pomáhá vytvořit pocit prostoru, jako byste již byli na balkoně jednoho z bytů a dívali se na moře. A když se stránka posouvá, divák se postupně ponoří do veškeré nádhery rezidence.
4. Animace a videa na první obrazovce. První obrazovka je vždy obrazovým příběhem. Vytváří dojem, celkovou náladu zdroje, a proto mnoho společností používá animace nebo obrázková videa.
Za prvé, vždy je atraktivní. A za druhé, je zde také praktický přínos. Zatímco uživatel sleduje videa a hraje si s animacemi, stráví na vašem webu mnohem více času.
Video lze spustit samostatně nebo kliknutím. Pokud to začíná samo od sebe, pak to musíte udělat expresivní, krátké a smyčkové. Pokud je video delší, můžete první obrazovku vybavit samostatným tlačítkem. Když na něj kliknete, otevře se celé video na stejné nebo sousední obrazovce, kde se s ním můžete podrobně seznámit.
< p> Například na webových stránkách evropského vývojáře Bauwerk na první obrazovce se obrazové video okamžitě přehraje na pozadí, udává tón a vypovídá o společnosti mnohem lépe než jen text. Zde platí přísloví: „Je lepší jednou vidět, než stokrát slyšet.“
Mezi našimi projekty jsme také našli web s jasným obrazovým videem, které funguje jako pozadí, ale zároveň vytváří správnou atmosféru pro vzdělávací instituci – Mospolitech.
5. Mikroanimace interakce. To zahrnuje celou řadu technik:
- Expresivní animace pro vznik obsahu, například když se text objeví ze zámoří nebo se zajímavě objeví.
- Animace na pozadí, která vstupuje do hry při posouvání stránek.
- Použití isingu – nastavení animace, díky níž je plynulá a atraktivní: zpočátku plynulá, uprostřed se rychlost zvyšuje a poté opět zpomaluje .
- Hover-efekty-různé vyskakovací podpisy, plynulé přechody, transformace, když umístíte kurzor myši na prvek.
Animace na webu je celek zvláštní svět. Na toto téma jsme v našem blogu napsali samostatný článek: „K čemu je animace na webu a jak funguje?“
Zvažme zajímavé případy. Na domovské stránce interiérového studia Design Tonic je implementována skvělá a kvalitní animace vzhledu obsahu.
V jednom z našich projektů na webu věnovaném 15. výročí ruské měděné společnosti jsme použili mnoho interaktivních prvků, díky nimž je interakce s webem zábavná.
6. 3D grafika. Stránky s 3D vzhledem jsou vždy atraktivnější a neobvyklé. I ty nejjednodušší věci ve 3D si hrají s různými barvami, jsou působivé.
3D grafika vám také pomůže vyniknout, když potřebujete své značce zpestřit. Vzhledem k východu z letadla vypadá graf neobvykle. 3D lze také snadno animovat a je známo, že objekty v pohybu přitahují pozornost lépe. Podívejte se na příklad použití mimořádného 3D videa na webových stránkách projektu Wisir fintech.
V našich projektech obvykle používáme 3D ilustrace , kde se rámečky mění při posouvání a vytvářejí efekt pohybu. Stránka o používání hliníku například používá mnoho atraktivních 3D ilustrací, včetně animovaných.
3D lze také provádět v prohlížeči pomocí WebGL, jako například na webových stránkách Metaverse – platformě pro vytváření mobilních aplikací v rozšířené realitě.
Zde je malý průvodce nejlepšími designovými technikami, které máme. Pokud hledáte styl svého webu a chcete, aby vypadal moderně a funkčně, podívejte se na náš výběr.
Velká typografie, ilustrace a 3D na webu jsou dlouhodobými trendy. Tyto nápady můžete použít ve své praxi a nemusíte se obávat, že stránka bude brzy zastaralá a nezajímavá.
Na awwwards.com stále zbývá hodně věcí, které si zaslouží vaši pozornost. Zveme vás k pravidelnému procházení tohoto zdroje, abyste se ještě více přiblížili tomu, co je dnes ve světě webu populární. Náš tým to dělá.
Pokud vás zajímá, jak se připravit na digitální soutěže a co dalšího pomáhá k vítězství, přečtěte si náš blogový článek: „Jak připravit web pro účast v digitálních soutěžích?“
Úspěšné projekty! ❤
