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

Игорь Мальцев

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

Эх вы, городские! Жизни не знаете?! А тут… цельное лето: утром покос, вечером надои, то корова опоросится, то куры понеслись… А еще вишня взошла! Свекла заколосилась! А ежели дождь во время усушки, а?

(С) «Возвращение блудного попугая»

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

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

Как ни крути, придется разбираться… хотя…

Если Вы готовы прямо сейчас, ответьте на перечисленные ниже вопросы:

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

По цели создания выделяют следующие типы сайтов:

Некоммерческие

Коммерческие

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

По доступности пользователям их условно можно разделить на:

Открытые

Полузакрытые

Закрытые

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

По функциональности выделяют следующие типы сайтов:

Статичные

Динамические

Будет ли информация на вашем сайте периодически изменяться? И как много и часто ?

В зависимости от размера и качества аудитории выделяют следующие типы сайтов:

Узконаправленные и тематические

Интернет-порталы

Предполагаете Вы обращаться к специализированной категории или освещать только определенные темы?

По авторству выделяют следующие типы сайтов:

Корпоративные

Личные (визитки, домашние страницы и т. д

Групповые

Чьи интересы будет отображать Ваш сайт? К какому виду Ваш сайт предположительно ближе по сути?

Информационные сайты.

Одно тематический или разно тематический информационный сайт

Новостной сайт

Блог

Сайты корпоративной направленности.

Сайт-визитка

Корпоративный сайт.

Корпоративный ПОРТАЛ

Сайт-портфолио.

Коммерческие сайты.

Сайт-витрина

Промо-сайт

Лендинг

Интернет-магазин

Социальные проекты.

Форум

Социальные сети

Различные веб-сервисы.

Сайт-сервис

Каков будет дизайн Вашего сайта

Основной цвет сайта

Как Вы можете обозначить дизайн своего сайта – темный, светлый, фиолетовый?

Цветовая гамма

Есть ли у Вас фирменный стиль, который Вы хотели бы использовать при создании сайта? Логотип, фирменные цвета? Какие цвета и их сочетания Вы хотели бы использовать для Вашего сайта?

Графическое оформление

Чистый стиль.

Стандартный стиль.

Художественный стиль.

Каково возможное соотношение графики и текста на своем сайте Вы хотели бы видеть?

Верстка

Какой тип расположения материалов Вы предпочитаете? Например, количество колонок, др. пожелания… резиновая адаптивная табличная, блочная верстка?

Навигация

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

Какие виды меню изволите? Горизонтальное, вертикальное? выпадающее, раскрывающееся?

Плотность

Будет ли на Вашем сайте предусмотрена мобильная версия для мобильных устройств? Тогда нужно больше пространства… Насколько плотной должна быть верстка сайта? Ваши пожелания…

Шрифт

Какие типы шрифтов Вы предпочитаете видеть на вашем сайте? А для заголовков?

Тематика

К какой тематике Вы отнесли бы Ваш сайт?

Веб-типографика

Какое графическое оформление на сайте необходимо разработать дизайнеру – иконки, заставки, иллюстрации, стили заголовков, таблоидов? Перечислите и опишите…

Стиль дизайна сайта

Какой стиль один или несколько из нижеперечисленных наиболее привлекателен для Вас?

Стиль «Минимализм» Минимализм

Дизайн в стиле «Flat»

Почти плоский дизайн

Стиль «Metro» (Карточный стиль)

Техдизайн в вебе

Классический стиль

Бизнес-стиль

Информационный стиль дизайна

Газетный стиль

Журнальный дизайн.

Художественный стиль

Ретро-дизайн (винтажный стиль).

Плакатный стиль «мондриан»

Готический или органический

Хипстерский стиль ? гранж

Панковский стиль

Футуристический стиль

Мультипликационный стиль

Техника «ручного» рисунка

Бизнес-стиль

Промо-стиль

Стиль Web 2.0

Веб-дизайн в стиле флеш

Шаблон сайта

Вам обязательно нужна разработка уникального дизайна с нуля или Вы не желаете «изобретать велосипед» и воспользуетесь готовым шаблоном?

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

Мне достаточно готового шаблона из библиотеки дизайнера

Я буду использовать шаблон, но мне хотелось бы изменить его за счет доработки -изменения цветов, стилей заголовков и пр…

Управление сайтом

Хостинг

Нужна ли Вам помощь разработчика в подборе, регистрации и настройке хостинга?

Мне нужно будет подобрать, зарегистрировать и настроить Хостинг

У меня уже есть аккаунт на хостинге (дать данные доступа к аккаунту, пароли и логины)

Регистрация домена

Мне нужно подобрать и зарегистрировать доменное имя для моего сайта

У меня уже есть Доме́нное и́мя для сайта (дать данные доступа к аккаунту, пароли и логины)

Система управления сайтом CSM

Нужна ли Вам система управления сайтом CSM (для динамического типа сайта)? Если Вы предпочитаете какую–то определенную систему укажите ее.

Как Вы предполагаете управлять административной частью Вашего сайта: дополнять, обновлять информацию?

Поручу квалифицированному специалисту

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

Буду делать самостоятельно

Заключу отдельный договор с разработчиком

Оцените уровень подготовки свой или Вашего специалиста-того, короче, кто будет сайт администрировать

Обладает знаниями языков программирования HTML, CSS, JS

Имеет навыки работы с сайтами (оценка от 1 до 10)

Имеет навыки работы с компьютером на уровне (оценка от 1 до 10)

Функциональные компоненты

Какие Вам могут пригодиться функциональные компоненты (Отметьте перечисленные, при необходимости – дополните с описанием свойств…)

размещение статей с выбором разделов и подразделов

отображение новостей в ротации (в блоках со сменой материалов)

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

слайдеры, ротаторы

интеграция видео, аудио

галерея фото

системы поиска, расширенного поиска, фильтрации по характеристике или теме

облако тегов

блок онлайн-консультации

система «вопрос-ответ»

тикеты (интерактивные билеты) техподдержки

проведение тестов с оценкой знания пользователей

заполняемые формы, калькуляторы

опросы

комментарии

книга отзывов

форма отправки сообщений на эл почту

форум

расширенная авторизация

личный кабинет пользователя

авторизация через соцсети

социальные кнопки

магазин

каталог товаров

корзина

интеграция платежных систем

виджеты погоды, курсов валют, и т.п.

показ баннеров, рекламы

Какие Вам могут быть нужны дополнительные компоненты, обеспечивающие перечисленные ниже функции (Отметьте перечисленные, при необходимости – дополните с описанием свойств…)

защита сайта

защита входа в админку

защита контента от копирования

создание резервных копий сайта

сбор статистики и аналитики сайта

сео-модули и плагины для повышения индексирования сайта

подключаемые ленты новостных каналов rss

возможность обновления компонентов сайта

генератор карты сайта

интерактивная карта (google, yandex, 2gis)

Доработка контента

Возможно, Вам будет нужна помощь в проработке контента сайта (обработка текстов, фотографий и пр.) Чтобы понять какая будет нужна помощь и в каком объеме – отметьте, как Вы будете предоставлять готовые материалы для наполнения контента сайта

Я предоставлю готовые материалы

Мне нужно будет помочь их отредактировать

Только отформатировать под требования веб

Мне нужна будет помощь специалиста

журналиста,

фотографа,

сео-специалиста

копирайтера

журналиста

иллюстратора

Дополнительные услуги

Какая помощь со стороны разработчика и в каком объеме потребуется Вам для работы с проектом? (отметьте, дополните, прокомментируйте)

регистрация сайта в поисковых системах, каталогах

подготовка алгоритмов работы с сайтом – выполнение типовых задач

техническое обслуживание сайта

администрирование сайта

создание страниц групп в соц. сетях и интеграция сайта с ними

внешняя/внутренняя оптимизация сайта

Собственно, вот…

Ну что ж, если Вы ответили на все вопросы… и как говорил классик «Ну, если Вы больше ничего не хотите…», я рад… и книга, собственно, уже достигла цели с которой была написана… Тогда до новых встреч и успехов! Получившееся у Вас в результате ответа на вопросы краткое тех. задание отсылайте разработчику вместе с материалами сайта

Ну, а если есть что сказать, пишите на мой адрес [e-mail] Обсудим…;) Буду рад уточнениям, дополнениям, улучшениям и конструктивной критике.

