С чего начинается разработка дизайна сайта?

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

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

Первые шаги

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

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

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

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

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

Следующим этапом будет создание модулей для будущего сайта. На главной странице обычно располагаются следующие элементы:

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

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

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

Сайты-визитки зачастую ограничиваются одноколоночным форматом. Ширина модулей выбирается в зависимости от личных предпочтений и целей проекта.

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

Наиболее встречаемое соотношение сторон слева и справа — 40 на 60%. Расположение блоков не имеет строгих, узаконенных государством стандартов. В этом плане вы Ван Гог — творите, только уши свои не трогайте.

Рекомендации по оформлению дизайна

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

1. Презентационные (лендинги, сайты-визитки).

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

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

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

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

3. Информационные.

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

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

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

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

Комментарии Вконтакте:

Комментарии (2)

1. Анатолий

   2016-06-08 в 16:02

   Спасибо за статью!
   Как всегда всё на высшем уровне.

   Войдите, чтобы ответить
2. Голос

   2017-10-15 в 17:23

   Спасибо, интересная статья.

   Войдите, чтобы ответить