Урок 1.1 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно
Цель урока: Понять, что такое интерфейс, чем UI отличается от UX и из каких трёх языков собран любой экран.
Нужно знать заранее: Ничего, кроме желания разобраться.
Зачем это нужно: Интерфейс — это всё, что человек видит и нажимает на экране: кнопки, меню, поля ввода, карточки товаров, шкала здоровья в игре. Программа может быть очень умной, но если кнопки непонятные, ей просто не смогут пользоваться. Поэтому интерфейс — не украшение, а способ договориться с человеком.
Как это работает: Любой экран в браузере собран из трёх языков, и у каждого своя работа. HTML — содержимое: где заголовок, где кнопка, где картинка. Он отвечает на вопрос «что здесь есть». CSS — внешний вид: цвет, размер, отступы, скругления, тени. Он отвечает на вопрос «как это выглядит». JavaScript — поведение: что произойдёт, когда нажмут кнопку. Он отвечает на вопрос «что происходит». Есть ещё два слова, которые часто путают. UI (user interface) — это сам экран: кнопки, текст, картинки. UX (user experience) — это опыт человека: удобно ли ему, понятно ли, куда нажать. Хороший UI без UX — красивый, но бесполезный экран.
Пример с разбором: Кнопка «Играть» в меню игры — это сразу три слоя. Тег button — HTML. Зелёный цвет, скругление и тень — CSS. Переход в игру по нажатию — JavaScript. Уберите любой слой — и кнопка перестанет быть кнопкой: без HTML не будет элемента, без CSS он будет серым и незаметным, без JavaScript нажатие ничего не сделает.
Разбор по шагам: 1. Посмотрите на любой знакомый экран: сайт, игру, банк. 2. Найдите то, что можно прочитать: заголовки, подписи, кнопки. Это HTML. 3. Найдите то, что делает его аккуратным: цвет, отступы, рамки. Это CSS. 4. Найдите то, что происходит после нажатия: меню открывается, счётчик растёт. Это JavaScript.
Частая ошибка: Новички пытаются выучить всё сразу и путают, какой язык за что отвечает. Держите в голове короткую связку: HTML — что, CSS — как, JavaScript — когда. Ещё одна ошибка — считать интерфейс «рисунком». Это не картинка, а рабочая часть программы: если кнопка не нажимается, интерфейса нет.
Важно: Интерфейс должен быть понятен не только вам. Человек может плохо видеть, не пользоваться мышью или открыть сайт с телефона. Поэтому в курсе мы сразу привыкаем к хорошим привычкам: подписывать картинки, делать кнопки крупными, проверять контраст. Это не «дополнительно», а часть работы.
Проверь себя: Что отвечает за содержимое страницы? HTML. Что отвечает за внешний вид? CSS. Что отвечает за поведение? JavaScript. Чем UI отличается от UX? UI — экран, UX — опыт человека.
Итог: Интерфейс — это «кузов» программы, а код — её «мотор». Дальше мы начнём собирать кузов руками: первый настоящий экран — уже в следующем уроке.
Что дальше: В уроке 1.2 — первый HTML: заголовок, абзац и закрывающие теги.
Опишите своими словами: какой экран вам хотелось бы собрать? Например, меню для игры, страницу-визитку или экран входа. Достаточно одного-двух предложений — это ваш план на курс.
Критерий успеха: Ответ написан своими словами и называет хотя бы один элемент интерфейса.