Как создать дизайн сайта?

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

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

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

Перед тем как начать рисовать набросок, создайте образ будущего дизайна в голове. Учтите, что любой дизайн состоит из следующих частей:

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

  

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

  

• «Основная часть» – блок, в котором размещается основной контент. Большинство дизайнеров размещают основную часть сайта по центру, дабы удобнее было читать материал.

  

Итак, теперь вы знаете, из каких блоков состоит сайт. Пора приступить к решению вопроса, как создать дизайн сайта самому. Откройте самый простой фоторедактор (хватит и Paint) и создайте новый шаблон с разрешением 1280×1024. Сразу стоит напомнить, что при создании сайтов не используются метрические измерения. Все блоки «измеряются» в пикселях.

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

У вас появилась идея сделать несколько боковых колонок, а контент разместить в центре? Прекрасно, но при разметке учитывайте ширину сайдбаров и место под основной контент. Боковые колонки не должны быть слишком широкими (не более 300 пикселей), а под основной контент нужно оставлять минимум 500 пикселей, иначе текст будет неудобно читать.

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

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

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

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

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

Запомните три простых правила «отличного дизайна»:

• текст должен быть хорошо читаем даже при отключенных картинках в браузере;
• старайтесь не использовать «вырвиглазные» цвета;
• создайте удобную навигацию по сайту.

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