Как сделать дизайн сайта

Дизайн сайта

Как сделать дизайн сайта? Многие задают сейчас этот вопрос. Давайте разберемся.

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

Дизайн практически любого сайта состоит из следующих основных элементов:

  • фон
  • шапка (header)
  • меню
  • блок основного контента
  • один или несколько боковых блоков (сайдбаров)
  • подвал (footer)

Макет сайта

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

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

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

Дальше переходим непосредственно к созданию дизайна сайта. Для этого есть несколько путей:

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

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

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

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

(Дополнено по просьбам посетителей сайта). Многие посетители просили порекомендовать какой-нибудь курс по созданию дизайна сайта в фотошопе. Я пересмотрел множество курсов и выбрал для вас самый лучший по соотношению «цена-качество».

Это курс Максима Лобанова. В нем есть и теория, и практика, и личная поддержка, и разные ценовые тарифы для разного уровня достатка... Ну и приятные бонусы))) Куда же без них))) Вобщем — рекомендую.

Курс Максима Лобанова «Обучение дизайну сайтов в Photoshop онлайн».

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

3. А также Вы можете подобрать себе уже готовый шаблон сайта, который подходит вам по стилю. Есть множество сайтов в интернете, где можно бесплатно скачать готовые шаблоны сайтов. Перед выбором шаблона обязательно определитесь с CMS, на которой Вы будете делать Ваш сайт.

И в завершении хотелось бы дать Вам несколько советов о том, как сделать дизайн Вашего сайта лучше:

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

Ну вот мы и разобрались с вопросом, как сделать дизайн сайта. Надеюсь информация оказалась для Вас полезной.

Еще много интересного ждет Вас на этом сайте. Чтобы ничего не пропустить, рекомендую получать новые статьи на e-mail.

 

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии к статье:
"Как сделать дизайн сайта"

  1. Ксения Юрьевна

    Здравствуйте. Меня интересует раздел сайтостроения. Я уже это теперь прошла, но у вас так все замечательно написано, жаль, что мне не попался раньше этот материал, когда я так мучилась со всеми этими вопросами.

  2. Замечательная полезная статья. Все правильно написано. Другой раз зайдешь к кому на блог или сайт, а там...! Так что прислушаться есть к чему. Спасибо и удачи Вам!

  3. А еще есть прога Artisteer2, в которой можно сделать шаблон для Joomla, WordPress, Drupal, DotNetNuke и просто HTML-шаблон.

    • Да, есть. Есть даже Artisteer 3. Но мне, честно говоря, не очень понравилась ее работа. Она создает слишком сложный код. В нем слишком много лишних блоков. А это лишняя нагрузка на сайт.

      К тому же она платная. А бесплатная версия не поддерживает сохранение проекта.

      Я предпочитаю делать сам. О чем и буду рассказывать на этом блоге.;)

      • Можно найти взломанную. Не много найдется умельцев, кто сделает шаблон, скажем, для WordPress самостоятельно.

        У Вас вроде Joomla. Будете рассказывать как сделать шаблон для Джумлы? 2.5?

        • Обязательно буду. И про WordPress тоже буду. У меня на WordPress у жены сайт.

          tanina-kuhnya.ru

          Так что опыт есть и в WordPress.

          • ОК. Подпишусь на обновления.

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

    • Дизайн Вашего сайта действительно простой, но это не мешает ему быть довольно приятным для глаз. Единственное, что хотел бы посоветовать — фон сделать немного посветлее.

      По поводу плагина — лучше напишите мне отдельно на e-mail: marmserg@gmail.com

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

      Постараюсь помочь.

  5. Очень понятно и интересно пишите! Использую для сайта готовую тему, но уже становится этого мало. Задумываюсь, о том, чтобы самостоятельно поправить тему. Ваши советы как раз для меня! :)

    • Планирую в ближайшем будущем сделать небольшой обучающий курс именно на эту тему: «Как переделать готовый шаблон под себя».

      Пока не хватает времени.

      Чтобы не пропустить — подписывайтесь на обновления.

  6. Спасибо за информацию.Конечно шаблон бы могла сделать,но как его привязывать к CMS. Поэтому предпочитаю готовые шаблоны. =) =) =)

    • Сейчас работаю над курсом как раз на эту тему. Планирую выпустить в конце августа. Там ничего сложного нет. Немного HTML и немного CSS. ;)

  7. Отличная работа Сергей.

    Так же столкнулся с недостаточностью готовых шаблонов, хоть и установил настраиваемый шаблон.

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

    Беда в том, что у меня Linux, а не устанавливал я на нее фотошоп.

    В любом случае, Ваши статьи очень актуальны, так держать, подписываюсь на статьи

    • Спасибо за хороший отзыв.

      Александр, эта программа называется Artisteer. Я пробовал на начальном этапе ее использовать. И у нее тоже есть некоторые недостатки. В частности — она создает слишком сложный перегруженный код.

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

      Поэтому я отказался от ее использования и научился все верстать сам. Чего и Вам желаю.

      Там нет ничего супер сложного. Главное — захотеть.

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