image

Наверняка вы видели в моей ленте на Dribbble или Behance за последние 4 месяца много красочных и бессмысленных интерфейсов :) Если нет, то это был 12 недельный sketch марафон в котором я на протяжении 12 недель (включая выходные) делал по 1 shot каждый день. Ниже я расскажу о том что из этого вышло.

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

image
4th Week (Friday)?—?Date App Info

1.Почему «12 недельный марафон», а не «Daily UI»


Это вопрос который мне задавали более 2-х дюжин раз :) Ответ одновременно прост и сложен – Daily UI сильно прост и это не то что мне было нужно.

У меня было несколько критериев по которым daily ui не подходил

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

• Я хотел прокачать скилл в скетче, поскольку 95% всей моей работы выполняется в нем.

• Хотелось прокачать именно mobile UI, поскольку работ в портфолио было не много и этот факт очень расстраивал.

Собственно так и родилось название «12 недельный скетч марафон». Примитивно, может быть, зато предельно ясно :)

2.Что полезного можно извлечь из марафона?


Скорость работы

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

image
2nd Week (Sunday)?—?Dating App

Подача

Я окончательно убедился в том что пользователи оценивают shot в целом, то есть не только сам продукт, но также и окружение, включая цвета, тени и т.д. Часто работы выходили в ТОП просто из-за хорошо подобранных цветов.

image
6th Week (Sunday)?—?Your Mood

Mobile UI Skills

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

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

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

• Пользователи больше готовы к нестандартным элементам в mobile, чем в web


image
6th Week (Thursday)?—?Search Area

3.Для чего будет полезен марафон?


Недавно прочитал статью Тобиаса Шнайдера про бессмысленные shots на dribbble и полностью с ним согласен. Я думаю что марафоны отлично подходят для новичков или дизайнеров которым нужно быстро набить шишек, заполнить портфолио и прокачать skills.

4.Что вам поможет перед началом?


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

Для тех же кто все-таки решился начать, для вас я подготовил список рекомендаций ниже.

Лучше иметь план

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

image

Постите shots в одно и то же время

Прежде чем понять эту простую вещь у меня ушло 2 недели. Слава богу есть неравнодушные люди, которые объяснили что им нравится следить за марафоном, но они не успевают поставить лайк в тот же день если shot был выложен вечером :)

Используйте больше контраста

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

image
2nd Week (Thursday)?—?Product Card

Концепты это хорошо

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

image
2nd Week (Friday)?—?Smart Termostat

5.Чего не стоит делать



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

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

Прекращать марафон

Тут все просто, нельзя отказываться от своих слов :) Сказал – сделал.

Спамить

Не стоит делиться каждый день вашим новым shot на facebook или behance. Людям не нравится когда им загаживают ленту одним и тем-же. Достаточно будет постить наиболее успешные shots которые все смогут оценить.

image
3rd Week (Saturday)?—?Select Date

Ставить марафон на последнее место

Марафон занимает много сил, поэтому желательно заниматься созданием shot в начале дня пока ваша голова не забита другими делами. Если оставлять создание shot а на вечер, вы рискуете быстро перегореть и бросить это дело.

Ожидать что всем понравится эта идея

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

6.Заключение


Это были насыщенные 4 месяца в моей жизни. Спустя 3 недели я до сих пор ловлю себя на мысли что я забыл запостить shot на Dribbble :)

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

Все shots вы можете увидеть на Dribbble и самые популярные shot на Behance, буду благодарен если поставите лайк на тех работах которые понравились :)

P.S. Статья оказалась довольно популярной на Medium, решил ее опубликовать в русском переводе на хабре. Поэтому создаю опрос чтобы знать насколько вам будет интересен такой материал.
Насколько вам интересны подобные статьи

Проголосовало 144 человека. Воздержалось 39 человек.

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

