Язык веб-дизайнера: руководство для ваших клиентов

Опубликовано: 2024-09-15

В каждой профессии есть свой жаргон. Как веб-дизайнер, вы свободно владеете алфавитом терминов веб-сайта, таких как UX, CSS и HTML. Но ваши клиенты? Для них это могло быть с таким же успехом греческое.

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

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

Вот 7 основных терминов веб-дизайна:

  • Изображение героя
  • UX
  • Каркас
  • Информационная архитектура
  • Адаптивный для мобильных устройств
  • HTML, CSS и JavaScript
  • система управления контентом

Изображение героя

При разработке веб-сайта вы часто будете слышать термин «главное изображение» применительно к домашней странице веб-сайта. Хотя этот термин может вызывать в воображении образы Бэтмена и Супермена, это не означает, что ваш дизайнер размещает на вашем веб-сайте изображения супергероев.

Иллюстрированный эскиз веб-сайта, в котором главное изображение (вверху) является основным центром веб-сайта.
Главное изображение — это большое изображение или видео в верхней части главной страницы веб-сайта.

Главное изображение – это крупное изображение или видеофон в верхней части главной страницы веб-сайта. Люди начали называть эту область главным изображением, потому что это очень важная часть сайта. Это первое, что видит любой посетитель, зайдя на ваш сайт, поэтому дизайн должен быть увлекательным и содержательным.

Хотя в термине «изображение героя» есть слово «изображение», этот раздел веб-сайта не обязательно должен представлять собой статичное изображение. Сегодня очень распространены видеоролики с героями, которые обычно воспроизводятся в фоновом режиме за текстом. В зависимости от целей сайта и стиля дизайна вы можете даже увидеть анимацию, используемую в этой области сайта.


UX или пользовательский опыт

UX — это сокращение от пользовательского опыта. Некоторые веб-дизайнеры специализируются на UX-дизайне — процессе улучшения общего впечатления посетителей от вашего сайта. UX-дизайн считается специализацией, поскольку дизайнер не просто создает внешний вид сайта, но и учитывает, как посетитель испытывает свои первые (и последующие!) посещения сайта.

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

То же самое можно сказать и о веб-сайтах, и в этом вся суть пользовательского опыта. Привлечение и удержание посетителей на вашем веб-сайте — это не только красивый дизайн. Веб-дизайнер, который разбирается в UX-дизайне, учитывает, как все на сайте влияет на общее впечатление пользователя.


Каркас

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

Каркас — это, по сути, проект, показывающий, где на странице будут размещены определенные элементы и текст.

Иллюстрация, показывающая примерный макет веб-сайта. Есть кружок, показывающий, где будет располагаться логотип, рамки, показывающие, где будут располагаться разделы и изображения, и пунктирные линии, показывающие, где будет находиться текст.
Каркас — это план, показывающий, где на странице будут размещены определенные элементы и текст.

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

Если вы когда-либо видели пример каркаса, вы заметите, что он похож на чертеж здания; каркас обычно черно-белый с основными рамками и контурами, показывающими, где будут размещены элементы.


Информационная архитектура (IA)

Помимо каркаса, на ранних этапах процесса вы обычно работаете над информационной архитектурой вашего веб-сайта. Информационная архитектура, часто называемая IA, относится к процессу организации, определения приоритетов и маркировки контента на веб-сайте.

На этом этапе вы решите, какие страницы веб-сайта будут включены в верхнюю навигацию веб-сайта и как будет структурировано содержимое. Верхняя навигация — это серия ссылок в верхней части страницы. Эта верхняя навигация находится на каждой странице веб-сайта и помогает посетителям сайта найти наиболее важный контент.

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


Мобильный Адаптивный

Сегодня каждый веб-сайт должен работать на различных устройствах, таких как телефоны, планшеты и настольные компьютеры. Именно в этом контексте вы часто слышите, как веб-дизайнеры используют термин «мобильная адаптация».

Адаптивность к мобильным устройствам означает, что в саму платформу уже встроена технология.

Большинство платформ веб-сайтов, таких как WordPress, адаптированы для мобильных устройств, а это означает, что в саму платформу уже встроена технология, благодаря которой контент автоматически подстраивается под размер устройства пользователя.

Подумайте о том, как работает ваш мобильный телефон. Если вы повернете телефон горизонтально, содержимое телефона автоматически настроится.

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

Опытный веб-дизайнер учитывает это при разработке сайта и может помочь вам написать контент, который будет работать как на мобильных устройствах, так и на больших экранах.


HTML, CSS и JavaScript

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

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

HTML означает язык разметки гипертекста и позволяет веб-команде сообщать веб-браузеру, как отображать фрагмент текста. HTML использует различные теги, чтобы обозначить, является ли текст заголовком, подзаголовком или абзацем. Вы можете увидеть дизайнерскую метку заголовка в своем дизайне как H1. Это относится к тегу HTML, который будет использоваться, чтобы сообщить браузеру, что весь текст с этой меткой должен быть написан одним и тем же размером шрифта.

Каскадные таблицы стилей (CSS) помогают веб-дизайнеру и разработчику определить внешний вид веб-сайта. HTML сам по себе не привлекателен и не привлекателен. CSS имеет решающее значение в создании красивого дизайна веб-страницы.

JavaScript — это язык сценариев, который разработчики используют для создания взаимодействия на веб-сайте. Используя только HTML и CSS, у вас есть красивая веб-страница, но с этими двумя ничего не получится. При поиске веб-разработчика или команды разработчиков ищите человека, который знает гораздо больше, чем просто JavaScript, и убедитесь, что ваша команда имеет опыт работы с платформой, на которой вы создаете сайт.


система управления контентом

Мы закончим довольно простым термином: система управления контентом, также известная как CMS. Вы часто будете слышать этот термин в отношении WordPress (еще одной системы управления контентом).

Фактически, WordPress — самая популярная система управления контентом в мире. CMS — это внутренний инструмент веб-сайта, позволяющий легко редактировать или добавлять контент на сайт.

Огромное преимущество создания сайта на такой CMS, как WordPress, заключается в том, что вам не нужно быть веб-дизайнером или веб-разработчиком, чтобы изменять текст, добавлять изображения или страницы после запуска веб-сайта. Вам не придется звонить своему веб-разработчику каждый раз, когда вам нужно добавить запятую на страницу.

Поскольку WordPress чрезвычайно гибок и настраиваем, вы получаете лучшее от обоих миров с красивым веб-сайтом, которым по-прежнему легко управлять вашему бизнесу.


Посмотрите больше контента WordPress!

локальная-WordPress-разработка-среда-почему-большая

WordPress — самая популярная система управления контентом в мире, и с каждым днем ​​ее использует все больше и больше креативщиков.

Узнайте больше о WordPress здесь. Неважно, новичок ли вы или знаете WordPress как свои пять пальцев, у нас есть ресурсы и статьи для каждого!

Продолжайте читать здесь.