Flamp — это сервис о заведениях в городе, социальная сеть, место для обмена мнениями и встреч компаний с клиентами.
Система идентификации построена на знаке «глаз-компас». С одной стороны — это универсальный индикатор впечатлений, с другой — метафора поиска в большом мире предложений. Глаз может выражать весь спектр эмоций — от удивления до гнева. Простая форма предлагает множество вариантов для выражения любого послания.
Чтобы сделать что-то новое, нужно вспомнить старое. Смотрим на то, как выглядит фирменный стиль сервиса сейчас.
![](/projects/flamp-style/i/flamp-process-0.jpg)
На первом этапе нет четких ограничений. Это может быть как что-то совершенно новое, так и развитие старого. Сначала думаем на бумаге.
![](/projects/flamp-style/i/flamp-process-1.jpg)
Пробуем в векторе. По ощущениям это что-то плотное, весомое.
![](/projects/flamp-style/i/flamp-process-2.jpg)
Или разные метки-пиктограммки.
![](/projects/flamp-style/i/flamp-process-3.jpg)
Можно сделать знаком букву F. И пусть она будет составная, ведь это сообщество.
![](/projects/flamp-style/i/flamp-process-4.jpg)
А разовьем-ка один из вариантов, прикинем, как это может масштабироваться.
![](/projects/flamp-style/i/flamp-process-5.jpg)
В составе F можно использовать не только баблы, это же еще история про оценки, плюсы и минусы, графики рейтинга компаний. Например, вот так.
![](/projects/flamp-style/i/flamp-process-6.jpg)
Все как-будто не то. Получаются мысли на старую тему. Стиль нужно развивать от механики оценки самого сервиса. После обсуждений появляется схема.
![](/projects/flamp-style/i/flamp-process-70.jpg)
Механика оценки, скорее всего, будет в виде полосок со значениями или тумблеров. Может, так?
![](/projects/flamp-style/i/flamp-process-8.jpg)
Нет, что-то абстрактное не подойдет. Нужно взять и пофантазировать, как пользователь будет ставить оценку заведению. Может, он будет крутить сектора круга?
![](/projects/flamp-style/i/flamp-process-9-1.jpg)
Или это будет температурный режим «горячо-холодно»? А итогом станет средняя температура по палате.
![](/projects/flamp-style/i/flamp-process-9-2.jpg)
Или позволить пользователю поиграть с градиентами? Чем насыщеннее градиент, тем выше оценка. В итоге получается такой коктейль.
![](/projects/flamp-style/i/flamp-process-9-3.jpg)
О, весы правосудия! Кладем плюсы и минусы на разные чаши и смотрим на результат.
![](/projects/flamp-style/i/flamp-process-9-4.jpg)
Или вот просто такие полоски по каждому параметру, от 0 до 100 процентов. Двигаешь их в зависимости от впечатления.
![](/projects/flamp-style/i/flamp-process-9-5.jpg)
Вроде, то что нужно. Смотрим, как это может выглядеть.
![](/projects/flamp-style/i/flamp-process-10.jpg)
Подбираем цвета, иконки и шрифты.
![](/projects/flamp-style/i/flamp-process-11.jpg)
Ищем оттенки.
![](/projects/flamp-style/i/flamp-process-12.jpg)
Команде разработчиков и заказчику хочется еще каких-нибудь вариантов. Может, развить идею с тумблерами? Пробуем подружить ее с всевидящим глазом.
![](/projects/flamp-style/i/flamp-process-13.jpg)
Прикидываем приемы, иконки и лоудер.
![](/projects/flamp-style/i/flamp-process-14.jpg)
Подбираем цвета оценок. Смотрим, как эта механика будет жить в приложении.
![](/projects/flamp-style/i/flamp-process-15.jpg)
Уточняем образ: убираем полоски оценки, чтобы на первый план вышел глаз. Тут наконец-то доходит, что это может быть глаз-компас!
![](/projects/flamp-style/i/flamp-process-16.jpg)
Пробуем найти шрифтовое решение, а так же стиль иллюстраций.
![](/projects/flamp-style/i/flamp-process-17.jpg)
Тут от команды поступает предложение в виде такого графического элемента и синего цвета.
![](/projects/flamp-style/i/flamp-process-18.jpg)
Смотрим на две идеи внимательнее: глаз-компас и литера F.
![](/projects/flamp-style/i/flamp-process-19.jpg)
![](/projects/flamp-style/i/flamp-process-20.jpg)
В концепции с литерой очень много синего и формального. А концепт с глазом хочется разбавить другим служебным цветом. Берем понемногу из этих двух стилей и сохраняем глаз-компас.
![](/projects/flamp-style/i/flamp-process-21.jpg)