Если нет, читаем дальше

Вместо «здрасьте»… или за что я написал эту книгу

Как возникла необходимость в этой книге? Да очень просто…В своей ежедневной практике я сталкиваюсь с тем, что, обращаясь ко мне за помощью: «Мне нужен сайт», девять из десяти заказчиков в ответ на простой вопрос «…хорошо, какой именно сайт Вам нужен?» впадают в благородную раздумчивость и начинают вращать глазами, глядя в потолок…В этой ситуации нет ничего постыдного – Вы прекрасно можете разбираться в торговле, быть великолепным строителем или уникальным ресторатором, но… невозможно охватить все. И Вы совершенно не обязаны разбираться в веб-дизайне и программировании. Но! Вот Вам НУЖЕН САЙТ…ибо время неумолимо диктует необходимость присутствия в виртуальном пространстве интернет…Потому Вы и пришли к специалисту, который должен помочь, а тот, мерзавец, начинает задавать неудобные вопросы…Конечно, он может сделать сайт, предвосхищая Ваши потребности и пожелания, но это совсем не значит, что результат будет именно тот, который Вы «загадали». Ведь Вам нужен не просто сайт, а тот, который будет эффективным инструментом Вашего уникального бизнеса. Потому стоит, наверное, потратить некоторое количество времени «на разобраться». Ведь Вам предстоит сформулировать свои пожелания, а правильно сформулированная задача есть половина успеха…

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

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

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

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

