Co by mělo být v rozvržení webu: podvodník pro designéra

Návrhář někdy poskytuje zákazníkovi rozložení, které mu něco chybí. Návrháři, backende a další techničtí specialisté, samozřejmě, mohou chybějící prvek podle svého uvážení vyrobit, ale nebude se starat o vzhled. Namísto pečlivě vybraných odstínů přidají své vlastní barvy, vytvoří standardní písma a veškerá snaha designéra vyjde nazmar.

< p> Rozvržení lze také odeslat zpět k revizi. Proto je lepší, aby návrhář měl po ruce seznam potřebných prvků a prohlédl si ho před přenesením rozložení do rozložení. To vám umožní dělat vše najednou, nevrátit se k projektu několikrát a nebát se, že se něco při sestavování stránky pokazí. Ačkoli něco pravděpodobně ještě bude fungovat.

Upozornění, v tomto článku je mnoho ilustrací.

Obecná doporučení

Než budeme hovořit o konkrétních prvcích, stojí za zmínku hlavní body, na které by designér neměl zapomenout.

Fonty

Musí být připojeny k rozložení, jinak si vývojář stáhne některé špatné a zničit design.

Vektorové objekty

Překvapivě by vektorové ilustrace měly být vektorové a mock-up. Pokud do rozvržení vložíte obrázek jiného formátu, bude tam vypadat dobře, ale během testování bude mýdlový. Abyste tomu předešli, měli byste vždy použít vektor: například připojte ikony SVG.

Mřížka

Nejlepší je neodstraňovat mřížku z rozložení, protože je vhodné navigovat podle něj. Pokud existuje mřížka, je snazší rozdělit rozložení na části, vytvořit sloupce požadované šířky. Pak je v responzivním rozvržení méně chyb a web jako celek vypadá úhledněji.

Požadované prvky pro web

V rozvržení jakékoli webové stránky by měly být věci. Ale z nějakého důvodu designéři na některé z nich často zapomínají. Pokud je neděláte vůbec, bude stránka vypadat přinejmenším divně. A pokud je necháte na uvážení návrháře rozvržení – opět – existuje vysoká pravděpodobnost, že se tyto prvky z obrázku dostanou.

Strana 404

Je třeba nahraďte stránku, což z nějakého důvodu není důvod: produkt byl odebrán z prodeje, odkaz se ukázal jako netopýr, do adresy se vloupal překlep, uživatel se zapomněl přihlásit a následoval přímý odkaz z záložky atd.

404 je nejpopulárnější chybový kód. Kromě toho existuje mnoho dalších stavů, ale pro zjednodušení práce se 404 stala univerzální stránkou pro zpracování chyb.

Pokud nezapomenete na 404, můžete snít a udělat z této nejtypičtější stránky kreativu. Můžete například přidat interaktivitu.

prázdná stránka

Pokud vyhledávač nebo filtr nedal žádné možnosti, otevře se stránka s textem z kategorie „Ve vybraném období nejsou žádné záznamy“. A také o tom musíte předem přemýšlet.

Některé weby však i v případě neúspěšného vyhledávání konkrétně zobrazit alternativní možnosti: možná nebudou žádné prázdné výsledky hledání.

Stránka s výsledky vyhledávání

U vyhledávacích dotazů návrháři často kreslí pouze ikonu a samotné rozevírací vyhledávání nebo jeho výsledky jsou zapomenuty. Pokud ale nejsou hotové, vypadá finální verze přinejmenším divně. Takto stránka vypadá, pokud je vykresleno rozevírací vyhledávání:

A takto stránka vypadá, pokud existuje žádný rozevírací seznam:

Obrázek ke sdílení

Mluvíme o obrázku, který se objeví v sociálních sítích nebo v chatu místo textového řetězce, když uživatel někomu pošle odkaz. Mimochodem, různé sociální sítě zobrazují tento blok různými způsoby. Chcete-li nastavit obrázek a titulek, potřebujete značku Open Graph.

Stránka s textem

To může být celou stránkou blogu nebo samostatným článkem. Nezkušení designéři často kreslí jednu stránku s textem podle příkladu zákazníka, ale chybí jim skutečnost, že texty jiných stránek mohou obsahovat odlišný obsah. Proto musíte promyslet všechny možné prvky:

• úvodní text;
• citace a dlouhá citace s titulkem a fotografií;
• video (a titul, je-li potřeba);
• obrázek (a titul, pokud je potřeba);
• odkazy;
• posuvník;
• tučný text;
• seznamy (číslované a s odrážkami), vnořené seznamy;
• blok sdílení.

volitelné prvky

Pomáhají uživateli procházet web a zvyšují jasnost. Takové prvky nejsou obsaženy ve všech projektech, ale pokud mají být, musí být také vykresleny. Zde je seznam prvků, na které mohou návrháři zapomenout.

