Шаблоны перемещения внимания в веб-дизайне

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

Почему же это происходит? Складывается ощущение, что многие дизайнеры не совсем ясно понимают термин своей профессии и путают слова «веб-дизайн» и «создание красивейшего веб-сайта». На самом деле, это не так и далеко от правды.

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

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

Шаблоны перемещения внимания пользователей

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

Какова роль вашей веб-страницы? Каким образом посетители перемещают взгляд из точки А к точке Б? Предположим, что вы разрабатываете страницу, на которой вы (ваша компания) предлагаете посетителям какой-либо продукт? Каким образом вы можете добиться успеха? Изначально, нужно дать посетителю понять, что если у него существует какая-то проблема или потребность, то вы (ваша компания) – это именно те люди, которые помогут найти решение. Далее вы предоставляете немного информации о решении проблемы, о том, кто решает эти проблемы (название вашей компании, логотип или бренд), а затем предложение начать решать проблему. Как все это можно сделать? Проще говоря, мы можем немного контролировать то, как пользователи будут просматривать наши страницы. Здесь почти всё зависит от «горячих точек».

Горячие точки на веб-странице

Что такое горячие точки? Это области на странице, на которые взгляд посетителей задерживается дольше всего. Давайте ознакомимся с результатами исследования траектории движения взгляда посетителей веб-сайта с предложением каких-либо услуг или товара. Ниже вы можете видеть результат исследования траектории движения взгляда на странице предложения мобильного устройства – Credo Mobil.

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

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

Каково решение данной проблемы? Давайте рассмотрим намерения разработчиков Credo Mobil:

1. Показать посетителям отличный телефон, в котором они заинтересованы.
2. Немного намекнуть на название компании
3. Провести посетителя к кнопке действия, посредством которой производится покупка лота.

После изучения результатов исследования траектории перемещения взгляда, Credo Mobil решили изменить дизайн страниц. В результате получилось нечто вроде этого:

А вот и новые результаты исследования траектории:

F-образная траектория

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

Как видно, здесь есть нечто общее – посетители смотрят сначала на левый верхний угол, потом перемещают взгляд в правый угол, спускаются вниз, опять вправо, и так далее по тому же принципу. Таким образом, получается нечто вроде буквы английского алфавита – F. Такая траектория возникает, потому что посетитель просто-напросто «сканирует» страницу глазами по принципу сканера.

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

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

Руководство по управлению траекторией движения взгляда посетителей

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

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

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

Перевод от coolwebmasters|com
Оригинал: Eye Movement Patterns in Web Design

No related posts.

История интернета

Ребята из smartvideos|ru перевели и озвучили короткий фильм Мелиха Белгиля (Melih Bilgil) о истории интернета (The history of the Internet). Собирался перевести и озвучить, но они сделали это раньше. Смотрите фильм под катом.

Перевод от смартвидеос (русское озвучивание)

youtube|com|MbMAPoga8tE

Оригинальное озвучивание:

youtube|com|9hIQjrMHTv4
lonja|de|the history of the internet

Перевод: smartvideos|ru

No related posts.

Теория цвета для дизайнеров, часть 3: Создаем собственную цветовую схему

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

Ну что же, это случится как раз в этой статье! Сегодня мы расскажем о различных способах разработки собственных цветовых схем с нуля. Мы охватим как традиционные модели цветовых схем (монохромные, схожие, комплементарные и так далее), так и процесс создания собственных цветовых схем, которые не схожи с традиционными. К концу этой статьи у Вас уже будут навыки и необходимые для создания собственных схем инструменты, которые Вы сможете применять при разработке собственных проектов. Наилучшим способом выработки навыков считается практика. Так почему бы не задаться целью создания новой цветовой схемы каждый новый день?

— Краткий обзор

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

Во второй части вы охватили терминологию цветов: Оттенок (Hue) – (синий, зеленый, красный и так далее); Цветность (Chroma) – уровень цветности (уровень содержания примесей); Насыщенность (Saturation) – уровень отображения оттенка по соотношению слабый/сильный; Значение (Value) – уровень яркости цвета; Тональность (Tones) – уровень содержания серого оттенка в цветах; Тени (Shades) – уровень содержания черного оттенка в цветах; Подцветка (осветления / Tints) – уровень содержания белого оттенка в цветах. Это очень важные пункты, которые нужно знать для того, чтобы успешно двигаться дальше и дойти до процесса создания собственных цветовых схем.

