Сибирикс
Компания
50,60
рейтинг
17 октября 2013 в 14:29

Дизайн → Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp


*Whoision — официальное название сервиса, с налетом еле заметной иронии.

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

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

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

Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.


Часть 1. Внешняя сторона хакатона. Веб-сервис за 24 часа


Думаем!


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

Бэклог!


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

Дизайн!


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



Макеты!


Верстаем рабочие экраны в Bootstrap, вот уж где ванильный хардкор! Готово!

Синхронизация!


Где есть много свободного серверного места? На Google! Кто раздает аккаунты, пригодные для авторизации на нашем сервисе? Снова Google! C чем мы будем делать синхронизацию? C Google!

Проекты!


Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!

Загружаем!


Делаем удобнейший загрузчик макетов: обвел, перетащил, загрузил!



Подготовка!


Закачик хочет красивую картинку, так сделай ее в Хуижине! Выровняй слайды, подбери цвет фона, скопируй ссылку!



Демонстрация!


Сколько угодно народу с Google-аккаунтами могут смотреть ваш макет и комментировать! Достаточно ткнуть в нужное место, написать коммент и вуаля — его увидят коллеги.

Тестирование!


На хакатоне тестить некогда, поэтому вдумчиво тестим на следующий день, потягивая какавушку!

Деплой!


Покупаем домен, выкладываемся на хостинг, получаем рабочий сервис!





Чем радует Whoision:
  • Быстрая авторизация — один клик и вы полноценный пользователь.
  • Удобное хранение файлов на Google Drive — всегда можно поредактировать свои проекты, даже не заходя на сайт сервиса.
  • Синхронизация — всегда актуальное состояние проектов: и в драйве, и в личном кабинете.
  • Настройка показа, можно выровнять слайды и подобрать фоновый цвет — чтобы подавать дизайн в подобающем виде.
  • Совместное комментирование — помогает собрать качественную и визуальную обратную связь.

И для самых любопытствующих. Команде волонтеров посвящается.

Часть 2. Обратная сторона хакатона. Репортаж пост-фактум


Исправно интервьюирует копирайтер Рома.

Рома: Ребят, всё, что я знаю, так это что у вас был хакатон и что проект назывался Whoision (далее употребляется транскрипция «хуижин» — прим. авт.).

Алексей: И до сих пор называется!



Рома: Ок, до сих пор :) Поэтому рассказывайте буквально всё: как пришли к проекту, как проходил сам хакатон. Я так понимаю, что началось с того, что «мы решили сделать свой Invision».

Владимир: Да, нам обломно платить буржуям, поэтому поступили сурово: действительно решили сделать свой инвижин.

Марат: У ребят было желание покодить в свободное время. И, в общем-то, мы пришли и покодили. Тебе надо было вчера прийти на ретроспективу.



Владимир: Кстати, это второй хакатон. Первый проводили два года назад, в итоге сделали онлайн-сервис для игры в Planning Poker. И тоже за сутки.

Рома: Мощно! Ну ок, давайте по порядку. Вы все пришли к девяти утра и...

Алексей: Ненене, каждый приходил, когда хотел. Марат пришел к 11-ти, я к 12-ти.

Иван: Я пришел по традиции первым, в 9:20, настроил окружение… Потом Леха пришел.

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



Владимир: Иван очень здорово помог в плане подготовки к началу работы. У нас был сверстанный макет и готовое окружение.

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



Рома: А что вообще было готово к началу? Вы работали уже с начатым проектом, или...? Ну и кто что делал — тоже рассказывайте.

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

Марат: Я вообще сам кодить не собирался, думал, потестирую, за пиццей сбегаю, кофе заварю… ;) Пришел, не обнаружил второго Лёху, понял, что у нас два разработчика и один тестер, пришлось вспоминать азы. Кстати, очень быстро все вспомнилось.

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

Рома: Вот, насколько я помню, Инвижин — довольно навороченный сервис, где можно загружать макеты, оставлять комментарии по клику, со множественной авторизацией. А что умеет Хуижин?

Марат: Пытались научить его пиццу заказывать — так и не научили :) А вообще на сервис можно загружать свои макеты и показывать результат работы заказчику. Авторизация на сервисе происходит автоматически, используется Google-аккаунт. На Google-драйве же хранятся все изображения, то есть если вы создаете в Хуижине новый проект и загружаете в него картинки — у вас на драйве создается папка whoision, в которой появляется папка по названию проекта. И в нее заливаются макеты. Бесхитростно и очень удобно.

