Doporučené postupy pro návrh webu

Doporučené postupy, tipy a pokyny v oblasti webového designu, které byste měli znát

Jaké jsou osvědčené postupy v oblasti webového designu? Jak je úspěšně implementujete do svého dalšího projektu webového designu? A co dokonce definujeme jako standard designu a osvědčené postupy ve webovém designu?

Co máme na mysli osvědčenými postupy?

Ve vývoji webových stránek existují pevná pravidla, která mají co do chystát hlavně s čitelností a čistotou kódu, stejně jako s bezpečností webových stránek. Ve webovém designu je naopak terminologie trochu vágnější a pravidla jsou otevřenější vlastním interpretacím.

Doporučené postupy: Webový design je víc než estetika

Osvědčené postupy v oblasti webového designu jsou kombinací vizuálního designu, uživatelského prostředí, přístupnosti a psaní obsahu – se zaměřením na SEO.

Doporučené postupy v oblasti webového designu jsou souborem pravidel, která je třeba dodržovat, aby splnila obecná očekávání uživatelů. Kromě toho jsou pokyny pro větší jasnost a lepší uživatelský zážitek.

V tomto článku vám představím osvědčené postupy pro dobrý webový design. Pro každou sekci vám dám tipy, jak získat více znalostí a prezentovat nástroje a příklady, které vám pomohou s dalším projektem.

Rovněž na téma osvědčených postupů v oblasti WordPress Krátce se podívám na vývoj. Jak víte, plánování projektů a projektové řízení jsou důležitou součástí webového designu. V tomto článku prozatím vynechu obě otázky, protože by to zde přesáhlené.

Doporučené postupy: Vizuální design

Nyní začínáme se zavedenými standardy vizuálního designu: Jaké jsou osvědčené postupy v oblasti vizuálního designu? A jaké faktory jsou zahrnuty?

Funkce rozpoznávání a branding

Webové stránky musí odpovídat zbytku webových stránek společnosti a měly by být založeny na průvodci stylem. Proto se podívejte na webové stránky pro následující otázky:

  • Je na první pohled jasné, pro kterou společnost byla webová stránka vytvořena?
  • Byl průvodce stylem integrován?
  • Mohou vizuální prvky rozpoznat provozovatele webových stránek?
  • Používají se vizuály konzistentně?
  • Odráží jazyk použitý na webových stránkách branding?

Google je v čele konzistentního brandingu. Hned mě nemůže na mysli jiná značka, která má tolik různých produktů a přesto dokáže dát každému produktu, který společnost cítí. I když se podívám na dříve neznámý produkt od Společnosti Google, mohu jej přidružit přímo ke značce.

Jak to Google dělá?

Mimo jiné prostřednictvím konzistentního používání barev Google, typografie, výrazných mezer, konzistentního volání k akcím a navigace. Loga mají také určitou konzistenci, která funguje napříč společnostmi a kategoriemi – i když ta nemusí nutně znamenat, že design také způsobuje laskavosti.

S konzistencí značky budete pouze analyzovat, zda web optimálně odráží společnost a její značku.

Standard a použitelnost webového designu

Další "osvědčený postup" je definován integrací standardů. To zahrnuje například umístění loga do levého horního rohu, vzhled tlačítek, odkazů a tak dále. Ty pomáhají návštěvníkovi vašeho webu rychle a snadno najít cestu. Proto jsou tyto normy nezbytné pro provádění úspěšné použitelnosti.

Další zdroje informací o použitelnosti

Proč byste se měli zvláště zajímat o použitelnost a uživatelskou zkušenost jako webový designér? Komplexnější přístupy k použitelnosti najdete v tomto článku.

Co definuje standard webového návrhu?

Široce používané konstrukční standardy ve webovém designu definujeme pomocí vzorů návrhu uživatelského rozhraní. Andy Crestodina vysvětluje, jak jsou standardy definovány v jeho článku o standardech webového designu.

To znamená, že přístup k návrhu musí být použit alespoň na 80 procentech webů, aby se počítal jako výchozí. Cokoli jiného je buď zvykem (50-79 procent), nebo dokonce přináší na váš web nekonzistenci a zmatek (0-49 procent).

Harmonický design: třetí pravidlo

Již jsem informoval o tématu harmonických webových designů.  Rád bych tentokrát podrobněji popsal třetí pravidlo.

Používá se již několik set let – především v oblasti výtvarného umění a později ve fotografii. Zde, jak je znázorněno ve výkresu, je návrh rozdělen do 9 polí stejné velikosti:

Návrh interakce
Zdroj: interaction-design

Při vytváření webových stránek vám třetí pravidlo také pomáhá umístit nejdůležitější informace tak, aby je návštěvník mohl přímo vnímat. 

Jednoduše řečeno, vizuální prvek by neměl trvat déle než tři krabice a být ve třetině rozvržení. Uzly jsou také zvláště vhodné pro umístění důležitých zpráv a výzvy k akci.

Ve Photoshopu můžete rychle a snadno zkontrolovat a přizpůsobit rozvržení pomocí nastavení Nástroj oříznutí a Pravidlo třetin. Pro ilustraci třetího pravidla jsem se blíže podíval na webové stránky Marqeta:

Doporučené postupy

Výrobek a jeho sdělení jsou dobře distribuovány po křižovatkách. Zde by se design mohl stát trochu efektivnějším tím, že by se CTA trochu přesunula. Harmonie designu by však poněkud utrpěla:

Doporučené postupy

Mobilní varianta jasně ukazuje, že zpráva vyplňuje spodní třetinu rozvržení, zatímco produkt je zobrazen poměrně vystředěný. Zde bychom mohli přehodnotit umístění CTA.

Takzvané "heatmapy" vám také pomohou zjistit, kde návštěvníci vašeho webu hlavně hledají a klikají. Například nástroj Crazy Egg zde nabízí (zúčtovatelnou) službu.

Dalším způsobem, jak zkontrolovat svůj design, je takzvaný test rozostření. Ostrost vezmete z rozvržení (například pomocí Photoshopu a "Gaussova rozostření" – 12 procent). Když uživatelé již nemohou číst obsah, rychle se při prohlížení webu vyjasní. Tento test je také vhodný pro analýzu CTA. Je to stále rozpoznatelné jako takové?

Doporučené postupy při návrhu webu

Znovu jsem použil webovou stránku Marqeta. Obzvláště prominentní je správné CTA a produkt, následované zprávou a nakonec logem a druhým CTA:

Doporučené postupy při návrhu webu

Mobilní verzi jsem ještě více zneškodnil, abych otestoval, co zbývá. Zde produkt nejprve upoutá oko, následuje CTA a logo. Tento test můžete provést s celou stránkou – nejlépe ve fázi návrhu. Zde můžete rychle a snadno analyzovat, které prvky vašeho návrhu jsou prominentní, a rozhodnout se, zda je to to, co chcete.

Optimalizace obsahu a SEO

Tvorba webových stránek samozřejmě zahrnuje i psaný obsah. Existují profesionální copywriteri, kteří píší smysluplný obsah pro vaše webové stránky s ohledem na SEO, použitelnost a průvodce stylem. Existuje však také několik pokynů, které můžete dodržovat sami. 

Zvláštní význam byste měli přikládat délce a čitelnosti textů – texty jsou často příliš rozsáhlé a příliš vnořené. 

I když je cílová skupina zvyklá na určitý technický žargon, měli byste si být vždy vědomi toho, že naše rozpětí pozornosti na webových stránkách je mnohem menší než například při čtení technických článků. Spíše nám dochášly určité informace při procházení webových stránek. Skenujeme obsah tak jako tak, spíše než abychom si skutečně udělali čas, abychom si ho správně přečetli.

Od Googlu jsou také minusové body, pokud jsou věty na vaší stránce příliš dlouhé, a plus body, pokud jsou spojeny takzvanými "přechodová slova".

Zajímavé příspěvky k SEO jsou také:

Přístupnost webu a přístupné webové stránky

Přístupnost webu je bohužel stále okrajovým tématem a je příliš často ignorována. I zde existují jednoduché způsoby myšlení, které bychom mohli zvážit od prvního návrhu. Například nejčastěji používáte barvy ke zvýraznění informací? 

Můžete to snadno otestovat tím, že se na své webové stránky díváte jako na černobílou verzi:

Doporučené postupy při návrhu webu

K tomu jsem znovu analyzoval stejný web. I bez barev se zpráva objeví jasně. Pravý horní CTA by se mohl stát problematickým z hlediska kontrastu.

Chcete-li to s jistotou ověřit, je zde "Kontrola kontrastu". Výchozí kontrastní poměr je alespoň 4,5:1 pro normální text a 3:1 pro velký text, například nadpisy:

Doporučené postupy při návrhu webu
Doporučené postupy při návrhu webu

Když dám šedé tóny, CTA není dostatečně vysoká kontrastní, ale dostatečná v barevné variantě.

