Проект: Разбор дизайна (со Smashing Magazine)

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

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

Это также является возможностью лучше освоить позиционирование <div> элементво без того, чтобы беспокоиться об их содержимом, что сослужит вам хорошую службу позже.

Шаги к победе

Поиграем с визуальной иерархией.

  1. Перейдите на сайт Smashing Magazine и посмотрите их домашнюю страницу. Подумайте о том, куда сначала направлен ваш взгляд, куда во вторую очередь, куда в третью. Какие элементы на странице имеют самый большой визуальный вес?
  2. Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
  3. Создайте новый HTML документ.
  4. Подумайте обо всех элементах на странице Smashing и как они сгруппированы.
  5. Сделайте разметку базовой структуры страницы с использованием пустых <div> элементов подходящего размера, которым нужно задать подходящее позиционирование.
  6. Теперь задайте фоновые цвета этих div-ов разными оттенками серого, которые будут соответствовать их визуальному весу на странице Smashing. Если вы прищуритесь и переведете глаза с вашего решения на их страницу, окажется ли ваш взгляд на том же самом месте?

Поиграем с типографикой

  1. Добавьте какой-нибудь бессмысленный текст в эти div-ы (скопированный со страницы или с генератора lorem ipsum) для основных заголовков и параграфов. Очевидно вам захочется снова изменить цвет div-ов на белый для этих элементов. Необходимо добавить текст только в области с основным контентом, не слишком беспокойтесь об областях сбоку или панели навигации.
  2. Поиграйте со стилями (font style) и насыщенностью (weight) шрифта и посмотрите, как это влияет на визуальный вес и впечатление от страницы. Вы должны увидеть большую разницу при использовании шрифтов с засечками (serif) и без (sans-serif), так же как и при изменении насыщенности шрифта (font-weight) со 100 до 700.
  3. Загрузите несколько веб-шрифтов со страницы с веб-шрифтами Google, которую вы уже видели в уроке про шрифты, чтобы заодно протестировать и их.
  4. Подберите комбинацию шрифт/насыщенность, которая приблизительно похожа на использованную на оригинальной странице Smashing, и примените ее к вашему решению.
  5. Отправьте ваше решение на Github.

Решения других студентов

Поделиться уроком: