Критика за уеб дизайн # 80: Новият отзивчив сайт WebAppers
Време е за още една страхотна критика за уеб дизайн, където разглеждаме истински уебсайт и анализираме дизайна. Ще посочим и двете области, които са добре направени в допълнение към тези, които биха могли да използват някои работи. И накрая, ще завършим с молба да предоставите своя собствена обратна връзка.
Днешният сайт е WebAppers, чудесно място за намиране на уеб ресурси с отворен код. Нека скочим и да видим какво мислим!
Разгледайте елементи Envato
Ако искате да изпратите уебсайта си, за да бъде представен в бъдеща дизайнерска критика, отнема само няколко минути. Ние таксуваме $ 49 за критикуване на вашия дизайн - значително по-малко, отколкото бихте платили за консултант, който да разгледа вашия сайт! Можете да разберете повече тук.
Всичко за WebAppers
„WebAppers е блог, посветен на ежедневното споделяне на висококачествени ресурси с отворен код за уеб разработчици и уеб дизайнери. Като уеб дизайнер ще намерите едни от най-добрите безплатни икони, стокови снимки, четки, шрифтове и дизайнерски вдъхновения. Като уеб програмист ще намерите и някои от най-добрите компоненти на Javascript и Ajax като модални прозорци, менюта, галерии, подсказки, диаграми, календари и много други. “
Ето екранна снимка на началната страница:
Първо впечатление
Ако се чудите дали критика Design Shack си заслужава, не трябва да гледате повече от многократните клиенти. WebAppers всъщност беше клиентът на нашата 14-та критика за уеб дизайн и те се върнаха, за да ни разгледат чисто новия им, изцяло преработен отзивчив сайт.
Първите ми мисли за новия дизайн са много положителни. Това не е малка актуализация, те взеха сайта в съвсем нова визуална посока и наистина мисля, че е по-добре за него. Старият сайт имаше калдъръмен вид, подобен на това, че бяха събрани различни несъответстващи ресурси. Новият дизайн, за разлика от тях, е много изчистен и професионален и излиза като напълно персонализирана работа. И е отзивчив към зареждането!
Все още сме много рано в отзивчивата еволюция на мрежата, така че шапката ми отива на всеки, който всъщност поема инициативата да премахне RWD от удобната област на теорията и да я приложи в реалната световна практика.
Нека да разровим по-дълбоко в дизайна на сайта и да видим какво работи добре и какво може да бъде подобрено.
Ново лого
Старото лого на WebAppers имаше подобен рокер на 80-те години. Имаше някаква котка, някакви осветителни болтове; беше странно, но забавно.
Винаги съм намирал логото за малко объркващо. Никога не бих могъл съвсем да разбера дали мълниеносните форми са предназначени да бъдат точно такива или дали са може би лъвска грива. И какво общо имаше нещо с уеб източниците с отворен код?
Новото лого използва по-опростен, базиран на текст подход. Всъщност обичам визуалното на страницата да се извива „W”, центърът на който служи и като „A”. Това е просто готина идея, която беше изтеглена доста успешно.
Харесва ми също, че логото ясно посочва за какво става въпрос в сайта. Щом зареждам началната страница, очите ми се насочват към логото и знам какво ми предлага страницата. Това е изключително важно и твърде често в тези критики казвам на дизайнер обратното (че е трудно да се види за какво става въпрос за техния сайт).
оформление
Както споменах по-горе, новото оформление е отзивчиво и под това искам да кажа, че използва медийни заявки за презареждане на оформлението в редица предварително зададени точки на прекъсване. За да бъдат "напълно отзивчиви", някои казват, че сайтът трябва да бъде изграден и върху течна мрежа като тази, която се вижда в Smashing Magazine, проект, който без съмнение вдъхновява този по някакъв начин.
WebAppers не се презарежда с всяка минута промяна в ширината на браузъра (поне до най-малката итерация) и за да бъда честен, докато си играя с него, мисля, че това е добре. Това все още е забележително гъвкав дизайн, който се адаптира добре към всички видове различни размери на екрана, което е много повече, отколкото повечето уебсайтове могат да твърдят.
В широката версия има четири първични колони. Отляво надясно те са навигацията, основното съдържание, страничната лента на вторичното съдържание и рекламата. Двете странични ленти са проектирани така, че да изглеждат почти като чекмеджета, които се плъзгат от основното съдържание, перфектна метафора, като се има предвид, че те се свиват, когато ширината се стеснява.
Докато стесняваме прозореца надолу, изпускаме рекламната колона в най-дясната част. Към този момент съдържанието не просто изчезва, вместо това рекламите се показват над дясната странична лента, като натискат това съдържание надолу. Това е елегантно решение, което изглежда страхотно и все още поддържа повечето от оригиналното съдържание.
След това има фин скок, който леко стеснява колоната с основно съдържание. Контейнерът става по-тесен, размерът на текста намалява и изображенията намаляват тяхната ширина. Ако стесним още повече прозореца, получаваме най-съществената промяна в оформлението:
Тук можем да видим, че третата колона е напълно отпаднала и всяко съдържание, което е било вътре, е станало скрито. Това означава, че рекламите са изчезнали напълно (Smashing Magazine прави същото) и страничната лента, съдържаща популярното поле за съдържание и търсене, също е изчезнала.
Единственият ми истински проблем тук е, че от този момент на сайта не изглежда да се търси. Аз съм за смяна на дизайна, тъй като размерът на екрана се променя, но функционалността е по-допирна тема и към намаленията трябва да се подхожда с повишено внимание. Търсенето изглежда като доста основна функция и вероятно бих се смутила, че не мога да изпълня тази задача на моя телефон или таблет.
В крайна сметка сайтът се разпада на една колонна подредба, като навигацията вече се появява в обикновено родно падащо меню, което обикновено работи добре както на мобилни, така и на настолни устройства.
Като цяло смятам, че оформлението работи наистина добре и с изключение на функционалността за търсене, не съм сигурен, че бих променил много по въпроса.
Поглеждайки зад кулисите, можем да видим, че този проект беше подпомогнат заедно с Twitter Bootstrap, което е хубаво, защото страницата изобщо не прилича на вашия типичен проект за копиране / поставяне на Bootstrap и доказва, че можете да използвате този инструментариум под капака, без да жертвате персонализиран дизайн.
естетика
Сега, когато обсъдихме как работят структурата или костите на сайта, нека разгледаме черешката отгоре. Сайтът придобива до голяма степен сива цветова схема с фини изскачащи цветове тук-там. Той използва силно привлекателни, минимални икони и разбира се Helvetica като основен и почти изключителен шрифт.
Най-малкият ми любим аспект на целия този сайт е липсата на контраст. Всичко на страницата има някакво монотонно усещане и нищо наистина не се откроява. Виждам как заглушеният поглед е предназначен да бъде лесен за очите, но е достатъчно нежен, че почти усеща малко напрежение.
Що се отнася до мен, решението за това е толкова лесно, че включва само подмяна на един файл: фоновата текстура. Грабнах тъмна текстура от фините модели и го пробвах в сайта на WebAppers със страхотни резултати.
Тъмният фон добавя малко необходим контраст на сайта и наистина подчертава основното съдържание, като го избутва на преден план на вашето внимание. Удивително е колко голяма разлика може да направи малко ощипване!
Друго малко нещо, което ме дърпа леко, е ефектът на сянката върху заглавията на статията, видян на екрана по-долу:
Една една ръка, мисля, че е готин ефект. От друга страна, мисля, че прави текста значително по-труден за четене. Може би, ако непрозрачността на сянката бъде просто намалена, би било по-малко разсейващо.
резюме
Мисля, че редизайнът на WebAppers определено е успешен. Сайтът е по-красив от всякога и предприе хубав скок към това, че е агностик на устройството. Използва се лесно, брандирането е по-логично и презентационното съдържание е много приятно.
Голямото ми притеснение е липсата на визуален контраст, притеснение, което напълно изчезва с включването на по-тъмен фон. Също така съм скептичен към решението да изпусна функционалността за търсене върху по-тесните версии на оформлението. Не мисля, че посещението на сайта на моя iPhone трябва непременно да означава, че съм загубил способността да търся.
Освен тези проблеми обаче, това е страхотен сайт. Не забравяйте да спрете и да го изпробвате. Мисля, че ще ти хареса това, което виждаш.
Твой ред!
Сега, след като прочетете коментарите ми, намерете и помогнете, като дадете на дизайнера някои допълнителни съвети. Кажете ни какво мислите, че е чудесно за дизайна и това, което смятате, че може да бъде по-силно. Както винаги, молим Ви също да се съобразявате с дизайнера на сайта и да Ви предложим ясни конструктивни съвети, лишени от всякакви тежки обиди.
