Покритикуйте дизайн сайта. Что насчёт структуры?

Question

[Chr0om]

Покритикуйте дизайн, пожалуйста. Говорите прямо, как есть — что не нравится, почему, и как будет лучше. И оцените по 10-балльной шкале, где 7 — хорошо.

Ядро ЦА — женщины и пожилые люди. В первую очередь прошу высказать мнение о структуре. Что касается пропорций, цвета, иконок и иллюстраций, то это всё довольно временно, просто чтобы передать настроение; затем сделаю чуть более адекватно.

Вот интерактивный прототип: https://marvelapp.com/prototype/c8hd1g6
можно полистать, потыкать во всякие кнопки, хоть и не все активные. Чтобы понять какие активные, тыкните на свободное место, и они подсветятся.

Comments

[Андрей К.]

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

[Sacha230]

ты с ориентиром на курсы тильды это дерьмо стряпал? или ссылкой ошибся??

Answer 1

[Kadzi]

Не поленился найти работу дизайнера 2013-14 года:



Вот тут в принципе для людей, а не для ваших немощных ядер. А самое главное: ничего особо лишнего нет, ПОТОМУ ЧТО НЕ НАДО. Это вам нужно то, что вы понавтыкали хаотично в макет, а людям это не надо.

Но это придёт, макетов через 6-10 и с пониманием, что дизайн макетов — логичное завершение всего остального. А после сдачи и запуска таких макетов владельцу придётся все это переделывать, так как там не будет нужных конверсий заявок + не будет хорошей органики (опять, как верно подметили, в том числе из-за того, что ваш "дезигн" обвесят кучей тормознутых плагинов)

Твёрдый нуль. Зиро.

Что делать: почитайте мои ответы на тостере, там концентрат полезной информации, даже с примерами, ссылками и перевёрстками с пояснениями

Comments

[Chr0om]

Привет! Спасибо за комментарий по поводу моего макета, почитал и другие твои ответы. Всё переделал, вот пара вариантов. Буду рад совету.
https://www.figma.com/file/PcfXliws4sGC9RmiotoWlT/...

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

[Kadzi]

Chr0om, Ничего не поменялось, лучше изучите немного вёрстку (есть в ответах ссылки)

[mrasny]

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

[Chr0om]

Kadzi, что значит «не поменялось», если 6 экранов ужались в один? Оставил, кажется, только нужную пользователю информацию. Если нет, то какая ещё не нужна? Или, наоборот, чего не хватает, что осложняет использование сайта, может композиция плохая или ещё что?

И для чего мне изучать вёрстку? Этот макет сложно будет сверстать или что?

[Kadzi]

Chr0om, Вёрстка это не только про кодинг, если вас смутило слово вёрстка. А веб-вёрстку конечно стоит понимать и изучать, как минимум то, как себя будут вести элементы макета на разных экранах. Например, в браузере есть сверху обычно поисковая строка, строка закладок, вкладок. А это уже может "поломать" ваш макет, если он не учитывает этого. Или как минимум он перестает быть одноэкранным.

А потом наступит время, когда вы сможете дизайнить прямо в браузере.

6 экранов ужались в один

А зачем? Сайт это не кирпич. Есть польза — может быть и 15 экранов и 20, и ничего страшного. Да и вообще, мерить экранами это глупо.

Или, наоборот, чего не хватает, что осложняет использование сайта, может композиция плохая или ещё что?

Не вижу смысла объяснять, так как любая ваша переделка сейчас будет с огромным количеством стрёмных решений. Лучше посидите неделю, поизучайте материалы по вёрстке, там есть и другие подборки. Уровень работ неизбежно вырастет. Ну а дальше уже книги, блоги и практика.

[Chr0om]

mrasny, к сожалению, при всём желании, мне сложно слушать этого человека. Я спросил ещё одного работающего дизайнера по поводу своего макета: он сказал, что стоит изменить и как лучше организовать структуру, посоветовал почитать про JTBD. Его сообщение было по размеру равным сообщению Kadzi, но куда более информативным. Я не против, чтобы мне сказали, что дизайн говно и посетителю будет неудобно им пользоваться.. но это зачастую звучит слишком абстрактно, хочется немного конкретики. Ну да ладно.

[Chr0om]

Kadzi, ужал всё в один экран потому, что помещается и, кажется, достаточно свободного пространства между элементами; картинку можно и поуже сделать. Другой дизайнер посоветовал не городить десяток экранов, а как можно быстрее помочь пользователю выполнить его задачу — быстро понять какие услуги оказывает сервис, цены, контакты. Поэтому и спрашиваю о композиции этих элементов.

Спасибо за ссылку, ознакомлюсь. И ещё, скиньте, пожалуйста, свои работы — хочу понять кого слушаю.

[mrasny]

