76 ссылок, которые помогут сделать концепцию дизайна эффектнее и быстрее
Расскажем о том, какие инструменты лежат у дизайнеров Pragmatica под рукой при разработке концепции дизайна. Особенно актуально, если на проекте отсутствует контент. Эта подборка поможет расширить графические возможности, сэкономит ресурсы и сроки.
Если вернуться на восемь лет назад и посмотреть оттуда — невольно накатывается слеза. Тогда набор был скудный: Shutterstock, два шрифта Google fonts и Helvetica. Можно было фотографировать или искать 3D дизайнера, но это ресурсы, которых на проекте часто не было.
Ко всему клиент мог просто не согласовать тяжелую концепцию. Так студии и уходили в минус, создавая дорогие картинки сугубо для портфолио.
К счастью, те времена позади и теперь инструментов, которые помогают экономить время и ресурсы, сильно больше. Об этом наша статья.
3D-конструкторы и программы
О тренде 3D писали в каждой предновогодней подборке последние лет пять, но массовый взлет так и не произошел. Очевидно, что порог входа в моделирование выше, чем в другие графические редакторы, это требует как знаний, так и аппаратных возможностей. Но за последний год конструкторы, шаблоны и программы выросли в доступности и качестве — теперь нужно минимум железа и специальных знаний, хотя бы для старта.
- Adobe Dimension — программа, которая входит в пакет Creative Cloud и дает возможности простой работы с 3D. На объекты можно наклеивать изображения, настраивать свет, размер и положение камеры. Также на Adobe Stock можно купить 3D-объекты и свет дополнительно. Поддерживается OBJ формат.
- Онлайн-конструктор Vectary. Им мы практически не пользуемся, но у этого софта есть преимущество — он полностью браузерный и есть возможность командной работы. Бесплатный тариф на 25 проектов, а с командой работой за 12$ в месяц.
- Spline — инструмент для создания 3D, которые можно оттуда экспортировать в код. Отличная идея, но реализация еще сырая.
- superscene — набор, который включает в себя 140 объектов, 14 персонажей и другие элементы, есть исходники Blender и файл для Figma. Заплатить нужно будет 60$ для доступа ко всему набору.
- Подборка 3D наборов на UI8, включая абстрактные фигуры, персонажей и прочее от 8 до 80$.
- ToyFaces 3D — набор объемных аватарок.
- Объемные руки на Getillustraion.
- Так же наборы есть в комьюнити Figma, например, простейшие геометрические фигуры, которые доступны бесплатно.
Типографика
Шрифт – один из главных, если не самый ключевой элемент визуальной коммуникации в графическом дизайне и сайтах. Если взглянуть на работы за прошлый год, то видно, что типографика стала во главу угла. Появилось много экспериментов с сетками, разными гарнитурами, типографическими символами.
В этой подборке бесплатного немного, за шрифты нужно платить – и это нормально. Шрифтовые компании, особенно те, что работают с кириллицей, делают значительную часть работы за нас, которая достается всем за относительно небольшие деньги.
- TypeToday — создатели известных кириллических шрифтов, таких как Graphik, Druk или Kazimir. Последний, например, начинается от 2800 рублей за одно начертание.
- TypeType — TT Commons или TT Norms сбалансированные и нейтральные шрифты, которые хорошо подходят для цифровых проектов. Цена TT Norms от 39$.
- Paratype — их вы хорошо знаете по Circe или Futura PT. Так же они на сайте продают шрифты разных авторов, такие как Proxima Nova или Gilroy.
- fontfabric — шрифт INTRO или BEBAS их работа.
- Шрифты с открытой лицензией на Google Fonts.
- Pangram Pangram Foundry, Parachute и Grillitype — кириллическая версия попадается редко, но иногда найти можно.
Для поиска хорошо использовать Myfonts, для вдохновения ModernCyrillic и Futurefonts. Если сомневаетесь в покупке и экономите бюджет, то шрифт можно арендовать при помощи Fontstand.
Иконки
С одной стороны, наборов иконок тысячи, с другой – принципиального сдвига не случилось. Слишком много однообразных, унылых и линейных иконок, без выразительности и характера. Если вы знаете хорошие наборы – предлагайте в комментарии.
Впрочем, иконки стоит научиться рисовать самостоятельно, имея минимальные графические навыки. Все дело в том, что они очень зависимы от стиля типографики, макета и всех составляющих визуальной части.
- «Спектр формы» — набор на 3000 геометрических форм, от дизайнера Лебедева Тимофея.
- 159 000+ иконок на icons8, есть объемные и интересные emoji.
- Flaticon — ветеран дизайнерских иконок, лучший способ найти что-то базовое быстро.
- Иконки в комьюнити Figma, например, есть трендовые Glass icons.
- Наборы на UI8, Creative Market и других агрегаторах разных авторов.
Графические приемы
Создать можно гораздо больше с нуля, при помощи редактора, но мы предлагаем вам держать под рукой эти, они больше всего встречались в 2020 году и очень простые для воспроизведения. Конечно, еще остаются возможности работать с тенями и размытием, которые есть в Figma, но будем считать, что они известны по определению.
Youworkforthem — сайт с крупной коллекцией разной графики: 3D, иконки, фото и другое. Но, мы его используем чаще всего для поиска текстур и эффектов. Например, эффект разбитого стекла за 20$ или эффект сканера за 30$.
Meshgradient для создания сложных градиентов из нескольких цветов, есть галерея, экспорт бесплатный.
Эффект перехода для создания объемной линии из градиентов в Illustrator. Краткий урок с основным принципом, развернутый урок на 30 минут.
Карта градиентов, эффект, который делает изображение двухцветным, урок с нужным таймкодом.
- Минутный урок по созданию объемной типографики в кольце.
- Pixelbuddha – здесь есть как интересные текстуры, так и эффекты. Например Halftone эффект за 18$.
Мокапы
На практике использование мокапов сходит практически на нет, мы в студии их используем только в отдельных случаях – для демонстрации конкретного носителя, либо когда они часть визуальной концепции. Времена громоздких и тяжелых рендеров, кажется, подошли к концу, решения можно хорошо презентовать и без них.
- LS graphics — мокапы для брендинга и презентации сайтов, если анимированные, средняя цена 30$
- Don Design — все позиции стоят одинаково по 1,99$. Есть решения для настоящих ценителей, такое как ВАЗ 2109
- Yellow images — очень большая коллекция, с самыми специфичными мокапами, есть даже бутылочка для детского питания или шарфик. Цена за PSD 14,49$.
- Агрегация мокапов от разных авторов есть на Ui8. Всегда можно поковырять CreativeMarket, но найти что-то хорошее займет много времени.
Фото
Никаких новостей у нас нет, ссылки остаются примерно те же из года в год. Если у вас есть что-то новое — предложите в комментарии. Но для цельности коллекции оставим наши ссылки.
- unsplash — коллекция фотографий с лицензией на открытое пользование, много качественных фотографий.
- Icons8 — самостоятельная коллекция, можно сразу делать коллажи в png, не редко встречается в работах дизайнеров на Behance.
- 500px — можно договориться с автором и купить у него лично, но стоимость от 100$.
- На Yellow images можно заказать png с прозрачным фоном, так же есть возможность повернуть изображение в нужном вам ракурсе.
- Еще есть Adobe Stock и Burst.
Нейросети
Прорыва за прошлый год так и не случилось. Есть два-три относительно полезных сервиса, но в остальной массе нейросети генерируют разный мусор, который никак не поможет нам в дизайн-концепции.
- Background remover — чтобы не заниматься этой рутинной работой. Во мне снова плачет дизайнер, работающий в 2010-ых годах, когда каждый волос на фотографии нужно было вырезать вручную и спасали только png объекты в google. 3 изображения бесплатно.
- Сервис для генерации фотографий людей.
Возможно, вам пригодится сервис для ретуши и изменения фотографий от nvidia.
Анимации
Сейчас уже сложно представить полноценную презентацию цифрового дизайна без анимаций, эффектов или взаимодействия. Порог входа как у программ, так и базовых уроков – пара часов, а пользу переоценить сложно.
- Principle — незаменимая классика для Mac. Все, что можно сделать в нем, без проблем переносится в верстку.
- Framer — очень похож на пример выше, но с командной работой и полностью онлайн.
- Smart animate — более примитивная возможность для анимации, в сравнении с тем, что выше, зато сразу в Figma и бесплатно.
- Есть интересные исходники для After Effects, например, кинетическая типографика: sparta cinetic, typography cinetic.
- Есть смысл изучить и держать под рукой легко воспроизводимые эффекты, которые делаются при помощи встроенных плагинов в After Effetcs, такие как CC Sphere или СС Mr.Mercury.
Иллюстрации
Конструкторы и шаблоны иллюстраций росли последние два года семимильными шагами. Выбор очень большой: от трехмерных и объемных до анимированных и линейных.
- +5000 иллюстраций на getillustrations.com — есть как анимированные, так и изометрические. Цена разная, но в основном не превышает 70$. Например, набор Simpline illustrations за 29$.
- Конструктор Icons8, на данный момент 34 стиля. Маленький png до 534 px можно выгрузить бесплатно, остальное от 19$ в месяц.
- Еще один конструктор blush.design. Начать работать можно бесплатно, тариф со всеми возможностями 15$ в месяц.
- LS.graphics — больше 15 наборов иллюстраций, есть бесплатные версии практически в каждом из наборов. Средний ценник 30$.
- Агрегаторы разных авторов на UI8 или Storytale.
- Уже были подборки на vc.ru с иллюстрациями, вот такая о бесплатных, еще одна в нашем Instagram.
Это все, если мы забыли что-то важное или новое — пишите в комментарии. А после этой статьи, можно почитать нашу прошлую статью «7 точек роста дизайн-студии», либо подписаться на наш канал в Telegram.
Пользуясь случаем, хочу спросить @vc.ru : почему убрали закладки как индикатор отклика у статьи? Сейчас их на сайте не видно, а в приложении остались. Вполне релевантный, как мне кажется, показатель.
Комментарий недоступен
Добавил вашу статью в закладки если что :) Спасибо.
Комментарий недоступен
Хмм, а у меня и в приложении не видно. Но я его только сейчас поставил для проверки.
И верните название студии с большой буквы! :)) UPD. Сменил сам, думал, что редактирование недоступно после модерации.
Комментарий недоступен