7 заметок с тегом

как создавалось

Как создавался плакат к «Интеллигентной барахолке»

В конце прошлого года «Интеллигентная барахолка» устроила конкурс плакатов. Мы решили в нём поучаствовать.

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

Сначала Ольга Миронова придумала идею — распечатать Фриду Кало, расставить на ней что-нибудь сверху, сфотографировать всё это дело и подставить текст в Фотошопе.

Напечатали постер на А3, разложили на нём всякое:

Сфотографировали результат:

Заметили, что внизу мешает белая плашка: текст на неё толком не поставишь — будет мелко, а внимание она отвлекает. Поэтому убрали её. Было:

Стало:

Дальше я предложил Игорю Штангу выступить арт-директором проекта и помочь мне с расстановкой текста на макете. Игорь согласился. Я показал ему, что пока получается:
frida-process5.jpg

Игорь ответил: «Очень плохо». Сказал, что текст нужно сделать чёрным, а картинку поставить по центру. И натолкнул на мысль использовать шрифт попроще.

Делаю второй заход:
frida-process6.jpg

Игорь пишет:

Так получше. Я думаю, тут подойдут такие схемы:

I. Текстовые блоки более-менее равномерно занимают пространство вокруг иллюстрации. Один блок большой и темный (название), другие светлые и мелкие, но тоже отличаются между собой. Некоторые тексты можно попробовать набрать вертикально. Или разбить какое-нибудь длинное слово на несколько строк.
frida-process7.png

II. Название над иллюстрацией и повторяет ее форму. Остальные блоки более-менее равномерно занимают боковые поля:
frida-process8.png

Изучаю примеры, думаю и решаю идти вторым путём. Показываю арт-директору, что получается:
frida-process9.jpg

Арт-директор обращает внимание на мелочи:
— Фрида врезается в заголовок.
— Четыре блока снизу можно попробовать выровнять по центру белых «полей».
— Необязательно делать текст таким симметричным.
— Два блока сверху очень похожи друг на друга.
— Хорошо бы добавить на плакат иконок или других графических элементов.

Отрисовываю Люмьер-Холл — место, где пройдёт мероприятие.
frida-process10.jpg

И пробую использовать его в качестве иконки, попутно меняя макет:
frida-process11.jpg

Игорь присылает ответ:

«Иконки ок, часы не очень.

Люмьер-холл нужно чёрным, а не серым.

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

Буквы в заголовке сверху нужно ближе друг к другу, там „пружина“ растягивается».

Вношу изменения. Арт-директор указывает на близость текста с иллюстрацией:
frida-process12.jpg

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

До:
frida-process5.jpg

После:
Плакат для Интеллигентной барахолки, 2016

P. S. Спасибо всем, кто помогал и поддерживал.

Как создавался сайт «На уровне»

Необходимо разработать сайт бригаде сантехников, электриков, сварщиков и отделочников из Санкт-Петербурга.

Изначально клиент просит сделать два акцента: на сантехнические работы и работы по электрике.

В этот раз работа начинается с написания текста. А написание текста начинается с того, что мы задаём вопросы нашего копирайтера Сергея клиенту. Из ответов Сергей пишет черновой текст, посмотрев на который, создаём примерный дизайн будущего сайта.

Показываем промежуточный итог заказчику:

Клиенту нравится дизайн-подход и не нравится подход к тестам. «Да», — говорим, — «текст пока и не может понравиться — это же Черновик Черновикович — лишь далёкий предок Итога Итоговича Текстова.» Клиент просит добавить ещё два акцента: на сварочные и отделочные работы.

Также клиент просит придумать название для сайта: «Хочется объёмное слово, которое можно было бы трактовать по-разному. Например, слово „уровень“. Оно может означать уровень мастерства, подразумевать строительный уровень и так далее.» Важно, чтобы под придуманное название можно было купить созвучный домен. Копирайтер придумывает название «На уровне» и сообщает, что домен na-urovne.com не занят. Клиенту нравится название.

Потом Сергей присылает новую версию текстов. По мнению клиента, и сейчас получилось «сыровато». Меняем писателя, добавляем детали и уточнения в текст:

Кстати, тексты мы пишем в Документах Гугла — это удобно: документами легко делиться, они доступны с разных устройств, все изменения в них сохраняются.

Всё это время дизайн-макет меняется в соответствии с новой информацией:

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

Дизайнер тем временем рисует с помощью сервиса favicon.ru фавиконку к сайту:

Запускаем: http://visor-v.ru/all/na-urovne.

2014   дизайн   как создавалось   на уровне   наш дизайн   скриншоты

Как создавался сайт «Умной электрики»

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

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

Приступаем к созданию фона. Находим на сайте Библиотеки паттернов картинку про метро и переделываем её в паттерн про провода:

У клиента нет логотипа. Решаем набрать слова «Умная электрика» шрифтом «Стими» (Steamy), встреченным когда-то у Джованни Лемонада. В этом шрифте шестерёнки, электрическая вилка и другие мелочи, подходящие к нашей теме.

Делаем несколько блоков, по которым посетитель будущего сайта сможет быстро ориентироваться. Пишем тексты, находим иконки для каждого из блоков на «Ноунпроджекте».

Не нашлось подходящей иконки для блока про гарантию. Тогда мы взяли иконку с контуром и вставили туда цифру 3, набранную шрифтом «Наутилус» (Nautilus Pompilius).

Создаём остальной дизайн за выходные. Встречаемся с заказчиком и показываем что получилось:

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

Утверждаем получившееся. Верстаем. Укладываемся в сроки.

Готово: http://visor-v.ru/all/smartelectrician-site.

Как делают чипсы

Пять минут документального фильма телеканала «Дискавери» о том, как делают чипсы:

2012   анимация   видео   как создавалось

Как создавалась наклейка для интернет-магазина «Бриллиантик»

Сначала эскизы на бумаге. Потом эскизы в Иллюстраторе. Потом показ этих эскизов заказчику. Потом внесение правок: меняем острые края наклейки на скруглённые. Потом ещё куча доработок в Иллюстраторе.

Собрал некоторые рабочие моменты в один постер:


Ещё можно посмотреть на то, что получилось в итоге.

Как создавался горизонтальный баннер для Электросервиса

Задача: сделать из вертикального баннера горизонтальный, размером 1000×100 пикселей.
Исходная вертикальная версия баннера:
Исходная вертикальная версия баннера

Собираем горизонтальную версию баннера:






Итог можно посмотреть в заметке «Горизонтальный баннер для Электросервиса».
2011   дизайн   как создавалось   наш дизайн   реклама   электросервис