7 Jedinečných návrhových rozhodnutí
Vždy se snažím o inspiraci, o skvělý design, který vyzývá kongres. Tento příspěvek je o jedinečných řešeních rozvržení; to znamená, že budu mluvit o osmi různých webových stránkách, které představují něco typického, jedinečným způsobem. Pojednáme s jedinečnými řešeními rozložení, od předvádění produktů až po začlenění osobních a lidských prvků do webové stránky.
1. Harvard znovu objeví neslavný kolotoč
Harvardova škola designu webová stránka má jedinečný způsob přiblížení se k navigaci. Když poprvé přistanete na domovské stránce, zobrazí se vizuální zobrazení navigace. Samozřejmě, že každý odkaz zde není zastoupen, jen několik klíčových. Mnoho webových stránek obdrželo odkaz na důležitější stránky v hlavičce domovské stránky; to nám přineslo například kolotoč. Musím ale ještě vidět jinou webovou stránku. Navigace může být malá, ale je to přední a střední. Ještě důležitější je, zdá se, že tam patří. Vykonává se výjimečně.
Obrazy na levé straně se vzájemně překrývají, ale stále můžete vidět, kolik z nich je. Mezi obrazem a tituly na levé straně je jasný vztah. Obrazy se otáčejí ve vztahu k položkám vlevo. V každém okamžiku však víte, jaké informace máte k dispozici. Je to jako Harvardova škola designu, která vytvořila vylepšenou verzi toho, co měl karusel být na prvním místě. Nejen, že je použitelnost brána vážně v tomto designovém řešení, ale i uspořádání je jedinečné. Oba tyto faktory dohromady vytvářejí fantastický vizuální design.
2. Tra je vypnut
To je docela jasné Tra Webové stránky používají netradiční uspořádání. Webová stránka je celkově minimální. Používají také režim zpětné barvy, kde pozadí je černé a text je bílý. Barevná schéma to jistě dává faktor wow. Jedná se ovšem o uspořádání webových stránek společnosti Tra. Začneme s domovskou stránkou: na domovské stránce je několik textů, většina z nich se překrývá alespoň s malou částí, s výjimkou kopie odstavců v sekci "Známe lidi". Kopie je přesně zarovnána tak, aby byla mimo obrázek. Je to jiné, je to jedinečné, je to viditelné.
Na podobné stránce je trochu více pořadí a použití mřížky. Ale mřížka je stále nepravidelná. Zdá se, že každá část stránky má vlastní mřížku. Věc, která mě nejvíce zaujala, je oříznutý obrázek v levé horní části webové stránky. To prostě nezapadá do nic. Samozřejmě to mě dělá zvědavý. Ukázalo se, že obraz je galerie - musíte na ni kliknout, aby se snímky otevřely. To je docela chytrý způsob, jak využít uspořádání; lidé, kteří pečují o vyšetřování, jsou odměněni množstvím obrazů. Lidé, kterým se to nestará, neztratí tolik. Je to zábavné velikonoční vajíčko.
3. Rolovat fotografie boty na pevné stránce
Tento příklad jedinečného řešení rozvržení se točí kolem online prodejce obuvi. Feit 'S produkt je jen brilantní. Především design využívá celou šířku a výšku obrazovky. To znamená, že každá oblast obrazovky byla určena k určitému účelu. Za druhé, webové stránky jsou jednoduché, minimální a čisté. To znamená, že i když návrh používá celou obrazovku, není to špinavé. To je velmi dobrá věc, jelikož spousta designu spočívá na bílé barvě, aby se vytvořila čistá a lehká webová stránka.
Věc, která mě nejvíce zaujala na této konkrétní stránce produktu, je způsob rozdělení rozvržení. Stránka je rozdělena na tři různé části. Nejprve je navigace na levé straně. Je to docela standardní a nic zvláštního. Pak je na pravé straně detail produktu. Navigace na levé straně a část podrobností jsou pevně nastavena na obrazovku. Ale poslední část, střední část fotografie, je vyplněna posuvnými fotografiemi. Myslím, že je to skvělé řešení, protože to není nejběžnější řešení.
Často je čas, pokud existuje velký seznam fotografií produktů, informace o něm zůstávají. Tady, když se procházím dolů, stále vidím popis a název produktu, stále vidím různé barvy, které přicházejí a mohou získat přístup k dalším informacím, jako jsou podrobnosti o materiálu, jak se mi líbí, aniž by musel listovat nahoru a dolů. Celkově jde o bezproblémový zážitek pro potenciálního zákazníka.
4. Zobrazování více stran výrobku na jediném pohledu
Zde máme další produktovou stránku a další způsob zobrazení produktu. Dobře, dobře, máme také další příklad boty! Afura Má také unikátní metodu zobrazení. Tentokrát se boty zobrazují ve více různých snímcích na stránce. Je to vlastně součást kolotočového prvku UI. Nicméně, použitelnost zde není velký problém. Pro začátečníky jsou ve výchozím nastavení zobrazeny tři obrázky ve velikostech obrazovky pro stolní počítače nebo notebooky. Výchozí obrázky mají stejné pozadí, což je příjemné a bezproblémové zobrazení. Pokud si uživatel neuvědomí, že obrázky jsou součástí karuselu, uvidí alespoň tři různé obrázky produktu na svých počítačích. U menších velikostí obrazovky, jako jsou tablety, je výchozí zobrazení dvou snímků najednou; to je stále docela dobré. Celkově je zobrazování produktů obuvi jedinečným designovým řešením.
5. Opendoor ukazuje své lidi
Já, pro jednoho, věřím, že web je neosobní místo, kde obvykle nevidíme lidskou bytost; skuteční lidé za aplikacemi, produkty, podniky a tak dále. Vždycky jsem se snažil zahrnout lidský prvek do svých návrhů. to vidím Otevřít dveře chce dělat přesně totéž. Na domovské stránce, asi na půli cesty dolů, je část nazvaná "Máme záda." Má to vysvětlovat, že za společností Opendoor existují opravdové lidské bytosti, které tam pomáhají svým zákazníkům na každém kroku. Teď to Opendoor mohl právě nechat, ale namísto toho položili velkou fotografii jednoho ze svých zaměstnanců.
Tato část má velmi malý text. Místo toho je fotografie a tvář větší částí sekce. Dokonce bych řekl, že fotka překonává sekci 100% pozitivním způsobem. Pokud by fotografie byla náhled nebo avatar, efekt by ani neexistoval. Pokud byla fotografie středním čtvercem (nejméně 300 x 300 pixelů) hned vedle kopie, efekt by nebyl stejný. Volba použít tak velký obrázek Markovy přátelské tváře byla dobrá volání; nejenže toto návrhové rozhodnutí poskytuje lidský a personalizovaný designový prvek, je to i kreativní. Bez této fotografie by uživatel neměl žádný osobní dopad. Bez tohoto konkrétního uspořádání by tato část měla zcela jiný emocionální efekt.
6. UX Flow ukazuje, že malá animace může být dlouhá cesta
Tento další příklad jedinečného řešení rozvržení má co do činění s animací. Pokud se podíváte na domovskou stránku Průtok UX a trochu posunout dolů, můžete si všimnout, že jeden z pozadí sekce animuje. Je to upřímně nic fantazii, ale je to jedinečné. Pozadí se nezlepšují při procházení na webové stránce. Pokud se něco stalo, během několika posledních let jsme viděli různé elementy z části, která se pohybuje nebo vystupuje při procházení. Ale zdálo se mi to, že kromě paralaxy tolik animací na pozadí. Důvodem je to, že pozadí definuje část. A ačkoli to není nějaká šílená animace, je to ještě působivé.
Ne vše musí být odvážné, hlasité a nepříjemné být působivé. Někdy jsou jemné věci, jako malá a rychlá animace, jen stačí k tomu, aby vytvořila jedinečnou zkušenost pro uživatele. To je rozhodně jeden z těch časů. Další věc, kterou je důležité si uvědomit, je, že sekce, mezi nimiž se animace děje, samy o sobě nemají jedinečné rozvržení. To je v pořádku; přechod je znatelný, když jdete z jedné části na druhou, je to stále součástí rozvržení, i když to není konec rozvržení vytvořené animací.
7. Ted Todd integrovaná mapa
Vizuální design a celková uživatelská zkušenost s Ted Todd Je dobře navržena. Kvůli tomuto článku bych chtěl mluvit o tom, jak Ted Todd využívá umístění a mapu na svých webových stránkách. Ke konci jejich domovské stránky je určen úsek pro různé kancelářské lokality, které společnost má na Floridě. Existuje mnoho důvodů, proč je tento úsek úžasný. Nejprve sekce používá jedinečným způsobem rozvržení, které poskytuje hvězdné návrhové řešení. Nejvýraznější věc v této části je světelný tvar Floridy vpravo. Vizuální pohled na Floridu s mnoha body je fantastický způsob, jak předvést společnost. Neříkají jen, že jsou na Floridě, design vás přesně ukazuje. Je to snadné vizuální trávení a je také provedeno fantastickým způsobem.
Další důležitou věcí v této části jsou tečky. Jsou skutečně interaktivní. Když se nad nimi umístíte, dostanete jméno města, kde sídlí pojišťovna Ted Todd. Pokud však na ni kliknete, celá sekce se posune doleva, aby se udělala prostor pro detaily o konkrétní kanceláři. Získáte telefonní číslo kanceláře, adresu, pracovní dobu a seznam zaměstnanců. Líbí se mi toto návrhové řešení, protože umožňuje uživateli rychle se pohybovat na místo, které je blízko. Je to vizuálně mnohem zajímavější a jedinečnější reprezentace, než kdyby byly informace načteny nad sebou na titulní stránku "Naše kanceláře na Floridě", nemyslíte?
