Osvědčené postupy, tipy a pokyny v oblasti webového designu, které byste měli vědět

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

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

Co vlastně myslíme tím "osvědčenými postupy"?

Při vývoji webových aplikací existují pevná pravidla, která mají co do činění především s čitelností a čistotou kódu, stejně jako s bezpečností webových stránek. V web designu, na druhé straně, terminologie je trochu více vágní a pravidla otevřenější pro vlastní výklady.

Osvědčené postupy: Web Design je více než estetika

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

Osvědčené postupy v web designu jsou soubor pravidel, která je třeba dodržovat, aby splňovaly obecná očekávání uživatelů. Kromě toho jsou pokyny pro větší jasnost a lepší uživatelské zkušenosti.

V tomto článku vám představím osvědčené postupy pro dobrý web 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.

Také na téma osvědčených postupů v oblasti WordPress Podívám se na vývoj. Jak víte, plánování projektů a řízení projektů jsou důležitou součástí webového designu. V tomto článku, nechám obě otázky se v současné době, protože by to jít nad rámec zde.

Doporučené postupy: Vizuální návrh

Nyní začínáme se zavedenými standardy pro vizuální design: 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 integrován průvodce stylem?
  • 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í značky. Hned, nemůžu myslet na jinou značku, která má tolik různých produktů, a přesto se podaří dát každý produkt společnost cítí. Dokonce i když se podívám na dříve neznámý produkt od společnosti Google, mohu jej spojit přímo se značkou.

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ž tato loga nemusí nutně znamenat, že průmyslový vzor také přináší prospěch.

S konzistencí v brandingu budete analyzovat pouze to, zda webové stránky optimálně odrážejí společnost a její značku.

Standard a použitelnost webového designu

Další "osvědčený postup" je definován integrací norem. To zahrnuje například umístění loga v levém horním rohu, vzhled tlačítek, odkazů atd. Ty pomáhají návštěvníkovi vašich stránek rychle a snadno najít cestu. Proto jsou tyto normy nezbytné pro realizaci úspěšné použitelnosti.

Další zdroje o použitelnosti:

Proč byste měli být obzvláště zájem o použitelnost a uživatelské zkušenosti jako web designer? Můžete najít komplexnější přístupy k použitelnosti v tomto článku a na https://www.usability.gov/.

Co definuje standard webového designu?

V návrhu webových aplikací definujeme široce používané konstrukční standardy Návrhové vzory uživatelského rozhraní. Andy Crestodina velmi srozumitelným způsobem vysvětluje, jak jsou standardy definovány ve svém článku Standardy webového designu.

To znamená, že návrhový přístup musí být použit na nejméně 80 procent lokalit počítat jako výchozí. Cokoliv jiného je buď zvyk (50-79 procent), nebo dokonce přináší nekonzistence a zmatek (0-49 procent) na vašich webových stránkách.

Harmonický design: třetí pravidlo

K tomuto tématu harmonický web design Už jsem o tom psal. Rád bych se tentokrát podrobněji zabýval třetím pravidlem.

To se používá 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 na výkresu, je návrh rozdělen do 9 polí stejné velikosti:

Návrh interakce
Zdroj: interakce-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 vnímat přímo. 

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ístění důležitých zpráv a volání k akci.

Ve Photoshopu můžete rychle a snadno kontrolovat a přizpůsobovat rozvržení pomocí nastavení Nástroj oříznutí a Pravidlo třetin. Pro ilustraci třetího pravidla jsem zřídil internetové stránky Marqeta trochu podrobněji prozkoumány:

Doporučené postupy

Produkt a jeho zpráva jsou dobře distribuovány napříč křižovatkami. Zde by se design mohl stát trochu efektivnější posunutím CTA trochu. Nicméně, harmonie designu by trpět poněkud:

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 znovu zvážit umístění CTA.

Takzvané "heatmaps" vám také pomohou zjistit, kde návštěvníci vašich stránek hledají a klikají. Nástroj Bláznivý Vejce nabízí například (placenou) službu.

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

Návrh doporučených postupů na webu

Chcete-li to provést, jsem opět poslal webové stránky Marqeta Používá. Zvláště prominentní je právo CTA a produkt, následuje zpráva a nakonec logo a druhý CTA:

Návrh doporučených postupů na webu

Mám zneškodnil mobilní verzi ještě dále vyzkoušet, co zbylo. Zde produkt nejprve upoutá pozornost, následovanou CTA a logem. Tento test můžete provést s celou stránkou – nejlépe ještě ve fázi návrhu. Zde můžete rychle a snadno analyzovat, které prvky vašeho návrhu jsou prominentní, a rozhodnout, zda je to žádoucí.

