10 Pravidla webového designu, které můžete přerušit
Vzhledem k tomu, že se web design a design obecně vyvinuly, byla zavedena pravidla, která zajistí konzistentní a použitelné návrhy.
Některá z těchto pravidel byla vytvořena jednoduše proto, že tvůrci webových stránek zneužívali některé zásady bez ohledu na své uživatele.
Tato pravidla však nikomu nevynucují a v případě potřeby je třeba je rozbít, zvláště když je rozbití povede k ohromujícímu návrhu.
V tomto článku uvádíme 10 pravidel, které můžete přerušit, pokud vyhovují vašim potřebám návrhu.
Pravidlo č. 1: Nezobrazovat horizontální posuvník
Značný počet myší nemá horizontální kolečko myši. To dělá to nepříjemné procházet vlevo nebo vpravo, když obsah webové stránky se rozkládá po stranách prohlížeče.
Může to být nepříjemné, že musíte přenést kurzor myši dolů do dolní části okna a posunout posuvník nad ním, aby viděl slovo nebo dva, které leží za viditelnou oblastí stránky. To znamená, že zde jsou některé dobře navržené stránky, které posunují posuvník na efektivní práci.
Beneku
Beneku pomocí jazyka JavaScript změní směr posouvání kolečka myši z vertikálního na vodorovný. Každá položka v portfoliu společnosti Benek je rozdělena do vlastního sloupce. Místo má překvapivě čerstvý pocit a hladce proudí.
Shoe Guru
Shoe Guru dostane se pryč s horizontálním rolováním, protože využívá způsob, jakým se lidé dívají na boty. Lidé se na většině produktů dívají shora dolů, ale boty jsou jiné. Lidské oči se obvykle pohybují po celé délce boty. S využitím tohoto návyku ve svůj prospěch, Shoe Guru dělá design svých webových stránek stejným směrem, takže je pohyb přirozeným.
Stephane Tartelin
Stephane Tartelin používá vodorovný posuvník, aby jeho dílo vypadalo jako v umělecké galerii. I když vertikální kolečko myši nefunguje tak, jak je to v příkladech uvedených výše, efekt funguje překvapivě dobře. Mohli byste dokonce tvrdit, že efekt by se snížil, kdyby kolečko myši bylo znovu zakódováno pro horizontální posouvání.
Grafická terapie
Zatímco Grafická terapie na své stránce nezobrazuje vodorovný posuvník, stále umožňuje horizontální posouvání kliknutím a přetažením obrazovky. Grafická teorie používala vodorovnou navigaci, protože všechny její obrázky mají stejnou výšku, ale nemají stejnou šířku. Horizontální navigace napomáhá průtoku hladce.
Horizontální cesta
Horizontální cesta je ukázka webových stránek, které používají horizontální posouvání. Výstřední grafika je krásná a tato stránka je jedinečná, pokud jde o galerie CSS.
Pravidlo č. 2: Použití minimálního počtu znaků písma
Příliš mnoho písem se obvykle vzájemně konfliktuje a překvapuje diváka. Každé písmo má osobnost a příliš mnoho osobností může způsobit poruchu.
Chcete-li efektivně používat více než jen několik písem, musí být design velmi textově orientovaný a zbytek návrhu musí být relativně tichý. Zde jsou některé příklady stránek, které používají tento pocit konfliktu a nepořádek pro zapojení uživatele.
Odkazy LA
Odkazy LA používá mnoho písem v nelineárním uspořádání pro vytvoření pocitu energie. Stránka je obtížně čitelná, ale přitahuje uživatele. Rovněž stojí za zmínku, že žádné písmo není příliš dekorativní; každé slovo je čitelné, udržuje design čistý a čistý.
Geo Elements Design Studio
Použití palety písem obvykle přináší pocit energie a chaosu, ale Geo Elements Design Studio webová stránka je velmi otevřená a čistá. Každá písma má svůj vlastní prostor, takže divák jej nespojuje s jiným písmem. Obraz oblohy v pozadí pomáhá posílit pocit otevřenosti.
Richard Stelmach
Na rozdíl od posledního příkladu, Richard Stelmach tlačí různé písma blízko sebe. Návrh funguje, protože pouze jedno písmo nevypadá ručně kreslené a ostatní dva dobře pracují s obrázkem. Ručně kreslená písma obvykle fungují dobře, i když existuje mnoho různých obrysů písma.
Satsu
Satsu zdá se, že má spoustu různých typů písma, ale ve skutečnosti má pouze tři (nikoliv položku portfolia sportovní rady). Všechno opatrně rozdělí, Satsu spojuje určité řádky textu navzájem, i když text může být v různých fontech.
Název loga je v jednom písmu a všechny dva podtituly mají své vlastní písmo, ale divák přirozeně seskupuje tyto tři textové položky dohromady. Satsu je schopen vytvářet energii bez toho, aby strkal stránku osobnostmi.
Pravidlo č. 3: Nepoužívejte příliš mnoho barev
Strach z toho, že jde příliš daleko s designem, je to, co odděluje profesionály od nováčků a nováčků od toho, co je nevědomý. Zbytečné pokusy učinit jejich návrhy co nejvíce extrémně, se slovy v ohni, blikajícím textem a co nejvíce barev.
Rookies chtějí, aby jejich návrhy byly jemné a snadné na oko, ale nakonec jejich vzory mohou někdy vypadat bez života. Následující oko-příjemné návrhy jsou někteří opravdoví profesionálové, kteří tlačí hranice.
Matt Mullenweg
Matt Mullenweg krásně barevný design vypadá jako malba akvarelu (stránky byly aktualizovány od doby, kdy byl tento článek napsán). Všechny barvy v pozadí by uchopily někoho za pozornost.
Obecně platí, že dobré vzory s tónovou barvou budou mít tyto barvy v pozadí s jednodušší paletou vpředu. Čtení textu je velmi obtížné, když se děje příliš mnoho věcí.
Travic Isaacs
Travis Isaacs design má barevný vertikální gradient v pozadí, díky němuž se design zdá být barevný v celém textu. Tato stránka je jasně růžová jako barva odkazu, což je skvělá volba pro návrháře, kteří chtějí vytvořit barevný efekt.
James De Angelis
James De Angelis ' webové stránky ukazují, že text může být barevný, aniž by se objevil jako nováček. Konstrukce je velmi volná a slogan je určitě v centru.
Pravidlo č. 4: Zjistěte cíl vašeho webu
Něco, co se do uší mladých designérů skutečně zaplní, je, že návrh by měl divákům okamžitě říct, na co se dívají, než si přečtou nějaký text.
Uznání značky je pro velké korporace důležité, ale někdy menší muži musí být trochu chytřejší, aby získali pozornost diváka. Zadržování informací může intrikovat diváka a "dráždit" lidi, kteří se chtějí dozvědět více.
Použití této techniky pro web design může výrazně zvýšit dobu, po kterou uživatelé zůstávají na vašem webu.
Cetrotrees
Na většině portfolií dnes se freelancer nebo společnost obvykle představují a vysvětlují svou práci. Cerotreees místo toho vlevo ukládá několik nejasně označených odkazů a ukázky své práce na pravé straně, ale nic, co vysvětluje, není vysvětleno.
Vzduch tajemství obklopujícího lokalitu přitahuje uživatele k pobytu.
Poslední mixtape
Poslední mixtape je dalším portfoliem, které ukazuje svou práci a nic víc. Takové návrhy vyzařují pocit extrémní důvěry. Nikdy se nesnaží prodat sebe; oni jen očekávají, že uživatel bude odfoukl a přijde prosí o smlouvu.
Peter Pearson
Použití úvodní obrazovky je dobrým způsobem, jak zpomalit myšlenkový proces uživatele a inspirovat je, aby kopali hlouběji. Cílem úvodní stránky je obvykle rychle vysvětlit stránky pomocí fotografií nebo krátkého textu.
Ale v Peter Pearson je případ, jeho cílem je vyvolat pocit. Velké obloze a postříkaný textový efekt dělají skvělou práci při vyvolávání zvědavosti, protože se tyto věci obvykle neobjevují společně. Tento web také dělá skvělou práci v pokračování emoce vytvořené splash stránky do skutečného obsahu.
Boční posouvání a animované linky, které následují uživatele, jsou skutečně účinné.
Piepmatzel
Skvělý způsob, jak se dostat k jazykové bariéře, není použít žádné slovo. Piepmatzel je CSS galerie a lidé, kteří již předtím viděli galerii CSS, ji pravděpodobně rozpoznají jako jednu hned.
Ti, kdo nemají, mohou být natolik zajímavý, že dávají několika miniaturám kliknutí v naději, že vynalezli vzorek. Malé množství textu v dolní části stránky pomáhá při třídění a je nadbytečné.
Pravidlo č. 5: Navigace by měla být snadná
Navigace by neměla být překážkou místa. Uživatelé by měli rychle najít to, co chtějí. Někdy však neintuitivní a přitom poutavá navigace může uživateli pomoci cítit připojení k webu a to, co propaguje.
Alvin Tang
Jak již bylo zmíněno v předchozí části, důvěra se přenáší, když se portfólio nevyjadřuje. Toto je případ Alvin Tang fotografie portfolia. Při prvním příchodu na stránky uživatel okamžitě nerozpozná slova, která vidí jako odkazy.
Tato nejistota by je měla vybídnout, aby se trochu pokousali. Přesouvání myši nad slovem odhaluje, že je to opravdu odkaz a po kliknutí na něj se načte nádherná fotka. Tato fotografie přitahuje uživatele k pokračování v procházení.
Chcete-li zobrazit další fotky, uživatelé kliknou na tlačítko "Zpět" v prohlížeči (něco, co většina lidí chápe) a poté klikněte na další odkaz. V konstrukci není ruční držení a funguje to velmi dobře. To není konvenčně "nádherný design", ale přináší přesně to, co potřebuje.
Kasulo
Kasulo 's navigace není strašně těžké zjistit, ale průměrný uživatel nemusí přesně vědět, co má dělat při příchodu na místo. Po prvním kliknutí se však všechno stane zřejmým.
Uživatel naviguje v portfoliu ve 3-D stylu a poslední položky se objevují nejblíže začátku. Použití kolečka myši je ještě zábavnější.
Marcio Kogan
Marcio Kogan web je dalším příkladem skvělé navigace, která není okamžitě zřejmá. Pokyn "Přetáhněte mě" je těžké odolat, a jakmile to uživatel učiní, jsou na cestě k plavbě portfolia. Náhledy myší jsou malý detail, ale opravdu působivé.
Ceranco
Pokud by se zákazník zeptal návrháře, aby vytvořil své stránky ve 3D, jako většina z nich, většina designérů se tiše rozesmála, zhluboka se nadechla a pak pomalu vysvětlila, proč by to byl špatný nápad .
Zatímco web pro Ceranco není to přesně 3-D střílečka, mohlo by to být snadno zaměňováno za nějakou indie počítačovou hru. Takové stránky jsou skvělé pro zapojení uživatelů. Zatímco dlouhá doba načítání a špatná optimalizace pro vyhledávače to činí méně než ideální pro většinu projektů, rozhodně stojí za to druhou myšlenku.
Pravidlo č. 6: Použití různých barev pro text a pozadí
Toto pravidlo nemusí být napsáno všude, ale mnozí nováčci se tak obávají, že text budou nečitelný, protože nepovažují za použití stejné základní barvy jak pro pozadí, tak pro samotné písmo. Můžete sledovat některé jednoduché techniky, aby podobné barvy fungovaly.
Linksys
The Linksys místo je čisté, protože má jeden modrý pro všechny jeho odkazy, přestože barva pozadí je různé odstíny modré. Zatímco riziko a možná ne největší barevné rozhodnutí, to funguje.
Brad Colbow
Brad Colbow je design je podobný jako Linksys kvůli modrému textu na modrém pozadí. Modrá na modré je obtížně vytahovat, zvláště s tolika různými blues na celém webu.
Powerset
Zatím v této části jsme viděli pouze modré stránky, protože modrý text je pro lidské oko nejtěžší, a tak čitelný modrý typ je vždy působivý. Pokud textový efekt funguje modře, bude s největší pravděpodobností pracovat v jakékoliv barvě.
Powerset používá styl písma pro své písmo, aby vytvořil 3-D efekt, který efektivně odděluje text od pozadí.
Umělec v designu
Umělec v designu má nejen zelený text na zeleném pozadí a žlutý / béžový text na žlutém pozadí, ale má text přímo na fotce.
Zatímco některé jednotlivé dopisy mohou být těžko čitelné, slova jako celek zůstávají čitelná. Tento typ efektu by měl být téměř vždy v centru projektu.
Horacio Bella
Horacio Bella využívá dalšího 3-D efektu svého portfolia. V tomto případě se zdá, že dopisy vyskočí spíše než aby byly roztrženy dovnitř. Bez tohoto účinku by se čitelnost výrazně snížila. Dalším dobrým efektem, který se zde používá, je těsné ohýbání dopisů, které dále zlepšuje čitelnost.
Pravidlo č. 7: Nepokládejte animaci způsobem vašeho obsahu
Vážně, nezobrazujte malé reklamy Flash přímo tam, kde uživatel čte. Totéž platí pro ty průzkumné schránky, které se zobrazí vždy, když je uživatel uprostřed věty. Uživatelé nemají rádi rozptýlit, když jsou v polovině věty. Pokud ...
Je opravdu těžké, aby o tom malého pavouka nebyl okouzlen ABA webu. Design je čistý a ačkoli pavouk je rozptýlení, je to v pořádku. Zatím se domnívám, že tato stránka je jedinou výjimkou z pravidla.
Pravidlo č. 8: Použití bezpečných písma
Přestože techniky nahrazování písma jsou stále mladé, již mají velké šplouchání. sIFR byl první a nedávno Cufón a Typefasce.js se objevily.
Diseñorama
Na Diseñorama červený text "Recientemente" je volitelný. Jedna nevýhoda je, že pokud se stránka okamžitě nevrátí, uživatel uvidí krátce původní písmo.
Další nevýhodou je, že pokud má uživatel buď JavaScript nebo Flash vypnutý, budou vidět pouze původní písmo. Všechno, co je považováno, je stále dost cool. Doufejme, že je to náhled toho, co přijde v příštích několika letech.
Cactuslab
Cactuslab také používá sIFR pro modré podtitulky (například "Zimní práce"). Ačkoli sIFR je nejkomplikovanější z technik nahrazení písma, text může být kopírován a vložen, což mu dává velkou výhodu oproti dvěma jiným technikám.
Pravidlo č. 9: Nemáte splash / vstupní stránku
Mnoho designérů má stejné staré diskuse se svými klienty o tom, proč nástřiková stránka není dobrý nápad. Společnost Google má tendenci takové stránky snižovat a zpomalí uživatele, aby získal obsah, který po nich pořídí. Ale mohou být neuvěřitelně krásné a inspirativní, pokud se udělají správně.
Gloss Postprodukce
Účel vzorku portfolia, který se zobrazí na úvodní stránce Gloss Postprodukce je získat emotivní reakci od uživatele.
Při každé návštěvě je načtena náhodná fotka z portfolia. Klepnutím na fotku ji zvětšíte a umístíte na místo mezi ostatními portfoliovými díly na webu. Efekt měřítka a pohybu poskytuje pokračování a pomáhá přenášet emoce uživatele na zbytek práce společnosti.
Issa London
Když je web v aplikaci Flash zcela dokončen, může být načtenou částí sloužit jako úvodní stránka. Když uživatel vidí nakládací lištu, buď zavřete stránku a jděte někam jinam, nebo přepněte na jinou kartu a procházejte jinam, zatímco čekají.
Jakmile se stránka načte, je nejlepší počkat, než se uživatel vrátí před spuštěním. v Issa London je to brána dokonalá metafora, která říká, že stránka je připravena a uživatel může vstoupit.
Když uživatel klepne na bránu, otevře se brána a objeví se různé zobrazené modely. Použití brány na splash stránky je skvělý návrh nápad, protože při vstupu, uživatel se cítí zapojený.
Pravidlo č. 10: Nepoužívejte tabulky
Každý webdesignér, který používá tabulky ve svých návrzích, bude okamžitě nazývat nováčkem zkušenými návrháři. Tabulky se ve všech prohlížečích nezobrazují stejně a zdrojový kód může vypadat neuspořádaný, ale přinejmenším budete vědět, co s nimi máte. Zde jsou některé příklady návrhů, které obsahují tabulky.
Tato tabulka je lehce viditelná, ale mezi oběma židlemi je zastrčená. Je to hezký malý postranní stůl, ale smutně nepomáhá designu tohoto webu.
Tabulky jsou na pozadí této konstrukce Práce na Play , ale udržují notebooky a další položky pracovníků v dosahu. Bez těchto stolů by se místnost cítila mnohem prázdnější a fotografie na pozadí by neměla stejný účinek.
Přestože tento design většinou obsahuje židle, v pravém horním rohu miniatury se objeví hezký malý stůl. Vypadá to, že na něm sedí hrnce.
Pokud jde o designy s tabulkami, je to jedna z nejlepších. S těmito dvěma tabulkami, které jsou v této animaci Flash, je jim věnována velká pozornost. Tato stránka by měla být na každém návrháři seznamu skvělých návrhů, které používají tabulky.
Porušit pravidla!
Přerušení pravidel je v pořádku, když návrh vyžaduje. Mnoho návrhových řešení, které jsou zde popsány, by nebylo považováno za průměrného designéra. To odděluje skvělé návrháře od průměrných.
Ti, kteří jsou odvážní, aby se postavili proti tomu, co se učili, vždy vyniknou.
Napsal výhradně pro WDD bt Eli Penner. Spravuje vlastní webové stránky na adrese SleepyHero.com
Přerušíte nějaká pravidla ve svých webových modelech? Proč nebo proč ne? Sdílejte s námi vaše názory ...