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

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

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

Дизайн

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

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

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

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

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

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

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


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

Вёрстка

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

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

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

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

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

Σ

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

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

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

°°°

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Процесс

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

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

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

Результат

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

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

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

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

°°°

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

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

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

°°°

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

Мобилизация, итог обучения

На каждый день лекций в Школе мобильного дизайна писал заметки. Кроме лекций каждый ученик работал над личным проектом. 10 августа презентовал проект организаторам Школы. В начале недели стали известны результаты.

Презентую проект

Фото с презентации личного проекта, автор Станислав Сабиров

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

°°°

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

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

Раз всё так хорошо, то возникает логичный вопрос: «почему не прошёл?». Основная причина — это недостаточный опыт в отрисовке интерфейсов. Как следствие, сложно визуализировать решение проблемы в виде живого интерфейса. Для начала рисовал экран в блокноте, а уже после этого открывал Скетч. Такой подход отнимает много времени.

Пример бумажного прототипа

Пример бумажного прототипа

Кроме этого, мой технический опыт сыграл со мной злую шутку. Когда придумывал решение проблемы, сразу задумывался о возможности технической реализации. Если не понимал, как реализовать — выкидывал идею. Надо было делать иначе: придумал решение → пообщался с другими разработчиками. Они могут знать что-то, чего не знаю я.

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

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

Σ

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

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

Конспект: Дизайн + 1

Арт-директор Студии Артемия Лебедева — Людвиг Быстроновский выступил с лекцией про дизайн, видеозапись доступна на канале свободного пространства «Кто такой Джон Голт?» в трёх частях.

Дизайн + 1

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

°°°

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

Дизайнер любит решать задачи

Если после создания дизайна, у вас ощущение, что что-то получилось не так, как хотели, — не переживайте, так у всех. Это нормальное поведение.

Сосредочьтесь на тех вещах, где у вас пробелы. Не умеете хорошо делать меню? В следующем проекте сфокусируйтесь на том, чтобы научиться делать хорошее меню.

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

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

Нельзя сделать хороший дизайн, не побывав в шкуре потребителя, который будет пользоваться решением дизайнера. Если выполняешь редизайн или доработку существующего приложения — установи его на смартфон и пользуйся им какое-то время.

Развитие навыков

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

Имейте немножко терпения

Прочитайте книгу по ГТД, создайте доску в Трело и там собирайте все вызовы. В каждом проекте, по очереди, прокачивайте по чуть-чуть свои навыки.

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

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

Любой дизайнер должен быть специалистом по тестированию дизайна. Например, в студии Лебедева нет отдельного специалиста по тестированию дизайна.

Как повысить интерес к работе, если стало скучно?

Есть простое решение: повысить сложность. В следующем проекте можно взять новый инструмент для дизайна или попробовать запрограммировать решение самостоятельно. Только вам нужно, чтобы ваша работа была интересной. Работодателю это не нужно. У него уже есть интересная работа — он создал контору, в которой вы работаете.

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

Этапы дизайн-задачи

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

Когда приходит заказчик и говорит: «Нужно сделать так-то», — это решение. Дизайнер не должен «решать решения». Он должен докопаться до сути, почему именно так и действительно ли так надо, может совсем иначе?

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

Генерация идей

Можно сгенерировать множество идей, но остаться должны только жизнеспособные. Дарвинизм идей в дизайне.

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

Как дизайнеру понять жизнеспособность идеи?

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

Если дизайнер не умеет программировать, первое, что ему следует сделать — научиться программировать самому.

Необходимо решение, которое будет максимизировать жизнеспособность и ваш интерес. Вас ждет провал, если придумали абсолютно жизнеспособное решение, но не интересное вам. Аналогично и наоборот: интересное для вас, но невозможное для реализации — провал.

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

Общение с заказчиком

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

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

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

Разработка

К технологам приносят эту бронзовую фигню и говорят: «Будем делать». На этом этапе возникают проблемы, что нельзя реализовать какие-то части интерфейса. Технологи идут к дизайнерам и начинают выяснять.

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

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

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

Презентация решения

Лучшее решение — это такое решение, которое заставляет говорить людей: «А что, так можно было?».

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

Книги — это хорошо. Но чтение книг по кулинарии не сделает вас профессиональным шеф-поваром. Надо учиться чистить картошку, овощи и мясо. Готовить, готовить и ещё раз готовить.

Сопровождение проекта

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

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

Σ

Делать, делать и ещё раз делать. По другому дизайнером, программистом, арт-директором или менеджером не стать. Чтение книг — это хорошо, но чтение книг по переговорам от Кэмпа не сделает из вас первоклассного переговорщика. Идите на переговоры и договаривайтесь.