Uplab. Digital & Design

«Придумай шутку про нейронные сети», — попросили мы ChatGPT. Он ответил: «Нейронные сети — это как волшебный пендель, который превращает обычные фото в шедевры!». Поспорить сложно. Но, кажется, юмористы могут быть спокойны — их работу искусственный интеллект вряд ли украдет 🥴 А что насчет вашей? Про нейросети сегодня можно услышать из каждого утюга. Они пишут тексты, озвучивают видео, создают изображения, применяются в медицине и промышленности. Но знаете ли вы точно, как работает эта технология? А то обидно получится – искусственный интеллект отобрал у вас работу, а вы даже не знаете, почему. 👾 В новой статье в блоге рассказываем про нейронки простым языком. Самое время разобраться!

• nowyteatr.org — основные разделы сайта в хедере сопровождаются выпадающим меню. Каждый пункт хедера дополнен геометрической фигурой — акцентируем внимание пользователей. Что по навигации: есть ссылки на основные разделы сайта, смена языковой версии, поиск и логотип для переключения на главную страницу. Из необычного — расположение элементов: поиск разместили слева, а лого — справа. Хотя все привыкли делать наоборот. • grids.obys.agency — пример хедера образовательного проекта, который посвящен сеткам. Задача этого хедера: дать быстрый доступ к ключевым разделам сайта. Из навигации доступны ссылки на основные разделы, логотип для перехода на стартовую страницу. А еще — переключатели режимов отображения страницы: с сеткой и без, в ярком желтом или сдержанном сером. Классный игровой элемент, на который приятно позалипать. Хедер сайта — это область захвата внимания пользователей. Три ключа к успеху: удобство, логичность и отсутствие перегруженности — profit 🤌

• qodeinteractive.com/catalog — пример хедера в боковой части экрана. Его задача: предоставить пользователю быстрый доступ к каталогу, который будет доступен на любой странице сайта. • springsummer.dk — оригинальность решения — в боковых карточках со ссылками на ключевые разделы, которые прибавляются по мере скролла страницы и являются частью хедера. При этом на разных страницах можно наблюдать разные карточки. Наличие локации и местного времени в хедере — отличное решение для сайта компании, которая сотрудничает с международными клиентами.

• b-egg.farm — минималистичный хедер, где из навигации доступно бургер-меню и лого компании для перехода на главную страницу. Такое решение часто используют на имиджевых сайтах с упором на эффектный визуал — вся навигация прячется в бургер. Задача этого хедера: дать быстрый доступ к основным пунктам меню, при этом не перегружая экран. Что удобно: хедер доступен в любой части страницы. Что можно улучшить: на элементах навигации напрашивается ховер. • rawlab.co — в хедере есть логотип и кнопка для перехода на темный режим, а навигация по сайту при этом расположена внизу экрана — оригинально. Темная тема не только подчеркивает преимущества продукта и добавляет сайту премиальности, но и транслирует заботу о пользователе, снижая зрительное напряжение. Что можно улучшить: было бы уместно появление хедера при скролле вверх, сейчас он доступен только вверху страницы.

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

Чтобы пальчик не болел, к нему нужно приложить подорожник. А что делать, если заболел целый сайт? К нему ведь подорожник не приложишь. Часто бывает, что позиции в выдаче, трафик или конверсии на сайте падают, а вы не понимаете — почему? В таких ситуациях нужно провести анализ сайта. Он поможет выявить проблему и найти решение. Однако видов анализа сайта очень много: от сквозной аналитики до SEO-аудита. В новой статье рассказываем, чем отличаются разные виды анализа и когда какой использовать. А еще делимся полезными инструментами для каждого из них: платными и бесплатными. Материал уже на сайте 🤝

3. career.inno.tech — повествование начинается с историй успехов сотрудников, тут же кнопка с призывом присоединиться к команде. Далее пользователю рассказывают о миссии, преимуществах и локациях. Минималистичные и понятные схемы карьерной лестницы по каждому направлению усиливают лояльность соискателей и дают четкое представление о работе в компании. 4. experience.covermymeds.com — эффектный карьерный сайт медицинской компании, которая доставляет лекарства людям. Идея доставки и помощи отражена с помощью линий, которые рисуются в 3D пространстве с помощью технологии WebGL и имитируют акварельные штрихи. На протяжении всего сайта видим плавно заанимированные частицы, которые усиливают степень погружения в трехмерное пространство. А теперь внимание, вопрос: какой вариант запал вам в сердечко? 1 — ❤️ 2 — 🔥 3 — 👍 4 —⚡️

1. guild.com — в первом экране акцент сделан на крупном слогане и имиджевом фото с сотрудником, где по клику можно ознакомиться с его историей успеха. По скроллу фото дополняется яркими иллюстрациями, которые погружают и притягивают внимание. Преимущества компании показали через крупные яркие блоки, дополненные иллюстративной графикой. Лайк за смелое решение в футере — логотип компании расположен крупно во весь экран, вместо привычного мелкого лого с краю. 2. lifeatspotify.com — карьерный сайт Spotify. В глаза бросаются карточки вакансий — они постоянно появляются на экране в виде месседжей. Это отличный пример нативной анимации, которая не отталкивает. На обложке — крупный привлекательный имидж молодой девушки с телефоном в руках — так пользователь может ассоциировать себя с персоной. Интересный блок с локациями в виде бегущей строки с фотографиями — по клику на город можно ознакомиться с офисом, посмотреть вакансии и свежие новости.

Главная цель карьерного портала — привлечь сотрудников. А еще с его помощью компании рассказывают соискателям о корпоративной культуре, выделяются среди конкурентов и раскрывают HR-бренды 👇

Иногда вы встречаете пост в соцсетях и понимаете: «Вот оно. Это знак. Эти ребята все про меня знают». А все потому, что мы наконец рассказали, что нужно уметь начинающему дизайнеру. В статье говорим про хард-скиллы: композицию, типографику, знание инструментов. А еще про софт-скиллы: умение анализировать чужие дизайн-решения и пояснять за свои. Вот вы знали, например, что все посты про дизайн в нашем канале пишут сами дизайнеры? Ведь насмотренность и навыки аргументации очень важны для профессионального развития. Короче говоря, приготовили для вас много-много пользы. Бегом читать! 🫶

📙 Редизайн сайта онлайн-бухгалтерии «Моё дело» Мы обновили дизайн и передали новый ToV онлайн-бухгалтерии: «Моё дело — это все еще пиджак, но надетый уже на футболку». Яркое цветовое кодирование услуг, живые фотографии сотрудников и блоки в виде пиксельных фигур рушат стереотип о том, что бухгалтерия — это скучно и строго. Кроме визуала мы поработали и над UX, чтобы эффективнее конвертировать посетителей сайта в клиентов: • сформировали персоны и на их основе построили CJM; • исследовали тенденции отображения материалов блога и адаптировали дизайн, учитывая нужды клиента и поведение пользователей; • сформировали список гипотез, которые нужно будет протестировать после релиза нового дизайна и сбора достаточного количества данных. Подробности на сайте 🤝 А пока ставьте ❤️‍🔥, если такой сайт бухгалтерии вам по душе!

• tapioca.xyz — промо-сайт приложения для покупки криптовалюты с необычной для этой сферы цветовой палитрой и стилистикой. Эффектность сайта — в кинетической типографике. С первого экрана увлекает динамика, обилие визуальных приемов и непредсказуемая смена экранов по скроллу. Авторы используют вариативный шрифт, экспериментируя с его размером, начертанием и заливкой. • lekollektiv.ch — никто не говорил, что сайт должен быть длинным. Здесь почти все уместилось в один экран. В глаза бросается зеркальное отражение букв в шапке сайта при наведении и анимация изменения текста через перебор символов. Основная часть разделена на два блока. Разница в цвете и плотности контента делает блоки контрастными. Таким образом дизайнер управляет вниманием, что в результате приводит нас к контактам в правом нижнем углу — минимальными средствами сайт решает свою задачу. Мнения? ⚡️— люблю картинки ✍️ — текст форева

