Августина Жиянбаева - старт 01.10.24

Этапы

01.10.2024
Из чего состоит сайт
[этапы создание]
1. Прототип 2. Дизайн 3. Верстка 4. Функционал ----- Основы фотошоп - до инструмента заплатка
04.10.2024
Основы работы с типографикой ----- Основы фотошоп - Разобрали первичную панель
08.10.2024
Разбор домашнего задания
Основы фотошоп
- Векторная маска
- Обтравочная маска
- FX эффекты
- Режимы наложения
15.10.2024
Разбор домашнего задания + Работа со смарт объекта + Работа с мокапами
22.10.2024
Первый урок по фигма, прошли все инструменты, дошли до плагинов
31.10.2024
Прошли первые два типа анимации во вкладке прототип в Фигме
07.01.2025
Повторили панель настроек тильды и начали перенос сайта
31.01.25

Домашнее задание

Девушка просто космос
Задача достаточно простая)

Привет!
Создать документ - 1920 х 1080px 72dpi и Девушку привести в порядок и отправить в космос)! Все файлы у тебя в телеграм:) Творчество приветствуется!
Ген креативности
50 кружочков
Только засеки время)
Хороший плохой дизайн
5 вариантов сайтов, которые теперь уже нравится 😻 и 5 которые ужасны 😶‍🌫️
Робот который изменит...
Привееет!

Смотри, представь у тебе позвонили отдел яндекс по роботехнике и сообщили следующее: "Август, мы изобрели технологию, которая очищает воздух в экстремально загрязненных городах, но у нас проблема. Мы знаем как это донести до аудитории. Помоги нам создать презентацию и примерный вид такого робота."

Технически это презентация 1920x1080px 72dpi

Необходимо не менее 5 слайдов

Главное раскрой идею!
Эти сайты тебе помогут:
https://www.freepik.com/
https://lexica.art/
https://www.dji.com/ru
Карточки Маркет плейса
Привееет!

Задача следующая, создай карточку маркет плейса для OZON - для специального ошейника для кошек, который отслеживает буквально всё. Пульс, место нахождение, кол-во коллорий, который он употребляет и сжигает, а также он может менять окрас самого кота. Необходимо не менее 5-6 карточек

Главное раскрой идею!
Эти сайты тебе помогут:
https://www.freepik.com/
https://lexica.art/
https://www.dji.com/ru
Наступила Эра исскуственных домохозяйек .. А за ним
Привееет!

Наступило светлое будущее. Люди прекратили войны, стали более бережно относиться к планете, но но но стрессы остались все равно частью повседневной жизни. Он конечно не настолько высок.. Но все же. И пришла пора психологических сессий от искусственного интеллекта.
Придумай, как может выглядеть психолог в каждом доме. Придумай сам вид этой технологии, коробку или упаковки или устройства. Покажи как это может быть в домашнем быту. Расскажи о функциях.

Размер файла - 1920x1080px 72 dpi - 5-6 слайдов. И все упаковать в pdf презентацию.

https://www.freepik.com/
https://lexica.art/
Первая домашка по фигме
Домашечка.

Цель: Создать пост для Instagram на тему путешествий.

Техническое задание:

Формат: Пост для Instagram (1080x1080 пикселей).

Тема: Путешествия.

Содержание:

Использовать минимум одну фотографию, связанную с путешествиями (например, пляж, горы, городская архитектура и т.д.).

Добавить текстовое описание, которое включает:

Название места/локации.

Краткое описание (2-3 предложения).

Призыв к действию (например, "Узнайте больше", "Бронируйте сейчас", "Поделитесь своим опытом").

Интегрировать логотип или название компании/блога.

Дизайн:

Пост должен быть визуально привлекательным и соответствовать современным трендам.

Использовать цветовую палитру, которая ассоциируется с темой путешествий (например, голубые, зеленые, песочные оттенки).

Внимательно подойти к выбору шрифтов: они должны быть читабельными и гармонировать с общим дизайном.

Добавить графические элементы (например, иконки, линии), которые дополняют тематику поста.

Требования к файлу:

Проект должен быть выполнен в Figma

Названия всех слоев и групп должны быть осмысленными и упорядоченными

Так же прописал Горячие клавиши

Удачи!)
Вторая домашка по фигме
Домашнее задание: Создай прототип сайта с карточкой города Новороссийска

Описание задания:

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

