Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

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

Hand drawing style

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

Если же Вы не видели первой части статьи, то привожу на нее ссылку: «Рукописный и рисованный стили в современном веб-дизайне«

Что нового?

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

Умеренное использование рукописного стиля

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

Hand drawing style

Джефф Сэрмиентэ объединил рукописный и ретро стили в одном. Только посмотрите, как превосходно смотрится его сайт…

Гарнитура, имитирующая рукописные символы набирает популярность

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

Hand drawing style

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

Основные ошибки юзабилити, связанные с использованием рукописного стиля

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

Элементы веб дизайна

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

Элементы веб дизайна

Элементы веб дизайна

Помимо этого ссылки оформлены по-разному: где-то они черные, где-то синие, где-то имеют эффект при наведении курсора, а где-то не имеют оного. Данная стратегия недопустима.

Элементы веб дизайн

Следующим сайтом будет Omnia.ae (на скриншоте выше). На данном сайте рукописным стилем оформлен простейший элемент сайта — радио кнопка. Конечно. решение оригинальное и очень красивое, но с точки зрения юзабилити лучше этим не увлекаться и сделать этот элемент в простом стиле.

Современные дизайны сайтов

Современные дизайны сайтов

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

Теперь же давайте перейдем к конкретным примерам рукописного стиля оформления!

1. Рукописный стиль оформления в логотипах и хедерах

Логотипы

Современные дизайны сайтов

Рукописные логотипы

Рисованные элементы в веб дизайне

Хедеры

Рисованные элементы в веб дизайне

Проблема стиля в веб дизайне

Проблема стиля в веб дизайне

2. Самостоятельные элементы

Тизеры, Слоганы

Проблема стиля в веб дизайне

Стили сайта

RSS кнопки

Стили сайта

Стили сайта

Поля ввода

Стили сайта

Hand drawing style

Иллюстрации

Hand drawing style

Hand drawing style

Индикаторы загрузки

Hand drawing style

Элементы веб дизайна

Заголовки

Элементы веб дизайна

Элементы веб дизайна

Элементы веб дизайн

Современные дизайны сайтов

Современные дизайны сайтов

Современные дизайны сайтов

Фоновые изображения

Рукописные логотипы

Рисованные элементы в веб дизайне

Рисованные элементы в веб дизайне

3. Рукописный стиль оформления в навигации

Проблема стиля в веб дизайне

Проблема стиля в веб дизайне

Проблема стиля в веб дизайне

Стили сайта

Стили сайта

Стили сайта

Стили сайта

Hand drawing style

4. Умеренное использование рукописного стиля оформления

Hand drawing style

Hand drawing style

Hand drawing style

Элементы веб дизайна

Элементы веб дизайна

Элементы веб дизайна

Элементы веб дизайн

Современные дизайны сайтов

Современные дизайны сайтов

Современные дизайны сайтов

Рукописные логотипы

Рисованные элементы в веб дизайне

Рисованные элементы в веб дизайне

Проблема стиля в веб дизайне

Проблема стиля в веб дизайне

Проблема стиля в веб дизайне

Стили сайта

Стили сайта

Стили сайта

5. Глобальное использование рукописного стиля оформления

Стили сайта

Hand drawing style

Hand drawing style

Hand drawing style

Hand drawing style

Элементы веб дизайна

Элементы веб дизайна

Элементы веб дизайна

Элементы веб дизайн

Современные дизайны сайтов

Современные дизайны сайтов

Современные дизайны сайтов

Рукописные логотипы

Рисованные элементы в веб дизайне

Оригинал статьи: Hand-Drawing Style In Modern Web Design — Volume 2



Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: