Awesome Design in the Wild: Sevenly.org
Od czasu do czasu natrafiam na stronę z jednym lub dwoma naprawdę inspirującymi elementami projektowania i interfejsem użytkownika, które są wystarczająco dobre, żebym o nich napisał. W jeszcze rzadszych przypadkach znajduję całą witrynę, która jest tak przepełniona wyjątkowo niesamowitymi pomysłami projektowymi, że muszę się nią z tobą podzielić. Ten artykuł dotyczy jednej z takich witryn.
Sevenly.org to strona poświęcona pomocy organizacjom charytatywnym poprzez sprzedaż niestandardowych t-shirtów z limitowanej edycji. Poza tym, że uwielbiam organizację i to, za czym ona stoi, jestem pod wrażeniem tego, co zrobili ze stroną i sądzę, że służy ona jako narzędzie edukacyjne dla projektantów stron internetowych. Spójrzmy!
Przeglądaj zasoby projektowe
Meet Sevenly
Misja Sevenly jest prosta: „Wykorzystać siłę sztuki i społeczności do budowania trwałej świadomości i finansowania ruchów wspierających organizacje charytatywne w ich dążeniach do zmiany świata”.
W praktyce, jak to wygląda, sprzedają super niesamowite produkty (koszulki, bluzy, butelki z wodą itp.) I przekazują 7 USD z każdego zakupu na cele charytatywne, które zdecydowali się wesprzeć w tym tygodniu. Do tej pory zebrali prawie 600 000 USD na różne cele charytatywne.
Świetny design
Po raz kolejny przyczyna i strategia zyskały ode mnie kliknięcie na Twitterze, ale to projekt mnie zainteresował i zainteresował. Jak widać na powyższym zrzucie ekranu, strona główna jest dość atrakcyjna.
Pięknie prezentuje produkty za pomocą ładnych, dużych zdjęć dobrze wyglądających, uśmiechniętych osób noszących bardzo atrakcyjnie zaprojektowane ubrania. Układ murów nadaje stronie organiczny wygląd, a minimalny projekt / kolorystyka naprawdę przyciąga uwagę do tych dużych zdjęć.
Strona wygląda świetnie na pierwszy rzut oka, ale kiedy zaczniesz z niej korzystać, jest tyle przyjemnych niespodzianek i małych sztuczek, że zgubiłem się, grając każdą stroną przez kilka minut. Rzućmy okiem na niektóre interesujące akcenty.
Najedź na mnóstwo efektów
Jestem wielkim fanem efektów aktywowania, wiem, że nie zawsze bardzo dobrze przekładają się na ekrany dotykowe, ale można to wytłumaczyć. Na komputerze stacjonarnym są jednym z podstawowych sposobów interakcji z użytkownikami na poziomie podstawowym.
Sevenly jest po prostu przepełniony fajnymi efektami aktywowania. Śliczne małe animacje czekają na Ciebie na każdym kroku. Zaczyna się od podglądów odzieży na stronie głównej:
Domyślnie nazwa produktu i cena są ukryte, ale gdy tylko najedziesz myszką na obraz, przesuwa się w dół, aby ujawnić te informacje. Przeskakując na bok strony znajdują się tutaj trzy przyciski, z których każdy rozwija się w długi poziomy pasek po najechaniu myszą.
Zgodnie z tym samym motywem zmiany rozmiaru elementu po najechaniu myszką, małe paski udostępniania mają również przyciski, które stają się szersze, gdy najedziesz na nich myszką, zachęcając do wszystkich ważnych kliknięć.
Voodoo Pure Scrolling
Moją absolutną ulubioną rzeczą na tej stronie jest przewijająca się magia, która dzieje się na stronie głównej. To naprawdę bardzo prosty efekt, ale jest tak przemyślany, że nie mogłem się powstrzymać.
Domyślnie po załadowaniu strony widać to:
Szanse są, twoją pierwszą reakcją będzie przewinięcie strony w dół. Gdy to zrobisz, ciemna sekcja, która opisuje stronę, staje się coraz krótsza, dopóki jej mały pasek nawigacyjny pozostaje z tobą podczas przewijania.
Najlepsze jest to, że na tym się nie kończy. Chociaż możesz tego nie myśleć, możesz przewinąć w górę, przekraczając pierwotną pozycję początkową. Jest to odwrotność tego, co widzieliśmy wcześniej i rozszerza zaciemnioną sekcję, aby uzyskać więcej informacji na temat bieżącej działalności charytatywnej witryny.
Jest to tak elegancki sposób, aby przechowywać mnóstwo informacji na małej przestrzeni i stopniowo udostępniać je użytkownikom. Jest na tyle ukryty, że nie przytłacza cię podczas ładowania strony, ale jest na tyle oczywisty, że nie możesz go przegapić, gdy przewrócisz się na górę strony po pierwszej eksploracji.
Numery i udostępnianie
Biorąc pod uwagę, że ta strona jest tak ukierunkowana na cele charytatywne, istnieją dwa cele, które zostały określone dla projektu. Możesz powiedzieć, ponieważ sterują całym układem. Pierwszy to poziom przejrzystości i postępu, przekazywany za pośrednictwem statystyk. Oto, ile udało nam się zebrać, jakie są nasze docelowe kwoty itp.
Drugim celem jest zachęcenie do dzielenia się tak bardzo, jak to możliwe po ludzku, poprzez wykorzystanie mediów społecznościowych. Na stronie głównej znajduje się ogromna sekcja komentarzy na Facebooku oraz mnóstwo innych przycisków i pasków społecznościowych w witrynie.
Osobisty dotyk
Przechodząc obok strony głównej, niesamowity projekt się nie kończy. Następna strona to „Zespół”, na której można spotkać różnych członków zaangażowanych w projekt.
Tak jak poprzednio, widzimy tu kilka zabawnych efektów aktywowania. Każdy członek drużyny jest pokazany w kręgu, z wystającą tylko głową. Kiedy jednak najedziesz kursorem na okrąg, wyskakują z głupiej twarzy.
Gdy spojrzałem na tę stronę, zdałem sobie sprawę, że to kolejna niespodzianka: tło to tak naprawdę wideo! Jest bardzo subtelny i na początku możesz nawet nie zauważyć, dlatego jest tak fajnie miły. Film jest niewyraźny i ciemny, więc nie jest zbyt rozpraszający.
Storygraphic
Ostatnią rzeczą, którą chciałbym się pochwalić, jest strona „Nasza historia”, która mówi trochę o tym, dlaczego Sevenly został uruchomiony. Nie zadowalając się robieniem niczego w oczekiwany sposób, tutaj zespół Sevenly postanowił przekazać ci niesamowitą infografikę zamiast długiej, nudnej historii.
Zwróć uwagę na strukturę tej infografiki: problem vs. rozwiązanie. Ten format jest używany w innych miejscach witryny, aby przekazać historię każdej organizacji charytatywnej. Po pierwsze, przedstawiają problem w bardzo prosty sposób, a następnie przekazują, w jaki sposób pomagają go rozwiązać. Odświeżająco proste i jednoznaczne.
Co myślisz?
Chciałbym wyjaśnić, że nigdy nie rozmawiałem z Siedmioletnimi ludźmi, nie podeszli do mnie, aby napisać ten artykuł, ani w żaden sposób nie skontaktowali się ze mną. Po prostu naprawdę doceniam to, co robią, zarówno jako człowiek, jak i projektant.
Pamiętaj, aby odwiedzić Sevenly.org następnym razem, gdy będziesz potrzebować solidnej inspiracji. Nie tylko patrz, wchodź w interakcję z witryną i poznaj wszystkie fajne drobiazgi, które sprawiają, że jest ona tak wyrafinowana. Ponadto, jeśli szukasz niektórych koszulek pasujących do twojego statusu projektanta, nie możesz pokonać wspaniałych wzorów Sevenly.
