Курсовая работа: Проектирование web-сайта "Бойцовые собаки – кто они?"

·  второстепенная страница: светлый фон (его я выбрала для того, чтобы легче читался текст, и давал сформироваться собственному мнению читателя), красные заголовки – напоминают об агрессии;

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

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

5. Декомпозиция макета на структурные блоки и модули

5.1 Разработка модульной сетки на основе утвержденного макета

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

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

Наиболее распространенными модульными сетками являются:

1)  Одноколонная сетка

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

2)  Двухколонная сетка.

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

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

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

3)  Трехколонная сетка

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

Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. Возвращаясь к главной странице сайта deviantart.com, приведем более детальную модульную сетку. Отдельные блоки выделены разным цветом. К недостаткам трехколонной сетки относится достаточная сложность верстки макета. Чтобы получить нужный результат приходится иной раз затратить много времени на создание стилевого файла и отладку документа в разных браузерах.

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

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

5.2 Разработка руководства по стилю

Идет время и меняется дизайн web-страниц, он становится смелее, ярче, интереснее.

1)  Стилизованная и негабаритная графика

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

2)  Эскизный / рисованный дизайн

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

3)  Заглавная и неоднотонная типографика

Заглавные шрифты являются относительно новыми в веб-дизайне, но они уже более 200 лет используются в средствах массовой информации. Раньше, склоняясь к правилам юзабилити, дизайнеры боялись использовать разновидность шрифтов, размер и все его заглавные буквы. Соответственно, здесь нет места хаосу, должен соблюдатся порядок и правила типографики, но согласитесь, сайт гораздо интересней и внушительней выглядит с правильно подобранными 2-3 заглавными шрифтами. Идея: данная тенденция используется для того, чтобы смело выражать контент и эффективно доносить до пользователя необходимые мысли.

4)  Типографика

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

5)  Одностраничный дизайн

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

6)  Большие изображения

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

7)  Фокусы с перспективой

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

8)  Интерактивный / интуитивный дизайн

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

Страницы: 1, 2, 3, 4, 5, 6, 7, 8