Недавно я прошла серию уроков по анимациям в фигме, и вот мои впечатления!

Давно хотела глубже погрузиться в изучение фигмы, смотрела уроки и читала статьи. Большая часть из них строиться вокруг базовых инструментов. Чувствовала, что не хватало более глубокой практики. Анимации я делала и до этого, но они для меня оставались сферой, где чёрт ногу сломит.

В начале марта нашла этот плейлист с уроками, и он меня порадовал.

Больше стали понятны принципы работы в проге. Каждое задание адаптировала под себя, со своими небольшими дизайн концепциями, параллельно думала, в каких проектах и как могла бы применить новые знания.
Как я уже однажды писала: самое сложное – это запомнить сразу все моменты и быстро применять их на практике😅 Но это дело опыта, главное, что начало положено💪
Ещё у ребят есть канал в тг , где они выкладывают другие уроки и делятся разными фичами:
https://t.me/pajamaacademy

Я выкладывала не все работы. Некоторые не очень нравилось, некоторые были слишком учебными (типа анимации разных кнопок). Но те, что есть, вы можете посмотреть по хэштегу #дашиндиз

Анимации в фигме ч.10 👆

Такой интересный эффект проявления картинки. В целом всё было несложно и понятно. Главное понять принцип работы 👌

Это последняя анимация из цикла видеоуроков, которые я проходила! Скоро выложу пост о них и подробнее расскажу об этом опыте🗣

#дашиндиз
Гифка там👇

Анимации в фигме ч.9👆

Простенькая такая анимация. Немного экспериментов с эффектом стекла.
Выходим на финишную прямую!

#дашиндиз

Анимации в фигме ч.8👆

Что было просто: анимировать разрыв головы и бегущие строки (т.к. это было похоже на прошлые работы)
Что было сложно: самое сложное во всех заданиях – запомнить, как оно работает, чтобы потом быстро применять 🤓

#дашиндиз
Гифки в комментариях👇

Auto layout в фигме – инструмент изрядно упрощающий работу, если уметь им пользоваться.
Простыми словами: эта функция помогает комбинировать объекты на странице. Благодаря этому вёрстка сайта становится более удобной, так как макет проще адаптируется под разные размеры экрана 👩‍💻

Я ещё не до конца постигла искусство создания auto layoutов, благо в интернете много информации. Мне понравился этот видео урок. Здесь кратко объясняют принципы работы этого инструмента. Плюс – в ролике делятся бесплатным тренажёром, который помогает лучше понять материал.

Анимации в фигме ч.7👆

Две мои любимые на текущий момент (в особенности из-за работы с любимыми темами)

Что было просто: делать вылеты предметов на первом видео; настраивать бегущую строку на втором.
Что было сложно: по какой-то причине картинки на видео1 не сразу сложились в нужной последовательности. Нужно было немного потыкать (а возможно фигма просто хотела их подольше загружать)

#дашиндиз
Какое видео больше понравилось вам?👇

Анимации в фигме ч. 6👆

Во многом эта анимация некоторая солянка из эффектов, которые были ранее. Зато каков невероятный дизайн! (удалите у меня тик ток)

Что было просто: найти мемы
Что было сложно: от части муторно соединять все анимации вместе. Заняло больше времени, чем обычно уходит на урок.

#дашиндиз
Пишите своих любимчиков итальянского брейнрота
В комментариях гифка👇

Видели новую фичу в фигме?

Теперь можно закастомить своего минидруга! Он бегает за курсором, а когда хочется простого дизайнерского поработать – послушно сидит в уголке на панели инструментов.

Такой получился у меня. Делитесь своими питомцами👇

Сегодня дизайнеры развлекаются, как могут😁

Яндекс забавляет банановыми приколами 🍌
Видели ещё примеры 1-апрельских дизайнерский шутеек?

Что думаете о ребрендинге Золотого Яблока?

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

