Веб-дизайн *

Сейчас модно гадать, какими станут сайты в ближайшем будущем. Одна из самых «гениальных» идей — оставить на экране одну большую строку поиска с голосовым управлением. 

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

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

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

Проект HTTP Cats (GitHub) позволяет использовать котиков в разных ситуациях для объяснения сетевых ошибок и проблем в работе веб-систем.

Хабровчане, почему вы скрываете посты из ленты?

Заметил, что у статей больше просмотров, чем у постов. Даже при том, что в пост по идее заходить не нужно чтобы засчитался просмотр.

Лично я скрыл их из-за того, что у них нет предпросмотра и приходится проматывать всю ту дичь, а не только введение.

А вы?

П.С.
Это примерно как опрос в интернете об использовании интернета.

UI-тренд, который усиливает UX

Жидкое стекло — следующий шаг в трендах UI после плоского дизайна, материала и стекломорфизма. Это новая модель восприятия интерфейса: прозрачные слои создают глубину, реагируют на движение и формируют эффект «живой» поверхности.

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

Задача дизайнера — точный баланс
Главная сложность — читаемость. Прозрачность легко снижает контраст, поэтому работа с фоном, светом и плотностью слоев становится ключевым навыком. Эффект работает только при строгой визуальной дисциплине.

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

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

Хотели бы вы использовать жидкое стекло в дизайне для своего продукта?

Представлен ИИ-сервис Vibetest Use, который тестирует сайты на прочность и ищет уязвимости. Параллельно запускаются сразу несколько проверок с помощью ИИ, которые ищут ошибки, битые ссылки или проблемы в дизайне. Работает на базе Claude. В качестве альтернативы можно запустить с бесплатным API от Google через Cursor.

Cайты в ЕС переходят на тёмную тему, чтобы «снизить углеродный след».

Заключительный пост из серии про веб-дизайн прошлого.

5/5 — Альтернатива HeadHunter, где действительно были годные вакансии. Возможно, кто-то из вас вспомнит сообщество «ВДХЛ» в Питере

Продолжаю серию о винтажном веб-дизайне.

4/5 — в 2013 Windows 8 была на волне трендов у заказчиков. И каждый заказ получался, как очередная Nokia (в виде помады, например)

Обычно в начале карьеры дизайнеров дико бесит, когда клиент советуется с женой/коллегами/котом. 

Тем временем, основной показатель роста — не бояться неидеального процесса и уверенно нырять в хаос с головой. Мнения коллег клиента? Отлично, бесплатная фокус-группа! Десятки итераций? Прекрасно, мы в творческом потоке! Это и есть та самая «магия опыта».

Вы называетесь синьор и вас до сих пор бомбит от правок? У меня для вас плохие новости

Продолжение серии публикаций про древние образцы веб-дизайна. На этот раз из 2014.

3/5 — Какой, простите, нейродизайн и тепловые карты с фокусом внимания? Образы и ощущения, вот что работает по-настоящему

Продолжение серии про образцы веб-дизайна из 2013.

2/5 — UI был слишком прогрессивен для своего времени (да и для нашего тоже), и его реализовали частично. Удивительно, но этот сайт до сих пор жив!

Ну что, показать вам образцы веб-дизайна из 2013?) Хабр не дал прикрепить несколько картинок к посту, поэтому это будет серия.

1/5 — Портал о стройке

Почему азиатский UX работает по другим законам?

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

Если вы тоже задаете эти вопросы, то статья «Как проектировать интерфейсы по азиатски: холистически и беспощадно» точно для вас! Расскажем чему западным и российским дизайнерам стоит учиться у WeChat, Naver, KakaoTalk, Alipay, Rakuten и TaoBaо.

Если хотите выйти за границы привычных паттернов и понять, как строится неочевидный, но очень эффективный UX восточных продуктов — обязательно прочтите!

На сайте «I'm absolutely right!» разработчик выкладывает, сколько раз чат‑бот Claude Code сказал эту фразу каждый день.

Может ли кто-нибудь создать Википедию Вселенной, других цивилизаций?

По стилю - современная Википедия (или похоже), но разных миров и как будто с информацией из условного 100к-ого года нашей эры, где человечество выжило и знает намного больше о Вселенной. Например, чтобы Проксима b была с картой, историей и т.д.

Да, есть много фантастики, но целая фантастическая Википедия - этого у нас пока нет. Есть множество Вики по различным сюжетам, но это не то же самое. В "Википедии Вселенной" может быть надпись, которую видят все новые пользователи: "Что, если бы мы знали намного больше о Вселенной? Если бы у нас были Википедии других цивилизаций? Этот проект - фантазия людей и ИИ на тему", а дальше или случайная генерация одной из "Википедий будущего", или несколько на выбор, или одна.

Genspark запустил AI Designer для автоматической генерации брендинга

Компания Genspark представила AI Designer — инструмент, который создает полную систему брендинга от логотипа до веб-сайта по одному текстовому запросу. Новинка интегрирована в экосистему Genspark Super Agent и доступна бесплатно через веб-интерфейс.

Архитектура и возможности

AI Designer работает через агентскую архитектуру Genspark, планируя задачи и распределяя их между специализированными модулями. Система создает согласованные дизайн-активы без необходимости ручной координации между различными инструментами.

Генерируемые материалы включают:

• Логотипы и цветовые палитры

