Задал вопрос Артёму Горбунову и попал в подготовительный курс Школы Бюро

Задал вопрос Артёму Горбунову и выиграл участие в подготовительных курсах Школы Бюро.

В Бюро Горбунова есть рубрика советы, куда каждый может задать вопросы на различные тематики: редактура, интерфейсы, верстка и получить ответ от профессионала.

Артём часто разбирает вопросы общие вопросы, которые не относятся к верстке или редактуре.

Мой вопрос:
«Как-то я слышал фразу: „Если человек занимается своим делом, то оно дается ему легко и он быстро добивается успеха.“ Как вы считаете, верно ли это утверждение? Или путь к успеху в своем деле должен быть долгим и тернистым.»

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

Артём дарит книги и курсы авторам, чьи вопросы показались ему самыми интересными.


Курс длится 3 недели, о процессе расскажу по мере прохождения.

Ссылка на видео, начиная с моего вопроса.
https://www.youtube.com/watch?v=ZKOC-Wu5IB0&t=17

Подготовительные курсы Бюро: https://bureau.ru/school/prep/

Видео с ответом

Рекомендации по улучшению дизайна Biomass

Глобально — проблемы с близостью.

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

Нужно прочитать про теорию близости у Лебедева и вводную главу в книге «Типографика и верстка» Артема Горбунова. После этого пройтись по всем элементам дизайна и поправить проблемы.

Проблемы

Общие

  1. Учитывая внешний вид других иконок, соц. сети в голубых кругах выглядят чужеродно.
    http://joxi.ru/E2pxWb1TaGk9l2
  2. Таким цветом хорошо выделять цвет ошибки, но не подпись. Учитывая, что остальной текст в секции написан белым. Создается ненужный акцент.
    http://joxi.ru/p27y6o9fWNVWlr
  3. Круги можно убрать, они лишние. Иконки выглядят чище без них
    http://joxi.ru/MAja7poIxky112
  4. Название колонки ближе к разделительной полосе и брендам, чем к собственным ссылкам
    http://joxi.ru/823Xn5xUD8B8xA

Главная

  1. Визуальный шум. Много элементов: 3 летающие гантели, мужик, девушка на фоне в заголовке, кнопки назад-вперед, замеры на фоне.
    http://joxi.ru/v298dNPCzpbdvm
  2. Новинки находятся ближе к верхним плашкам, чем к товарам под ними.
    http://joxi.ru/EA4xn6zTOpRDVA
  3. Почему не спроектировать карточку товара так, чтобы сразу показывать эти элементы? Я не подразумеваю, что они появятся, это не общепринятая практика.
    http://joxi.ru/KAxqdjoI1KoM8r
  4. Если это стрелка слайдера — проследите, чтобы она не висела на товаре.
    http://joxi.ru/a2XoaOZUD4O1km
  5. Расстояния от категории ближе к краю секции, чем к ссылкам.
    http://joxi.ru/Dr87WNyTzMbo0A
  6. Название товара ближе к Имени и дате, чем к тексту отзыва
    http://joxi.ru/52aDNRzHbkybom
  7. Если бренды отдельная секция — нужно сделать ей соответствующие отступы и дать заголовок
    http://joxi.ru/RmzMKzxuRMbMVr
  8. При первом просмотре ловишь себя на мысли «Это разве заголовки? Тут есть другие надписи, которые выглядят важнее» Они выделяют важную инфу, почему они такие скромные?
    http://joxi.ru/zANopkYU6jqgkr

Каталог товаров

  1. Не понимаю смысл такой стилизации. Все строки и элементы внутри раздроблены, смотреть не приятно, читать тем более. С отступами беда. Последняя строка ближе к краю, чем к соседней строке.
    http://joxi.ru/bmoX6vzU9ybOe2
  2. Слишком зажат заголовок. Он словно в забитой маршрутке. Нужно увеличить расстояние сверху и снизу, раза в 3−4.
    http://joxi.ru/Dr87WNyTzMbDPA
  3. Каталог товаров находится над статьями слева и категориями справа. Так как он находится сверху, он их обрамляет. Это создает связь между названием страницы и то, что расположено на ней.
    Проблема в том, что статьи слева это не каталог товаров, это не относящиеся к странице элементы. Они не должны быть обрамлены заголовком. Заголовок нужно сместить вправо.
    http://joxi.ru/V2VoRYLUKknGlA
  4. С первого взгляда не понятно, что это такое и куда можно кликнуть. Название ближе к картинке, чем к ссылкам. Кнопка «еще» на таком же расстоянии, как и ссылки между собой. Категории не выделены ссылками, я не знаю, что на них можно нажать.
    http://joxi.ru/8Ann5BoT7yv0xA

Список магазинов

  1. Из-за нарушения близости кажется, что список магазинов это колонка слева, а справа неизвестные элементы. У заголовка отступ сверху должен быть больше, чем снизу. Расстояние между левой и правой колонкой должно быть меньше, чем до заголовка сверху.
    http://joxi.ru/n2YoROaUZeK5Gr
  2. Есть проблема, так сказать «дыр» в интерфейсе. Колонка слева забирает ширину страницы, но в ней всего 3 элемента. Строка с магазином растянута на всю ширину и между элементами образовались дыры. Что тут можно сделать: фильтрацию и переключение сделать горизонтальными. Деление на колонки пропадет. Сделать сетку магазинов. Ширина строки с магазином будет 50% и дыры пропадут. Это будет более разумное распределение пространства.
    http://joxi.ru/v298dNPCzpbY6m
  3. Проблема с близостью, расстояние между блоками информации у магазина больше, чем от правой части контента до левой.
    http://joxi.ru/bmoX6vzU9ybj72

Заказы

  1. По одной иконке сложно понять, что вкладка активна. Лучше сменить фон у элемента с иконкой и названием.
    http://joxi.ru/Y2LopkYUQEN8Wm
  2. Как и на других страницах. Проблема близости
    http://joxi.ru/KAgL7WoTXKqVzr
  3. Я пробовал сместить их ближе друг к другу, выглядят намного собраннее. Здесь слишком большое расстояние между ними. Выглядит словно забор с выбитыми досками.
    http://joxi.ru/bmoX6vzU9ybQ72
  4. Количество ближе к самовывозу, нежели к названию товара. И другие проблемы близости.
    http://joxi.ru/l2ZoneRUE7neXA
  5. Проблема с проектированием этой секции. Сейчас есть 3 столбца, я разделил их на: заказ, состав и побочная информация. В первом есть айди и дата, во втором столбике статус и состав, в третьем одиноко стоит способ доставки. По факту первое, что пришло в голову — разделить на информацию о заказе и состав. Слева: номер заказа, айди, статус, стоимость доставки. Справа: состав заказа.
    http://joxi.ru/8Ann5BoT7yvnbA

Аудит дизайна интернет-магазина для компании «Агромир»

Рекомендации по дизайну

  1. Иконки не помогают понять контакты.
    http://joxi.ru/5md6NQYCe81BPA
    http://joxi.ru/vAWoRyKUqOKWdA
  2. Если такой фирменный стиль — ок, а так такие эффекты для кнопки устарели давно.
    http://joxi.ru/Dr87WNyTzMnbNA
  3. В дизайне лучше использовать реальные названия и описания.
    http://joxi.ru/eAOo0DYUpkEzBA
  4. Нужно попробовать другие варианты компоновки шапки. Сейчас что-то по центру, что-то по левому краю. Ощущение несобранности и плохое использование пространства.
    http://joxi.ru/vAWoRyKUqOKN5A
  5. Первое впечатление — грязный градиент. Не вызывает мысли о том, что это мрамор.
    http://joxi.ru/zANopkYU6jxPVr
  6. Нарушено правило теории близости: название категории ближе к заголовку, чем к своим ссылкам. Внутренние поля ссылки меньше внешних.
    http://joxi.ru/p27y6o9fWNEzxr
  7. Темный текст плохо читается на сером фоне. Зачем нужен был градиент у ссылки? Он только ухудшает читабельность.
    http://joxi.ru/5md6NQYCe81zRA
  8. Эта ошибка называется «подмышка». Картинка заставляет пользователя смещать линию чтения. Это ухудшает восприятие.
    http://joxi.ru/ZrJoOpYUMnejxm
  9. Я понимаю, что дизайнер выровнял текст в этом элементе по тексту описания. Но сам элемент выглядит неопрятно из-за нарушения внутренних отступов.
    http://joxi.ru/KAgL7WoTXKeMBr
  10. У отступов нет контраста, они примерно одинаковые. Это создает мешанину в описании. Непонятно что к чему относится.
    http://joxi.ru/1A5kQWxTGbkMzm
  11. Кнопка не отцентрирована.
    http://joxi.ru/KAxqdjoI1KqaPr
  12. Отступы между элементами больше, чем отступы всей карточки
    http://joxi.ru/n2YoROaUZeVN4r
  13. Тоже, что и в 13 пункте, но еще заметнее из-за текста.
    http://joxi.ru/DmBj1xLTz4PbBm
  14. Грязный фон, на котором не читается логотип, иконки, текст.
    http://joxi.ru/52aDNRzHbkZOwm
  15. Слишком размытое изображение, не понятно что там.
    http://joxi.ru/brRoEY5UYOVeam
  16. Здесь текст выровнен по левому краю, а все остальное по центру. Лучше выделить по левому все, так лучше читается.
    http://joxi.ru/4AkR0GoCXk1Oy2
  17. Бренды должны быть на отдельной странице или отдельной секции под категориями. Я читаю заголовок «Категории», а слева в этом время лезут бренды, которых я не жду в категории товаров.
    http://joxi.ru/vAWoRyKUqOKbdA
  18. Нарушено правило теории близости.
    http://joxi.ru/krDo1xlUJ4LpVA
  19. Из-за декоративных элементов заголовок кажется лишним, словно он не относится к этой секции.
    http://joxi.ru/brRoEY5UYOVKam
  20. Синяя активная точка на синем фоне — не лучшее решение. Ее не видно.
    http://joxi.ru/L21OpRzCg0VPqr
  21. С лету не понятно, что это товар, что можно на него навести мышкой и получить какой-то отклик. Я бы кнопку разместил по умолчанию и не делал такого появления.
    http://joxi.ru/gmvN67vTv1B94m

Возможные способы исправления

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

Номера в заголовке совпадают с номерами проблем в списке сверху.

Картинки по ссылкам можно приблизить и рассмотреть детали.

5, 6, 7 — панель с ссылками сбоку

http://joxi.ru/5md6NQYCe81jeA

  1. Поменял цвет фона на синий
  2. Убрал декоративный элемент слева внизу
  3. Поменял цвет текста на белый, поправил отступы внутри
  4. Отделил название «Техника» линией и отступами.

8, 9, 10 — описание товара

http://joxi.ru/zANopkYU6jZJBr

  1. Убрал слово «основные преимущества», так как это бессмысленный текст. Назначение, высота и особенности модели это не преимущества, это свойства любого товара
  2. Переместил заголовок в правую часть. Теперь текст находится в одной области и его удобно считывать
  3. Отредактировал отступы между блоками с информацией о товаре
  4. Изменил цвет текста о количестве купивших на синий, так как красный воспринимается как сообщение об ошибке

11, 12, 13, 19 — похожие товары

http://joxi.ru/Y2LopkYUQEL9wm

  1. Поместил заголовок внутрь секции
  2. Убрал декоративные элементы
  3. Отредактировал отступы внутри карточки
  4. Отцентрировал текст в кнопке
  5. Сделал заголовки товаров синим цветом, чтобы дать понять, что это ссылка

14 — подвал

http://joxi.ru/a2XoaOZUD4awpm

  1. Заменил фон на белый
  2. Убрал лишние иконки
  3. Сделал текст номеров и почты синим, чтобы было понятно, что это ссылки
  4. Поправил отступы между ссылками

15 — Размытое изображение

http://joxi.ru/E2pxWb1TaGX7D2

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

20 — точка в слайдере

http://joxi.ru/L21OpRzCg0OgBr

  1. Изменил цвет активной точки на белый
  2. Изменил цвет обычной точки на темно-синий, чтобы был эффект «вдавливания»

1, 2, 4 — шапка сайта

http://joxi.ru/82QlpqQiy9d3Bm

  1. Убрал грязный серый цвет
  2. Убрал лишние иконки у номеров и почты
  3. Сделал поле поиска больше, в интернет-магазина часто ищут товары там
  4. Сделал меню крупнее и выделил активный пункт, чтобы пользователь чувствовал себя увереннее. Так он понимает, где находится
  5. Изменил цвет текста с бледно-голубого на белый для лучшей читаемости

Проекты по дизайну

Сайты

  1. Проект «Психосоматика»
  2. Сайт туристического агенства. Работа для конкурса.
  3. Додо Рифма
  4. Редизайн сайта для рекламного агенства
  5. Дизайн лендинга для компании по продаже развивающих игрушек
  6. Редизайн страницы-подписки клуба «Рост»
  7. Дизайн интернет магазина по продаже дверей
  8. Дизайн и верстка формы для опроса Shapdesk
  9. Промо-сайт пасхального кулича
  10. Дизайн лендинга для компании по вывозу лома
  11. Дизайн сайта для выставки картинной галереи
  12. Дизайн лендинга для нумеролога-консультанта
  13. Дизайн лендинга для компании по продаже Hyper-shop
  14. Дизайн экрана для детальной страницы товара

Социальные сети, баннеры

  1. Дизайн баннера для компании Krasnodar-room
  2. Редизайн обложки для мероприятия
  3. Оформление группы для компании по продаже машинок Hyper Shop
  4. Дизайн обложки ВК для авто-школы «Олиса»
  5. Оформление группы для своего блога
  6. Дизайн аватара для группу
  7. Оформление группы «Псковская дверная фабрика»

Письма, объявления

  1. Дизайн письма для компании Shapdesk
  2. Верстка объявления