http://colorsafe.co/ je dalším nástrojem pro určení barev a jejich kontrastní síly. Zde si můžete přímo vyzkoušet různé barevné kombinace. Poměr vám bude dán přímo a máte možnost vybrat písma s a také na který standard WCAG chcete zarovnat svůj výběr.

Použití barev pro vizuální reprezentaci zpracování chyb může způsobit problémy. Vezměme si například prvky tvaru. Chyby se zde často dělají zvýrazněním vstupu barevně Box znázorněný. Pro někoho s barevnou slabostí to může vést k tomu, že chyby nebudou detekovány, a proto nemohou být vyřešeny. 

Při plánování byste to měli vzít v úvahu, a proto se vždy ujistěte, že existuje další reprezentace chyby. Zde najdete další zajímavá fakta a zdroje o přístupnosti, stejně jako cenné tipy pro vytvoření přístupného webu WordPress.

Další zdroje

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

Rozlišení a responzivní webový design

Ve webovém designu pravděpodobně neexistuje žádné pravidlo, které by bylo řešeno – a přehlíženo častěji – než " mobile first ".

Tento přístup vytvoří obsah pro mobilní zařízení a poté ho odpovídajícím způsobem upraví pro větší. Opakem je zarovnat návrh na plochu a spol. a poté ho odpovídajícím způsobem upravit pro menší zařízení. 

Na mysl přicházejí další dva přístupy:

  • Vytvořte si vlastní web pro každé mobilní a stolní zařízení a podle toho jej načtěte.
  • Zobrazení webu jako verze pro stolní počítače na mobilním telefonu

První z nich může být v závislosti na projektu správným přístupem, ale není příliš rozšířený, protože je velmi nákladný a časově náročný. Bohužel, ten je stále vidět příliš často na webu, a proto je naléhavě třeba zahrnout do seznamu "osvědčených postupů". Více tipů na mobilní optimalizaci naleznete zde.

Mobile first nemusí to být vždy ten správný způsob, jak to udělat: Vyšetřování cílové skupiny a jejich chování na internetu vám může rychle ukázat, ze kterých zařízení je váš web hlavně přístupný. 

Postranním motivem je nejen to, že obsah je podle toho vizuálně zpracován, ale především se uvažuje o změněných vnějších podmínkách. Více si můžete přečíst také v článku Mobile-First UX Design už není trend.

Následující tabulka jasně ukazuje, které obrazovky se používají pro častěji přístup k Internetu. To vám může pomoci rozhodnout, pro které obrazovky chcete optimalizovat své webové stránky. Vezměte však prosím na vědomí i zde, že takové zobecnění lze považovat pouze za směrnici. Tyto statistiky nemůže nahradit ani kontrola cílových skupin.

Doporučené postupy při návrhu webu
Zdroj: https://www.hobo-web.co.uk/best-screen-size/

Doporučené postupy pro WordPress

WordPress Codex

WordPress nabízí neuvěřitelný počet způsobů, jak předvést své návrhy na webu. Ale i zde existují standardy a osvědčené postupy, se které se můžete sladit.

Tá WordPress Codex

WordPress Obsahuje obecný kodex, který vám pomůže získat další informace o tématu.

WordPress Plugins A Themes

Při výběru správného pluginu a motivu je v popředí nejen jeho aktuální funkčnost. Je také dobré si přečíst recenze a seznámit se s tím, jak často byly nabízeny aktualizace, a prozkoumat, zda bude plugin nebo téma v budoucnu dále rozvíjeno. Nástroje WordPress, které jsou pravidelně vyvíjeny, mají obvykle aktivnější podporu. Je také pravděpodobnější, že zůstanou kompatibilní s budoucími verzemi vaší stránky.

WordPress Aktualizace a zabezpečení

Vaše Themes A Plugins pravidelně snižuje zranitelnost vůči nežádoucím přístupům. Chyby jsou vyřešeny a vaše webové stránky jsou přizpůsobeny neustále se měnícímu technickému prostředí. Zabezpečení Plugins Jak WordFence Také pomáhá sledovat váš web a jeho zabezpečení a včas reagovat na problémy. Certifikát SSL by měl být integrován na každé webové stránce. 

Doporučené postupy v oblasti webového designu: Vaše dotazy

Jaké máte otázky na Sonju? Jaké osvědčené postupy si můžete doporučit sami? Použijte funkci komentáře. Chcete další tipy na návrh a vývoj webu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.