Krytyka projektowania stron internetowych # 29: MadeFreshly
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 jest MadeFreshly.
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 24 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
O MadeFreshly
„Koszyk ze smakiem. Trendy się zmieniają, podobnie jak twój sklep internetowy. MadeFreshly oferuje nowy wygląd twojego koszyka. ”
Oto zrzut ekranu strony głównej:
Pierwsze wrażenie
Od samego początku mogę powiedzieć, że naprawdę podoba mi się design MadeFreshly. Jest tu kilka fajnych pomysłów i dziwactw, o których powiemy poniżej. Zdecydowanie mam kilka propozycji ulepszeń, ale w większości jest to świetnie wyglądająca strona stworzona przez bardzo utalentowanych projektantów.
Moim największym skrupułem jest prawdopodobnie z koncepcyjnego punktu widzenia. Jest to zdecydowanie subiektywna krytyka, więc możesz ją całkowicie zignorować, ale wydaje mi się dziwne, że wizualizacje witryny są sprzeczne z metaforą ustaloną przez jej nazwę. „MadeFreshly” może oznaczać wiele rzeczy: ogólnie rzecz biorąc, jedzenie, wypieki wypiekane na gorąco z piekarnika (to jest mój umysł), coś inspirowanego naturą, a nawet coś nowego i błyszczącego.
Jednak projektant wybrał nieco grunge wygląd strony. Tło ma postarzaną teksturę, a nagłówki również mają nałożone grunge. Ponownie sprawia to, że strona wygląda świetnie, ale jest sprzeczna z koncepcją „Fresh”.
Treść powinna zawsze poprzedzać i określać projekt. Projektowanie wokół lub przynajmniej w sprzeczności z nazwą i z góry ustaloną metaforą witryny pomaga wszystko połączyć i po prostu czuć się „dobrze”.
Jako przykład sprawdź bardzo podobną sytuację na stronie „Formee”, która zawiera „świeże wypieki”. Grafika jest przyjazną postacią szefa kuchni, która wzmacnia slogan.
Nie kopiuj tego pomysłu, ale możesz rozważyć, w jaki sposób możesz powiązać koncepcję „świeżości” z efektami wizualnymi na stronie.
Znak graficzny, marka
Myślę, że logo MadeFreshly jest świetne. Krój pisma jest dość atrakcyjny, a jednocześnie czuje się wyjątkowy, a zgrabny efekt pogniecionej naklejki dodaje głębi stronie. Świetna robota!
Nagłówek
Nagłówek jest ładny i prosty z nawigacją w postaci zwykłego tekstu i łatwo zauważalną zakładką logowania. Zatrzymaj się i spójrz na ten obszar w pełnym rozmiarze, a zobaczysz, że nad tym logo jest tylko dużo miejsca.
Nie mam nic przeciwko spacji, a nawet zachęcam projektantów do korzystania z niej dość swobodnie, ale duży pusty obszar to strasznie niezręczny sposób na rozpoczęcie strony. Rozwiązanie tutaj jest bardzo proste, po prostu zmniejsz tę przestrzeń o około połowę i powinno wyglądać świetnie. Nadal zachowasz dużo miejsca, tylko nie tyle, że to rozprasza.
Innym problemem, który tu widzę, jest to, że logo jest w dziwnej pozycji poziomej. Treść po prawej stronie strony jest wyrównana do prawej, co sugeruje nie wyśrodkowany, ale uzasadniony układ. Logo nie pokrywa się jednak z treścią po lewej stronie ani nie jest wyśrodkowane nad elementem pod nim (kolejna uzasadniona pozycja). Zamiast tego niezręcznie unosi się na prawo od wyrównania do lewej i na lewo od wyrównania do środka.
Prostym rozwiązaniem jest przesuwanie logo po lewej stronie, tak aby było zgodne z zawartością pod nim. Już prawie jest i potrzebuje jeszcze jednego dobrego pchnięcia.
Wyróżniona sekcja
Sekcja poniżej nagłówka, którą arbitralnie nazywam „polecaną sekcją”, jest częścią strony, która naprawdę przyciąga twoją uwagę. Ma większą wagę wizualną niż otaczająca go treść, więc wydaje się ważniejsza, a twoje oczy są niemal natychmiast przyciągane (wszystkie dobre rzeczy).
Przycisk „Utwórz sklep teraz” jest ładny i jasny i stanowi silne wezwanie do działania. Po zobaczeniu przycisku, jeśli rozejrzysz się wokół, twoja strzałka przyciąga wzrok, miły dotyk, który jeszcze bardziej zwraca uwagę na jeden z najważniejszych elementów na całej stronie. Możesz rozważyć dodanie efektu aktywacji do przycisku jako trochę ulepszenia UX, ale w przeciwnym razie jest to solidny projekt.
Mój jedyny problem to tekst nagłówka. Z jednej strony jest atrakcyjny i zapewnia ładne powtórzenie tekstu użytego w logo. Z drugiej strony, po prostu nie jest to szybki odczyt z powodu złożoności kroju pisma.
Jest to jedna z tych sytuacji, w których estetyka i czytelność są sprzeczne. Jeśli zmieniłeś tutaj czcionkę, mocno wierzę, że strona byłaby dla niej mniej atrakcyjna, ale możesz podwoić liczbę użytkowników, którzy faktycznie czytają nagłówek.
Możesz rozważyć eksperymentowanie z pozostawieniem jednego słowa nagłówka w skrypcie i przekształceniem reszty w coś bardziej czytelnego. Na przykład „koszyk z” może być mniejszy i zwykłą czcionką bezszeryfową, podczas gdy „smak” może być podkreślony zarówno poprzez większy rozmiar, jak i użycie czcionki skryptowej.
Ostatecznie jest do zaakceptowania, jak jest obecnie i są to tylko sugestie do rozważenia. Byłoby wspaniale przeprowadzić testy AB tego elementu, aby sprawdzić, czy uczynienie go bardziej czytelnym ma jakikolwiek wymierny wpływ na konwersje. Jeśli nie, zdecydowanie zachowaj skrypt.
Three Up Section
U dołu strony znajdują się trzy zrzuty ekranu ze słowami świeżymi, łatwymi i wydajnymi. Jest to chwytliwe i niezapomniane, a sekcja wygląda niesamowicie. Uwielbiam to, że tekstura tła się kończy, a ramki miniatur pokrywają się w nowym obszarze. Ponownie, projektant dodaje nieco więcej głębi do swojego projektu, aby poczuł się o wiele bardziej realny i różnorodny.
Wszystkie pogrubione akapity
Zwykle trzymamy się strony głównej dla Design Critiques, ale tym razem poszperałem trochę na innych stronach. Jedną rzeczą, którą moim zdaniem warto zwrócić uwagę, jest tekst akapitu na stronie „Tour”.
Decyzja o pogrubieniu akapitów po prostu nie działa. Litery wyglądają, jakby były ściśnięte między sobą i są dość trudne do odczytania. Ponadto pogrubienie kopii głównej zmniejsza wpływ pogrubionego nagłówka (kontrast ma kluczowe znaczenie). Polecam nadanie temu tekstowi tego samego stylu, co tekst niepogrubiony pod trzema miniaturami na stronie głównej.
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.
