Веб-дизайн для начинающих. Что должен знать каждый веб-дизайнер?

Веб-дизайн для начинающих

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

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

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

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

Принципы хорошего веб-дизайна

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

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

Steven Bradley, известный блоггер, в своей статье «Design Principles: Dominance, Focal Points And Hierarchy» называет три основных принципа веб-дизайна:

доминация;

точки фокуса;

иерархия.

В сегодняшнем уроке web-дизайна для начинающих рассмотрим эти принципы более подробно. «Для чего это нужно?» – спросите Вы. А вот для чего. Работая над проектами, Вы неоднократно будете сталкиваться с требованием заказчиков увеличить размер каких-либо элементов, дабы выделить и подчеркнуть их. Когда Вы это сделаете, то обнаружите, что теперь подобные манипуляции нужно проделать и с остальными объектами, чтобы сохранить баланс.

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

Принцип 1. Доминация

Если сравнить два любых объекта в дизайне, то здесь возможны два варианта:

они полностью идентичны;

один из них будет доминировать над другим.

Доминирующий объект сразу притягивает взгляд, его замечают раньше. Таким образом, он обладает большей визуальной весомостью.

Доминацию можно создать, варьируя следующие свойства элементов:

размер;

цвет;

форма;

текстура;

насыщенность;

глубина;

свободное пространство;

ориентация;

воспринимаемый объем и вес.

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

Еще один способ заставить объект доминировать — применить эффект визуального направления или, так называемую, визуальную подсказку. Например, окружить элемент стрелочками, направленными на него. Таким образом, Вы сможете сделать его доминирующим даже при обладании им меньшим визуальным весом, по сравнению с другими объектами.

Не рекомендую Вам делать два и больше доминанта — они будут «драться» за внимание и нарушать весь баланс. Не следует также делать какой-то элемент чрезмерно доминирующим, чтобы он не слишком затмевал остальные части композиции.

Принцип 2. Точки фокуса

Точки фокуса — менее выраженные, второстепенные элементы в вопросе доминации. Они представлены в виде зон, обладающих меньшим визуальным весом.

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

Принцип 3. Иерархия

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

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

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

В примере ниже мы видим, что кнопка «Proceed to Checkout» выделена красным цветом, в то время как «Narrow Your Search Results» серая и находится на одном уровне со ссылками на продукты и фильтром. Нетрудно догадаться, какая из кнопок занимает первостепенное место в визуальной иерархии этого интерфейса.

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

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

Эта статья была Вам полезной? Рекомендуйте нас друзьям в социальных сетях! До новых встреч!

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

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

Комментарии Facebook:

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

  1. Ирина

    Спасибо интересно!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree