12 терминов в веб-дизайне, которые нужно знать. Термины в веб дизайне


15 важных терминов в веб-дизайне

Хотите говорить на одном языке с профессиональными веб-дизайнерами, понимать смысл терминов, которые встречаете в блогах и знать их в первую очередь для себя? Листайте ниже! Мы подготовили для вас 15 основных терминов в веб-дизайне.

1. Vector graphics

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

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

2. Bitmapped graphics

Bitmapped graphics – растровая графика. Уже описана выше. Стоит добавить, что растровые изображения всегда зависят от разрешения экрана. При сильном увеличении растрового изображения можно будет увидеть точки, из которых оно состоит. К слову, каждая сделанная вами фотография является растровым изображением.

3. CMYK

CMYK: Cyan, Magenta, Yellow, Key color. Четырёхцветная палитра расшифровывается как название цветов «голубой, пурпурный, желтый и черный» и является самой распространенной цветовой схемой, используемой для печати.

Цвет компьютерного экрана изменяется от черного (отсутствие цвета) до белого (максимальная яркость всех составляющих цвета: красного, зеленого и синего). На бумаге, напротив, отсутствию цвета соответствует белый, а смешению максимального количества красок – темно-бурый, который воспринимается как черный.Поэтому при подготовке к печати изображение должно быть переведено из аддитивной модели цветов RGB в субтрактивную модель CMYK. Модель CMYK использует противоположные исходным цвета – противоположный красному голубой, противоположный зеленому пурпурный и противоположный синему желтый.

4. RGB

RGB: Red, Green, Blue. Цветовая модель «красный, зеленый, синий». Если CMYK используется для печати, то RGB – это самая распространенная модель в цифровой графике. В отличие от принтеров, компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре. Именно поэтому RGB является основной моделью, используемой веб-дизайнерами.

5. Responsive web design

Responsive web design – адаптивный дизайн: “К чему может адаптироваться дизайн?” – спросите вы. “К виду используемого устройства,” ответим мы. Это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету.

Это значит, что один и тот же сайт можно просматривать на самых разных устройствах, независимо от разрешения и формата экрана – смартфонах, планшетах, ноутбуках и т.д. При этом просмотр будет одинаково удобен для всех форматов – пользователям мобильных устройств, например, не нужно будет расширять отдельные области сайта, чтобы не промахнуться мимо нужной ссылки.

6. Flat design

Flat design – плоский дизайн: философия дизайна, в основе которой лежит простота и функциональность. У элементов, созданных по принципу «плоского дизайна», нет объема. В нем отсутствуют техники, направленные на придание глубины и объемности: нет градиентов, теней, текстур и бликов, которые придают объекту реалистичный вид. Вместо придания объема, плоский дизайн обращается к основам графики – ярким цветам, простым формам, кнопкам и иконкам.

7. Skeuomorph

Skeuomorph – скевоморфизм — это принцип, который подразумевает заимствование облика элементов дизайна из физически существующих прототипов.

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

Вспомните дизайн старых «осей» Apple, состоявший из приложений и иконок, которые выглядели так, будто были взяты из реальности (компас, киоск, календарь и т.д.). Вот в чем суть скевоморфизма. Но после нескольких лет широкой популярности скевоморфизму, похоже, приходит конец.

8. Metro

Metro – метро-интерфейс, также известный как «дизайнерский язык Microsoft», был разработан Microsoft и сегодня используется во многих продуктах компании.

Стиль Metro основан на принципах дизайна швейцарского стиля. Основными принципами Metro являются акцент на хорошей типографике и крупный текст, который сразу бросается в глаза. Microsoft называет Metro «простым, чистым, современным», а также «обновлением» по сравнению с основанными на значках интерфейсам Android и iOS.

Вдохновением для его создания послужили дорожные знаки, и его задача – быть таким же простым и ясным. Главное здесь – думать о дизайне как о рабочем пространстве, а не как о произведении искусства.Вот вам наглядный пример, скриншот моего второго меню Windows 8.

9. Style Tiles

Style Tiles – плитка: этот структурный стиль стал популярен благодаря успеху сети Pinterest. В его основе лежит структура, состоящая из колонн, и параллельная, но не симметричная подача материала в виде «плиток». В результате получаются разноразмерные сегменты, которые при этом сохраняют аккуратный, организованный вид.

10. Above the fold

Above the fold – верхняя половина полосы – это очень важный термин для людей, которые работают с онлайн платформами. Он взят из лексикона старомодных печатных газет, в которых самые важные новости размещались в «верхней половине полосы», чтобы их замечали в первую очередь. В дизайне «верхняя часть полосы» означает ту часть экрана, которая полностью видна без прокрутки вниз и основной контент должен размещаться именно здесь.

11. Long scrolling

Long scrolling – длинная прокрутка– это один из самых последних трендов в мире веб-дизайна. Термин, в общем-то, говорит сам за себя и означает структуру, где длинные страницы требуют постоянной прокрутки вниз.

Если вы активно пользуетесь социальными сетями, то вероятно, вы уже встречались с длинной прокруткой. Сайты вроде Facebook, Вконтакте, Twitter (и многие другие) славятся невероятно длинными новостными лентами, для просмотра которых нужно листать и листать страницу вниз. Концепция такого дизайна основана на том, что посетители не хотят тратить драгоценное время на загрузку контента и им проще «проскролить» страницу.

12. Negative space

Negative space – негативное пространство или «белые пятна»: термин, обозначающий свободное пространство, образуемое между элементами на странице, внутри или вокруг них.. Проще говоря, это область, не занятая содержанием.

Одним из первых негативное пространство начал использовать в своих работах американский художник-оформитель Чарли Гослин. Многие дизайнеры до сих пор черпают вдохновение и приводят в пример его работы.

Негативное пространство» может становиться самодостаточным в композиции, конкурировать с «позитивным пространством» или поддерживать его. Однако в грамотном дизайне оно не должно отвлекать внимание от основного предмета композиции.

13. Тexture

