Кокос Тех

А при чем тут мы, если мы вообще-то про разработку? 👀

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

А этот путь прямо сейчас меняется🛤️

Раньше человек задавал вопрос поисковику → получал десяток ссылок → переходил на сайт. Теперь все чаще он задает тот же вопрос ИИ → и получает готовый ответ, собранный из разных источников 🤖

И для бизнеса появляется новый вопрос: а ваш сайт среди этих источников есть?

Поэтому в новой статье разбираемся с нейропоиском и тем, что он меняет в привычном подходе к контенту:

🔴почему одних ключевых слов и SEO-страниц уже недостаточно;
🔴по каким сигналам ИИ определяет экспертность;
🔴зачем бизнесу собственные исследования, кейсы и уникальные данные;
🔴как строить материалы, чтобы из них было легко извлекать знания;
🔴и как проверить, цитируют ли ваш контент AI-поисковики.

В общем, поиск меняется — а вместе с ним приходится пересматривать и то, каким должен быть сайт и контент внутри него.

➡️ Подробнее о том, как подготовиться к эпохе нейропоиска читайте в новой статье на сайте kokoc.tech.

😍 Дизайн-дайджест: сайты, которые не ограничиваются скроллом

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

В новом выпуске смотрим, как дизайнеры используют анимацию, hover-эффекты и нестандартную навигацию, чтобы по-разному взаимодействовать с контентом.

▌Что особенно зацепило:

🔴 Bubbbly — рандомайзер, который выглядит как digital-игрушка

Рандомайзеры обычно довольно утилитарны: поле, кнопка, результат. Здесь механику сделали частью визуальной концепции — вместо обычных чисел или карточек бросаем желейные 3D-кубики.
• кубики приятно деформируются и сталкиваются друг с другом;
• можно менять их цвет и текстуру;
• настройки не перегружают экран и позволяют быстро собрать свой вариант;
• сам процесс рандомизации становится интереснее результата — хочется бросить ещё раз просто ради анимации.

🔴 Heron — AI-продукт с эстетикой технических чертежей

Визуальный язык сайта строится вокруг чертежей, схем и технических иллюстраций. Они появляются практически во всех блоках и помогают связать довольно разные части лендинга в одну систему.
• иллюстрации дополнены hover-эффектами и реагируют на действия пользователя;
• в блоке «для кого» вместе с выбранной профессией меняется и графика;
• карточки основателей сделаны не стандартными портретами, а продолжают общую визуальную концепцию;
• даже футер здесь полноценная часть дизайна, а не просто место для ссылок.

Особенно интересно, что тема AI раскрывается без привычных градиентов, светящихся сфер и абстрактных нейросетей.

🔴 Brikken — сайт креативного digital-продакшена с акцентом на сетку и движение

Здесь сетка не прячется за контентом, а становится заметным графическим приёмом и проходит через весь сайт.
• фоновая сетка задаёт структуру и ритм страницы;
• превью кейсов анимированы уже в обычном состоянии, а при наведении характер движения меняется;
• направления работы тоже собраны внутри сеточной композиции;
• за счёт повторения одного приёма разные по содержанию блоки выглядят частью одной системы.

Хороший пример того, как один простой графический элемент можно растянуть на весь лендинг и не превратить его в декоративный фон.

🔴 Geex Arts — CTA, который невозможно не заметить

Сайт дизайн-компании сразу начинает с очень крупного призыва к действию — кнопка занимает значительную часть первого экрана. И этот приём возвращается в финале страницы.
• 3D-анимации сопровождают пользователя практически на всём протяжении сайта;
• крупная типографика и объекты создают ощущение намеренно преувеличенного масштаба;
• огромный CTA в конце закольцовывает композицию и возвращает к главному действию.

Интересно посмотреть именно на работу с масштабом: здесь кнопка перестаёт быть небольшим интерфейсным элементом и сама становится частью визуала.

🔴 Wiki Spy — Википедия через PNG

