Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

1.4.2. Лендинг (одностраничник)

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

1.4.4. Промо-сайт

1.4.5. Сайт-автоворонка

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

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

Рис. 27. Информационный сайт Избиркома

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

2.1. Новостные ресурсы.

2.2. Статейные сайты.

2.3. Блоги.

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

Blog, web-log, блог, веб-журнал – формат интернет-проекта, характеризующийся высокой степенью участия личности автора (авторов) и относительно частыми, регулярными обновлениями контента. Предположительно первым веб-журналом был блог Тима Беренса Ли, созданный в 1992 году. С появлением общедоступного интернета, блоги стали популярны у миллионов пользователей. Первой платформой, сервисом для создания персональных блогов, считается LiveJournal или «Живой Журнал», существующий с 1999 года.

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

По статистике, корпоративный блог, имеющий в своем каталоге более 400 постов, привлекает в 4 раза больше потенциальных клиентов для компании, чем блог с числом статей менее 100.

Такую же задачу выполняют и статейные сайты, способствующие продвижению бренда за счет интересных авторских статей.

3. Социальные сайты:

3.1. Соцсети (Вконтакте, Одноклассники и т.д.).

3.2. Видеохостингни (например, RUTUBE).

3.3. Форумы.

3.4. Сайты знакомств.

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

4. Трафиковые сайты:

4.1. Крупные информационные порталы.

4.2. Агрегаторы и доски объявлений.

4.3. Варезники.

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

4.4. Онлайн-кинотеатры.

4.5. Справочники.

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

5. Веб-сервисы:

5.1. Почтовые системы.

5.2. Хостинги.

5.3. Онлайн-инструменты.

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

Многие организации используют для управления несколько программных систем. Различные программные системы часто нуждаются в обмене данными друг с другом, и веб-сервис – это метод связи, который позволяет двум программным системам обмениваться этими данными через Интернет. Например, сайт хостинга timeweb.com, почтовый сервис mail.ru.

6. Разное:

6.1. Поисковики (например, поисковая система Яндекс).

6.2. Каталоги (krasnodar.cataloxy.ru – список фирм и организаций Краснодара).

Рис.28. Поисковая система Яндекс

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

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

Глава 4. Этапы разработки сайта

На форуме по поиску работы:

– Всем привет! Я разработчик сайтов и в данный момент свободен для любых проектов! Если вам нужен сайт-визитка, одностраничник (лэндинг), или интернет-магазин, – пишите, – с удовольствием помогу вам с вашими проектами. Скидку гарантирую!

– Не знаю, что вы там делаете, но мне нужен сторож на автостоянку, 2/2. В будке есть компьютер – сможете там своей фигней заниматься.

Анекдот из сети Интернет

В этой главе:

1. Предварительные этапы

2. Прототип

3. Веб-дизайн страниц

4. Дизайн мобильной версии

5. Подготовка дизайна сайта к вёрстке

6. Вёрстка и реализация сайта, наполнение контентом

7. Запуск сайта

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

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

Этапы разработки сайта:

1. Консультация со специалистом. Покупка домена.

2. Составление технического задания на сайт.

3. Изучение темы.

4. Анализ сайтов конкурентов.

5. Создание базы образцов сайтов (ссылки, скриншоты и дизайн целиком).

6. Составление структуры сайта (внутренней и внешней).

7. Прототип сайта.

8. Веб-дизайн.

9. Подготовка дизайна сайта к вёрстке.

10. Вёрстка сайта на конструкторе или передача веб-дизайна программисту.

11. Наполнение сайта контентом.

12. Проверка сайта на ошибки, запуск сайта.

1. Предварительные этапы

Консультация

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

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

Сбор семантики для SEO

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

Приобретение доменного имени

Что нужно от заказчика в первую очередь, еще до разработки прототипа и сайта:

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