Что должно быть в прототипе:

  • Главный экран: красивое фоновое изображение или иллюстрация города Новороссийск, название и краткое описание города.
  • Основные разделы:
    • **Достопримечательности:** краткие карточки для основных достопримечательностей с возможностью перехода к подробной информации.
    • **Культура и события:** раздел для новостей и мероприятий в Новороссийске.
    • **Туристическая информация:** полезные советы для туристов (транспорт, места для проживания, рестораны и кафе).
  • Карточка города: разработай отдельную карточку с основными сведениями о городе (население, география, история) и добавь элементы взаимодействия (кнопки или ссылки).
  • Создай мобильную версию прототипа, продумай адаптацию всех элементов для экранов меньшего размера.
  • Цель задания: Научиться создавать комплексные прототипы, адаптировать интерфейс под различные устройства.

    Третья домашка по фигме
    У тебя уже есть прототип сайта для Новороссийска. Но теперь тебе нужно сделать дизайн для этого прототипа. (не обязательно сейчас дизайнить весь прототип. Можешь сделать 3-5 слайдов и важно сделать еще 2 внутренние страницы. Нужно настроить переходы по страницам, скролл к блоку (любому) и открытие поп-ап блока по истечению времени.
    Четвертая домашка по фигме
    У прототипа, который ты уже создала, нужно создать три слайда которые будут заменятся автоматически каждые три секунды
    Проектная работа по фигме
    Домашнее задание: Прототип веб-сайта в Figma
    Домашнее задание: Создание прототипа веб-сайта в Figma

    Привет! У меня для тебя интересное домашнее задание, которое прокачает тебя на максимум в Figma. Вот что нужно сделать:

    Твоя задача: Создать прототип веб-сайта на тему по твоему выбору
    1. Выбери тему сайта

    Подумай, какой сайт тебе интересен. Это может быть:

    • Корпоративный сайт компании
    • Интернет-магазин
    • Личный блог или портфолио
    • Образовательная платформа
    • Новостной портал
    • Или что-то своё уникальное!
    2. Исследуй и спланируй
    1. Подумай, для кого этот сайт. Кто твоя аудитория?
    2. Посмотри, как делают сайты конкуренты. Что в них хорошего, а что можно улучшить?
    3. Запиши, какие страницы и функции должны быть на твоём сайте. Например:
      • Главная
      • О нас
      • Услуги
      • Блог
      • Контакты
      • и т.д.
    4. Нарисуй простую карту, как пользователи будут перемещаться по сайту (например, от главной страницы к странице услуг).
    3. Создай структуру и макеты
    • Нарисуй схему сайта (sitemap) — как связаны между собой страницы.
    • Сделай простые наброски (вайрфреймы) ключевых страниц.
    4. Перейди к детальному дизайну
    • Добавь цвета, шрифты, иконки и изображения.
    • Используй все возможности Figma:
      • Рисуй иконки и элементы интерфейса с помощью векторных инструментов.
      • Настрой красивые шрифты и цветовую палитру.
      • Организуй слои и группы, чтобы всё было аккуратно.
      • Расставь элементы на странице так, чтобы всё выглядело гармонично.
      • Добавь изображения и графику, которые подходят к теме сайта.
    • Сделай интерактивный прототип, чтобы можно было "переходить" между страницами и видеть, как будет работать сайт.
    5. Прототип
    • Настрой переходы между страницами, чтобы можно было протестировать навигацию.
    • Добавь простые и не очень анимации, чтобы сайт выглядел живее.
    Как оформить работу:
    1. Файл Figma
    • Все страницы и прототип должны быть в одном файле Figma.
    • Постарайся всё хорошо организовать и назвать слои понятно.
    2. Стиль
    • Все страницы должны быть в одном стиле, чтобы сайт выглядел цельно.
    3. Удобство
    • Сделай так, чтобы пользователям было легко ориентироваться на сайте.
    4. Детали
    • Внимательно проработай мелкие элементы — это делает дизайн профессиональнее.
    5. Прототип
    • Пусть он будет кликабельным и показывает основные пути пользователя по сайту.
    Советы:
    • Выбор темы: Выбери то, что тебе действительно интересно. Это повысит мотивацию и качество работы.
    • Исследование: Посмотри примеры хороших сайтов в выбранной категории, вдохновись их идеями.
    • Планирование: Разбей работу на этапы — исследование, структура, дизайн, прототипирование.
    • Обратная связь: Покажи промежуточные результаты друзьям или однокурсникам, чтобы получить советы и улучшить проект.
    • Если возникнут вопросы или нужна помощь, всегда можешь обратиться ко мне.
    Домашка по тильда
    Перенести два главных блока из фигма в тильда вручную
    Начинаем с начала)
    Таааааааакс, понимаю что было сложно... Но рано или поздно пришлось бы столкнутся с этим. Поэтому лучше раньше чем позже :)

    С тебя на следующий урок: мудборд + прототип сайта портфолио, либо если прийдет в голову что-то более интересное, можно использовать его.

    сайты для подбора референсов:
    madeontilda
    awwwards

    Для погружения

    Статьи о Типографики и шрифтах
    Фильмы / Статьи / Подскасты / Книги

    Сервисы

    Сервис для сжатия фотографий - онлайн
    Дизайн источники
    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/
    Формирование PDF презентации
    Сервисы от Ильи
    1. llmarena.ru - сервис с разными нейросетями
    2. awwwards.com
    3. godly.website
    4. minimal.gallery - сервисы для поиска референсов сайтов и вдохновения.
    5. fonts.ninja - расширение для браузера для просмотра шрифтов на сайте.
    Горячие клавиши 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 + .

    Диплом

    Упаковка твоего дела
    Первичный разбор фотошопа
      • Прогресс обучения10%