Обзор терминов веб-дизайна
Маркетологу важно знать свои вещи. Добавление этих терминов веб-дизайна в ваш бизнес-лексикон не только сделает вас умнее, но и будет огромным подспорьем при обсуждении дизайна вашего веб-сайта с вашим цифровым агентством.
Ниже приводится глоссарий из 37 конкретных терминов, подпадающих под эти терминологические темы: дизайн, художественное оформление, цвет и типографика.
Использование языка Интернета поможет гарантировать, что дизайн вашего сайта будет таким, каким вы хотите его видеть.
Дизайн
1. Визуальный вес
Визуальный вес — это теория, по который каждая страница имеет как бы свой вес, конечно, в переносном смысле. Но термин очень популярный, и он открывает наш список.
2. Плотность
Плотность — это количество информации и визуальных элементов в определенной области, странице или дизайне.
Страницы с высокой плотностью размещения иногда визуально описываются как «загруженные» или «переполненные». Подумайте: первая страница газеты или новостного сайта.
Страницы с низкой плотностью считаются светлыми с большим количеством пробелов.
Термины веб дизайна
См. Как стать веб-разработчиком в 2021 году – все, что вам нужно знать
Помните, чем больше элементов у вас в дизайне, тем больше внимания вы требуете от пользователя. Баланс — это ключ.
3. Шаблон
Шаблон — это заранее разработанный и обычно уникальный макет страницы или страниц на веб-сайте. Он применяется к содержимому страницы в целях дизайна. Например, домашняя страница и страница контактов имеют разный контент, элементы пользовательского интерфейса и функциональность. Для них требуются разные макеты и, следовательно, разные шаблоны страниц.
4. « Над сгибом »
Это относится к контенту, который пользователь впервые видит на странице без необходимости прокрутки. Это немного сложно реализовать в современном веб-дизайне, потому что люди заходят на веб-сайты с разных устройств с разными размерами экрана.
5. Адаптивный веб-дизайн.
Адаптивный веб-дизайн позволяет вашему веб-сайту автоматически адаптироваться к любому размеру экрана (настольному, планшетному и мобильному), обеспечивая удобство взаимодействия с пользователем.
Не уверены, оптимизирован ли ваш сайт для мобильных устройств, проверьте свой сайт здесь https://search.google.com / test / mobile-friendly.
6. Пустое пространство (или отрицательное пространство)
Это пустое пространство между элементами пользовательского интерфейса, столбцами, полями, изображениями и текстом и вокруг них. Имейте в виду, что белое пространство не обязательно должно быть белым, оно может быть любого цвета. Пустое пространство часто используется для улучшения читаемости текста, создания баланса и в качестве разделителя между несвязанными элементами в дизайне.
7. Минимализм
Минимализм — это стиль, в котором дизайн лишен всех ненужных элементов, расцветок, цвета и контента, который не поддерживает задачи пользователей. Когда все сделано правильно, минималистский дизайн будет чистым, четким и функциональным.
8. Баланс
Баланс — это визуальный вес всех элементов в композиции. Мы используем баланс, чтобы создать структуру и согласованность.
9. Состав
Это относится к расположению элементов дизайна на странице. Удачная композиция должна увлекать и направлять пользователя через контент.
10. Масштаб
Масштаб — это размер элемента по отношению к другому элементу. Масштаб можно использовать, чтобы вызвать интерес и привлечь внимание пользователя.
Иногда, когда вы говорите: «Мы хотим, чтобы логотип появился», вы можете просто попросить увеличить масштаб.
11. CTA (или призыв к действию)
CTA — это часть страницы, которая побуждает пользователя к действию. Например, на странице продукта вы можете увидеть большую кнопку с надписью «Попробуйте бесплатно» — этот термин веб-дизайна называется призывом к действию. Хорошие призывы к действию выделяются на странице и используют текст, который побуждает пользователя к взаимодействию.
12. Информационная архитектура
Информационная архитектура — это процесс организации страниц, контента и навигации веб-сайта наиболее логичным и полезным способом. Результатом обычно является карта сайта. Цель состоит в том, чтобы позволить пользователям находить все, что им нужно, без дополнительных усилий.
13. Каркасы
Каркасные модели — это эскизы с низкой точностью, которые описывают структуру страницы, навигацию, ключевые функции и контент без включения каких-либо элементов дизайна, таких как шрифты, цвета или изображения. Каркасные модели используются для мозгового штурма, намечают пути пользователя и быстро иллюстрируют взаимодействия. Каркасные модели — отличный способ начать процесс веб-дизайна, потому что они экономят время и позволяют легко выявлять проблемы с удобством использования.
14. Прототип
Прототип, который часто путают с каркасом, представляет собой средне-высокое представление окончательного дизайна. Прототипы интерактивны и функциональны и позволяют заинтересованным сторонам эффективно использовать окончательный дизайн до того, как он перейдет в разработку.
15. Руководство по стилю
Руководство по стилю — это документ, который включает в себя все цвета бренда, типографику и другие элементы дизайна и пользовательского интерфейса сайта. Руководство по стилю используется для единообразия внешнего вида на всех медиа-каналах и может служить руководством для любых будущих дополнений.
Произведение искусства
16. CMYK
CMYK означает голубой, пурпурный, желтый и черный. Эти четыре цвета чернил используются принтерами для печати документов, журналов, листовок и т. Д.
17. RGB
RGB означает
- красный
- Зеленый
- Синий
Эти три цвета используются для создания любого другого цвета, который вы видите на экране устройства. Многие принтеры принимают файлы RGB и конвертируют их в CMYK для печати.
Имейте в виду, что когда вы создаете свое произведение искусства, вам нужно убедиться, что вы используете правильный цветовой режим, чтобы оно правильно отображалось или распечатывалось.
Следует отметить, что мониторы излучают свет, а бумага поглощает свет, поэтому вы можете видеть более яркие цвета в RGB, чем в CMYK.
18. Растровые изображения.
В растровых файлах, также называемых растровыми изображениями, для создания изображения используются тысячи отдельных пикселей. Большинство изображений (особенно фотографий), которые вы видите в Интернете, являются растровыми; к ним относятся JPG, PNG и GIF.
19. Векторные изображения
Векторные изображения состоят из линий, кривых, форм и точек, а не из пикселей. Это позволяет масштабировать векторные изображения до любого размера без ущерба для качества изображения. Обычно они используются для изображений, не являющихся фотографиями, например логотипов, значков, диаграмм или другой графики. К наиболее распространенным типам векторных файлов относятся AI, EPS, PDF и SVG. Однако непосредственно в HTML можно добавить только SVG.
20. Фавикон
Фавикон или ярлык — это небольшой графический объект, часто логотип, который отображается в левой части адресной строки или вкладки браузера. Его также часто называют значком закладки. Двадцать терминов веб-дизайна истекли, осталось 17!
21. Сжатие изображения
Сжатие изображения уменьшает размер файла изображения. В идеале это делается без изменения или ухудшения качества изображения до такой степени, что оно становится размытым и непригодным для использования. Имейте в виду, что большие размеры файлов увеличивают время загрузки, что может расстроить пользователей. Вы хотите, чтобы ваши изображения были около 300 КБ или меньше, если это возможно. iLoveIMG — Image Editor — отличный инструмент для сжатия всех типов файлов изображений без потери качества. Попробуйте.
Цвет
22. Шестнадцатеричный код
Шестнадцатеричный цветовой код — это комбинация шестизначного числа и буквы, которая использует цветовую модель RGB для создания цвета. Шестнадцатеричные коды в основном используются разработчиками и дизайнерами в веб-дизайне для назначения цветов элементам пользовательского интерфейса сайта. Например, шестнадцатеричный код цвета для нашего синего заголовка — # 1959AA.
Знание конкретных шестнадцатеричных кодов, используемых для вашего веб-сайта, может быть полезно для настройки шаблонов электронной почты или других сторонних маркетинговых инструментов.
23. Оттенок
Оттенок — это цвет в чистом виде. В частности, оттенок — это любой цвет на цветовом круге. Он указывает на происхождение видимого нами цвета и бывает желтым, оранжевым, красным, фиолетовым, синим или зеленым. Вы никогда не будете называть черный или серый оттенком.
24. Оттенки
Оттенки создаются при добавлении белого к цвету для его осветления. Оттенок и пастель часто используются как синонимы.
25. Тоны
Оттенки создаются, когда к цвету добавляется серый цвет, чтобы смягчить его.
Оттенок
Простой термин в веб-дизайне: тень создается, когда к цвету добавляется черный, чтобы затемнить его. Остается тот же оттенок только в более темном варианте.
26. Насыщенность
Насыщенность относится к яркости цвета. Например, очень насыщенные цвета получаются очень яркими и живыми . Менее насыщенные цвета выглядят размытыми или приглушенными.
27. Теплые тона.
К ним относятся красный, оранжевый и желтый. Эти цвета обычно ассоциируются с энергией, яркостью и действием.
28. Классные цвета
К ним относятся зеленый, синий и фиолетовый. Эти цвета обычно ассоциируются со спокойствием, гармонией и профессионализмом.
Когда вы думаете, что цвет может быть «тусклым» или «плоским», вы можете иметь в виду низкую насыщенность цветов.
Типография
29. Засечки
Шрифты с засечками имеют небольшие декоративные линии, также называемые «хвостами» или «ножками» вверху или внизу буквы. Некоторые примеры шрифтов с засечками включают Times New Roman, Georgia, Garamond и Caslon. Если вы хотите, чтобы ваш дизайн выглядел традиционным, используйте шрифт с засечками. Шрифты с засечками передают элегантность, престиж и авторитет и являются отличным выбором для более традиционных предприятий, таких как юридические или финансовые фирмы.
30. Без засечек
Похожий, но другой термин в веб-дизайне шрифты без засечек (или без засечек) имеют чистые и точные концы без декоративных «хвостов» или «ножек». Некоторые примеры шрифтов без засечек: Helvetica, Proxima Nova, Avenir и Futura. Если вы хотите, чтобы ваш бренд выглядел как современный, доступный или ультрасовременный, вы можете подумать об использовании шрифта без засечек.
31. Толщина шрифта
Толщина шрифта или шрифта описывает толщину шрифта. Очень светлый шрифт может называться светлым или тонким, а более толстый шрифт — жирным, жирным или черным.
32. Ведущий
Межстрочный интервал (известный как высота строки в веб-дизайне) — это расстояние между строками текста в абзаце.
33. Отслеживание
Отслеживание (известное как межбуквенный интервал в веб-дизайне) — это расстояние между буквами. Отслеживание используется для изменения общего вида и удобочитаемости текста. Если буквы расположены слишком близко или слишком далеко друг от друга, их будет труднее читать.
34. Кернинг
Кернинг, который часто путают с трекингом, работает путем добавления или вычитания пробелов между парой букв, чтобы избежать неудобных пробелов, что создает визуально привлекательный и читаемый текст.
35. Сирота
Сирота — это фрагмент из одного слова или короткого предложения, который находится в начале абзаца.
36. Вдова
Вдова — это отдельное слово или короткая группа слов, которая появляется внизу абзаца, столбца или страницы.
37. Lorem ipsum
Lorem ipsum — это фиктивный текст, используемый в качестве заполнителя для реальной копии веб-сайта или макета в процессе разработки. Lorem ipsum выглядит так: Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat…
Заключение условий веб-дизайна
Ну вот и все. Надеюсь, это сообщение в блоге даст вам уверенность и знания, чтобы участвовать в обсуждениях дизайна, задавать правильные вопросы и с большей легкостью критиковать дизайн. Ваше агентство будет любить вас за это.