Иван: Если загружать картинки в гуглодрайв, то в Хуижине тоже создаются проекты. То есть работает обратная синхронизация. На проекте пробовали впервые писать на node.js — крутая штука. Также работали с Mongo DB, тоже понравилась эта база данных.

Рома: Конфликты на проекте были?

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

Владимир: Есть такая болезнь, называется «этот код говно, потому что его писал не я» :)

Марат: Нам было весело, я море кайфа получил. Вспомнил, как программировать, просто побывал в этом чаду угара.

Алексей: Я думал, не продержусь до конца. В итоге таки просидел до часу ночи.

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

Рома: Как вообще выживали-то?

Иван: В обед прервались на пинг-понг, после него голова заработала значительно лучше.

Рома: А заправлялись чем?

Алексей: Мы часов в пять с Маратом начали бухать.

Марат: Ложь и клевета :D

Алексей Второй: Я пробовал работать на энергетиках. Так вот, Адреналин Раш с бананом — говно!

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

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

Алексей Второй: Я впервые на хакатоне, понравилось, время проходило очень быстро. Пришел — хоп! — пора в теннис играть, — хоп! — сделали проект.


Вот такая история.

Лично буду очень благодарен, если вы захотите потестировать сервис и написать замечания и предложения. Можно прямо в комментах, а можно мне на почту zevvs@sibirix.ru.

Кнопка-ссылка:


Автор: @zevvssibirix
Сибирикс
рейтинг 50,60
Компания прекратила активность на сайте

