10 prvků webového designu, které byste neměli přehlížet
Pokud jde o navrhování a vytváření webových stránek, zdá se, že se to nikdy nestalo dost rychle.
Vzhledem k tomuto rychlému tempu se často mnoho malých detailů, které se nakonec vyžadují pro vytvoření webových stránek, často vynechává proces návrhu. Zatímco tyto podrobnosti mohou být drobné, jsou to, co přinášejí webové stránky od pěkné až opravdu úžasné.
Tyto detaily se často snadno zapomínají, protože nezvyšují celkový vzhled a pocit z webových stránek. Problém spočívá v tom, že jak váš vývojový tým pracuje prostřednictvím návrhu, bude nucen navrhnout a vytvořit tyto prvky pro vás stejně.
Mohli byste upravovat výrobní cyklus tak, aby vývojáři měli čas vrátit těmto aktivům, ale proč to neudělat jen to, co je děláno vpředu, takže proces je mnohem čistší?
Ještě horší je, že vývojový tým se může rozhodnout, že bude vpřed a jen vytváří aktiva.
Zatímco mnoho vývojářů má zájem o design, kreativita, která je pověřena navrhováním webových stránek, by měla být nakonec ta, kdo plánuje tyto prvky. Plánování dopředu pro jemnější nuance může mít hluboký dopad na kvalitu konečného produktu.
Každý prvek, na který se vztahuje tento článek, vychází z otázky, že by vývojář požádal návrháře, zda z návrhu chybí prvek.
Pojďme se ponořit do 10 klíčových prvků, abyste měli na paměti, jak vyleštíte své webové stránky.
1. Odkazy
Zatímco styling různých stavů odkazu je opravdu spíše základní, můžete být překvapeni tím, jak často jsou přehlíženy všechny další detaily. Zahrnout následující stavy pro všechny odkazy na stránce:
- Normální
Toto je výchozí stav odkazu. tj. jeden, který není přeplňován nebo klepnut, nebo odkazující na adresu URL, kterou uživatel již navštívil. Toto je formát odkazu, který většina návrhářů vždy pokrývá. - Navštívili
Jedná se o odkaz, který se nepohybuje nebo klikne, ale jehož cíl byl navštíven uživatelem. - Aktivní
Aktivní odkaz je ten, na který právě uživatel klikne. Většina vývojářů zde bude replikovat stav myši, pokud jim není poskytnut styl. - Vznášet se
Konečně, stav vznášení se týká toho, jak vypadá odkaz, když se uživatel přesahuje. Toto a normální stavy jsou ty, které většina designérů připravuje.
Jeden detail, který je často přehlížen, spočívá v tom, že tyto různé státy je třeba naplánovat na všechny regiony webové stránky. Například mnoho webů má tmavé tělo kopírovat na světlém pozadí, ale kontrast je obrácen v zápatí. Musíte naplánovat všechny různé kontexty odkazů nalezených na celé stránce.
Na Full Moon BBQ , například vidíme základní červené odkazy uvnitř oblasti obsahu a základní bílé odkazy v zápatí níže. Znovu, drobné detaily, ale důležité.
2. Formuláře
Pro mnoho návrhářů je konfigurace formulářů kritická a nemožná. Přesto, pro mnoho dalších, zdá se, že přijde jako vzdálená myšlenka.
Problém s druhým postojem spočívá v tom, že formuláře často představují jediný skutečný způsob převodu návštěvníků do zákazníků. A bez řádného plánování a designu by se použitelnost těchto formulářů mohla snížit, což by ochromovalo jediný konverzní bod webové stránky. Příprava na tyto prvky je zásadní, i když se zdá klientům mnohem méně naléhavě než barva, značka a obrázky.
Dvě nejdůležitější úvahy při sestavování formuláře jsou:
- Označení formuláře
Formuláře obvykle shromažďují osobní údaje, které uživatelé zdráhají rozdávat. Proto je správné informování uživatelů o přesném účelu formuláře moudré. - Vstupní pole a štítky
Za druhé plánujeme, jak budou na stránce vytyčeny vstupní pole formuláře a jak budou štítky těchto polí stylizovány a orientovány vzhledem k polím.
Když se ponecháte na jejich výchozí hodnoty, mohou formuláře vypadat neohrabaně. Ale s náležitou přípravou bude web vypadat hladce a bude mnohem efektivnější. Podívejme se na skvělý příklad, který musel začít s dobrým plánováním:
Tato obchodní kritická podoba Skvělý bylo jasně dobře promyšlené. Celé poslání a účel stránky byly pečlivě zváženy. Z názvu a úvodu do rozvržení každé sady polí, s jejich štítky a styly ovládání, je tato forma model plánování.
Plánování formulářů nás vede k několika dalším důvodům ...
3. Chování tlačítek
Tlačítka mohou být použity na různých webových stránkách pro různé účely, ale zdá se, že jsou často zanedbávány, stejně jako různé stavy tlačítka. Čtyři stavy tlačítka jsou:
- Výchozí nastavení
Toto je výchozí stav tlačítka, čeká na kliknutí. Většina návrhářů ji pokrývá, ale chybí ostatní. - Vznášet se
Stav myši je vidět, když uživatel myší nad tlačítkem. Tento stav pomáhá uživateli upozornit na to, že tlačítko je akční položka. - Klikněte na tlačítko
Jakmile uživatel klepne na tlačítko, tento stav vizuálně naznačuje, že na něj klikli. Poskytování této vizuální nápovědy může pomoci minimalizovat frustraci uživatelů. - Zakázáno
Deaktivovaný stav tlačítka je možná nejméně použitý, ale může být velmi užitečný pro vývojáře. Tento stav je zřídkakdy naplánován, pokud projektant neposkytl formulář pro ověření (viz následující část).
Stejně jako různé stavy odkazů nezapomeňte zvážit různé stavy tlačítek používaných na vašich webových stránkách. Z formulářů přihlášení do polí vyhledávacích polí do formuláře pro přihlášení k odběru bulletinů budou všechna tato tlačítka potřebovat odpovídající styly.
4. Ověření formuláře
Důležitým souvisejícím detailem je validace formuláře. To je kritický bod, kdy webové stránky sdělí požadavky uživatele a chyby ve formuláři. Existují tři základní věci, které je třeba zvážit:
- Požadovaná pole
Všechna povinná pole by měla být uvedena. Nejčastěji se to děje s hvězdičkou, jak je vidět Začněte prosím od začátku :
- Validace v reálném čase
Některé ověření lze provést v reálném čase, jakmile uživatel vyplní formulář. Tento druh ověření informuje uživatele co nejrychleji o jakýchkoli problémech s daty, které zadali. To lze dosáhnout velmi dobře zásuvný modul validace jQuery :
- Validace po zpětném testu
Tento typ ověření se provádí po odeslání formuláře uživatelem. Styl použitý pro validaci v reálném čase se zde často opakuje, ale další možností je seskupit všechny chyby do jedné zprávy, jak je vidět na Bučení :
5. Zprávy o stavu: chyby, varování, potvrzení atd.
Uživatelé obvykle potřebují určitou zpětnou vazbu po provedení akce na vašem webu. Nejpravděpodobnější scénář je po odeslání formuláře, ale mohlo by dojít k mnoha dalším událostem. Pečlivě zvážíte své webové stránky a akce, které mohou uživatelé podniknout, a plánujte zprávy, které bude muset web komunikovat.
Na Život dnes , vidíme ověřovací zprávu, která by mohla snadno sloužit jako globální styl chybových zpráv. A s nepatrnou změnou barev a ikon, může být také použita pro jemnější varování nebo dokonce potvrzovací zprávy:
6. Rozšíření pozadí na větší obrazovky
V závislosti na stylu webových stránek by prvky pozadí mohly být pro vaše vývojáře problémové místo. Většina zázemí je jednoduchá a nevyžaduje mnoho přípravy, ale některé jsou komplikované přechody, vzory a snímky.
Vezmeme-li v úvahu, že velké monitory se stávají stále častější a že většina návrhů je plánována pro základnu v celém rozsahu 960 pixelů, hodně obrazovky nemovitostí je ponecháno otevřené. Pokud vaše pozadí obsahuje něco vzdáleně komplikovaného, doporučuje se vám naplánovat, jak se rozšíří o vyplnění větších obrazovek.
V příkladu, který jsem postavil níže, jsem se musel přizpůsobit dřevěné struktuře, která se rozšiřovala ve všech směrech. Ne taková věc, kterou byste chtěli vyvíjet s těžkým vývojářem.
7. Základní prvky HTML
Pro kopírování těžkých webových stránek je design a styling základních prvků HTML zásadní a neměli by být přehlédnuty. Ale na mnoha marketingově orientovaných webových stránkách, která mají zaneprázdněné uspořádání a výrazný vizuální styl, jsou základní prvky zapomenuty. A vývojář samozřejmě nikdy nedosáhne do vytváření webových stránek, aniž by musel vytvořit standardní šablonu stránky.
Zde jsou základní prvky, které se vždy plánují: odstavce, nadpisy 1 až 6, neříděné a seřazené seznamy, tabulková data, pole formuláře, obrázky a tučné a kurzívní texty.
Na mnoha webových stránkách, na kterých pracuji, jsem sestavil stylový průvodce, který pomohl vývojářům, něco takového:
8. Webové e-maily
Jedna věc, kterou nevidím žádný návrhářský plán, jsou e-maily generované webovými stránkami. Takový základní prvek je snadné vynechat, protože se nejedná o typické jádro webu. A přesto e-mail je mocný nástroj, který může propagovat a rozšiřovat službu.
Mým návrhem je pečlivě zkontrolovat obsah webových stránek ve fázi plánování a hledat e-maily, které mohou být odeslány. Mezi nejběžnější patří:
- Potvrzení registrace pošty,
- Registrace potvrzena,
- Potvrzení o dokončení formuláře (např. Pro kontaktní formulář),
- Ověření objednávek po zakoupení.
Pokud opravdu chcete vyfouknout mysl svých klientů a vývojářů, připravte šablonu e-mailového marketingu pro web. Uživatelům poskytnete bezproblémový přechod z webových stránek do doručené pošty a budete udržovat pečlivou kontrolu nad značkami v různých formách.
9. Protahování stránek
Otázka, jak se bude design dotýkat měnícího se obsahu, je také zřídka řešena, ale může být kritická v závislosti na stylu webových stránek. Podívejme se na příklad, kdy by to mohlo být špatně:
Full Moon BBQ má pevnou domovskou stránku. Tento návrh neumožňuje výrazný pohyb nebo změnu obsahu. Všechno má určitou velikost a umístění. Co se stane, když se majitelé rozhodnou skutečně prodloužit uvítací zprávu nebo přidat obrázek? Naštěstí pro to plánovali. Jak vidíte v tomto modelu, upravil jsem stránku tak, aby obsahovala dvojitý text. Stránka se perfektně rozšiřuje a přizpůsobí se jí:
Příprava alternativních verzí rozvržení s mnohem větší obsah může být velmi užitečná při demonstraci, jak naplánovat takový scénář.
10. Animace: vyskakovací okna, nácvik nástrojů, přechody atd.
Na standardních webových stránkách HTML a CSS (tj. Bez Flash) jsou animace a přechody snadno přehlíženy. A když je přehlíženo, často nebudou vůbec ubytováni. Takže pokud jsou animace kritické, nejlépe je poskytnout vývojářům ukázku toho, jak by měly fungovat, aby produkt fungoval tak, jak by měl.
Některé z nejběžnějších míst animace se vyskytují v:
- Tipy na nástroje
Těch malých vyskakovacích oken, když uživatel myší nad prvky. - Rotátory obrazu
Prezentace na domovské stránce jsou všechny vzteky a pro přechody a styly je k dispozici široká škála možností. - Světelný box
Můžete stylovat nejen samotný lightbox, ale i přechod k němu.
Každý z těchto animovaných prvků má výrazný vizuální styl, který musí být přizpůsoben všem.
Proč bych se měl starat?
Mnoho zde prezentovaných prvků je pro vývojáře užitečnější než návrháři. Abyste byli spravedliví, je to částečně pravda: pokud připravíte všechny tyto prvky předem, vývojáři vás budou milovat. Jedná se o takové věci, které se vývojáři unavují tím, že se ptají nebo potřebují samostatně vymyslet.
Přesto, děláte všechnu tuto práci předem, necháte vývojáře hádat, a tím udržujete kontrolu nad designem. A tím, že udržujete kontrolu nad designem, máte mnohem větší šanci, že budete moci přidat druh lesku, který změní běžné webové stránky na vynikající. Někteří návrháři se na to odvolávají jako tajná omáčka, která dělá jejich vzory zpívat.
A pokud to není dost motivace, zvažte to. Návrháři, kteří to naplánují dobře a dodají balíček, který je kompletní, jsou zásadně mnohem cennější. Nejenže vytvářejí produkt vyšší kvality, ale také snižují výrobní náklady. To znamená, že existuje větší prostor pro zisk, což samozřejmě dává všem radost.
Takže, pamatujte na všechny tyto jemnější detaily a buďte zábavní při plánování svých webových stránek. Upřímně řečeno, tyto detaily představují polovinu zábavy při navrhování pro web, které se stále měnícím médiem přizpůsobuje uživatelské interakci a měnící se obsah.
Patrick McNeil je spisovatel, vývojář a designér na volné noze. Zejména se mu líbí psát o web designu, školení lidí v oblasti vývoje webových stránek a vytváření webových stránek. Patrickův nejnovější knižní projekt je Webová příručka designéra ; obsahuje řadu dalších témat v souladu s tímto článkem. Více o tom můžete zjistit TheWebDesignersIdeaBook.com . Sledujte Patrika na Twitteru @designmeltdown .
Co navrhujete za to, že všichni ostatní nezapomínají? Představili jste někdy další výhody jako své klienty? Jaké věci najdete vývojáři, kteří vás vždy žádají, abyste přidali design?