Так ли нужны Веб дизайнеры ?

Работая веб-разработчиком, приходится постоянно взаимодействовать с ui/ux дизайнерами. Они создают макет в каком либо редакторе (Figma, Sketch, XD), в свою очередь твоя задача сверстать этот макет. Раньше, каждый раз при виде нового интерфейса, я задумывался как все это можно придумать? Ведь мне, человеку, который в основном просто переносил “идею” на html, было не понятно откуда в головах дизайнеров постоянно берутся новые идеи, новые варианты того как тот или иной компонент должен выглядеть. Неужели они такие все из себя особенные, что могут придумать что-то красивое, а я зависаю даже когда нужно решить, стоит ли использовать инпуты с закругленными уголками или с прямыми.

Поэтому было принято решение спросить одного из наших дизайнеров, как она вообще это делает. К счастью ответа “Я так вижу”, не было. А было что-то вроде: “Смотрю сайты конкурентов, изучаю уже существующие примеры, пользуюсь свои опытом”. Посмотреть как делают другие ? Кажется что это на столько очевидно, но когда впервые пытаешься придумать дизайн к своему сайту, то совершенно не задумываешься об этом.

Попробовал. И получилось очень даже годно (Ещё бы, чужой же дизайн с разных сайтов использовал)

Так что, неужели все так просто. Так ли уникальны навыки ui/ux ? Можно ли сейчас обойтись без дизайнеров и как обстоят с ИИ в этом направлении? Эти вопросы, мы постараемся обсудить в данной статье. Давайте приступим !

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

Давайте разберем их по порядку.

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

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

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

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

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

Каждый блок – это страница, а цветные прямоугольники внутри каждого блока являются ссылками на другие страницы.

К примеру на рисунке выше страница “TV Show” содержит 3 ссылки “Channel List”, “Recipes”, “Videos”. Эти ссылки могут находиться в шапке, в футере или еще где-то, главное, что они должны быть. Вопрос того, где конкретно они будут находиться, будет приниматься на следующем этапе проектирования макета.

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

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

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

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

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

Создание прототипа страничек – это финальный этап, по завершению которого мы должны получить набор готовых макетов. При помощи этих макетов программисты уже смогу сверстать сайт. Разработку прототипа странички можно разбить на 2 части:

Разберем каждый из них.

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

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

1) Правила компоновки элементов.

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

2) Примеры из интернета

Введите в поисковую строку запрос “Дизайн кнопок для сайта” и получите большое число примеров кнопок различных форм и цветов, посмотрите несколько вариантов и используйте понравившийся вариант, либо создайте свой объединив параметры из разных примеров. Вот один из примеров таких ресурсов - dribbble.com. А если вы знаете что такое Figma, то наверняка и слышали про Figma Resources – здесь вы можете найти не только дизайн компонентов, а даже дизайн целых страниц и сайтов.

Не знаете как и куда разместить блок текста или картинку ? Зайдите на сайт вашего конкурента. Скорее всего у него уже есть необходимые вам компоненты и разделы. Сделайте так же как и он. Это повысит user experience, т.к пользователи уже привыкли к такому расположению элементов, а значит у них не возникнет трудностей с освоением вашего сайта или приложения.

3) Личный опыт

По большому счету это “Примеры из интернета”, которые закешировались у вас в голове. Возможно с небольшими искажениями.

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

Давайте попробуем написать псевдокод ИИ-дизайнера, на основе тех задач, которые в основном решают в среде ui/ux, опуская при этом второстепенные задачи. Как мы выяснили ранее, дизайнеры работают по 2-м основным направлениям: разработка архитектуры и разработка прототипа. Поэтому в нашей программе будет 2 функции.

model = developArchitecture(file, description)

prototype = developPrototype(model)

Проблема в следующей строчке: "Создать макет для каждой страницы". Обычные алгоритмы не умеют создавать что-то из ничего. Любая стандартная программа, описывает как преобразовать данные из одного формата в другой.

Выглядит очень реалистично, учитывая, что это фотографии несуществующих людей. Эти фотографии созданы нейросетями.

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

The Grid

Идея алгоритмического дизайна не нова, еще в 2014 году The Grid представила эту идею на Techcrunch.

И даже смогла привлечь 4 млн. долларов инвестиции под этот проект, а в 2016 году выпустила официальный релиз приложения. К сожалению попытка была неудачной. Пользователи расcчитывали избавиться от головной боли по созданию дизайна, однако получили еще больше проблем. Первая версия приложения давала создавать дизайн, но имела довольно скудный функционал по “доведению до ума”. Из за чего большое число пользователей просто не получали желаемого результата сразу, при этом единственным способом исправить это - было создание нового дизайна, который опять не удовлетворял пользователей. В итоге The Grid не решал проблему, ради которой и был создан.

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

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

UKit

Второй представитель инноваторов в этой области. Ребята из UKit не стали делать сложный продукт по созданию дизайна с нуля, а сосредоточились на “Обновлении старого дизайна”. Не могу сказать на сколько их стратегия была успешней, но сайт компании не выглядит имирающем.

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

Что думаете об этом вы ? Готов пообщаться об этом в комментариях.