ivan's blog: posts tagged сделал

Cайт «Маскот»

Ivan Zviahin — Wed, 29 Apr 2020 12:00:47 +0000

Версия сайта: первая · вторая

«Маскот» — это автомобильная премия в Беларуси. Сайт премии решает множество задач. Нужно как-то познакомить с условиями будущих участников премии и дать возможность подать заявку на участие. Упомянуть всех партнёров. Рассказать про номинации, методику и познакомить с экспертным советом. А ещё дать возможность проголосовать потребителям за автомобили, которые попадут в отборочный тур. При этом провести розыгрыш призов среди участников голосования, чтобы они не ленились голосовать.

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

С новым логотипом нам помогла дизайн-студия «Райт» и вместе у нас получилось:

«Айдентика, для Автомобильной премии «Маскот». Это ему ветер в лицо, это у него слезятся глаза, это он несется навстречу... А вместе с ним и мы. В основе дизайн-решения – шрифтовая композиция. Буква А в названии прекрасно анимируется: мы как бы видим летящую навстречу разделительной полосой дорогу глазами нашего маскота-талисмана. Для справки: маскот – термин автомобильный, обозначающий эмблему на радиаторе или капоте автомобиля.»
Алексей Шклянко, арт-директор в «Райт»

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2019 году:

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

Информационные партнёры

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

Методика определения победителя

Четыре мощных этапа. Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Для привлечения потребителей, которые участвовали в голосовании отборочного этапа, мы закатили розыгрыш призов:

Голосование потребителей

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

Анонс победителей

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

Мобильные устройства

Всё это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. Посмотрите сами: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Приложение для «Совести»

Ivan Zviahin — Wed, 29 May 2019 15:25:19 +0000

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

Умная лента товаров

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

Если карта уже есть, приложение пытается сообщить всякую интересную информацию по вашим рассрочкам и не только:

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

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

Карточка товара

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

Карточка магазина

Приложение показывает все товары конкретного магазина и контакты:

Помимо карточек и ленты

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

В жизни — App Store и Google Play

Дизайн приложения сделан за шесть недель с 22 января по 14 марта 2018 года.
Илья Бирман — арт-директор и дизайнер, Иван Звягин — дизайнер.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Радиоэмоции 1.0

Ivan Zviahin — Thu, 23 May 2019 09:05:08 +0000

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

Пользователи оставляют свои эмоции, плагин считает их и выводит количество:

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

Дизайн и идея — я, программист — Ольга Мохова.

Плагин бесплатный для всех: radioemoji.intuition.team

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Cайт «Маскот»

Ivan Zviahin — Mon, 13 May 2019 20:06:58 +0000

Версия сайта: первая · вторая

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2018 году:

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

Информационные партнеры

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

Методика определения победителя

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

Второй — определение победителя в каждой номинации потребителями, благодаря закрытой суперголосовалке по всей Беларуси. А точнее, исследовательская компания провела онлайн-интервью с тысячей белорусов. Выборка учитывала регион, возраст, пол и образование участников. Из пяти финалистов первого этапа определился объективный победитель в каждой номинации.

Третий — определение победителя экспертным советом. Все шесть экспертов выстроились в ряд. Один из них уже мелькал в ленте журнала автомобилей выше с яркой цитатой.

Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Голосование потребителей

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

Само голосование. Чтобы избежать сравнения автомобилей между собой и повысить объективность голосования, мы показываем только один автомобиль на экране. Так сказать, эффект «Тиндера».

Личные данные участника:

Благодарность за участие в виде промокода на автомобильные товары в онлайн-гипермаркете:

Анонс победителей

Помимо масштабного офлайн мероприятия, мы сделали анонс победителей на сайте:

Мобильные устройства

Все это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. В жизни есть ещё трёхмерный логотип и переливающиеся кнопки: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Навигация для Sportfamily

Ivan Zviahin — Fri, 31 Aug 2018 18:14:00 +0000

на русском · in english

Проблема и решение

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

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

Расположение

Клуб находится на третьем этаже центра, а проход к лестнице надёжно спрятан. После серии наблюдений мы нарисовали план. Выяснили основные «источники трафика». А потом развесили таблички на картинке.

Визуальный язык

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

Материалы

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

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

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Концепт приложения Яндекс.Дом

