Продолжаем изучать теоретические основы дизайна. Касательно статьи 9 принципов хорошего дизайна, мы пройдёмся подробнее по всем пунктам. Сегодня рассмотрим поподробнее пункт Приоритетность. Заранее оговорюсь, что подробное рассмотрение отдельного пункта может перекликаться с рассмотрением других пунктов и статьи в целом. Тем лучше для нас!
По мотивам http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/
Когда я складываю вместе отдельные части дизайна, то делаю это в два шага: расположение и полировка. При определении расположения я концентрируюсь на основных элементах страницы, так чтобы она имела некий конечный образ. Во второй фазе, полировке, я ещё раз прохожусь по дизайну и привожу в порядок цвета, типы, тени, уровни, - вычищаю всё, что можно. Посмотрим на это наведение глянца детально.
Краткое предисловие
В отличие от эффектов Photoshop, веб-дизайн нельзя создать по некому рецепту или алгоритму. Если вы посмотрите на наиболее выдающиеся дизайны, то заметите, что совсем не сложно воспроизвести их технически. Если вы любитель Photoshop, то сможете скорее всего даже воспроизвести такой дизайн в Photoshop слой за слоем. Трюк же заключается в том, чтобы создать такой дизайн без копирования кого-либо. Давайте рассмотрим некоторые аспекты создания таких уникальных и запоминающихся дизайнов.
Рассмотрим два созданных недавно сайта: Not By The Hour и его блог FreelanceSwitch. (Прим. НМ: Рекомендую, кстати, обратить внимание на первый пост по последней ссылке, 10 фраз, которые каждый фрилансер должен вычеркнуть из своей речи). Прежде, чем перейти к конкретным вещам, посмотрите, пожалуйста, ссылку:
Шаг 1 - Ясность
Линия толщиной в 1 пиксел помогает подчеркнуть разделение и усилить резкость. Фон обесцвечен для усиления ясности и подчёркивания картинки с сейфом. Небольшие тени и серый градиент выделяет текст.
Всё, что вы делаете на странице, непосредственно касается пикселей. Всё должно быть резко и ясно, то есть:
- Ясность текста
Здесь имеется ввиду сглаживание. В Photoshop вы можете управлять сглаживание так: Window->Character. В открывшейся панели вы можете выбрать None Sharp Crisp Strong. Вы можете поэкспериментировать для разных шрифтов и размеров. Я лично чаще всего использую Sharp, который иногда выравнивает, а иногда искажает пиксели. На картинке выше текст Making установлен в Sharp. - Выравнивание
На картинке выше между чёрной и тёмно-серой панелями добалена светло-серая линия толщиной 1 пиксель. Этот трюк подражает эффекту повешения резкости. Если вы хоть раз повышали резкость в фотографии, то заметили, что после применения фильтра Unsharpen у объекта фотографии появляются контрастные границы. Так и в дизайне, лёгкое подчёркивание границ делает дизайн резче. - Цвет
Цыетовая схема тоже может сделать дизайн резче. В данном случае я обесцветил фон, который был серо-зелёный и стал серым. В результате сейф зеленоватого цвета стал контрастнее, а вся картинка - резче. - Полировка объектов
А теперь задание для вас: пройтись по картинке и подумать, как можно сделать резче отдельные объекты, например, логотип, углы и т.д.
Обратите внимание на градиентный цвет текста. Рецепт очень прост: "Используется картинка в формате PNG (чистый CSS, никаких Javascript или Flash). Все, что нужно - это пустой тег <span> и фоновая картинка с CSS параметром position:absolute. Этот способ работает со следующими браузерами: Firefox, Safari, Opera и Internet Explorer 6...
...мы просто поместим в формате PNG с градиентом (с альфа прозрачностью) над текстом."
Ключевые места выделены красным:
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
Вот и все! Можете посмотреть демо.
Так как Internet Explorer 6 некорректно отображает PNG-24, нам нужно вставить специальный код для нормального отображения прозрачных картинок PNG в этом браузере (поместите его в любом месте между тегами <head>):
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->Вариант для любителей стандартов
Если вы хотите добиться строгого соответствия веб-стандартам, используйте метод :
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("<span></span>");
});
</script>Шаг 2 - Свет и тень
Градиенты и тени придают большую глубину дизайну и позволяют его элементам взаимодействовать между собой.
Градиенты, градиенты, градиенты... Можно сказать, что они являются отличительной особенностью дизайна Web 2.0. И, признаюсь, я тоже постоянно использую их в своих дизайнах. Посмотрите на картинку выше: я добавил градиентов для придания дизайну большей глубины.
По моему мнению, различие между печатным дизайном и веб-дизайном выражается как раз степенью глубины в дизайне. Например, печатный дизайн какой-нибудь брошюры, имеющий монотонные цвета всё равно будет выглядеть прекрасно из-за взаимодействия и отражения света от поверхности бумаги. На мониторе, однако, такой дизайн потеряет всю привлекательность. Я не хочу сказать, что вы не должны использовать монотонные цвета в веб дизайне! Но я заметил, что все дизайнеры печатных дизайнов совершают одни и те же ошибки при переходе к веб-дизайну:
- Неумение передать резкость и ясность дизайна.
При печатном дизайне вы вряд ли сможете сделать зум и модифицировать какие-то отдельные пиксели. Да и в напечатанном виде это всё равно не будет заметно глазу. Печать думает сантиметрами, а не пикселями. - Неумение намекнуть на глубину и вызвать визуальный интерес.
Градиенты не очень хорошо передаются печатью, но зато на эеране - просто праздник. То же самое касается теней и подсветок. И на экране они создают интересный визуальный эффект. Например, на картинке сверху мешки денег изначально были векторными картинками, окрашенными в монотонные цвета. Однако при нанесении незначительного градиента Burn Toolo'ом, они стали выглядеть более мягко.
Шаг 3 - Приоритетность
Приоритетность - это один из важнейших визуальных аспектов информационного дизайна, поскольку веб-дизайн касается расположения и представления информации пользователю.
Что я подразумеваю под приоритетностью? Приоритетность - это ответ на вопрос, что пользователь будет смотреть в первую очередь, а что потом и в каком порядке. Визуальная приоритетность - это смесь различных факторов:
- Размер
Очевидно, что элементы большего размера имеют приоритетность над элементами меньшего размера. Поэтому на картинке сверху сейф и заглавие будут рассматриваться в первую очередь. - Цвет
Посмотрите ещё раз картинку "До и после": там подзаголовки в области 4 (см. картинку чуть выше) были такого же тёмно синего цвета, как и "Hi there!". И поэтому между этими двумя областями не было большого различия, и было непонятно, какая из них была приоритетнее. Перекраска подзаголовков из области 4 в бежевый цвет придала им меньшую приоритетность в информационной иерархии. - Фон
Фоновый цвет и цвет вообще не имеют какого-то смысла сами по себе, но важно их взаимодействие. Например, если на странице всё в тёмных тонах, но присутствует какой-то белый объект, то, очевидно, пользователь обратит внимание на последний. На картинке ниже ясно виден котраст между светло-жёлтым и темно-серым. - Положение
Известно, что глаз просматривает область слева направо и сверху вниз. То есть элементы, расположенные вверху, имеют большую приоритетность, равно как и предметы, расположенные левее.
Размер текста и цвет создаёт приоритетность между элементами дизайна. Здесь размеры и цвета заголовков были изменены для придания дизайну большей ясности.
Шаг 4
Повторю в который раз: веб-дизайн - значит, пикселы - наше всё. На картинке выше хорошо видно, что такое градиент. На самом деле там три градиента и три однопиксельных линии.
Шаг 5
1 или 2-хпиксельный переход от фона к еле заметному градиенту нынче в моде. Имейте в виду!
Что такое web 2.0-подобный дизайн? На картинке выше показан простой эффект, когда вы создаёте 1 или 2-хпиксельную рамочку и небольшой градиент на фоне. Если вы раньше этого не замечали, то сейчас понаблюдайте за новомодными дизайнами. Этот эффект используется везде, где только можно. Но он всё равно не раздражает.
Шаг 6
Коричневое на коричневом, да ещё и обильным текстом создаёт впечатление неаккуратного дизайна. Жёлтое на сером - приятный контраст и чёткость.
На картинке выше видно, что в результате полировки может измениться даже информация на странице. Но в дизайне "до" информативный текст перегружал страницу. Поэтому в дизайне "после" он был заменен на метки контрастного цвета.
0 коммент.:
Отправить комментарий