Фоновый ритм.

Фон занимает пространство. На нём не останавливается взгляд, но он не остаётся незамеченным. Если у Вас есть интересные идеи, необычные дизайн-решения — выбросите их из головы. Фон должен быть простым. Если фон привлекает внимание пользователя, значит он отвлекает внимание от контента.

Для начала достаточно будет знать основной цвет. Расширим палитру осветлёнными оттенками того же цвета на Gradients.

Откроем векторный редактор или всемогущий Adobe Illuustrator. Набросаем две пары округлых фигур. Мы нацелены создать динамичный фон, а самый простой способ заставить что-то двигаться — это задать точку вращения. Нарисуем точки внутри пар и экспортируем результат в формате .svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M37-5C25.1-..." fill="none" stroke-miterlimit="10"/>
  <path d="M20.6,4..." fill="none" stroke-miterlimit="10"/>
  <path d="M105.9,48...." fill="none" stroke-miterlimit="10"/>
  <path d="M102,67.1c..." fill="none" stroke-miterlimit="10"/>
  <circle cx="13.2" cy="25.6" r="1.6" fill="none" stroke-miterlimit="10"/>
  <circle cx="84.7" cy="93.3" r="1.7" fill="none" stroke-miterlimit="10"/>
</svg>

Теги <circle> в данном случае — это те самые точки вращения и их координаты, а <path> — это округлые формы.

Полученные на Gradients цвета добавим как фон для каждого <path>, таким образом закрасим каждую округлую форму.

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

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
.out-top {
    animation: rotate 20s linear infinite;
    transform-origin: 13px 25px;
}
.in-top {
    animation: rotate 10s linear infinite;
    transform-origin: 13px 25px;
}
.out-bottom {
    animation: rotate 25s linear infinite;
    transform-origin: 84px 93px;
}
.in-bottom {
    animation: rotate 15s linear infinite;
    transform-origin: 84px 93px;
}

Пиксели в данном случае относятся к внутренней системе координат svg-изображения и спокойно масштабируются.

Проблему адаптивности решит

preserveAspectRatio="xMidYMid slice"

На Codepen представлен полный код шаблона.

Иллюзия объёма.

Единое оформление иллюстраций формирует общую целостность дизайна. Всё принадлежит общей идее — так формируется логическая связь и интерфейс становится понятным.

В иллюстрациях может быть всего лишь один общий признак, например, цветовая гамма, графика или, может быть... объем?

Почему бы и нет, учитывая, что за недостатком навыков 3D-модель легко достать на различных интернет-ресурсах, например, на Zeelproject. Однако, выбирая тернистый путь 3D, необходимо осознавать, что это весьма энергозатратно как для человека, так и для компьютера. Предположим, что через этап создания модели нам удалось проскочить, но для того, чтобы интегрировать модель в сайт, нужно выполнить рендеринг — это позволит перевести 3D-модель в формат изображения.

Зайдем в Blender и импортируем модель формата .obj. Зажмем Shift + A и лёгким движением руки добавим камеру и свет. Покрутим-повертим модель пока не увидим на экране идеальный ракурс и с помощью комбинации клавиш Ctrl + Alt + 0 на цифровой клавиатуре переместим в понравившееся место камеру. Приблизить или отдалить её можно с помощью кнопки G.

Зажмем Ctrl + Alt + Q, чтобы перейти в 4 вида: фронтальная, горизонтальная, профильная проекции и объем. Переместим источник света из центра в более отдалённое место.

Добавим текстуры. Перейдем на вкладку UV Editing и найдем во вкладке справа Material, там же вкладка Surface и кнопка Base Color, выбираем из предложенного Image Texture и загружаем картинку. В Edit Mode кнопкой L выделяем нужные части модели и жмем Assign, чтобы применить текстуру.

На правой вкладке Render ищем вкладку Film и помечаем галочкой Transparent — так фон не будет отвлекать от модели. На верхней вкладке Render выбираем Render Image и ждём печати картинки в факсе.

Вечный двигатель.

Согласитесь, статичная 3D-модель мало впечатляет, так и хочется взять и сдвинуть еë с места.

В некоторых случаях это достаточно сложно, когда нужно, например, деформировать часть модели, но часто достаточно использовать базовые инструменты.

