Откройте пожалуйста эту страницу на настольком компьютере или ноутбуке.
Макет и композиция
Расстояние
1 ПРИНЦИП
Паранин Илья
Веб дизайнер
+7 999 123 45 67
paranin.site
Необходимо сгруппировать взаимосвязанные объекты вместе, тексты и изображения. Группы, которые не связаны между собой должны быть разделены.
Это сделает вашу работу намного более простой в восприятии
Белое пространство
2 ПРИНЦИП
Которое не всегда белое, но всегда пространство
В вашей работе должно быть пустое пространство, которое еще называют "воздухом".
Это отступы между контентом
Это отступы между контентом
There is no design without discipline. There is no discipline without intelligence.
Everything should be made as simple as possible, but not simpler.
Следим за отступами между текстом
Design creates culture. Culture shapes values. Values determine the future.
Everything should be made as simple as possible, but not simpler.
Design creates culture. Culture shapes values. Values determine the future.Design creates culture. Culture shapes values. Values determine the future.
Следим за отступами между строками
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
menu
menu
menu
menu
LET'S GO!
Creativity is to discover a question that has never been asked.
Следим за отступами между блоками
Creativity is to discover a question that has never been asked.
Цель "белого" пространства - помочь определять и разделять контент и блоки с контентом, дать возможность элементам на экране "дышать".
Наличие "белого" пространства существенно снижает стресс при просмотре сайта в отличие от сайта, где все элементы находятся рядом друг с другом и ничем не разделены
Выравнивание
3 ПРИНЦИП
Заголовок
40px
Представьте, что ваш холст разделен на симметричную сетку
25px
25px
Text area
Text area
Text area
The best ideas come as jokes.
The best ideas come as jokes.
The best ideas come as jokes.
The best ideas come as jokes.
Каждая группа имеет равномерные отступы
The best ideas come as jokes.
The best ideas come as jokes.
The best ideas come as jokes.
Без выравнивания ваш сайт будет беспорядочным и неаккуратным, что затруднит его восприятие.
Достаточно просто быть последовательным в выравнивании групп элементов и следовать логике и здравому смыслу.
Контраст
4 ПРИНЦИП
КОНТРАСТ
Выделяйте с помощью контраста то, что должны увидеть
Акцентируйте внимание на чем то важном
Контраст помогает привлечь внимание к определенному элементу на экране
Существует много разных вариантов, как создать контраст
Цвет
Размер
Форма
Контрастирующие
стили текста
Будьте аккуратны и не стоит чрезмерно использовать курсив или КАПС
Контраст
Напрямую связан с иерархией - техникой, которая позволяет пользователю ориентироваться на сайте
На всякий случай уточню, что здесь приведен пример иерархии Заголовок - подзаголовок - текст. Контрастный жирный шрифт заголовка и отличающийся тонкий шрифт подзаголовка, ну и конечно шрифт текста.
Если совсем по простому, иерархия показывает откуда мы начинаем и куда должны идти на сайте
Создать иерархию очень просто - решите, какой элемент должны заметить и увидеть в первую очередь и выделите их, увеличьте, расширьте или просто сделайте отличными.
КОНТРАСТ
Хочу посмотреть про типографику
© Паранин Илья 2020. Все права защищены
