👍 Начнем неделю с подборки сайтов, которые мне понравились

[01]
https://www.kepler-interactive.com/
Сайт цепляет с первого экрана своей анимацией с разными буквами, а также панелькой 🍪 расположенной в правом верхнем углу. Меня также зацепило меню с очень крутым эффектом стекла {говорят, что это уже не модно. но пора перейти от простых панелей с размытием к целым блокам. и я даже скоро сделаю вам пример}.

[02]
https://maehlerbrandt.com/en
Нравится бегущая строка с mask-image в виде градиента {тоже легко делается, 🦄 если надо} и полноэкранное меню. Сайт очень простой, но меня особенно зацепил эффект наведения на карточки в виде градиента. Взяла его на заметку для будущего мастер-класса по кастому блоков.

[03]
https://off-type.com/
Понравилось как были вписаны обычные иконки, а также композиция на сайте. Особенно мило получились иконки смены темы: микроскоп и белая стерильность 😁

[4]
https://www.jonway.studio/
Когда дело касается мелких деталей — я впадаю в ступор. Тут же все внимание как раз к ним: эффект наведения на пункт меню {круто применен фон}, навигация по странице, иконки, меню, кастомный скроллбар и эффект наведения на изображения {сочетающий в себе image-rendering и mix-blend-mode}. Взяла на заметку почти всё.

[5]
https://tripspace.co.uk/
Бегущая строка в кнопке и анимация формы, которую я не так давно писала для платного канала. Мне нравится сочетание искривленного текста и овальных изображений ниже. Появляется ощущение системности, а не просто затолкнутых в макет овальных изображений {по принципу: мне было скучно и я сделал овалы}. Еще отмечу расположение меню, ибо мне надоело обычное полноэкранное.

[6]
https://charliepite.com/
Просто очень простой сайт и забавные видео. Когда муж сказал, что это я с ноутбуком в любой ситуации и месте — стало еще смешнее.


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

Подборка странных сайтов №2

Я обещала в недавней навигации продолжить тег #референсы. Хочется сделать рубрику постоянной, ибо мне нравятся необычные сайты с деталями, которые вы никогда не увидите в Моте.

[1] benkwallace.com
Сайт с раздельной перемоткой, которую можно без проблем реализовать на тильде. Нравятся блоки, словно прикрепленные скрепкой на пробковую доску, закругления и затемнение страницы при наведении на публикации.

[2] studioroder.com
Экран разделен на три смысловые части (по типам объектов), каждую можно перематывать отдельно. Такой принцип сохраняется на внутренних страницах. Догадайтесь, могу ли я повторить такое с товарами на тильде 😉

[3] bernardo-rodrigues.com
На сайте не просто реализована раздельная перемотка. Проекты в каждой колонке при перезагрузке меняются.

[4] carolinebagley.co
Обычно, мы пытаемся спрятать Scrollbar, делаем его тоньше или вовсе отключаем (кидаю в вас помидорку, если вы так делаете, потому люди часто листают сайты ползунком и злятся, когда их нет). Тут же дизайнер сделал огромную кнопень для перемотки 😆

[5] hothouseseries.com
Сайт выглядит немного нелепо на первый взгляд, но меня очень зацепило зонирование, в центре которого новость о мероприятии. Слева и справа же дополнительная информация. Представьте как можно применить такую компоновку для выставок, ивентов и даже продажи курсов (для фоточек установлен mix-blend-mode: screen)

[6] stripe.press
Сайт с кучей деталей, которые я еще продолжу разглядывать: верстка в виде книги, книжное меню-бургер, красивые гарнитуры/цвета, летающий мужик. Трудно остановиться. Поэтому разглядывайте сами 😌

[7] newterritory.studio
Я планирую переделывать сайт-портфолио и постоянно подглядываю интересные детали. Сам сайт очень простой, но видим: необычное подменю, время работы, бегущую строку в кнопке и краткое Details+ проектов.

[8] bee-home
Милые и полезные домики для пчёлок. Нравится возможность настройки страницы: палитра, отключение анимаций, более низкое качество изображений.

Подборка странных сайтов №3

Продолжаю делиться необычными сайтами, которую собираю в Notion. Просто напомню, что я фанат странных сайтов 😎

[1] bf.inc
На сайте есть все, что мне нравится: четкое зонирование, моноширинный шрифт, отсылки к старым OS, необычные мелкие детали в виде процента перемотки и координат курсора {без разницы, что это попса}. Особенно приятно было обнаружить, что мобильная версия не лишена обаяния и для неё был написан отдельный эффект.

[2] trazafurniture.com
Имитация сетки на фоне, два блока с необычной анимацией увеличения элементов {которую точно возьмем на переверстку, когда у меня будут силы 😔} и больше плюсы вместо ссылки "View more".

[3] bennettandclive.com
Работы дизайнера и разработчика Daniel Spatzek я узнаю сразу. Всегда брутализм и очень много анимаций, которые разлетаются по разным подборкам. В этот раз выделилась анимация перед футером, которую так и хочется скролить туда-сюда.

[4] canadacanada.com
От этого сайта у вас закружится голова. Мне нравится эффект наведения на ссылки {хотя хочется квадратные скобки и возможность управления клавишами}, возможность переключить отображение и очень необычный аккордеон на странице Contacts (обратите внимание на выравнивание.

[5] abgd.it
Еще один сайт с возможностью отобразить сетку (получился почти pixel perfect). Обратить внимание стоит на аккуратную композицию, декоративные подписульки и то, что размер шрифта привязан не к ширине экрана, а к высоте (задано в vh). Такое я встречаю впервые 😳

[6] inkfishnyc.com
Я уже была потеряна после того, как увидела квадратные кавычки и анимацию в навигации. Помимо этого нужно отметить ритм в работах, эффект наведения в навигации и много разных подписей с цифрами {значение которых я очень редко понимаю, но это всегда цепляет}.

#референсы