2 posts tagged

процесс

Итог второго модуля

Завершился второй модуль курса «Дизайн цифрового продукта» — показывали сделанные проекты.

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

Задача

Постановка задачи

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

Узнал как работать с ЦА и персонажами, что такое цифровой продукт как таковой. Где искать референсы, как делать макеты и делать из них сайт на редимаге.

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

Аудитория

Целевая аудитория — обладатели миникуперов. Это довольно известная и понятная тусовка. Возраст от 18 до 60, состоятельные, активные, интеллигентные.

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

мувик

Референс — галереи Референс — типографика Типо логотип Выбранный стиль

Референсы

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

Поскольку текста немного, хотел сделать его максимально воздушным, поэтому искал какие-то минималистические мотивы в типографике.

Из двух таких референсов слепил логотип.

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

Выбрал Фира Санс. Гуманистический гротеск. Неконтрастный, статичный, с открытой апертурой. В начертании Light.

сетка

Сетка

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

Я пытался срифмовать ее с логотипом и взял 3-х колоночную сетку. Не уверен, что из этого получилось.

Первый подход

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

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

Я был доволен собой: собрал нормальный такой лендос — пока не показал его Олегу. Когда он смотрел, у него заболели глаза. По крайней мере, мне так показалось.

Оказывается, в миинмалистическом дизайне (на который я заявлялся), нужно всё делать минимально. Без тенюшек и эффектов. Один, максимум два стиля. Иллюстрации в одном стиле. С неярким цветом или совсем без цвета. В общем, полный провал.

Второй подход

Получился сумбурным. Убрал почти все этажи от первого лендинга и пытался сосредоточится на оформлении галереи. Вышло так себе)

Сверстано на редимаге.

На просмотре показывал этот вариант.

Альтернатива

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

И накидал на редимаге альтернативный прототип.

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

2017   2017   HSE   вспомнить в конце 2017   процесс   Сделал

Сделал свой первый макет (процесс)

Провел его через несколько итераций с замечаниями «технического» и «арт-директора» — кураторов курса.

Обо всем по порядку:

Студия Лебедева объявило весенние вакансии, в том числе и на дизайнера сайтов.

Студии нужен дизайнер сайтов. Претендентам предлагается нарисовать главную страницу сайта для магазина, продающего самогон.

Олег предложил нам поучаствовать.

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

Продолжили продуктовой аналитикой: рисовали майнд-мап в сервисе Когл.

Ну и закончили подбором референсов и составлением мудбордов.

В ту неделю я был в отъезде, поэтому успел только к просмотру результатов. Ребята постарались и сделали хорошие работы. Некоторые даже успели в срок и отправили работы в Студию.

Пока я смотрел работы, в голове проносилось мысль, что всё скучно и однообразно. Думал «Одни бутылки с ценниками! Никакого разнообразия!».

Когда приступил к работе, первые черновики делал в сторону тематики бутлегеров ( wiki ). Хотел поразить уникальностью работы, чтобы она выделялась на фоне однообразных бутылок. У меня были не бутылки самогона, а целые ящики с классными баночками бутлегерского самогона. Но все идеи не проходили проверку дальше первых набросков.

Тогда до меня стало доходить, что я копаю не в ту сторону. Михаил объяснил, что в таких заданиях проверяется не креативность, а знание базовых вещей о дизайне стандартной страницы онлайн-магазина.

Тогда получилось накидать каркас, на основе которого в итоге и сделал финальный макет.

Процесс в фотораме

Каждый макет я показывал Олегу и Михаил как последний —уже не знал как сделать лучше. Но каждый раз наши «директора» делали полезные замечания и макет потихоньку улучшался.

И наконец

Очень интересный опыт.

П.С.: графику делал в фотошопе, макеты — в скетче.