Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>13 дек 2022</li>

3 <li>0</li>

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

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

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

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

8 Объясняем девять терминов, которые важны в работе веб-дизайнера.

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

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

11 Скриншот:<a>panopticafilms</a>/ Skillbox MediaОбычный шрифт с вашего компьютера на сайте будет работать плохо - как минимум потому, что разные операционные сети поддерживают разные форматы. Чтобы решить эту задачу, разработчики сделали специальные форматы шрифтов для браузеров - EOT, TTF, WOFF, WOFF2.

12 EOT (Embedded OpenType) разработали в Microsoft для уже устаревшего браузера Internet Explorer. Этот формат используют очень редко - только когда ваш пользователь вынужден работать с Internet Explorer.

13 TTF (TrueType Font) разработали в Apple. Его главное достоинство - возможность зашифровать файл так, чтобы никто не мог использовать шрифт в десктопных программах.

14 WOFF (Web Open Font Format) разработали в Mozilla специально для браузеров. Фактически это тот же TTF, но такие файлы не зашифрованы, весят на 40% меньше и позволяют отследить автора работы. Формат WOFF2 работает как WOFF, но весит ещё на 30% меньше.

15 В веб-дизайне чаще всего используют WOFF и WOFF2 - их поддерживают все современные браузеры и они очень быстро загружаются благодаря небольшому размеру файла.

16 Формат векторных изображений. Внутри SVG выглядит как строки кода - они и преобразуются в изображение на сайте. Такие картинки быстро загружаются и не теряют качество при масштабировании экрана.

17 Чаще всего дизайнеры используют формат SVG для иконок и логотипов. Фотографии и рисованные картинки лучше хранить в растровых форматах: JPG и PNG.

18 SVG-иконка и то, как она описана в файлеИзображение:<a>SVG Repo</a>Подробнее о растровой и векторной графике мы рассказали<a>в этой статье</a>.

19 А ещё SVG-иконки можно анимировать. О том, как это сделать проще,<a>читайте в нашей подборке сервисов</a>.

20 Точки, в которых сайт начинает подстраиваться под определённые размеры экранов. Очень часто встречается в адаптивной вёрстке, когда сайт должен хорошо выглядеть на всех устройствах: на мониторе компьютера, на экране телефона и планшета.

21 На этой схеме изображено, как именно должен выглядеть сайт при разной ширине окна. Самое узкое - 600 пикселей и меньше. Самое широкое - 1024 и больше:

22 Изображение: Skillbox MediaЗначок, который находится рядом с названием сайта во вкладке браузера, в поисковике и закладках. Обычно фавиконка - это логотип сайта или компании, благодаря которому пользователю проще запомнить и отличить одну ссылку от другой.

23 Наверняка у вас бывало, когда в браузере открыто много вкладок и их названия пропадают. При этом вы всё ещё примерно понимаете, где какой сайт открыт, - благодаря фавиконке:

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

25 Часто хедер делают "залипшим" - когда даже при скролле этот блок остаётся в самом верху страницы. Но делать так не обязательно, особенно на маленьких экранах телефонов, где места и без того мало.

26 Изображение: Grzegorz Leśniewicz / MUG ‎/<a>Behance</a>Изображение: AVA Digital /<a>Behance</a>Самый нижний модуль сайта со справочной информацией: пользовательским соглашением, номером телефона поддержки, ссылками на соцсети, контактами для связи. Всё это располагают в самом низу, пользователям это нужно очень редко.

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

28 Изображение: Grzegorz Leśniewicz / MUG ‎/<a>Behance</a>Изображение: AVA Digital /<a>Behance</a>В веб-дизайне это эффект, когда несколько частей одного модуля при прокрутке двигаются с разной скоростью. Благодаря этому возникает ощущение, что части композиции находятся на разных плоскостях. При этом чем медленнее двигается объект, тем "ближе" он располагается к пользователю.

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

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

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

32 Скриншот:<a>minimo</a>/ Skillbox MediaСкриншот:<a>Miratorg</a>/ Skillbox MediaЛюбой разработчик стремится, чтобы сайт быстро прогружался у пользователя - даже с медленным интернетом. Как правило, "тяжелее" всего картинки - обложки, баннеры, фоны. Поэтому их сжимают, чтобы уменьшить их вес и ускорить загрузку.

33 Обычно вес картинок снижают с помощью уменьшения количества цветов. Вот некоторые инструменты, позволяющие это сделать:

34 <ul><li><a>TinyPNG</a>;</li>

35 <li><a>Compressor</a>;</li>

36 <li><a>OptiZilla</a>;</li>

37 <li>плагин для Figma<a>Tiny Image</a></li>

38 </ul>Как правило, одного прогона в оптимизаторе достаточно, чтобы добиться хорошего результата. Поэтому рекомендуем не увлекаться, иначе вместо картинки у вас получится сжатый шакал: -)

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