Krytyka projektowania stron internetowych nr 13: Coroczne nagrody za wzornictwo
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 coroczne nagrody za wzornictwo.
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 24 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
Informacje o corocznych nagrodach za wzornictwo
„Coroczne nagrody za wzornictwo (pseudonim ANNDAS) to globalne uznanie dla najnowocześniejszej komunikacji wizualnej, stworzone w celu nagradzania wybitnych zasług w branży projektowania. Zebraliśmy jedne z najbardziej niesamowitych talentów i szanowanych postaci z całego świata, aby ocenić to globalne wydarzenie, którego celem jest stać się najważniejszą nagrodą za wzornictwo i wyznaczyć międzynarodowe standardy. ”
Oto zrzut ekranu strony głównej:
Ogólny projekt
Chcę zacząć od stwierdzenia, że to już świetnie wyglądająca strona. Uwielbiam czerń w połączeniu z pops pomarańczy. To pojedyncze powtórzenie jasnego koloru pomaga przyciągnąć uwagę użytkowników na ważne części strony.
Układ jest solidny i zawiera dużo białej przestrzeni. Ponadto wizualna objętość obiektów jest dobrze rozproszona, dzięki czemu ważne obszary są podświetlone.
Na szczęście wydaje się, że ludzie oceniający projekty innych sami mają silne poczucie projektowania! Teraz, gdy przeanalizowaliśmy całość, podzielmy ją kawałek po kawałku.
Obszar logo
Zacznijmy od najbardziej oczywistego miejsca: w lewym górnym rogu. Tutaj widzimy logo Annual Design Awards jako rodzaj promieniującej grafiki koła.
Logo jest proste, ale skuteczne. Sugeruje to, że młoda i nerwowa publiczność niezbyt lubi czyste linie i nudny minimalizm (strona jest właściwie dość czysta, ale w sprytny sposób).
Kręgi to odważny pomysł wykonany w subtelny sposób (gustownie wykonany). To naprawdę prosty element projektu, który pomaga zwrócić uwagę na logo, a tym samym nazwę strony. Nie działałoby to na zagraconej stronie, ale ta strona jest na tyle prosta, że nie tworzy bałaganu wizualnego i zamiast tego doskonale spełnia swój cel.
Nawigacja
Obszar nawigacji jest dość prosty, tylko trochę tekstu powyżej poziomego paska z przerwami dla każdej sekcji.
Naprawdę podoba mi się wybór czcionki tutaj. Wydaje mi się, że jest to coś niestandardowego zrobionego przy użyciu @ font-face, więc byłem zaskoczony, kiedy zerknąłem na kod i zobaczyłem, że to po prostu kursywą Gruzji.
Najechanie kursorem na sekcję podświetla pasek na pomarańczowo. Jest to miłe, ale wydaje się trochę dziwne, że tekst nie robi czegoś równie dobrze (jest to dość wybredne, ale na świetnie wyglądających stronach muszę o czymś porozmawiać!).
Rozumiem, dlaczego projektant nie zmienił tekstu tak dobrze, że trudno byłoby odczytać mały pomarańczowy tekst na czarnym tle. Być może pomogłaby bardzo niewielka transformacja CSS w celu obrócenia tekstu po najechaniu myszą. Nic dziwnego, jeśli zostanie zignorowane w starszych przeglądarkach i byłoby miłym ukłonem w stronę logo.
Pokaz slajdów
Uwielbiam pokazy slajdów JavaScript, więc uważam, że ta sekcja jest świetna. Obraz przesuwa się w lewo, gdy pojawia się nowy, a tekst ma przyjemny efekt zanikania. Bardzo podoba mi się też przezroczysta ramka i znaczniki przycięcia.
Jednak przycisk odtwarzania i pauzy tutaj po prostu mnie nie przycina. Widziałem przebiegającą obok grafikę, na którą chciałem spojrzeć jeszcze raz, ale nie miałem możliwości powrotu. W związku z tym musiałem czekać na to, by ponownie się pojawiło (co zajęło trochę czasu).
Zalecam umieszczenie linii małych kółek, które prowadzą do każdego obrazu. Jest to proste i subtelne i daje użytkownikowi poczucie miejsca, w którym się znajduje w pokazie slajdów, oraz daje kontrolę nad oglądaniem określonych obrazów.
Sekcja wejścia
Następna sekcja jest miejscem, w którym użytkownicy zwykle rejestrują się, aby wejść, jednak jest ona na razie zamknięta, jak wskazuje grafika karteczek.
Sticky całkowicie narusza projekt (celowo) i sprawia, że nie można przegapić faktu, że zgłoszenia są zamknięte. Działa to dobrze i natychmiast informuje użytkowników o potrzebnych im informacjach.
Grafika pod naklejką jest jednak nieco rozpraszająca. Ceny wydają się dziwnie ustawione, z jednym wpadającym na prostokąt z lewej strony, a drugim na nie. Nie jestem pewien, co dokładnie się tutaj dzieje, ale wydaje się to trochę nie w porządku.
Stopka i formularz kontaktowy
Ostatnim obszarem, na który się przyjrzymy, jest dół strony, na którym możesz się zarejestrować, aby otrzymywać informacje. Pod formularzem kontaktowym znajdują się również standardowe stopki i informacje społecznościowe.
Podoba mi się, że formularz kontaktowy znajduje się tutaj, a nie na dedykowanej stronie i że są tylko dwa pola do wypełnienia. Zauważyłem, że etykiety pól znikają po kliknięciu w pole i nie wracają po kliknięciu bez wpisywania czegokolwiek. Stanowi to trochę problem z użytecznością, ponieważ klikałem na stronie, ale nie byłem pewien, które pole było dla nazwy, a które dla e-maila, kiedy wróciłem.
Wreszcie obszar stopki wygląda świetnie, ale chciałbym zobaczyć trochę przestrzeni między słowami „Follow us” i towarzyszącą mu ikoną. W tej chwili są trochę zgniecione.
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.