Chr0om, я бы мог посоветовать тебе сперва сконцентрировать на самом главном, что бы ты хотел, что бы твой сайт делал? Обычно люди заходят на сервисы ремонта, что бы как не странно починить свой девайс. Их в последнюю очередь интересует сколько лет на рынке компания, как они любят свою работу и прочее. Это обычно выносят на отдельную страницу, для людей, которым это действительно интересно, любо ставит под основной контент. На главной странице после баннера я бы сделал некий каталог, то есть услуги. Только не так как у тебя это сделано сейчас, я бы сделал более понятный визуал, где видно было бы наглядно какие девайсы могут починить, сколько это будет стоит, какие есть услуги и прочие моменты, которые ведут пользователя по основному сценарию:
1) Найти сайт с ремонтом
2) Узнать могут ли они решить именно мою проблему
3) Узнать сколько стоит
4) Оставить заявку.
А уже потом бы выносил второстепенные элементы такие как "о нас", "отзывы" и прочее, или вообще убрать на другие страницы, а не делать одностраничник.

[mrasny]

Chr0om, Все верно говорит другой дизайнер. Основная задача как можно быстрее дать пользователю узнать и заказать услугу. Так что ты можешь оставить то, что ты сделал в варианте, который кидал в комментах. Что бы у тебя сразу был каталог с услугами. Но наверное стоит переделать там визуал, потому что в 1 варианте, он был лучше

[Chr0om]

mrasny, спасибо большое! После того, как почитал про JTBD, понял, что действительно много лишнего и выглядит перегружено. Поэтому переделал под что-то такое, тут 3 варианта: https://www.figma.com/file/PcfXliws4sGC9RmiotoWlT/...

Посоветуешь что здесь стоит исправить? После выбора сломанного устройства, попапом (или как-то ещё) будет вылезать каталог с услугами и ценами, отсортированный по неисправностям. Всегда будет видна шапка с контактами.

[Chr0om]

mrasny, ох, пока я писал свой комментарий, ты уже ответил на вопрос. Ещё раз спасибо! На сколько по 10-бальной оценишь новый вариант? Только честно. Меня это не демотивирует, а наоборот, поможет понять направление движения.

[mrasny]

Chr0om, если выбирать из 3 этих вариантов, то мне кажется левые, самые интуитивно понятные, хотя бы все еще подумал над кнопками страниц и сделал бы их более "привычными" в самом вверху, так как не зря они находятся обычно вверху и в углах страницы, про это кстати было написано в книгах, которые кидали выше.
Мне кажется можно было бы сделать так, что бы пользователя сперва спрашивали какой его девайс, после выбора, карточки заменялись с девайсов на элементы девайса, например "экран, микрофон, динамик" и так далее, но не забывай, что есть такие проблемы, на который пользователь не может ответит, откуда они взялись, так что последнюю карточку можешь сделать, что то типа "не знаю, помогите". После выбора места проблемы, можешь сразу выводить услуги и их цены или делать еще более глубокую сортировку, тут уже сам решай. Предыдущие выборы бы отправлялись в "хлебные крошки", если знаешь, что это такое.
А еще бы посоветовал сделать какой нибудь главный баннер, возможно переделать сейчас эту картинку с ссылками и написать на ней "ремонт девайсов", что бы пользователь сразу понял где он оказался

[mrasny]

Chr0om, это бесполезно ставить тебе какую либо оценку и спрашивать это же так же не нужно. Никто кроме тебя не ответит на этот вопрос, так как никто не погружен в твой проект и понимает его цели и их выполнение так как ты. Я могу подумать, что ты хотел, что бы твой сайт выполнял n задачу, а ты на самом деле хотел выполнить z задачу. Я могу оценить тебе только визуал...если тебе конечно требуется это, вопрос был все таки про структуру

[Chr0om]

mrasny, по ссылке добавил ещё один экран.. хотя даже я понимаю, что беда с визуалом…

Вообще, я что-то типа информатика и моя дипломная работа в институте — сделать сайт. Но чтобы это не был просто какой-то абстрактный сайт, решил сделать для компании, в которой чинился. И мне хорошо, и им хорошо.

У меня сейчас, к сожалению, нет времени на чтение книг по дизайну.. я бы с радостью изучил всё не спеша, но сейчас задача успеть сделать что-то, на что пользователь не будет реагировать испуганными глазами. Сейчас не стремлюсь к совершенству, достаточно будет, чтобы пользователь сказал: «Хорошо, сайт удовлетворяет мои нужды, он понятен и не отпугивает». Сейчас всё это дело справляется с этой задачей или следует ещё что-то изменить?

[mrasny]

Chr0om, в принципе да, хорошо, уже лучше. Понятно и достаточно стильно. Если не обязательно вылизывать сайт до максимума, можно оставить и так. Единственное, что посоветовал бы как нибудь поменять ховер эффект у карточек, потому что сейчас это выглядит не очень. Текст на картинки это дурной тон

Answer 2

[profesor08]

Если есть адаптив и дизайн построен из готовых компонентов, то хорошо. Иначе два.

Comments

[Chr0om]

Что значит «построен из готовых компонентов»? Я совсем новичок.

[profesor08]

Chr0om, добро пожаловать