Подборка интересных материалов для веб-дизайнера за май 2019. Статьи для развития, видео-уроки по Photoshop и Illustrator, интересные ресурсы и сервисы, бесплатные кириллические шрифты, проекты для вдохновения и другое. Изучайте, вдохновляйтесь и становитесь лучше!
Для развития
30 полезных советов и лайфхаков в Photoshop
Хоткеи и сочетания клавиш, полезные фишки, а также различные техники.
Все об SVG анимации
В данной статье автор описывает тонкости работы с SVG-графикой, SVG анимацию (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество.
Работа с текстом в Photoshop: 10 эффективных приёмов
- Правильное сглаживание текста
- Стили абзацев (Paragraph Styles) и символов (Character Styles)
- Вписывание текста внутрь фигур или написание текста по контуру
- Автоматический рыбный текст
- Применение Postcard и 3D Extrusion к тексту
- Конвертирование строчного текста в блочный и обратно
- Преобразование в фигуру
- Использование Smart Objects для сохранения возможности редактировать текст и применения фильтров или деформации
- Горячие клавиши для очень быстрой работы с текстом.
- Копирование CSS текстовых слоёв
Психология: 39 исследований человеческого восприятия
В статье представлена выжимка из психологических исследований о том, как люди воспринимают графику.
UX поиска: как создать доступную форму поиска
- Поиск влияет на прибыль вашего бизнеса. Поиск без усилий приводит к переходам без усилий.
- Широко признано, что размещение формы поиска в верхнем колонтитуле обеспечивает лучший пользовательский опыт.
- Использование таких кнопок, как увеличительное стекло, дает пользователю необходимый триггер и возможность отправлять свой поисковый запрос различными способами.
- Будьте готовы, что пользователи попадут на несуществующие страницы. Чтобы вытащить их с этих страниц, сделайте поиск доступным по всему сайту.
- Расширенные параметры поиска позволяют пользователям сузить область поиска до нужной им страницы / сегмента.
- Мобильные формы должны быть четко видны и учитывать экраны разных размеров.
- Автозаполнение сокращает время, необходимое для поиска конкретной страницы или продукта.
- A / B-тестирование показывает, как различные места размещения формы поиска влияют на коэффициент конверсии и, в конечном итоге, на пользовательский опыт.
Анимация в мобильных приложениях: тестируем Lottie
LottieFiles это библиотека для iOS, Android, Web и Windows. Библиотека состоит из файлов json, в которых закодирована анимация из Adobe After Effect. Плагин, который участвует в создании таких файлов, называется Bodymovin. Он имеет JavaScript движок и рендерит анимацию в режиме реального времени.
Посмотреть
Уроки по Photoshop. Дизайн и практика от Moscow Digital Academy
Курс «Элементарно, Вектор!» по изучению Adobe Illustrator CC
Сервисы и ресурсы
Чек-лист от Михаила Грекова по созданию таблиц с которыми работают
В чек-листе 65 требований и ссылки на теоретическую базу. Требования касаются как дизайна, так и разработки/тестирования.
HARD CLIENT
Сайт со статьями и кейсами об UX исследованиях. Автор, Станислав Хрусталёв, в поисках формулы идеального клиентского опыта публикует на сайте: Детальные обзоры сервиса компаний на всех стадиях пути клиента с рекомендациями; Статьи о том, как создать лучшую систему управления клиентским опытом с нуля; Обзоры платформ и сервисов, применяемых в управлении клиентским опытом.
Geenes
Сервис для подбора оттенков цвета для интерфейса. Результат отображается сразу на примере интерфейса. Набор цветов можно экспортировать в Sketch, Css, Sass и тому подобные препроцессоры и библиотеки.
cssfx
Коллекция готовых к использованию прелоадеров и ховер-эффектов
Sheet2site
Сервис по созданиею простых сайтов из гугл таблиц
Google Earth Studio
Программа для сооздания анимированных видео 3d моделей объектов земли
Useberry
Простое и быстрое создание и проведение юзабилити-тестов прототипов.
Portlab Icons
Бесплатные анимированные иконки
Figma
Figma Plus
Платформа для установки плагинов. Теперь Figma станет намного гибче и универсальнее.
Framer
Framer Playground
- Новый встроенный редактор кода
- Полная библиотека прототипов
- Лучшая документация
Adobe Xd
unDraw for XD
Плагин: Коллекция бесплатных иллюстраций
Adobe XD представляет дизайн-системы. Большое обновление
В релизе XD этого месяца был представлен ряд новых возможностей, которые позволят вам создавать облачные документы, содержащие повторно используемые цвета, стили символов и компоненты, легко делиться ими с членами команды, чтобы они использовали их в своих документах, а затем централизованно управлять обновлениями элементов дизайн-системы, чтобы все могли использовать новейшие объекты.
Sketch
Charts
Более 60 бесплатных адаптивных графиков и диаграмм для Sketch.
Обновленный Sketch 55
- Smart Distribute — быстрая настройка расстояния между слоями в столбце или строке.
- Слои из SVG Code — скопируйте код SVG и вставьте его в Sketch. Фигуры будут создаваться из этого кода.
- Улучшение привязки — новые символы, стрелки, линии и слои лучше привязываются к сетке.
- Повышение скорости — копирование и вставка между документами работает значительно быстрее.
- Улучшение привязки — слои привязываются к повернутому тексту.
Шрифты
Cyntho Next
Бесплатный современный шрифт light-начертания с поддержкой кириллицы
Cyntho Next Slab
Бесплатный шрифт с засечками light-начертания с поддержкой кириллицы
Cocobiker
Интересный шрифт, возможно когда-нибудь пригодится в необычных проектах. Бесплатный для персонального использования, есть кириллица
Geometrica Sans
Бесплатный для персонального использования шрифт.
Trapist
Бесплатный шрифт с поддержкой кириллицы
Для вдохновения
