Школа стажёров: третья ступень

Леонид Касаткин

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

Школа стажёров: для тех, кто хочет учиться

Третья ступень

Ключевой навык: Переговоры

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

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

Решение за арт-директором

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

Флекс

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

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

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

Выбор арт-директора и шефа

Моим арт-директором стал Михаил Нозик. У него меньше опыта, чем у Артёма Горбунова и Ильи Бирмана. Однако это компенсировалось желанием сделать отличный проект и готовностью помочь. Михаил не жалел времени и тратил каждый рабочий день около часа на согласование по скайпу и почте. Наставником и шефом стал Максим Ильяхов: его задача помогать студенту по любым вопросам диплома. Я советовался с Максимом об организации работы над проектом и о том, как разрешить сложные ситуации с арт-директором.

Согласование замечаний

Половина времени проекта уходит на согласование и обработку замечаний. Заранее прокачайте навык переговорщика и включите режим нудного перфекциониста: спрашивайте мнение арт-директора о каждой детали сайта. Записывайте в блокнотик, проговаривайте замечания своими словами и уточняйте, правильно ли вы поняли. От переговоров зависит весь проект: идея, дизайн и реализация. Новая иконка, блок текста или иллюстрация потребуют нескольких часов обсуждений и замечаний. Часто шеф и преподаватель рекомендуют делать совсем не то, что хочет арт-директор. Конечно, утверждает проект арт-директор, но приходится согласовывать подчас противоположные требования всех их трёх. Вы можете не пользоваться услугами преподавателя, особенно, если об этом не просит арт-директор. Например я практически не пользовался услугами Товеровского и Бирмана.

За время работы над дипломом я получил около 500 замечаний:

Планируйте с запасом

Согласуйте с большим запасом времени — у верстальщика сломается ноутбук, арт-директор уедет в Австралию, но защиту никто не перенесёт

Понял, буду исправлять

Самая грубая ошибка в согласовании — не докопаться до сути замечания. Я постоянно наступал на эти грабли. Пример: арт-директор просит сделать иконку менее тяжеловесной. Радостно бегу исправлять макет, не спросив, почему это важно и что имелось ввиду. Осветляю иконку и уменьшаю толщину линий. В результате арт-директор недоволен и бракует исправление. Он имел ввиду, что иконка визуально спорит с соседним текстовым блоком.
Как итог — потеряно время и нервы. Пусть это выглядит занудно и глупо, но подробно расспрашивайте арт-директора по каждому мелкому замечанию. Хотя поначалу непривычно спрашивать «Что ты имел ввиду под фразой „сделай эту кнопку чёрной, а не синей“».

Каналы общения

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

Боевое крещение

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

18 часов

еженедельно у меня уходило на дипломный проект третьей ступени

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

Этапы проекта

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

Понимание задачи

Задача: Выбрать тему диплома и утвердить понимание задачи.

На первом этапе студент выбирает и согласовывает идею с арт-директором. Важно, чтобы тема диплома подходила проверку по трём параметрам:

  1. Польза. Проект должен приносить пользу людям, а арт-директору важно показать, в чём она заключается.
  2. Идея. Проект должен быть оригинальным и привносить нечто новое в мир. Также можно взять уже существующий сервис и улучшить его.
  3. Реализация. Надо успеть сдать проект за два месяца работы над дипломом. Поэтому в идеале стоит согласовать с арт-директором сайт или сервис, на котором будет минимальное количество дизайна и кода, но он будет приносить пользу людям.

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

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

Я предложил арт-директору 5 идей:

Сайт-агрегатор идей, который может помочь выбрать тему диплома

Статистика посещений для магазинов и кафе

Задача

  1. Помочь владельцам малой розницы лучше узнать своих посетителей.
  2. Помочь руководителям магазинов оценивать эффективность рекламных кампаний.

Проблемы

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

  1. Как подсчитать показатели прироста аудитории, лояльности, времени и длительности посещения.
  2. Отсутствие оперативного и независимого контроля за посещаемостью точки продаж.
  3. Большие затраты времени на сбор и анализ статистики, неудобство сопоставления и представления показателей.

Решение

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

