Критика веб-сайта

Letta

Сегодня у нас немного необычный предмет для критики - нужно мнение относительно дизайна веб-сайта. Если вы веб-дизайнер или просто пользователь, который видит визуальные ошибки - не стесняйтесь высказываться.

Сайт: https://hosting-pulse.ru/

Автор поясняет немного

Если коротко, сайт для айтишников. Ресурс помогает «сайтостроителям» выбрать хостинг. Сайт собирает статистику разных технических показателей этих самых хостингов и выдаёт сравнительный анализ, у кого, что как работает и на основании этого формирует рейтинг(топ) производительности.

Нужно чтобы сайт смотрелся адекватно и аккуратно.

#web_дизайн #критика #веб_дизайн #вёрстка #дизайн_интерфейсов

Ответить

Kotob

Меню — раздвинул!

Высоту строк — увеличил!

Заголовки, так же, немного раздвинул и декорировал важные, чтобы не терялись!

Анимацию где-то убрал, где-то «успокоил» :)

С абзацами — работаю, но идет «туго», возможно, пока отложу.

Кажется, стало лучше :) Еще раз спасибо!

Kotob

Большое спасибо! :)

Zelenkova

Здравствуйте! Америку не открою, но:

Общее впечатление — зажато, нет воздуха, поэтому сложно читать сайт (воздуха вокруг заголовков, абзацев)
Меню. Зажато тоже, очень мало места меду пунктами меню. Иконки только нагружают меню, не помогая пользователю. Можно попробовать сделать меню на всю ширину экрана: лого — слева, пункты меню — справа.
Есть проблемы с типографикой — для Roboto можно делать line-height +10 от размера шрифта
Слишком длинные абзацы
Анимация лишняя

Успехов 😊

Топот_Котов

Анимацию нужно еще убирать, особенно все эти ездящие влево-вправо картинки.

Kotob

Отчетов и благодарностей пост :)

Итого — Меню навигации растянуто на всю ширину страницы, к изображению логотипа добавлено название ресурса.

Картинка переехала в «подложку» заголовка страницы и теперь не только на главной, а везде, в шапке. Кажется, стало «уютнее» :) Можно сделать разные картинки для разделов, еще подумаю.

Структура текстового содержимого перерабатывается, где-то уже «порезал», но процесс дается тяжело. Пунктуацию еще не исправил :)

Новости уехали вниз, под основное потребительское содержание, но над содержание для «гиков» :) Сделал что-то вроде «плашек» и сжал, получилось не очень толково, но вроде лучше чем было :)

Анимацию сделал более плавной и убрал вращение, чтобы меньше тормозила. На страничке рейтинга убрал анимацию карточек и сделал в названиях хостингов, чтобы были заметнее.

Секции «показать раздел» убрал в кнопки со модальными окошками. Табы я не очень люблю, они на мобильных платформах не совсем комфортно себя чувствуют :)

Оглавления переименовал в «Быстрый переход к разделам» и подвинул в колонку, к основному описанию страницы.

Да, ресурсу не хватает инфографики, но сам я это точно не смогу сделать. Если честно, даже плохо представляю как написать ТЗ и сколько это может стоить :))

В целом, на мое субъективное впечатление — стало лучше чем было и это замечательно :)

Еще раз спасибо всем, кто был не безразличен!

Kotob

Ок! Понял, постараюсь! :)

Kotob

В целом — все так :) Возможно, моя призма восприятия просто омрачена печальным expierence :)) Да и проблема похоже не сколько в теме, сколько в том что у меня не очень получается как раз «разбить и сгруппировать» информацию. Я собрал довольно много ecommerce ресурсов, а вот с информационным «бодаюсь» первый раз. Возможно, поэтому и «клинит» :) Да и обратился судя по всему не зря — уже довольно много адекватных советов. Осталось только переварить и запилить :)

Letta

Понимаю, что поисковикам тоже надо, но сайт то для людей, следовательно все, что я писала выше, в основном для людей. Смею предположить, что заходить к вам будут не только гики (хотя они тоже люди), но и обычные пользователи, которым покажется, что ваш сайт может решить проблему, поэтому лучше уж универсальные решения, на мой взгляд, чем понятные только для гиков (это я про оглавления если что).

Многоколоночная верстка прекрасна для упорядочения информации и прекращения ее в адекватные блоки.

Предлагаю еще подумать над разбавлением текста иконками например, цветными подложками, рамками, чтобы простынок было поменьше.

Топот_Котов

Ну не знаю, те шаблоны с которыми мне доводилось работать, вполне себе. Кстати там есть live demo, можно все посмотреть, потыркать. Где-то даже техподдержка в комплект входит. Правда если есть мысли все переделывать, то наверно она не особо поможет. Вообще не вижу проблем натянуть качественное представление на любое содержание. Этож просто морда. Информацию можно разбить, сгруппировать, отдельно под что-то сверстать доп. страницы, не потеряв ощущение стиля и дизайна, или подтянуть динамику.

Kotob

Спасибо!

В целом мысль Вы уловили очень правильно — разговор совсем не о полосочках :)

Да, я столкнулся с проблемой того, что мне во многом не нравится сам формат подачи содержания, вот и обратился за помощью :) Это инди проект и пока совсем не такой «большой», чтобы я смог полноценно привлечь дизайнера для работы. Вот и «побираюсь» советами по друзьям и знакомым :) Если честно, я уже плохо справляюсь с потоком информации, но очень рад помощи и конструктивной критике! :)

Kotob

Спасибо!

Тема в каком-то смысле есть — bootswatch.com/flatly/

А готовые шаблоны мне все равно не помогут т.к. содержимое местами совсем не стандартное :)

Я пробовал «натягивать» готовые темы (взрослые дяди как-то купили себе крутую для корпоративного каталога) — это мрак :) Кроме верстки надо еще и косяки темы выпиливать. Внешне они выглядят забавно, но «под капотом» чаще всего мрак и содомия :) Плюс адаптивную верстку многие просто «запарывают». И в таком ракурсе, использовать что-то не такое «красивое», но работающее, выглядит более логичным :)

Kotob

Спасибо!

Про меню — это стандартная навигация Bootstrap с glyphicons и картинкой :) Да, картинка больше т.к. это самый популярный раздел сайта и если делать её меньше — «замыливается», а иконки больше смотрятся странно :) Мысль понял — пробовать раздвинуть во всю ширину и стандартизировать, так же, «поиграть» с логотипом.

Структуру содержания — переделываю! Уже вынес основную (потребительскую) информацию выше, разбив блоками, а «страшную простыню» убрал под заголовок «Технические подробности» :) По идее, должно работать «стоп сигналом» для тех, кому это не интересно. На самом деле текст читают, но очень не многие, такие же «гики» как я :) Для того, кто привык читать мануалы к фреймворкам или библиотекам, текста там на самом деле не много :))) Еще нюанс — текст «читают» поисковики. Шансов выйти в топ по высоко частотным запросам очень мало, если контент не несет добавочной информационной ценности. Но да, написание текстов дается мне довольно тяжело и получается не так адекватно как хотелось бы — буду работать в эту сторону!

Новости в первую очередь показывают что сайт «живой» и информация актуальна (не только пользователям, но и поисковикам). С оформлением получается плохо — в две колонки дезориентирует. В одну колонку, с заголовками сверху получается трындец как пусто. С разделением заголовка и содержания немного странно, все еще пустовато, но пока это самый адекватный вариант из всего что пробовал…

Про «топ» — отдельное спасибо, все таки не схожу с ума :)) На самом деле он информативный, там лаконично собраны основные технические показатели. И вроде даже смотрится «прилично», но действительно, то ли однообразный (обезличенный), то ли еще что-то, но да, у меня у самого какое-то грустное чувство что он серый :( Что делать правда — пока не понимаю :)

«Показать раздел» честно слизано с соц сетей :)) Это первые попытки убрать «простыню». Подумаю, может получится как-то более адекватно :)

Оглавления — это вики стандарт навигации по простыням текста :) Прилепил т.к. страницы получились объемными и содержание не всегда интуитивно понятно. Предположил что будет удобно «видеть» о чем речь непосредственно в начале страницы, возможно ошибся :)

Многоколоночная верстка — хорошо подходит для товаров, изображений или чего-то такого. Для информационного содержания я её использовать боюсь т.к. лично меня это мрачно дезориентирует :)) В тех местах, где важен порядок, вводить два направления сортировки (горизонтальный и вертикальный одновременно) — стремно :))

Еще раз большое спасибо за развернутый отзыв!

Топот_Котов

Мне тоже не очень понятно почему бы не выбрать готовый вылизанный шаблон, и его уже не дорабатывать. Да что далеко ходить ☺️

creativemarket.com/templates/websites

Анимации — слишком много. Лучше отключить вообще всю и аккуратно добавлять там, где она действительно будет уместна, расставляя акценты, либо привлекая к чему-то внимание, либо показывая с ее помощью обратную связь в ответ на действия пользователя. Совсем не годится, если приходится ждать, пока анимация отработает, чтобы просто увидеть какой-то элемент.

Kanub

Честно говоря, не вижу здесь дизайна. Веб-дизайн это не цветные полосочки, а максимально доступная и удобная подача информации.

Зато я вижу километровую портянку текста, которую никто не станет читать. Большинство пользователей, увидев такую простыню, закроет сайт до лучших времен, когда будет не так лень читать (т.е. никогда).

Человек должен за несколько секунд, просмотрев по диагонали, понять что это за сайт, зачем он ему нужен и какие у сервиса преимущества. Плюс, опционально призыв к действию.

Над чем работать: нужна четкая структура и иерархия элементов, разделение на смысловые блоки, наглядная инфографика (максимум наглядности, минимум букв). Текст сократить по максимуму или хотя бы убрать под кат особо длинные простыни.

Почему, например, блок новостей идет 2 экраном? Он, что, настолько важен? По-моему ему место в футере, причем размером в 3 раза меньше. А топовых хостеров и результатов их тестов на главной как раз нет, хотя именно за этим сюда идут.

Почему «критерии» занимают целый экран скучного текста? Достаточно просто иконки и того критерия, который сейчас болдом выделен. Описание можно спрятать под кнопку «Подробнее»

На первом экране кучу места занимает картинка, которая не несет никакой смысловой нагрузки, причем она даже не имеет отношения к хостингу. Просто типичное стоковое изображение. Вот зачем она там? При этом заглавный текст «Хостинг Пульс» вообще без подложки.

Как можно оформить 1 экран (для примера):

картинка-подложка (что-то абстрактное из серии big-data или как-то обыграть в фоне «пульс» из названия). На ней большим шрифтом «Хостинг Пульс», под ним что-то вроде: «сравнение производительности хостеров». И кнопка «сравнить», например.

Вместо абзаца текста под шапкой — инфографика.

Так с первого взгляда станет понятно что это за место и что тут можно получить.

Letta

Долго писала, но постаралась собрать все, что показалось мне может подлежать переделке.

Лирическое отступление — мы сейчас в прекрасное время живем, когда дизайнеры уже столько шаблонов наклепали, что бери любой и допиливай под себя. Причем шаблоны с сеткой, шрифтами, картинками и прочими плюшками даже бесплатные.

Ну а уж если так хочется попилить то, что есть сейчас, бросаются в глаза следующие моменты:

Верхнее меню — обнять и плакать. В случае сайтов с центральной частью на 1280 верхнее и нижнее меню растягивается по ширине до бесконечности, а центр остается в фокусе (и никаких скругленных углов меню не видно). Это же касается картинки ниже. В качестве примера могу привести creativemarket.com пресловутый в котором верх сделан именно так, как я говорю. Сейчас смотрится как вырезанный по центру кусок.
С логотипом тоже какая-то душевная боль, я так понимаю его то ли нет, то ли он просто странный и его незаметно, хостинг пульс дожно быть по идее в нем и написано. Иконки разного размера тоже непонятно почему.
Содержимому очень не хватает структуры, сейчас это просто масса текста, которую надо сократить как можно больше и разделить на ключевые моменты. Очень бы пригодилась сетка от того же Бутстрапа, чтобы все было блоками.
Новости лучше делать плашками и подумать нужны ли они вообще.
Выбор хостинга на мой взгляд тоже лучше делать плашками в две колонки.
Дальше ооооооооочень мнооооооого текста, его никто не будет читать, даже те, кому это интересно.
Соцсети иконками в футер и тоже его не по центру выравнивать, а в две колонки (инфо и иконки).
Про анимацию уже писали — местами она необоснована, хоть и в малых количествах может быть полезна.

Это про главную, теперь про остальное.

Топ провайдеров вообще неинформативен честно говоря и опять простыня, хоть и оформленная неплохо, но однообразно, я даже названия провайдеров не сразу нашла. Нужно сразу график какой-то возможно кто самый-самый, а кто ниже всех. Анимация все это жутко тормозит к слову.
Секция где «показать раздел» тоже нуждается в переработке, это должны быть ссылки, в одну строку возможно на трех плашках рядом опять же.
С остальными разделами та же история, никаких оглавлений, это должно быть либо табами, либо еще как-то, но не горой ссылок.
Таблица сравнений в принципе относительно адекватна не считая опять оглавлений.

Вывод: перелопачивать и сокращать всю информацию, представлять ее компактнее и использовать многоколоночную верстку.

Kotob

Спасибо! Постыдно, но содержание уже «в работе» :) Тексты я писал сам «из головы», в редакторе кода, где нет проверки орфографии. Не трудно догадаться, что с пунктуацией дружу «посредственно» :) Попрошу кого-то из более грамотных знакомых проверить тексты!

Alga

Из придиралок — с запятыми проблема, где-то лишние, где-то не хватает. Но если текст тестовый- замечание снимается)

Анимацию я бы убрала, согласна — раздражает, пока читаешь инфу. Сайт информационный, а не развлекательный, лишние блестки ни к чему.

По поводу шрифта — тут Вас поддерживаю, пусть некрасиво, но дружественно, не надо щурится. Тут как очкарик со стажем оцениваю. И надо закладываться на людей с начинающейся возрастной дальнозоркостью, которые пока не дозрели до очков. А таких немало по моему опыту.

Kotob

Спасибо! Полоски переделал так, чтобы выделяли логические фрагменты текста! Про анимацию — да, видимо перестарался, буду думать :)

Kotob

Спасибо! Полоски сделал чуть-чуть потоньше :) Со шрифтами — все не просто, у меня, например, монитор с высоким разрешением, но не очень большой диагональю и читать на нем мелкий шрифт довольно сложно :( Да и адаптивная верстка накладывает свои ограничения — очень тяжело сделать так, чтобы ресурс был «читабельным» на разных мониторах и мобильных устройствах. Да, «раздутый» шрифт не везде выглядит адекватно, но он дружелюбнее к устройствам и людям с не самым хорошим зрением :) По поводу анимации — понял! Подумаю, возможно стоит сделать её более плавной.

Jana_M

Первое впечатление приятное. Вертикальные голубые и зеленые полоски можно оставить для выделения важной информации. Тогда они буду не раздражать, а просто привлекать внимание зрителя к информации. Всплывающие картинки отвлекают от чтения.

ievgeniia

Просто первое визуальное впечатление) Мне не нравятся вертикальные зеленые и голубые полоски-ограничители. Режут глаза и все) Мне было бы удобнее читать более мелкий шрифт. Смущают еще всплывающие отовсюду картинки и графики. Много динамики слишком для моих глаз.

Letta

Продуктовый дизайнер, иллюстратор, амбассадор арт блогов. Приручаю творческих дементоров.

📧 letta@artlab.club

В друзья