Krytyka projektowania stron internetowych # 77: Capital Teas
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 Capital Teas. Wskoczmy i zobaczmy, co myślimy!
Przeglądaj zasoby projektowe
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 herbatach kapitałowych
Capital Teas jest rodzinnym sprzedawcą herbaty piątej generacji. Oferują ponad 175 odmian najwyższej jakości herbat liściastych i naparów ziołowych z najlepszych światowych krajów i regionów, w tym ze Sri Lanki, Indii, Chin, Japonii, Malawi i Kenii. Ich produkty do herbaty obejmują tradycyjne i nowoczesne czajniki, browary i zaparzacze oraz wiele innych artykułów specjalnych. Oferują także miód rzemieślniczy, dżemy, czekoladę z herbatą i inne produkty pakowane dla smakoszy towarzyszące ich herbatom.
Oto zrzut ekranu strony głównej:
Pierwsze wrażenie
Moje pierwsze wrażenie na stronie opiera się głównie na tym, czy mogę dokładnie powiedzieć, o co chodzi w ciągu pierwszych trzech sekund od wyświetlenia strony głównej. Zgadza się, trzy sekundy. Musisz przyciągnąć moją uwagę, powiedzieć, kim jesteś i o czym jesteś w krótszym czasie, niż przeciętna osoba musi zawiązać but.
W przypadku herbat typu Capital, zdają ten test z latającymi kolorami. Ta strona krzyczy online sklep z herbatą (w dobry sposób). Wszędzie widzę zdjęcia herbaty, słowo „herbata” pojawia się kilka razy, kolory sugerują herbatę; Jestem od razu dobrze zorientowany i wiem, że jeśli chcę kupić herbatę, jestem we właściwym miejscu.
Jeśli chodzi o wizualną estetykę i układ strony, powiedziałbym, że ma dobre kości. Powstała solidna struktura i rozpoczęła się atrakcyjna wizualnie estetyka. Potrzebuje trochę pracy, ale nic zbyt dużego. Wskoczmy i spójrzmy na kilka konkretnych obszarów, aby sprawdzić, czy możemy znaleźć jakieś sugestie dotyczące ulepszeń.
nagłówek
Jednym z obszarów, w których widzę najwięcej problemów, jest nagłówek. Wygląda na to, że został zaprojektowany jako prosty, ale dział marketingu go złapał i zniszczył. Jest w nim tak dużo rzeczy, że wydaje się zagracony i stanowi wyraźną sprzeczność z dość czystą estetyką ustaloną przez resztę strony.
W szczególności ikony społecznościowe mogą wymagać poważniejszych porządków. Projekt każdego z nich jest niespójny, wiele elementów na Facebooku wydaje się zbędnych, występują problemy z nakładaniem się, a wszystko w tym miejscu jest zatłoczone wraz z bardzo małą ilością miejsca do oddychania.
Z drugiej strony „Oferta dnia” i subskrypcja biuletynu dodatkowo podkreślają bałagan. Te elementy nie są szczególnie dobrze dopasowane do niczego innego na stronie i wydają się być rzucone na później.
Jak to naprawić
Trzeba będzie tu podjąć trudne decyzje, ponieważ coś musi pójść. W rzeczywistości musi iść kilka rzeczy. Wygląda na to, że ktoś próbował wcisnąć kilka elementów stopki w nagłówek, aby uzyskać lepsze miejsce na stronie, ale pamiętaj, że jeśli wszystko jest wyjątkowe, nic nie jest wyjątkowe. Musisz wybrać to, co najważniejsze, i nadać swoim przedmiotom przejrzystą hierarchię wizualną.
Zalecam przeniesienie większości treści w nagłówku w inne miejsce. Spróbuj zidentyfikować absolutnie krytyczne elementy. Zacznij od logo. To ładnie wyglądający element, który nadaje stronie świetny wygląd starego świata, poświęca jej więcej uwagi, usuwając otaczające elementy. Drugim niezbędnym produktem jest koszyk. Jeśli możesz zmniejszyć nagłówek do tych dwóch elementów, masz się świetnie. Jeśli nie, pozwolę na uwzględnienie oferty dnia. Wszystko przesuwa się do stopki lub jest lepiej zintegrowane z resztą strony.
W tym momencie znajdź prosty zestaw ikon społecznościowych, który ma pasujące ikony dla każdej sieci społecznościowej, której potrzebujesz.
Nawigacja
Przechodząc w dół strony, przechodzimy do nawigacji. Wprowadzenie skutecznej i niezakłóconej podwójnej nawigacji to trudna sprawa, ale tak naprawdę podoba mi się sposób, w jaki tutaj się nią zajmowano. Menu czystego tekstu zostało sparowane z polem wyszukiwania i ułożone w kolorowe menu oparte na ikonach, dzięki czemu mogę znaleźć to, czego szukam.
Jedną z rzeczy, które uważam za nieco niezręczne, jest konstrukcja menu rozwijanych w głównej nawigacji. Mają odłączone, pływające uczucie, które sprawia, że wydaje się, że coś nie działa całkiem dobrze.
Polecam przemyśleć to i eksperymentować z różnymi pomysłami wizualnymi, dzięki którym rozwijane menu wyglądają na bardziej zintegrowane i połączone z menu głównym.
Główna zawartość
Główny obszar zawartości składa się z trzech pól. To dobra mieszanka formatów i składa się z dużego suwaka, statycznego obrazu i małego filmu (który na szczęście nie jest automatycznie odtwarzany). Ten obszar jest świetny. Uwielbiam to, że został sparowany z trzema pudełkami, układ wygląda ładnie i czysto i naprawdę koncentruje się na wyświetlanych produktach i informacjach.
Fotografia
Jako fotograf jestem frajerem dobrych zdjęć, a ta strona z powodzeniem dostarcza w tym obszarze. Wygląda na to, że właściciele naprawdę zainwestowali w fotografię wysokiej jakości i opłaca się, aby ich produkty wydawały się bardzo wysokiej jakości i atrakcyjne.
Typografia
Drugim ważnym obszarem, który wymaga natychmiastowej uwagi po nagłówku, jest typografia. Większość projektantów zaleca wybranie jednego lub dwóch pełnych krojów pisma dla całego projektu, a może trzech, jeśli masz ochotę na przygodę i masz wystarczające umiejętności, aby go wykonać. Nie pamiętam, ile czcionek widziałem na stronie głównej w tej witrynie.
Twój typ jest jednym z najsilniejszych wskaźników stylu Twojej witryny. Określa nastrój, okres czasu, ton profesjonalizmu i wiele więcej. Jeśli jest niespójne i rozproszone, to także wiadomości, które przekazuje.
Zdecydowanie polecam złomowanie wszystkich różnych krojów, a następnie wybranie jednego lub dwóch o wysokim stopniu czytelności i tonie zgodnym z intencjami projektu. Rezultatem będzie znacznie bardziej spójny, profesjonalny wygląd witryny jako całości.
Treść wtórna
Na dole strony znajduje się pasek pól, które nazywam „treścią dodatkową” dla naszych celów. Ten układ w połączeniu z powyższymi trzema polami jest prosty i solidny. Przypomina mi kilka układów w naszym artykule 10 Rock Solid Website Layout Przykłady.
Moim jedynym prawdziwym problemem z tym obszarem jest typografia, którą już omówiłem. Problem polega na tym, że krój pisma „zobacz ten produkt” jest tak cienki, że prawie nieczytelny.
Wniosek
Podsumowując, Capital Teas ma świetny początek w bardzo atrakcyjnej witrynie. Podstawowa struktura układu jest solidna, zdjęcia są piękne, a podwójna nawigacja działa dobrze, chociaż zwykle odradzam tę trasę. Niektóre obszary wymagające poprawy obejmują nagłówek, który należy uporządkować oraz typografię, która musi zostać sparowana z kilkoma wybranymi czcionkami.
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.
