К содержанию

Итоговая работа

Зачёт курса: согласовать тему сайта и отрисовать макет в Figma.

На этой странице

Кратко суть

Вы сами выбираете, какой сайт проектируете, согласовываете тему с преподавателем и сдаёте макет в Figma: понятный, удобный, аккуратный интерфейс, а не набор красивых картинок и непонятных Rectangle.

Код работы в названии файла или страницы Figma не нужен: это одна итоговая, но если очень хочется указать, то укажите Final.

1. Тема

Сначала тема, потом макет. Не начинайте рисовать что-то серьезное, пока тема не согласована.

Подходит сайт с понятной задачей: продукт, услуга, событие, медиа, сервис. Не подходит случайная вывеска «чтобы хоть что-то сдать». Если сомневаетесь, скажите на занятии до отрисовки.

На согласование недостаточно названия. Покажите, что это за сайт:

  • черновой макет (набросок экрана, даже грубый), или
  • подробное описание идеи: зачем сайт, кому, какие экраны, или
  • коллаж референсов с подписями: идея и что где будет располагаться.

Итоговую можно делать так, чтобы она пригодилась в дипломе. Приходите с темой ВКР и тем, что уже есть: наброски, референсы, черновик. Дальше интерфейс допиливаем или собираем с нуля.

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

Делаем только desktop-интерфейс сайта. Игровые интерфейсы лучше не брать из-за специфики масштаба и различной логики построения UI/UX. Мобильные версии сайтов также не делаем.

Иллюстрация к выбору темы итоговой работы

2. Макет

Нужен полноценный сайт: секции страницы, шапка, контент, изображения, футер, меню, кнопки.

Ориентир: реальные сайты, не картинки с Pinterest, Dribbble, Behance и похожих витрин. Там макеты часто кривые, нелогичные и ни с чем в жизни не совпадают. Смотреть на них можно: композиция, цвет, порядок подачи информации. Это крупные мазки. Настоящую структуру, композицию и сложные грамотные решения видно только на живых сайтах. Копировать чужой сайт один в один не нужно.

В Figma это не «нарисовать прямоугольники». Макет собираете на Auto Layout, через компоненты, с нормальными отступами и размерами: кратно 2, 4, 8, 16. Контент режете на блоки, у каждой секции понятная роль. То же самое стоит в критериях ниже.

Примеры структуры (не темы и не визуальный стиль):

Нашли живой сайт, на котором хорошо видно структуру, сетку, секции? Принесите на занятие или скиньте ссылку. Не стесняйтесь: сайт, что Вы покажете, может попасть в этот список.

3. Критерии

Минимум

  • Полноценный сайт: секции, шапка, контент, футер, меню и кнопки.
  • Контент разбит на блоки, у каждой секции есть своя роль.
  • Весь UI на Auto Layout.
  • Масштаб 1 к 1.
  • Отступы и размеры кратны 2, 4, 8 или 16.

Сильнее

  • Компоненты Figma.
  • Стили и переменные хотя бы для шрифтов и цветов.
  • Понятное поведение блоков и состояний кнопок.

4. Сдача

Публичная ссылка на Figma. Как открыть доступ и как проверяют в инкогнито: в приветствии, раздел «Как сдавать работы». Файл можно подписать Final.

Если успеваете закрыть работу до конца семестра, оценка может быть максимальной. Если доделываете уже в сессию, максимум 4 или на усмотрение преподавателя.