• timrijkse.nl — сайт-портфолио голландского фронтэнд-разработчика. Автор убедительно демонстрирует свое умение работать с текстом и пространством в вебе. Ограничив себя только черным и белым цветом, он использует разнообразные приемы подачи информации. Не стесняется использовать целый экран для одного слова или фразы. Короткий рассказ «о себе» превращается в увлекательную и визуально-насыщенную историю, которую хочется скроллить до конца. • constancesouville.com — еще одно портфолио фронтэнд-разработчика с выразительными визуальными приемами. На главном экране замечаем простую, но непривычную навигацию — три кнопки на основные разделы размещены среди текста. Автор использует знакомые трендовые приемы — смещенную сетку и комбинацию гротеска и антиквы. Отдельного внимания заслуживает анимация кнопок на сайте — все они, включая ссылки на соцсети, выполнены в виде карточки с закругленным углом. При наведении в них появляется крупный бегущий текст, создавая контраст с другими элементами карточки.

Есть мнение, что эффектный сайт непременно должен содержать фотографии, видео, векторную или 3D-графику. Но вот примеры сайтов, на которых главный и единственный герой — текст 🤌

Перефразируя известный твит: «Сайты — они как кошки... Много их!». Сайты можно классифицировать по технологии создания, сложности исполнения, и даже назначению. Вы знаете, например, что такое варезники? А чем конструкторы отличаются от движков? Нет? Ну тогда вам одна дорога: к нам в блог. Ведь про все виды сайтов мы рассказали в новой статье 😏

• en.manayerbamate.com — задача этого футера: оставить пользователя на странице и повысить лояльность к продукту. В последнем блоке нам предлагают поиграть. Из навигации доступны ссылки на социальные сети и информационные страницы. Круто, что хедер всегда присутствует на странице, и пользователю в любой момент доступна вся навигация. • aristidebenoist.com — дизайнер использовал смелое решение в виде крупной подачи адреса студии во весь экран, тем самым предлагая пользователю посетить офис. Есть и развлекательный момент — возможность смены цветового решения. Из навигации доступна кнопка, которая возвращает наверх страницы, и ссылка на портфолио дизайнера. Вывод простой: футер может быть нескучным. Он может цеплять внимание и работать на весь дизайн вашего сайта 🤝

• mafanfa.com — необычная подача ссылок на основные разделы сайта в виде геометрических форм. Из навигации доступны ссылки на основные разделы сайта, социальные сети и возможность оставить почту для связи. Есть удобная функция выбора валюты, в которой будут отображаться все товары на сайте — пользователю не придется самостоятельно конвертировать, чтобы понять стоимость. • groupe.castoretpollux.com — большое внимание уделено разделам сайта, они оформлены крупно. Весь футер разбит на четкие ячейки, что сразу структурирует подачу информации. Из навигации пользователю доступны услуги, контакты и информационные страницы. • takeboost.com — акцент сделан на крупной надписи «получить продукт». Цель такого решения: склонить пользователя к покупке. Из навигации доступны основные разделы сайта, ссылки на социальные сети и контакты для связи.

Футер, или «подвал» сайта — это блок, который находится в самом низу на всех страницах. Он содержит полезную, но не первостепенную информацию. В футер можно вынести копирайт, название компании, контакты и ссылки на внутренние страницы сайта. Ловите 5 примеров для вдохновения 👇

Критикуя — предлагай. Таким лого цифрового рубля видит наш арт-директор Петр 🤌 Битве быть! 🌚 , если вы за исходник ❤️‍🔥 , если вы за лого от Пети

У цифрового ₽убля появился логотип Мнения? 🙂 Наше вот: Лого хорош простотой и узнаваемостью. На этом плюсы — всё. Что плохого? Геометрия. Знак рубля как будто случайно прижат к левому краю круга, что делает его неустойчивым, а касание буквы Р верхушкой границ круга создает визуальное напряжение. Горизонтальные перекладины искусственно вытянуты влево. В маленьком формате перекрестия в левой части знака начинают рябить. А еще буква Р и круг разной толщины. Зачем — не ясно.