Проектирование web-сайта

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9)  Модальные окна

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

10)  Минимализм

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. Оптимизация  контента сайта

 

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

Уникальным считается  только тот Контент, который не имеет  копий в Интернете. Для проверки уникальности существуют специализированные сервисы. Контент, который не является уникальным, не представляет практической ценности для посетителя и ранжируется поисковой системой на последних местах выдачи.

При размещении копированных и переводных материалов необходимо проставлять ссылки на источник информации, что приводит к возникновению ряда неблагоприятных факторов:

·  контент не ранжируется  высоко поисковой системой;

·  уменьшается удельный вес страницы за счет большого количества исходящих ссылок;

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

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

Этапы подготовки контента

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

·  определение целей  и задач;

·  подготовка семантического ядра;

·  сбор информации и  анализ конкурентов;

·  написание статей и их форматирование для улучшения  восприятия;

·  разработка таблиц, иллюстраций;

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

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

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

Правильно подобранное семантическое ядро — это набор ключевых фраз, по которым материал в поисковой системе будет находить потенциальный посетитель. Для этого используются специальные сервисы Яндекса, Гугла и Рамблера, которые показывают статистику частоты запросов определенного словосочетания. При подборе ключевых слов необходимо проводить анализ их конкурентности.

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

 

 

 

Заключение

В результате курсовой работы я разработала структуру сайта, который отвечает основным требованиям. Основная задача, которая была поставлена передо мной изначально, выполнена, я думаю. Как я уже говорила, большинство посетителей сбегает с Интернет-ресурсов, не пробыв на них и трёх минут, поэтому в проделанной работе я пыталась выстроить сайт таким образом, чтобы посетитель захотел не сбежать, а идти всё дальше и дальше, поэтому к совей работе я подошла со всей серьёзностью. Был продуман дизайн будущего моего творения, так как дизайн – это, можно сказать, лицо сайта: произведён анализ цветовой гаммы  и подобрано сочетание цветов, приятных глазу, читабельные и незамудрённые шрифты и т.д. Названия разделам и подразделам  придуманы так, чтобы пользователю было понятно то, куда он направляется, хоть имена и банальны, но зато понятны и не выпрашивают вопросов: «Что это?Куда?Зачем?». Был разработан  лёгкий и простой для восприятия макет страниц моего будущего творения. Читатель, заходя на информационный портал(а мой будущий проект является именно таковым), прежде всего зашёл за информацией, а не в поиске каких-то новых впечатлений в виде анимаций многочисленных, лишних деталей и надоедливой рекламы, поэтому моим лучшим другом тут является минимализм, я считаю, его одним из достоинств в моём сайте. 
Хорошая и прозрачная структура сайта, лёгкая навигация – признак хорошего тона, а навигационное меню – отражение структуры, поэтому огромное внимание я уделила именно элементам навигации, попыталась всё сосредоточить и выполнить таким образом, чтобы пользователь «не заблудился в трёх соснах». Для информационного типа на моём сайте достаточно интересной и необходимой информации для любителей кошек. С веб-сайта посетитель точно «не уйдёт с пустым багажом».

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

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

А в дальнейших моих планах создание сайта про собак, но это уже другая история.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение 1

 

 

 

Рисунок 13-Черновый  вариант главной страницы web-сайта

 

 

 

 

 

 

 

 

 

 

Список использованной литературы

 

1.Смирнова,И.Е. Начало Web-дизайна.- Спб.:БХВ – Петербург,2005.-256с.:ил.

2.Евсеев,Д.А. Web-дизайн в примерах и задачах: учебное пособие/ Д.А.Евсеев,В.В.Трофиомв; под ред. Трофимова.- М.: КНОРУС,2010.- 272с.

3.Мелихова,Л. Интернет.Энциклопедия.-СПб.:ЗАО “Питер Бук”, 2008.-528с.:ил.

4.Муртазин,Э.В. Интернет. Учебник/Муртазин Э.В.-М.:ДМК,2006.-416с.:ил.

5.Кэмпбел,Марк. Строим Web-сайты. Дизайн.- М.:Изд-во ТРИУМФ, 2010.-480с.:ил.-(Серия Garage)

6.Бикнер,К. Экономичный Web-дизайн.-М.:НТПресс, 2010.-248с.:ил.-(Школа Web-мастерства)

Создание Web-страниц и Web-сайтов. Самоучитель.Учебное пособие.-М.:Издательство Триумф,12010.-496с.:ил.

7.Замятин,Ю.Ю. Создаём, программируем, шлифуем и раскручиваем Web-сайт: быстро и легко.-М.:Лучшие книги,2010.-272с.:ил.+CD-ROM-(Быстро и легко)

8.Борисенко,А.А. Web-дизайн. Просто как дважды два .-М.:Эксмо,2010.-320с.-(Просто как дважды два)

9.Сырых,Ю.А. Современный веб-дизайн. Рисуем сайт, который продаёт.-М.:ООО» И.Д.Вильямс», 2010.-304с.:ил.

10.Гаретт,Дж. Веб-дизайн: книга Джесса Гаретта. Элементы опыта взаимодействия.-СПб.:Символ-Плюс,2010.-192с.:ил.

11.Зельдман,Д. Web-дизайн по стандартам.-М.:НТ Пресс,2010.-248с.:ил.-(Школа Web-мастерства).

12.Кирсанов,Д. Веб-дизайн:книга Дмитрия Кирсанова – СПб:Символ – Плюс,2006. - 376с.:цв.,ил.

13.Молотон Л. Покупка первого сайта. Пример из жизни// Web-дизайн. Ежемесячное издание для веб-мастеров. – 2010. - №3(63) – С.22-23

14.Розенфельд Л. Восходящий анализ-поиск по сайту// Web-дизайн. Ежемесячное издание для веб-мастеров. – 2009. - №12(60) – С.7-11

15.Каушник А. Анализ поиска по сайту: просто, эффективно, революционно// Web-дизайн. Ежемесячное издание для веб-мастеров. – 2009. - №12(60) – С.17-20