Krytyka projektowania stron internetowych # 18: Two Chaps
Co tydzień przyglądamy się nowej stronie internetowej i analizujemy projekt. Wskażemy zarówno obszary, które są dobrze wykonane, jak i te, które mogą wymagać trochę pracy. Na koniec zakończymy prośbą o przekazanie własnej opinii.
Dzisiejsza strona to Two Chaps Branding, firma zajmująca się projektowaniem i marketingiem w Baltimore.
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 24 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
O dwóch facetach
„Tutaj w TwoC być może wierzymy, że marka to coś więcej niż ładne logo i misja wypełniona najnowszymi modnymi hasłami branżowymi. Wierzymy, że marka to historia firmy, która określa jej przeszłe, obecne i przyszłe relacje z klientami i klientami. Wierzymy, że marka to coś więcej niż to, jak chcesz być postrzegany, to sposób, w jaki jesteś postrzegany. Niezależnie od tego, czy jesteś ignorowany czy pielęgnowany - Twoja marka Cię definiuje. ”
Oto strona główna Two Chaps:
Ogólny wygląd jest bardzo atrakcyjny. Stary motyw jest dobrze wykonywany we wszystkich kolorach, typach i teksturach, a układ jest prosty, ale potężny. Wyrównanie jest bardzo ścisłe, a większość treści zawiera wyraźnie określoną kolumnę.
Rozbijmy niektóre aspekty projektu i przyjrzyjmy się im bardziej dogłębnie.
Znak graficzny, marka
Bardzo podoba mi się praca, którą wykonali w logo. Melonik i wąsy to doskonały wizualny przekaz nazwy „Two Chaps”. Podobnie silny krój pisma szeryfowego jest widoczny w okresie, w którym projektanci strzelają.
Mimo, że podoba mi się logo, nie mogę przestać się zastanawiać, czy byłoby silniejsze od wąsów. Obecnie w logo są dwa konkurujące ze sobą elementy graficzne, a zmniejszenie go do jednego może poprawić ten element. Zdaję sobie sprawę, że wąsy, litery i czapka sugerują razem twarz, ale nadal czyta się bardziej jak litery z wąsami i czapką.
Jako główną grafikę melonik może być następnie użyty w innym miejscu jako samodzielny element niezależny od reszty logo.
Nagłówek
Nagłówek jest moją ulubioną rzeczą na stronie. Choć pojawia się po prawej stronie, jest jednym z pierwszych, na które patrzysz, gdy strona ładuje się ze względu na swój rozmiar i śmiałość.
Rozmiary liter zostały doskonale skonstruowane, aby stworzyć spójną całość, która przyciągnie twoją uwagę i umożliwi szybki odczyt. Zwróć uwagę, w jaki sposób mniej ważne słowa zostały zmniejszone, aby dać miejsce na ważniejsze słowa (prawdziwa sztuka).
Ponieważ jest to typ graficzny, a nie na żywo, zdecydowanie zaleciłbym poświęcenie czasu na pracę nad kerningiem tekstu. Niektóre litery, takie jak „T” i „r” w „Prawda”, są dziwnie daleko od siebie, podczas gdy inne są trochę ściśnięte razem.
Łatwo jest zapomnieć o tym kroku podczas projektowania, ale jeśli typografia ma być główną cechą w projekcie, zawsze chcesz mieć pewność, że odstępy między literami są tak bliskie ideału, jak to tylko możliwe.
Miniatury obrazków
Obrazy na stronie głównej zostały doskonale potraktowane na granicy. Cienie naprawdę dają obrazom dużo głębi, ponieważ tworzą trzy oddzielne poziomy.
Domyślnie obrazy są w skali szarości, ale po najechaniu na nie kursorem upuszczają piksel lub dwa (celowo?) I stają się pełnymi kolorami. Jest to fajny efekt, z którym można się dobrze bawić, gdy po raz pierwszy sprawdzasz stronę.
Pasek boczny
Jak widać, pasek boczny to pionowa wstążka z logo, nawigacją, kilkoma przyciskami społecznościowymi i informacjami prawnymi. Jeśli sprawdzisz witrynę na żywo, zobaczysz, że stopka wygodnie pozostaje nieruchoma podczas przewijania strony. Zapewnia to łatwy dostęp do zmiany stron bez względu na to, gdzie jesteś w witrynie.
Uwielbiam śmiałość czerwieni i to, jak bardzo wyróżnia się od reszty projektu. Podoba mi się również sposób obróbki i kolory przycisków Facebooka i Behance. To trochę dziwne, że litery w „Facebook” mają tak ostry cień, podczas gdy litery w „Behance” nie.
Sekcje nawigacyjne paska bocznego rozwijają się i kurczą z płynną animacją po kliknięciu nagłówków. Kluczem tutaj jest to, że wszystkie elementy są nadal doskonale dostępne z wyłączoną obsługą JavaScript, menu są po prostu wyświetlane w otwartej pozycji i nawet nie wiedziałbyś, że niczego brakuje.
Zawsze dobrze jest zrobić wszystko, co w naszej mocy, aby upewnić się, że witryna działa w przeglądarkach obsługujących Twoje małe wizualne wrażenia, a także w tych, które nie.
Stopka
Stopka zawiera wezwanie do działania na rzecz zatrudniania firmy i jest kolejnym ładnie zaprojektowanym akcentem na temat wieku.
Linie na górze i na dole są miłym akcentem, podobnie jak mały znak „Kliknij tutaj” z zawinięciem strony. Ta sekcja wydaje się trochę podobna do niektórych „ekspertów” SEO, ponieważ słowo „marka” pojawia się okropnie wiele razy w przypadku tak małej ilości tekstu.
Czytelność
Jak wspomniałem powyżej, ogólnie bardzo podoba mi się projekt strony. Jest wyjątkowy, odważny, atrakcyjny i dość funkcjonalny. Wydaje mi się jednak, że użyteczność strony cierpi z powodu tekstu. Sprawdź zdjęcie poniżej na stronie „Nasza historia”.
Jak widać, ani duży kolorowy nagłówek obok, ani biały tekst nie są bardzo czytelne na teksturowanym tle. Sytuację pogarsza fakt, że tło pozostaje na swoim miejscu podczas przewijania tekstu, tworząc naprawdę złożony i zajęty efekt wizualny podczas przeglądania witryny.
W końcu ładne teksturowane tło może być trudniejsze niż dobre. Dobrym pomysłem jest eksperymentowanie z upuszczaniem krycia lub złomowaniem go na rzecz czegoś prostszego. Może to być nieprzyjemne, ale jeśli zwiększa czytelność tekstu w całej witrynie, warto spróbować.
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.
Chcesz mieć krytykę swojej witryny? Tutaj dowiesz sie więcej.