Комментарии (64)

  • +57
    Название доставило.
    • +3
      Неимоверно. Я думал глумится кто-то.
      • +1
        Да это старая тема.
        Яндекс — Шмандекс
        Гугл — whoyougle
        • +67
          Оффтоп
          • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Баунти-шмаунти, сникерсы-шмуикерсы.
          • +1
            Есть служба такси — «Макси».
            • +1
              А еще «птица — синица» (с) :DDD
              • +3
                A well a don't you know about the bird?
                Well, everybody knows that the bird is the word!


        • НЛО прилетело и опубликовало эту надпись здесь
    • +16
      И как предложить это клиенту?
      — мы будем делать макеты и по ходу выполнения выкладывать их в Хуижн, вас тоже в этот Хуижн пригласим, будете там комментарии к нашему дизайну писать.

      или:
      — Алло, Николай Петрович? Вы видели вчерашние макеты в нашем с вами Хуижине?
      • +2
        Да никак не предлагать, никто ж вас насильно не тащит. Если вам важнее «сохранить лицо» перед клиентами — шлите им свои макеты в почте аттачами, пусть оценивают.

        Можно, конечно, у самих клиентов спросить, что им лучше. Смогут ли они великодушно закрыть глаза на название и пользоваться тем, что удобнее, или же предпочитают пусть менее удобно, зато без «этого недостойного слова». Только как же такое спросишь, это ж СТЫДНО — такое спрашивать. Клавиатуру придется мыть после такого вопроса…
      • 0
        Ну для особо интеллигентных можно говорить «ИКСИГРЕКИЖИН».
      • +2
        Предварительно проверьте их песней Майкла Джексона «Who is it?».
        • 0
          Есть замечательный саундтрек к Охотникам за привидениями — «Who you gonna call? — Ghostbusters!»
    • 0
      За что в карму то нагадили?
      Порой не понимаю политики хабра.
      • +2
        Ооо… дорогой друг, я тут 6 лет, и давно уже не понимаю хабр… Комментарии зелены от плюсов, а карма в неделю на 5 пунктов падает. Я даже издевки ради информацию «о себе» изменил, но не помогает :)
      • 0
        Не пытайтесь — это не политика хабра, а ее аудитория.
  • +9
    смело
  • 0
    Насчёт загрузки картинок: Я попытался загрузить файл с таким названием «Картинка.PNG» и мне выдало ошибку «Неверный тип файла». Сделайте лучше проверку по заголовкам файла
  • –4
    *Whoision — официальное название сервиса, с налетом еле заметной иронии.
    Нифига себе «еле заметной»! Да это первое, что прямо врывается в глаза! Почти все же (жившие достаточное время в России или достаточно долго говорившие на русском языке) знают прямую аналогию Вашему: «Прачечная? Who-ячечная» :)
  • +30
    Как в том анекдоте, про Асус-Хуасус, Асер-Хуасер, Хуавей-Хуавей.
    • 0
      Фирма Huawei отличается исключительной честностью для своих покупателей.
  • +1
    Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!


    Не, не работает. А жаль, ибо очень полезный сервис намечается. С удовольствием буду пользоваться.
    • 0
      Тоже дальше регистрации не пустило
    • +1
      попробуйте skwibl он тоже бесплатный и скоро выйдет новая улучшенная версия.
      • 0
        А что они планируют поменять?
        • 0
          Проверьте на следующей неделе, уже будет новая версия.
  • +4
    Новый проект не создаётся. Ошибок не выводит.
    • +1
      На самом деле возвращается ошибка аля «File not found: 0BzNBtasLbejpaVhQVVYtbThDaW8» просто в интерфейс не выводит, видимо на гугл драйве то ли файл не получается создать, то ли нужно руками что создавать.
    • 0
      Чорт, однако хабраэффект. GoogleApi не успевает отрабатывать :(
      • 0
        И что делать нам:?
  • 0
    Почему-то в гугл-драйве создалось два каталога «whoision». Зачем?
    И еще нет вертикального выравнивания картинок. И глючит фоновый цвет — устанавливается когда ему вздумается. Хмм… И все остальное тоже глючит. А в целом — отличная идея!
    • 0
      С таким-то названием вам точно никто не обещал, что всё будет работать правильно!
  • +12
    название с помощью этого сервиса huifikator.ru/ придумали??
    • +2
      Да!
    • 0
      Ну вот, там теперь Хабраэффект.
      • 0
        Уже заработало, я видимо в нехороший момент попал, когда тормозило…
    • 0
      Не, тогда б было «who-инвижин»
    • +1
      Спасибо, теперь я читаю комментарии к этому анонсу там :)
    • +3
      Автор проекта просил передать, что: «был бы рад инвайту на Хабр! :)»
    • 0
      Много думал - многое понял ))
      Преподаватели-хуеподаватели кафедры-хуяфедры
  • +3
    От таких названий Артемий мерещится )
    • +2
      * удалено: причина не в там нарезал *
  • +6
    Чем хороши такие названия, даже в закладки добавлять не надо. Понадобится, вспомнится :)
  • 0
    Надо сделать, чтобы можно было добавлять группы «видимости» пользователей проекта.
  • 0
    А я только узнал о вас, решил попробовать ПланнингПокер онлайн, а там: циклическая ссылка.
  • –1
    … и сделать уведомление об «ответе»

    Кстати хабраэффект

  • –1
    Проект не создается — хабраэффект?
    • 0
      угу ((
  • 0
    И сразу же баг вылез: нельзя загрузить файл с расширением .PNG (большими буквами)
    Не хватает кнопки обратной связи!
  • 0
    О, ща босу отправлю письмо со ссылкой, как раз закончил главную страницу нового проекта :)
  • 0
    А как удалить коммент к макету? Хотя бы свой?
    • 0
      Судя по всему пока никак.
  • +3
    Мне понравилось, но при авторизации написано английским языком что оно будет иметь доступ к моим файлам и директориям на гугл диске, нажал отмена, после чего «все упало»

  • 0
    Лебовский нарушает правила колористики и типографики!
  • 0
    Понравилось!)
    Но мои клиенты на столько олдскульны, что у них нет аккаунта Google.
    Возможно ли оставлять комментарий к салайду без аккаунта?
    • 0
      Пока нет, но изначально планировалось. Фича, безусловно, полезная :)
  • +1
    Напомнило картинку «Метрополитен имени Лебедева».
    i.imgur.com/Zxe6JrC.png
  • 0
    error: "create folder error"
    message: {errors:[{domain:global, reason:notFound, message:File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU}],…}
    code: 404
    errors: [{domain:global, reason:notFound, message:File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU}]
    message: "File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU"
    result: "error"
    


    Непосоздавать =\
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Еле заметная ирония, конечно, хороша — спору нет.
    Но я не хотел бы быть на месте наемного работника, который должен был бы презентовать это сервис суровому руководству, не разделяющему нотки иронии.
    — Предлагаю вам взглянуть на шикарный сервис — Хуижин.
    — Хуи простите что?
  • 0
    Интерактив — кнопки при переходе. Клиенты как будто нажимают на кнопки пи перемещаются между слайдами — вот это, конечно, приемущество инвижина, которое не реализовали.

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

Самое читаемое Дизайн