Skvělé webové stránky se zdají vždy kombinovat skvělý design s velkým kódem. Vzhledem k tomu, že budování webových stránek je poměrně jednoduchým úkolem, najdete mnoho lidí, kteří se učí HTML a CSS a zjistí, že pokud se mohou naučit, pak mohou navrhnout libovolné webové stránky, které chtějí. Zatímco z technického hlediska mohou často zjistit, že existují některé klíčové chyby, které dělají, protože nechtějí věnovat čas, aby se skutečně dozvěděli o designu.

Programátoři jsou projektanti samy o sobě, ale vytvářejí kód a skvěle navržené systémy. Chcete-li navrhnout něco vizuálního, je zcela jiné a jen proto, že máte dobré oko pro design, neznamená to, že máte dobrou mysl, abyste ho mohli použít.

Protože tolik programátorů má osobní projekty, které obvykle znamená, že musí vytvářet vlastní webové stránky. Pokud jste externí kodér, jedním z největších aktiv, které můžete mít, je znalost celého procesu vývoje webových stránek od začátku do konce, a to včetně návrhu.

Zde je osm chyb, které vývojáři často vidí při aplikaci návrhu na webové stránky.

1. Vím, jak dobrý vzhled vypadá

To může být obtížné oddělit oko pro design s schopností navrhnout. Je to velmi podobné lidem, kteří se mohou na módu podívat a řeknou vám, co vypadá dobře, ale nemůžou se opravdu oblékat stejným způsobem.

Skvělé designéři prostě vědí, jak dobrý design je. Vědí, co bude fungovat a co nebude fungovat mnohokrát, než dokonce vyzdvihnou tužku nebo otevře Photoshop. Často je tomu tak proto, že strávili léta, kdy se vrhli do různých vzorů a zkoušeli sami návrhy. Stejně jako žádný umělec nemůže vyzvednout tužku a nakreslit něco skvělého poprvé, žádný vývojář by neměl uvěřit, že může vyřadit svůj první design přímo z parku.

Stejně jako by programátor mohl studovat kód jiné osoby, každý může studovat design a začít pochopit, proč to funguje.

Podívejte se na krásné Punchfork můžete vidět, co dělá design tak skvělý.

  • Velké využití obrázků. Obrázky jsou vždy nápomocné při vytváření designu, ale příliš mnohokrát se návrháři mohou unést s nimi. Obrázky používané na zařízení Punchfork jsou užitečné pro získání zprávy.
  • Pevná mřížka. Velké využití rozvržení mřížky pomáhá oku dostat se do toku.
  • Jednoduchá typografie. K dispozici jsou fonty, které by měly být použity na webu a fonty, které by měly být používány velmi, velmi šetrně na webu (Papyrus, Comic Sans atd.). Není nic špatného držet se s Gruzií a Helvetikou za design, protože pracují, když je to správné.

Existuje mnoho dalších částí designu, které jsou tak nádherné. Když se setkáte s designem, který se vám líbí, věnujte si čas studiu jednotlivých prvků, ale také přiznejte, jak se hodí do celku. Jeden skvělý prvek designu nedává celý návrh skvělý.

2. Výběr barev

Výběr barev může být bolest. Nenávidím, že musím vybírat barvy, protože existuje tolik, z čeho si můžete vybrat. Z nějakého důvodu většina vývojářů má tendenci držet modrou a bílou paletu. Možná proto, že je používán všude, nebo jsou to výchozí nastavení prohlížeče, ale skvělý design může obsahovat řadu barev. Naštěstí pro nás jsou lidé, kteří mají problémy s barevnými barvami, tam je spousta nástrojů, které nám pomohou sestavit pár nádherných barevných kombinací.

COLOURlovery je skvělá komunita, kde lidé vytvářejí své oblíbené palety barev a sdílejí je. Můžete procházet, ukládat a hlasovat pro své oblíbené palety a barvy. Při více než jedné příležitosti jsem se obrátil na COLOURlovers, abych prošel a zachránil si den výběrem barev.

Při výběru palety barev nezapomeňte držet krok, který vyhovuje náladě vašeho webu a jeho obsahu. Nezvolte paletu jednoduše proto, že ji máte rádi. Oranžová a černá nemusí být nejlepšími barvami pro stránky kolem pojetí lásky, například.

Zřídka budete muset použít více než 3-4 různé barvy a pokud se rozhodnete, že potřebujete ospravedlnit svoji volbu.

3. Uprostřed

Může být velmi lákavé zaměřit nadpis. Vypadá skvěle v novinách, ale zřídka bude fungovat dobře na webu, pokud nebude vše centrováno. Víme, že levý text vypadá jako profesionální a pracuje s přirozeným prouděním očí, takže proč jdou vnější linie?

