Kritérium webového designu č. 80: Nový citlivý web WebAppers
Je čas na další úžasnou kritiku webového designu, kde se podíváme na skutečný web a analyzujeme design. Poukážeme na obě oblasti, které jsou vedeny dobře, kromě těch, které by mohly použít nějakou práci. Nakonec budeme požádáni, abyste nám poskytli vlastní zpětnou vazbu.
Dnešní web je WebAppers, skvělé místo k nalezení open source webových zdrojů. Pojďme skočit a uvidíme, co si myslíme!
Prozkoumejte prvky Envato
Pokud chcete svůj web odeslat jako součást budoucí kritiky designu, trvá to jen několik minut. Za kritiku vašeho návrhu účtujeme 49 USD - podstatně méně, než kolik byste zaplatili konzultantovi, aby se podíval na vaše stránky! Více se dozvíte zde.
O WebAppers
„WebAppers je blog věnovaný každodennímu sdílení špičkových zdrojů s otevřeným zdrojovým kódem pro webové vývojáře a webové designéry. Jako webový designér najdete některé z nejlepších bezplatných ikon, fotografie fotografií, štětce, písma a inspirace designu. Jako webový vývojář najdete také některé z nejlepších komponent Javascript a Ajax, jako jsou modální okna, nabídky, galerie, popisy nástrojů, grafy, doplňky kalendářů a mnoho dalšího. “
Zde je snímek obrazovky domovské stránky:
První dojem
Pokud vás zajímá, zda kritika Design Shacku stojí za to, nemusíte hledat dál než opakující se zákazníci. WebAppers byl vlastně zákazníkem naší 14. kritiky webdizajnu a vrátili se, abychom se podívali na jejich zcela nový, zcela přepracovaný responzivní web.
Moje první myšlenky na nový design jsou velmi pozitivní. Toto není žádná malá aktualizace, vzali web zcela novým vizuálním směrem a opravdu si myslím, že je pro něj lepší. Starý web měl dlážděný pohled, jako by různé shodné zdroje byly svrženy dohromady. Nový design je naopak velmi čistý a profesionální a vychází jako zcela zakázkový kus práce. A reaguje na bootování!
Jsme stále velmi brzy na responzivním vývoji webu, takže můj klobouk jde na kohokoli, kdo se skutečně chopí iniciativy, aby odstranil RWD z pohodlné oblasti teorie a uvedl ji do praxe ve skutečném světě.
Podívejme se hlouběji na design stránek a uvidíme, co funguje dobře a co by mohlo vydržet.
Nové logo
Staré logo WebAppers mělo tento druh rocker 80. let. Byla tam nějaká kočka, nějaké světelné závory; bylo to podivné, ale zábavné.
Vždy jsem však zjistil, že logo je trochu matoucí. Nikdy bych neřekl, že tvary blesků byly zamýšleny jen jako to, nebo jestli to byla snad leví hříva. A co vlastně mělo něco společného s webovými zdroji s otevřeným zdrojovým kódem?
Nové logo má jednodušší přístup založený na textu. Ve skutečnosti miluji vizuální stránku zvlnění „W“, jejíž střed slouží také jako „A“. Je to jen skvělý nápad, který byl docela úspěšně stažen.
Také se mi líbí, že logo jasně uvádí, o čem je celý web. Jakmile načtu domovskou stránku, mé oči se posunou k logu a vím, co mi tato stránka nabízí. To je nesmírně důležité a v těchto kritikách je to až příliš často, že konstruktérovi říkám pravý opak (že je obtížné zjistit, o čem jejich stránky jsou).
Rozložení
Jak jsem již zmínil výše, nové rozvržení je citlivé, a tím myslím, že používá mediální dotazy k přeformátování rozvržení v řadě přednastavených bodů přerušení. Někteří říkají, že „plně reagují“, že místo musí být také postaveno na tekuté mřížce, jako je ta, která je vidět na časopisu Smashing Magazine.
WebAppers se neaplikuje na každou minutu změny v šířce prohlížeče (alespoň do nejmenší iterace), a abych byl upřímný, jak si s tím pohrávám, myslím, že je to v pořádku. Je to stále pozoruhodně flexibilní design, který se dobře přizpůsobuje všem různým velikostem obrazovky, což je mnohem více, než si většina webových stránek může nárokovat.
V široké verzi existují čtyři primární sloupce. Zleva doprava jde o navigaci, primární obsah, postranní panel sekundárního obsahu a reklamu. Oba boční panely byly navrženy tak, aby vypadaly téměř jako zásuvky, které se vysouvají z hlavního obsahu, což je perfektní metafora, protože se zužují, jak se šířka zužuje.
Když zužujeme okno dolů, upustíme reklamní sloupec zcela vpravo. V tomto okamžiku však obsah nezmizí, ale místo toho se reklamy zobrazí nad pravým postranním panelem a tento obsah tlačí dolů. Jedná se o elegantní řešení, které vypadá skvěle a stále udržuje většinu původního obsahu.
Následuje drobný skok, který mírně zužuje hlavní sloupec obsahu. Kontejner se zúží, velikost textu se zmenší a obrázky zmenší svou šířku. Pokud okno ještě více zúžíme, dostaneme nejvýznamnější posun rozložení:
Zde vidíme, že třetí sloupec zcela odpadl a veškerý obsah uvnitř byl skryt. To znamená, že reklamy zcela zmizely (časopis Smashing Magazine dělá totéž) a také postranní panel obsahující oblíbený obsah a vyhledávací pole je pryč.
Můj jediný skutečný problém je, že od tohoto okamžiku se na webu nezdá být prohledávatelný. Jsem vše pro posouvání designu, protože se mění velikost obrazovky, ale funkčnost je jemnější a ke snižování je třeba přistupovat opatrně. Hledání se jeví jako docela primární funkce a pravděpodobně bych byl frustrovaný, že tento úkol nemohu provést na svém telefonu nebo tabletu.
Nakonec se web rozdělí na jednotlivé sloupce s navigací, která se nyní zobrazuje v jednoduché nativní rozbalovací nabídce, která obvykle dobře funguje na mobilních i stolních zařízeních.
Celkově si myslím, že rozvržení funguje opravdu dobře, as výjimkou vyhledávací funkce si nejsem jistý, jestli bych o tom hodně změnil.
Když se podíváme do zákulisí, vidíme, že tomuto projektu pomohl program Twitter Bootstrap, což je hezké, protože stránka vůbec nevypadá jako váš typický projekt Bootstrap pro kopírování / vkládání a dokazuje, že tuto sadu nástrojů můžete použít pod kapotou, aniž byste obětovali. Design na zakázku.
Estetika
Nyní, když jsme diskutovali o tom, jak struktura nebo kosti webu fungují, pojďme se podívat na námrazy na vrcholu. Místo nabývá velmi šedého barevného schématu s jemnými lupínky barvy sem a tam. Těžce využívá atraktivní, minimální ikony a samozřejmě Helvetica jako svůj primární a téměř exkluzivní písmo.
Nejméně oblíbeným aspektem celého tohoto webu je nedostatek kontrastu. Všechno na této stránce má jakýsi monotónní pocit a nic nevyčnívá. Vidím, jak má být ztlumený vzhled pro oči snadný, ale je dost nevýrazný, takže se téměř cítí trochu napjatý.
Řešení tohoto problému je, pokud jde o mě, tak snadné, že zahrnuje pouze nahrazení jediného souboru: texturu pozadí. Popadl jsem tmavou texturu od Subtle Patterns a dal jsem jí testovací běh na webu WebAppers s skvělými výsledky.
Tmavé pozadí dodává webu tolik potřebný kontrast a skutečně zvýrazňuje hlavní obsah tím, že jej posouvá do popředí vaší pozornosti. Je úžasné, jak velký rozdíl může trochu vyladit!
Jednou další maličkou, která mi trochu chybí, je stínový efekt na názvy článků, jak je vidět na obrázku níže:
Jednou rukou si myslím, že je to skvělý efekt. Na druhé straně si myslím, že to text značně ztěžuje čtení. Možná, že pokud by byla neprůhlednost stínů jednoduše snížena, bylo by to méně rušivé.
souhrn
Domnívám se, že redesign produktu WebAppers je určitě úspěch. Tato stránka je krásnější než kdy jindy a podnikla pěkný skok směrem k agnostice zařízení. Snadno se používá, branding je logičtější a prezentace obsahu je opravdu pěkná.
Můj velký problém je nedostatek vizuálního kontrastu, problém, který úplně zmizí se zahrnutím tmavšího pozadí. Jsem také skeptický vůči rozhodnutí upustit od funkce vyhledávání v užších verzích rozvržení. Nemyslím si, že návštěva webu v mém iPhone by nutně znamenala, že jsem ztratil schopnost prohledávat.
Kromě těchto problémů je to však skvělé místo. Nezapomeňte se zastavit a dát mu zkušební jízdu. Myslím, že se vám bude líbit to, co vidíte.
Tvůj tah!
Nyní, když jste si přečetli moje komentáře, zapojte se a pomozte tím, že poskytnete návrháři nějaké další rady. Dejte nám vědět, co si myslíte o designu skvěle a co si myslíte, že by mohlo být silnější. Jako vždy žádáme, abyste také respektovali návrháře webu a nabídli jasné konstruktivní rady, které zbaví jakékoli tvrdé urážky.