— Традиционные модели цветовых схем

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

цветовое «колесо»

Основа – цветовое «колесо» поделенное на 12 долей. Это очень важный элемент при создании цветовых схем.

Монохром

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

Примеры:

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

Схожие

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

Примеры:

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

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

Еще один пример схожей цветовой схемы.

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

Комплементарные схемы

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

Примеры:

Широкий спектр осветлений, теней и тональностей делает данную схему очень универсальной.

Еще одна комплементарная схема с широким диапазоном уровней цветности.

И не забывайте, что бежевый и коричневый – это на самом деле затемненный или осветленный оранжевый цвет.

Раздельная комплементарная схема

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

Примеры:

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

Еще одна палитра с широким диапазоном уровней цвета.

Триадные

Триадные цветовые схемы создаются из цветов, равномерно расположенных на 12-дольной окружности цветов. Она является одной из самых разнообразных.

Примеры:

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

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

Двойная-комплементарная (четверная)

Четверная цветовая схема считается одной из самых сложных цветовых схем относительно грамотного применения.

Примеры:

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

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

Она отлично подходит для более темных цветовых схем.

Собственная схема

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

Примеры:

Цвета, используемые на этом примере, имеют схожий уровень цветности и насыщенности.

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

Используя один цвет с высоким уровнем цветности вместе с остальными с более низким уровнем – это еще один эффективный метод (цвета с более высоким уровнем цветности могут служить акцентами).

— Создание цветовой схемы

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

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

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

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

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

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

Для блога мы используем цветовую схему с тенями и осветленными вариациями серого цвета.

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

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

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

Хотя эта схема поначалу и выглядит как другая стандартная серая и красная палитра, если Вы присмотритесь, то заметите, что серые цвета на самом деле являются тональностями синего. Синий и красный составляют 2/3 четверной схемы, но хорошо работают только в паре, особенно если красный оставить без примесей, а синий цвет затемнить до почти серого.

Важность теней, тональностей и осветлений

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

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

Добавляем нейтральные цвета

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

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

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

Использование фотографий для создания цветовых схем

Многие дизайнеры предпочитают пользоваться фотографиями для создания цветовых схем. Существуют даже автоматизированные инструменты в сети, с помощью которых можно сделать все автоматически (одна из них – Adobe Kuler), или же Вы можете собственноручно сотворить все в программе Photoshop.

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

Давайте попробуем воспользоваться данным способом в обоих случаях (В программе Photoshop и Adobe Kuler). Найдите фото в системе Flickr, которое, по Вашему мнению, подойдет для дизайна сайта. Мы выбрали этот снимок:

Вот оригинальная цветовая схема, которую предлагает Kuler, при использовании данного изображения:

Одно из занимательных свойств сервиса Kuler – это то, что в нем есть функция «Select a Mood» (выбора настроения), при создании цветовой схемы. Вы можете выбрать Цветную, Яркую, Приглушенную, Глубокую или Темную цветовую схему. Посмотрите на результаты, полученные в разных режимах:

Цветная

Яркая

Приглушенная

Глубокая

Темная

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

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

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

И опять же 5 разных схем, которые нам предлагает Kuler:

Цветная

Яркая

Приглушенная

Глубокая

Темная

А тут что у нас получилось в Photoshop:

Как Вы видите, вариант с Photoshop значительно отличается от того, что предлагает Kuler, но все полученные схемы выглядят очень привлекательно. Версия, полученная в Photoshop, заняла немного больше времени, чем предыдущая, потому что здесь гораздо больше цветов.

Самые простые цветовые схемы

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

Вот несколько примеров того, о чем мы ведем речь:

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

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

Как много цветов?

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

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

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

— 10 сайтов с великолепными цветовыми схемами

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

01. Wentings Cycle & Mountain Shop

http://wentings.com/

wentings|com

02. Trivuong.com

http://www.trivuong.com/

trivuong|com

03. Oscar Barber

http://www.oscarbarber.com/

oscarbarber|com

04. North East Peace III Partnership

http://northeastpeace.com/

northeastpeace|com

05. mbA Architects

http://www.mbaarc.com/

mbaarc|com

06. Studio 13

http://www.studio13.fr/

studio13|fr

07. Joy Project

http://www.joyproject.it/en

joyproject|it

08. Morphix Blog

http://blog.morphix.si/

blog|morphix|si

09. El Designo