Поделиться с друзьями
-->

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


  1. alexmay23
    17.05.2016 18:31

    Выглядит в принципе красиво, но юзабилити под вопросом


    1. Roling
      17.05.2016 18:32

      Да, я об этом писал в самой статье :)


    1. dom1n1k
      17.05.2016 19:16

      Это же концепты, а не готовые продукты


      1. Roling
        17.05.2016 22:20

        Да, все верно


  1. maks1mm
    17.05.2016 22:56

    Как по мне скетчи в статье очень крутые.


    1. Roling
      17.05.2016 22:56

      Спасибо :)


      1. maks1mm
        17.05.2016 23:16

        Правду говорят что встречают по одёжке, я бы установил себе каждое приложение с такими скринами как в статье, даже если функционал для меня не сильно востребован, только чтобы посмотреть :)


        1. Roling
          18.05.2016 00:20

          Да, я тоже так часто делаю. Вообще я бы парочку приложений бы сделал, но до этого пока не дошло :)


  1. almkhaj
    18.05.2016 08:29
    +2

    Посмотрел Ваш dribbble-profile, все очень круто. Каковы условия использования Ваших идей в приложении?


    1. Roling
      18.05.2016 12:08

      Пользуйтесь на здоровье. Главное сообщите что собираетесь сделать что то из того что есть в марафоне. Плюс был бы благодарен, если скинете ссылку на ревью :)


      1. almkhaj
        18.05.2016 14:34

        Спасибо. К сожалению, не являюсь дизайнером (Бог этим не одарил), и, конечно, оцениваю как профан. Тем не менее, очень впечатлен Вашей фантазией и работоспособностью.


  1. VitChe
    18.05.2016 11:53

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

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

    На первом же скриншоте, шкалы на темном и светлом фоне смещены относительно друг друга. Числа над делениями, выровнены хаотично, у Гонконга число 9 выровнено по правому краю деления, у Сан-Франциско оно же уже выровнено по центру деления. У текущего времени справа от красной направляющей разный отступ в каждом блоке.

    На скриншоте который показывает 4 недельный прогресс, текст на кнопках не выровнен по высоте. Иконка сердечка смещена вверх относительно центра.

    Такие ошибки наблюдаются на протяжении всего марафона.

    В первую очередь 100/365 дневные марафоны направлены на прокачку навыков новичками. Исходя из вашего портфолио, вы далеко не новичок. Поэтому очень не приятно наблюдать, что вы используете этот марафон, как и статью, только для маркетинга.

    В таких испытания самому себе, хотелось бы видеть больше профессионализма, не надо следовать тренду, вы ведь его организовали для самого себя!


    1. Roling
      18.05.2016 12:05
      +2

      Добрый день,

      Спасибо за ваше мнение, обязательно учту его в следующих статьях.

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

      По поводу гайдлайнов, тут вы правы, но я не собирался делать приложения по гайдлайнам, а просто прокачать навыки в mobile ui. Если бы я делал все по гайдлайнам это было бы 80+ однотипных интерфейсов.

      Ошибки были есть и будут и марафон как раз делался для того чтобы их стало меньше. Исходя из моего портфолио было видно что у меня не так много работ с мобильными интерфейсами.

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

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


    1. maks1mm
      18.05.2016 12:30

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


      1. Roling
        18.05.2016 12:39

        Согласен с вами


  1. ClearAirTurbulence
    18.05.2016 13:16
    +1

    Красиво. Но еще один момент: желательно прогонять стринги через спелл-чекер. На скрине термостата из 8 слов 2 написаны с ошибкой, а это резко снижает привлекательность.


    1. Roling
      18.05.2016 13:16

      Да, с ошибками вообще беда :)


  1. dante_photo
    18.05.2016 16:35

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

    В каждом макете чувствуется какое-то веяние ubuntu или популярных китайских оболочек для Android типа MIUI (субъективно)


  1. ArslanSapashev
    18.05.2016 17:00

    Блин, как красиво. Это же сколько вдохновения надо…


    1. Roling
      18.05.2016 17:00

      Немало если в двух словах :)


  1. J_K
    19.05.2016 01:26

    Красивые скетчи!
    Если не секрет, в какой программе их рисовали?


    1. Roling
      19.05.2016 13:41

      Добрый день, спасибо :)

      Рисовал в этой программе http://www.sketchapp.com


      1. J_K
        20.05.2016 00:38

        Ясно, спасибо!