Но новый дизайн неплох!
•Мне нравится новый шрифт с его хендмейд эстетикой.
•Логотип в том же стиле как будто отлит из жидкого золота. В его форме можно увидеть разные смыслы, он считывает лучше чем привычное лого.

Кстати насчет него: вечно задавалась вопросом – что же означает лого зя? Помимо ассоциации с удвоенным знаком Chanel, мне в голову приходил образ сердцевины яблока. Что-то такое в этом есть.

Лучше этот дизайн или нет вопрос обсуждаемый. Но что точно на 100% – маркетинговый отдел постарался на славу. Можно поучиться у них проведённой коллаборации с Duo, явно повысившей продажи обеим сторонам 💸💸💸

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

#супердиз
https://ux.pub/editorial/15-sovietov-dlia-uluchshieniia-ux-form-rieghistratsii-i-vkhoda-v-sistiemu-54b0

Chrissie Abbott – одна из представительниц стиля, упомянутая в одной из статей выше.

Здесь недостаточно картинок для описания всего визуального безумия. Вся соль в видеоэффектах. Тот случай, когда дизайн скорее про творчество, чем про корпоративную юзабилити и это круто.

👉Нравится, как шапка с информацией изначально не находится на своём типичном месте (в верху страницы), а добирается до него спустя несколько листаний вниз. Классный первый экран с небольшим видеопрямоугольником, который в какой-то степени выполняет роль загрузочного окна. А ещё смешная деталь: когда опускаешься по странице, и интуиция подсказывает, что информации нет непривычно долго – появляется надпись с призывом листать вниз – и контент таки находится!

#супердиз

Брутализм – трендовый антидизайн?
Последние пару лет он тут и там мелькает в веб-дизайне, и пока не планирует сдавать позиции (в определённых кругах)

Отличительные черты:
• отказ от стандартных форм
• акцент на аутентичность
• контркультурность
• привлечение внимания через эпатаж
• экспериментирование с технологиями
• пренебрежение стандартами эргономики

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

Подробнее о стиле��тут

О крутых представителях брутализма в дизайне👉тут

А также пинтерест доска с работами в этом стиле, которые мне нравятся👉тут

#супердиз

Анимации в фигме ч.5 👆

Что было просто: в целом оба эффекта не вызвали особых сложностей. Загадка первой – в перемещении цветных фигур и наложении текстуры шума; второй – в копировании объекта несколько раз и настройке анимации на прыжок.

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

#дашиндиз
Гифки там👇

Преподавательница по проекту посоветовала ознакомиться с этим видео. Не могу не поделиться! В нём об элементах айдентики, как их можно модифицировать и оживить разными способами. От некоторых представленных работ дух захватывает (особенно мне понравился дизайн код Кунгура, супер стильно сделан).
Вдохновляет смотреть в разработку дизайна глубже 👩‍💻

#супердиз

Анимации в фигме ч. 4 👆
А именно разные околожидкостные субстанции

Что было просто: загрузка в виде волн. По сути это просто кружок с разношёрстными тенями.
Что было сложно: анимация капель, а именно сам эффект слияния/переливания. Его фокус состоит в сочетании парочки наложений. Из-за этого мои формы как будто развалилась на пиксели (особенно заметно, если смотреть близко). В оригинальном уроке капли чёрного цвета, но даже при замене на этот цвет я видела некоторые шероховатости. Сам по себе эффект красивый, но программисты вряд ли скажут спасибо.

#дашиндиз
Гифки для быстрого просмотра там👇

Московские мокапы
cmnd.design/moscow-mockups

Мы сделали эти мокапы чтобы показывать наш дизайн в контексте, котором он живёт — на фоне московских улиц, архитектуры, автобусных остановок и электробусов.

Прошлись по московским улицам, сделали около 500 фото, из которых отобрали примерно 30. Среди них — лайтбоксы, ситики, билборды, постеры, автобусные остановки и led-панели вдоль ТТК.

Будем готовить и публиковать по три мокапа в неделю, а про обновления рассказывать в телеграм-канале студии. А заодно делиться и другими полезными штуками.

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

