В Челябинске действует

Боевая школа веб-дизайна

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

Задача школы

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

Кто

Нас зовут Андрей Шапиро и Денис Фадеев. Мы занимаемся дизайном веб-сервисов, интерфейсом мобильных и настольных приложений.

Где

Мекра — кружок по методологиям дизайна продуктов и услуг в интерактивной среде. Встречи нерегулярны.

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

Почему

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

Для кого

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

Уровень претендентов

В школе действуют 2 дивизиона, разделенные по уровню подготовки.

Ученик 1-го дивизиона

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

Ученик 2-го дивизиона

  • выясняет видение и задачу, задавая вопросы;
  • сам ведёт проект, взаимодействует с заказчиком и разработчиками;
  • бодро верстает макет: композиция, типографика;
  • знает как устроен продакшн: фронтенд, бэкенд;
  • продумывает сценарии, строит карты путешествия пользователя;
  • учит ребят из первого дивизиона;
  • прочёл Нормана, Раскина, Альтшуллера, знает какого размера делать иконку Фиттса. Читает Харовера и Тафти.

На каких условиях

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

Процесс обучения

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

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

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

Для первого дивизиона наставник выступает в роли заказчика и арт-директора. Ученики получают от него рекомендации по доводке макетов. Очные посещение школы — по желанию и договорённости с наставником.

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

Первые новобранцы

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

Прошедшие первый рубеж рассказывают о своих достижениях:

Интерфейс мобильного приложения системы «Интермеса»

Арт-директор
Андрей Шапиро
Дизайнер
Влад Зелинский
Заказчик
Рустем Искаков, генеральный директор «Айтемакс»

Интермеса — система для организации работы интернет-магазинов, которая помогает обслуживать клиентов быстрее.

Обработка заказа в типичном интернет-магазине устроена так.

схема обработки заказа в интернет-магазине
  1. Менеджер проверяет
  2. Кладовщик комплектует
  3. Логист отвозит
  4. Клиент получает

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

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

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

План выполненных за лето работ

  • Освоить синтаксис элементов интерфейса.
  • «UI/UX/Usability» — разобраться в терминологии.
  • Разработать интерфейс мобильного приложения.
  • Обсуждение задач с заказчиком мобильного приложения Интермесы.
  • Тим Харровер, «Настольная книга газетного дизайнера»
  • Брюс Тоньяцини, «Первоосновы в проектировании взаимодействия».
  • Джеф Раскин, «Интерфейс: новые направления в проектировании
    компьютерных систем».

Поиск по географической точке для Квартирки

Арт-директор
Андрей Шапиро
Дизайнер
Софа Караваева
Заказчик
kvartirka.com

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

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

Летом 2013-го расширенный поиск выглядел так:

версия поиска до

Мы предложили свой вариант:

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

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

мини-карта

Система распознает следующие географические объекты:

  • адрес, название объекта, перекресток улиц, достопримечательность, парк, площадь
  • метро
  • аэропорт
  • ж/д вокзал

После выбора подсказки, название объекта появляется в поле и список квартир обновляется:

сайт Квартирки

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

План выполненных за лето работ

  • Роберт Брингхерст, «Основы стиля в типографике».
  • Джим Кемп, «Сначала скажите нет».
  • Джеф Раскин, «Интерфейс: новые направления в проектировании
    компьютерных систем».
  • Тим Харроуэр, «Настольная книга газетного дизайнера».
  • Самоучитель по HTML
Метафора интерфейса:
  • Переговоры об организации мастер-класса по леттерингу.
  • Переговоры с заказчиком в задаче для Квартирки.

Как попасть в школу

Прислать письмо по адресу andrew@ashapiro.ru со ссылкой на ваши последние работы по теме школы. Скорее всего мы вам ответим и станет понятно, что делать дальше.

Зачем это вам

Мы готовы делиться знаниями и учиться у вас.

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

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

P. S.

Возможно, вы подумали, что уже всё знаете и умеете, недоумевая как так произошло, что вы ещё не с нами. Если так, напишите нам.