web-dev•Лекция•Design

Лекция №1: Введение в веб-дизайн и старт в Figma

👀 Загрузка...

Курс: Веб-дизайн и проектирование интерфейсов
Аудитория: 2 курс, технические специальности
Цель лекции: Снять психологический барьер «я не умею рисовать», объяснить правила получения зачета и ввести в рабочий инструмент (Figma).

1. Организационная часть: Правила игры (Syllabus)

Внимание! Строгая система оценки

Этот курс имеет строгую математическую модель оценки. В отличие от гуманитарных дисциплин, здесь «договориться» невозможно — баллы либо есть, либо их нет.

Максимум баллов: 100.
Порог зачета: 70 баллов.
Точка невозврата: Если вы сдаете все лабораторные (50 баллов) и ходите на все лекции (8 баллов), но не делаете РГР, вы получаете 58 баллов. Это незачет.

Структура баллов:

Лекции (8 баллов): Теоретический фундамент.
Лабораторные (50 баллов): Сквозной проект. Мы делаем один продукт весь семестр, от идеи до кликабельного прототипа. Пропустить Лаб 2 — значит не иметь базы для Лаб 3.
РГР (42 балла): Ваш финальный релиз. Включает пояснительную записку, презентацию и защиту проекта.

Важно запомнить

Дизайн в этом курсе — это не «красивые картинки». Это решение инженерной задачи визуальными средствами. Критерии оценки объективны: удобство (usability), соответствие сетке, доступность, соблюдение гайдлайнов.

2. Что такое Веб-дизайн: Инженерный подход

Студенты технических ВУЗов часто считают, что дизайн — это про вдохновение. Это ошибка. В современном мире (Product Design) дизайн — это проектирование.

Это логика работы интерфейса.
Это иерархия данных.
Это сценарии поведения пользователя.

UX и UI: Разделяй и властвуй

Веб-дизайн делится на две большие, но неразрывные части.

Опыт взаимодействия

Аналогия: Это «Backend» и архитектура вашего приложения.
Что делаем: Исследуем проблему, строим логические схемы, проектируем каркасы (Wireframes).
Вопрос: «Как это работает?» и «Удобно ли пользователю?»

Практический совет: Content First

Никогда не начинайте работу с выбора цвета кнопок (UI). Сначала спроектируйте структуру (UX). Сначала контент и смысл, потом оформление.

3. Инструментарий: Почему Figma?

Figma — это индустриальный стандарт де-факто. Для разработчика Figma — это не просто «рисовалка», это среда разработки интерфейсов.

Ключевые преимущества для инженера:

Облачная архитектура: Работает в браузере (как Google Docs для дизайна). Мультиплеер в реальном времени.
Векторная графика: Все объекты описываются математическими формулами, а не массивом пикселей. Это гарантирует качество на любых экранах (Retina, 4K).
Компонентный подход: Figma поддерживает принципы ООП. Вы создаете «Мастер-компонент» (Class), а используете его «Инстансы» (Instances/Objects). Изменяя мастер, вы меняете все копии.
Код-ориентированность (Dev Mode): Figma умеет отдавать CSS, iOS (SwiftUI) и Android (Compose) параметры объектов.

4. Интерфейс Figma: Параллели с IDE

Интерфейс Figma можно сравнить с привычными средами разработки (VS Code, IntelliJ IDEA).

Canvas (Холст) — По центру: Бесконечное пространство координат. Навигация: Ctrl + Scroll (Zoom), Space + Drag (Pan).
Layers Panel (Панель слоев) — Слева: Аналогия: DOM-дерево. Здесь отображается иерархия вложенности объектов. Порядок слоев определяет z-index (кто выше, тот перекрывает).
Properties Panel (Панель свойств) — Справа: Аналогия: CSS-inspector. Здесь настраиваются координаты (x, y), размеры (w, h), заливка (background), обводка (border), эффекты (box-shadow).
Toolbar (Инструментальная панель) — Сверху: Базовые инструменты. Самый важный — Move Tool (V).

5. Базовые примитивы и Frame vs Group

Это самая частая ошибка новичков, которую нужно предотвратить сразу.

Хоткей: F
Суть: Это аналог тега <div> или Container.
Свойства: Фрейм имеет свой размер, фон, может обрезать контент (clip content / overflow: hidden) и, самое главное, может использовать Auto Layout (аналог Flexbox).
Практика: В этом курсе мы используем Фреймы для экранов и блоков.

Никогда не делайте так!

Если вы хотите создать экран iPhone или кнопку — вы создаете Frame. Никогда не используйте инструмент Rectangle для создания фона кнопки. Фрейм сам является контейнером и фоном одновременно.

6. Глоссарий лекции (Ключевые термины)

Figma: Графический редактор для веб-дизайна, работающий в облаке.
UX (User Experience): Проектирование опыта взаимодействия, логики и структуры.
UI (User Interface): Визуальное оформление интерфейса (визуал).
Frame (Фрейм): Основной строительный блок в Figma, контейнер со свойствами (аналог div).
Сквозной проект: Метод обучения, при котором студент разрабатывает один продукт на протяжении всего семестра.
Hand-off: Процесс передачи макетов от дизайнера разработчику.

7. Домашнее задание (Подготовка к Лаб №1)

Зарегистрироваться на figma.com (желательно использовать университетскую почту, если есть, для Education Plan).
Установить Desktop App (не обязательно, но удобнее для управления шрифтами).
Изучить интерфейс: создать файл, попробовать инструменты Rectangle, Text, создать Frame (iPhone 14/15) и поместить объекты внутрь фрейма.
Выбрать тему для Сквозного проекта (список тем будет выдан старосте).