<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ключевые принципы дизайна

Ключевые принципы дизайна

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

Повторение

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

  1. Фотография, изображенная на странице, использует цвета (бурый, жёлто-коричневый, темно-зеленый, беловатый), которые повторяются на других частях страницы. Бурый цвет используется как фоновый цвет для области навигации, кнопок “Поиск (Search)” и “Подписаться (Subscribe)”, а также как цвет шрифта в центральной и правой колонках. Беловатый цвет – используется для текста логотипа, текста навигации, и как фоновый цвет центральной колонки. Темно-зеленый – фоновый цвет навигационной области, а также цвет заголовков раздела на центральной колонке.

  2. Области “Бронировать (Reservations)” и “Новостная рассылка (Newsletter)” имеют одинаковую форму и формат, состоящий из заголовка, содержания и кнопки.

  3. Использование только двух типов гарнитуры шрифта также является примером применения принципа повторения в дизайне и помогает создать целостный образ. Название сайта и заголовки разделов страницы используют шрифт Trebuchet. Остальной контент страницы использует шрифт Arial.

Рисунок 1

Контраст

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

Близость

Когда дизайнеры применяют принцип близости, взаимосвязанные элементы располагаются физически близко друг к другу. Несвязанные элементы, наоборот, должны иметь разделяющее их пространство. Например, на рисунке 1, расположение элементов формы бронирования (“Reservations”) рядом друг с другом, дает визуальную подсказку о логической взаимосвязанности данных элементов. Ссылки в горизонтальной навигации в верхнем правом углу, также расположены в непосредственной близости друг от друга, что создает визуальную группу на странице и делает навигацию по сайту проще.

Выравнивание

Это последний рассматриваемый в данной статье принцип, помогающий сделать дизайн сайта однородным и связанным. При его применении, страница организуется таким образом, что каждый элемент располагается в некотором положении (вертикальном или горизонтальном) по отношению к другому элементу. Страница из рисунка 1 явно следует этому принципу. Обратите внимание как выравнены и расположены компоненты в колонках одинаковой высоты.

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

shamil shamil 31.10.2017 16:35:47

Михаил,ваши партнерки кругом,и желающий заработать впадает в низшую касту размещая их у cебя.Есть также при условии зарегестрироватся , получить курс.Имея рынок сбыта,магазин "купят"

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.