Тexture – текстуры. Применение текстуры может стать одним из лучших способов добавления глубины дизайну.  Это могут быть простые и незаметные текстуры, которые придаю тонкости дизайну, а также более сложные, которые используют в навигационном меню или заголовках. В любом случае, они являются источником для различных экспериментов для дизайнеров.

14. Mockup

Mockup – макет – это модель, которая демонстрирует как будет выглядеть ваш сайт. Они отличаются от реальных сайтов только тем, что не функционируют.

15. Promo website

Promo website – сайт-визитка. Это так называемый односторонний сайт, который имеет буквально одну страницу, на которой сконцентрирована вся информация. Первое мнение о такой структуре, что ее легко создать, но существует множество правил и техник, которые доказывают, что не так уж и просто вместить весь контент на одну страничку и не рассеять внимания пользователя.

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

Автор: Лина Стопятюк

Превью: Depositphotos

Читайте также:

Как сэкономить деньги при создании сайта

5 основных цветов в веб-дизайне

6 основных правил хорошего лендинга

say-hi.me

60 терминов веб-дизайна, которые должен знать каждый маркетолог

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

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

Знакомая ситуация?

Все маркетологи прошли этот путь и знают, насколько необходимо владение словарём дизайн-терминов. Мы решили составить расширенный глоссарий этих терминов:

1. ВыравниваниеПозиционирование элементов в дизайн-макете (текста, изображений и т.д.). Эти элементы могут быть выровнены относительно друг друга и относительно страницы. Этот текст выровнен по левому краю, а линии изображенные ниже — по правому.

2. Аналогичные цветаЦвета, следующие друг за другом на цветовом круге.

3. Верхняя часть символа (Ascender)выступает над верхней линией (высотой) строчного символа.

4. Базовая линия (baseline)Невидимая линия, на которой расположены все символы в строке.

5. Высота заглавного символаРасстояние между базовой линией и верхней точкой заглавного символа.

6. Цветовая модель CMYK (CMYK: Cyan, Magenta, Yellow, Key color) Цветовая схема используется в полиграфии и охватывает меньше цветов, чем RGB-модель.

7. Цветовой кругЦветовой круг показывает взаимодействие между первичными, вторичными и третичными цветами, холодными и тёплыми.

8. Цветовая схемаСочетание двух и более цветов цветового круга, также называется гармонией цвета.

9. Дополнительные цветаЦвета, расположенные друг напротив  друга на цветовом круге.

10. СжатиеУменьшение размера файла путём удаления лишних данных. Особенно полезно при пересылке или сохранении больших изображений.

11. Контраст Подчёркивание различий между цветами, формами, пространством и другими элементами дизайна.12. ОбрезкаУдаление частей изображения для перекомпозиции или для изменения линейных пропорций.

13. CSS (Каскадные таблицы стилей)Фрагмент кода, отдельный от основного содержания и определяющий внешний вид и впечатление от веб-страницы.

14. Нижняя часть символа (Descender)Часть буквенного символа, выходящего за границы базовой линии.

 

15. Количество точек на дюйм (DPI)Аналогично пикселю в вебе, точка — наименьшая единица измерения при печати цифровых изображений. Количество точек на дюйм (DPI) относится к разрешению печатного цифрового объекта – чем больше DPI, тем больше разрешение.

16. ТеньВизуальный эффект, создающий впечатление тени за графическим объектом.

17. EPS Формат файлов, используемый для изображений векторной графики, содержащих как текст, так и изображения.

18. Растушевка Дизайнерская техника сглаживания резких переходов

19. ШрифтНачертание букв определенного стиля и размера. Например, шрифт Times New Roman полужирный 14px.

20. GIFФормат файлов, наиболее часто используемый для небольших изображений с несколькими цветами, или анимированных изображений. Пример анимированного gif-изображения:

21. ГрадиентДизайнерская техника плавного перехода одного цвета или части изображения в другой цвет или часть изображения.

22. СеткаКоординатная плоскость с горизонтальными и вертикальными линиями для выравнивания изображений и текста в пределах документа.

23. Шестнадцатеричные цвета (HEX-код)Код, используемый в HTML и CSS для определения специфического цвета. В обозначении содержит символ хэштега (#). Таблица с шестнадцатеричными цветовыми кодами:

24. НTMLЯзык гипертекстовой разметки для отображения содержимого веб-страниц.

25. ОттенокТо, что большинство людей называют цветом — красный, оранжевый, жёлтый.

26. JPEGФормат файла, использующий сжатие как с потерями (loss) так и без потерь (lossless), причем потеря качества незаметна глазу. Чаще всего используется для фотографий и реалистичных картин с плавными переходами яркости и цвета.

27. КернингРасстояние между символами.

28. ИнтерлиньяжРасстояние между строками текста.

29. Сжатие данные с потерями (Loss)Вид сжатия данных с уменьшением размера сжимаемого файла. Характерный пример — — JPEG.

30. Сжатие без потерь (Lossless)Вид сжатия изображения, при котором оригинальные данные полностью восстанавливаются.

31. Средняя линия Расстояние от базовой линии строки до верхней точки большинства строчных букв.

32. Негативное пространство.Пространство вокруг элементов дизайна на веб-странице или отдельном изображении. Синоним пустого пространства.

33. Шрифты в формате OTFСовременный стандарт формата шрифтов. В одном файле содержится как экранная версия шрифта так и версия для печати. Совместима с Mac и Windows. Расширение файла со шрифтами — .otf.

34. Верхняя висячая строкаПервая строка абзаца, появляющаяся отдельно от остального абзаца. Обычно ухудшает читабельность текста.

35. PantoneЦвеовая палитра, созданная компанией Pantone. В основном используется в полиграфическом дизайне и используется для сопоставления напечатанных цвета с экранными на стадии цифрового дизайна.

37. PDFФайловый формат, используемый для представления документов и презентаций.

38. ПикселНаименьший элемент цифрового изображения.

39. Пикселей на дюймЕще одна единица измерения разрешения изображений, соответствующая количеству пикселей на фрагмент изображения.

40. PNGФормат изображений, лучше всего подходящий для изображений с прозрачными участками и большими участками однотонного цвета.

41. Прямоугольная цветовая схема4 цвета — 2 пары дополняющих цветов.

42. Разрешение Способ измерения четкости и уровня детализации изображения. Размер файлов изображений с высоким разрешением больше.

43. Цветовая модель RGBИспользуется в веб-дизайне, так компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре.

44. Насыщенность (Saturation)Свойство, характеризующее силу, интенсивность ощущения цветового тона.

45. Засечки (Serif)Штрихи на концах линий в начертании символов. “Sans serif“ — соответственно шрифты без засечек.

46. Квадратная цветовая схема4 цвета, равноудаленные друг от друга на цветовом круге.

49. СтерженьОсновной вертикальный штрих буквенного символа, как в букве В и диагональный штрих в букве V.

50. ШтрихиЛинии, определяющее очертания символа в гарнитуре шрифта.

51. ЯркостьСтепень присутствия в цвете черного или белого.

52. Третичные цветаЭта цветовая схема сочетает цвета, расположенные друг к другу под углом в 120 градусов. Эта цветовая схема считается наилучшим сочетанием цветов.

53. Гарнитура шрифтаКоллекция символов, включающая буквы, цифры, пунктуацию. Например, Times New Roman, Arial, Helvetika.

54. Векторное изображениеВместо пикселей в векторной графике используются линии и формы для представления изображений. Увеличенное векторное изображение не теряет в четкости и качестве.

55. Визуальная иерархияПринцип дизайна, упорядочивающий и расставляющий акценты на разных элементах с помощью цвета, размера и других инструментов дизайна.

56. Водяной знакХорошо заметный знак на изображениях, используемый для указания собственника визуального контента, и предотвращающий его незаконное использование.

57. Жирность шрифтаТип начертания символов, который может быть полужирным, жирным, нормальным.

58. Пустое пространствоБелое пространство вокруг объектов дизайна. Синоним негативного пространства.

59. Висячая строкаТекст в конце абзаца, переходящий на следующую страницу или колонку. Как правило, портят эстетическое впечатления и снижают удобочитаемость текста.

60. Высота строчного символаРасстояние между базовой линией и верхней точкой строчного символа.

artismedia.by

Разговорный Словарик Web-разработчика / Хабр

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

Ну так это надо же исправить… Хабрачеловеки, я тут начал составлять разговорный словарик, что бы получилось что-то удобочитаемое и понятное любому из людей, с которым приходится говорить во время разработки

Ниже собственно сам словарик. По мере поступления мыслей в мою голову и комментариев в этот топик всё будет дополняться и редактироваться… спасибо

Общее
Сайт — Интернет ресурс, любой проект в интернете (форум, блог, магазин...)Браузер — Программа для просмотра сайтов, их изменения, отправки данных в интернетДизайн — Процесс проектирования сайта. Вид художественно-проектной деятельности, сочетающей принципы удобства, экономичности и красоты. (с) На практике чаще всего готовым дизайном называют набор макетов и какие-то описания логики работы сайта по этим макетамТехническое задание, ТЗ — документ описывающий новый проект, всю его логику, структуру, зависимости и переходы

Макет— внешний вид, страницы которую нарисовал дизайнер (psd, jpg, tiff...).Шаблон— 1. страница хтмл, которую сверстал верстальщик html+css+js, 2. Шаблон обрабатываемый движком, разбитый на блоки, с переменными, и кодом, для загрузки динамических данных движком.Движок— программная часть сайта, его ядро, нужен для соединения контентной части страницы и визуальной части. Отвечает за всю логику, формирует структуру сайта.cms — система управления контентом, готовый движок, содержащий в себе необходимый инструментарий для управления структурой и содержимым сайта.Контент— содержимое веб страниц сайта. Весь текст, все картинки, фото, видео музыка и другая информация, которая не относятся непосредственно к дизайну.Скрипты— часть программного кода отвечающая за какое-то конкретное действиеСервер, Хост— место, «где физически» расположен сайт, к хосту почти всегда есть доступ из интернета через браузер по его доменному имени или непосредственно к файлам по ftp sshДомен — имя сайта, то, что пользователь пишет в строке «Адрес» своего браузера, что бы попасть на сайтАдминка, backoffice — Специальный раздел сайта, из которого ведётся управление сайтом, его настройками, контентом. Из админки производится редактирование и добавление информации, администрирование пользователей, разделов сайта Счётчик — в применении к web обычно означает специальный программный модуль, который ведёт статистику сайта. например собирает информацию по количеству посещений, времени пребывания на ней, браузерам пользователя и другоеftp (ssh) — сетевой протокол передачи данных, предназначенный для обмена файлами(ftp ssh) и удалённого управления сервером(ssh), их используют для управления файлами и настройками на сервере

Вёрстка
html– в общем виде — формат файла, воспринимающийся браузером как страница, в нём описывается вся разметка сайтаcss– таблица стилей, в ней описываются классы со стилями, отвечающие за оформление всей страницы Блок— какая-то обособленная часть страницы, вся страница состоит из блоков различной степени вложенностиТеги— элемент html представляет из себя текст, заключенный в угловые скобки. Является активным элементом, изменяющим представление находящейся в нём информацииheader, шапка — верхняя, часто статичная, часть сайта, обычно содержит основную информацию о сайте — заголовок, основное меню управления, логотип, поиск, ссылки на карту и личный кабинет пользователяfooter, подвал — нижняя, так же статичная, часть сайта, в ней обычно указывают копирайты и контакты, дублируют основное меню, логотип или указывают любую другую информацию
Дизайн
Слои— отдельные части макета, каждый слой — элементарная часть в макете, которую можно изменять отдельно от другихpsd — «стандартный» формат photoshop, разработки макета, содержит информацию о слоях, шрифтах и цвете, фильтрах, прозрачности и другой важной информации. Не сжимает графику. может содержать несколько состояний одного элементовswf, flash — мультимедийный формат. используется для отображения векторной графики на сайте, создания веб приложений с помощью ActionScript, показа любого мультимедийного контента (музыки, видео, векторной анимации)
Программирование
Язык— (php, python, perl, asp...) язык программирования, на котором ведётся разработка движка, языки отличаются синтаксисом и возможностямиБаза данных, БД— (mysql,mysqli,postgres,oracle) структурированный организованный набор данных, описывающих характеристики каких-либо физических или виртуальных систем. (с) в базе данных хранится весь контент, а так же вся служебная информация о структуре и связях сайтаМодуль — функционально законченный фрагмент, отделенный от основного кода, предназначенный для использования в других программах. Модули позволяют разбивать сложные задачи на более мелкие.xml — расширяемый формат разметки. Текстовый формат, предназначенный для хранения структурированных данных. служит прослойкой между базами данных и движком сайта или же заменяет собой базу. xsl, xslt — Язык преобразований XML-документов. С помощью XSL можно трансформировать XML-документ в любой вид, будь то HTML, WML, RTF, PDF, SQL, даже в SWFJSON — простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютеромAJAX — совмещенная из нескольких, технология позволяющая обновлять данные на странице, без её перезагрузки лог — файл с записями о всех событиях в хронологическом порядке. используется для отслеживания качества работы, поиска неполадок и ошибокэто вторая редакция. готовится третья...

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

habr.com

10 терминов, чтобы быть с веб-дизайном на «ты»

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

Дизайнеры, а в особенности веб-дизайнеры, пристально следят за трендами и новыми терминами в своей профессиональной области. В этой статье мы собрали 10 самых интересных и необходимых терминов веб-дизайна, которые обязательно пригодятся вам в работе. Зная эти понятия, вы будете общаться на одном языке. Притом неважно занимаетесь ли вы сами веб-дизайном, или хотите заказать разработку сайта профессионалам.

01. HTML 5, CSS & JavaScript

HTML5

HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины.

Несмотря на схожесть названий, HTML5 не является продолжением предыдущих версий HTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.

Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Какие возможности предлагает HTML5?

● Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.● Воспроизведение видеороликов.● Воспроизведение аудиофайлов.● Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.● Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.● Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.● Рисование — внутри тега (canvas) с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.● Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Чтобы сделать красивую веб-страницу одного HTML не достаточно. Каскадные таблицы стилей (CSS) позволяют дизайнерам создавать визуальный набор правил, определяющих порядок в котором различные элементы веб-страницы будут отображаться в браузере.

CSS используется для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

JavaScript

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

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса. Следует отметить, что, несмотря на свое название, JavaScript не имеет никакого отношения к языку программирования Java.

02. Responsive design (Адаптивный веб–дизайн)

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

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий корректное (красивое) отображение сайта на различных устройствах, подключённых к интернету.

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

03. Semantic markup (Семантическая разметка)

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

Содержание страниц сайта теоретически понятно читающим их людям, однако поисковым системам сложно определить, о чем идет речь. Добавляя специальные теги к HTML-коду своих страниц, вы как бы подсказываете поисковой системе, что вот здесь, например, описывается такой-то фильм (место, человек, видеоролик). Тем самым вы помогаете поисковым системам и другим приложениям лучше понимать ваш контент и отображать его подходящим образом.

04. SaaS

SaaS (от англ. Software as a Service – Программное обеспечение как услуга) — это выгодная альтернатива приобретению программного обеспечения. SaaS позволяет получать программное обеспечение как услугу, а не покупать дорогостоящие лицензионные программы.

Поставщики услуги, совместно с разработчиками SaaS приложений берут на себя разработку программ, их размещение, внедрение, обновление, техническую поддержку, а заказчик оплачивает только доступ к этому приложению через интернет. Таким образом, в отличие от обычной схемы приобретения лицензионного программного обеспечения, заказчик платит только за услугу (право пользования данной программой), то есть только за то, что ему необходимо.

Чаще всего SaaS дает доступ к приложениям, которые потребовали бы от заказчика приобретения дополнительных аппаратных мощностей, найма высококвалифицированных специалистов, разработке технического задания и внедрения (почтовый сервер, безопасность, телефония и т.д.).

05. A/B Testing (A/B тестирование)

A/B тестирование, также известное под названием «сплит-тестирование» – это один из наиболее эффективных способов измерить и оптимизировать (научным образом) эффективность веб-страницы. Суть тестирования заключается в том, что берутся две версии определенного материала, например, целевой страницы сайта, и одновременно запускаются перед одинаковыми по размеру аудиториями. Затем результаты автоматически сравниваются, и становится понятно, какая из версий функционирует успешней. A/B тестирование популярно и вызывает доверие у маркетологов благодаря тому, что при его выполнении должным образом, вы получаете точную информацию о том, какие изменения нужно внести, чтобы ваша компания стала успешней.

06. ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) — стандарт доступности активных Интернет-приложений, который определяет подходы к тому, чтобы сделать содержимое сайтов и интернет-приложений более доступными для людей с ограниченными возможностями.