Система предоставляет:

  1. Статистику посещений в разрезе времени (год, месяц, день, час).
  2. Процент возвратов посетителей.
  3. Посещаемость в течение дня, в определенный момент времени.
  4. Длительность посещения магазина.
  5. Рост процента лояльной аудитории.
  6. Процент отказов от посещений.
  7. Сравнение посещаемости и проходной способности магазина.
  8. Точные фиксируемые результаты проведения маркетинговых акций.

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

  1. Вайфай-модуль, который устанавливается у клиента.
  2. Шлюз-передатчик между вайфай-модулем и сервером.
  3. Сайт со следующими страницами:
    • главная страница с описанием возможностей,
    • личный кабинет со статистикой.

Биография Генри Форда

Задача

  1. Рассказать широкой аудитории биографию Генри Форда, который создал средний класс и понятие «автомобиль для всех».
  2. Помочь студентам бизнес-школ познакомиться с историей возникновения промышленного конвейера.

Решение

Сделаем плакат в стиле http://artgorbunov.ru/projects/tiger/ или страницу сайта в стиле http://artgorbunov.ru/projects/amundsen-and-scott/, где расскажем биографию Генри Форда. Договоримся с новостными сайтам о спецпроекте «Генри Форд. История автомобилестроения». Предложим руководству бизнес-школ купить и разместить плакаты для обучения студентов.

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

  • Страница или плакат осветит темы:
    • изобретение первого автомобиля с двигателем внутреннего сгорания;
    • возникновение промышленного конвейера;
    • экономия издержек и масштабирование производства;
    • мнение Генри Форда о политике, Третьем Рейхе, обществе и бизнесе;
    • двухкратное повышение зарплаты рабочим и создание среднего класса;
    • почему Дженерал Моторс обошла компанию Форда и вырвалась в лидеры.

Товары и услуги для бизнеса по смс

Задача

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

Проблема

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

Решение

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

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

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

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

Схема работы:

  1. Клиент отправляет заявку смс-сообщением, письмом на электронную почту или сообщением с сайта.
  2. Оператор получает заявку и:
    • пишет ответ на вопрос. Клиент: «За сколько можно открыть счёт для юрлиц», оператор: «Альфа-Банк и Сбербанк открывают счёта для юрлиц прямо во время визита»;
    • при непонятной или неполной задаче выясняет у клиента подробности. Клиент: «Хочу пиццу к себе домой сегодня после 18 часов», оператор: «Какой сорт пиццы предпочитаете?».
  3. При понятной задаче ищет исполнителя, договаривается о цене, сроках и условиях. Отправляет клиенту на утверждение цену и другие важные условия. Клиент: «Надо купить два обычных огнетушителя в офис», оператор: «Есть порошковые за 200 руб. штука. Доставка 400 рублей на завтра. Подтверждаете заказ?»
  4. Отвечает отказом, если задачу невозможно решить. Клиент: «Хочу килограмм французских свежих устриц с доставкой», оператор: «К сожалению, в продаже только устрицы с Камчатки ценой 1000 руб. за килограмм».
  5. Клиент отвечает согласием или отказом.
  6. Заказ выполняется службой доставки.
  7. Данные о заказе и диалоге сохраняются в личном кабинете на сайте.
  • В личном кабинете клиент:
    • смотрит историю заказов и переписок;
    • выбирает удобный способ связи: смс, почта, телефон.

Проживание за услуги

Задача

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

Проблема

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

Решение

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

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

Анкеты участников:

  1. Посетитель заполняет анкету:
    • указывает профиль работ, например, «Фотографирование» или «Уборка»;
    • прикрепляет портфолио и рассказывает об опыте работы;
    • указывает тип жилья, страну и время, когда он готов путешествовать;
    • заполняет личные данные;
    • подтверждает личность сканами документов.
  2. Принимающая сторона заполняет анкету:
    • указывает объём и описание требуемых работ;
    • указывает тип жилья, страну и время, в которое он готов принять гостей;
    • заполняет личные данные;
    • подтверждает личность сканами документов.
  • Структура сайта:
    • главная страница с описанием возможностей,
    • анкеты путешественников и принимающей стороны,
    • поиск по странам / видам работ / датам.

Обсуждение телепередач

Задача

Помочь зрителям обсудить телепередачи.

Проблема

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

Решение

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

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

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

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

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

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

Задание на разработку сервиса «Клиентомер» по сбору и выводу статистики посещаемости заведений

