7 unikalnych decyzji dotyczących projektu
Zawsze szukam inspiracji, wspaniałego projektu, który rzuca wyzwanie konwencjom. Ten post dotyczy wyłącznie unikalnych rozwiązań w zakresie layoutu; to oznacza, że będę mówić o ośmiu różnych stronach internetowych, które przedstawiają coś typowego, w wyjątkowy sposób. Omówimy unikatowe rozwiązania dotyczące wyglądu, od pokazywania produktów, poprzez umieszczanie osobistych i ludzkich elementów na stronie internetowej.
1. Harvard wymyśla na nowo niesławną karuzelę
Szkoła projektowania Harvardu strona internetowa ma unikalny sposób zbliżania się do nawigacji. Kiedy po raz pierwszy wylądujesz na stronie głównej, wyświetli się ekran nawigacji. Oczywiście każdy pojedynczy link nie jest tutaj reprezentowany, tylko kilka kluczowych. Wiele stron internetowych łączyło linki z ważniejszymi stronami w nagłówku strony głównej; to właśnie przyniosło nam karuzele. Ale, jeszcze nie widziałem, żeby inna strona prezentowała to w ten sposób. Nawigacja może być mała, ale jest z przodu i centrum. Co ważniejsze, wygląda na to, że tam należy. Jest wykonywany wyjątkowo.
Obrazy po lewej stronie zachodzą na siebie, ale wciąż możesz zobaczyć, ile ich jest. Istnieje wyraźna zależność między obrazem i tytułami po lewej stronie. Obrazy obracają się w stosunku do elementów po lewej stronie. Jednak w dowolnym momencie wiesz, jakie informacje są dla Ciebie dostępne. To tak, jakby Szkoła Projektowania Harvarda stworzył lepszą wersję tego, co powinno być na karuzeli. Nie tylko użyteczność jest poważnie brana pod uwagę w tym rozwiązaniu konstrukcyjnym, ale także układ jest wyjątkowy. Oba te czynniki łącznie składają się na fantastyczny projekt wizualny.
2. Tra gaśnie z siatki
Jest to całkiem oczywiste Tra Strona internetowa używa nietradycyjnego układu. Strona jest ogólnie rzecz biorąc minimalna. Używają również odwróconego schematu kolorów, w którym tło jest czarne, a tekst jest biały. Kolorystyka z całą pewnością daje mu zachwyt. Jednak dotyczy to układu strony Tra. Zacznijmy od strony głównej: na stronie głównej znajduje się kilka fragmentów tekstu, większość z nich częściowo pokrywa się z obrazem tła, z wyjątkiem kopii akapitu z sekcji "Znamy osoby". Kopia jest wyrównywana specjalnie w celu wyłączenia obrazu. Jest inny, wyjątkowy, zauważalny.
Na stronie o jest trochę więcej porządku i użycie siatki. Ale sieć jest nadal nieregularna. Wydaje się, że każda sekcja o stronie ma własną siatkę. Tym, co najbardziej mnie urzekło na tej stronie, jest odcięty obraz z lewej górnej strony strony. To po prostu nie pasuje do niczego. Oczywiście, to mnie zaciekawia. Okazuje się, że obraz jest galerią - musisz go kliknąć, aby obrazy były otwarte. To całkiem sprytny sposób na wykorzystanie układu; ludzie, którym zależy na badaniu, nagradzani są mnóstwem zdjęć. Ludzie, którym nie zależy, nie tracą tak dużo. To zabawne pisanki.
3. Przewijane zdjęcia butów w ramach ustalonej strony
Ten przykład unikalnego rozwiązania układu dotyczy sprzedawcy obuwia online. Feit Strona produktu jest po prostu genialna. Przede wszystkim konstrukcja wykorzystuje pełną szerokość i wysokość ekranu. Oznacza to, że każdy obszar ekranu został wyznaczony w określonym celu. Po drugie, strona internetowa jest prosta, minimalna i czysta. Oznacza to, że nawet jeśli projekt wykorzystuje cały ekran, nie jest brudny. To bardzo dobrze, ponieważ wiele projektów opiera się na białych znakach, aby stworzyć czystą i jasną witrynę.
Rzeczą, która zrobiła na mnie największe wrażenie na tej stronie konkretnego produktu, jest sposób podziału układu. Strona jest specjalnie podzielona na trzy różne sekcje. Po pierwsze, nawigacja po lewej stronie. Jest dość standardowy i nic specjalnego. Następnie znajduje się strona po prawej stronie z danymi produktu. Zarówno nawigacja po lewej stronie, jak i sekcja szczegółów są ustalone na ekranie. Ale ostatnia sekcja, środkowa sekcja zdjęć, jest wypełniona przewijanymi zdjęciami. Myślę, że to wspaniałe rozwiązanie, ponieważ nie jest to najbardziej powszechne rozwiązanie.
Często czas, jeśli istnieje duża lista zdjęć produktu, informacja o nim pozostaje z tyłu. Tutaj, podczas przewijania w dół nadal widzę opis i nazwę produktu, nadal widzę różne kolory, które przychodzi i mogę uzyskać dostęp do większej ilości informacji, takich jak szczegółowe informacje o materiale, bez konieczności przewijania w górę iw dół. Ogólnie rzecz biorąc, jest to płynne doświadczenie dla potencjalnego klienta.
4. Pokazywanie wielu stron produktu za jednym spojrzeniem
Tutaj mamy kolejną stronę produktu i inny sposób wyświetlania produktu. Okay, w porządku, mamy też inny przykład buta! Afura Strona internetowa ma również unikalną metodę wyświetlania. Tym razem buty są wyświetlane w wielu różnych ujęciach na stronie. To właściwie część elementu interfejsu użytkownika karuzeli. Jednak użyteczność tutaj nie jest dużym problemem. Na początek są trzy obrazy wyświetlane domyślnie na ekranie lub ekranie laptopa. Domyślne obrazy mają te same tło, co sprawia, że obraz jest ładny i płynny. Jeśli użytkownik nie zdaje sobie sprawy, że obrazy są częścią karuzeli, zobaczy przynajmniej trzy różne obrazy produktu na swoich komputerach. W przypadku mniejszych rozmiarów ekranu, takich jak tablety, domyślnie wyświetlane są dwa obrazy naraz; to wciąż całkiem nieźle. Podsumowując, pokaz produktów obuwia jest tutaj wyjątkowym rozwiązaniem.
5. Opendoor pokazuje swoich ludzi
Ja na przykład wierzę, że sieć jest bezosobowym miejscem, w którym zwykle nie widzimy człowieka; prawdziwi ludzie za aplikacjami, produktami, firmami i tak dalej. Zawsze starałem się uwzględnić ludzki element w moich projektach. Rozumiem Otwarte drzwi chce zrobić dokładnie to samo. Na ich stronie głównej, w połowie drogi, znajduje się sekcja "Mamy twoich pleców". Ma wyjaśnić, że za firmą Opendoor są ludzie, którzy pomagają swoim klientom na każdym kroku. Teraz Opendoor mógł ją tam zostawić, ale zamiast tego umieścili dużą fotografię jednego z ich pracowników.
Ta sekcja ma bardzo mały tekst. Zamiast tego zdjęcie i twarz stanowią większą część sekcji. Powiedziałbym nawet, że fotografia pokonuje sekcję w 100% pozytywny sposób. Jeśli zdjęcie było miniaturą lub awatarem, efekt nie istniałby. Jeśli zdjęcie było średniej wielkości kwadratem (powiedzmy przynajmniej 300 na 300 pikseli) tuż obok kopii, efekt nie byłby taki sam. Wybór tak dużego wizerunku przyjaznej twarzy Marka był dobrym wezwaniem; nie tylko ta decyzja projektowa zapewnia ludzki i spersonalizowany element projektu, ale także kreatywność. Bez tego zdjęcia nie miałoby to osobistego wpływu na użytkownika. Bez tego konkretnego układu ta sekcja miałaby zupełnie inny efekt emocjonalny.
6. UX Flow pokazuje małą animację, która może przejść długą drogę
Ten następny przykład unikalnego rozwiązania układu dotyczy animacji. Jeśli spojrzeć na stronie głównej UX Flow i przewiń w dół, możesz zauważyć, że tło jednej z sekcji animuje się. To szczerze nic niezwykłego, ale jest wyjątkowe. Tła nie ułatwiają przewijania strony internetowej. Jeśli już, to w ciągu ostatnich kilku lat widzimy różne elementy z sekcji w trakcie przewijania. Ale wydaje mi się, że poza paralaksą nie ma wielu animacji tła. Powodem tego jest to, że tło definiuje sekcję. I choć nie jest to jakaś szalona animacja, wciąż robi wrażenie.
Nie wszystko musi być odważne, głośne i nieprzyjemne, by robić wrażenie. Czasami subtelne rzeczy, takie jak mała i szybka łatwość w animacji są wystarczające, aby stworzyć wyjątkowe doświadczenie dla użytkownika. To zdecydowanie jeden z tych czasów. Inną rzeczą, o której warto pamiętać, jest to, że sekcje, pomiędzy którymi odbywa się animacja, nie mają osobnych układów. W porządku; Przejście jest zauważalne, gdy przechodzisz z jednej sekcji do następnej, nadal jest częścią układu, nawet jeśli nie jest to układ końcowy tworzony przez animację.
7. Zintegrowana mapa Teda Todda
Wizualny projekt i ogólne wrażenia użytkownika Ted Todd Strona internetowa jest dobrze zaprojektowana. Ze względu na ten artykuł chciałbym porozmawiać o tym, w jaki sposób Ted Todd używa sekcji lokalizacji i mapy na swojej stronie internetowej. W dolnej części swojej strony głównej znajduje się sekcja przeznaczona dla różnych lokalizacji biurowych firmy na Florydzie. Istnieje wiele powodów, dla których ta sekcja jest niesamowita. Po pierwsze sekcja korzysta z układu w unikalny sposób, aby zapewnić gwiezdne rozwiązanie projektowe. Najbardziej zauważalną rzeczą w tej sekcji jest lekki kształt Florydy po prawej stronie. Wizualizacja Florydy z jej wieloma kropkami to fantastyczny sposób na pokazanie zasięgu firmy. Nie tylko mówią, że są na Florydzie, projekt pokazuje dokładnie, gdzie. Jest to łatwe do podrobienia i jest również realizowane w fantastyczny sposób.
Kolejną ważną rzeczą w tej sekcji są kropki. W rzeczywistości są interaktywne. Po najechaniu na nie otrzymasz nazwę miasta, w którym znajduje się biuro Ted Todd Insurance. Ale jeśli go klikniesz, cała sekcja przesunie się w lewo, aby zrobić miejsce dla szczegółów dotyczących konkretnego biura. Otrzymasz numer telefonu biura, adres, godziny otwarcia oraz listę pracowników. Podoba mi się to rozwiązanie konstrukcyjne, ponieważ pozwala użytkownikowi szybko dotrzeć do miejsca w pobliżu nich. Wizualnie jest o wiele bardziej interesująca i niepowtarzalna reprezentacja, niż gdyby informacje były ułożone jeden na drugim na tytule strony "Nasze biura na Florydzie", nie sądzisz?
