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

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

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

К примеру, на 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.

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

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

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

Творческий кризис.

Чтобы начать воплощать идеи в жизнь, хотелось бы точно и конкретно представлять в голове итоговый результат, ведь для каждой идеи нужен свой подход в разработке. Одну и ту же картинку можно интерпретировать по разному: векторно, растрово, объемно через 3D, сгенерировать с ИИ или сфотографировать. Чтобы определиться, нужно не только обладать идеей, но и представлять дальнейшее её применение и использование.

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

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

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