Страница о кухне — курсовая для Школы руководителей

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

Мой рассказ будет полезен студентам Школы бюро и тем, кто хочет делать более качественные сайты.

Условия задания

Задание — сделать новый дизайн сайта магазина мебели.

Image for post
Image for post
Так выглядел сайт до нового дизайна.

Задач две: 1) донести, что конкретно делает компания; 2) снизить телефонную нагрузку на менеджеров.

Есть гипотеза, что проблема в доверии: людям кажется, что это какой‑то сторонний сайт, а не компания, у которой можно заказать себе что‑то конкретное. В каталогах путаница. Клиенту нужно показать, что у компании большой ассортимент, размеры мебели меняют на заказ, при этом из компании приезжают всё замерить и установить. Не везде понятно, как размеры влияют на стоимость — а клиентам не хочется вызывать замерщика, пока не появится представление об уровне цен. Ещё непонятно, как пользоваться корзиной.

Менеджерам звонят с «глупыми» вопросами: а можете ли вы собрать мебель по моим предпочтениям (это есть на сайте), а сколько это будет стоить (это будет понятно только после замера). Хочется сделать так, чтобы человек хотя бы ориентировался в услугах по сайту, а звонил только с такими вопросами, ответа на которые на сайте нет.

Директор волнуется, как бы сайт не стал перегруженным — уже и так много позиций. Но надо всё сохранить.

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

Что у меня получилось

Image for post
Image for post

Как я делала страницу

Я знала, что работу будет оценивать Илья Бирман. Мне нужно было сделать так, чтобы результат соответствовал не только заданию, но и вкусам Ильи.

В Телеграме есть канал «Бирман посмотрел» — там Илья комментировал работы прошлых наборов. Я посмотрела все работы и выписала комментарии в блокнот. Получился длинный чек-лист, которому я следовала.

Нарисовала на бумаге несколько эскизов. Определилась с тем, что должно быть на странице. Важно, чтобы были красивые, крупные фотографии. Оказалось, что найти много качественных фотографий одной кухни очень сложно — это проблема большинства магазинов, особенно в СНГ. Гуглила несколько часов, в том числе на английском, пока не нашла подходящие.

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

Чтобы было красиво, за основу взяла верстку Шопфанса.

Работа заняла 75 часов.

Как оценили преподаватели

Илья Бирман

Преподаватель дисциплины «Интерефейс и информация».

Оценки: идея 5, логика 4,5, эстетика 4,5.

Комментарий: «Крутяк».

Работа по баллам в числе лучших на потоке. Радостно и приятно, но это закономерно, так как я делала так, как нравится Илье.

Михаил Нозик

Преподаватель дисциплины «Типографика и вёрстка». Очень подробно прокомментировал верстку.

Комментарий: «Аккуратно в плане вёрстки, но с полезным действием, увы, промашка».

Проблемы

1. Очень развесистая плашка.

Image for post
Image for post

Можно было бы сделать её в два раза меньше по высоте. Сейчас она даже победила меню и выглядит как постоянная часть сайта.

2. Пункты меню не кликабельны на вид.

Image for post
Image for post

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

Image for post
Image for post

3. Тут опять как-то очень просторно по вертикали.

Image for post
Image for post

Кажется можно спокойно всё поджать. Я бы даже попробовал поставить заголовок под первую фотографию и кнопку заказа поставить напротив него. И цену где-то там же. Сейчас у вас и кнопка, и цена потерялись.

4. Подписи с маленькой буквы. Нет никакой причины писать их с маленькой буквы.

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

6. Реализовать такую раскладку будет довольно тяжело. Просто представьте, что вам нужно распространить ваш дизайн на ещё 100 или 500 аналогичных страниц. А что вы будете делать, если не везде есть столько фоток? А если где-то надо показать побольше фоток?

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

Витраж из фоток подавил последовательный внятный рассказ о кухне. Всё-таки кухня — довольно утилитарная штука и одних красивых картинок недостаточно, чтобы решиться на покупку.

Если попытаться посмотреть на страницу глазами покупателя, который пришёл за кухней, то станет понятно, что изучать страницу очень тяжело, потому что информацию приходится собирать по крупицам из кучи разных мест: текстик тут, подпись там, фоточка сям, цена где-то ещё. Формат витража просто не очень подходит для того, чтобы рассказать об одном конкретном товаре.

А ещё представьте, что покупатель хочет посмотреть несколько таких страниц. Кажется, что ему придётся играть в игру «Найди на фотографиях все подписи».

Некоторые студенты размещают на странице галерею с фотографиями. При вёрстке ребята ориентируются на совет Артёма Горбунова о вёрстке галерей: https://bureau.ru/bb/soviet/20141027

Формат витража просто не очень подходит для того, чтобы рассказать об одном конкретном товаре. Помню, Артём описал этот формат, когда мы делали вторую версию сайта Мэри Трюфеля с каталогом свадебных платьев: https://bureau.ru/projects/marytrufel-2/

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

А вот на странице конкретного платья мы использовали уже другую структуру: фотографии идут ровным рядом, а информация о платье и цена стоят отдельно, не смешиваясь с ними:
https://marytrufel.ru/svadebnoe-plate-natalya-romanova-layma

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


Точно также мы работали с каталогом машин и страницами конкретных тачек на сайте Энви:
https://bureau.ru/projects/envy/

Информация на странице конкретной тачки разложена по полочкам: главное описание и ключевые данные отдельно в заметном слое, а дополнительные фичи идут уже как-то немного вперемешку с фотками, потому что не так важны:
https://envy.rent/rent-tesla-model-x-90d-2017-honolulu-haw…/


Та же история на сайте Лавишустринга:
https://bureau.ru/projects/lavishshoestring/

Описание и название товара заняли свой этаж, а дополнительные фотографии встали ниже:
https://bureau.ru/projects/lavishshoestring/images/red.jpg


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

P. S. Ещё некоторые студенты при выполнении этого задания допускают другую ошибку: так обильно увешивают страницу всякими фильтрами, свистульками и дополнительными фактами, что сам товар перестаёт быть видимым. Но это другая история.

Максим Ильяхов

Преподаватель дисциплины «Информационный стиль и редактура»

Комментарий: «В целом клево».

Image for post
Image for post
Человечков не хватает.
Image for post
Image for post
Ни швов, ни доводчиков не видно.
Image for post
Image for post
Ну такое, спорно. Всё слишком мелко и дробно, нет ощущения изобилия.

Вроде картинка с кучей всего, но так как везде куча всего, нет контраста.

Image for post
Image for post
Слишком тесно.
Image for post
Image for post
И что?
Кайф.

Выводы

  1. У каждого преподавателя свои критерии оценивания. Сложно угодить всем и всегда есть пути для роста.
  2. Чтобы получить хороший балл, учитывайте моменты, которые ценит преподаватель.
  3. Чтобы продать продукт, важно его красиво показать. Онлайн-продавцам нужно вкладываться в качественные фото и видео.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store