Существуют две возможных ситуации, с которыми Вы можете столкнуться если Вы решили заказать сайт:

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

Вы знаете, какое содержание Вы хотите видеть на сайте, и у Вас в голове есть структура сайта, но Вы не знаете, как это осуществить.

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

Шаг 1. Анализ ситуации

Проанализируйте существующие сайты и найдите примеры для подражания

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

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

Кроме поиска примеров для подражания полезно будет конструктивно проанализировать сайты конкурентов, оценить их сильные и слабые стороны. Или просто похожие по направлению проекты и задуматься над вопросом «Что придаст моему сайту уникальность? Чем мой сайт будет отличаться?» Разумеется, в лучшую сторону…

Выберите 3-5 наиболее удачных примеров, и постарайтесь оценить, что Вам понравилось или не понравилось в этих сайтах. Попробуйте понять почему. Если Вам понравился дизайн, то подумайте, чем конкретно он хорош? Обратите внимание также на структуру этих сайтов (разделы и подразделы) и функционал (есть ли там какие-то интерактивные сервисы как: комментарии, регистрация, поиск по параметрам и т. д.). Обратите внимание на качество подачи информации. Насколько детально описаны товары и продукция, есть ли фотографии, статьи примеры по теме и т. д. Попробуйте все это проанализировать с точки зрения, что хорошо, а что плохо именно для Вас. Отберите хорошие качества дизайна, структуры и функционала, которые хотелось бы реализовать в Вашем проекте. по четырем направлениям: функционал, структура, дизайн, информация.

Итог работы

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

Шаг 2. Функционал сайта

Определите цели создания, тему, аудиторию сайта

Теперь, когда Вы сделали анализ, Вам начинают в голову приходить конструктивные мысли и, как правило, на этом этапе происходит построение модели будущего сайта. Сайта еще нет, но мы уже точнее понимаем каким ему предстоит стать.

На этом шаге постарайтесь ответить на вопросы:

Для кого Вы делаете сайт? Кто ваша аудитория. Старайтесь как можно уже сформулировать. Более узкая аудитория всегда более целевая. Если это бизнес аудитория, то какие именно типы бизнеса, какие сотрудники. Постарайтесь понять, что для этих людей будет важно. Если у Вас несколько аудиторий: клиенты, партнеры, инвесторы – расставьте приоритеты и сделайте акцент на главном. Это не значит, что остальных Вы проигнорируете, но Ваша работа должна быть направлена на главную группу.

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

Чей это сайт? Это сайт предприятия, группы предприятий, информационный сайт, сайт по определенному продукту и т. д. Постарайтесь на этом этапе определить тему как можно более узко. Например, если делаете сайт компании, то не добавляйте по ходу идеи типа: а давайте тут еще расскажем про наш второй бизнес и т. д. Глобализм погубит…

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

Определите функциональные потребности сайта

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

Имиджевая функция отвечает за формирование образа владельца сайта среди интернет – пользователей. Главную роль при этом играет оформление ресурса. Зачастую, это фирменный стиль компании, который обусловлен многими факторами, начиная от профессионализма персонала и заканчивая прочими мелочами.

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

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

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

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

Впрочем, а давайте разберемся с начинкой этого «пирога» несколько более подробно. И для начала определимся с терминологией. Нам нужно определить к какому типу Ваш сайт будет наиболее близок. Классифицировать сайт по типу, к которому он принадлежит и определить его вид. Зачем? Да затем, что исходя из этой классификации мы сможем более точно определить какой же функционал нужен Вашему сайту для решения задач, которые Вы перед ним ставите… Ибо, как с автомобилем – если внедорожник, значит повышенная проходимость, мощный мотор и т. д., если спорткар – хорошие ходовые качества, маневренность и управляемость…Так же вот и с сайтом…

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

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

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

Ознакомьтесь с классификацией сайтов по типам

По цели создания выделяют следующие типы сайтов:

Некоммерческие

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