Как я нарисовал таблицу Менделеева для заказчика, сделав один из своих самых интересных проектов

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

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

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

Им стала школа веб-дизайна «UPROCK», в которой с недавних пор практикуется новый формат — совместная работа над коммерческими проектами.

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

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

Начать стоит с того, что сфера металлопроката в России — одна из самых консервативных отраслей в плане UX/UI дизайна.

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

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

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

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

И первым абстрактным запросом заказчика стала необходимость достижения эффекта «ВАУ» при взгляде на обложку сайта. Ее мы и разберем в этой статье.

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

Однако, вариант заказчика не устроил и нужного эффекта «ВАУ» он не произвел. Что было ожидаемо, ведь на это было несколько причин:

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

Основная идея этого концепта — новый элемент таблицы Менделеева. То есть дополнение существующей таблицы новой 119-й ячейкой «NE», которая бы символизировала название фирмы «НЕКСУС».

В дополнение шли бессмысленные цифры наподобие вымышленного веса элемента и его номера в периодической таблице. Слоган звучал так: «Ваш главный элемент».

— Как с этим работать? — Думал я в тот момент.

С самого начала концепт заказчика показался мне странным по нескольким причинам:

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

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

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

Заказчику вариант понравился, однако я понимал, что такой кейс нельзя будет показать в своем портфолио. Потому что получилось сумбурно и неэстетично. Но что делать в тот момент и как убедить заказчика отказаться от идеи с таблицей, я не знал.

В итоге я решил заняться поиском альтернативного варианта обложки, вызывающий тот самый эффект «ВАУ». Основой послужило одобренное заказчиком в предыдущем варианте фото с металлическими трубами.

Переставив композиционно элементы так, чтобы они более удачно сочетались, я представил концепт, который уже удовлетворял запросы заказчика и мои собственные пожелания:

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

Настало время отправлять этот концепт в школу веб-дизайна «UPROCK», но тут меня ждал еще один виток трудностей.

Школы дизайна в России только обретают свою популярность и еще не успели «набить руку» во многих сферах, в том числе в работе со студентами над коммерческими проектами.

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

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

Основная проблема в том, что при отсутствии верстальщика такой проект придется реализовывать самому на Тильде или Webflow. И, не обладая сильными навыками в написании вставок html/css для сайта, многие решения школ дизайна становятся нежизнеспособными.

В этих условиях становится практически нереально угодить заказчику, ведь каждое новое решение приходится пересогласовывать. Кроме того, всегда существует риск, что принятое решение невозможно будет сверстать.

Школе веб-дизайна «UPROCK» не понравился утвержденный макет, поскольку он показался «простым» и «грязным» из-за наличия фото на обложке. Хотя в реальной практике такой сайт был бы красив и жизнеспособен. Подобные примеры можно увидеть в портфолио ведущих студий, к примеру, у «AVA Digital».

Тем не менее, школа дизайна предложила свое видение концепции:

Стало очевидно, что школа желает видеть вместо фотографии интересный 3D-объект. Помимо этого, поступило предложение поэкспериментировать с композицией и разместить элементы нестандартным образом.

Заказчику данный вариант не подошел, так как 3D-элемент не демонстрировал целевую для компании продукцию, а также смотрелся странно в общем контексте.

По итогу я оказался в ситуации, когда один макет нравился мне и заказчику, но не устраивал школу, а другой макет нравился только школе.

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

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

Зачастую мне либо не подходили решения заказчика, либо решения школы. Где-то была нереализуемая верстка, где-то слишком сложная визуализация, где-то самому казалось просто и скучно. В итоге, перебрав более 15 различных вариантов, я смог решить эту дилемму.

Прежде всего, необходимо было объединить все требования в одно ТЗ, чтобы соответствовать представлениям всех сторон. К своим пожеланиям мне пришлось добавить:

И наконец-то, спустя неделю, мне удалось создать тот макет, который без вопросов приняли все стороны:

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

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

Если вы дочитали мою статью до конца, не забудьте заглянуть:

До новых встреч!