fbpx

Структура веб-сайта

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

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

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

Анализ веб-сайтов конкурентов

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

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

Прототип веб-сайта

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

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

Можно нарисовать прототип от руки. Если же вам предстоит согласовывать прототип с коллегами или заказчиком а затем вносить правки, то стоит использовать графический редактор, например Adobe Illustrator, Visio или онлайн-инструмент вроде draw.io .

Если дальше вам предстоит передавать прототип дизайнеру – сбоку от блоков прототипа можно добавить комментарии по функционалу и графической реализации.

Советы по разработке прототипа вы можете найти в нашей статье о разработке лендинга.  

Текст для веб-сайта

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

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

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

Дизайн главной страницы веб-сайта

Теперь самое интересное – пора объединить вместе ваши визуальные идеи, прототип и текст. Учитывайте основные принципы дизайна при отрисовке веб-страницы:

Выберите цветовую гамму для веб-сайта

Оттолкнитесь от вашего логотипа и фирменного стиля – используйте в дизайне веб-сайта ваши фирменные цвета. Выберите основные цвета (для фона, основного текста) и акцентные цвета (для заголовков, кнопок, плашек, иллюстраций и тд.) Акцентных цветов может быть от одного до трех.

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

Поработайте над типографикой веб-сайта

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

Можно подобрать все шрифты из одной гарнитуры – например начертание Regular для основного текста и Bold для заголовков. Или же можно подчеркнуть контраст, используя шрифт без засечек для текста и шрифт с засечками для заголовков.

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

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

Композиция веб-страницы

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

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

Верстка, программирование и наполнение веб-сайта

После того как дизайн веб-сайта создан, доработан и утвержден, осуществляется верстка (с использованием html разметки и таблицы стилей CSS) и установка сверстанного шаблона веб-сайта на движок. Наиболее популярные бесплатные CMS (content management system или движки): WordPress, Bitrix, Drupal, Joomla.

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

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

Предыдущая запись
Комплекс услуг по разработке и продвижению веб-сайта
Следующая запись
Как спроектировать лендинг

Закажите разработку и продвижение веб-сайта.

БЕСПЛАТНАЯ аналитика конкурентов – в ПОДАРОК!

Пожалуйста, выберите интересующую Вас услугу (обязательно):

Подружитесь с нами

Подпишитесь на лайфхаки и идеи для эффективного онлайн-маркетинга

(пишем один раз в неделю – по вторникам)

[mc4wp_form id=”8707″]

Меню
Заказать звонок
+
Жду звонка!
× WhatsApp