Дизайн

#статьи

12 окт 2022
0

Главные понятия для веб‑дизайнера. Часть 1

Объясняем значения девяти слов, которые используют в профессии.

Иллюстрация: Polina Vari для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Фронтенд

(Frontend)

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

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

Бэкенд

(Backend)

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

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

Больше о том, что такое фронтенд и бэкенд, читайте в статье редакции «Код»

HTML

(HyperText Markup Language, язык гипертекстовой разметки)

Язык разметки веб-страниц. Его используют, чтобы сообщать браузерам, как именно должна выглядеть веб-страница: где должны стоять текст, картинки и видео. Также через HTML указывают, откуда брать стили для элементов и скрипты, если они необходимы.

<html>
    <head>
        <title>Заголовок</title>
    </head>
    <body>
        <p>Текст.</p>
    </body>
</html>

Так выглядит простейший HTML-документ

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

О том, как устроен и работает HTML, читайте в статье редакции «Код».

CSS

(Cascading Style Sheets, каскадные таблицы стилей)

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

Например, вот как выглядит кнопка на сайте агентства SN37:

*Скриншот: сайт агентства SN37 / Skillbox Media*

А вот её стиль в CSS:

.btnblack {
color: #000;
background-color: transparent;
border: 3px solid #000;
transition: background-color .5s;
padding: 10px 20px;
font-size: 15px;
border-radius: 0;
font-family: futura-pt,sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: .64px;
}

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

О том, как пользоваться CSS, читайте в статье редакции «Код».

JavaScript

Язык программирования, который позволяет манипулировать элементами на странице.

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

Смена языка в предпросмотре шрифтов в магазине TypeType работает на JavaScript
*Скриншот: сайт TypeType / Skillbox Media*

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

Подробнее о том, что такое JavaScript, читайте в статье редакции «Код».

PHP

(Hypertext Preprocessor, препроцессор гипертекста)

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

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

CMS

(Content Management System, система управления контентом)

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

В каждую CMS по умолчанию входит полноценная админка, где вы можете самостоятельно менять внешний вид сайта и его наполнение. Их используют и в больших, и в маленьких проектах. Например, сайт Skillbox Media тоже работает на CMS.

CMS могут быть платными и бесплатными. Платные: «1С-Битрикс», NetCat, InSales. Бесплатные: WordPress, Ghost, «Эгея».

Сервис подбора психологов Alter работает на WordPress
*Скриншот: сайт Alter / Skillbox Media*

Сайт-портфолио, который свёрстан и работает на Ghost
*Скриншот: Beirut / Skillbox Media*

WYSIWYG

(Визивиг, «что вижу, то и получаю»)

Так называют конструкторы сайтов, вроде Webflow, Tilda и Readymag. Они позволяют пользователям делать сайты из стандартных блоков без знаний программирования. Визивиги удобно использовать в небольших проектах, где не нужно подключать базы данных или постоянно менять контент.

Сайт студии красоты, свёрстанный на Tilda
*Скриншот: сайт bry.moscow / Skillbox Media*

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

Подробнее о том, что такое WYSIWYG и как ими пользоваться, читайте в нашей статье.

Адаптивность

Способность сайта адаптироваться под любые экраны устройств. Иногда это называют «мобильной версией» или «мобильной вёрсткой». Адаптивный сайт должен хорошо смотреться и на огромном мониторе с разрешением 4K, и на стареньком iPhone SE.

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

На промостранице характеристики ведра меняют своё положение в зависимости от устройства пользователя
*Изображение: Sergei Telidchenko / Behance*

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

О том, какой бывает адаптивность сайта, читайте в нашей статье.

Больше о веб-дизайне