Ваш дизайнер – настоящий гений и его продукт идеален. Он доблестен в неравной борьбе с ТЗ и всегда выходит победителем. Но уже пятый по счету верстальщик, матерясь, делает из его макетов какую-то гадость? Не торопитесь искать шестого. Чаще всего причина легко устранима – достаточно лишь поведать вашему гению о нескольких приземленных правилах и попросить его им следовать.

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

Всем привет. Неделя почти закончилась и за это время копилка Dribbble пополнилась кучей работ дизайнеров со всего мира. Я предлагаю вам отмотать таймер назад и посмотреть что интересненького за эту неделю нарисовали другие UX/UI артисты. В роли независимого эксперта наблюдателя предлагаю собственный обзор лучших дизайн-макетов. В конце объявлю тройку лучших на свой взгляд, но начну с номинантов общим списком. Поэтому, если вам интересно куда двигаются тренды дизайна и гайдлайны desktop-продуктов, то…

В начале этого сентября в Windows, как часть 53-го обновления, появился новый модифицированный дизайн основного пользовательского интерфейса Chrome, т.н. «Chrome MD» (Material design). Он стал последней ступенью трёхступенчатого ввода в действие нового дизайна, который был начат в релизе 51 с Chrome OS и Linux и был продолжен в релизе 52 с macOS. Windows стала высшей точкой этого процесса, и, поскольку Chrome не закончится никогда, то мне кажется, что сейчас самое время оглянуться и поразмышлять над этим процессом, который занял почти 2 года и который дал некоторые знания и опыт, полезные, возможно, и для вас.

Пока пара энтузиастов взялась за конвертацию моих идей в готовый пресет для Stylish, у меня возникло мотивирующее чувство продолжить. Сегодня уйдём в глубь поста, посмотрим как мы сможем улучшить визуальное восприятие древовидных комментов, кое-где сбалансируем стили. Вобщем случилось то, чего я опасался больше всего — тяга к улучшизму обуздала меня и я кое-где подправил не только цвета. Так как интерес к теме darcula для Хабра был ощутим, я позволю себе катиться дальше с “вывороткой” цвета.

Яндекс.Деньги продолжают масштабный редизайн сервиса, начатый два года назад — о первых результатах мы подробно рассказывали на Хабре. Обратная связь, полученная за это время от сообщества и постоянных пользователей, подтвердила нашу гипотезу: чтобы сделать сервис удобным для новой аудитории, нужно почаще повторять мантру «я нерепрезентативен» и смотреть на приборы. 

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

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



Небольшое историческое отступление: Яндекс.Деньги существуют с 2002 года, и первые десять лет — то есть большую часть жизни — наша аудитория была очень похожа на аудиторию Хабра: опытные интернет-пользователи, которые работают в IT и смежных отраслях. Даже если нужное действие запрятать в четыре клика от главной страницы (так делать, конечно, не надо) — они справятся, потому что пришли в сервис с чёткой целью и сильной мотивацией. 

«Пользовательский интерфейс» (UI), «пользовательский опыт» (UX) и контент — эти слова в сфере ИТ у всех на слуху. И каждый из этих элементов важен для создания качественного и успешного продукта. Поэтому сегодня мы подготовили для вас подборку из 35 книг, которые могут пригодиться дизайнерам и контент-маркетологам на пути к завершению проекта.



Фото baldiri CC / Flickr

Кнопка – простейший каждодневный элемент дизайна для взаимодействий. Хотя кнопки кажутся простыми элементами UI, их дизайн за последние десятилетия сильно менялся. Но всегда в сторону улучшения распознавания и ясности.

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

Эволюция стиля

Трёхмерная кнопка

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

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

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

10 октября Одноклассники и Mail.Ru Group запускают пятый Russian Design Cup. Это старейший и самый известный турнир для русскоговорящих дизайнеров, который проходит с 2012 года — в прошлом году мы собрали 210 участников и более 300 решений.

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

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

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

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

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

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

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

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

Заранее благодарю, если укажете на какие-то неточности перевода, если таковые заметите. А вот, собственно, сам материал автора.

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

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

Вот только вопрос в том, как же развить это самое дизайн мышление?

Простая стратегия.

Генеральный директор студии lab.AG Артём Геллер, работавший над новой версией президентского сайта Kremlin.ru, дал интервью изданию Smashing Magazine — в нём он рассказал о разработке ресурса, технических аспектах работы с администрацией президента, создании адаптивного интерфейса сайта, а также раскрыл некоторые детали проекта.

В сентябре прошлого года на маркетплейсе Themeforest.net появился раздел Sketch Templates. Изначально эта категория экспериментальная и закрыта для большинства авторов, поскольку сами Envato не были уверены в потребности скетч темплейтов. Они разослали достойным по их мнению авторам письма с предложением разработать шаблоны для данной категории. Таким образом наполнили каталог продуктами высокого качества. Хоть сам графический редактор Sketch.app относительно молодой, однако постоянно растущая многомиллионная армия пользователей, основная масса которых UI/UX дизайнеры, сформировала спрос на данный вид товара.

Нет причин не быть в числе первых

На момент появления категории Sketch Templates на нашем темфорестовском аккаунте не было заэпрувленных шаблонов, мы активно работали над первым HTML шаблоном. Я решил, что создание Sketch шаблона – это неплохая возможность наконец-то “засветить” аккаунт, поскольку конкуренция небольшая, а потребность в шаблонах есть. Я даже писал письмо в поддержку с просьбой залить шаблон в данную категорию. Однако ответ был однозначен: к сожалению, категория Sketch Templates находится в стадии бета-тестирования, а это значит, что добавлять шаблоны в категорию можно исключительно по приглашению.

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

Все части статьи: 1 | 2 | 3 | 4 | 5 | 6

---

«Чтобы двигаться дальше, мы должны понять, что нужно людям»: разработка нового сервиса

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

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

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

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

1 апреля 2016 года социальная сеть «ВКонтакте» представила редизайн своего сайта. Новый дизайн был тогда запущен в тестовом режиме. Работа над ним велась полтора года. 17 августа произошел окончательный переход. Все пользователи социальной сети были принудительно переведены на новый дизайн.

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

Мнения, как всегда, разделились. Пока эксперты и пользователи в волю высказываются. Какие выводы из этого сделают разработчики нового дизайна?