Проект: Разбор дизайна (со Smashing Magazine)
В этом простом проекте вы разберете на составляющие сайт популярного дизайнерского журнала, с которым вы возможно уже знакомы - Smashing Magazine. Цель этого упражнения - научить вас мыслить в терминах визуальной иерархии, типографики и принципов дизайна.
Ваша задача - создать черно-белую тепловую карту сайта, которая будет показывать, какой элемент имеет самый большой вес в визуальной иерархии. Для вдохновения посмотрите эту картинку от vanseodesign.com, на ней сравниваются макет сайта без какой-либо дифференциации слева и сайт с продуманной иерархией справа. Ваш финальный результат будет выглядеть очень похоже на сайт справа.
Это также является возможностью лучше освоить позиционирование <div> элементво без того, чтобы беспокоиться об их содержимом, что сослужит вам хорошую службу позже.
Шаги к победе
Поиграем с визуальной иерархией.
- Перейдите на сайт Smashing Magazine и посмотрите их домашнюю страницу. Подумайте о том, куда сначала направлен ваш взгляд, куда во вторую очередь, куда в третью. Какие элементы на странице имеют самый большой визуальный вес?
- Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
- Создайте новый HTML документ.
- Подумайте обо всех элементах на странице Smashing и как они сгруппированы.
- Сделайте разметку базовой структуры страницы с использованием пустых
<div>элементов подходящего размера, которым нужно задать подходящее позиционирование. - Теперь задайте фоновые цвета этих div-ов разными оттенками серого, которые будут соответствовать их визуальному весу на странице Smashing. Если вы прищуритесь и переведете глаза с вашего решения на их страницу, окажется ли ваш взгляд на том же самом месте?
Поиграем с типографикой
- Добавьте какой-нибудь бессмысленный текст в эти div-ы (скопированный со страницы или с генератора lorem ipsum) для основных заголовков и параграфов. Очевидно вам захочется снова изменить цвет div-ов на белый для этих элементов. Необходимо добавить текст только в области с основным контентом, не слишком беспокойтесь об областях сбоку или панели навигации.
- Поиграйте со стилями (font style) и насыщенностью (weight) шрифта и посмотрите, как это влияет на визуальный вес и впечатление от страницы. Вы должны увидеть большую разницу при использовании шрифтов с засечками (serif) и без (sans-serif), так же как и при изменении насыщенности шрифта (font-weight) со 100 до 700.
- Загрузите несколько веб-шрифтов со страницы с веб-шрифтами Google, которую вы уже видели в уроке про шрифты, чтобы заодно протестировать и их.
- Подберите комбинацию шрифт/насыщенность, которая приблизительно похожа на использованную на оригинальной странице Smashing, и примените ее к вашему решению.
- Отправьте ваше решение на Github.