Krytyka projektowania stron internetowych # 71: Cutest Paw
Co tydzień przyglądamy się nowej stronie internetowej i analizujemy projekt. Wskażemy oba obszary, które są dobrze wykonane, oprócz tych, które mogą wymagać trochę pracy. Na koniec zakończymy prośbą o przekazanie własnej opinii.
Dzisiejsza strona to Cutest Paw, światowa galeria zdjęć zwierząt. Wskoczmy i zobaczmy, co myślimy!
Poznaj elementy Envato
Jeśli chcesz zgłosić swoją stronę internetową, która będzie prezentowana w przyszłej krytyce projektowania, zajmuje to tylko kilka minut. Za krytykę twojego projektu pobieramy 49 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
O Cutest Paw
Ta strona zdecydowanie otrzymuje nagrodę za naszą najbardziej „awwww” krytykę witryny, jaka kiedykolwiek powstała. Ta strona jest dosłownie niczym niekończącym się strumieniem zdjęć uroczych i zabawnych zwierząt. Jak możemy znieść takie rzeczy i nadal być w stanie konstruktywnie reagować, nie rozpraszając się przez śpiące szczenięta? Na szczęście jesteśmy w 100% zaangażowani w pomoc kreacjom w ulepszaniu narzędzi do projektowania stron internetowych. Powstrzymajcie szczeniaki, mamy robotę do wykonania.
Oto zrzut ekranu strony głównej:
Pierwsze wrażenie
Ilekroć oceniam projekt, wychodzę poza estetykę i pytam, jaki jest cel tego dzieła i czy ukończony projekt spełnia ten cel. Cel użytkownika jest prosty: przeglądać wiele zdjęć. Wygląda na to, że strona Cutest Paw całkiem dobrze spełnia swoje zadanie. Układ jest zoptymalizowany pod kątem maksymalnego wykorzystania przestrzeni i nie marnuje zbyt wielu pikseli na niekrytyczne zbędne cukierki.
Podobnie jak w zeszłym tygodniu krytyka projektowania, ta będzie dość krótka. Witryna Cutest Paw jest bardzo prosta, więc nie ma wiele do krytyki. Jak zwykle mam jednak opinie, które moim zdaniem pomogą projektantowi ulepszyć witrynę. Wskoczmy i zacznijmy.
Układ
Ta strona jest doskonałym przykładem przydatności jQuery Masonry, niesamowitej wtyczki do układu, która naprawdę sprawia, że układy w innym przypadku byłyby dziecinnie proste. Zaletą Masonerii jest to, że rezygnuje z zachowania CSS, które ustawia poziomy układ przed rozprowadzeniem treści w pionie. Zamiast tego tworzy ładny, ciasny pionowy stos, podobny do układania cegieł.
Rezultatem w tym przypadku jest niesamowicie ścisła siatka zdjęć, która, jak wspomniałem powyżej, naprawdę maksymalizuje liczbę zdjęć, które można obejrzeć na małej przestrzeni. Witryna korzysta również z nieskończonej techniki przewijania, która kontynuuje ładowanie zawartości podczas przesuwania się w dół strony.
Połączenie układów w stylu murarskim i nieskończonego przewijania zostało ostatnio bardzo popularne na Pinterest, o czym nie można nie myśleć, gdy korzystasz z tej witryny. Połączenie tych dwóch technik zapewnia niespotykaną łatwość przeglądania. Dla porównania, paginacja wymaga tak dużego wysiłku ze strony użytkownika. Tutaj przewijasz i przewijasz, dopóki nie zobaczysz wszystkiego, co jest do zobaczenia, lub zdecydujesz się przejść do czegoś innego.
Pasek boczny
Ponieważ zawartość przewija się w nieskończoność, konieczna jest nieco poprawiona nawigacja. Pinterest używa paska u góry swojej strony, Cutest Paw podąża własną drogą i wprowadza opóźniony pasek boczny, który szybko łapie, gdy przesuwasz się w dół strony. Jest to dość skuteczne, ale muszę przyznać, że animacja, która początkowo jest nieco urocza, szybko staje się rozpraszająca i nieco denerwująca.
Pasek boczny jest ładnie zaprojektowany i przejrzysty, z punktu widzenia użyteczności (poza animacją) jest dość dobrze zrobiony. Miło jest widzieć przycisk „Powrót na górę”, który został wdrożony tutaj, gdy tylko zacząłem przewijać, od razu szukałem jednego z nich i łatwo go znalazłem. Jednak może być bardziej skuteczny, jako pewien rodzaj postoju na górze lub dole prawej strony stosu zdjęć, to umieściłoby go tam, gdzie uwaga użytkownika prawdopodobnie będzie skupiona, i zmniejszyłaby potrzebę szukania.
Motyw
Ogólna estetyka strony jest warta omówienia, w rzeczywistości może to być jeden z najważniejszych punktów do rozważenia. Z jednej strony strona jest atrakcyjna. Czarne tło jest eleganckie, eleganckie i sprawia, że zdjęcia naprawdę się wyróżniają. Z drugiej strony tło, a nawet te przymiotniki, których właśnie użyłem, wydają się niewłaściwe dla tej witryny.
Słowa takie jak „słodki” i „puszysty” to sposób, w jaki ludzie opisywaliby treść, a jednak motywem wizualnym witryny jest czarna grunge tekstur. Te dwie koncepcje wydają się być biegunowymi przeciwieństwami i tworzą rodzaj wizualnego dysonansu. Jak już powiedziałem, jestem wielkim zwolennikiem używania designu nie tylko jako oka, ale dla wzmocnienia celu i przesłania. Projekt twojej strony oddaje osobowość, a kiedy ją pomylisz, zmniejsza to wpływ i sukces projektu. Zestawienie pojęć w tym projekcie jest bardzo podobne do tego, że 300 funtowy motocyklista w skórzanej kurtce z tatuażami uczy klasy przedszkolnej. Wygląda na to, że są po prostu sprzeczni.
Projektant przybił układ, który jest naprawdę najtrudniejszą częścią takiej strony. Teraz nadszedł czas, aby całkowicie zmienić wygląd strony przy jednoczesnym zachowaniu podstawowej struktury. Zacznij od bardziej przyjaznego schematu kolorów i / lub użyj znacznie mniej ostrych tekstur. Być może coś, co wywołuje uczucie miękkości (nie będąc brzydkim i tandetnym). Sprawdź Subtelne wzory, aby uzyskać wspaniałe zasoby.
Logo
Logo pokazano na poprzednim zrzucie ekranu. Jest to oczywiście bardzo odpowiednie dla witryny, łapa jest natychmiastowo powiązanym symbolem. Jako logo ma jednak poważną wadę polegającą na tym, że jest tak ogólny. To koło z łapą, być może pierwsza rzecz, jaką 99 na 100 nie-projektantów wymyśliłoby, biorąc pod uwagę instrukcję tworzenia logo łapy.
Problem polega na tym, że tak naprawdę nie możesz go mieć. Jeśli spojrzysz wystarczająco mocno, prawdopodobnie znajdziesz coś podobnego dla wielu firm i stron internetowych. Być może nie dążysz do zbudowania globalnej marki, ale cały sens logo wciąż ma mieć coś, co nadaje twarzy twojej marce (nawet niewielkiej) i pozwala ją zidentyfikować. Nie jest to wysoko na liście priorytetów, ale na dłuższą metę poleciłbym zbadanie czegoś bardziej wyjątkowego.
Prześlij stronę
Jak wspomniałem na początku tego artykułu, ta strona jest dość prosta, więc wkrótce ją podsumujemy. Ostatnią rzeczą, o której chciałbym porozmawiać, jest strona, na której użytkownicy mogą przesyłać własne zdjęcia:
Problem, który mam z tą stroną, to rodzaj efektu Incepcji, który ma miejsce. Masz zrzut ekranu strony internetowej wrzuconej na stronę, która wygląda bardzo podobnie. Jest pochylony, więc trochę się wyróżnia, ale wciąż jest niepokojącą kombinacją. Problem polega na tym, że tło strony i obraz są zasadniczo takie same, więc obraz nie jest tak naprawdę wyróżniony w żaden znaczący sposób. Polecam może przyjrzeć się efektowi obrysu i przyciąć siatkę obrazu w jeszcze większym powiększeniu. Aby to zrobić, możesz po prostu umieścić tutaj duże, urocze zwierzę, które w jakiś sposób przekazuje pomysł udostępniania, przesyłania itp.
Wniosek
Podsumowując, oto krótka lista kontrolna moich przemyśleń na temat projektu.
Dobrze
- Układ: jest to idealne zastosowanie dla jQuery Masonry
- Nieskończone przewijanie: przeglądanie jest łatwe
- Prosta, ale skuteczna nawigacja
Wymaga pracy
- Ogólna estetyka: zbyt ciemna i nieczysty
- Logo: zbyt ogólne
- Strona rejestracji: zrzut ekranu nie działa
Twoja kolej!
Teraz, gdy przeczytałeś moje komentarze, dołącz i pomóż, udzielając projektantowi dalszych rad. Daj nam znać, co Twoim zdaniem jest świetne w tym projekcie i co Twoim zdaniem może być mocniejsze. Jak zawsze prosimy, abyście szanowali również projektanta strony i oferowali jasne konstruktywne porady, pozbawione jakichkolwiek ostrych zniewag.