Styly pro mapu v samostatném textovém souboru

Pokud chcete místo běžné mapy udělat něco nestandardního, můžete použít službu Snazzy maps. Musíte si jen ověřit u klienta, zda si ke kartám zakoupí licenční klíč. Pokud ano, měli byste vývojářům předat styly jako soubor JSON.

Zvýraznění aktivní položky v nabídce

Toto je také nepravidelný prvek, ale je lepší jej poskytnout starat se o návštěvníky stránek. To uživateli umožní zapamatovat si, na které stránce se právě nachází.

Drobečková navigace

Jsou zvláště užitečné na velkých webech nebo webech se složitými strukturami sekcí. Například když chcete ze stránky přejít přímo do určité kategorie.

Můj účet

Sem patří přihlašovací stránky, stránky s nastavením a zadanými údaji, stránky s předvolbami (oblíbené produkty atd.).

stránka navigace

Pro blok zpráv během rozvržení stačí dva nebo tři bloky, ale na skutečné webové stránce mohou být takové bloky tisíce. Nezapomeňte tedy na vykreslení stránkování a na tlačítko Zobrazit více.

tlačítko Nahoru

Je to obvykle se kreslí pro dlouhé vstupní stránky a katalogy produktů, aby se uživatel mohl pohodlně vrátit na začátek stránky.

Filtry

Pokud nějaké existují, musíte pečlivě zkontrolovat všechny možné podrobnosti.

Zaškrtávací políčka, přepínače – musíte vzít v úvahu zvláštnosti všech typů filtrů.

Tlačítko „Resetovat/vymazat vše“ „nebo resetovat jednotlivé položky.

Rozšířený seznam s položkami.

Blokovat s počtem produktů :

Zpracování chyb nebo nápovědy k polím:

Favicon

Toto je malý obrázek vedle názvu stránky na kartě. Aby se správně zobrazoval ve všech prohlížečích a na všech zařízeních, musíte si připravit obrázek v různých velikostech a formátech. Svůj favicon můžete také nakreslit pro různé stránky stejného webu.

Pahýly obrázků

Pokud fotografie osoby nebo produktu nejsou nahrány, musí existovat nějaký druh obrázku – zástupný symbol.

Modální Windows

Co se stane po odeslání formuláře:

• „Děkujeme za vaši žádost“
• „Vaše přihláška nebyla odeslána, došlo k chybě“

Druhé okno je vidět jen zřídka. Pokud se například serveru při odesílání něco stalo a nemohl zpracovat požadavek uživatele.

Kalendář

Pokud vytváříte kalendář, měli byste navrhnout několik stavů ::

• aktuální datum;
• vybrané datum;
• interval mezi vybranými daty;
• najeďte myší.

Pokud jeden z nich není proveden, uživatel jednoduše nebude schopen procházet kalendář.

sada uživatelského rozhraní

Toto je hotová sada grafických prvků. Pokud je návrhář rozvržení potřebuje znovu, nebude je muset hledat v celém projektu, ale můžete se okamžitě obrátit na Ul kit. Pro jiného návrháře rozložení bude snazší to zjistit, pokud chce klient v průběhu času shromažďovat nové stránky na základě těch stávajících. Vytvoření sady uživatelského rozhraní je pro návrháře dobrý tón. Sada uživatelského rozhraní může obsahovat tlačítka, strouhanku, tvary, odkazy, výplně, pozadí, dekorativní pseudo prvky (například pruhy),

Design stránek zahrnuje mnoho malých detailů a všechny je obtížné zohlednit. I když se zdá, že je rozvržení připraveno, později se může ukázat, že nějaká drobnost chyběla: zapomněli nakreslit tlačítko, přidali obrázek ve špatném formátu atd. Proto je po celou dobu práce pro designéra lepší mít před očima seznam, pomocí kterého můžete zkontrolovat, zda je vše hotové. Návrhář tedy na nic nezapomene a připraví rozložení úplně najednou. A návrhář rozvržení nemusí sám přidávat chybějící prvky a rozbíjet design.

Abyste lépe porozuměli návrhářům rozvržení a hned udělali vše, absolvujte kurzy rozvržení Můžete začít s bezplatnými výcvikovými simulátory na základy HTML a CSS nebo „HTML kurz“ a CSS. Profesionální rozvržení webových stránek “. A díky promo kódu SKUCHNO bude cena za jakýkoli profesionální kurz ještě příjemnější.

Kterákoli z možností vám pomůže mluvit stejným jazykem s vývojáři a neztrácet čas přepracováním každého bloku v rozložení . A tam to není daleko od frontendu.

Na článku se pracovalo:

Text, ilustrace Úpravy, ilustrace Hlavní redaktor