Text a SEO

Samozřejmě, že vytváření webových stránek zahrnuje také písemný obsah. Existují profesionální copywritery, 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 sledovat sami. 

Měli byste přikládat zvláštní význam délce a čitelnosti textů - často jsou texty 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 pozornost na webových stránkách je mnohem menší než například při čtení technických článků. Spíše jsme z určitých informací při prohlížení webových stránek. Skenujeme obsah, abych tak řekl, spíše než skutečně mít čas na to, abychom si ho přečetli správně.

Tam jsou také minus body od Společnosti Google, pokud věty na vaší stránce jsou příliš dlouhé a plus body, pokud jsou způsobeny tak-zvané "Přechodová slova" jsou vzájemně propojeny.

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

Usnadnění

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

Můžete snadno vyzkoušet tím, že se podíváte na vaše webové stránky jako černobílou verzi:

Návrh doporučených postupů na webu

Chcete-li to provést, jsem analyzoval stejné webové stránky znovu. I bez barev se zpráva objevuje jasně. V pravém horním místě by cta mohla být problematická z hlediska kontrastu.

Za účelem jistoty to toto ověření existuje "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:

Návrh doporučených postupů na webu
Návrh doporučených postupů na webu

Pokud dám šedé tóny, CTA není dostatečně vysoký kontrast, 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 vyzkoušet různé barevné kombinace přímo. Budete mít poměr přímo a máte možnost vybrat písma s a také podle kterého WCAG Standard chcete svůj výběr zarovnat.

Použití barev pro vizuální reprezentaci zpracování chyb může způsobit problémy. Vezměte například prvky tvaru. Chyby jsou zde často reprezentovány zvýrazněním vstupního pole v barvě. To může způsobit, že někdo s barevnou slabostí selhat odhalit, a proto není schopen je 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 naleznete 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

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

Tento přístup vytvoří obsah pro mobilní zařízení a potom jej upraví odpovídajícím způsobem pro větší. Opakem je sladit design s desktopem a co. a pak jej odpovídajícím způsobem upravit pro menší zařízení. 

Dva další přístupy přicházejí na mysl:

  • Vytvořte si vlastní webové stránky pro každé mobilní a stolní zařízení a potom jej odpovídajícím způsobem načtěte.
  • Zobrazení webu jako verze pro stolní počítače v mobilním telefonu

První z nich může být správný přístup, v závislosti na projektu, ale to 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 naléhavě musí být zařazeny do seznamu "osvědčených postupů". Další tipy pro optimalizaci mobilních zařízení najdete v tématu zde.

Mobile first nemusí to být vždy 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ý. 

Skrytým motivem je nejen to, že obsah je podle toho vizuálně zpracován, ale především se věnuje pozornost změněným vnějším podmínkám. Můžete také najít více informací v článku Mobile-First UX Design již není trend .

Následující tabulka jasně ukazuje, které obrazovky se používají pro častější přístup k Internetu. To vám pomůže rozhodnout, pro které velikosti obrazovky chcete optimalizovat své weby. I zde však upozorňujeme, že takové zobecnění lze považovat pouze za směrnici. Ani zkoumání vašich cílových skupin nemůže nahradit tyto statistiky.

Návrh doporučených postupů na webu
Zdroj: https://www.hobo-web.co.uk/best-screen-size/

Doporučené postupy pro WordPress

WordPress Codex

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

Tá WordPress Codex

WordPress poskytuje obecný kodex, který vám pomůže dozvědět se více o tématu.

WordPress Plugins A Themes

Při výběru správného Plugins A Themes zaměřit nejen na jeho aktuální funkčnost. Je také dobrým místem pro čtení recenzí a seznámení se s tím, jak často byly aktualizace nabízeny, a prošetření, zda Plugin Nebo. Theme , budou v budoucnu dále rozvíjeny. 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áhají sledovat vaše stránky a jeho bezpečnost a reagovat na problémy včas. Certifikát SSL by měl být integrován na každé webové stránce. 

Doporučené postupy v návrhu webu: Vaše otázky

Jaké máte otázky pro Sonju? Jaké osvědčené postupy můžete doporučit sami? Použijte funkci komentáře. Chcete další tipy na web design a vývoj? Pak nás následujte na TwitterFacebook nebo přes náš Bulletin.

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.

Podobné články

Komentáře k tomuto článku

Napsat komentář

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