Чтобы наслаждаться анимацией сколь угодно долго, нужно её зациклить. Сохраним текущее состояние модели как первый кадр: перейдем на вкладку Animation, выделим всë кнопкой A, и находясь курсором на временной шкале, нажмем I. Провернëм этот трюк ещё раз, изменив время на шкале на последний кадр — получается, первый и последний кадр совпадают.

Теперь выберем на шкале промежуточный кадр, повернем или переместим всю модель и зафиксируем её так же с помощью I. Мы сделали всего три ключевых кадра, задав общую траекторию движения, остальное дорисует Blender.

Перейдем к деталям. Разделим модель на её составляющие с помощью P → Selection, после чего некоторые части будем слегка поворачивать, смещать и фиксировать на промежуточных кадрах шкалы. Вот и весь фокус.

Предварительно анимированную модель можно найти на CGTrader, например. Но такие модели чаще всего не зациклены, поэтому просто скачать и отрендерить еë будет мало, нужно ещё и придумать историю объединения начала и конца.

Вышла моя первая статья на Хабр!

Создание интерактивного макета. Задача упаковки кругов в круг. Метод отжига

Потенциальная красота.

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

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

К примеру, на WPDean я наткнулась на симпатичное меню. Подразумевалось, что такое меню должно разворачиваться влево, но на моем сайте органичнее смотрится разворот вниз.

Если ранее меню раскрывалось по ширине:

.nav__cb:checked ~ .nav__content {
    width: 410px;
}

То теперь будет по высоте:

.nav__cb:checked ~ .nav__content {
    height: 550px;
}

Анимацию вращения текста так же просто подправить, заменив параметр RotateY на RotateX.

Анимация значка меню — это, пожалуй, самый приятный бонус этого шаблона. Однако сам значок разворачивается слишком резко и быстро и по собственной прихоти я изменяю rotate(-225deg) на rotate(-45deg), таким образом убирая лишний оборот.

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

Для этого для @media (max-height: 570px) настрою высоту, равную текущей высоте окна:

height: calc(100vh - 40px)

И добавлю прокрутку:

overflow-y: auto;

Второпях.

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

Предположим, я нажимаю кнопку «применить». Чтобы её идентифицировать, моему мозгу нужно прочитать 9 букв. Это, конечно, не вызывает у меня затруднений, но хочется воспринимать такую информацию разом. В таком случае проще представить её в виде «✓», не правда ли?

Существуют кнопки различной степени важности. Например, кнопки «удалить», «далее», «создать» — это ключевые действия на странице, их нужно воспринимать чётко и ясно. Поэтому такие кнопки часто прописывают буквами без символьных абстракций. Однако есть кнопки, назначение которых ближе к второстепенному, ими можно воспользоваться, можно не воспользоваться — по ситуации. Для них подойдут значки, которые можно найти на Flaticon, там же удобно выбирать параметры стилизации, такие как «контур», например. В качестве альтернативы можно воспользоваться Freepik.

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

От кадра к кадру.

Медиа наполняет сайт больше, чем это делает текст. В условиях статики размещение медиа почти не требует дополнительных трудозатрат, однако в условиях динамики всё не так просто — хочется оживить каждую картинку.

Но что значит оживить чисто технически? Заменить фото на видео или гиф? Однако и там и там много недостатков: видео занимает слишком много памяти, а гиф часто подвержено пикселизации. Но есть ещё один вариант — покадровая анимация, хотя и здесь не без угнетающих обстоятельств: чтобы браузер проигрывал такую анимацию, ему необходимо отправлять HTTP-запрос на сервер для загрузки каждого кадра по отдельности, а это занимает время.

Для таких случаев принято использовать спрайты, то есть объединение всех кадров в длинную фотоплёнку. Программа же в данном случае выполняет роль старинного кинопроектора. Это позволяет браузеру обойтись одним HTTP-запросом, и при всëм этом сэкономить память без ущерба качеству... Только если правильно обработать кадры, а именно:

Тернистый путь обработки.

0. Обрезать кадры разом через imgtools
1. Сжать кадры через TinyPNG
2. Создать спрайт через Aspose
3. Сжать спрайт через Compressor

Дизайн Unseen Studio.

Нет слов — одни эмоции.

Вышла моя новая статья!

Создание интерактивного макета. Упаковка кругов в квадрат и прямоугольник. Жадный алгоритм