Иконка канала МИФ в Телеграме

Однажды ребята из «Манн, Иванов и Фербер» обновили иконку в своём телеграм-канале и она мне не понравилась. В иконке была надпись «Издательство МИФ», которую сложно прочитать из-за небольшого размера.

Мне нравятся их книги, поэтому не смог пройти мимо и сделал свой вариант.

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

Теперь канал издательства классно выглядит в общей ленте и его легко узнать среди остальных:

Пример иконки канала в приложении Телеграм

Вариант отправил Сергею Капличному, через час в телеграм-канале издательства МИФ появилась моя версия иконки.

°°°

Понравилось? Могу сделать иконку для вашего канала. Пишите на почту: alexandr@bizikov.ru. В письме расскажите о своём канале и пришлите ссылку на него. Если мне понравится, то сделаю иконку и напишу о вас заметку с процессом работы.

Могу принять только десять заявок.

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

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

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

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

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

note

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

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

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

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

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

Презентация

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

Результат

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

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

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

Σ

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

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

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

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

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

°°°

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

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

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

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

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

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

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

СохранитьСохранить

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

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

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

Дизайн

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

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

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

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

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

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

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


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

Вёрстка

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

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

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

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

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

Σ

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

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

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

°°°

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

СохранитьСохранить

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

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

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

Задача

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

Процесс

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

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

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

Результат

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

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

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

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

°°°

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

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

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

°°°

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

СохранитьСохранить

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс.

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

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

Подготовка

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

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

Дизайном занимался в свободное от работы время, параллельно помогал Саше Климову делать курсовой проект для Школы Стажёров в Бюро Горбунова. Договорились о бартере: я помогаю запрограммировать вёрстку в тему Вордпрес, а Саша помогает советами по дизайну.

Прототипы на бумаге — отличная штука, но когда нет понимания чего хочешь, они только мешают.

Бумажные прототипы главной страницы

Бумажные прототипы

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

В Фидли читаю 101 личный блог, прошёлся по каждому и выбрал те, у которых есть главная страница: Салават Абдуллин, Роман Шавня, Артур Кочарян, Ярослав Максимов, Александр Гурьянов, Илья Бирман, Никита Иванов, Александр БеспоясовВладислав Балабанович, Елена Глубко, Максим Ильяхов и Илья Страйков.

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

Отличные шапки у Александра Гурьянова и Максима Ильяхова.

Шапка Александра Гурьянова
Шапка Максима Ильяхова

У Ильи Бирмана отличный вывод заметок из блога, а у Максима красивая трубка и форма подписки:

Контент Ильи Бирмана
Сайдбар Максима Ильяхова

После отбора элементов я понял, какой должна быть главная страница.

Дизайн-процесс

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

Первая версия главной — до того, как выбрал путь «копировать под себя» — выглядела так:

Первая версия дизайна

Раньше считал, что дизайн это просто: нарисовал картинку, а всю работу за тебя делает разработчик.

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

Итог первой итерации:

Первое приближение

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

Итог второй итерации оказался интереснее:

Второе приближение

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

В третьей итерации исправил ситуацию с шапкой: освободил место и уменьшил количество якорных объектов.

Третья итерация

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

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

Вёрстка

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

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

В моем случае оказалось, что нельзя сделать стандартными средствами ЦСС и ХТМЛ обтекание врезки. Рассчитывал на флексбоксы, но даже они не позволили справиться с ситуацией. Поэтому блок с заметками идёт ровно, не утекает под врезку.

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

Настройка отображения заметки на главной

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

В шапке добавил чередование ритма: 1, 3, 4. С правой стороны исчезла пропасть из пустого пространства, страница стала приятнее и появилось ощущение завершённости.

Итоговая шапка главной страницы

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

Разработка

Σ

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

Финальная версия главной страницы

Страница отлично чувствует себя на компьютере, планшете и смартфоне.

Главная страница на Айпаде и Айфоне

Посмотреть в живую: Бизиков.ру

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

СохранитьСохранить