Блог

Фавикон, люстра, параллакс: погружаемся в терминологию веб-дизайнера

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

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

Если для вас термины веб-дизайна — это чистая абракадабра, не беспокойтесь. Мы с радостью разъясним все.

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

  • Веб-дизайнер — это человек, который работает над визуальным аспектом веб-сайта.
  • Лендинг — это одностраничный сайт, который рекламирует продукт/услугу и призывает пользователя к выполнению определенного действия.
  • Интерфейс — это набор элементов взаимодействия с веб-сайтом (разделы, формы, кнопки и т. д.).
  • Баннер — это рекламное изображение.

Сегодня Маша получила заказ на редизайн сайта, поэтому ее рабочий день начался с встречи с клиентом и заполнения брифа.

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

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

  • Мудборд — это коллекция изображений, которые иллюстрируют концепцию и характер будущего дизайна.
  • Хедер — это верхняя навигационная панель на сайте.
  • Футер — это нижняя навигационная панель на сайте.
  • Логотип — это фирменный знак компании.
  • Фавикон — это небольшое изображение (чаще всего логотип), которое отображается рядом с названием сайта в результатах поиска.

Маша приняла предоставленные референсы, уточнила еще несколько мелких деталей, согласовала ТЗ и приступила к работе.

  • Референсы — это примеры дизайна, используемые на начальном этапе.
  • ТЗ (техническое задание) — это документ, в котором подробно описываются требования к проекту.

Клиент запросил, чтобы сайт был максимально удобным для использования, поэтому Маша в первую очередь занялась созданием сетки и поправила расположение блоков в соответствии с предварительным макетом.

  • Удобный (сайт) — это легко используемый сайт.
  • Сетка — это линии, которые разделяют страницу на прямоугольники и определяют расположение элементов.
  • Фиксить — это изменять, корректировать.
  • Блок — это основной элемент веб-дизайна.
  • Макет — это эскиз будущего сайта.

В процессе работы над контентом Маша создала множество новых изображений в программе Adobe Illustrator, потому что ей пришлось избавиться от стандартных фотографий и «шакалов» на сайте.

  • Контент — это тексты и графические материалы, которые заполняют сайт.
  • «Люстра» — это Adobe Illustrator.
  • Стоковые (фото/видео) — это фотографии/видео, используемые в качестве образцов.
  • «Шакал» — это изображение очень плохого качества.

Маша также занималась настройкой типографики: интерлиньяжа, выключки, кернинга и трекинга, хотя это не самые любимые аспекты ее работы.

  • Типографика — это оформление текста.
  • Интерлиньяж — это межстрочный интервал.
  • Выключка — это вертикальное выравнивание.
  • Кернинг — это регулировка интервала между определенными парами символов в зависимости от их формы.
  • Трекинг — это изменение интервала между символами в слове/предложении.

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

  • Анимация — это общее название для анимированных элементов.
  • Параллакс — это эффект, при котором элементы переднего плана движутся быстрее элементов заднего плана.
  • Ховер — это эффект, при котором элементы сайта реагируют на наведение курсора и меняют внешний вид.
  • Визуальное воздействие — это степень привлекательности элемента на сайте.
  • Слайдер — это блок, который показывает элементы, меняющиеся автоматически или вручную.

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

  • Десктоп — это полная версия сайта, предназначенная для компьютера.
  • Адаптивность — это дизайн, который автоматически адаптируется к разным устройствам.
  • Макет — это модель для показа дизайна.
  • «Бургер» — это кнопка с тремя горизонтальными полосками, которая, нажав на нее, позволяет пользователю видеть меню сайта.

Маша всегда ответственно подходит к своей работе и всегда соблюдает сроки. В назначенный день заказчик получил обновленный сайт и выразил восторг, сказав, что впервые встречает такого талантливого веб-дизайнера.

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

Изображение от storyset на Freepik