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

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

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

— Да, вот как со всем этим работать?

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

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

Весна — пора учёбы! Совместно с МФТИ и компанией Contented мы запускаем на образовательной онлайн-платформе Coursera курс по специальности «Дизайнер интерфейсов». Позже будут запущены ещё три курса, посвященные созданию интерфейсов и работе в команде.

Курс разработан таким образом, чтобы студенты могли освоить новую профессию практически с нуля, но при этом получили все необходимые знания, чтобы сразу приступить к работе. Авторы и преподаватели курса — профессионалы с большим опытом в индустрии. В ходе обучения студенты получат систематизированные знания о процессе разработки интерфейсов, узнают о последних трендах в дизайне интерфейсов, об особенностях платформ и о том, как учитывать их при разработке дизайна, научатся работать с самыми актуальными на сегодняшний день инструментами. Курсы ведут сотрудники Mail.Ru Group, Notamedia, Red Keds и Redmadrobot — практикующие специалисты с большим опытом работы.

В цикле статей Tinkoff Design System я расскажу, как мы строим нашу дизайн-систему по методологии Atomic Design.

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


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

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

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

14 апреля в Екатеринбурге пройдет конференция DUMP. Программный директор секции «Дизайн» Дарья Прокуда рассказала, что интересного будет в секции и зачем на нее идти. Ей слово.



Всем привет!

Меня зовут Дарья Прокуда, я работаю арт-директором в JetStyle и второй год являюсь программным директором секции «Дизайн» на DUMP.

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

Поговорим про интерфейсы и про то, что видим на этой ленте статей, прокрутив её вниз, до пагинатора.



Конечно, очевидно, что после кнопки с номером «8», ведущей на страницу номер 8 по стрелке, похожей на стрелку возле слова «Туда» должна идти кнопка, ведущая на страницу с номером 9.

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

Поможем доказать это.

1. Почему вредно после кнопки «8» ставить кнопку со стрелкой, похожей на стрелку «туда», но ведущую не туда?

К примеру, вот очень похожая…

Роман Шелехов, руководитель группы развития корпоративных электронных каналов в Банке ВТБ и магистр Гильдии вольных проектировщиков, специально для «Нетологии» адаптировал статью Paul van Oijen о визуализации требований к анимации.

«Анимация заряжает интерфейс энергией и позволяет пользователю узнать, что происходит до, во время и после действия» — IBM

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

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

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

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

В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.

Это перевод статьи дизайнера-программиста Джона Голда, занимающегося системами дизайна в Airbnb, а ранее — сотрудника проекта Grid, который, как и uKit AI, делает раннюю попытку применить нейросети и машинное обучение в дизайне и редизайне веб-элементов.



Дизайн – это почти бесконечный процесс выстраивания всевозможных гипотез с дальнейшей попыткой собрать детали воедино.

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

В сегодняшней креативной и технической среде термины UI (user interface/пользовательский интерфейс) и UX (user experience/опыт взаимодействия) используются больше, чем когда-либо. В целом, они относятся к деталям и идеям, которые были актуальны в течение многих лет, еще до появления этих аббревиатур.

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

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

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



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

Впервые о теории близости я прочитал в 2007 году. Она была сформулирована так: «объекты, расположенные близко друг к другу, воспринимаются связанно». Тогда я подумал: «спасибо, Кэп! Я как-то и сам догадался, что букву “М” нужно вешать ближе к мужскому туалету, а не к женскому». Тогда я не осознал, что это одно из главных правил дизайна, которое помогает подбирать расстояния между элементами, размеры полей, расположение кнопок, размер логотипов и многое другое. А главное, теория позволяет быстро понять, хороший перед вами дизайн или нет, даже если вы не дизайнер.

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



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

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

У дизайнера есть несколько разных способов передать иконки разработчику:

— отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом.

Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.

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