Ivan Zviahin — Fri, 27 Jul 2018 15:35:38 +0000

В начале 2016 года я делал задание для школы дизайнеров Яндекса. Нужно было представить, что Яндекс разрабатывает свою систему «умного дома». И предложить концепт мобильного приложения.

Задача

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

Решение

Разработать комфортное приложение для двух аудиторий: для «быстрых» людей и для изучающих.
Дать возможность пользователю показать статусность и сэкономить.
Закрыть ежедневные потребности и вопрос безопасности.
Сохранить визуальный язык Яндекса 2016 года.
Дополнить приложение другими полезными сервисами Яндекса.

Я подошёл к заданию реально и за основу взял «однушку» с небольшим количеством «умных» предметов.

Нарисовал схему квартиры:

Кухня	Спальня	Прихожая	Ванная
Свет	Свет	Свет	Свет
Тёплый пол	Музыка	Тёплый пол	Тёплый пол
Шторы	Шторы	Сигнализация	Кондиционер
Кондиционер	Кондиционер	Кондиционер

Далее рассматривал систему только в рамках этой квартиры и данных «умных предметов».

Полезное приложение

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

На этих потребностях и решениях основывался далее.

Достижение результата в первом экране

На этом экране пользователь запускает сценарии, видит активные предметы и, самое главное, — управляет домом. Добавляет, удаляет и изменяет сценарии. Имеет доступ к избранным предметам. Настраивает дом.

Быстрое переключение между домами

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

Умные предметы и функции

Вызываю скорую, пожарных и милицию с помощью одного тапа. Дом отправляет все необходимые данные для этих служб. Оплачиваю страховку, коммунальные расходы через Яндекс.Деньги, вызываю Яндекс.Такси и анализирую ежемесячные расходы. Могу в одном экране посмотреть все статусы предметов в доме и изменить их.

Комнаты

Эти экраны отвечают за управление предметами в отдельных комнатах. Предмет можно добавить, настроить или удалить.

Музыка

Здесь включаю любимую музыку. Запускаю её из Яндекс.Радио, Яндекс.Музыки или медиатеки смартфона. Устанавливаю будильник. Отправляю любимые треки друзьям в мессенджеры и социальные сети.

Кондиционер

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

Новые предметы

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

Забота

Если вы забыли выключить «Тёплый пол», не беда. Дом напомнит вам о нём и предложит выключить его за вас. Сгорела лампочка? Поменяйте её, заказав новую в Яндекс.Маркете. Вам не нужно помнить об оплате коммунальных услуг и страховки. Теперь это забота вашего дома.

Настройка

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

Иконка из семьи иконок компании

Собрал основные сервисы Яндекса, которыми пользуюсь сам. Нарисовал иконку для Яндекс.Дома, которая по стилю похожа на остальные иконки сервисов Яндекса. Теперь она гармонично смотрится в этой семье. В странах СНГ большинство людей живут в квартирах, поэтому иконка частного дома не подходит. Дом с квартирами напоминает пульт. Спрятал первую букву компании «Y» в иконке.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Cайт Crossfit Martell

Ivan Zviahin — Mon, 18 Jun 2018 19:52:56 +0000

на русском · in english

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

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

Если у читателя возникнут дополнительные вопросы, кнопка Contact Trainer всегда под рукой. Она открывает модальное окно с мессенджерами, почтой и телефоном.

Сайт полностью адаптирован под мобильные устройства.

Я нарисовал страницы сайта. Саша Файзулин общался с клиентом и обрабатывал фото. Наташа Никонова и Алина Мишуренко писали текст. Максим Ильяхов артдиректил проект. Саша Иванов сверстал всё задуманное.

crossfitmartell.com

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Логотип Чингизу Аллазову

Ivan Zviahin — Sun, 12 Nov 2017 11:00:13 +0000

Чингиз Аллазов — боец тайского бокса. 13-кратный Чемпион Мира, 3-кратный Чемпион Европы, 14-кратный Чемпион Республики Беларусь. За 13 лет боец провел более 250 поединков на любительском и профессиональном ринге с 99 % побед.

В 2016 году я сделал логотип для Чингиза:

