The Dos a Don'ts of Dark Web Design
Tmavé návrhy jsou velmi populární a mohou mít elegantní a kreativní odvolání.
Jsou také ideální pro mnoho typů klientských prací, avšak nejsou vhodné pro všechny webové stránky a měly by být používány pouze v případě potřeby.
Navzdory nápadnému vizuálnímu dopadu, který tyto tmavé vzory mohou mít, mnoho návrhářů neví, jak je efektivně vytáhnout bez vypnutí návštěvníka.
S tmavým designem přichází méně čitelnosti , méně atraktivity pro většinu čtenářů a méně příležitostí pro konvenční prvky návrhu.
V tomto příspěvku budeme diskutovat o několika doporučeních, aby vaše další tmavé návrhy webových stránek apelovaly na širší publikum , a současně nechat vás, tvůrce, vyjádřit vaši kreativitu.
A poslední anketa naznačuje, že obecné internetové publikum upřednostňuje lehké návrhy obrovským 47%. Hlavním důvodem je čitelnost . Většina lidí nemá ráda prohlížení světelného textu na tmavém pozadí na webových stránkách, protože přitahuje jejich oči, což způsobuje mnohem méně příjemný zážitek.
Naopak, 10% respondentů uvedlo, že vždy preferují tmavé pozadí pro webové stránky, zatímco dalších 36% uvedlo, že nejlepší volba závisí na typu webových stránek.
Takže, co je správná odpověď? Když k tomu dojde, každý má svůj vlastní názor, a to je to.
Ale s tak velkým množstvím uživatelů, kteří říkají, že temné návrhy stránek jsou tolerovatelné a někdy i upřednostňovány, my se musíme jako weboví designéři naučit vytvářet efektivní tmavé návrhy pro sebe i pro naše klienty.
To znamená přesvědčit všechny pravé věřící ze světlého prostředí, že tmavý design může být čitelnější a uživatelsky příjemnější.
Použijte Více bílý prostor
Nebo by se to mělo nazvat "černým prostorem"? Efektivní využití bílého prostoru je důležité pro jakýkoli typ designu, ale je důležité pro webové stránky s tmavým pozadím.
Tmavé vzory mají tendenci cítit se "těžké" a jejich přeplnění může posílit tento pocit. Podívejte se na některé populární temné webové návrhy níže, a poznamenat jejich liberální využití bílého prostoru k velkému efektu.
Black Estate je vidět po celém internetu v temných webových designových vitrínách. Je to skutečně krásný design a hodný veškeré pozornosti. V celém designu se používá velké množství bílého prostoru, a to, co činí tento konkrétní design jedinečným, je způsob, jakým se bílý prostor používá k efektivnímu osvětlení určitých prvků.
Logo má spoustu bílého prostoru kolem něj a je to první, co vidíme jako návštěvníky. Vidíme hlavní obsah a láhev na pravé straně. Jak vidíte, bílý prostor se perfektně používá k zvýraznění textu na láhvi a nadpisu hlavního obsahu.
Vybraný obsah v Tictoc a doprovodný obrázek v tomto designu jsou zarámovány s nejblíže bílým prostorem. Při pohybu směrem dolů vidíme méně bílého prostoru, což nás přivádí k tomu, abychom zobrazili obsah.
Důvodem je, že bílý prostor postupně vede uživatele až na konec stránky .
Tmavé pozadí dodává designu hloubku. Vzhledem k tomu, že webové stránky tak silně spoléhají na bílý prostor, bylo by to méně zajímavé bez tvůrčího účinku tmavého pozadí.
The Mark Dearman web má liberální a rovnoměrně rozložené bílé místo v celém svém uspořádání.
Bílý prostor ohraničující každou součást portfolia poskytuje dostatek prostoru pro dýchání pro obsah, který drží, a je pěkným bodem odpočinku, než se přesunete k dalšímu dílu.
Spousta bílého prostoru je nezbytná pro tmavé vzory, protože pomáhá nejenom při odstraňování rozvržení, ale také při vytváření důležitých prvků a dodávání elegance celkovému vzhledu.
Textový bílý prostor
Vzhledem k tomu, že čitelnost je nejdůležitějším problémem těch, kteří nemají rádi tmavé pozadí, musí návrháři věnovat mimořádnou pozornost samotnému textu.
Stejně jako v celkovém designu je jedním ze způsobů, jak zlepšit čitelnost na tmavých webových stránkách, zvýšit bílé místo úpravou velikosti odstavce, kerningu a vedení .
Níže uvedený příklad ukazuje, jaký rozdíl má rozdíl mezi znaky a kolem znaků při porovnávání tmavých a světlých rozvržení.
Dalším způsobem, jak zlepšit čitelnost v tmavých webových modelech, je zvýšit velikost písma . Stejně jako většina ostatních pravidel v tomto příspěvku, větší velikosti písma znamenají více bílého prostoru. Čím větší jsou písmena, tím více bílý prostor se objeví kolem a uvnitř každého dopisu.
Například písmeno "a", které je uvedeno níže, získá více bílého místa, jakmile se zvětší, a to jak v oblasti kolem něj, tak v prostoru uvnitř krytu a a pod převisem.
Mějte na paměti, že čtení malého textu je mnohem jednodušší na světlém pozadí než na tmavém pozadí. Při nastavení typografie pro nový web nezapomeňte se podívat na nějaký fiktivní text, abyste se ujistili, že je čitelný . Pokud ne, zkontrolujte, zda pomáhá zvýšit velikost textu.
Textové kontrast
Mnoho lidí by souhlasilo s tím, že nejnepříznivější temné webové stránky způsobují oční napětí. Příliš mnoho nebo příliš málo kontrastu je obvykle pachatelem. Jak lze najít dokonalou rovnováhu?
Pokud jste v místnosti, která je černá, náhle se dívá přímo na světlo není příjemné. Ale při pohledu na méně jasné světlo v méně temné místnosti je v pořádku. Stejný princip se týká webového designu.
Hledání dokonalého kontrastu znamená vyvážení tmy pozadí s lehkostí textu .
Níže je (velmi) hrubý průvodce, který ukazuje, jak funguje kontrast mezi textem a pozadím. Jeden si všimne, že když pozadí zesvětlí, tak se to stává i text.
Hledání příjemného kontrastu textu je mnohem obtížnější s čistým černým pozadím.
Chcete-li najít perfektní rovnováhu, experimentujte s různými odstíny. Nejlepším výsledkem je obvykle pozadí, které není čistě černé a text není čistě bílý.
Řešení písem
Písma hrají velkou roli v designu a měly by být rozhodně vzaty v úvahu s temným rozložením. Níže uvedený obrázek zobrazuje 14bodové písmo na tmavém pozadí v písmech serif i sans-serif.
Sans-serif písmo je samozřejmě čitelnější . Ale mnoho designérů stále volí serifové písma pro svou eleganci.
Trik je však jen vložit širší text do serifových písem tak, aby mimořádně bílý prostor zaplavil každou postavu a text byl velmi čitelný.
Níže uvedený snímek obrazovky obsahuje webovou stránku popsanou výše v tomto článku. Obsahuje serif a sans-serif fonty, ale používá je inteligentním způsobem.
Větší text, například nadpisy, navigace a záhlaví, je v písmu serif pro větší eleganci. Pro lepší kontrast a lepší čitelnost je text těla v čistém písmu bez písma.
Použijte minimální barevné schémata
Aby jejich tmavé vzory měly čistý a přehledný vzhled, měli by návrháři vždy zvolit minimální barevné schémata .
Z několika níže uvedených příkladů vidíme, že zaneprázdněné barevné schémata skutečně zabraňují tmavému pozadí, protože kontrast je příliš ostrý.
Dodržujte jednu nebo dvě barvy . Chcete-li přidat další barvy, vyzkoušejte tmavé pozadí.
Mnoho tmavých návrhů webových stránek má více vzrušujících barevných schémat. Toto pravidlo je často porušováno, ale pouze správnými technikami.
Obecně platí, že barva často způsobuje, že web vypadá příliš zaneprázdněně . Protože tmavší stránky již mají hloubku, používejte barvu s opatrností.
Nabídněte stylový přepínač
Zatímco máme k dispozici mnoho dobrých postupů, abychom vytvořili tmavší webové stránky atraktivnější, žádné úsilí uspokojí každého uživatele.
Ujistěte se, že obsahuje přepínač stylů , takže uživatelé mají nakonec možnost prohlížet tmavý text na světlem pozadí.
Pro tento účel jsou požadovány dva listy stylů, jeden pro výchozí tmavé uspořádání a jeden pro alternativní uspořádání světla.
SitePoint má vynikající tutoriál o tomto: Vytvořte přepínač jednoduchého stylu v CSS . Namísto použití "oranžové", "modré" a "bílé" verze v tutoriálu, stačí použít "light" a "dark" listy stylů.
Když Dark Web Design funguje nejlépe
Jak bylo uvedeno, velká část uživatelů webových stránek se domnívá, že temný webový design by mohl fungovat pro určité typy webových stránek. Ale studie je nejasná o tom, co přesně jsou tyto typy.
Obecně řečeno, tma funguje nejlépe pro kreativní nebo elegantní vzory . Pro moderní elegantní webové stránky, tmavé pozadí dodávají eleganci. Pro výstřední nebo ručně kreslené styly tmavé pozadí zvyšují kreativitu rozložení.
Elegantní tmavý design
Tmavá může být hluboká, autoritativní a silná a často vypadá elegantně, když je vhodně používána. Níže uvádíme několik příkladů a některé techniky pro vyvedení elegance do tmavého designu.
Webové stránky pro Larissa Meek má jednoduchý vzorek v historickém stylu v pozadí a nastavuje elegantní tón. Další zvláštní rysy dodávají osobnímu dotek designu.
Tato technika může být použita pro mnoho druhů webových stránek. Vintage nebo klasické vzory a textury mohou vytvořit vzhled, který je elegantní a vhodný pro věk .
Většina z nás spojuje ročníky s vysokou třídou, takže vytváření vysoce kvalitních webových stránek tímto způsobem je snadné.
Hloubka jádra má velmi čistý design s tmavým pozadím, které dodává styl a třídu. V designu se projevuje i pocit autority. Tato elegance může také vést k tomu, že dílo designéra vypadá jako cennější.
Všimněte si, že tento návrh nemá jinou strukturu nebo jiné obrázky než části a logo portfolia. V opačném případě by design byl příliš zaneprázdněn; jak to je, je obsah dobře úplet.
Dobrým procesem, který je třeba následovat, je nejprve doplnit základní obsah a podle potřeby přinést prvky návrhu . Návrhář pak může pozastavit a odrážet, jakmile se přidá každý nový prvek, a ujistěte se, že rozložení není přečerpáno.
Stejně jako umělecká díla se může zdát cennější v elegantním designu, tak i produkty. Tmavý a elegantní design, jako Tapboty a tolik dalších, pomáhá předvést prodaný produkt.
Konstrukce odráží samotné zařízení , jeho sklony a světelné efekty; některé návrhy dokonce napodobují strukturu svých špičkových produktů.
Kreativní Dark Design
Kromě toho, že vypadají elegantně, temné návrhy webových stránek mohou také vyvolat emocionální reakce než standardní návrhy světla, což je ideální pro kreativní projekty. Podívejme se na některé příklady možných tvůrčích návrhů.
The stránky níže má velmi málo obsahu, ale má jedinečné rozložení a tmavé barvy pro hloubku. Tmavé pozadí jsou ideální pro weby s velmi malým obsahem .
A protože vyžadují více bílého prostoru, návrhář má více prostoru pro práci.
Grunge web design přichází v mnoha formách, a protože grunge je "tmavý a špinavý", tmavé pozadí jsou jednou z těchto forem.
Tmavé grungey vypadají jako Trozo Zdá se, že porušují všechna pravidla: zaneprázdněné textury, přeplněné rozložení a široká škála barev. A přesto tento web stále funguje. Jak je to možné?
S tolika spletitými prvky, s nimiž můžete pracovat, může být návrh grunge pro začátečníky komplikovaný. Co dělá tohle, je jeho organizace .
Pozadí má jasně rozložené bloky, které řídí oko uživatele a pomáhají rozdělit obsah na zvládnutelné části.
Za druhé, má tunu bílého prostoru . Pozadí může být texturované, ale opakovaný vzor je uživateli viděn jako bílý prostor, což pomáhá zjednodušit design.
Tento bílý prostor je nejvíce viditelný nalevo od loga, pod navigací a po pravé straně.
Dokonce i mezi "Exhibit 01" a "Exhibit 02" je více bílého prostoru, než by se obvykle nacházelo na takových webových stránkách.
Bílý prostor vyrovnává věci, přestože nevypadá jako bílý prostor, protože má strukturu . Minimální text a několik sekcí (pouze tři) také přispívají k tomuto vzhledu jednoduchosti.
Návrh designu Drew Wilson rozhodně porušuje pravidlo používání minimálních barev. Stále funguje, protože zářivě zafarbená záhlaví je jedním z mála rysů v tomto řídkém designu, takže nic není příliš silné.
A na tmavém pozadí je hlavička vypadat ještě jasnější a výjimečnější.
Tmavé pozadí se často používají k tomu, aby světelné efekty a jasné barvy vynikly více .
Takové návrhy jsou překvapivě kreativní výjimkou z pravidla minimální barvy. Pravidlo by však mělo být porušeno opatrně: vyvarujte se rušivých přechodů, textur a barvy dále na stránce.
Obalování nahoru
Tmavé pozadí dávají elegantním a kreativním pocitům návrhy webových stránek, což je ideální pro některé portfolia, ale nejsou vhodné pro každou stránku.
U větších webových stránek, zejména těch, které jsou pro lidi s poruchami vidění a jinými postiženími, jsou tmavé vzory ne-ne, dokonce se stylem přepínačem.
Doufejme, že až přijde čas, že potřebujete navrhnout webové stránky s temným pozadím, pomohou vám tyto tipy a strategie.
Napsáno výhradně pro WDD Kayla Knightová .
Existuje mnoho dalších technik a strategií pro zlepšení tmavých návrhů webových stránek, proto prosím sdílejte ty, které jste získali v sekci komentáře níže.