http://www.eldesigno.ca/

eldesigno|ca

10. LemonStand

http://lemonstandapp.com/

lemonstandapp|com

— Заключение

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

Наилучший способ научиться всему этому – практиковаться. Стараться каждый день создавать какую-нибудь новую цветовую схему. Вы можете пользоваться автоматизированными инструментами, или использовать Photoshop и вручную подбирать нужные цвета. Если Вы видите какое-то гармоничное сочетание цветов в жизни, попробуйте реализовать эту схему в компьютере. И постарайтесь извлечь все самое лучшее и полезное из предоставленных сайтов и подробнее изучить использованные в них цветовые схемы. Это поможет Вам в дальнейшем подборе правильных и подходящих цветов.

Оригинал: Color Theory for Designer, Part 3: Creating Your Own Color Palettes
Перевод: coolwebmasters|com

No related posts.

Лучшие посты — 10'06

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

Веб-обзор

• Каталог одежды и аксессуаров Reserved
• Byke by me — интернет-магазин велосипедов
• Chocomize — интернет-магазин шоколада
• Восхитительный сайт-каталог модельера Ли Барретт (Leah Barrett)
• Интернет-магазин мужских рубашек Shirts My Way
• Одностраничный каталог новой коллекции одежды On A
• Микросайт Audi A1
• Webbys Awards: лучшие сайты о красоте и косметике

Инфографика

• Значение цветов в различных культурах
• Что делают американские пользователи первым делом в интернете?
• Доменные имена — история и факты
• У кого больше всего серверов
• Интернет-магазин бижутерии Les Galantes

Статьи и переводы

• Пирамида стратегии в сети, или хорошо сбалансированная стратегия
• Правозащитники сформулировали права пользователей социальных сетей
• Порнография оказалась главным видом интернет-контента
• Сколько в России интернет-магазинов? Много ли людей ими пользуются? Как предпочитают платить?

No related posts.

Пирамида стратегии в Сети, или Хорошо сбалансированная стратегия

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

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

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

С этим всем пониманием давайте взглянем на то, что я называю «пирамида стратегии в Сети».

Пирамида стратегии в Сети

Пирамида стратегии в Сети

1. Наполнение

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

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

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

И вот еще несколько мыслей прежде, чем мы пойдем дальше:

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

Создание качественного наполнения для сайта — это сложный вопрос, и если вы хотите больше ознакомиться с этой темой, вы можете прочитать об этом в разделе «Стратегия содержания» (на сайте sixrevisions.com)

2. Удобство/дизайн

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

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

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

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

Сервисы опросов такие, как Zoomerang или Survey Monkey совместно со скриншотами могут быть быстрым способом для сбора нужной информации от аудитории.

Инструменты на подобие Usabilla помогут вам получить более конкретную обратную связь путем сочетания опросов и тепловых карт.

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

Некоторые простейшие средства и продуманные вопросы намного лучше, чем отсутствие оных. Внимание к этому шагу поставит вас впереди многих конкурентов.

3. SEO

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

Слишком много раз люди пытаются найти секрет, как поднять свой рейтинг (тИЦ, PR) в поисковых системах, но никогда не тратят время, чтобы улучшить наполнение своего сайта. Одним из реальных секретов SEO является создание хорошей базы с контентом соответствующим запросам. Опять же, давайте рассмотрим несколько вопросов для самопроверки:

• Используете ли вы в тексте ключевые слова, по которым пользователи ищут вас? Есть множество инструментов, которые помогут вам, в том числе Google Insights, Wordtracker и другие.
• Содержат ли ваш заголовки в тексте (H1, H2, H3) ключевые слова?
• Содержат ли заголовки страниц ключевые слова и отражают ли эти заголовки настоящую тему содержимого страниц?

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

4. Социальные сети

Наконец-то о приятном! Теперь, когда вы были вынуждены пройти путь через создание надежной основы из информативного наполнения, удобного интерфейса и SEO, мы готовы погрузиться в социальные сети.

Я предполагаю, что всем читающим эти строки уже известны такие сайты, как Facebook, Twitter, MySpace. И возможно вы уже имеете некоторый опыт использования инструментов для оптимизации своих усилий в области социальных сетей (Radian6, ScoutLabs, HootSuite и т.д.)

При этом всем, самым важным моментом является следующее — имейте долгосрочную стратегию для социальных сетей.

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