Идея. Знак состоит из первых букв имени и фамилии бойца. Буква «С» в виде месяца. Сверху восемь звёзд, восемь — счастливое число Чингиза. Думаю, логотип будет здорово смотреться на одежде бойца и его команды.

Фотографии из Инстаграма Чингиза

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

Плакат Mercedes Benz

Ivan Zviahin — Tue, 03 Oct 2017 16:36:59 +0000

на русском · in english

На курсе «Типографика и вёрстка» Игоря Штанга нам дали задание: сделать из дореволюционного рекламного объявления Mercedes Benz швейцарский плакат. На решение задачи было дано 50 минут.

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

Три в одном

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

Сетка

Я использовал вертикальную из 12 колонок для выравнивания элементов. А для вертикального ритма — горизонтальную сетку.

Стиль

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

Спасибы

Спасибо Игорю Штангу за курирование работы. Илье Бирману за совет о размытых объектах на фото. Отдельно хочу отметить курс «Типографика и вёрстка» Игоря, очень круто. Если вы дизайнер, технолог, редактор или просто любознательный человек, посетите курс — не пожалеете.

Если интересен процесс перевёрстки, поставьте «+» в комментариях. Если соберётся два плюса, я напишу отдельную заметку с промежуточными вариантами и подробным описанием:)

Написал про процесс работы над плакатом.
Написал конспект по курсу «Типографика и вёрстка» Игоря Штанга.

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

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме.

Схема метро Минска

Ivan Zviahin — Tue, 08 Aug 2017 08:14:26 +0000

на русском · in english

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

Центр

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

Линия, которую строят

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

Транслитерация

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

Легенда

Её нет. Мы всё подписали прямо на схеме.

Указатель

Чтобы не замусоривать схему координатной сеткой и ускорить поиск станций, применяется указатель типа «Компас», впервые использованный на схеме московского метро 2013 года. Чтобы найти станцию, достаточно посмотреть на схеме в указанном стрелкой направлении:

Думаю, что схема будет здорово смотреться на платформах центральных станций и в вагонах Минского метро. Арт-директор проекта Илья Бирман. Дизайнеры я и Костя Евстратенко.

Про нас написал:

Рассказываю о процессе создания:

Версия для просмотра, PDF, 5.6 MB
Версия для печати, PDF, 18.5 MB

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Здоровье

Ivan Zviahin — Tue, 25 Jul 2017 20:22:44 +0000

на русском · in english

Школа дизайнеров Бюро опубликовало тестовое задание пару месяцев назад. Я долго откладывал эту задачку... Решил поступать за две недели до дедлайна. Задание звучит так:

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

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

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

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

Кратко о решении

Здоровье — приложение, которое заботиться о вашем самочувствии, делает жизнь безопасной и комфортной. Приложение даёт советы по профилактике и лечению, предупреждает о серьезных заболеваниях. Работает с помощью чипа «Смотритель 2». Устройство меряет пульс, давление, уровень жидкости, холестерина, дофамина и адреналина.

Вам не нужно покупать специальное устройство. Приложение устанавливается на любой девайс, который работает на операционной системе АйОс или Андроид. Почти у каждого же есть такое устройство?

Активация

Активировать чип легко — проглотите таблетку и запейте водой. Оболочка раствориться и чип «Смотритель 2» сможет измерять параметры. Устройство живет в организме человека около 2 лет, потом чип полностью растворяется. Конечно же, всё это — моя фантазия. А может и нет:-)

Показатели на одном экране. Умный будильник

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

Лекарства и медкарта

На основании данных из медкарты, приложение знает, когда нужно принимать лекарства. Можно поставить напоминание и отсрочить приём таблетки.

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

Вызов скорой помощи

Приложение предупреждает о критическом состоянии здоровья. Предлагает вызвать скорую помощь по геолокации или записаться на приём к врачу. Использует данные с медкарты.

Контроль показателей

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

Ищет ближайший супермаркет или аптеку на карте. Пользователь может рассказать о приложении друзьям и подругам. Чтобы дать рекомендацию, приложение использует уведомления. Для управления — Сири, 3Д-тач и геолокацию.

Страховка

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

Статистика, анализ, настройка

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

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

Спасибы

Спасибо за внимание каждому, кто дочитал заметку до конца. Отдельное Юле Маковозовой за помощь с текстом, а Диме Караневскому за фото:-)