Применение стандарта особенно эффективно для сайтов с динамическим содержимым и развитыми элементами управления пользовательским интерфейсом, разработанными с использованием Ajax, HTML, JavaScript, и связанных с ними технологий. В настоящее время, некоторые функциональные возможности веб-сайтов недоступны для части пользователей с ограниченными физическими возможностями, особенно для людей, полагающихся на программы, читающие с экрана и для тех людей, которые не могут использовать мышь. WAI-ARIA задает новые пути предоставления функциональных возможностей программами-помощниками. С помощью WAI-ARIA разработчики могут создавать прогрессивные веб-приложения, доступные и удобные для всех пользователей.

07. Information Architecture (информационная архитектура)

Информационная архитектура (IA) это все, что касается организации сайта. IA  – обобщенное понятие, используемое для описания семантической структуры информации веб-сайта: организации контента, путей перехода и взаимосвязи страниц сайта. Основная задача AI организовать информацию таким образом, чтобы пользователям (а не поисковикам) было удобно с ней работать. Как следствие, это влияет на повышение конверсии и уровень удовлетворенности пользователей.

08. Server-side scripting (серверные сценарии)

Серверный сценарий — это небольшая программа, которая хранится на сервере и запускается в результате определенных действий в браузере. Подобные сценарии можно писать на различных языках, в том числе Perl, PHP и Microsoft ASP.NET. В отличие от клиентских сценариев, таких как JavaScript, серверные сценарии запускаются на сервере до отображения веб-страницы в обозревателе. Примерами приложений серверных сценариев могут служить торговые карты, динамические меню и опросы.

