Komplexní průvodce navrhováním pozadí v roce 2024

Pozadí webu, kdysi nejdůležitější část návrhu jakéhokoli webu, lze využít mnoha způsoby, aby pomohl vytvořit lepší uživatelský dojem.

Správné vytvoření pozadí je dnes obtížnější, než tomu bylo dříve, a představuje některé nové výzvy, přičemž omezuje některé možnosti, které má jiné pozadí.wise měl by.

Například pozadí v dřívějších dobách by se ve skutečnosti dalo využít jako praktická součást návrhu. Mohli byste na něj dát třeba šipky, abyste nasměrovali divákovu pozornost na něco důležitého.

Důvod, proč se věci změnily, je kvůli potřebě responsive design a rozmanitost různých velikostí obrazovek a typů obrazovek, které lidé mohou používat.

Výsledkem je, že pozadí se dnes stalo méně důležitým prvkem v designu stránek a poměrně mnoho stránek nemá žádné oficiální pozadí.

Jsou pozadí opravdu důležité? Abychom to zjistili, prohlédli jsme 30 nejlepších hodnocených webových stránek (bez opakování) a výsledky jsou velmi zajímavé.

Jak můžete vidět z obrázku výše, weby s nejvyšším hodnocením si s pozadím vůbec hlavu nelámou a nezdá se, že by jim to udělalo sebemenší škodu s ohledem na přijetí uživateli.

To je v rozporu s konvenčním myšlením o designu webových stránek, ale je těžké argumentovat chladnými tvrdými fakty. Je úžasné, že první web na seznamu s pozadím se nespustí, dokud nedosáhnete čísla 10, což je Twittera toto pozadí je viditelné pouze v případě, že nejste přihlášeni.

V top 30 webech za rok 2017 byly jediné weby se správným pozadím:

• Twitter, s fotografickým pozadím (10. místo)
• Živě (Outlook), s jednobarevným pozadím (12. místo)
• NetFlix s pozadím koláže (21. místo)
• WordPress, s jednobarevným pozadím (hodnocení 26^th)
• Bing s fotografickým pozadím (29^th)
• Tumblr s fotografickým pozadím (umístil na 30^th)

Takže pouze 20 procent z 30 nejlepších webů mělo pozadí a ty, které ho měly, byly v seznamu dobře dole.

Jedinou výhodou pozadí webu je, že pomáhá udržovat pocit identity webu na více stránkách, ale protože existují další prvky, které mohou tohoto cíle dosáhnout stejně dobře a možná lépe, není to ve skutečnosti velká výhoda.

Nevýhod je celá řada. Pozadí přináší další výzvy, pokud jde o místo responsivea může vyžadovat častou aktualizaci, aby se zabránilo zastarání.

Další výzvou pro moderního designéra je, že kromě statických pozadí je nyní možné vytvářet také video pozadí. Pokud se rozhodnete pro to druhé, je životně důležité vědět, co děláte, protože pro mnoho uživatelů bude špatně navržené pozadí videa obtěžovat.

S tolika důvody, proč nepoužívat pozadí, se možná rozhodnete jít ve stopách těchto špičkových webových stránek a jednou provždy se zbavit celé myšlenky pozadí. Ale pokud brief trvá na tom, že web musí mít zázemí, co můžete dělat? To se pokusíme vyřešit ve zbytku tohoto článku.

Pozadí by mělo být obsaženo

Obsah musí být vždy ve vrstvě nad pozadím stránky. Pokud prvky stránky neoddělíte do různých vrstev, může vám to způsobit problémy, když je potřeba něco změnit.

Nejlepší je používat tuto separaci vrstev co nejvíce. Je například skutečně nutné logo webu zakomponovat přímo na pozadí? Nejčastěji by bylo rozumnější mít logo v samostatné vrstvě. Tímto způsobem, pokud je třeba aktualizovat logo, může být aktualizováno nezávisle na celém pozadí.

Použití vrstev tímto způsobem pro vás znamená více práce na straně tvorby věcí, ale méně práce na straně údržby. Poskytuje vám také maximální kontrolu, protože věci můžete kdykoli skrýt, přesunout nebo je přimět, aby se chovaly jinak podle vašich potřeb.

Tento obrázek ukazuje ideální strukturu pro šablonu návrhu pozadí:

V každé vrstvě (kromě základní vrstvy) je prostor pro vytvoření dalších vrstev pro ještě větší stupně oddělení, pokud je budete potřebovat.

Čím více stupňů oddělení vytvoříte, tím větší kontrolu můžete získat. Možná máte pocit, že to pro vás v tuto chvíli není důležité, ale často se stává, že se to stane později.

Nejdůležitější je pochopit, že „pozadí“ je vše, co není obsah. Takže text nebo obrázky, které mají být na stránce, ale ne jako obsah, se počítají jako součást pozadí, ale ne každý je takto zařadí.

