Тестовое задание для RedMadRobot

Задача
Спроектировать сервис, который позволит абоненту телефонного оператора пожаловаться на качество сотовой связи или интернета в определенной географической точке и получить отклик от оператора

Выполнил тестовое задание на вакансию дизайнера-стажёра для RedMadRobot. Попробовал Фреймер в деле, получил отказ и поставил новую цель. В конце расскажу, зачем публикую описания дизайн-процессов.

Блокнот → Скетч → Фреймер студия

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

note

Для примера выбрал «Мой Билайн». Приложение сделали ребята из RMR. В нём уже есть чат поддержки, который можно улучшить в рамках тестовой задачи.

Сформулировал основные отличия от текущей реализации. Набросал экран в Скетче и перешёл к прототипу.

Результат задачи в виде статичных картинок — не интересно. Будет круто, если покажу живое общение оператора с пользователем. Поэтому основную часть времени провёл во Фреймере.

Студия Фреймер

Фреймер Студия. Слева код, справа — результат

Презентация

Презентацию сделал в Кейноте. Чтобы вам было удобно смотреть, записал видео и опубликовал на Ютубе:

Результат

Отзыв от директора по дизайну RedMadRobot, Павла Горшкова:

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

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

Σ

Согласен с  Павлом, интерфейс выглядит не очень красиво. В лекции «Дизайн + 1» Людвиг говорил про развитие дизайнера. Прокачивать каждый навык по очереди:

Если прокачать каждый навык,
то в сумме получится хороший дизайнер

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

Как развивать UI навык?

  1. Выполнить все задания конкурса «Интерфейс дня»
    В сентябре выполнил только два задания и переключился на тестовые. Время вернуться и закончить дело. До конца года 98 заданий не выполню, но десяток шотов на дрибл выложу.
  2. Участвовать в конкурсах
    Какие дизайнерские конкурсы запускаются в ближайшие месяцы? Напишите в комментарии, буду благодарен.
  3. Смотреть на топовых дизайнеров на бихэнсе и дрибле
    Выявлять, что больше нравится, переосмыслять и искать свой стиль.

°°°

Опубликовал пять заметок с описанием дизайн-процесса:

  1. Тестовое задание для Школы мобильного дизайна
  2. Обновление дизайна домашней страницы
  3. Тестовое задание для Туту.ру
  4. Сайт для Сергея Сичкар
  5. Тестовое задание для RedMadRobot

У меня нет портфолио, но показать что-то надо. Когда пишу письмо на вакансию, отправляю ссылку на страницу: http://bizikov.ru/tag/portfolio/.

Компании, которым нужен начинающий дизайнер, могут прочитать заметки и понять, как я работаю. Результат: дают тестовое задание.

Основная задача таких описаний — показать подход к решению задач.

Побочная задача, о которой в самом начале не думал: на такие заметки присылают критику и советы. Это помогает понять, что не так (на самом деле всё говно), и в следующей работе стараюсь делать лучше.

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

Книга: Культура дизайна

Автор Владислав Головач — сооснователь «Юзетикс», дизайн-бюро, специализирующегося на дизайне пользовательских интерфейсов и юзабилити-тестировании.
Культура дизайна

«Культура дизайна» — это путеводитель по истории дизайна. На простых примерах Влад объясняет роль дизайна в обществе разных исторических эпох.

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

Дизайнеру на заметку

Про качество и цену продукта:

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

[…]

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

[…]

Производители тут же наводнили рынки ужасно исполненными товарами.

Человек может быть дизайнером, даже не задумываясь об этом.

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

[…]

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

Пример того, как открытие в области химии повлияло на дизайн одежды в России XXI века:

Например, «традиционная» русская одежда изобилует красным потому, что в 1868 году был синтезирован первый дешёвый красный краситель – ализарин (до этого все ходили в одежде из некрашеной ткани).

Про эффект маятника в дизайне:

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

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

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

Как отличить профессионала от любителя:

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

[…]

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

Как выглядит процесс работы над дизайном:

Окружающие могут сколько угодно думать о дизайне, как о полёте души, когда дизайнер буквально порхает и творит, творит. Это представление, в общем и целом, неверно. Дизайнер порой работает, причём у этой работы есть две разных циклических модальности:
— Дизайнер судорожно чешет голову, пытаясь придумать решение.
— Дизайнер напряжённо и в спешке реализует придуманное решение, чтобы обнаружить, что оно работает хуже, чем хотелось бы, и нужно вернуться к этапу №1.

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

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

В чём польза изучения истории дизайна:

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

[…]

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

[…]

Дизайнер удовлетворяется одной единственной традицией – хотя определённая творческая свобода появляется только у тех, кто владеет двумя или больше.

