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

Опубликовано: 2019-11-09

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

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

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

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

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


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

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

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

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

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


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

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

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

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


Каркас

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

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

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

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

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


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

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

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

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


Мобильный ответ

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

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

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

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

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

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


HTML, CSS и JavaScript

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

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

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

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

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


CMS

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

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

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

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


Проверьте больше контента WordPress!

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

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

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