Есть два подхода по обеспечению функциональности приложений на веб-сайте:

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

2. Серверный, когда все манипуляции с данными производятся на сервере.

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

09. Visual hierarchy (визуальная иерархия)

Визуальная иерархия – это последовательность (порядок), в которой человеческий глаз воспринимает увиденную информацию. Так устроено природой, что человек сначала обращает внимание на наиболее контрастные блоки. Благодаря продуманной иерархии визуальных элементов на странице можно направлять внимание пользователей туда, куда вам нужно. Кроме этого гармоничная визуальная иерархия – это залог красивого макета. Есть определенные принципы, согласно которым нужно распределять информационные и мультимедийные блоки на веб-странице. Их выбор зависит от ваших целей и задач.

10. Infinite/parallax scrolling (бесконечная прокрутка и эффект параллакса)

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

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

 

Дайте нам знать в комментариях, если вы считаете, что мы пропустили что-то важное!

Источник: creativebloq.com

Related

www.pressfoto.ru

​Терминология и жаргонизмы в сфере веб-дизайна

Опережающий дизайн

Под этим понятием подразумевается такая компоновка дизайна, при которой большая часть решений принимается от имени пользователя автоматически. Цель не в том, чтобы помочь пользователю принять решение, а в том, чтобы создать экосистему, в которой вообще не нужно принимать никаких решений. Этот процесс будет происходить автоматически без вмешательства пользователя.

Дизайн выстраивается таким образом, чтобы исключить как можно большее количество шагов к достижению цели, и найти способ правильно использовать данные (всплывающие окна, регистрация, рекомендации, геолокация), предшествующие модели поведения, а также бизнес-логику для того, чтобы приблизить насколько возможно к автоматизму происходящее в системе.

Этнографические исследования

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

Микровзаимодействия

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

Отзывчивый веб-дизайн

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

Для реализации отзывчивого дизайна используются так называемые контрольные точки для определения конечного вида макета сайта: один макет используется выше контрольной точки, другой – ниже. Контрольные точки, как правило, основаны на ширине используемого браузера.

Адаптивный веб-дизайн

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

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

Прогрессивное улучшение

Это понятие подразумевает стратегию в веб-дизайне, которая делает упор на доступность, правильность HTML-разметки, а также использование внешних таблицы стилей (CSS) и скриптов. Это даёт возможность выборочно подключать те или иные таблицы стилей и модули, способные изменить функциональность и внешний вид страницы в зависимости от характеристик устройства, браузера и качества интернет соединения пользователя.

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

Параллакс

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

Дизайн-мышление

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

Эвристическая оценка

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

Информационная архитектура

Это понятие относится к организации информации. То есть оно включает анализ того, из каких страниц будет состоять структура сайта, какой на них будет контент, как каждая из них будет связана с другими страницами этого же сайта.

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

Синдром утёнка

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

Суть в том, что утята носят на себе «отпечаток» объекта, влиянию которого они подвергаются в течение длительного времени (у людей то же самое происходит) и относятся к нему как дети к матери. Перемена объекта вызывает его непринятие. По крайней мере, сначала.

Перекрёстный обмен идеями по схеме 6–3–5 (англ. «Brainwriting»)

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

Цель в том, чтобы получить 108 новых идей за полчаса. Сама техника следующая: 6 участников группы под контролем модератора должны написать на листочке по 3 идеи касательно предмета обсуждения за 5 минут, после чего передать листочек соседу справа. На основе чужих идей люди записывают ещё по 3 мысли за 5 минут. И так продолжается полчаса.

Персонализация

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

Партизанское исследование

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

Партизанские интервью используются для тестирования проекта на наличие явных огрехов и культивации полезных идей. Суть в выдвижении гипотез и их подтверждению или опровержению. Основой для исследования могут служить данные анкетирования или даже личный опыт работы с той или иной целевой аудиторией. Вы можете опросить знакомых, посидеть на кухне с коллегами и обобщить свои знания о предпочтениях людей, на которых ориентирован продукт. А потом сравнить соответствие проекта полученной информации. То есть это очень приблизительный, гипотетический метод определения проблемных мест в вашем продукте на основе «домашних» разговоров и выводов.

Контекстный запрос

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

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

А/Б тестирование

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

Когнитивная плавность мышления

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

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

Микротексты

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

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

Надеемся, эта статья помогла вам узнать что-то новое и развеять неясности вокруг специфических терминов и жаргонов, которых в дизайнерской среде бытует довольно много. Нашим же любимым является «синдром утёнка». А вам что больше понравилось? Если вы знаете что-либо интересное, не упомянутое в данном посте, поделитесь термином и его значением в комментариях. Нам будет интересно!

spark.ru

12 терминов в веб-дизайне, которые нужно знать. / Блог

Чтобы понимать терминологию профессиональных веб-дизайнеров и говорить с ними на одном языке, рекомендуем ознакомиться с этой статьей.

 

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

 

Векторная графика (Vector Graphics)

 

Представляет собой визуализацию элементов из линий и геометрических форм.

 

Она используется при создании инфографики, иконок для сайта, логотипов.

 

Для изображений больших размеров векторная графика также подойдет наилучшим образом.

 

 

Растровая графика (Bitmapped Graphics)

 

Это полноценное изображение, которое мы привыкли видеть вокруг в интернете. Любая фотография является растровым изображением.

 

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

 

 

CMYK (Cyan, Magenta, Yellow, Key color)

 

Это 4-х цветная палитра, состоящая из голубого, пурпурного, желтого и черного цветов. Самая распространенная схема используемая для цветной печати на принтере.

 

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

 

RGB (Red, Green, Blue).

 

В этой цветовой модели содержится красный, зеленый и синий цвет.

 