rámování

V počátcích webdesignu bylo rámování jen jednoduchou záležitostí, jak zjistit, kde by měl být váš obsah ve vztahu k pozadí. V tento den responsive design je však obvykle složitější.

S responsive design, máte pouze dvě možnosti, jak se vypořádat s problémem rámování. První možností je změnit měřítko obsahu a obrázku na pozadí vzhledem k dostupné velikosti obrazovky. To je optimální, když je integrita návrhu nejdůležitějším faktorem, i když to bude poměrně vzácná situace.

Druhou možností je vyřadit části pozadí nebo dokonce celé pozadí v běžnější situaci, kdy je čitelnost obsahu důležitější než integrita návrhu.

Tato otázka „integrity designu“ mimochodem jednoduše znamená, že design vypadá vždy stejně, bez ohledu na to, na jaké obrazovce je zobrazen. Opakem je situace, kdy obsah vždy vypadá (víceméně) stejně bez ohledu na to, na jaké obrazovce je prohlížen.

Použití škálování pro responsiveNess

Když použijete změnu měřítka k udržení jednotného rámování napříč různými typy zařízení a orientací, zachová se integrita vašeho návrhu, ale výsledek stále nemusí být takový, jaký byste očekávali nebo si dokonce přáli, zvláště pokud použijete fotografické pozadí.

Pojďme se podívat na příklad této techniky v akci. Počínaje Samsung Galaxy S5 v režimu na výšku (všimněte si, že tyto obrázky jsou zmenšeny tak, aby se vešly do článku, takže text, který tam vidíte, je skutečně čitelný na samotném zařízení).

Takto to vypadá v režimu na šířku (téměř vždy je lepší držet telefon na šířku pro všechno kromě telefonování, ale lidé stále trvají na tom, aby telefon drželi na výšku.

Jak vidíte, rozvržení je při změně velikosti naprosto v pořádku, i když máte k dispozici pouze 640 x 360 pixelů. Jako další tu máme iPad v orientaci na výšku.

A krajina.

Věc, které si všimnete při použití změny měřítka, je, že mezi různými zařízeními a rozlišeními jsou malé rozdíly, kromě toho, že při zobrazení na výšku může dojít k velkému plýtvání vertikálním prostorem.

Ve skutečnosti by bylo lepší použít různé metody na pozadí a části obsahu, aby se položky nabídky zalomily do mřížky 2×2 namísto toho, aby vždy zůstávaly v rozložení 1×4, ale důvod, proč to tak není, je ten, že není možné předpovědět, kolik vertikálního prostoru bude k dispozici.

Výhoda škálování je tedy tehdy, když chcete zajistit, aby některá komponenta zůstala vždy viditelná, bez ohledu na okolnosti.

Použití fázového skrytí a odhalení responsiveNess

Praktičtější scénář a ten, který většina návrhářů bude chtít většinu času používat, je návrh, kde lze pozadí (nebo jeho části) jednoduše vyřadit, pokud není dostatek místa pro jeho zobrazení, takže obsah webu vždy dostane maximální pozornost.

Zde je příklad rozdílu při použití této metody. Pro ilustraci použijeme stejná zařízení a orientace. První je portrét Samsung Galaxy S5.

Samsung Galaxy S5 na šířku.

Portrét iPadu.

iPad na šířku.

Zde je vidět značný rozdíl mezi zařízeními. Malá obrazovka Samsung Galaxy S5 neumožňuje zobrazení pozadí bez ohledu na to, zda je zařízení drženo na výšku nebo na šířku, a to, co je zobrazeno, je upraveno tak, aby odpovídalo dostupnému prostoru.

Když je stejný web zobrazen na iPadu, pozadí se vždy zobrazí bez ohledu na orientaci, ale v tom, co je vidět, je určitý rozdíl.

Nejlepší koncepty pro návrh pozadí (v pořadí)

1. Plná barva (nebo žádná barva)

2. Fotografický (natažený)

3. Malá dlaždice (dokonalá bezproblémová)

4. Velká dlaždice (dokonalá bezešvá)

Čemu byste se měli vyhnout, je dlaždicování fotografického pozadí, pokud to nelze provést tak, aby to nebylo patrné. Roztažení je obvykle nejlepší pro fotografická pozadí nebo pro jejich omezení v předem definovaném prostoru.

Éra velkého křiklavého pozadí je téměř mrtvá, s výjimkou specializovaných stránek určených pouze k prohlížení na a desktop. Většina pozadí určená pro desktops nebude vypadat dobře při prohlížení na telefonech.

Řešením, které můžete udělat, je nastavit velké množství bodů přerušení v souboru CSS a navrhnout jejdividuální pozadí pro každý bod přerušení, ale jako obvykle máte problém, že dostupný vertikální prostor nelze nikdy vypočítat, i když je znám typ zařízení.

obrázek v záhlaví se svolením Maria Shaninová