Krytyka projektowania stron internetowych # 40: FanExtra
Witamy w naszej 40. krytyce projektowej! 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 FanExtra, fantastyczna strona z zasobami dla projektantów.
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 34 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
O FanExtra
„Wszystko zaczęło się od długiego lata ponad dwa lata temu i pasji do projektowania. Po skorzystaniu z niektórych samouczków Photoshopa w tym czasie postanowiłem napisać kilka własnych. W tym celu założyłem bloga (PSDFAN.com) i zacząłem używać go jako źródła kreatywnego. Chciałem zaoferować więcej naszej rosnącej społeczności i móc ewoluować PSDFAN do czegoś większego. Pomysł na FanExtra wkrótce się narodził! Sieć FanExtra to miejsce, w którym projektanci z całego świata mogą spotkać się i poznać swoje pomysły i kreatywność. Możesz dołączyć do dyskusji na naszych forach lub naprawdę poszerzyć swoją wiedzę poprzez nasz program członkowski FanExtra. ”
Oto zrzut ekranu strony głównej:
Pierwsze wrażenie
FanExtra jest jednym z najciekawszych przypadków krytyki projektowania, które mieliśmy do tej pory. Powodem tego jest to, że jest to naprawdę atrakcyjna strona, ale polecam ją całkowicie ponownie przemyśleć.
Każda sekcja na stronie, od logo po miniatury, wygląda świetnie. Jednakże, jeśli weźmiesz pod uwagę stronę jako całość, istnieją pewne prawdziwe problemy z przepływem każdej sekcji oprócz największego problemu, którym jest klarowność przekazu głównego komunikatu.
Ten problem jest dość powszechny i powstaje z powodu bardzo brudnego słowa w projektowaniu stron internetowych: założenie. Tutaj projektant prawdopodobnie jest blisko projektu i dlatego naturalnie ma problemy ze stwierdzeniem, że odwiedzający może nie zrozumieć, co się dzieje. Zakłada się, że odwiedzający znajdujący tę stronę będzie wiedział, co to jest „FanExtra”, co zdecydowanie nie jest czymś, co należy tutaj założyć.
Komunikacja
Kiedy lądujesz na stronie internetowej, instynktownie analizujesz obszar nagłówka w taki sam sposób, jak analizujesz tablicę menu w restauracji typu fast food. Możliwe pytania to: Gdzie jestem? Ile to kosztuje? Co dadzą mi za moje pieniądze? Czy serwują produkty typu cola lub pepsi? Ok, może to ostatnie pytanie nie ma tutaj zastosowania.
Chodzi mi o to, że kiedy spojrzysz na nagłówek tej witryny, nie odpowiada ona odpowiednio na wszystkie kluczowe pytania:
Widzimy, jak nazywa się strona (FanExtra) wraz z dużym polem do rejestracji. Czy to oznacza, że zarejestrowałem się w sieci? Czy to jest usługa bezpłatna? Po prawej stronie widzimy coś, co sugeruje „tutoriale”, które prowadzą nas na właściwą ścieżkę, po których następują słowa takie jak „tekstury” i „wektory”, które reprezentują dość specyficzny żargon.
Jeśli jestem projektantem, w tym momencie prawdopodobnie zorientowałem się, co się dzieje do pewnego stopnia, ale czy to naprawdę jest cel tutaj? Czy odwiedzający powinien znaleźć wskazówki i użyć ich do interpretacji strony?
Tajemnica zostaje ujawniona
Gdy przechodzimy do środka strony, tajemnica zostaje ujawniona:
Teraz widzimy, że FanExtra to „sieć wspaniałych witryn z samouczkami” oferujących członkostwo za 9 USD miesięcznie. Jest to najważniejszy element komunikacji na stronie, a jednak jest schowany w połowie strony. To powinna być pierwsza rzecz, którą widzi użytkownik.
W rzeczywistości myślę, że ta wiadomość może być jeszcze jaśniejsza. Wyrażenie „niesamowite witryny z samouczkami” jest nadal dość niejasne, jeśli myślisz o tym z perspektywy osoby postronnej. Coś w rodzaju „niesamowitych stron z samouczkami dla kreatywnych profesjonalistów” naprawdę posunąłoby to stwierdzenie znacznie dalej. Od razu umieściłeś docelowych odbiorców tuż przy nosie, więc kiedy znajduję tę stronę, widzę miłe powitanie informujące mnie, że ta strona jest specjalnie dla ludzi takich jak ja.
Kontrast wizualny vs. wizualny bałagan
Innym problemem, który widzę w komunikacie, jest jego struktura z wizualnego punktu widzenia. Rzućmy okiem na podstawową komunikację w obecnym stanie:
Widzimy tutaj stos trzech linii, z których każda używa innego koloru tekstu i niewielkich odmian tej samej czcionki, zarówno pod względem odwagi, jak i wielkości. Mogę napisać całe artykuły na temat kontrastu w projektowaniu, ale to, co sprowadza się do tego, najlepiej powiedzieć w radzie autora projektu Robina Williamsa: „nie bądź mięczakiem”. Rozumie przez to, że aby skutecznie używać kontrastu, elementy naprawdę muszą się od siebie wyróżniać w dużym stopniu, w przeciwnym razie wynik jest po prostu wizualnym bałaganem.
Sprawdź, jak inny popularny program członkowski w projektowaniu, Think Vitamin, konstruuje główny przekaz na swojej stronie.
Tutaj widzimy ogromny, masowo zawyżony kontrast między nagłówkiem a podtytułem. Rezultatem jest piękna i wyraźna komunikacja, która doskonale czyta. Ludzie przeglądający stronę niemal przypadkowo czytają nagłówek, a jeśli są zainteresowani dalej, mogą poświęcić trochę czasu na przeczytanie nagłówka.
Funkcje
Strona kończy się ogromnym zestawem punktorów po lewej stronie. Jest to dość niewygodne wykorzystanie przestrzeni i powoduje niewygodną przerwę po prawej stronie.
Szybkim rozwiązaniem tego jest po prostu rozbicie pocisków na dwa osobne stosy:
Jest to jednak ostatecznie pomoc dla zespołu i myślę, że strona mogłaby w rzeczywistości skorzystać z poważnej operacji. Zajmiemy się tym krótko w następnej sekcji.
Moje rekomendacje „dużego obrazu”
Szczerze mówiąc, nie sądzę, że nieprzerwana konfiguracja podwójnej kolumny działa dla tej witryny. Jest zbyt sztywny i faktycznie zakłóca naturalny przepływ komunikacji, zamiast jej ułatwiać, co jest celem ustrukturyzowanego układu.
Radzę całkowicie przerzucić ten układ. Najpierw porzuć sztywną strukturę podwójnej kolumny. Następnie przenieś podstawową komunikację na górę strony. Stwórz duże „polecane” pole, które obejmuje całą szerokość strony i podświetla niektóre treści, które następnie rozkładasz na później (ponad 140 plików, 40 wektorów itp.). Upewnij się, że nagłówek używa silnego kontrastu, krystalicznie wyraźnego frazowania i celowania oraz co najwyżej dwóch kolorów, które świetnie do siebie pasują.
Wreszcie, po utworzeniu tego niesamowitego obszaru nagłówka, który doskonale pasuje do tego, czym jest strona, dla kogo i jakie są podstawy, możesz skupić się na uporządkowaniu innych informacji pod spodem, być może w formacie dwu lub trzy kolumnowym.
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.