Она является самой распространенной в цифровой графике, применяется на всех мониторах и цветных дисплеях.

 

Адаптивный дизайн (Responsive Design).

 

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

 

 

Плоский дизайн (Flat design).

 

У элементов с плоским дизайном нет объема, теней, глубины.

 

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

 

 

Скевоморфизм (Skeuomorph).

 

Представляет собой заимствование элементов дизайна из реальных физических объектов.

 

Этот принцип в дизайне поддерживал Стив Джобс, который считал скевоморфизм идеальным решением для дизайна инноваций.

 

В старом дизайне iOS на iPhone этот вид дизайна отражается наилучшим образом, а элементы и иконки меню, как будто натуральные и их можно потрогать.

 

 

Метро-интерфейс (Metro).

 

Акцент делается на отличной и крупной типографике, которую легко воспринимать и читать. Максимальная простота и ясность.

 

Этот стиль был разработан в Microsoft и по сегодняшний день используется в операционной системе Windows.

 

 

Плитка (Style Tiles).

 

Стиль, который зародился из социальной сети Pinterest.

 

Структура такого дизайна состоит из колонн и несимметричной подачи материалов, в виде плитки, которая в итоге смотрится, как единое целое.

 

Длинная прокрутка (Long scrolling).

 

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

 

Текстуры (Тexture).

 

Текстурные и фактурные элементы в веб-дизайне (в виде натурального дерева, металла или абстракций).

 

С помощью текстур можно придавать глубину и объем, экспериментировать и проявлять свой креатив.

 

 

Mockup (Макет).

Такая модель представляет собой макет (наглядную демонстрацию) веб-дизайна в реальной среде.

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

www.vis-design.com

Словарь терминов по фронтенду | WebDesignMagazine.ru

Когда дело доходит до разговора о веб-дизайне, многие люди начинают перлы вроде “броузер” или того хуже. Ниже приведен список самых популярных терминов и выражений по фронтэнду, для всеобщего образования. Читаем, учим, говорим правильно!

A

adaptive design

адаптивный дизайн, подход к дизайну сайтов, учитывающий их адаптацию под различные устройства и условия, противопоставляется распространённому «фиксированному» дизайну только для компьютеров.

anchor

  1. ссылка, гиперссылка между двумя документами.
  2. якорь, ссылка на элемент в пределах документа, может быть частью гиперссылки.

animation

анимация, плавное изменение визуальных параметров объекта.

asset

ресурс, обычно вспомогательный, как стили и картинки для страницы, напр. ресурсы сайта — site assets.

assert

проверка, условие, которое проверяется, употр. в тестировании, напр. проверка поля не прошла — field assert has failed.

B

browser

бра́узер

back-end

бэке́нд

  1. область веб-технологий, работающих на сервере.
  2. внутренняя часть серверной системы, занимается обработкой данных.

background

фон, напр. фоновое изображение — background image.

baseline

базовая линия, воображаемая линия в основании букв в строке.

blockquote

блочная цитата, HTML-элемент для выделения цитируемой нестрочной области документа. Может содержать атрибут cite со ссылкой на первоисточник.

border

рамка, внешняя видимая часть блока, напр. рамка слева — border-left.

border-radius

скругление рамки, напр., скругление рамки на 3 пикселя — border-radius:3px, скругление верхнего левого угла — border-top-left-radius, см. также скруглённые углы.

box model

блочная модель, система размерностей блока, состоит из содержимого, отступа и рамки, не включает внешний отступ и обводку.

box-shadow

тень (блока), напр. тень блока красная — box-shadow is red.

breadcrumbs

хлебные кро́шки, вспомогательная навигация на сайте, последовательно отражающая структуру или пройденные шаги.

button

кнопка

  1. элемент интерфейса, при нажатии отправляющий форму или производящий иное действие
  2. элемент формы button или input type="button" (также submit и image).

C

callback

обратный вызов, исполнение кода по завершению работы функции, напр. передай значение в обратном вызове — pass value in a callback.

cell

ячейка

  1. структурная единица таблицы.
  2. элемент таблицы td или th

cellpadding

отступ в ячейках таблицы.

cellspacing

расстояние между ячейками таблицы.

checkbox

чекбо́кс

  1. элемент интерфейса для выбора одного или нескольких вариантов, напр. чекбокс неактивен — checkbox is disabled.
  2. элемент формы input type="checkbox"

clear

очистка (потока)

  • clear:left — очистка слева
  • clear:right — очистка справа
  • clear:both — полная очистка

client-side

клиентсайд, область технологий, работающих в браузере, часто синоним фронтенда.

closure

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

code

  1. сущ. код, неисчисл. (как сахар), напр. ошибка в коде — error in code но не ошибка в кодах (неправильно).
  2. гл. писать код, верстать, программировать, напр. верстать сайт — to code a site.

colspan

объединение столбцов, HTML-атрибут для объединения нескольких ячеек таблицы в одной строке.

column

столбец, колонка, вертикальная область в таблице, раскладке или тексте.

content

содержимое

cross-browser

кроссбра́узерный, работающий во всех браузерах, слитно.

cross-platform

кроссплатфо́рменный, работающий во на всех платформах, слитно.

CSS Working Group (CSSWG)

Рабочая группа CSS

D

design

  1. сущ. дизайн, визуальный облик сайта, может включать принципы взаимодействия и архитектурные решения, напр. новый дизайн для сайта — new design for site.
  2. гл. разрабатывать, создавать или проектировать внешний вид и функциональность.

disabled

неактивный, состояние элемента формы, в котором его изменение запрещено, напр. неактивная кнопка — disabled button.

display

вид

  • display:none — скрытый вид
  • display:block — блочный вид
  • display:inline — строчный вид
  • display:inline-block — вид строчного блока

DOM

объектная модель документа, дом

doctype

докта́йп, конструкция вида DOCTYPE html в начале документа, которая обозначает используемую версию HTML.

dropdown

выпадающее меню, элемент интерфейса, раскрывающий дополнительную информациию при активации.

E

easing

плавность, функция плавности, описывает изменение скорости анимации с помощью ключевых слов или кривых Безье, напр. плавность перехода линейная — transition easing is linear.

