Хотите говорить на одном языке с профессиональными веб-дизайнерами, понимать смысл терминов, которые встречаете в блогах и знать их в первую очередь для себя? Листайте ниже! Мы подготовили для вас 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
Читайте также:
Как сэкономить деньги при создании сайта
