Дизайн с нуля: какие основные этапы работы?

Question

[Евгений]

Всем привет!

Недавно была шикарная тема Верстка с нуля: какие основные этапы работы?
Многое почерпнул оттуда, понял что я лох... поплакал... хотел было сменить род деятельности, но сначала решил задать вопрос о "предыдущем" этапе - разработке макета. Ну чтобы уж окончательно... и вперед на завод )

Исходные данные возьмем с того вопроса:

Есть заказ, предположим, что это визитка крупной компании с кучей услуг, которая хочет максимально широко представиться пользователю. Надо сделать макет. Еще ничего не оговорено, ни контент, ни пожелания заказчика, но примем как условие, что заказ отдают вам однозначно.
Как вы выстраиваете свою работу? С чего начинаете? Какие основные и дополнительные этапы всегда присутствуют в вашем распорядке при работе, вплоть до сдачи макета верстальщику? Одним словом – опишите ваш time-line… и как вы его организуете.

Думаю всем будет интересно.

Comments

[Алексей Скляров]

А как вы можете начать свою работу, если вам заказчик вообще еще ничего не рассказал о задании, контента, пожеланий и тд?

[Евгений]

Алексей Скляров,
Хотелось бы объединить эти два этапа в вопросе, т.к. мне кажется они некоторым образом пересекаются.
Предположим, что над сайтом работают два человека, дизайнер (он же общается с клиентом, составляет ТЗ, предлагает решения, рисует макет) и верстальщик.
Или у каждого тут есть менеджер, который все организационные вопросы берет на себя?

Или разбить вопрос на два: работа менеджера и сам дизайн?

Answer 1

[lukoie]

0 заводим асану, и гуглодокс-папку в "проектах" под проект
1 берем из шаблонов заготовку для брифа и клиент заполняет
2 создаем на его основе ТЗ и утрясаем с заказчиком(ЛПР)
3 создаются эскизы страниц
4 на их основе - мокапы
5 на их основе - вайрфрейм
6 прототип
7 создается окончательный продакшн дизайн
8 проводится ДТП, допиливается всё по внутренним стандартам(именование слоев, группы, название файлов, лишний мусор внутри и т.п.)
9 чистится файловый мусор и бекапится
10 передаем заказчику окончательный вариант

теперь пару(но далеко не все) деталей:
- именование макетов важно
- пункты в районе 4-6 в зависимости от величины проекта - опциональны
- в зависимости от задач между 3 и 4 может быть пункт схема юзерфлоу, или визуальная доска связей между экранами, если проще
- на выходе может(а может и нет) формироваться юайкит и фирменный стиль в той или иной компоновке.

Answer 2

[Нерон Лордов]

1. ТЗ - трясем клиента, либо пишем самостоятельно, там в том числе прописываем сроки и порядок оплаты, согласовываем.
2. Работаем.
3. Сдаём работу, получаем правки, возврат в п.2 в рамках п.1, loop.

Инструменты кратко описаны тут, философия и напутствия тут.

Answer 3

[vanyamba-electronics]

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

Первое, что нужно определить - это приоритетность работы с данным заказчиком.
1) Много денег за небольшое время.
2) Мало денег за небольшое время.
3) Много денег за большое время.
4) Мало денег за большое время.

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

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

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

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

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

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

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

Работа над логотипом и фирменным стилем занимает некоторое время, но дизайнерской работы там немного. В основном встречи и эскизы. Зато производство айдентики - это много работы, и ради этого есть смысл провести первый этап (подготовительный). Потому что по его итогам и дизайнер знает, что хочет заказчик, что заказчику нравится, и заказчик знает, чего ждать от дизайнера.

Answer 4

[Матвей Правосудов]

Ну, поехали.

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

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

3. Формируем ТЗ в каком-то виде, бюджет, планирование, спринты, вот это всё. Этап сложный, тянет на отдельную статью, потому что у всех по-разному.

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

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

5. Дизайнер рисует черновые макеты, собирают презентацию в каком-то виде (например, буквально презу или прототип), голые картинки показывать нельзя. Когда прототипы согласованы — начинает пилиться бек, если он есть.

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

7. Дизайнер согласует макеты с командой разработки. Наверняка придется что-то подправить или дорисовать несколько состояний. Потом чистит исходники, готовит стайлгайд с состояниями кнопок/ссылок и т.д. Тут приходит фронт-энд и фигачит верстку.

8. Когда верстка и бэк (если есть) готовы — дизайнер и тестировщики (если есть) смотрят на готовый продукт и проверяют его. Главное — чтобы продукт решал задачу пользователя и работал (приносил деньги/клиентов). Ну и на визуальное оформительство можно глянуть.

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