Во время обучения и даже уже работая в сфере веб-дизайна вам будут попадаться много терминов, некоторые из них дословно с английского не переводятся, а другие используются только на английском. Давайте разбираться.
Раздел постоянно обновляется. Если есть термины которые тут не указаны, но вам они встретились и по ним возникают вопросы, напишите в чат, мы их добавим.
Базовые понятия
Веб-дизайн – в русскоязычной среде означает, то что всем и привычно, а именно создание графического изображения сайта
Web-Design – не просто так это определение отделено, так как если переводить слово «design» дословно с английского языка то оно означает «проектирование», и в англоязычной среде зачастую означает не просто графическое изображение, а еще и сборку сайта. Поэтому если вы у вас в англоязычной среде заказывают «web-Design» уточняйте какой именно объем работ нужен.
UI (User Interface, Пользовательский интерфейс) – пользовательский интерфейс. Внешний вид и функциональные элементы сайта или приложения.
UX (User Expirience, Пользовательский опыт) – пользовательский опыт. Общее впечатление и удобство использования сайта или приложения.
Цифровой дизайн (Digital Design) – это процесс создания визуального контента для цифровых платформ, таких как веб-сайты, мобильные приложения, баннеры и интерфейсы. Включает элементы графического, UX/UI и интерактивного дизайна.
Макет сайта (Mockup) – статический макет, отображающий дизайн и стили будущего сайта.
Прототип (prototype) – интерактивный макет сайта или приложения, демонстрирующий, как будут работать элементы.
Вайфрейм (Wireframe) — схематический каркас сайта, показывающий расположение элементов без визуального оформления. Так же часто его тоже называют Прототипом.
Композиция (Composition) – организация и взаимное расположение элементов дизайна (текста, изображений, блоков) для достижения эстетики и удобства восприятия.
Юзабилити (Usability) – уровень удобства использования сайта для его посетителей, быстро ли находятся все элементы которые нужно, очевидно ли где располагаются нужные посетителю сайта разделы.
Техническое задание (ТЗ) – документ, определяющий структуру, дизайн, навигацию и функциональность сайта. Утвержденное ТЗ страхует заказчика и веб-дизайнера от возможного недопонимания и полностью описывает проект, объемы работ и сроки выполнения.
Векторная графика, вектор (Vector) – тип графики, основанный на математических формах (линии, кривые), которые сохраняют качество при любом масштабе. В веб-дизайне векторные изображения чаще всего представлены в формате SVG.
«В кривых» (сленг. выражение ) – вы можете услышать такое выражение например в контексте «У вас есть этот логотип в кривых?» это означает, что человек спрашивает логотип в векторном формате.
Растровая графика – изображение, представляющее собой сетку пикселей (цветных точек). Все фотографии — это растровые изображения. Недостаток — плохая масштабируемость.
Фотосток (photo stock) – онлайн база фотографий либо для свободного, либо для коммерческого использования. Фотостоки бывают бесплатными (unsplash.com) и платными (shutterstock.com).
Мудборд (moodboard) – доска настроения будущего сайта, предназначенная для отображения стиля проекта. Мудборд составляется чаще всего из изображений, цветовых палитр, иконок, шрифтов и элементов интерфейса.
psd-файл – основной формат программы Adobe PhotoShop, в котором весь файл состоит из слоев, содержащих в себе отдельные элементы.
Пиксель (pixel/px) – минимальный элемент изображения на экране, используемый как единица измерения в веб-дизайне. Параметры экрана и размеры элементов часто задаются в пикселях.
RGB (Red Green Blue) – цветовая модель «красный, зеленый, синий», которая используется в цифровой графике. Компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре, поэтому RGB является основной моделью, используемой веб-дизайнерами.
CMYK (Cyan, Magenta, Yellow, Key или Black) – цветовая модель «голубой, пурпурный, желтый и черный», используемая для печати. Именно из этих четырех цветов состоят чернила для принтеров.
Референс (Reference) – пример или образец, используемый для вдохновения или ориентира в процессе создания дизайна. Это может быть изображение, сайт, шрифт или стиль.
Типографика (Typography) – использование шрифтов, их размеров, стилей и интервалов в дизайне.
Модульная сетка (Grid System) – система сеток, которая помогает организовать элементы на странице.
Цветовая схема (Color Scheme) – цветовая схема, набор цветов, используемых на сайте.
Руководство по стилю (Style Guide) – руководство по стилю, описывающее шрифты, цвета и элементы интерфейса.
Дизайн система (Design System) – комплексный набор правил, компонентов и шаблонов для создания единого дизайна.
Анатомия сайта
Раздел сайта (Секция, Блок, section) – логически связанный блок на веб-странице, выполняющий определённую функцию. Например, секция «О компании», «Услуги», «Отзывы» или «Контакты».
Обложка сайта (Hero section) – это первый крупный блок на веб-странице, который привлекает внимание пользователя. Обычно содержит ключевое сообщение, изображение или видео, и призыв к действию (CTA).
Шапка сайта (header) – Заголовок или верхний блок сайта. Часть страницы, которая обычно включает логотип, меню навигации, контактную информацию или другие ключевые элементы.
Подвал сайта (footer, Футер) – это нижняя часть страницы, где часто размещаются ссылки на политику конфиденциальности, контактные данные, авторские права и дополнительные ссылки.
FAQ – блок на сайте с часто задаваемыми вопросами и ответами, это английская аббревиатура от выражения Frequently Asked Questions, в русскоязычной среде часто называют «ФАК».
Above the fold («Над сгибом») – этот термин в русскоязычной среде не используются (ну или я не встречал), но очень популярен в англоязычной, это часть веб-страницы, видимая пользователю без прокрутки. Этот термин пришёл из печатной индустрии и в веб-дизайне используется для обозначения важного контента, который должен быть виден сразу.
Контент – содержимое макета, которое не относится непосредственно к дизайну — тексты, графика (фотографии, иконки, логотипы и иллюстрации), видео.
Навигация (navigation / nav) – элементы интерфейса, позволяющие пользователю перемещаться по сайту. Включает меню, ссылки, кнопки и панели.
Карта сайта (sitemap) – это структурированная схема или список всех страниц и разделов веб-сайта, которая помогает организовать контент и облегчить навигацию.
Элемент интерфейса (Interface Element) – отдельный компонент на веб-странице или в приложении, с которым взаимодействует пользователь. Это могут быть кнопки, поля ввода, чекбоксы, выпадающие списки и т. д.
Иллюстрация (Illustration) – графическое изображение, созданное вручную или цифровыми средствами, используемое для улучшения визуального восприятия и передачи идей на сайте или в приложении.
Иконки (icons) – разновидность графических элементов, которые служат либо для визуального подкрепления текстовых блоков (образные), либо для выполнения определенных функций (сервисные).
Слайдер (Slider) – элемент интерфейса, позволяющий пользователю просматривать слайды (изображения, тексты или видео) с помощью кнопок или автоматической прокрутки.
Карусель (Carousel) – разновидность слайдера, где несколько элементов (изображений или карточек) видны одновременно и прокручиваются горизонтально или вертикально.
Буллиты (Bullets) – маркеры или символы (например, точки, галочки), используемые для выделения пунктов списка. В веб-дизайне часто применяются для структурирования информации.
CTA (Call-to-Action, призыв к действию) – элементы, побуждающие пользователя к действию (кнопки, ссылки).
Пагинация (pagination) – система навигации, разделяющая длинный контент на страницы. Например, на сайтах с каталогами товаров или статьями.
Негативное пространство (Whitespace/Negative Space) – свободное пространство, образуемое между, внутри или вокруг элементов на странице. Служит обрамлением в структуре сайта, а их использование необходимо и с эстетической точки зрения, и в плане улучшения восприятия контента.
Верстка сайта (psd to html, figma to html) – русскоязычное сленговое выражение означает процесс формирования веб-страниц путём компоновки текстовых и графических элементов с использованием языка разметки. По сути это “оживление” статичного макета, созданного веб-дизайнером, в контексте может звучать так «Мне нужно сверстать сайт» или «Сколько стоит верстка сайта».
Как вы видите дословного перевода на английский не существует, «там» просто используют выражение перевода из одного формата в другой например «I need to convert figma to html» («Мне надо сконвертировать фигму в html»).
Эффект наведения (hover effect) – один из видов анимации на сайте, который показывает, что элемент, на который наводит пользователь, является активным и кликабельным. Эффект наведения применяется на кнопках, сервисных иконках, ссылках и т.д.
Разработка сайта
Адаптивный дизайн (Responsive Design) – адаптивный дизайн, который подстраивается под разные устройства и размеры экранов.
HTML (HyperText Markup Language) – язык разметки для создания структуры веб-страниц.
CSS (Cascading Style Sheets) – каскадные таблицы стилей для оформления HTML.
JavaScript – язык программирования для добавления интерактивности на сайт.
Frontend (Фронтенд)– часть сайта, видимая пользователю (HTML, CSS, JavaScript).
Backend (Бэкенд) – серверная часть сайта, обрабатывающая данные и логику.
SEO (Search Engine Optimization) – оптимизация сайта для поисковых систем.
Landing Page (Лэндинг, Посадочная страница) – целевая страница, созданная для конверсии (например, продажи).
Accessibility – доступность, дизайн для пользователей с ограниченными возможностями.
Мечтаете освоить профессию веб-дизайнера и создавать стильные сайты?
Сейчас самое время! Только до 25 января на наш курс действует специальная скидка 32%!
Что вы получите:
- Пошаговое обучение с нуля до создания собственного портфолио.
- Практические задания и разбор реальных кейсов.
- Поддержку от ментора и полезные бонусы.
Начните путь к новой профессии уже сейчас и сэкономьте!
Количество мест ограничено.
Успей записаться! Переходите по ссылке
