Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>12 окт 2022</li>

3 <li>0</li>

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

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

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

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

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

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

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

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

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

13 <html> <head> <title>Заголовок</title> </head> <body> Текст. </body> </html>Так выглядит простейший HTML-документHTML - базовая технология для создания сайтов, поэтому с ней должен быть знаком каждый веб-дизайнер. Сейчас ни один сайт не обходится без HTML-разметки.

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

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

16 Скриншот: сайт агентства<a>SN37</a>/ Skillbox MediaА вот её стиль в CSS:

17 .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, он не сможет управлять внешним видом своей страницы и все его сайты в лучшем случае будут похожи на стандартные таблицы.

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

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

20 Смена языка в предпросмотре шрифтов<a>в магазине TypeType</a>работает на JavaScriptСкриншот: сайт<a>TypeType</a>/ Skillbox MediaВеб-дизайнеру полезно знать основы JavaScript, так как он позволяет использовать больше визуальных инструментов в работе.

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

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

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

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

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

26 Сервис подбора психологов<a>Alter</a>работает на WordPressСкриншот: сайт<a>Alter</a>/ Skillbox MediaСайт-портфолио, который свёрстан и <a>работает на Ghost</a>Скриншот:<a>Beirut</a>/ Skillbox MediaТак называют конструкторы сайтов, вроде Webflow, Tilda и Readymag. Они позволяют пользователям делать сайты из стандартных блоков без знаний программирования. Визивиги удобно использовать в небольших проектах, где не нужно подключать базы данных или постоянно менять контент.

27 Сайт<a>студии красоты</a>, свёрстанный на TildaСкриншот: сайт<a>bry.moscow</a>/ Skillbox MediaЕсли вы решите использовать эти конструкторы, то помните, что опции для изменения внешнего вида и функциональности сайта будут сильно ограничены.

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

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

30 На <a>промостранице</a>характеристики ведра меняют своё положение в зависимости от устройства пользователяИзображение: Sergei Telidchenko /<a>Behance</a>Сейчас большинство людей заходят в интернет с телефона, поэтому дизайнеру нужно со старта проекта думать о том, как продукт будет выглядеть на маленьких экранах. Если это игнорировать, вы можете потерять 70% потенциальной аудитории.

31 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>