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

8 min.
Doporučené postupy pro návrh webu

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

Co vlastně myslíme "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?
  • Jsou vizuální prvky rozpoznatelné provozovateli 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 o použitelnosti:

Proč byste se jako webový designér měli zajímat zejména o použitelnost a uživatelskou zkušenost? Rozsáhlejší přístupy k použitelnosti naleznete v tomto článku a na https://www.usability.gov/.

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ál by neměl zabírat více než tři krabice a být v jedné třetině rozvržení. Uzly jsou také zvláště vhodné pro umísťování důležitých zpráv a volání akcí.

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 zbylo. Zde produkt nejprve upoutá pozornost, následuje CTA a logo. Tento test můžete udělat s celou stránkou – nejlépe stále ve fázi návrhu. Zde můžete rychle a snadno analyzovat, které prvky vašeho návrhu jsou prominentní, a rozhodnout se, zda si to přejete.

Text 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é:

Usnadnění

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 jsou zde často reprezentovány zvýrazněním barevného vstupního pole. To může způsobit, že někdo s barevnou slabostí nedokáže detekovat, a proto je nemůže vyřešit. 

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é stránky WP.

Další zdroje

Rozlišení a návrh mezi zařízeními

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 Plugins A Themes se nezaměřovat pouze na jeho aktuální funkčnost. Je to také dobré místo pro čtení recenzí a seznámování se s tím, jak často byly aktualizace nabízeny, a prozkoumat, zda Plugin Nebo. Theme , bude v budoucnu nadále dále rozvíjena. WordPress Nástroje, 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.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro technologické trendy.

Komentáře k tomuto článku

Napsat komentář

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