А у вас есть четко определенная стратегия для социальных сетей? Вот несколько пунктов, которые помогут вам:

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

5. Реклама с платой за клик (PPC)

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

Несколько заключительных мыслей

Может ли эта пирамида немного меняться в зависимости от ваших конкретных потребностей? Ну, конечно же. Если вы представляете малый/средний бизнес, продающий продукт для небольшой ниши на рынке, тогда SEO и PPC могут быть более важными для вас. Если вы блоггер, социальные медиа могут быть жизненно важной частью вашей стратегии. Эта пирамида не является жесткой, но основная мысль остается та же, независимо от ваших целей: позаботьтесь об основном и не позволяйте соблазнительному куску «десерта» отвлечь ваше внимание до тех пор, пока вы не позаботились о главном. Ваши пользователи (и возможно ваш кошелек) будут благодарны вам за это.

Перевод: Алексей Волков
Оригинал: The Web Strategy Pyramid: A Well-balanced Web Strategy

No related posts.

8 типов сайтов, которые нужно перестать делать

Помните комикс «Как веб-дизайн катится прямо в ад«? Автор(Мэтью Иннман) данного комикса выпустил еще один комикс о веб-дизайне и юзабилити — «8 websites you need to stop building» ,а мы его перевели. Смотрите перевод комикса под катом. Наслаждайтесь!

Кликнув по изображению, его можно увеличить.

8 типов сайтов, которые нужно перестать делать. (чтобы увеличить изображение — кликните по нему)

Мы перевели для вас комикс «8 websites you need to stop building«

No related posts.

WEB 2.0 для электронной коммерции

Социальные сети, провайдеры хостинга, блоги, видео сервисы и т.п. являются важной составляющей веб-пространства. Знаете ли вы, благодаря чему эти сервисы стали возможны? Это всё благодаря развитию Web 2.0.

Что мы подразумеваем под web2.0 ? Web 2.0 это технология, которая позволяет делиться информацией, создавать сервисы совместного использования (коллаборативные), сервисы с дружелюбным дизайном и юзабилити, быстрыми и интерактивным интерфейсом.

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

Как Web 2.0 влияет на электронную торговлю?

Блоггинг

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

Распространение видео: Всё чаще продавцы прибегают к помощи видео-сервисов. Видео — очень эффективно влияет на продажи. Загрузка, распространение видео на сайтах типа youtube, facebook и т.п. очень проста. Кроме того видео на вашем сайте повышает рейтинг для поисковых машин.

Совместный просмотр

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

Списки покупок и фотографии с информацией о товарах на фотографии

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

Отзывы клиентов

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

Вопросы и ответы

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

Мощь twitter

Пользователи могут задавать вопросы в своём твиттере. Это дает возможность отслеживать такие вопросы и оперативно отвечать на них. Также другие пользователи могут на них отвечать.

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

Мы перевели для вас статью «Web 2.0 for Web Ecommerce«.

No related posts.

Где пользователи ожидают увидеть наиболее часто используемые веб-объекты в корпоративных сайтах, новостных СМИ и интернет магазинах?

Во время проектирования интерфейсов крайне важно учитывать ожидания пользователей. Руководствуясь ожиданиями пользователей можно избежать множества ошибок, а эффективность взаимодействия может быть повышена. Это значит, что возникает необходимость знать, где пользователь ожидает обнаружить такие объекты, как поле поиска, кнопку возврата на главную страницу или навигационные элементы(меню, хлебные крошки). В ходе предварительно исследования в сети с 165 участниками, было выявлено три основных типа веб-сайтов: новостные порталы, интернет-магазины и корпоративные сайты. Эти объекты были использованы в основном исследовании, где приняло участие 516 человек. Им было предложено создать прототипы сайтов с помощью онлайн инструментов прототипирования. Анализ данных показал, что пользователи интернета имеют различные ментальные моделей для различных типов веб-сайтов (интернет-магазин, новостной портал, и корпоративные сайты). В основном они сходятся во мнениях. Эти ментальные модели устойчивы к демографическим факторам(например пол) и интернет «продвинутости». Эти знания могут быть использованы для построения веб-интерфейсов и улучшения юзабилити веб-сайтов.

Размещение объектов на страницах интернет-магазинов

Размещение объектов на новостных порталах

Размещение объектов на корпоративных сайтах

Консолидированная модель для страниц онлайн-магазинов

Консолидированная модель для страниц новостных порталов

Консолидированная модель для страниц корпоративного сайта

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

Примеры совпадения мнений по поводу размещения объектов на странице между веб-дизайнерами и обычными пользователями

Мы перевели для вас «Mental models for web objects: Where do users expect to find the most frequent objects in online shops, news portals, and company web pages?» «Interacting with Computers» Volume 22, Issue 2, March 2010
Источник данных: interruptions|net

No related posts.

Теория цвета для дизайнеров, часть 2: Понимание концепции и терминологии

Теория цвета для дизайнеров, часть 1
Теория цвета для дизайнеров, часть 2

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

Оттенок (Hue)

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

Примеры:

Основной цвет фона и некоторый текст на сайте Happy Twitmas ярко-красного цвета.

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

Красный цвет без примесей очень популярен в веб-дизайне.

Здесь в шапке использована смесь из нескольких чистых оттенков.

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

Цветность (Chroma)

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

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

Примеры:

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

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

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

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

Различия между уровнем цветности позволяют создавать приятные на вид градации.

Насыщенность (Saturation)

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

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

Примеры:

Здесь разные оттенки с различными уровнями насыщенности придают дизайну в целом сплоченный вид.

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

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

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

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

Значение/яркость (Value)

Этот термин также можно называть «яркость». Он отвечает за то, насколько оттенок светлый или темный. Светлые оттенки имеют более высокое значение. Например, оранжевый имеет большее значение яркости, нежели темно-синий или темно-фиолетовый. У черного цвета самый низкий уровень яркости, а у белого – высокий.

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

Примеры:

Использованное здесь высокое значение яркости желтого цвета хорошо выделяет его на темном фоне.

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

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

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

Человеческий глаз может распознавать различия между уровнями яркости даже у таких похожих оттенков.

Тональность (Tones)

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

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

Примеры:

Тона могут придать веб-сайту более утонченный вид.

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

Можно усилить тон, если прибавить больше серого вокруг него, например как сделано тут.

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

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

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

Тени (Shades)

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

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

Примеры:

В фоне сайта Джонатана Мура достаточно широкий ассортимент различных теней фиолетового (также присутствует немного осветлений в других частях).

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

Эффективная комбинация теней и окраски, особенно в шапке сайта.

Еще один фон дизайна, в котором используются тени (и немного осветлений) в виде градации с текстурой.

Смешиванием теней в текстуры, можно придать интересный вид веб-сайту.

— Подцветка (осветления / Tints)

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

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

Примеры:

На сайте Caio Cardoso можно увидеть вариации зеленых осветленных оттенков на фоне и в других элементах.

Осветленный синий оттенок на веб-сайте Фернандо Силанеса создает мягкий утонченный вид.

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

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

Осветленные оттенки смешанные вместе, создают утонченную градацию.

Заключение

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

• Оттенок (Hue) – (синий, зеленый, красный и так далее).
• Цветность (Chroma) – уровень цветности (уровень содержания примесей).
• Насыщенность (Saturation) – уровень отображения оттенка по соотношению слабый/сильный.
• Значение (Value) – уровень яркости цвета.
• Тональность (Tones) – уровень содержания серого оттенка в цветах.
• Тени (Shades) – уровень содержания черного оттенка в цветах.
• Подсветка (осветления / Tints) – уровень содержания белого оттенка в цветах.

Оригинал статьи: «Color Theory For Designers, Part 2: Understanding Concepts And Terminology»
Перевод от: coolwebmasters|com

No related posts.

30 примеров красивых сайтов, работающих на WordPress

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

В этом посте вы увидите веб-сайты, которые работают на WordPress. Коллекция состоит из 30 веб сайтов. Уверен, что для многих из вас в этом списке найдется что-то вдохновляющее.

Matt

Raduceuca

Octwelve

Pop Culture Tees

Design Disease

By Land Sea or Air

Reduce Tu Huella

The Pixel Blog

U.S.E. 19 Clothing

Work Awesome

Mark Forrester

Cognition

The Tangible Kingdom

Jean Ming

Web Designer Depot

Web Designer Wall

Nando Reis

Espira

Studio Img

Elastic Media

Dreamer Lines

Sean Johnson

An Idea

I Love Colors

Agami Creative

UGS Mag

20 Jours

Nathan Sanders

Smart Web Designs

Marchand deTrucs

Мы перевели для вас заметку «30 Examples of Beautiful Websites Powered by WordPress«.

No related posts.