Скачивайте, делитесь.

Обычно поиск нужных мокапов сравним с поиском шрифтов. Увидела этих красавчиков, думаю точно использую их где-то

#супердиз

Делаю анимации в фигме ч.3👆
а именно разносортные экраны загрузки

Залог удачного обучения – делать в процессе то, что нравится. Каждый урок я адаптирую под себя, с отсылками на собственную поп-культурную среду.
Что было просто: оформлять вылет информационных блоков на конечном экране.
Что было сложно: третий вариант экрана загрузки. На него ушло больше времени, и на мой взгляд он менее удачный в плане анимации (просто по своей идее)

А ещё вот смешной сайт, который я нашла во время поиска инфы для этого приложения (делитесь, какие вы мак ловеры😽)

#дашиндиз
Как всегда в комментариях гиф варианты👇

Найдите 10 отличий 🛋
Афиша матча в стилистике икеи

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

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

📎Хотя сами икеевцы не всегда следуют такому подходу. Иногда контур на их иллюстрациях разный, а иногда моноширинный. Кто разберёт этих дизайнеров!

Делаю анимации ч.2👆

Нейросетки реально помогают, если ими правильно пользоваться: дополнять деталями свои проекты или создавать открытки с Иисусом для вацапа. Так, сердечко на видео было создано в leonardo. Моё отдельно хобби сейчас – писать промты. Это очень забавно, напоминает рулетку – насколько удачно или уродливый получится сейчас?

Что было просто: сам по себе процесс. В целом более ли менее понятен какой-то общий принцип работы
Что было сложно: анимация появления стекла ведёт себя не совсем так, как предполагалось. Так и не смогла определить, что не так. Возможно фигма просто не поогружала некоторые моменты (она так иногда делает)

Гифка в комах👇

Учусь делать анимации в фигме

Думала выложить все работы после прохождения всех намеченных уроков, но что-то накапливается немало материала. Поэтому выкладываю кусочками!

Это самая первая анимация.
Что было просто: понять принцип работы такого рода передвижения картинки
Что было сложно: подобрать шрифт и картинки (база дизайна!)
Также ещё не совсем понимаю, когда какие переходы имеют место быть и как выставлять время (но это вопрос того, как долго и много тыкаться по значениям, подбирая подходящий вариант)

В комментариях гифка для более быстрого ознакомления👇

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

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

Стилеобразующие элементы, которые могу выделить:
• яркие цвета, подобранные на мой взгляд как акцент аналогия (когда к трём рядышком стоящим цветам добавляется противоположный по цветовому кругу)
•толстая обводка букв
• геометрические формы (круги и прямоугольники) и сетки из них как элементы фона
• векторные иконки-иллюстрации как бы в ручной графике (небрежность, неровность форм)
• для заголовков: шрифт судя по всему искажённый CoFo sans, с наклонными элементаии, верхний регистр (все большие)
• для основного текста: шрифт CoFo sans, нижний регистр (всё маленькие)

Эмоция от дизайна: модно-молодёжно, энергично, хочется что-то поделать (покататься на скейте например)

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

Как вам такой сайт?

Какое-то время назад исследовала возможности фотошопа. Последствия этого – следующие постеры.

Надеюсь вам нравится, потому что вы можете так же!
Вот подборка из видеоуроков, на которых основывалась я:
1. Музыкальный постер
2. Постер фильма
3. В стиле брутализм
4. С 3-дешкой

В процессе учёбы не редко опираешься на чужие работы (особенно если ты дизайнер – не украли, а вдохновились!)
И это нормально! Вдохновляйтесь и вы, а если решите перейти по ссылкам, делитесь вашими работами в комментариях 💬

https://www.behance.net/gallery/203050031/Art-school-Landing-Page?share=1

💥СОС💥
ВСЕМ СМОТРЕТЬ МОЙ ПРОЕКТ НА БИХАНСЕ