Kritérium webového designu č. 71: Nejroztomilejší tlapa
Každý týden se podíváme na nový web a analyzujeme jeho 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ím webem je Cutest Paw, celosvětová fotogalerie zvířat. 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 nejroztomilejší tlapce
Tento web rozhodně získává cenu za naši „awwww“ vyvolávající kritiku stránek vůbec. Tato stránka není doslova nic jiného než nekonečný proud fotografií roztomilých a zábavných zvířat. Jak můžeme snášet, abychom se na takovou věc podívali a stále byli schopni nabídnout konstruktivní zpětnou vazbu, aniž bychom se rozptylovali spícími štěňaty? Naštěstí jsme stoprocentně odhodláni pomáhat kreativám vylepšovat jejich webový design. Zůstaňte zpátky, štěňata, máme práci.
Zde je snímek obrazovky domovské stránky:
První dojem
Kdykoli hodnotím design, překračuji estetiku a ptám se, jaký je účel díla a zda dokončený design splňuje tento cíl. Cíl pro uživatele je jednoduchý: zobrazit spoustu a spoustu fotografií. Místo nejroztomilejší tlapy vypadá, že slouží svému účelu docela dobře. Rozložení je optimalizováno pro maximální využití prostoru a neztrácí příliš mnoho pixelů na nekritických nadbytečných očních bonbónech.
Stejně jako minulý týden je kritika designu, i tato bude poměrně krátká. Web Cutest Paw je velmi jednoduchý, takže není co kritizovat. Jako vždy však mám nějakou zpětnou vazbu, o které věřím, že pomůže návrháři vylepšit web. Pojďme skočit a začít.
Rozložení
Tento web je ukázkovým příkladem užitečnosti jQuery Masonry, úžasného pluginu pro rozvržení, který ve skutečnosti znemožňuje rozvržení jinak nemožným. Krása zdiva je, že se vzdává chování CSS, které nastavuje horizontální rozvržení, než distribuuje obsah svisle. Místo toho vytváří pěkný, těsný svislý komín, podobný tomu, jak jsou kladeny cihly.
Výsledkem je v tomto případě neuvěřitelně těsná mřížka obrázků, která, jak jsem již zmínil výše, skutečně maximalizuje počet fotografií, které lze zobrazit na malém prostoru. Web také používá techniku nekonečného rolování, která pokračuje v načítání obsahu při pohybu po stránce dolů.
Kombinace rozvržení ve stylu zdiva a nekonečného rolování byla nedávno společností Pinterest velmi oblíbená, což vám při použití tohoto webu nemůže pomoci, ale přemýšlet o tom. Kombinace těchto dvou technik umožňuje bezprecedentní snadné prohlížení. Pro srovnání, stránkování vyžaduje tolik úsilí ze strany uživatele. Zde stačí posouvat a posouvat, dokud jste neviděli vše, co je vidět, nebo se rozhodnout přejít k něčemu jinému.
Boční panel
Protože se obsah neustále posouvá, je nutné mít poněkud pevnou navigaci. Pinterest používá pruh v horní části stránky, Cutest Paw jde svou vlastní cestou a implementuje zaostávající postranní panel, který se rychle posouvá nahoru, když se pohybujete po stránce dolů. To je docela efektivní, ale musím uznat, že animace, která je zpočátku poněkud okouzlující, se rychle rozptyluje a poněkud mrzutě.
Postranní panel je pěkně navržený a přehledně uspořádaný, z hlediska použitelnosti (kromě animace) je to docela dobře. Je příjemné vidět zde tlačítko „Zpět na začátek“ implementované zde, jakmile jsem začal rolovat, okamžitě jsem hledal jeden z nich a snadno jej našel. Mohlo by to však být účinnější, protože nějaký druh vrstvení na horní nebo spodní straně pravé strany zásobníku fotografií by to umístil tam, kde bude pravděpodobně pozornost uživatele soustředěna, a sníží se potřeba lovu.
Téma
O celkové estetice stránky stojí za to diskutovat, ve skutečnosti to může být jeden z nejvýznamnějších bodů, které je třeba zvážit. Na jedné straně je tato stránka atraktivní. Černé pozadí je elegantní, elegantní a pomáhá fotografům skutečně vyniknout. Na druhé straně se pozadí a dokonce i ta přídavná jména, která jsem právě použil, zdají pro tento web špatně.
Slova jako „roztomilý“ a „nejasný“ jsou způsob, jakým by lidé popisovali obsah, a přesto je vizuální motiv webu černým grungeem. Tyto dva pojmy vypadají jako polární protiklady a vytvářejí jakýsi vizuální nesoulad. Jak jsem již uvedl, jsem velkým zastáncem používání designu nejen jako oční bonbóny, ale také k posílení účelu a poselství. Design vaší stránky vyjadřuje osobnost, a pokud tuto osobnost pomýlíte, snižuje to dopad a úspěch projektu. Juxtaposition konceptů v tomto designu je hodně jako vidět 300 liber kůže-oblečený, tetování na které motorkář výuky předškolní třídy, dva jednoduše vypadají v rozporu s ostatními.
Návrhář přibil rozvržení, které je upřímně často nejsložitější částí na takovýchto stránkách. Nyní je čas zcela přepracovat vzhled webu při zachování základní struktury. Začněte s přátelštějším barevným schématem nebo použijte mnohem méně nervózní texturu. Možná něco, co vyvolává jemný pocit (aniž by bylo ošklivé a kýčovité). Podívejte se na jemné vzory pro nějaké skvělé zdroje.
Logo
Logo je zobrazeno na předchozím snímku. Je zjevně velmi vhodné pro danou stránku, tlapka je okamžitě relativní symbol. Jako logo má však zásadní nedostatek v tom, že je tak obecný. Je to kruh s tlapou v tom, možná úplně první věc, kterou by 99 ze 100 netvoritelů přišlo s pokyny k vytvoření loga tlapky.
Problém s tím je, že to opravdu nemůžete vlastnit. Pokud vypadáte dostatečně tvrdě, pravděpodobně byste našli něco podobného pro tuny firem a webových stránek. Možná se nesnažíte vybudovat globální značku, ale logem celého loga je stále něco, co vaší značce (i když malé) dává tvář a umožňuje ji identifikovat. To není na seznamu priorit, ale z dlouhodobého hlediska bych doporučil prozkoumat něco trochu jedinečnějšího.
Odeslat stránku
Jak jsem zmínil na začátku tohoto článku, tato stránka je celkem jednoduchá, takže ji brzy zabalíme. Poslední věc, o které bych chtěl diskutovat, je stránka, na které mohou uživatelé jít a odeslat své vlastní fotografie:
Problém, který mám s touto stránkou, je druh počátečního efektu, který se děje. Máte snímek webové stránky vržený na webovou stránku, která vypadá velmi podobně. Je nakloněná, takže to trochu vyniká, ale je to stále znepokojující kombinace. Problém je v tom, že pozadí stránky a obrázek jsou v podstatě stejné, takže obrázek není nijak významně oddělen. Doporučuji možná podívat se na efekt tahu a oříznout obrazovou mřížku při ještě větší přiblížení. Jako snadný způsob, jak se dostat ven, můžete sem dát jen velké roztomilé zvíře, které nějakým způsobem vyjadřuje myšlenku sdílení, nahrávání atd.
Závěr
Abych to shrnul, tady je rychlý kontrolní seznam mých myšlenek na design.
Dobrý
- Rozvržení: Toto je perfektní využití pro jQuery Masonry
- Nekonečné rolování: umožňuje snadné procházení
- Jednoduchá, ale efektivní navigace
Vyžaduje práci
- Obecná estetika: příliš tmavá a výstřední
- Logo: příliš obecné
- Stránka registrace: Snímek obrazovky nefunguje
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.
