Krytyka projektowania stron internetowych # 80: Nowa responsywna witryna WebAppers
Czas na kolejną niesamowitą krytykę projektowania stron internetowych, w której przyglądamy się prawdziwej 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 WebAppers, świetne miejsce do wyszukiwania zasobów internetowych typu open source. Wskoczmy i zobaczmy, co myślimy!
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 49 USD - znacznie mniej niż zapłacisz za konsultanta, który zajrzy na Twoją stronę! Tutaj dowiesz sie więcej.
Informacje o aplikacjach internetowych
„WebAppers to blog poświęcony codziennemu udostępnianiu najwyższej jakości zasobów open source dla programistów i projektantów stron internetowych. Jako projektant stron internetowych znajdziesz jedne z najlepszych darmowych ikon, zdjęć stockowych, pędzli, czcionek i inspiracji projektowych. Jako twórca stron internetowych znajdziesz również jedne z najlepszych komponentów Javascript i Ajax, takie jak okna modalne, menu, galerie, podpowiedzi, wykresy, wtyczki kalendarzy i wiele innych. ”
Oto zrzut ekranu strony głównej:
Pierwsze wrażenie
Jeśli zastanawiasz się, czy krytyka Design Shack jest tego warta, nie musisz szukać dalej niż powtarzalni klienci. WebAppers faktycznie był klientem naszej 14. krytyki dotyczącej projektowania stron internetowych i wrócili, aby spojrzeć na ich zupełnie nową, całkowicie przeprojektowaną responsywną stronę.
Moje pierwsze przemyślenia na temat nowego projektu są bardzo pozytywne. To nie jest mała aktualizacja, obrócili stronę w zupełnie nowym kierunku wizualnym i naprawdę uważam, że jest na to lepiej. Stara strona wyglądała jak brukowany wygląd, jakby rzucano razem różne niepasujące do siebie zasoby. Natomiast nowa konstrukcja jest bardzo czysta i profesjonalna i stanowi całkowicie niestandardowe dzieło. I reaguje na rozruch!
Wciąż bardzo wcześnie reagujemy na ewolucję sieci, więc mój kapelusz kieruje się do każdego, kto faktycznie podejmuje inicjatywę usunięcia RWD z wygodnego obszaru teorii i wprowadzenia go w praktykę w świecie rzeczywistym.
Przyjrzyjmy się bliżej projektowi strony i zobaczmy, co działa dobrze, a co można poprawić.
Nowe logo
Stare logo WebAppers miało taki rockowy styl z lat 80. Był jakiś kot, jakieś świecące kształty; było dziwaczne, ale zabawne.
Zawsze uważałem, że logo jest trochę mylące. Nigdy nie mogłem do końca powiedzieć, czy kształty błyskawic miały być właśnie takie, czy może były to grzywa lwa. A co to w ogóle miało wspólnego z zasobami sieciowymi typu open source?
Nowe logo ma prostsze podejście oparte na tekście. Uwielbiam wizualnie zawinięcie strony „W”, którego środek służy również jako „A”. To po prostu fajny pomysł, który całkiem skutecznie został zrealizowany.
Podoba mi się również to, że logo jasno określa, o czym jest ta strona. Gdy tylko ładuję stronę główną, moje oczy spoglądają na logo i wiem, co oferuje mi ta strona. Jest to niezwykle ważne i zbyt często w tych krytykach mówię projektantowi coś przeciwnego (że trudno jest zrozumieć, o czym jest ich strona).
Układ
Jak wspomniałem powyżej, nowy układ jest responsywny, a przez to mam na myśli, że używa zapytań o media, aby zmienić układ w szeregu wstępnie ustawionych punktów przerwania. Aby być „w pełni responsywnym”, niektórzy twierdzą, że strona musi być również zbudowana na płynnej siatce, takiej jak ta widoczna w Smashing Magazine, projekcie, który bez wątpienia zainspirował ją w jakiś sposób.
WebAppers nie przepływa z każdą minutową zmianą szerokości przeglądarki (przynajmniej do najmniejszej iteracji), i szczerze mówiąc, kiedy się z tym bawię, myślę, że to w porządku. To wciąż niezwykle elastyczna konstrukcja, która dobrze dostosowuje się do wszelkiego rodzaju ekranów o różnych rozmiarach, czyli o wiele więcej, niż większość stron może się spodziewać.
W wersji szerokiej istnieją cztery podstawowe kolumny. Od lewej do prawej to nawigacja, treść podstawowa, pasek boczny treści wtórnych i reklama. Oba paski boczne zostały zaprojektowane tak, aby wyglądały prawie jak szuflady, które wysuwają się z głównej zawartości, co stanowi idealną metaforę, biorąc pod uwagę, że zapadają się w miarę zwężania szerokości.
Gdy zawężamy okno, upuszczamy kolumnę reklamową po prawej stronie. Treść nie tylko w tym momencie znika, ale zamiast tego reklamy pojawiają się nad prawym paskiem bocznym, popychając ją w dół. To eleganckie rozwiązanie, które wygląda świetnie i nadal zachowuje większość oryginalnej zawartości.
Po tym następuje subtelny skok, który nieco zawęża główną kolumnę zawartości. Pojemnik staje się węższy, rozmiar tekstu zmniejsza się, a obrazy zmniejszają swoją szerokość. Jeśli zawęzimy okno jeszcze bardziej, otrzymamy najbardziej znaczące przesunięcie układu:
Tutaj widzimy, że trzecia kolumna całkowicie zniknęła, a wszelka zawarta w niej zawartość została ukryta. Oznacza to, że reklamy zniknęły całkowicie (Smashing Magazine robi to samo), a pasek boczny zawierający popularne treści i pola wyszukiwania zniknął.
Moim jedynym prawdziwym problemem jest to, że od tego momentu strona nie wydaje się być przeszukiwalna. Jestem zwolennikiem zmiany wyglądu, ponieważ zmienia się rozmiar ekranu, ale funkcjonalność jest bardziej drażliwa i do redukcji należy podchodzić ostrożnie. Wyszukiwanie wydaje się dość podstawową funkcją i prawdopodobnie byłbym sfrustrowany, że nie mogę wykonać tego zadania na telefonie lub tablecie.
Ostatecznie witryna rozkłada się na układ z jedną kolumną, a nawigacja pojawia się teraz w prostym natywnym menu rozwijanym, które zwykle działa dobrze zarówno na urządzeniach mobilnych, jak i stacjonarnych.
Ogólnie rzecz biorąc, myślę, że układ działa naprawdę dobrze, a poza funkcją wyszukiwania nie jestem pewien, czy bardzo bym go zmienił.
Patrząc za kulisy, widzimy, że ten projekt był wspierany przez Twitter Bootstrap, co jest miłe, ponieważ strona wcale nie wygląda jak typowy projekt Bootstrap z kopiowaniem / wklejaniem i dowodzi, że możesz używać tego zestawu narzędzi pod maską bez poświęcania niestandardowy projekt.
Estetyka
Teraz, gdy omówiliśmy, jak działa struktura lub kości witryny, spójrzmy na lukier na górze. Witryna przybiera w dużej mierze szarą kolorystykę z subtelnymi odcieniami koloru tu i tam. Często korzysta z atrakcyjnych, minimalistycznych ikon i oczywiście Helvetica jako podstawowego i prawie ekskluzywnego kroju pisma.
Moim najmniej ulubionym aspektem całej witryny jest brak kontrastu. Wszystko na stronie ma monotonne wrażenie i nic tak naprawdę się nie wyróżnia. Widzę, jak wyciszony wygląd ma być łatwy dla oczu, ale jest na tyle łagodny, że prawie czuje się trochę napięty.
Moim zdaniem rozwiązanie tego problemu jest tak łatwe, że polega tylko na zastąpieniu jednego pliku: tekstury tła. Chwyciłem ciemną teksturę z Subtle Patterns i przetestowałem ją na stronie WebAppers ze świetnymi wynikami.
Ciemne tło dodaje bardzo potrzebny kontrast do strony i naprawdę podkreśla główną zawartość, popychając ją na pierwszy plan. To niesamowite, jak wielką różnicę może zrobić drobna poprawka!
Inną drobną rzeczą, która trochę mnie wkurza, jest efekt cienia w tytułach artykułów, widoczny na zrzucie ekranu poniżej:
Z jednej strony myślę, że to fajny efekt. Z drugiej strony myślę, że znacznie utrudnia to czytanie tekstu. Być może, gdyby zmętnienie cienia zostało po prostu zmniejszone, byłoby mniej rozpraszające.
streszczenie
Myślę, że przeprojektowanie WebAppers jest zdecydowanie sukcesem. Strona jest piękniejsza niż kiedykolwiek wcześniej i skoczyła w kierunku agnostyki. Jest łatwy w użyciu, branding jest bardziej logiczny, a prezentacja treści jest naprawdę ładna.
Moim największym zmartwieniem jest brak kontrastu wizualnego, który całkowicie zanika po włączeniu ciemniejszego wzoru tła. Jestem również sceptycznie nastawiony do decyzji o rezygnacji z funkcji wyszukiwania w węższych wersjach układu. Nie sądzę, aby odwiedzenie strony na moim iPhonie musiało oznaczać, że straciłem możliwość wyszukiwania.
Poza tymi problemami jest to świetna strona. Koniecznie zatrzymaj się i przeprowadź jazdę próbną. Myślę, że spodoba ci się to, co zobaczysz.
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.