Экспериментальный сайт превращает контент Википедии в визуальную навигацию. Вместо списка статей — множество PNG-объектов, за каждым из которых скрывается новая тема.
• при наведении на объект открывается большое поле связанных изображений;
• каждый PNG становится точкой перехода к следующей теме;
• по клику можно уйти уже на соответствующую статью Википедии;
• привычный поиск информации превращается в цепочку визуальных ассоциаций.

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


В этот раз особенно много примеров, где дизайн меняет не столько внешний вид сайта, сколько сам способ взаимодействия с ним. Забираем в референсы ✍️

#дизайндайджест

С Днём программиста! 🥳

Сегодня поздравляем тех, кто умеет превращать «а можно сделать вот так?» в работающие продукты.

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

С праздником!❤️👍

Помните эти задания из детских журналов и учебников: «найдите на картинке спрятанные предметы»? 👀

🎒 1 сентября — хороший повод достать из памяти этот навык. Мы подготовили свою версию, конечно же, про IT и Kokoc.tech!

Что нужно найти на картинке:

🔴 5 наших коллег: разработчика, тестировщика, дизайнера, проджекта и HR;
🔴 5 пасхалок к проектам Kokoc.tech — все они отсылают к реальным кейсам из нашего портфолио;
🔴 1 бонусную пасхалку, которая к кейсам не относится, зато хорошо знакома всем, кто использует двухфакторную аутентификацию 🔐

Некоторые спрятались довольно очевидно. А некоторые придется хорошенько поискать.

В общем, увеличиваем картинку, вспоминаем школьные журналы с заданиями на внимательность и начинаем поиски 🔎

Кто найдёт все 11 — тому почет и респект бесконечный от нашей команды.

А мы поздравляем всех с Днём знаний! Пусть в новом «учебном году» будет побольше интересных задач, новых открытий и поводов узнавать что-то новое 🍁🎒

🍐 Еженедельный дизайн-дайджест: сайты с характером

Иногда достаточно убрать логотип — и сайт становится сложно отличить от десятка других. А иногда бренд узнается буквально в каждой детали: в кнопках, анимации, движении текста и даже в том, как открывается новый экран.

На этой неделе смотрели как раз такие проекты. Очень разные по стилю и задачам, но каждый со своим визуальным языком.

▌Что особенно зацепило:

🔴 Butter — когда сайт говорит на языке самого продукта

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

Здесь особенно нравится, что анимация не выглядит чужеродной: продукт создан для работы с движением — и сайт сам постоянно находится в движении.

🔴 Pear — груша, возведенная в абсолют 🍐

Сайт digital-компании, который местами больше напоминает арт-проект.
• хиро-блок при каждом открытии выглядит по-разному;
• груша становится полноценным фирменным символом и появляется в самых разных элементах;
• необычная анимация при переключении карточек;
• объемные 3D-инпуты;
• и футер, до которого определенно стоит долистать.

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

🔴 Sentry — технический продукт без технически скучного сайта

Сервис для мониторинга ошибок и производительности приложений, но вместо привычного для B2B-инструментов интерфейса — довольно смелая визуальная подача.

• хиро сразу показывает характер бренда и при этом быстро объясняет продукт;
• внутри хедера спрятаны интересные hover-эффекты;
• отдельная находка — переключатель «без маркетинга», который буквально очищает страницу от маркетинговой подачи и оставляет только то, что важно разработчику.

Понравилось, как сложный developer-продукт показали на его собственном языке, но сделали это понятно и визуально интересно.

🔴 Rafael Cespedes — портфолио, которое можно рассматривать как интерфейс

• несколько способов просмотра проектов;
• возможность фильтровать работы и исследовать архив;
• интересная работа с сеткой и расположением проектов;
• минималистичный интерфейс, в котором главный акцент остается на самих работах.

Понравилось, что портфолио здесь показывает не только что сделал дизайнер, но и как он работает с визуалом и экспериментирует с digital.

🔴 Partizan — когда сами работы становятся интерфейсом

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

Сайт почти не конкурирует с портфолио за внимание — наоборот, весь интерфейс построен так, чтобы главным визуалом оставались сами проекты.

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

Забираем не конкретный стиль, а подход: искать для проекта собственный визуальный язык, а не просто собирать интерфейс из знакомых приемов.

#дизайндайджест