Захар Кондрашов - старт 01.10.24
Этапы
01.10.2024
Из чего состоит сайт
[этапы создание]
1. Прототип 2. Дизайн 3. Верстка 4. Функционал ----- Основы фотошоп - до инструмента заплатка
[этапы создание]
1. Прототип 2. Дизайн 3. Верстка 4. Функционал ----- Основы фотошоп - до инструмента заплатка
03.10.2024
Разбор инструментов от заплатки до текста!
10.10.2024
Повторение пройденого материала
+ fX эффекты
18.10.2024
Пройден первый этап в фигма. Дошли до инструмента прямоугольник
22.10.2024
Прошли до конца панель инструментов
29.10.2024
Повторяли пройденное
2.11.2024
- Разбор работы с обтравочной маской и векторной маской
- Как устроена веб разработка
- Как устроена веб разработка
30.11.2024
Практическая работа: карточки WB
30.11.2024
Практическая работа: карточки WB
03.12.2024
Практическая работа: карточки WB
25.12.2024
Практическая работа: доделываем сайт, вносим правки, изучаем интерфейс, структуру, "правила" сайтов
09.01.2025
Практическая работа: карточки для WB (капельницы)
16.01.2025
Учились делать перенос сайта в тильду
21.01.2025
Показал как делать экспорт из фигмы в тильду блоков
Домашнее задание
Девушка просто космос
Задача достаточно простая)
Привет!
Создать документ - 1920 х 1080px 72dpi и Девушку привести в порядок и отправить в космос)! Все файлы у тебя в телеграм:) Творчество приветствуется!
Привет!
Создать документ - 1920 х 1080px 72dpi и Девушку привести в порядок и отправить в космос)! Все файлы у тебя в телеграм:) Творчество приветствуется!
Твои афиши
Создай афиши
Привет!
Создать документ - 420мм х 297мм 150dpi и создай макет афиши для любимого исполнителя + афишу к кинофильму "Астрал" Творчество приветствуется!
Привет!
Создать документ - 420мм х 297мм 150dpi и создай макет афиши для любимого исполнителя + афишу к кинофильму "Астрал" Творчество приветствуется!
Баннер для сайта
Привет!
Создать холст - 1920 х 1080 px 72 dpi и Представь, тебе позвонил weekend и попросил сделать ему банер на сайт который будет рассказывать о его туре в поддержку нового альбома.
Придумай как может называется сам тур и обложку к новому альбому!
Дерзай у тебя все получиться!
Создать холст - 1920 х 1080 px 72 dpi и Представь, тебе позвонил weekend и попросил сделать ему банер на сайт который будет рассказывать о его туре в поддержку нового альбома.
Придумай как может называется сам тур и обложку к новому альбому!
Дерзай у тебя все получиться!
Фигма. Повторение пройденного на уроке
Привет!
Задача пройтись по всем моментам которые мы прошли за первый урок
Задача пройтись по всем моментам которые мы прошли за первый урок
Фигма. Вторая домашка
Домашнее задание: Создать обложку альбома для нового релиза
Название альбома: Eternal Pulse — альбом о непрерывных ритмах жизни, вдохновленный сочетанием агрессивных битов и атмосферного звучания.
Описание задания:
Используя все инструменты Figma, которые мы прошли, разработай концепцию и визуальный стиль для обложки альбома. Обложка должна отражать уникальный стиль выбранного исполнителя и передавать эмоции, которые ты связываешь с его музыкой.
Что должно быть в макете:
- Центральный элемент: придумай интересный фокус (может быть абстракция, силуэт, портрет или что-то символическое, что ассоциируется с исполнителем).
- Название альбома "Eternal Pulse": подумай о шрифте и его сочетании с дизайном, чтобы название смотрелось органично и стильно.
- Имя исполнителя: выбери одного и гармонично впиши его имя на обложку.
- Цветовая палитра: используй оттенки, которые лучше всего отражают атмосферу и настроение музыки выбранного артиста (например, темные, неоновые или теплые тона).
Дополнительные требования:
- Используй эффекты (например, градиенты, тени или размытие) для создания глубины и динамики.
- Применяй работу с сетками и направляющими для более точного расположения элементов.
- Попробуй сделать несколько вариантов композиций, чтобы поэкспериментировать с балансом и стилем.
Цель задания: Научиться применять все изученные инструменты Figma для создания комплексного, эстетически целостного макета, отражающего музыкальный стиль и атмосферу альбома.
Фигма. Домашка
Домашка остается прежней
PS. Оформление сайта
Привет!
Создать холст - 1920 х 1080 px 72 dpi и попровать оформить слайд для сайта - который занимается продажей роботов. Основное назначение этих роботов - уборка городский пространств. Тебе надо придумать как может выглядеть сам робот, его название и создать слайды с оформлением. Чем больше вариантов, тем лучше. Используй, что прошли уже по PS А также дизайн источники.
Создать холст - 1920 х 1080 px 72 dpi и попровать оформить слайд для сайта - который занимается продажей роботов. Основное назначение этих роботов - уборка городский пространств. Тебе надо придумать как может выглядеть сам робот, его название и создать слайды с оформлением. Чем больше вариантов, тем лучше. Используй, что прошли уже по PS А также дизайн источники.
Третья домашка по фигме
Практическая работа
Домашнее задание: Создание прототипа веб-сайта в Figma
Привет! У меня для тебя интересное домашнее задание, которое прокачает тебя на максимум в Figma. Вот что нужно сделать:
Твоя задача: Создать прототип веб-сайта на тему по твоему выбору
1. Выбери тему сайта
Подумай, какой сайт тебе интересен. Это может быть:
- Корпоративный сайт компании
- Интернет-магазин
- Личный блог или портфолио
- Образовательная платформа
- Новостной портал
- Или что-то своё уникальное!
2. Исследуй и спланируй
- Подумай, для кого этот сайт. Кто твоя аудитория?
- Посмотри, как делают сайты конкуренты. Что в них хорошего, а что можно улучшить?
- Запиши, какие страницы и функции должны быть на твоём сайте. Например:
- Главная
- О нас
- Услуги
- Блог
- Контакты
- и т.д.
- Нарисуй простую карту, как пользователи будут перемещаться по сайту (например, от главной страницы к странице услуг).
3. Создай структуру и макеты
- Нарисуй схему сайта (sitemap) — как связаны между собой страницы.
- Сделай простые наброски (вайрфреймы) ключевых страниц.
4. Перейди к детальному дизайну
- Добавь цвета, шрифты, иконки и изображения.
- Используй все возможности Figma:
- Рисуй иконки и элементы интерфейса с помощью векторных инструментов.
- Настрой красивые шрифты и цветовую палитру.
- Организуй слои и группы, чтобы всё было аккуратно.
- Расставь элементы на странице так, чтобы всё выглядело гармонично.
- Добавь изображения и графику, которые подходят к теме сайта.
- Сделай интерактивный прототип, чтобы можно было "переходить" между страницами и видеть, как будет работать сайт.
5. Прототип
- Настрой переходы между страницами, чтобы можно было протестировать навигацию.
- Добавь простые и не очень анимации, чтобы сайт выглядел живее.
Как оформить работу:
1. Файл Figma
- Все страницы и прототип должны быть в одном файле Figma.
- Постарайся всё хорошо организовать и назвать слои понятно.
2. Стиль
- Все страницы должны быть в одном стиле, чтобы сайт выглядел цельно.
3. Удобство
- Сделай так, чтобы пользователям было легко ориентироваться на сайте.
4. Детали
- Внимательно проработай мелкие элементы — это делает дизайн профессиональнее.
5. Прототип
- Пусть он будет кликабельным и показывает основные пути пользователя по сайту.
Советы:
- Выбор темы: Выбери то, что тебе действительно интересно. Это повысит мотивацию и качество работы.
- Исследование: Посмотри примеры хороших сайтов в выбранной категории, вдохновись их идеями.
- Планирование: Разбей работу на этапы — исследование, структура, дизайн, прототипирование.
- Обратная связь: Покажи промежуточные результаты друзьям или однокурсникам, чтобы получить советы и улучшить проект.
- Если возникнут вопросы или нужна помощь, всегда можешь обратиться ко мне.
Закончить перенос сайта
С помощью нового инструмента закончить перенос сайта на тильду
Для погружения
Статьи о Типографики и шрифтах
Фильмы / Статьи / Подскасты / Книги
Сервисы
Сервис для сжатия фотографий - онлайн
Горячие клавиши
Дизайн источники
https://savee.it/
http://www.awwwards.com/
https://brandingstyleguides.com/
https://lexica.art/ - аналог миджорни - но можно использовать как сток
https://unsplash.com/ - классный сток фотографий
https://thenounproject.com/ - хороший сток иконок (аналог flaticon)
https://sapiens.ui8.net/- Отличный сервис для создание дудлов
https://unblast.com/ - неплохой сервис бесплатных мокапов
https://www.freepik.com/
http://www.awwwards.com/
https://brandingstyleguides.com/
https://lexica.art/ - аналог миджорни - но можно использовать как сток
https://unsplash.com/ - классный сток фотографий
https://thenounproject.com/ - хороший сток иконок (аналог flaticon)
https://sapiens.ui8.net/- Отличный сервис для создание дудлов
https://unblast.com/ - неплохой сервис бесплатных мокапов
https://www.freepik.com/
Формирование PDF презентации
Подборка цветов
Сервисы от Ильи
1. llmarena.ru - сервис с разными нейросетями
2. awwwards.com
3. godly.website
4. minimal.gallery - сервисы для поиска референсов сайтов и вдохновения.
5. fonts.ninja - расширение для браузера для просмотра шрифтов на сайте.
2. awwwards.com
3. godly.website
4. minimal.gallery - сервисы для поиска референсов сайтов и вдохновения.
5. fonts.ninja - расширение для браузера для просмотра шрифтов на сайте.
Диплом
Упаковка твоего дела
Первичный разбор фотошопа