[…]

Практика показывает, что совсем без традиции работать нельзя. Соответственно, если мы не хотим делать псевдо-работы (псевдо-классическую, псевдо-экологическую и т.п.), традиции надо учиться – что особенно актуально в России, поскольку из-за нашей истории в XX веке с традициями у нас довольно бедно.

[…]

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

Σ

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

Если после прочтения книги у вас появится интерес к изучению истории дизайна, то задача автора выполнена.

°°°

Автор советует прочитать:

  1. «Дизайн и время. Стили и направления в современном искусстве и архитектуре»
    Краткий, но хорошо иллюстрированный список основных стилевых течений последних 150 лет.
  2. «Объекты желания. Дизайн и общество с 1750 года»
    Исследование эффектов дизайна относительно развития общества. Например, в главе о гигиене рассматривается влияние соответствующей идеологии на дизайн в начале XX века.
  3. «Искусство видеть»
    В книге разбирается и иллюстрируется изменение восприятия предметов искусства в зависимости от исторического и культурного контекста, действовавшего как в момент создания произведения, так и сейчас.

Сайт для Сергея Сичкар

Задача
Сделать домашнюю страницу и блог для Сергея Сичкар

На проекте выполнял роль дизайнера, верстальщика и вордпрес-разработчика. Ниже опишу процесс работы над дизайном, вёрсткой и о том, почему макет не должен «бронзоветь».

Дизайн

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

Три варианта структуры домашней страницы

В следующем созвоне рассказал о том, какая из страниц для какой ситуации лучше подходит. Определились, что Сергею подходит третий вариант.

Начал прорабатывать структуру, писать текст. Получилось два варианта главной:

Два варианта домашней страницы

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

Определились, что будем прорабатывать вторую версию. К следующей итерации она сильно изменилась и стала финальной версией дизайна:


Финальная версия дизайна

Вёрстка

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

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

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

В лекции «Дизайн + 1» Людвиг Быстроновский отлично рассказал о том, почему после утверждения дизайн сайта не должен «бронзоветь». Теперь у меня на практике получилось понять этот совет.

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

Σ

Результат:
Результат работы

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

Посмотреть в живую: http://sergeysichkar.ru.

°°°

Благодарю Сергея за быстрые ответы на мои вопросы и адекватную критику. Недавно он завёл канал в телеграме: @sergeysichkar. Пишет о бизнесе, идеях и результатах. Если тема интересна — подписывайтесь.

Кристал — просмотр дизайна на Андроиде

Нашёл для Андроида приложение, которое позволяет просматривать макеты из Скетча.

Устанавливаем вспомогательное приложение на макОС, которое «подружит» Скетч и Кристал на Андроиде. После запуска приложения, в строке меню появится иконка «С»:

Кристал в строке меню на макОС

Следующий шаг — установить приложение на Андроид. Находим в Плей маркете Кристал, устанавливаем и запускаем:

3 шага запуска Кристалла на Андроиде

Для авторизации устройства подключаемся к Маку через usb-кабель или по вай-фаю и разрешаем приложению доступ к Скетчу в иконке «Mirror»:

Подключение в Скетч

Готово. Теперь можно просматривать дизайн мобильного приложения из Скетча, даже если у вас Андроид.

Приятной работы!

Концепт главной страницы сервиса Туту.ру

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

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

Задача

За две недели разобраться, как устроена главная страница Туту.ру и представить свою улучшенную версию.

Процесс

Как выглядела главная страница:
Текущая версия главной страницы Туту.ру

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

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

Результат

Основные тезисы новой главной:

  • «Говорящая» на одном языке с пользователем форма поиска. Откуда? Из Оренбурга.
  • На первом экране рассказываем пользователю, что его ждёт после поиска. Простые четыре шага и билет в кармане.
  • У контента появилась структура — рассказываем о преимуществах заказа билета онлайн на Туту.ру.

Макет кликабельный, подходит для экранов с шириной 1280 пикселей.

Концепт главной страницы Туту.ру

°°°

За время работы над тестовым заданием было проведено две итерации показа макета. Огромное спасибо дизайнерам из Туту.ру Никите Иванову и Льву Пикалёву за ценные советы и возможность выполнить задание!

Это был полезный для меня опыт. Почитайте моё описание дизайн-процесса для тестового задания в школу Яндекса и редизайн главной страницы моего блога.

Буду рад, если оставите комментарий с критикой работы или ценный совет как можно сделать лучше.

°°°

Результат: не прошёл. От дизайнера ожидался несколько иной набор «свойств», не вызвал чувства «а чё, так можно было?».