Мария Беднова - старт 19.08.24
Этапы
19.08.2024 - Первый урок
- Какие виды графики бывают? (растровая, векторная, 3д графика)
- Разбор перичный инструментов до "Губки"
- Работа со слоями
28.08.2024 - урок №2
- Одна из важных задач Дизайна - раскрыть свойства продукта
- Работа с пером и кривыми (векторными объектами
- Работа с текстом! (доработать работу с параграфом!!!!)
02.09.2024 - урок №3
- Разбор домашки
- PDf формирование
- FX эффекты
06.09.2024 - урок №4
- Смарт объекты
- Маски
14.09.2024 - урок №5
- Простейшие композиции
- Разбор пройденного
18.09.2024 - урок №6
- Теория цвета
- Дизайн мышление
- Структура логобука
1.10.2024 - урок №7
- Цветокоррекция
- Фильтры
17.10.2024 - урок №9 - Figma 1 урок
Прошли начальный этап изучения фигмы. Разобрали интерфейс программы. И панель настроек.
22.10.2024 - урок №10 - Figma 2 урок
Прошли все инструменты в фигме. Дошли до панели с плагинами.
Домашнее задание
Космическая ретушь
Задача относительно простая. Привести лицо девушки в максимальный порядок - а также отправить её в космос)
Размер файла лучше создать размером:
1920х1080х72dpi
Размер файла лучше создать размером:
1920х1080х72dpi
Ген креативности
Потребуется лист А4, простой карандаш и секундомер.
Включаете секундомер и на листочке вам надо нарисовать 50 кружков, которые не будет между собой похожи.
Например:
1. Кружок - как солнце
2. Кружок - как часы..
так далее.
Хороший / Плохой
Подберите 5 примеров классных дизайнов и отвратительных по вашему мнению - по категориям:
Граф.дизайн
Интерьер
Автомобильный
Сайт
Промышленный
Карточка для Маркет плейса
Привет!
Представь, что нам доступна практически моментальная доставка! В прямом смысле. Работает она по принципу моментальных тунелей. Важно только сам чемонада (кейс / коробка) в котором отправляешь. От него зависит скорость и других свойств.
Так вот предприниматели сразу поняли это и начали разные эти чемоданчики продавать на маркет плейсах!
Твоя задача раскрыть свойства такого чемоданчика через карточки маркетплейса (важно карточка как для ozon! (найди требования к ним)) ... ты не только изображаешь свойства, но и визуальную часть самого продукта также!
Ресурсы которые тебе помогут и вдохновят:
http://www.flaticon.com/
https://lexica.art/
https://www.freepik.com/
Я в тебя верю! Ресурсы которые тебе помогут и вдохновят: http://www.flaticon.com/ https://lexica.art/ https://www.freepik.com/
Результат тут
Представь, что нам доступна практически моментальная доставка! В прямом смысле. Работает она по принципу моментальных тунелей. Важно только сам чемонада (кейс / коробка) в котором отправляешь. От него зависит скорость и других свойств.
Так вот предприниматели сразу поняли это и начали разные эти чемоданчики продавать на маркет плейсах!
Твоя задача раскрыть свойства такого чемоданчика через карточки маркетплейса (важно карточка как для ozon! (найди требования к ним)) ... ты не только изображаешь свойства, но и визуальную часть самого продукта также!
Ресурсы которые тебе помогут и вдохновят:
http://www.flaticon.com/
https://lexica.art/
https://www.freepik.com/
Я в тебя верю! Ресурсы которые тебе помогут и вдохновят: http://www.flaticon.com/ https://lexica.art/ https://www.freepik.com/
Результат тут
Киноафиша к ленте
Есть прекрасный фильм.
Культовый и абсолютно значимый с точки зрения поп-культуры и дизайна тех времен- "Назад в будущее"... А теперь представь звонит тебе Федор Бондарчук и говорит, Мария - вы невероятны. Мы хотим снять адаптацию этого фильма только перенести её в русской действительности! И это аниме)
Тебе надо создать плакат для мультфильма "Назад в будущее, russian edition"
Технические требования: А3 (420х297мм)(Вертикальная ориентация) х 200 dpi
Результат тут
Культовый и абсолютно значимый с точки зрения поп-культуры и дизайна тех времен- "Назад в будущее"... А теперь представь звонит тебе Федор Бондарчук и говорит, Мария - вы невероятны. Мы хотим снять адаптацию этого фильма только перенести её в русской действительности! И это аниме)
Тебе надо создать плакат для мультфильма "Назад в будущее, russian edition"
Технические требования: А3 (420х297мм)(Вертикальная ориентация) х 200 dpi
Результат тут
Твой магазин +
Представь ты решила открыть магазин комиксов, это просто твой кайф. И тебе надо представить на новый осенний сезон - премьеры, который у тебя будут по комиксам)!
Презентация премьер - 192-х1080px
Используй простейшие композиции
+ Логобук!
Выкраска фильтрами + коррекция
Сделай выкраску по фильтрам и цветокоррекцию
Первая домашка по фигме
Домашечка.
Цель: Создать пост для Instagram на тему путешествий.
Техническое задание:
Формат: Пост для Instagram (1080x1080 пикселей).
Тема: Путешествия.
Содержание:
Использовать минимум одну фотографию, связанную с путешествиями (например, пляж, горы, городская архитектура и т.д.).
Добавить текстовое описание, которое включает:
Название места/локации.
Краткое описание (2-3 предложения).
Призыв к действию (например, "Узнайте больше", "Бронируйте сейчас", "Поделитесь своим опытом").
Интегрировать логотип или название компании/блога.
Дизайн:
Пост должен быть визуально привлекательным и соответствовать современным трендам.
Использовать цветовую палитру, которая ассоциируется с темой путешествий (например, голубые, зеленые, песочные оттенки).
Внимательно подойти к выбору шрифтов: они должны быть читабельными и гармонировать с общим дизайном.
Добавить графические элементы (например, иконки, линии), которые дополняют тематику поста.
Требования к файлу:
Проект должен быть выполнен в Figma
Названия всех слоев и групп должны быть осмысленными и упорядоченными
Так же прописал Горячие клавиши
Удачи!)
Цель: Создать пост для Instagram на тему путешествий.
Техническое задание:
Формат: Пост для Instagram (1080x1080 пикселей).
Тема: Путешествия.
Содержание:
Использовать минимум одну фотографию, связанную с путешествиями (например, пляж, горы, городская архитектура и т.д.).
Добавить текстовое описание, которое включает:
Название места/локации.
Краткое описание (2-3 предложения).
Призыв к действию (например, "Узнайте больше", "Бронируйте сейчас", "Поделитесь своим опытом").
Интегрировать логотип или название компании/блога.
Дизайн:
Пост должен быть визуально привлекательным и соответствовать современным трендам.
Использовать цветовую палитру, которая ассоциируется с темой путешествий (например, голубые, зеленые, песочные оттенки).
Внимательно подойти к выбору шрифтов: они должны быть читабельными и гармонировать с общим дизайном.
Добавить графические элементы (например, иконки, линии), которые дополняют тематику поста.
Требования к файлу:
Проект должен быть выполнен в Figma
Названия всех слоев и групп должны быть осмысленными и упорядоченными
Так же прописал Горячие клавиши
Удачи!)
Вторая домашка по фигме
Домашнее задание: Создание логотипа и иконок для мобильного приложения
Описание задания:
Представьте, что вы разрабатываете визуальный стиль для мобильного приложения. Вам нужно создать минималистичный логотип и несколько иконок для его интерфейса, используя инструменты объединения и вычитания фигур (Union selection, Subtract selection и другие), а также плагины для оптимизации работы. Это поможет вам освоить сложные фигуры и улучшить дизайн.
Что нужно сделать:
- Логотип приложения: создайте уникальный логотип, используя комбинации базовых фигур. Объединяйте формы с помощью Union selection и вырезайте лишнее с помощью Subtract selection.
- Иконки для навигации: нарисуйте три иконки (например, "Домой", "Поиск" и "Профиль") для интерфейса приложения. Каждая иконка должна быть выполнена из комбинации простых геометрических форм с использованием различных инструментов объединения и вычитания.
- Использование плагинов: установите и примените плагины (например, Iconify для поиска иконок, Color Palettes для выбора цветовой схемы или Stark для проверки контраста). Эти плагины помогут вам создать иконки и улучшить цветовой баланс.
Дополнительное задание (по желанию):
- Создайте небольшой макет экрана с иконками, чтобы посмотреть, как они будут выглядеть в интерфейсе приложения.
- Попробуйте добавить эффекты (например, тени или обводки), чтобы сделать логотип и иконки более выразительными.
Цель задания: Научиться создавать сложные фигуры с помощью инструментов объединения и вычитания, а также познакомиться с работой плагинов, которые помогают улучшить и ускорить дизайн-процесс.
Третья домашка по фигме
Привет, нужно сделать прототип приложения для ресторана в котором есть возможность доставки еды. Нужно настроить кнопки, страницы личного кабинета, и т.д. И конечно же добавить всплывающие окна.
Третья домашка по фигме
Домашнее задание: Создание прототипа веб-сайта в Figma
Привет! У меня для тебя интересное домашнее задание, которое прокачает тебя на максимум в Figma. Вот что нужно сделать:
Твоя задача: Создать прототип веб-сайта на тему по твоему выбору
1. Выбери тему сайта
Подумай, какой сайт тебе интересен. Это может быть:
- Корпоративный сайт компании
- Интернет-магазин
- Личный блог или портфолио
- Образовательная платформа
- Новостной портал
- Или что-то своё уникальное!
2. Исследуй и спланируй
- Подумай, для кого этот сайт. Кто твоя аудитория?
- Посмотри, как делают сайты конкуренты. Что в них хорошего, а что можно улучшить?
- Запиши, какие страницы и функции должны быть на твоём сайте. Например:
- Главная
- О нас
- Услуги
- Блог
- Контакты
- и т.д.
- Нарисуй простую карту, как пользователи будут перемещаться по сайту (например, от главной страницы к странице услуг).
3. Создай структуру и макеты
- Нарисуй схему сайта (sitemap) — как связаны между собой страницы.
- Сделай простые наброски (вайрфреймы) ключевых страниц.
4. Перейди к детальному дизайну
- Добавь цвета, шрифты, иконки и изображения.
- Используй все возможности Figma:
- Рисуй иконки и элементы интерфейса с помощью векторных инструментов.
- Настрой красивые шрифты и цветовую палитру.
- Организуй слои и группы, чтобы всё было аккуратно.
- Расставь элементы на странице так, чтобы всё выглядело гармонично.
- Добавь изображения и графику, которые подходят к теме сайта.
- Сделай интерактивный прототип, чтобы можно было "переходить" между страницами и видеть, как будет работать сайт.
5. Прототип
- Настрой переходы между страницами, чтобы можно было протестировать навигацию.
- Добавь простые и не очень анимации, чтобы сайт выглядел живее.
Как оформить работу:
1. Файл Figma
- Все страницы и прототип должны быть в одном файле Figma.
- Постарайся всё хорошо организовать и назвать слои понятно.
2. Стиль
- Все страницы должны быть в одном стиле, чтобы сайт выглядел цельно.
3. Удобство
- Сделай так, чтобы пользователям было легко ориентироваться на сайте.
4. Детали
- Внимательно проработай мелкие элементы — это делает дизайн профессиональнее.
5. Прототип
- Пусть он будет кликабельным и показывает основные пути пользователя по сайту.
Советы:
- Выбор темы: Выбери то, что тебе действительно интересно. Это повысит мотивацию и качество работы.
- Исследование: Посмотри примеры хороших сайтов в выбранной категории, вдохновись их идеями.
- Планирование: Разбей работу на этапы — исследование, структура, дизайн, прототипирование.
- Обратная связь: Покажи промежуточные результаты друзьям или однокурсникам, чтобы получить советы и улучшить проект.
- Если возникнут вопросы или нужна помощь, всегда можешь обратиться ко мне.
Для погружения
Статьи о Типографики и шрифтах
Фильмы / Статьи / Книги
Фильм: 100 лет дизайна
Фильм “Гельветика” (Про шрифт)
Фильм “Лепота”
Мини сериал “Советский дизайн”
Фильм “Дизайн - это глагол” (МТС)
Фильм “Дух Баухауса”
Для вдохновления
https://www.awwwards.com/
https://t.me/postersdesign
Фильм “Гельветика” (Про шрифт)
Фильм “Лепота”
Мини сериал “Советский дизайн”
Фильм “Дизайн - это глагол” (МТС)
Фильм “Дух Баухауса”
Для вдохновления
https://www.awwwards.com/
https://t.me/postersdesign
Сервисы
Сервис для сжатия фотографий - онлайн
Горячие клавиши
Формирование PDF презентации
Подборка цветов
Горячие клавиши по Figma
Основные горячие клавиши:
Создание и редактирование:
Копировать: Ctrl + C
Вставить: Ctrl + V
Вырезать: Ctrl + X
Отменить действие: Ctrl + Z
Вернуть действие: Ctrl + Shift + Z
Инструменты:
Перемещение (Move tool): V
Пропорционально масштабирование (Scale): K
Рамка (Frame tool): F
Прямоугольник (Rectangle tool): R
Эллипс (Ellipse tool): O
Линия (Line tool): L
Перо (Pen tool): P
Текст (Text tool): T
Комментарии (Comment tool): C
Управление слоями и объектами:
Группировать объекты: Ctrl + G
Разгруппировать объекты: Ctrl + Shift + G
Дублировать объекты: Ctrl + D
Показать/скрыть линейки: Shift + R
Навигация и просмотр:
Увеличить масштаб: Ctrl + =
Уменьшить масштаб: Ctrl + -
Подогнать под экран: Shift + 1
100% масштаб: Shift + 0
Включить/выключить полноэкранный режим: Ctrl + .
Создание и редактирование:
Копировать: Ctrl + C
Вставить: Ctrl + V
Вырезать: Ctrl + X
Отменить действие: Ctrl + Z
Вернуть действие: Ctrl + Shift + Z
Инструменты:
Перемещение (Move tool): V
Пропорционально масштабирование (Scale): K
Рамка (Frame tool): F
Прямоугольник (Rectangle tool): R
Эллипс (Ellipse tool): O
Линия (Line tool): L
Перо (Pen tool): P
Текст (Text tool): T
Комментарии (Comment tool): C
Управление слоями и объектами:
Группировать объекты: Ctrl + G
Разгруппировать объекты: Ctrl + Shift + G
Дублировать объекты: Ctrl + D
Показать/скрыть линейки: Shift + R
Навигация и просмотр:
Увеличить масштаб: Ctrl + =
Уменьшить масштаб: Ctrl + -
Подогнать под экран: Shift + 1
100% масштаб: Shift + 0
Включить/выключить полноэкранный режим: Ctrl + .
Плагины для Figma
Основные горячие клавиши:
Создание и редактирование:
Копировать: Ctrl + C
Вставить: Ctrl + V
Вырезать: Ctrl + X
Отменить действие: Ctrl + Z
Вернуть действие: Ctrl + Shift + Z
Инструменты:
Перемещение (Move tool): V
Пропорционально масштабирование (Scale): K
Рамка (Frame tool): F
Прямоугольник (Rectangle tool): R
Эллипс (Ellipse tool): O
Линия (Line tool): L
Перо (Pen tool): P
Текст (Text tool): T
Комментарии (Comment tool): C
Управление слоями и объектами:
Группировать объекты: Ctrl + G
Разгруппировать объекты: Ctrl + Shift + G
Дублировать объекты: Ctrl + D
Показать/скрыть линейки: Shift + R
Навигация и просмотр:
Увеличить масштаб: Ctrl + =
Уменьшить масштаб: Ctrl + -
Подогнать под экран: Shift + 1
100% масштаб: Shift + 0
Включить/выключить полноэкранный режим: Ctrl + .
Создание и редактирование:
Копировать: Ctrl + C
Вставить: Ctrl + V
Вырезать: Ctrl + X
Отменить действие: Ctrl + Z
Вернуть действие: Ctrl + Shift + Z
Инструменты:
Перемещение (Move tool): V
Пропорционально масштабирование (Scale): K
Рамка (Frame tool): F
Прямоугольник (Rectangle tool): R
Эллипс (Ellipse tool): O
Линия (Line tool): L
Перо (Pen tool): P
Текст (Text tool): T
Комментарии (Comment tool): C
Управление слоями и объектами:
Группировать объекты: Ctrl + G
Разгруппировать объекты: Ctrl + Shift + G
Дублировать объекты: Ctrl + D
Показать/скрыть линейки: Shift + R
Навигация и просмотр:
Увеличить масштаб: Ctrl + =
Уменьшить масштаб: Ctrl + -
Подогнать под экран: Shift + 1
100% масштаб: Shift + 0
Включить/выключить полноэкранный режим: Ctrl + .
Диплом
Упаковка твоего дела