Upřednostňovaný text se nejlépe používá pro nadpisy a krátké čáry textu. Uživatelé je mohou snadno číst, protože řádky jsou krátké, skenovatelné a nepotřebují opakované pohyby očí. Zvýšený text může také svým uspořádáním poskytnout estetický vzhled v symetrickém formátu. Toto funguje pro text, který se vztahuje k vycentrovaným obrázkům. Pokud jsou vaše snímky vlevo nebo vpravo, měli byste text zarovnat tak, aby byl v souladu s rozvržením.

Centrovaná titulky pracují v novinách, protože text je rozdělen do sloupců, takže nadpis teče po celém příběhu. Pokud se jedná pouze o jeden sloupec textu, měli byste se držet levého řádku.

4. Font smorgasbord

Když nejste ponořeni do světa typografie, Arial vypadá jako Helvetica a Gruzie připomíná Times New Roman. Víte, že tam jsou další písma, jako je Comic Sans, ale nevidíte důležitost placení za písmo, když můžete velmi snadno použít to, co máte k dispozici.

S prostředky, jako je Typový typ ačkoli výběr písma se stal podivně podobný výběru barev. Může trvat několik dní výzkumu, abyste našli tu správnou kombinaci, kdybyste mohli snadno použít základní písmo a skončit s ostatními.

Nepoužívejte přes palubu fonty. Stejně jako barvy omezený výběr často funguje nejlépe. Pokud jde o písma, může být jedno nebo dvě různé písma spousta pro vytvoření krásného designu. Pamatujte si, že můžete psát spoustu různých věcí. Můžete je kurzívit, zvýraznit je, podtrhnout je, v malém písmu nebo v malých písmenách.

5. Zabalte informace

Když jste vývojář, čím více informací můžete mít na stránce, tím lépe. Když kód jsem chtěl dělat na více obrazovkách, protože mi to dovoluje mít všechno v pořádku. Bohužel to nefunguje v designu. Neměli byste zaplombovat tolik informací v těsném prostoru, jak to považujete za vhodné, protože návrh se stává nefunkční.

Oko může obsahovat jen tolik informací najednou a pokud je cílem většiny návrhů dokončení úkolu, skrytí je uvnitř dalších milionů informací nepomůže.

Zatímco zaneprázdněné webové stránky mohou být účinné, vícekrát než ne, nejsou. Bílý prostor by měl být vaším nejlepším přítelem. Potřebujete ve svém designu prázdné části, abyste dali důraz na důležité části designu.

6. Žádné otázky

Všichni víme, že tento skvělý pocit vytváření něčeho a vidění v reálném světě. Vzhledem k tomu, že jsme je vytvořili, je zde zaostalé zaostávání, které nás nutí myslet, že je lepší než skutečně. Musíte získat názory ostatních, abyste zjistili, zda je váš návrh účinný, a pokud tomu tak není, můžete najít způsoby, jak je zlepšit. Místo toho se vývojáři domnívají, že nepotřebují žádat o názory ostatních, protože vědí, jak jejich design funguje, takže jim to všechno dává smysl.

Také zjistíte, že když lidé žádají o názor na design, nepožadují kritiku, ale souhlas. Chtějí ospravedlnit rozhodnutí, která učinili, a to není správný přístup. Ptejte se na otázky, které vám skutečně pomohou najít problémy s použitelností, které jste dříve nevěděli. Často se stává, že jste si ve svém vlastním designu uvědomili, že všechno má pro vás smysl, ale pro nového člověka může být váš návrh složitější než Rubikova kostka.

7. Podrobnosti o době stráveném odpady

S velkým designem může být těžké si všimnout malých detailů, které skutečně dělají. Mohly by být tak jemné, že neformální pozorovatel se podívá kolem nich a pokračuje dál. Pro vývojáře mohou malé detaily ztrácet čas, protože nerozumí celkovému nárazu, který může mít stín na prvek.

Malé detaily samy o sobě mají dopad pouze na určitý prvek designu, ale když se všichni shromáždí, máte nádherný design, který proudí. Stránky, jako je Dribbble ukázat, jak velké malé detaily mohou fungovat v širším designu. Nicméně, pokud nejste návrhářem obchodu, přílišné zaměření se na detaily může zpomalit proces více, než byste chtěli. To však neznamená, že byste si neměli být vědomi, jak mohou mít detaily vliv na design.

Jaké další běžné chyby dělají vývojáři, pokud jde o design? Podělte se prosím o připomínky!