Что такое хороший дизайн и как его достичь

Всем привет! Мне тут пишут, что мои “Записки о WordPress” непонятны читателям, которые только начинают осваивать сайтостроение. Что ж, исправляюсь. Теперь иногда я буду писать статьи, которые будут отмечены тегом “новичку” (не вижу смысла заводить рубрику).

Однако я не буду писать об основах html и css – есть огромное количество качественных ресурсов, посвященных этой теме. От себя могу порекомендровать сайты Постройка.ру, на котором я сама когда-то скачала свой первый (и я считаю, что лучший из прочитанных мной) учебник по html, и HTMLBook, который я постоянно использую как справочник.

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

С чего начинается обучение на курсах по основам создания сайтов? Правильно, с изучения основ HTML, а затем CSS. Я считаю, что это в корне не правильно, и сначала надо узнать про создание дизайна сайта. И вот почему.

Что  такое плохой дизайн сайта?

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

Отвратительный дизайн

Если вдруг кому-то понравилось, то ещё на уродливые сайты можно посмотреть тут: wcloset.org.

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

Что такое хороший дизайн сайта?

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

Что такое дизайн? Существует мнение, что дизайн – это визуальное оформление сайта. Однако это не совсем так. Дизайн – это взаиморасположение элементов на сайте, структура страниц, навигация по сайту, удобство и понятность навигации  для пользователя.

Очень красивый дизайн

Когда-то мне попалась мысль о том, что образец идеального дизайна – это лист чистой белой бумаги. Почему, спросите вы? Потому что в хорошем дизайне нет лишних элементов. И если какой-то элемент оформления сайта можно убрать, то его надо убрать. Посмотрите на главную страницу Гугла: кроме ссылок в верхнем ряду, логотипа и строки поиска там больше ничего нет. Или посмотрите на сайт компании, в которой я работаю: mip-f1.com. Я не говорю, что он идеален, но убрать больше ничего нельзя, а добавление дополнительных элементов будет явно лишним.

Главное на любом сайте, а в особенности блоге, это тексты. Конечно, бывают исключения в виде видео- и фотоблогов. Но в любом случае, посетитель приходит на сайт за информацией. А поэтому в идеальном дизайне отсутствуют элементы, отвлекающие от информации. Вот скажите, на скриншоте, который я приводила выше, удобно читать текст? Естественно, нет. Потому что там фон ярко-зелёный. Фон лучше делать нейтрального цвета (белый, серый), или пастельного. Посмотрите на дизайн на втором скриншоте. Он просто нереально красивый! Можете посмотреть на него “вживую”.

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

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

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

Сейчас можно подвести итог. Признаки хорошего дизайна таковы:

  1. графические элементы не должны отвлекать от текстов
  2. отсутствуют элементы, не несущие функциональную и смысловую нагрузку
  3. используется не более трёх цветов

Как видите, всё просто. И я уверена, что чем проще дизайн, тем он привлекательнее. Если вы считаете, что минимализм это скучно и однообразно, посмотрите эту подборку дизайна блогов, и ваше мнение изменится!




16 комментариев к “Что такое хороший дизайн и как его достичь”

  1. Аркадий

    Про 3 цвета конечно правильно, только видимо это уже тема другой статьи – а то возьмут 3 цвета, да только таких, что мало не покажется =))

    Ответить
    • oriolo

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

      Ответить
  2. Евгений

    Я тоже на постройке скачал свой первый учебник html и я об этом не жалею. Насчёт 3 цветом, Вы правы, и мне кажется что 1 цвет должен быть главным, то бишь например синий или голубой, 2 цвет нейтральный (например фон сайта) и 3 цвет чуть отличается от 2.

    Ответить
    • Евгений

      И из за такого расклада цветов дизайн за частую получаются отменными 😉

      Ответить
      • oriolo

        Я учебник с постройки еще лет 6 назад скачала, лучше его с тех пор не видела: там все наглядно и понятно объясняется.
        Про цвета. С цветами разной насыщенности но одного тона вообще очень много можно экспериментировать, в этом случае их можно даже больше трех брать – но не больше пяти, наверно. И плюс один контрастный. И тоже замечательно будет получаться. У меня на блоге например – серый d5d5d5, 666666, f5f5f5, f0f0f0, cccccc, и синий.
        P.S. Лучше на “ты” 😉

        Ответить
  3. tumblioner

    заметил, что ты верстаешь таблицами…прошлый век же) и доктайп xhtml…давно пора использовать доктайп HTML5.

    тени внутри инпутов формы комментариев и поиска смотрятся не очень…

    поддерживаю по поводу минимализма в дизайне, я сам сторонник этого направления)

    и без обид…работы в портфолио фирмы в которой ты работаешь, отвратительные((

    Ответить
    • oriolo

      Этот шаблон верстала не я. Увидела его, и он мне понравился, решила установить. От того, что он на таблицах, сама не в восторге.

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

      Ответить
  4. Александр

    Спасибо буду знать:)

    Ответить
    • oriolo

      Александр, надеюсь, что Вы найдете много полезного для себя на моем блоге 😉

      Ответить
  5. Регина

    “Вживую” пишется слитно

    Ответить
    • oriolo

      Спасибо, исправила.
      P.S. Ссылку убрала, она очень длинная и портит вид страницы.

      Ответить
  6. Ешкин Кот

    Не совсем с вами согласен…
    Дизайн должен быть простым, но не ущербным. Нельзя перегибать

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

    А mip-f1.com – пример сайта глядя на который возникает ошушение что ты отключил картинки в браузере, или на сервере что то глюкануло.. ну или автору надоело его делать.. Вроде как все на лицо, но так же и какая то неряшливость, недоделанность… запущенность чтоли..

    Ответить
  7. Кеша Аксенов

    хорошая подборка блогов. Правильно говорите: “Красота в простоте”. Еще говорят, чем проще, тем лучше.

    Ответить
  8. Обновлен дизайн на блоге

    […] ярким и современным, но в то же время, придерживаться минимализма в дизайне, поэтому решено было выделить цветом шапку, а фон […]

    Ответить
  9. Алексей

    Хорошая статья. Сам сейчас пытаюсь сделать что-то подобное на своем сайте 4freelancers.ru. Вроде оставил только самое нужное, а такое ощущение, что сайт какой-то серый стал. Чего не хватает?

    Ответить

Оставить комментарий