• Дизайн интерьеров и упаковки

• Веб-сайты и лендинги

• Рекламные макеты

• Контент для социальных сетей

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

Техническая реализация

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

Особенность системы — шаблоны, которые отличаются от стандартных решений типа Canva образца 2010-х годов. Алгоритм адаптирует дизайн под конкретную задачу, а не использует готовые шаблоны.

Практическое применение

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

Целевая аудитория:

• Основатели стартапов

• Маркетологи

• Малый и средний бизнес

• Команды, требующие быстрого создания брендинга

Контекст и конкуренция

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

Решение конкурирует с такими сервисами как Midjourney для генерации изображений и Canva для дизайна, но предлагает комплексный подход к созданию брендинга.

Доступность

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

Репозиторий react-bits содержит тысячи анимированных компонентов на React для создания веб-проектов и интерфейсов, а также большое количество элементов — кнопки, карточки, меню, необычные курсоры, анимированные списки и декоративные фишки. Каждый из компонентов можно протестировать в браузере — проверить работу и то, как он будет смотреться в вебе. Элементы интегрируются в проект за один клик.

Представлена библиотека красочных анимаций на чистом JS для разных проектов All-in-one animation engine. Все анимации интегрируются за один клик и разобраны по типам: скроллбары, загрузчики, меню, переходы, счётчики или просто стилизованные элементы.

Как сделать так, чтобы дизайнер и фронтендер не ругались

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

1. Больше общаться.

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

Кроме того, если подключать фронтендера на этапе разработки прототипа, он сразу сможет подсказать, что будет сделать легко, а что сложно.

2. Следить за актуальностью UI-кита.

Это база. Чтобы всем было удобно работать, в макете должен быть UI-кит. Разработчик сразу будет видеть, какие шрифты и UI-элементы возникнут в проекте. И конечно, UI-кит важно оперативно обновлять и сообщать об этом отделу фронтенда.

3. Внедрять общий процесс на всех уровнях.

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

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

Иконка WhatsApp* на сайте: почему цвет фона лучше не менять? 

Я сознательно убрал логотип WhatsApp* с сайта своей адвокатской практики. Это было единственное изменение в предложенном макете дизайна. 

Иконка WhatsApp* располагалась почти на всех страницах сайта: "Главная", "Контакты", "Адвокат" и так далее. Потенциальный клиент мог кликнуть по иконке и создать чат со мной. 

Но был нюанс - мой веб-дизайнер представил иконку WhatsApp*, заменив на ней фон. 

Изобразительный товарный знак WhatsApp* известен цветовым сочетанием белого, серого и зеленого. На моем же сайте использованы другие основные цвета: синий, желтый и белый. 

Веб-дизайнер отрисовал иконку WhatsApp* в цветах моего сайта. Получилось стильно, но рискованно. Почему? 

В самом размещении логотипа WhatsApp* на сайте нет нарушения интеллектуальных прав правообладателя товарного знака - ВотсАпп ЛЛК (Калифорния, США). Тому есть простое объяснение. 

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

Например, вы видите сайт с именем "WhatsApp*" в доменной зоне ".com" и понимаете: здесь предлагаются к продаже товары правообладателя этого товарного знака. 

В моем случае логотип WhatsApp* на сайте не предназначен для индивидуализации моих услуг под брендом "WhatsApp*". Логотип лишь информирует о том, что клик по нему переведет пользователя сайта в чат с адвокатом - владельцем сайта. 

Чисто информационная функция. Как следствие - изображение логотипа занимает незначительное место на экране сайта либо помещается в один ряд с иконками иных способов связи: e-mail, телефон и так далее. 

Другое дело - возможность нарушения авторских прав: 

1. Картинка товарного знака WhatsApp* кем-то нарисована. 

Значит, есть автор произведения искусства. И у него есть право на единоличное использование картинки, в том числе в сети "Интернет". 

2. Автор картинки передал интеллектуальные права на нее компании - владельцу товарного знака WhatsApp*. И компания запретила менять цвет в логотипе. 

Об этом я узнал из Условий предоставления услуг WhatsApp*: пользователю разрешено использовать логотип с учетом Руководства по фирменному стилю WhatsApp*. 

В Руководстве отсутствует разрешение менять фирменные цвета. Более того, в разделе "Вопросы-ответы" дан прямой запрет на изменение цвета в логотипе. 

3. Я рискую получить иск о нарушении исключительного права на произведение искусства. 

Логотип WhatsApp* зарегистрирован в России, что позволяет его владельцу обратиться с иском в суд. Основание - переработка логотипа без разрешения владельца и размещение переработанного произведения в сети "Интернет". 

Поэтому вы не найдете на моем сайте иконку WhatsApp*: ее фирменный стиль выбивается из моего стиля, а изменение стиля WhatsApp* незаконно. 

Поговорите с вашим адвокатом. Он предложит вариант оформления  на сайте кнопки, которая ведет на чат в мессенджере WhatsApp*. 

Узнать мой вариант решения можно, перейдя на сайт моей адвокатской практики. Ссылка в профиле. 

Мысли вслух: при желании можно оспорить сам факт создания логотипа, ведь произведение должно носить творческий характер. Но есть ли творчество в том, чтобы на зеленом фоне круга поместить телефонную трубку? 

* Деятельность компании Meta Platforms Inc. (Facebook и Instagram) на территории РФ запрещена.