Weber Автор  мая 27, 2017

Советы, как добавить реализма в дизайн ваших сайтов.

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

Тени

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

как добавить реализма в дизайн ваших сайтов

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

как добавить реализма в дизайн ваших сайтов

Сайт Грэга Ньюмана(Greg Newman) может быть также использован для текстур, но я хотел отметить область с Датой и Комментариями в его сообщениях. Он использует светлый фон с закруглёнными краями и тенью, получается словно потертая бумага немного отклеивается.

Вот пример использования подобного кода :

 

-webkit-box-shadow: 5px 5px 2px #555;
-moz-box-shadow: 5px 5px 2px #555;
-o-box-shadow: 5px 5px 2px #555;
box-shadow: 5px 5px 2px #555;
padding: 5px 5px 5px 15px;

 

Наслаивание

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

Советы, как добавить реализма в дизайн ваших сайтов

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

Советы, как добавить реализма в дизайн ваших сайтов

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

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

Глубина резкости

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

Советы, как добавить реализма в дизайн ваших сайтов

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

Советы, как добавить реализма в дизайн ваших сайтов

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

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

Текстуры

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

Советы, как добавить реализма в дизайн ваших сайтов

Про сайт Good Bytes и говорить не придется — вы сами все поймете. С большим количеством текстур на сайте, мне просто хочется дотронуться до экрана, чтобы почувствовать какого это.

Советы, как добавить реализма в дизайн ваших сайтов

Сайт Антона Пека (Anton Peck) темный, угрюмый и действительно уникальный. Уделено много внимания деталям и это чувствуется. Не могу сказать ничего больше — просто наслаждайтесь.

Есть много мест, где можно найти отличный текстуры; просто посмотрите все эти сайты или сами поищитевы обязаны будете найти что-то!

1px-ные линии

Слишком много используют? Может быть. Эффективно? Абсолютно. «1px-ная линия» это использование двух однопиксельных линий, одна поверх другой с контрастными цветами, что заставляет линию выглядеть словно вдавленную. Это визуально более эффектно, чем просто один матовый цвет, ведь это выглядит как будто есть свой источник света сверху и несколько напоминает 3-D. Вариации этой техники могут также быть использованы с разными вещами, например, с кнопками, чтобы выделить края и сильнее их выделить из фона.

Советы, как добавить реализма в дизайн ваших сайтов

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

Советы, как добавить реализма в дизайн ваших сайтов

Если вы не видели Launchlist, то обязательно сделайте это. Сайт красивый, удобный и остроумный в одно время. Сказано достаточно.

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

Вдавленный/Впечатанный текст

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

Советы, как добавить реализма в дизайн ваших сайтов

У Masswerks простой, аккуратный дизайн, который использует затененный текст CSS3 для создания вдавленного текста. Это стильный элемент для не менее стильного сайта.

Советы, как добавить реализма в дизайн ваших сайтов

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

color: #000;
font-size: 32px;
text-shadow: 0px 1px 1px #bbb;
background:#555;
padding-left:10px

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

3D/Согнутая лента

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

как добавить реализма в дизайн ваших сайтов

Сайт Баптистской Церкви Хилл Каунтри (The Hill Country Baptist Church) очень яркий и бросается в глаза — не совсем то, с чем ассоциируется церковь. Посмотрите на меню навигации на картинке, а теперь отправьтесь на сайт и посмотрите все эти 3D-эффекты на сайте.

как добавить реализма в дизайн ваших сайтов

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

В заключение

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

Перевод статьи Essential Tips to Add Realism to your Designs

Добавить комментарий


Защитный код
Обновить

Top