|
|
Внимание к выравниваниюВ этом месте, я хочу показать, как я решила поместить основной текст там, где он есть, в отношении выравнивания. Выравнивание означает, что основной текст выравнивается в некоторой области. Можно выровнять его слева, и оставить "неровный" край справа, что является традиционным размещением. Или можно разместить текст по центру, или выровнять одновременно правый и левый край, или выровнять его правый край, а левый край оставить неровным. Я решила использовать традиционное выравнивание слева, когда буквы выравниваются по прямой линии слева. Но можно заметить, что основной текст сдвинут немного правее, чем подзаголовок, который содержит этот текст. Причиной такого выравнивания является логотип. Вот увеличенная иллюстрация на рисунке 10.8, которая поясняет, почему я приняла такое решение:
Так как логотип имеет не слишком выдающийся дизайн, я попыталась сохранить его размер небольшим. Кроме того, толщина гарнитуры шрифта Arial Black заставляет логотип выглядеть больше и более непропорциональным, чем любой другой элемент на странице. Хотя я его существенно уменьшила, я хотела бы, чтобы логотип был достаточно большим, чтобы соответствовать по размеру названию компании и их девизу, "Open Source Wikis", в пространстве, предоставляемом высотой логотипа. Можно видеть по красным линиям, которые помещены на иллюстрации выше, что название компании выравнивается по верху наклонного логотипа, а девиз размещается внизу черной буквы "W" логотипа. Взглянув вниз от первой буквы "W" в логотипе, вы увидите, что заголовок "The latest Wiki" выровнен с левой нижней точкой этой буквы. Так как логотип наклонный, то самая нижняя точка помогает указать на заголовок, расположенный ниже средств навигации. Фактически это отодвигает навигацию на второй план, так как заголовок такой же жирный, как и название компании. В этом месте я заметила, что гарнитура шрифта Georgia, выбранного для заголовка записи блога кажется немного слишком активной для этой области. Поэтому я решила изменить шрифт заголовков на шрифт без засечек Arial Black, который слегка отличается от Verdana, который используется в основном тексте, но не настолько, чтобы создать хаос. Делать выравнивание различных элементов дизайна страницы стало проще с появлением CSS. Хотя некоторые браузеры могут пытаться помешать вашим усилиям по выравниванию, во многих случаях использование точных точек в компоновке при размещении элементов будет работать. Именно поэтому можно также выровнять поле поиска по низу подзаголовка, или выровнять правую сторону этого поля поиска с правой стороной расположенной ниже формы — также, как было сделано в показанном выше примере. Можно было бы выровнять также основной текст с верхним левым углом логотипа и с заголовками, но показанный выше отступ позволяет читателю быстро просматривать заголовки и читать текст, который важен для читателя. При этом нужно сказать, что каждая Web-страница будет другой, и другой дизайн логотипа может потребовать совершенно другое выравнивание. Необходимо выровнять все важные элементы на странице таким образом, чтобы они выглядели естественно. Читатель не заметит, что вы столкнулись с этой проблемой (также как и клиент в большинстве случаев). Но в тот же самый момент, когда вы не уделите время для выравнивания на странице важных объектов, кто-то сделает замечание, что "что-то не совсем правильно". Смещение основного текста на небольшое расстояние создает также так называемое "белое пространство", или форму (иногда называемую корешковым полем) вокруг основного текста и любых других элементов, которое позволяет зрителю легко воспринимать один фрагмент текста относительно другого. Пространство слева от основного текста должно обычно задаваться аналогично пространству справа от основного текста (или любых изображений), чтобы можно было создать некоторый баланс в данном пространстве. Это белое пространство дает сайту некоторое "пространство для дыхания", чтобы он не выглядел слишком перегруженным. Внимательно посмотрите на Web-страницы, когда в следующий раз будете путешествовать в Интернет. Обратите внимание на страницы, которые кажутся вам хорошо спроектированными, или на те страницы, которые просто "кажутся правильными". Обратите внимание на выравнивание основного текста, заголовков, логотипов и других элементов на странице. Выровнены ли они? Плавно ли переходят они от одного элемента к другому? Возможно, что дизайнер выбрал время, чтобы проработать небольшие детали, такие как эти, чтобы сделать дизайн страницы менее важным, чем содержимое — что, во всех отношениях — является целью хорошего дизайна. Конечно, дизайн может вызывать некоторые проблемы в различных браузерах. Текст может не выравниваться вполне ровно в Safari, но он может выглядеть отлично выровненным в Opera или Firefox. Эта задача вполне разрешима, но только после выбора цветов для сайта. Некоторые из вас могут подумать, почему я не выбрала Arial Black для подзаголовков, а также для названия компании. Я решила остаться со своим обычным выбором Times New Roman, так как этот шрифт с засечками добавляет на сайт некоторый контраст, основное правило дизайна, которое добавляет на страницу некоторый интерес. Использование Arial Black везде на сайте для всех заголовков сделало бы этот сайт несколько скучным. Третий шаг: цвет Когда макет Web -сайта готовится для клиента, я обычно стараюсь придерживаться насколько возможно начального каркаса, который был разработан ранее, прежде чем снова показывать образцы клиенту. Когда возможно, я предпочитаю использовать для каркаса код, а не изображение. В этом случае можно добавить такие элементы как логотип, основной текст, и даже макетную рекламу, чтобы показать клиенту, как все будет выглядеть на окончательной странице. При такой законченной компоновке клиент не имеет иллюзий о том, как будет выглядеть страница со всеми предполагаемыми элементами. Затем клиент может принять решения о том, что можно добавить или удалить. Кроме того, когда я смогу показать клиенту Web -страницу на компьютере так, как она будет выглядеть в Web, клиент сможет наглядно представить, как страница будет выглядеть, если он посетит ее в реальном времени. Цвет является частью и объединяющим элементом этой установки "все на своем месте". Причина этого в том, что различные цветовые схемы могут полностью изменять настроение сайта, даже со всеми элементами находящимися на своем месте. Более того, я предпочитаю иметь минимальное количество цветовых образцов, так как слишком большое количество образцов может внести путаницу. В данном случае клиент имеет ограниченный бюджет, поэтому я предложила им ограничиться только одной цветовой схемой в качестве образца для работы. Когда в "Теория цвета" был представлен инструмент Color Scheme Generator II, я не упомянула, что в этом инструменте можно ввести шестнадцатеричное значение цвета, чтобы сгенерировать цветовую схему из конкретного цвета. Прямо под цветовым кругом имеется ссылка " Enter RGB " ("Введите RGB "). В нашем случае золотой цвет логотипа является самым сильным цветом, поэтому я ввела шестнадцатеричное значение (#eab304), чтобы посмотреть, что получится с таким выбором. Полученная монохроматическая схема была несколько монотонной, но контрастная цветовая схема была многообещающей. Эта схема содержит сине-фиолетовый цвет, с которым можно было бы поработать, так как тень позади логотипа также оттеняется синим цветом, как показано рисунке 10.9:
Используя показанные здесь цвета, я решила использовать основной золотой цвет логотипа в качестве фона для верхних средств навигации. Я использовала темно-синий цвет (почти сине-фиолетовый) #2b0da4 для ссылок (которые будут также подчеркнуты), и я использовала более светлый оттенок этого же синего цвета для фона рекламы. Можно видеть, как цветовые добавки изменяют внешний вид компоновки на рисунке 10.10:
На изображении выше можно видеть, что цвета будут для сайта слишком темными и "тяжелыми". Поэтому я уменьшила плотность в навигационной панели до 75%, и плотность цвета в области рекламы до 20%. Вы можете сразу видеть, что получилось, ниже на рисунке 10.11:
Уменьшение плотности цвета в панели навигации делает ее более согласованной с цветом логотипа. Уменьшение плотности цвета фона размещения рекламы сближает его с цветом ссылок. Так как реклама состоит из ссылок, то это уменьшение плотности и согласование с ссылками сайта является уместным. Тот факт, что добавлен цвет в качестве фона для рекламы является хорошим моментом — если используется служба рекламы, такая как Google Adsense, то вы узнаете, что Google предпочитает, чтобы реклама была выделена относительно основного текста — добавление цвета помогает удовлетворить этому критерию. Я использую также темный контрастный цвет #2B0DA4 для строки девиза, и это добавление помогает добавить синий контрастный цвет вокруг всей страницы. Хотя эта компоновка может выглядеть, как будто она была создана легко, я затратила некоторое время на подбор цветов из контрастной цветовой схемы для фона, на цвета для заголовков и на изменение несколько раз компоновки рекламы. С каждым изменением казалось, что цвета подавляют простую компоновку, поэтому я исключила их и осталась с черным цветом для всего текста, за исключением девиза. Хотя я могла бы использовать цвет "посещенной" ссылки, я решила, что лучший выбор состоит в сохранении простой двухцветной основы, которая будет легко принимать цветные изображения, не создавая цветового кошмара. С другой стороны можно видеть, что предварительное создание каркаса также может упростить работу — когда имеется готовая "карта" или архитектура, добавление цвета является в некоторой степени раскрашиванием "трафарета". Если вы придерживаетесь своей компоновки, то можно использовать эту компоновку для определения своего выбора. Кроме того, если сохранить ее простой, то дизайн может быть более элегантным в долгосрочном плане, а также более легко используемым и доступным. Имеется еще одна хорошая причина сохранить эту компоновку простой — внутренние страницы будут содержать фрагменты кода, и я использую моноширинный шрифт для этого кода, чтобы соответствовать принятой практике. Это еще одна причина, почему я решила использовать два различных шрифта без засечек, которые похожи по стилю. Применение моноширинного шрифта внутри этого сайта добавит достаточно шрифтового разнообразия, вместе c различными рекламными вариантами. Проверьте, что для заголовков и подзаголовков используются элементы заголовков (h1, h2, h3, и т.д.), а не атрибуты жирности (strong) или курсива (em). Использование элементов заголовков сделает сайт более доступным. Внешний вид этих заголовков можно изменять в таблице стилей (CSS). Необходимо заметить несколько вещей относительно приведенной выше страницы: · Я сохранила название компании вверху страницы черным цветом, так как это помогает распространить черный цвет в логотипе по верху страницы. · Я использовала выравнивание по центру вверху среднего столбца, чтобы привлечь внимание к средству регистрации. Так как форма для регистрации для подписки на рассылку новостей заполняет ширину этого столбца, то центрированный текст уравновешивается этим выравниванием, и заставляет основной текст казаться "принадлежащим" очертанию, созданному этой формой. · Центрированное выравнивание адреса внизу страницы в нижнем колонтитуле может казаться смещенным относительно центра, но я хотела, чтобы адрес стал частью области, которая несет основной текст для сайта. По мере развития сайта этот правый столбец заполнится дополнительными ссылками и, возможно, какими-то изображениями, и я хочу, чтобы эта область была полностью отделена от основного текста сайта. Это разделение предупреждает зрителей, что им нужно переместиться в правый столбец, если им нужно найти дополнительную информацию. Наконец, как завершающий штрих, я добавлю на страницу изображения. Если только клиент не имеет готовое изображение для использования, то выбранное изображение должно "подходить" схеме компоновки. Другими словами, попробуйте найти подходящее изображение, которое отражает выбранные для сайта цвета. В этом случае я решила добавить в компоновку немного юмора с помощью готовой фотографии компьютерного фаната. Одной из причин выбора этой фотографии является то, что человек на изображении смотрит прямо на зрителя, что означает, что это изображение может привлечь взгляд зрителя прежде чем что-то иное на сайте. Так как это изображение очень важно, то мне понравилось, что цвета на его рубашке кажутся близкими к золотому и синему цветам сайта. Наконец, его черные очки отражают тяжелые черные акценты в заголовках сайта. После всего этого я добавила в Photoshop синий отблеск в тени и желтый отблеск в яркие участки этой фотографии, чтобы в большей степени согласовать ее с общей цветовой схемой. Я также добавила строку тегов и отметку даты/времени, чтобы зрители могли видеть, насколько свежими являются записи блога. Все эти элементы, как можно видеть ниже, создают дополнительный " вес " и беспорядок на сайте. Это просто еще одна из причин, почему можно стараться сохранить жизненно важную информацию как можно более простой — зритель будет иметь больше чем достаточно, когда он посетит сайт в данном виде. Посмотрите на рисунке 10.12 ниже окончательный результат:
Web - дизайн хорош тем, что он не является дизайном печати. Печать навсегда, а Web - дизайн постоянно изменяется. Поэтому этот сайт может измениться со временем, чтобы отразить развитие группы. Ошибки можно исправить, а цвета можно модифицировать. Сказав об этом, лучше все-таки с самого начала иметь в сети продукт как можно лучшего качества. Такая цель, как создание наиболее качественного продукта, будет хорошо служить как репутации разработчика, так и репутации клиента. После создания других страниц все они проходят через последний этап своего создания, прежде чем снова попадают к клиенту.   ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...  Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...  Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...  ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
