Веб дизайн за 4 минуты

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

С чего вы должны начать?

Контент

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

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

Давайте предположим, что вы уже написали содержание, которое Вы хотите опубликовать и только что создали пустой файл style.css, какое первое правило вы будете писать?

Центрирование

Длинные строки текста бывает трудно разобрать, следовательно, трудно читать. Ограничение лимита символов в строке, значительно улучшает читаемость и привлекательность стены текста.

body {
  margin: 0 auto;
  max-width: 50em;
}

После укладки текстовых блоков, как насчет укладки самого текста?

Семейство шрифтов

Шрифт браузера по умолчанию - "Times", который выглядит непривлекательно (в основном потому, что это шрифт "без стилей"). Переключение на шрифт без засечек, например как "Helvetica" или "Arial" может значительно улучшить внешний вид вашей страницы.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}
Если вы все же хотите использовать шрифт с засечками, то используйте "Georgia".

Это сделает текст более привлекательным, давайте также сделаем его более удобным для чтения.

Расстояние

Увеличение места вокруг и внутри вашего контента может увеличить привлекательность вашей страницы.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

Цвет и контраст

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

body {
  color: #555;
}

А для того, чтобы сохранить достойный уровень контраста, давайте выберем более темный оттенок для важных слов:

h1,
h2,
strong {
  color: #333;
}

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

Баланс

Добавим всего несколько дополнительных штрихов, чтобы исправить общий баланс страницы:

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

Теперь, скорее всего вы захотите как то выделить вашу страницу и придать ей индивидуальность.

Основной цвет

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

a {
  color: #e81c4f;
}

Но чтобы сохранить баланс, нам понадобятся некоторые дополнительные цвета.

Дополнительные цвета

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

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

Изменив оттенки, почему бы не изменить форму...

Пользовательский шрифт

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

Вы без труда сможете встроить собственный шрифт или воспользоваться онлайн сервисом, таким как Typekit, давайте добавим шрифт "Roboto" используя бесплатный сервис Google Fonts:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

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

Давайте улучшим наш заголовок хорошим, фоновым изображением:

header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

И добавим логотип:

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

Улучшаем стили текста заголовка:

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

Вот и все! Я разработал приличную страницу всего за несколько минут.

 

Перевод статьи Web Design in 4 minutes

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.