Задача

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

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

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

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

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

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

  1. Узнать, как часто клиенты ходят в магазин и сколько времени там проводят.
  2. Сэкономить время на сбор статистики.

Вайфай-модуль — это материнская плата с беспроводной сетевой картой и юсб-модемом в пластиковом корпусе. Ставим вайфай-модуль и инфракрасные датчики на входе в точку продаж. Модуль сканирует по вайфаю телефоны в радиусе 10 метров. Инфракрасные датчики подключаются по юсб к материнской плате. Оборудование ежеминутно отправляет по юсб-модему на сервер данные от инфракрасных датчиков и мак-адреса клиентских мобильных, даже если они не выходили в интернет. Вайфай включён не на каждом мобильном, поэтому мы скорректируем статистику с учётом данных посещаемости от инфракрасных датчиков.

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

  1. Ежедневная посещаемость за последний месяц с указанием новых и повторных посетителей.
  2. Посещаемость в течение текущего дня.
  3. Длительность посещений на сегодня.
  4. Отказы от посещений на сегодня (посетители, которые провели в магазине не более минуты и сразу ушли).
  5. По каким маршрутам перемещаются клиенты внутри заведения.
  6. Какие отделы магазина пользуются популярностью.
  7. Сколько из проходящих мимо людей заходят в заведение.

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

  1. На анимированной иллюстрации магазина покажу, как ходят посетители, как работает оборудование и какую статистику при этом видит клиент в документе Google Sheets.
  2. Расскажу о том, для кого сервис и в чём его польза.
  3. Покажу примеры статистики из личного кабинета.
  4. Дам ссылку на договор, расскажу про условия работы.
  5. Укажу контактные данные.

При начале работы клиент подписывает с мной договор об аренде оборудования. Ежемесячная плата — 5 000 руб. После подписания я монтирую вайфай-модуль и датчики на точке продаж, а также открываю доступ к статистике в Google Sheets для электронного адреса, указанного в договоре.

Клиенты сервиса — розничные магазины и кафе проходимостью от 100 человек в день. Для меньшей посещаемости статистика не имеет смысла — руководитель заведения и так хорошо знает своих посетителей.

Элементы дизайна и функциональность

На первой итерации я установлю один вайфай-модуль и два инфракрасных датчика в магазине Рокланд www.rocklandshop.spb.ru проходимостью 1000 человек в день. Руководитель магазина готов тестировать сервис на время защиты диплома, и если ему понравится, заключить договор.

Также я разработаю промостраницу и опубликую четыре графика в документе Google Sheets:

  1. График ежедневной посещаемости за последний месяц с указанием новых и повторных посетителей.
  2. Посещаемость в течение текущего дня.
  3. Длительность посещений на сегодня.
  4. Отказы от посещений на сегодня (посетители, которые провели в магазине не более минуты и сразу ушли).

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

План работы

Начало работ: 13 апреля, завершение работ: 29 мая.
Точка невозврата: 1 мая.

Этап Результат Срок, раб. дней
1. Составление договора аренды оборудования Договор аренды оборудования 4 дня
13–16 апреля
2. Согласование и доработка договора аренды оборудования Утверждённый у арт-директора договор аренды 5 дней
20–24 апреля
3. Создание макета промостраницы и создание примера статистики в Google Sheets. Тестирование и сборка вайфай-модуля Графический макет промостраницы и пример статистики. Работающий вайфай-модуль 4 дня
20–23 апреля
4. Согласование и доработка дизайна промостраницы, а также примера статистики в Google Sheets. Установка вайфай-модуля у клиента Утверждённые у арт-директора макет промостраницы и пример статистики. Работающий вайфай-модуль в заведении клиента, который отправляет данные на сервер 5 дней
27 апреля — 1 мая
(Точка невозврата)
5. Редактирование текста промостраницы, названий и подписей на графиках в Google Sheets Текст на странице, названия и подписи на графиках в Google Sheets 4 дня
11–14 мая
6. Согласование и доработка текста промостраницы, названий и подписей на графиках в Google Sheets Утверждённый у арт-директора текст на промостранице, названия и подписи на графиках в Google Sheets 5 дней
18–22 мая
7. Вёрстка и публикация промостраницы, вывод в Google Sheets статистики посещений от вайфай-модуля Опубликованная вёрстка страницы и выведенная в Google Sheets статистика 4 дня
18–21 мая
8. Согласование и доработка вёрстки промостраницы, исправление ошибок, тестирование продукта, сбор статистики Работающий проект со статистикой за неделю 5 дней
25—29 мая

Принципы работы

В основе совместной проектной работы лежат принцип fix time and budget, flex scope («ФФФ») и общая ответственность за срок выхода конечного продукта. Подход fix time and budget, flex scope буквально означает «зафиксировать срок и бюджет, сделать гибкой функциональность».

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

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

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

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

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

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

Техническая реализация

Браузеры

Сайт должен корректно отображаться в последних версиях браузеров: Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera и Яндекс.Браузер. Дизайн должен быть разработан с расчётом на минимальное разрешение 1024×768 пикселей.

Функциональность HTML-шаблонов доступна во встроенных браузерах мобильных устройств на базе Ай-ОС 7 и выше, Андроид 4.0 и выше. При этом отдельные мобильные версии шаблонов не разрабатываются, используется стандартная функция масштабирования.

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

Программно-аппаратная платформа сайта и средства разработки

Программная платформа сайта адаптируется под операционную систему Linux, веб-сервер Apache 2.x, PHP 5.3 или выше. В качестве сервера баз данных используется MySQL 5.0 и выше. Сайт работает в кодировке UTF-8. Элементы дизайна создаются на русском.

Программно-аппаратная платформа вайфай-модуля

Материнская плата Mini-PC Cubietech с вайфай-модулем Ralink и юсб-модемом Мегафон в пластиковом корпусе с системой вентиляции. Инфракрасные датчики подключаются по юсб к материнской плате. Установлена ОС Linux, которая сканирует по вайфаю телефоны в радиусе 10 метров.

Развернуть полную версию
Составление договора

Задача: Составить договор для дипломного проекта.

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

Для дипломного проекта я составлял договор на аренду оборудования, которое устанавливается у клиента в заведении. Утверждённая версия:

Договор аренды оборудования

«12» июня 2015 г., Санкт-Петербург

Арендодатель, действующий на основании Устава, и Арендатор, действующий на основании Устава, совместно именуемые Стороны, заключили Договор о нижеследующем.

  1. Предмет договора
    1. Арендодатель предоставляет Арендатору во временное владение и пользование вайфай-модуль и 2 инфракрасных датчика (далее — Оборудование) в течение срока действия Договора.
    2. Арендодатель доставляет, передает, монтирует и настраивает оборудование Арендатору по адресу: ______________________________ _________________________________________________________
    3. Арендодатель предоставляет доступ к данным, которые собирает Оборудование, под паролем на сайте ______________________________. Арендодатель предоставляет доступ Арендатору к статистике в Google Sheets по электронной почте _____________________________ через три дня со дня заключения договора.
  2. Права и обязанности
    1. Стороны обязаны:
      • не разглашать любую информацию и документы, касающиеся Договора, кроме предусмотренных Договором исключений, без предварительного письменного согласия другой Стороны, в течение неограниченного срока;
      • при изменении реквизитов не позднее 5 (пяти) календарных дней с даты изменения известить другую Сторону, иначе исполнение обязательств по прежним реквизитам будет считаться надлежащим и своевременным;
      • не уступать права требования по Договору без письменного согласия другой Стороны;
      • предоставлять другой Стороне полную информацию, влияющую на исполнение Сторонами Договора.
    2. Арендатор обязан принять Оборудование и оплатить арендную плату Арендодателю, а также вернуть Оборудование после окончания срока действия Договора в том же состоянии, в котором получил, с учётом нормального износа.
    3. Арендатор не вправе передавать взятое в аренду оборудование в субаренду, в безвозмездное пользование.
    4. Арендатор несёт ответственность за сохранность Оборудования. Если Арендатор или третьи лица повредят Оборудование, Арендатор компенсирует Арендодателю прямой действительный ущерб и упущенную выгоду, вызванные повреждением Оборудования.
    5. Арендодатель обязан обеспечить работоспособность Оборудования, а Арендатор обязан предоставить доступ к электрическим сетям 220В.
    6. Если Оборудование теряет работоспособность не по вине Арендатораили третьих лиц, то Арендодатель своими силами восстанавливает работоспособность или предоставляет замену.
  3. Расчёты
    1. Стоимость аренды не облагается налогом на добавленную стоимость в связи с применением упрощённой схемы налогообложения.
    2. Арендатор оплачивает ежемесячно сумму в размере ________________ рублей путём перечисления денежных средств на расчётный счёт Арендодателя согласно счёту на оплату.
    3. В стоимость договора входит монаж и настройка Оборудования.
    4. Арендатор перечисляет первый платёж не позднее 5 (пяти) рабочих дней с даты подписания Договора. Дальнейшие платежи Арендатор осуществляет ежемесячно с даты первого платежа.
  4. Ответственность и гарантии
    1. При нарушении Арендатором сроков предоставления оплаты работ и подписания актов Арендодатель вправе расторгнуть Договор.
    2. Арендодатель гарантирует, что оборудование не заложено, не арестовано, не обременено правами третьих лиц.
    3. Арендодатель не несёт ответственность за качество соединения с сетью Интернет, с функционированием сервиса Google Sheets, программного обеспечения Арендатора и другими обстоятельствами, находящимися вне компетенции Арендодателя.
  5. Сдача-приёмка
    1. Передача оборудования в пользование Арендатору и возврат Арендодателю производится по акту приема-передачи.
    2. Право владения и пользования оборудованием возникает у Арендатора после передачи ему оборудования Арендодателем по акту приема-передачи.
  6. Обстоятельства непреодолимой силы

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

  7. Срок действия и порядок расторжения Договора
    1. Настоящий Договор действует 1 год с даты его подписания с последующей автоматической пролонгацией, если Стороны не расторгли его.
    2. Каждая Сторона вправе расторгнуть Договор, уведомив об этом другую Сторону не позднее 5 дней до даты прекращения Договора.
    3. В случае досрочного расторжения Договора либо одностороннего отказа от его исполнения Арендатор:
      • обязан уплатить Арендодателю в течение 5 (пяти) рабочих дней полную стоимость аренды на дату расторжения;
      • вернуть своими силами Арендодателю в течение 2 (двух) рабочих дней Оборудование.
  8. Персональные данные и хранение информации
    1. Оборудование собирает, записывает, систематизирует, хранит, уточняет (обновляет, изменяет), извлекает, использует, передаёт (распространяет, предоставляет доступ) и удаляет мак-адреса (уникальный идентификатор, который присваивается единице активного оборудования компьютерных сетей), которые не являются объектами персональных данных.
    2. Оборудование передаёт деперсонализированную информацию на сервер Арендодателя. Арендатор получает доступ к данным на сервере Арендодателя по паролю.
  9. Иные условия
    1. Споры и разногласия между Сторонами разрешаются в обязательном досудебном порядке. При невозможности разрешения вопросов таким способом спор подлежит рассмотрению Арбитражным судом города Санкт-Петербурга согласно применимому в Договоре законодательству Российской Федерации.
    2. Любая информация и документы, представляемые Сторонами друг другу, должна быть оформлена в письменном виде и направлена с помощью почтовой, электронной или курьерской связи, при этом такая переписка признаётся Сторонами достаточным и допустимым доказательством в суде.
    3. С даты вступления в силу Договора прекращается действие любых иных соглашений между Сторонами, касающихся условий Договора.
Развернуть полную версию
Дизайн проекта

Задача: Разработать дизайн всех элементов проекта

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

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

Например, иллюстрация магазина, на которую я затратил в сумме 70 часов, ухудшила внешний вид и, на мой взгляд, снизила балл за эстетику. Яркость и простота за счёт минимума элементов — оптимальное решения для дизайна. В качестве примера посмотрите на работы двух студентов: Английские идиомы (4,36 балла за эстетику) и Сервис «Скриншотер» (4,43 балла).

Утверждённый с арт-директором макет промо-страницы Клиентомера:

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

За время работы над дипломом я сделал 28 промежуточных вариантов дизайна. Больше всего времени ушло на иллюстрацию магазина и её связь с другими элементами страницы:

Текст к проекту

Задача: Написать и утвердить текст у всех элементов проекта

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

На мой взгляд, Максим Ильяхов — самый отзывчивый из преподавателей, поэтому для экономии времени пробуйте выслать ему текст заранее. Также он даёт полезные замечания по структуре и подаче проекта в целом. Запомнилось, когда арт-директор вынужден был согласиться с критикой Максима по поводу подачи графиков на странице. На скринах выше это видно при переходе с 15 на 16 макет.

Именно Максим Ильяхов настоял на удалении буквы «т» из названия сервиса. В начале я и арт-директор были против, но спустя почти год понимаю: Максим, ты был прав :)

Внедрение проекта

Задача: Создать работающий проект и утвердить его у арт-директора

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

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

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

Хотя на внедрение отводится две недели, в зависимости от сложности проекта может потребоваться больше времени: например, для скриншотера типа Scrapp или системы статистики Клиентомера. В таком случае стоит начинать разработку хотя бы за месяц до сдачи диплома.

К концу этого этапа я подготовил проект, состоящий из трёх элементов:

  1. Промостраница сервиса «Клиентомер».
  2. Установленное в магазине клиента оборудование.
  3. Личный кабинет со статистикой в Google Sheets.

Если хотите обойтись без исполнителей, то попробуйте сервис Readymag. Он прост в изучении и позволяет быстро создавать несложные сайты

Я использовал служебное положение руководителя и передал программирование с вёрсткой своим сотрудникам. Это сэкономило время и помогло сдать проект точно в срок. Света и Вася, спасибо за помощь!

Защита диплома

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

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

Очная или дистанционная защита

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

Защита

Для выступления выделяется 10 минут. За это время надо ёмко и без воды в инфостиле (кто бы сомневался :) рассказать о задаче, полезном действии проекта и его сильных сторонах. Отдельно надо показать, за счёт чего этот проект будет работоспособен. Примерно половину времени рекомендуется потратить на демонстрацию проекта. Заранее проверьте, открываются ли сайт и слайды на презентационном ноутбуке. Например, я плохо работаю в Маке и к своему стыду прокопался в нём пару минут прямо на защите. Также было обидно, когда крутой сервис Scrapp отказался работать в процессе презентации из-за ошибки соединения с базой.

Освободите последнюю неделю перед защитой от других дел. Это период круглосуточной авральной работы

Вопросы от комиссии

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

Совет от Максима Ильяхова: если вопрос глупый или иррациональный, например «почему выбран такой оттенок зелёного цвета?», не надо оправдываться и углубляться в рассуждения, а лучше отшутиться в стиле «Это любимый цвет моей бабушки».

Защита с огоньком

Монотонное чтение презентации с экрана не поможет получить высокий балл. Если у вас нет таланта оратора, то постарайтесь придумать, как развлечь аудиторию в процессе защиты диплома. Например, Лера Бунина на защите проекта «Как научить бережливому производству» предложила сыграть в игру, показывающую пользу о внедрении бережливого производства. Аркадий Чугунов, создавший сайт повара Ивана Дубкова угостил всех вегетарианскими конфетами. Я принёс оборудование и прямо на презентации показал посещаемость Коворкафе в день защиты:

Подготовка к защите

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

Полезность проекта

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

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

Оценки от преподавателей

Шесть преподавателей оценивают каждый диплом по пяти дисциплинам: идея, логика, эстетика, техреализация (добавилась на втором потоке), презентация. На основании оценок двух потоков я подготовил таблицу со сравнением арт-директоров по баллам их студентов. Если вы ещё определяетесь с выбором арт-директора, возможно эта таблица в этом поможет:

Ср. балл Идея Логика Эстетика Техреализация Презентация
Артём Горбунов 3,87 4,16 3,84 3,93 3,25 3,67
Михаил Нозик 3,75 4,16 3,58 4,00 3,25 3,54
Илья Бирман 3 студента отчислено 3,71 3,69 3,29 3,99 3,83 3,47
Результаты третьей ступени

Третью ступень я закончил на почти том же месте, что и первые две, в этот раз разделив 3-4 строчку с Валерией Буниной. Кстати, лидеры первых двух ступеней Аркадий Чугунов и Андрей Кириллов заняли только 5 и 7 места соответственно. Результаты второй ступени не влияют на оценку за диплом.

3-4 место

по окончанию третьей ступени

4,18 5,14 4,06 3,79 3,71
Средний балл Идея Логика Эстетика Презентация

Результаты и рейтинг
в Google Sheets студентов 3 ступени набора сентября 2014 г.

Выводы

Третья ступень

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

Школа стажёров

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

Есть вопросы и комментарии к статье?
Пишите на info@smartis.ru