В математике есть три постоянных величины, встречающихся, наверно, во всех основных её областях - e, π, i, хоть последняя и не действительное число. В то же время, есть еще одна знаменательная постоянная, хоть и не участвующая в великих формулах, но известная многим. Это "золотое сечение" - φ = 1.6180339887498948482...
Во античные времена математика ассоциировалась с красотой мира. Исследую красоту звуков и из сочетаний, Пифагор открыл музыкальную гамму, которая применяется и доныне. Он пришел к выводу, что приятное для слуха созвучие получается когда длины струн (= высоты нот) находятся между собой в простых целочисленных отношениях - типа 1/2, 3/4 и т.д. Так числа определили нотный строй.
#math #webdesign
Во античные времена математика ассоциировалась с красотой мира. Исследую красоту звуков и из сочетаний, Пифагор открыл музыкальную гамму, которая применяется и доныне. Он пришел к выводу, что приятное для слуха созвучие получается когда длины струн (= высоты нот) находятся между собой в простых целочисленных отношениях - типа 1/2, 3/4 и т.д. Так числа определили нотный строй.
#math #webdesign
Попытка применить числовые отношения к визуальному миру, чтобы задать критерии красоты, продвинулись не так далеко. Было принято, что "красивый" прямоугольник это такой, у которого маленькая сторона относится к большой так же, как большая к сумме маленькой и большой. Решение простого квадратного уравнения дает бесконечную дробь: a/b = 1.61803... Её и назвали золотым сечением.
Сразу же получается, что если a/b = 1.61803..., то b/a = 0.61803... Только одно число обладает таким свойством. Отметим, если a/b = φ и b/c = φ, то a/c = φ*φ, и таким образом можно получить ряд уменьшающихся или увеличивающихся гармоничных отрезков, как и с музыкальными нотами и их созвучиями.
#math #webdesign
Сразу же получается, что если a/b = 1.61803..., то b/a = 0.61803... Только одно число обладает таким свойством. Отметим, если a/b = φ и b/c = φ, то a/c = φ*φ, и таким образом можно получить ряд уменьшающихся или увеличивающихся гармоничных отрезков, как и с музыкальными нотами и их созвучиями.
#math #webdesign
Из интересных свойств можно еще отметить, что отношение соседних чисел Фибоначчи при их росте стремится именно к золотому сечению. Другими словами, последующий член последовательности примерно в 1.6 раза больше предыдущего.
Золотое сечение сразу стали, с одной стороны, находить в природе, а с другой - использовать при создании произведений искусств и архитектуры. В наше время им часто руководствуются при создании логотипов для брендов (Apple, Pepsi, Twitter, Google), и веб-дизайна - гармоничное разбиение отрезка на две части.
#math #webdesign
Золотое сечение сразу стали, с одной стороны, находить в природе, а с другой - использовать при создании произведений искусств и архитектуры. В наше время им часто руководствуются при создании логотипов для брендов (Apple, Pepsi, Twitter, Google), и веб-дизайна - гармоничное разбиение отрезка на две части.
#math #webdesign
Приложение screenshot-to-code по скриншоту или ссылке на сайт генерит код для HTML/Tailwind CSS, React, Bootstrap или Vue.
Используются GPT-4 Vision и DALL-E 3. Нужно иметь ключ к GPT-4 Vision.
#ai #webdesign
Используются GPT-4 Vision и DALL-E 3. Нужно иметь ключ к GPT-4 Vision.
#ai #webdesign
Поделитесь ссылками на ресурсы, где можно черпать вдохновение для дизайна сайта
Допустим, есть уже костяк сайта - с хедером, сайдбаром, какими-то элементами. Хочется его одеть во что-нибудь красивое и готовое.
Умеренное, гармоничное, с продуманной цветовой палитрой, типографикой, размерами по золотому сечению и всем остальным. Чтобы было сделано профессионалом, короче.
#webdesign
Допустим, есть уже костяк сайта - с хедером, сайдбаром, какими-то элементами. Хочется его одеть во что-нибудь красивое и готовое.
Умеренное, гармоничное, с продуманной цветовой палитрой, типографикой, размерами по золотому сечению и всем остальным. Чтобы было сделано профессионалом, короче.
awwwards и подобные ресурсы превратились в сайто-свалку, где что-то приличное уже не найти#webdesign
Что такое дизайн-система?
- Цветовые палитры: Основные и дополнительные цвета, используемые в интерфейсе.
- Типографика: Шрифты, размеры, межстрочные интервалы и другие параметры текста.
- Компоненты: Готовые элементы интерфейса (кнопки, формы, карточки и т.д.), которые можно повторно использовать.
- Отступы и размеры: Стандартные значения для отступов, размеров элементов и других пространственных характеристик.
- Использование CSS свойств
Шаги по созданию дизайн-системы
1. Определение базовых стилей:
- Нормализация: Использование нормализатора (например, Normalize.css) для устранения различий в стилях браузеров.
- Переменные: Объявление основных цветов, шрифтов, отступов и других значений в виде CSS переменных.
- Базовые стили: Определение базовых стилей для элементов (например, body, h1, p).
2. Создание компонентов:
- Визуальные компоненты: Создание компонентов, которые отображают пользовательский интерфейс (кнопки, формы, карточки и т.д.).
- Абстрактные компоненты: Создание компонентов, которые не имеют визуального представления, но содержат логику и стили (например, компоненты для работы с цветом, типографикой).
Ключевые моменты для запоминания:
- Постоянство: Придерживайтесь единого стиля во всех компонентах.
- Модульность: Разбивайте дизайн-систему на небольшие, независимые компоненты.
- Гибкость: Создавайте компоненты, которые можно адаптировать под различные сценарии использования.
- Тестирование: Регулярно тестируйте дизайн-систему, чтобы убедиться в ее корректной работе.
Пример:
#webdesign #css
Дизайн-система — это набор правил и компонентов, которые обеспечивают согласованность и масштабируемость интерфейса. Она включает в себя:- Цветовые палитры: Основные и дополнительные цвета, используемые в интерфейсе.
- Типографика: Шрифты, размеры, межстрочные интервалы и другие параметры текста.
- Компоненты: Готовые элементы интерфейса (кнопки, формы, карточки и т.д.), которые можно повторно использовать.
- Отступы и размеры: Стандартные значения для отступов, размеров элементов и других пространственных характеристик.
- Использование CSS свойств
Шаги по созданию дизайн-системы
1. Определение базовых стилей:
- Нормализация: Использование нормализатора (например, Normalize.css) для устранения различий в стилях браузеров.
- Переменные: Объявление основных цветов, шрифтов, отступов и других значений в виде CSS переменных.
- Базовые стили: Определение базовых стилей для элементов (например, body, h1, p).
2. Создание компонентов:
- Визуальные компоненты: Создание компонентов, которые отображают пользовательский интерфейс (кнопки, формы, карточки и т.д.).
- Абстрактные компоненты: Создание компонентов, которые не имеют визуального представления, но содержат логику и стили (например, компоненты для работы с цветом, типографикой).
Ключевые моменты для запоминания:
- Постоянство: Придерживайтесь единого стиля во всех компонентах.
- Модульность: Разбивайте дизайн-систему на небольшие, независимые компоненты.
- Гибкость: Создавайте компоненты, которые можно адаптировать под различные сценарии использования.
- Тестирование: Регулярно тестируйте дизайн-систему, чтобы убедиться в ее корректной работе.
Пример:
/* variables.css */
:root {
--primary-color: #007bff;
--font-family: sans-serif;
}
/* BaseButton.vue */
.button {
background-color: var(--primary-color);
padding: 1rem 2rem;
cursor: pointer;
...
}
#webdesign #css
This media is not supported in your browser
VIEW IN TELEGRAM
А вы заценили анимацию и вообще весь дизайн сайта voidzero.dev?
Мастерство не пропьешь...
#webdesign #evanyou #voidzero
Мастерство не пропьешь...
#webdesign #evanyou #voidzero
Hero секция - это заметный визуальный элемент, который расположен в верхней части веб-страницы, обычно занимая весь экран. Это первый контент, который видят посетители, когда заходят на сайт, поэтому он имеет решающее значение для создания индивидуальности вашего бренда и передачи его основной идеи.#webdesign