Графический дизайн

Всем привет! В очередной статье мы представляем вам список из 10 компаний, для которых использование Фигмы стало отправной точкой на пути к новым вершинам.

Это истории проблем и пути их решений, где современный дизайн-инструмент сыграл решающую роль.

Возможно, вы планируете разработать собственный перспективный проект и думаете над тем, какой инструмент использовать. Или работаете в компании, которая пользуется другими инструментами для дизайна и прототипирования. В любом случае, после прочтения этой статьи — у вас будет еще +10 причин начать использовать Фигму.

Фабрицио Тейшейра — дизайнер в Work & Co, основатель UX Collective.

---

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


^{Фото Ricardo Mancía}

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

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

Что общего во всех этих историях?

Всегда всю анимацию делал в Adobe Animate CC. И тут все эти умирания флэша, множественные отпевания, песнопения, которые, наверняка, преувеличены. Но осадочек, как это бывает, остался. Остался в виде вопроса: А вообще есть ли что-то лучше для 2D-анимации, кроме адобовских решений? Не буду пересказывать как, но после множества инсталляций и «де», я пришёл к Toon Boom Harmony.

Если много читать лень, то Да. Ответ «Да». Я остался на Harmony и назад уже не хочу. Кому же интересно узнать почему и примерить узнанное под свои нужды, рекомендую читать дальше.

Заказчик

Независимый организатор конференций. Организовывающий отраслевые мероприятия на товарных рынках, с целью создания делового общения. Проводящие конференции в Европе, Центральной Азии.

Задача

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

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

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

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

Многим известна проблема трёхмерной графики — отсутствие легковесных кроссплатформенных решений в вопросе вывода текста.

Большинство реализаций позволяет использовать выбранный шрифт в виде текстуры. Публикуемая библиотека ttf2mesh реализует другой способ — она преобразует векторные символы TrueType шрифта в сеточные объекты. Это позволяет выводить текст в виде набора треугольников.

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

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

Это статья посвящена тому, как использовать популярный инструмент рисования графов Graphviz в кооперации с препроцессором C/C++ (далее просто препроцессор).

Ключевым моментом является то, что язык описания графов dot, который использует Graphviz, по своему синтаксису пригоден для обработки препроцессором. Так задумано разработчиками. Благодаря их прозорливости, мы при описании графов можем использовать следующие возможности (цитирую википедию по памяти):

• замена соответствующих диграфов и триграфов на эквивалентные символы «#» и «\»;
• удаление экранированных символов перевода строки;
• замена строчных и блочных комментариев пустыми строками (с удалением окружающих пробелов и символов табуляции);
• вставка (включение) содержимого произвольного файла (#include);
• макроподстановки (#define);
• условная компиляция (#if, #ifdef, #elif, #else, #endif);

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

История кнопок в картинках от head of design Дмитрия Уколова: текстовые ссылки, скевоморфизм, Flat и Material design.

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

В общем, попробую объяснить, как дизайнеры используют цвет в UI и как всё это можно «типизировать», не вгоняя дизайнеров в жёсткие рамки. Приведу примеры реализации на React JS (для разработчика) и в Figma (для дизайнера). Привязки к React и Figma у схемы нет, просто мне в них привычнее.

В схеме нет ничего хитрого и уникального (может, только название). Все идеи висят в воздухе. Можно воспринимать её как мой best practice по работе с цветом в приложениях. Opium.Fill — это общие принципы, совмещённые с любовью давать всему подряд имена.

Систему можно использована совместно с Material Design.

Статья написана для front-end разработчика и немного для дизайнера.

Всем привет.

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

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

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

А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).

Однажды в нашу службу поддержки позвонила женщина, которая случайно разделила семью, выбирая места в вагоне. Она хотела купить целое купе, а взяла 15, 16, 17 и 18 места, считая их одной группой. Мы и до этого подозревали, что не всем удобно считывать схемы, но в тот момент поняли это особенно явно.

Старая схема:



Новая после исследований:



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

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

А я сейчас расскажу вам про то, что вообще может пойти не так при выборе мест в разных вагонах.

Привет, хабровчане!

Я по профессии — аналитик, 10 лет проектирую системы и пишу требования. Предлагаю обсудить подход к тестированию UX/UI.

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

Почему не запомнить мои данные и не подставить их? Зачем навязывать доп.опции — снижает же лояльность?

Думаю, я не одна раздражаюсь на неудобный и непонятный UX/UI. Вопрос: «А как это лечить?»



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

Хочу поделиться своей интересной находкой, которая помогла мне наконец осуществить свою маленькую мечту. Объединить все свои рабочие инструменты единым стилем. И не просто стилем, а хорошо продуманным, выверенным и целостным. Что мне помогло этого добиться? Это палитра Nord, портированная для большинства современных и не очень редакторов, терминалов и не только. Если вам не чужда подобная мечта, прошу под кат.

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

Многие исследователи занимались вопросами цвета, и одним из самых заметных, несомненно, был Иоханнес Иттен, автор книги «Искусство цвета». В своей работе автор рассматривает множество аспектов колористики: психологическое воздействие цвета, «вес» каждого оттенка, сочетание цвета и формы и многое другое.

**Всё, что вы знали о UI/UX дизайне в 1С, но боялись спросить.

Скорость внедрения как типовых 1С — решений, так и разработанных с «0» — это один из краеугольных камней успеха и эффективности проектной команды, компании.

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

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

Если вы очень переживаете за показатели Google Page Speed в разработке сайтов, и у вас подгорает за каждый лишний килобайт не стоит продолжать читать данную статью.

Тех же, кого не пугают большие размеры, и любит риск прошу под кат ;)

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

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

Однажды среди бизнес-уроков Николая Мрочковского услышал про интересную технику работы с собственным временем и целями. Называется она "Таблица жизни".

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