1 - CSS, или каскадные таблицы стилей
Язык описания внешнего вида сайта. CSS задаёт нужные свойства элементам страницы: указывает размер колонок и полей, шрифты для заголовков и цвет фона. Отличие каскадных таблиц от HTML заключается в том, что второе структурирует информацию на сайте, а первые её оформляют.
2 - Гайдлайн
Правила, которые определяют, как должна выглядеть страница или макет. Гайдлайн фиксирует, какие цвета, шрифты и отступы нужно использовать в дизайне, а также определяет базовые элементы интерфейса и их свойства. В идеале такие правила помогают придерживаться айдентики вашего бренда.
3 - Респонсив дизайн
Один из способов оптимизировать внешний вид сайта для разных устройств, например, планшетов и смартфонов. Его придумал американский дизайнер Итан Маркотт. Респонсив дизайн использует «резиновый макет», который автоматически подстраивается под изменение параметров экрана. Это происходит, поскольку элементам не задают конкретные размеры в пикселях или дюймах, а указывают относительные в процентах.
4 - Адаптивный дизайн
Ещё один способ подстроить внешний вид сайта под различные устройства. В отличие от респонсив дизайна, адаптивный дизайн использует несколько готовых макетов с заданными размерами и свойствами. Когда человек заходит на сайт, сервер определяет, какой шаблон нужно отобразить пользователю.
5 - RGB
Цветовая модель, используемая в дизайне, который будет отображаться на цифровых устройствах. В основе RGB лежит смешение красного, зелёного и синего (red, green, blue). Лучи этих цветов накладываются друг на друга, окрашивая изначально черный экран, в результате чего появляются новые оттенки. Модель позволяет создать почти 17 млн цветов.
6 - SVG
Формат файлов с векторной графикой — рисунками на основе опорных точек и кривых. Изображения, сохранённые как SVG, мало весят и масштабируются без потери качества, так как их размер и разрешение не зависят от количества пикселей. Обычно для сайтов в формате SVG сохраняют иконки и логотипы.
7 - Кернинг
Изменение расстояния между соседними символами в словах. Стандартные интервалы между шрифтовыми знаками могут придавать тексту неряшливый вид, поскольку они не учитывают особенности начертания каждой буквы и цифры. Кёрнинг применяют, чтобы пробелы между знаками визуально выглядели одинаково, даже если фактически это не так.
8 - Трекинг
Изменение интервала между группой знаков: в слове, предложении или абзаце. С помощью трекинга можно сделать текст визуально плотнее или легче, увеличив межбуквенный пробел. Его часто используют в печатных изданиях, чтобы избавиться от «висячей строки» — пары слов в конце абзаца, которые во время вёрстки оказались в следующей колонке или на следующей полосе. В веб-дизайне трекинг может быть полезен при создании заголовков.
9 - Интерлиньяж
Межстрочное расстояние, которое можно менять, чтобы увеличить читаемость текста или акцентировать внимание на его фрагменте. Обычно интерлиньяж должен быть на 20-30 % больше основного текста: если вы набираете свои статьи 14-м размером шрифта, то расстояние между строками должно составлять 16,8 или 18,2 пункта. Пункт — единица измерения шрифта. Один пункт равен 0,352 мм.
10 - Выключка
Выравнивание текста относительно вертикальной границы блока. Существует несколько видов выключки: по левому краю, когда текст выравнивается по левой границе и обрывается справа (как, например, на сайте «Мастеров»), по правому краю, по центру и «по формату» — то есть по всей ширине блока, как в курсовых и дипломных работах.
11 - Хедер, или шапка
Верхняя часть и «визитная карточка» площадки, которая не меняется при переходе на другую страницу. Поскольку интернет-пользователи до сих пор проводят большую часть времени в верхней части сайта, хедер считают одной из важнейших зон интернет-ресурса. Обычно шапка включает логотип, контактную информацию и меню с кнопками call-to-action. Последнее помогает человеку ориентироваться на площадке, направляя его в нужные разделы.
12 - Футер, или подвал
Нижняя часть ресурса, которая тоже видная на всех его страницах. Футер содержит полезную, но не первостепенную информацию: карту сайта, контакты, ссылку на политику конфиденциальности и раздел с вакансиями. Основные задачи подвала — показать пользователю, что контент закончился и ему бесполезно скроллить дальше, и ещё раз подтолкнуть его к совершению целевого действия. Иногда в футере дублируют пункты меню из шапки — так человек, просмотревший страницу до конца, сможет перейти в нужный ему раздел, не прокручивая сайт ещё раз.
13 - Гамбургер
Иконка раскрывающегося меню в виде трёх полосок. «Гамбургер» позволяет не перегружать хедер большим количеством информации. Хотя три полоски можно встретить практически на любом сайте, исследования показывают, что пользователи до сих пор не до конца понимают, зачем они нужны, и на десктопе таким меню пользуются лишь 27 % людей.
14 - Ховер
Изменение дизайн-элемента при наведении на него курсора. К ховер-эффектам относят и всплывающие подсказки, и затемнение фотографии, и масштабирование изображений. Такой приём делает площадку более интерактивной и увеличивает время, проведённое пользователем на ресурсе. Кроме того, ховер помогает ориентироваться на сайте: нередко с его помощью создают всплывающее меню подразделов.
15 - Параллакс
Рассинхрон фона и элементов переднего плана во время скроллинга. Придаёт сайту глубины и трёхмерности. Параллакс появляется, когда несколько изображений накладывают друг на друга, задавая им разную скорость прокрутки. Такой эффект может быть как вертикальным, так и горизонтальным.
16 - Макет сайта
Совокупность всех статичных отрисованных веб-дизайнером страниц сайта, готовых для окончательной верстки проекта.
17 - Раздел сайта
Блок на конкретной странице сайта, несущий в себе определенного рода информацию. Самые популярные разделы - о нас, услуги, портфолио, преимущества, контакты и т.д.
18 - Эскиз макета
Примерная схема будущего проекта, нарисованная от руки. Эскиз нужен для того, чтобы быстро продемонстрировать заказчику схематичную структуру сайта.
19 - Прототип
Каркас макета, представляющий собой схему разделов с планом размещения основного контента. В прототипе не используются изображения и цвета, для того, чтобы не отвлекать от главного - от общей композиции проекта.
20 - Контент
Содержимое макета, которое не относится непосредственно к дизайну - тексты, графика (фотографии, иконки, логотипы и иллюстрации), видео.
21 - Композиция
Способ размещения всех элементов макета друг относительно друга. Самые часто встречаемые виды композиции - центральная и боковая.
22 - Навигация
Система ссылок, с помощью которых посетитель перемещается по страницам. Стандартным элементом навигации являются меню.
23 - Интерфейс (UI)
Совокупность средств, методов и правил взаимодействия между элементами системы. Пользователь вводит информацию при помощи специальных средств (кнопок, инпутов), а сайт реагирует ответ своими средствами (визуальными, звуковыми и т.д.)
24 - Элемент интерфейса
Отдельный элемент интерфейса сайта, позволяющий выполнить определенные действия. Самые часто встречаемые элементы интерфейса - кнопки, инпуты, ссылки.
25 - Опыт взаимодействия (UX)
Комплексный подход к взаимодействию пользователя с интерфейсом - его отношение и эмоции, вызванные и связанные с использованием продукта, системы.
26 - Юзабилити
Уровень удобства использования сайта для его посетителей. Большую роль для юзабилити играет навигация на сайте.
27 - Техническое задание (ТЗ)
Документ, определяющий структуру, дизайн, навигацию и функциональность сайта. Утвержденное ТЗ страхует заказчика и веб-дизайнера от возможного недопонимания и полностью описывает проект, объемы работ и сроки выполнения.
28 - Векторная графика
Способ представления объектов и изображений, основанный на математическом описании элементарных геометрических объектов. Вектор целесообразно использовать в тех случаях, когда объекту приходится менять размеры - качество вектора при этом останется прежним.
29 - Растровая графика
Изображение, представляющее собой сетку пикселей (цветных точек). Все фотографии - это растровые изображения. Недостаток - плохая масштабируемость.
30 - Иконки
Разновидность графических элементов, которые служат либо для визуального подкрепления текстовых блоков (образные), либо для выполнения определенных функций (сервисные).
31 - Фотосток
Онлайн база фотографий либо для свободного, либо для коммерческого использования. Фотостоки бывают бесплатными (unsplash.com) и платными (shutterstock.com).
32 - Мудборд
Мудборд (moodboard) - доска настроения будущего сайта, предназначенная для отображения стиля проекта. Мудборд составляется чаще всего из изображений, цветовых палитр, иконок, шрифтов и элементов интерфейса.
33 - PSD файл
Основной формат программы Adobe PhotoShop, в котором весь файл состоит из слоев, содержащих в себе отдельные элементы.
34 - Пиксель (px)
Наименьший логический элемент двумерного цифрового изображения в растровой графике или элемент матрицы дисплеев, формирующих изображение.
35 - RGB
Цветовая модель «красный, зеленый, синий», которая используется в цифровой графике. Компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре, поэтому RGB является основной моделью, используемой веб-дизайнерами.
36 - CMYK
Цветовая модель «голубой, пурпурный, желтый и черный», используемая для печати. Именно из этих четырех цветов состоят чернила для принтеров.
37 - Слайдер
Элемент макета, представляющий собой блок определенной ширины (чаще всего в шапке веб-страницы), главная задача которого отобразить автоматическую или ручную смену контента (картинок, текстов или целых баннеров).
38 - Пагинатор
Пагинатор - (постраничная навигация) механизм разбиения большого куска текста на более мелкие и удобные для чтения для избежания бесконечного скроллинга сайта. Применяется для отображения количества страниц с предлагаемыми товарами/новостными статьями.
39 - Длинная прокрутка
Структура сайта, в котором длинные страницы требуют постоянной прокрутки вниз (скроллинг). С длинной прокруткой все знакомы через социальные сети.
40 - Негативное пространство
Негативное пространство - свободное пространство, образуемое между, внутри или вокруг элементов на странице. Служит обрамлением в структуре сайта, а их использование необходимо и с эстетической точки зрения, и в плане улучшения восприятия контента.
41 - Верстка сайта
Процесс формирования веб-страниц путём компоновки текстовых и графических элементов с использованием языка разметки. По сути это “оживление” статичного макета, созданного веб-дизайнером.
42 - Эффект наведения
Один из видов анимации на сайте, который показывает, что элемент, на который наводит пользователь, является активным и кликабельным. Эффект наведения применяется на кнопках, сервисных иконках, ссылках и т.д.
43 - Плоский дизайн
Философия дизайна, в основе которой лежит простота и функциональность. Говоря буквально, у элементов, созданных по принципу «плоского дизайна», нет объема. В нем отсутствуют техники, направленные на придание глубины и объемности: нет градиентов, теней, текстур и бликов, которые придают объекту реалистичный вид. Вместо придания объема, плоский дизайн обращается к основам графики – ярким цветам, простым формам, кнопкам и иконкам.
44 - Скевоморфизм
По сути, скевоморфизм является противоположностью плоского дизайна. Вспомните дизайн старых «осей» Apple, состоявший из приложений и иконок, которые выглядели так, будто были взяты из реальности (компас, киоск, календарь и т.д.). Вот в чем суть скевоморфизма. Но после нескольких лет широкой популярности скевоморфизму, похоже, приходит конец.
45 - Cайт-визитка (или одностраничный сайт)
Большинство пользователей интернета уже привыкли к тому, что сайт состоит из нескольких страниц, между которыми можно легко перемещаться при помощи навигационного меню. Одностраничный сайт имеет буквально одну страницу. Существует много причин, по которым владелец сайта может предпочесть одностраничный дизайн многостраничному. Однако разработка одностраничного дизайна требует немало планирования и продумывания, чтобы добиться эффективного распределения контента. К счастью, в Wix можно найти много одностраничных шаблонов, где все было продуманно заранее.
46 - Cайт-визитка (или одностраничный сайт)
Это размер элемента по отношению к другому элементу. Масштаб можно использовать, чтобы вызвать интерес и привлечь внимание пользователя.
47 - CTA
Это часть страницы, которая побуждает пользователя к действию. Например, на странице продукта вы можете увидеть большую кнопку с надписью «Попробуйте бесплатно» — этот термин веб-дизайна называется призывом к действию. Хорошие призывы к действию выделяются на странице и используют текст, который побуждает пользователя к взаимодействию.
48 - Фавикон или ярлык
Это небольшой графический объект, часто логотип, который отображается в левой части адресной строки или вкладки браузера. Его также часто называют значком закладки.
49 - Сжатие изображения
Уменьшает размер файла изображения. В идеале это делается без изменения или ухудшения качества изображения до такой степени, что оно становится размытым и непригодным для использования. Имейте в виду, что большие размеры файлов увеличивают время загрузки, что может расстроить пользователей. Вы хотите, чтобы ваши изображения были около 300 КБ или меньше, если это возможно. iLoveIMG — Image Editor — отличный инструмент для сжатия всех типов файлов изображений без потери качества. Попробуйте.
50 - 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…
#Дизайн #webdesign #it-технологии #сайты #вёрстка