em

ем, единица измерения в CSS, которая зависит от размера шрифта родителя, напр. размер шрифта 3 ема — font-size:3em.

enabled

активный, состояние элемента формы, в котором его изменение разрешено, напр. активная кнопка — enabled button.

engine

движок, напр. Сафари работает на движке Вебкит — Safari is based on WebKit engine.

F

fallback

TODO

favicon

фавиконка, значок сайта, обычно 16×16 пикселей в формате ICO.

fieldset

группа полей, элемент, объединяющий несколько полей формы, напр. зелёная рамка на группе полей — green border on a fieldset.

figure

фигура, элемент из HTML5, содержащий изображение, видео, таблицу, график или фрагмент кода.

figcaption

заголовок фигуры, заглавие или подпись к фигуре.

float

  1. прил. плавающий, свойство блока, заставляющее последующие блоки обтекать его, напр. раскладка на плавающих блоках — float layout.
  2. гл. обтекать, следовать вплотную к плавающему блоку, напр. текст обтекает справа — text is floating to the right.
  3. гл. прижимать, упираться вправо или влево, обычно из-за плавающих свойств, напр. прижмите блок влево — float block to the left.

font

шрифт

  • font-weight — насыщенность
    • font-weight:normal — нормальная
    • font-weight:bold — полужирная, (не «жирный»)
    • font-weight:bolder — жирнее
    • font-weight:lighter — светлее
  • font-style — стиль шрифта
    • font-style:normal — прямой
    • font-style:italic — курси́в
    • font-style:oblique — наклонный
  • font-size — размер шрифта, кегль
  • font-family — семейство шрифта, гарнитура
    • font-family:serif — с засечками
    • font-family:sans-serif — без засечек
    • font-family:monospace — моноширинный

footer

подвал

  1. характерная визуальная область в конце страницы.
  2. элемент footer — смысловая часть с метаинформацией.

framework

фреймво́рк, набор готовых решений для упрощения разработки.

front-end

фронте́нд

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

full screen

полноэкранный режим, поведение программы или её части, в котором она занимает весь экран целиком.

G

graceful degradation

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

gradient

градие́нт, плавный переход от одного цвета к другому.

  • linear gradient — линейный градиент
  • radial gradient — радиальный градиент
  • conical gradient — конический градиент

grid

сетка, способ упорядочить расположение элементов в дизайне с помощью вертикального или горизонтального ритма, напр. модульная сетка — module grid.

H

header

шапка

  1. характерная визуальная область в начале страницы.
  2. элемент header — смысловая озаглавливающая часть.

height

высота

I

implement

внедрять, реализовывать напр. Firefox внедрил поддержку всего — Firefox has implemented support of everything.

inline

строчный

  1. inline block — строчный блок
  2. inline box — элемент строки в строчном форматировани: часть наполнения контейнера строки, к которой непосредственно применяются CSS-правила, напр. анонимный элемент строки — anonymous inline box.
  3. inline element — строчный элемент
  4. inline styles — локальные стили

input

поле (ввода), элемент формы. TODO.

K

kerning

кернинг, расстояние между парами букв, учитывающее их форму для более равномерного набора.

keyframe

ключевой кадр, одна из заданных точек анимации, изменения между которыми происходят автоматически.

keyframe animation

покадровая анимация, способ задания анимации в CSS с помощью ключевых кадров.

L

layout

раскладка, расположение основных блоков на странице, напр. раскладка в 3 столбца — 3 columns layout.

letter-spacing

межбуквенное расстояние, тре́кинг, общее расстояние между буквами в тексте, отличается от кернинга.

line-box

контейнер строки в строчном форматировании: виртуальный контейнер, содержащий в себе все элементы одной строки.

line-height

высота строки, интерлинья́ж, расстояние между базовыми линиями текста.

list

список, последовательное перечисление группы элементов.

  • ordered list — упорядоченный список, отсортированный по какому-либо принципу.
  • unordered list — неупорядоченный список, в котором порядок следования не имеет значения.

list-style

стиль списка

M

margin

внешний отступ, напр. нижний отрицательный отступ 10 пикселей — margin-bottom:-10px.

matrix

ма́трица (трансформации), описание трансформации объекта с помощью матрицы.

media queries

медиавыраже́ния, слитно.

mixin

при́месь, набор свойств, расширяющий поведение другой сущности, встречается в CSS-препроцессорах и подходах к JavaScript, напр. примесь очищает поток — mixin is clearing.

mock-up

макет, внешний вид или дизайн сайта различной степени детализации, напр. дизайнер прислал макет страницы — designer sent a page mock-up.

modal

  1. прил. мода́льный, блокирующий интерфейс для выполнения какого-либо действия, напр. модальный диалог — modal dialog.
  2. сущ. модальное окно (диалог), элемент интерфейса, см. модальный.

multiple

множественный, повторённый два и более раз, напр. множественные фоны — multiple backgrounds.

multiple columns

  1. мультиколо́нки, механизм из CSS, позволяющий выстроить текст в несколько колонок, напр. поддержка мультиколонок в IE — multiple columns support in IE. Предпочтительнее, чем громоздкие «множественные колонки».
  2. многоколо́ночный, состоящий из нескольких колонок, напр. многоколоночная раскладка — multiple columns layout.

N

nested

вложенный, находящийся внутри чего-либо, напр. двойная вложенность — double nesting.

node

узел, элемент структуры, напр. дочерний узел — child node.

O

opacity

прозрачность, степень прозрачности, напр. прозрачность 10% — opacity:0.1.

opaque

непрозрачный, степень непрозрачности, напр. непрозрачен на 75% — opaque by 75%, значит прозрачность 25%.

outline

обводка, внешний равномерный контур элемента, не участвующий в блочной модели.

P

package manager

TODO

padding

внутренний отступ, напр. верхний внутренний отступ 10 пикселей — padding-top:10px.

pagination

  1. постраничная навигация, обычно список ссылок с номерами страниц, на которые разбит документ.
  2. разделение на страницы, разделение документа на отдельные страницы для удобства чтения, загрузки или других целей.

pattern

па́ттерн, формализованный подход к написанию кода, напр. паттерны JavaScript — JavaScript patterns.

performance

быстродействие, характеристика скорости загрузки, отрисовки и т.п., напр. быстродействие CSS.

pixel

пи́ксель, единица измерения для экранного дизайна, в мн.ч. пиксели, сокр. пк.

polyfill

полифи́л, скрипт, воссоздающий недостающую функциональность, напр. новый полифил для IE6 — new polyfill for IE6.

popup

всплывающее окно, попа́п, отдельное окно или элемент интерфейса, появляющийся поверх текущего, напр. назойливый попап — annoying popup.

position

позиционирование

  • position:static — статичное
  • position:absolute — абсолютное
  • position:relative — относительное
  • position:fixed — фиксированное
  • position:sticky — закреплённое

preprocessor

препроце́ссор, инструмент, преобразующий код из одного синтаксиса в другой, напр. CSS-препроцессор Sass — Sass CSS preprocessor.

promises

про́мисы, способ асинхронного выполнения скриптов, противопоставляется использованию обратных вызовов.

progress bar

индикатор выполнения, элемент интерфейса, отражающий прогресс выполнения операции.

progressive enhancement

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

R

radio button

радиокно́пка, элемент формы input type="radio" для выбора одного варианта из нескольких, напр. радиокнопка выбрана — radio button is checked.

rem

рем, единица измерения в CSS, которая зависит от размера шрифта корневого элемента html, напр. размер шрифта 3 рема — font-size:3rem.

reset

сброс, обычно сброс стилей по умолчанию в CSS, напр. файл сброса стилей — style reset file.

responsive design

TODO

Responsive Images Community Group (RICG)

Общественная группа по адаптивным изображениям

rounder corners

скруглённые углы, напр. скруглённые углы вышли из моды — rounded corners are out of fasion, см. также скругление рамки.

row

строка, ряд

  • горизонтальная область в таблице или раскладке.
  • элемент таблицы tr

rowspan

объединение строк, HTML-атрибут для объединения нескольких ячеек таблицы в одном столбце.

S

scaffolding

скафо́лдинг, автоматическая генерация кода по описанию, метод метапрограммирования.

scale

  1. сущ. масштаб
  2. гл. масштабировать

script

скрипт, инструкции, описывающие поведение страниц, напр. скрипты пока не подгрузились — scripts are not loaded yet.

semantics

семантика, смысловая нагрузка HTML-элементов, напр. семантическая вёрстка — semantic coding.

server-side

серверсайд, область технологий, работающих на сервере, часто синоним бэкенда.

shadow DOM

теневой DOM, теневая модель документа

shim

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

sidebar

боковая панель, боковая часть сайта со второстепенным содержимым, напр. справа находится боковая панель.

skew

  1. сущ. наклон
  2. гл. наклонять

source maps

карты кода, специальная разметка, позволяющая привести в соответствие исходные файлы и скомпилированный код для отладки.

style

  1. сущ. стили, напр. применить стили к элементу — apply styles to an element, мн.ч. предпочтительнее: стили элемента, а не стиль элемента (неправильно).
  2. гл. оформлять, напр. как оформить селекты — how to style selects. Предпочтительнее, чем двусмысленное «стилизовать».

T

tab

  1. вкладка, один из слоёв интерфейса сайта или программы, который активируется выбором его заголовка, напр. открыть в новой вкладке — open in new tab.
  2. таб, клавиша табуляции, вставляет символ табуляции, переключает фокус на следующий элемент интерфейса, либо дополняет частично набранное слово, напр. нажмите контрол-таб — press Ctrl Tab.
  3. таб, символ табуляции, имеет настраиваемую ширину и используется для отступов в коде, напр. табы лучше пробелов — tabs are better than spaces.

textarea

текстовая область, элемент формы для ввода многострочного текста.

text-align

выравнивание, вы́ключка, ориентация строк текста в определённом направлении, либо равномерно по ширине блока.

  • text-align:left — влево
  • text-align:right — вправо
  • text-align:justify — по ширине

text-shadow

тень (текста), напр. тень текста красная — text-shadow is red.

thumbnail

миниатюра, уменьшенная копия изображения.

title

  1. заголовок, если речь идёт об элементе title, либо о заглавии элемента.
  2. подсказка, если речь идёт об атрибуте title="".

toggle

переключать, переводить из одного состояния в другое, переключить классы — toggle classes.

tooltip

всплывающая подсказка, вспомогательная информация, появляющаяся при наведении на элемент или при его активации, в частности title="".

touch

TODO

transform

трансформация, напр. трансформация масштабированием в 2 раза — transform:scale(2).

transition

переход, напр. линейный переход длительностью 2 секунды — transition:all 2s linear.

translate

перемещать, перемещение объекта с помощью CSS-трансформации, напр. перемещение на X и Y — translate(x, y).

typography

типографика, оформление текста с помощью выбора гарнитуры, параметров строки и других.

U

unit

единица изменения, напр. единица измерения «рем» — rem unit.

utility

утили́та, программа с узким назначением.

V

valid

TODO

validator

TODO

vendor prefix

бра́узерный пре́фикс, приставка к CSS-свойству -webkit- или -moz-, напр. добавьте браузерные префиксы — add vendor prefixes.

vertical-align

вертикальное выравнивание, расположение элементов по вертикали в пределах строки текста или таблицы.

viewport

вьюпо́рт

  1. видимая область документа в рамках экрана.
  2. элемент meta name="viewport", управляющий адаптацией страниц на мобильных устройствах.

W

website, web site

сайт, объединённые под одним адресом страницы, перевод «веб-сайт» избыточен.

World Wide Web Consortium (W3C)

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

web standards

веб-стандарты

width

ширина

word-spacing

межсловный пробел

workaround

обходное решение (приём), способ решения задачи в ограниченных условиях, напр. придумать обходной приём — to figure out workaround.

 

Распространяется по лицензии CC-BY-SA 4.0

webdesignmagazine.ru