В настоящее время департамент мобильной разработки Rambler&Co активно расширяется, в том числе и в плане iOS-разработчиков и UX дизайнеров. Большое количество людей и проектов, ведущихся ими, усложняет и без того непростой процесс передачи дизайна разработчикам. Всем, так или иначе связанным с мобильной разработкой, знакомы проблемы и разногласия, возникающие на стыке интересов программиста и дизайнера — начиная тем, в каких единицах измерять расстояния, и заканчивая тем, кто должен нарезать элементы экранов в различных разрешениях. Чтобы окончательно решить проблему в рамках нашей компании, мы решили подготовить подробные гайдлайны по этому взаимодействию.

“Это унылое диалоговое окно действительно нужно?”

В этой статье я изложил главные принципы Material Design и дал советы по их воплощению. Текст написан по следам мастер-класса для разработчиков, который мы, Роботы, устраивали совместно с российским офисом Google (Think Mobile).


Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.

[TL;DR]

[ 2-я часть книги ]
[ 3-я часть книги ]
[ 4-я часть книги ]
[ 5-я часть книги ]
[ 6-я часть книги ]
[ 7-я часть книги ]
[ 8-я часть книги ]

Введение

Команда MailChimp любит делиться результатами своей работы, что впоследствии дает удивительный эффект. Это помогает нам внимательнее относиться к тому, чем мы занимаемся: «Посмотрим, как же нам это удалось? И почему мы решили, что это – наилучший метод?».

Мы выделяем эффективные подходы к решению тех или иных задач: «Мы сэкономили кучу времени, решив это таким образом». Публикация таких подходов порождает интересное обсуждение: «Значит, вы это сделали именно так? Интересно, а почему?».

Это помогает нам не зазнаваться: «Да, вы правы. Мы могли бы реализовать это иначе». Скромность и открытость для новых идей – источник для нашего профессионального роста: «Хорошо, мы руководствовались данным методом, но решили его пересмотреть и провести эксперимент. В результате мы пришли к тому, что есть и более эффективные подходы».

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

Предлагаю читателям «Хабрахабра» подборку 22 дополнений (скриптов) помощников, необходимых фронтенд-разработчику.

Hexy

Печально выбирать слои в макете и каждый раз запускать палитру цветов только для того, чтобы получить шестнадцатиричное значение того или иного цвета. Hexy позволяет использовать инструмент «Пипетка»: нажмите на цвет объекта и скопируйте его непосредственно в буфер обмена.

У компаний с большим портфелем продуктов со временем встает вопрос упрощения работы над ними. В Mail.Ru Group их около 40, не считая мобильных и планшетных версий, а также огромного игрового направления. Наше подразделение Почты и Портала занимается почти половиной из этих сорока. Что вместе с сопроводительными приложениями, мобильными сайтами и промо-ресурсами — за сотню проектов. Сейчас мы ведем их поэтапное обновление и унификацию вокруг нескольких гайдлайнов. На примере одного из них я расскажу о том, как перестроить дизайн-процесс от классического «прототип → макет → верстка → код» для каждого экрана к более эффективному и современному, основанному на фреймворках.

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

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

Эта схема, безусловно, доказала свою жизнеспособность, однако и она не лишена недостатков. Мы постарались исправить ситуацию в проекте Aviageek.

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Прим. перев.: В рамках нашего блога на Хабре мы решили начать публикацию серии переводов материалов, подготовленных создателями британского госпортала Gov UK. Команда Gov UK знаменита тем, что очень подробно описывает весь ход своей работы – поэтому ее материалы могут быть полезны с практической точки зрения (разумеется, не только для создания масштабных госсервисов), ведь все, о чем пишут создатели проекта, было реализовано на практике. Мы решили начать серию переводов с блока, посвященного гибким методологиям проектирования, и его важной части – создания так называемого user-centered design.

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

1 Один столбец вместо нескольких

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

Это «НейроКран»: при помощи нейроинтерфейса ты силой мысли управляешь процессом розлива напитков.

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



А это сейф, открываемый силой мысли в квесте в реальности «Киберпанк». Здесь четыре задвижки, каждая со своим уровнем сложности. Первую можно открыть, почти не концентрируясь, а последняя — это уже вызов для навыка сосредоточения.

Случайно увидел вот такую подсказку на Озоне:



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

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

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

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

Ниже представлены несколько примеров того, как этот эффект используется в современном веб-дизайне:

Чем приложение неудобно в нынешнем виде и как его можно улучшить

Как-то раз один из сотрудников Redmadrobot собрался навестить бабушку, живущую в далеком городе, и установил приложение РЖД, чтобы купить билет на поезд. Увидев, что приложение поддается ему нехотя, он решил проанализировать, в чем же дело. Дизайнер Леонид Борисов перерисовал апп и объяснил логику изменений.

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



Меня зовут Гена Лохтин. В Яндексе я отвечаю за проектирование интерфейса нового Браузера, и специально для Хабра хочу сейчас рассказать, почему мы пришли к такому новому интерфейсу и какие трудности нам удалось преодолеть по дороге. Внутри для нового браузера мы использовали кодовое название «Кусто» (чуть ниже расскажу почему). Так что иногда я буду использовать его в тексте.

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

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

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

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

Итак, речь пойдет о дизайнерах в маленьких компаниях. Но не о тех, кто рисует одноразовые художественные промо-сайты (где часто работает подход «чем оригинальнее, тем лучше»), а о тех, кто создает функциональные, полезные приложения и веб-интерфейсы, рассчитанные на долгосрочное использование. Вроде бы, какая разница, что рисовать – везде кнопки, странички, картинки, текст… А вот и нет. Это совершенно разные задачи и решать их должны люди с совершенно разными навыками и талантами. Но, обо всем по порядку.

Сделать веб-сайт доходным можно двумя способами. Первый – привлекать больше трафика, второй – повышать конверсию, т.е. побуждать большее количество посетителей становиться покупателями. Скорее всего, вы уже слышали о том, что трафик можно просто купить – сотни интернет-ресурсов предлагают эту услугу. А не лучше ли оптимизировать конверсию? Как узнать, что именно нужно проверить, и как провести A/B тестирование?

А/В тестированию и оптимизации уровня конверсии посвящено бесчисленное количество ресурсов. Однако, очень редко на сайтах подробно разбирается весь этот процесс целиком от самого начала («Что и как тестировать?») и до конца («Как улучшить конверсию?»).

В финале отборочного турнира DARPA Robotics Challenge, который прошёл 20-21 декабря, победила японская команда SCHAFT с роботом S-One, набрав 27 баллов из 32-х возможных. Примечательно, что этот небольшой японский стартап недавно приобрела корпорация Google, которая, похоже, всерьёз взялась за робототехнику — за последний год Google купил восемь робототехнических компаний, включая Boston Dynamics.

DirkLoechel наконец-то закончил работу над самой большой в истории сравнительной схемой космических кораблей из научно-фантастических произведений: художественных фильмов, сериалов и игр. Star Trek, «Звёздные войны», EVE Online и многие другие (полный список под катом). Все культовые корабли — они тут. Открывайте оригинал изображения 4268 x 5690 пикселов — и погружайтесь.

Примечание: Dribbble — сервис, где графические дизайнеры хвастаются друг перед другом своими работами.


Лишь одно из этих погодных приложений пытается решить насущную проблему.

В сообществе дизайнеров наблюдаются расходящиеся тенденции. С одной стороны мы наблюдаем интересные блоги от Райана Сингера и Джулии Жуо, которые развивают наше ремесло. С другой стороны, всё большее количество народу постят свои работы и обсуждают их на Dribbble, что в целом двигает наше ремесло в обратную сторону. Этот пост – не про Dribbble, как таковой, он про то, что ценит это сообщество. Я буду использовать термин «дизайн продукта», но также буду иметь в виду дизайн пользовательских взаимодействий с продуктом.