Веб-дизайн *

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

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

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

В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать.

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

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

Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

Импортозамещение никого не щадит. Недавно мы наткнулись на российский аналог Википедии, который нужен для… а вот на этот вопрос мы и постарались ответить в статье. Зачем было создавать нашу Википедию, если есть уже привычный западный аналог? Давайте разбираться.

Всем привет! Меня зовут Аня Ведяпина — я UX-писатель слэш контент-дизайнер, сейчас в QIC, до этого в Movavi, Кошельке и Т-Банке. Вот уже 5 лет кручу смыслы вокруг проблем бизнеса вместе с дизайнерами, аналитиками и продактами и упаковываю результат в складный интерфейсный текст. А иногда и нет, и это тоже часть моей работы.

Я была первым и долгое время единственным специалистом в двух компаниях, где внедряла процессы с нуля. Поэтому решила собрать уроки, которые я из этого вынесла. Статей на тему написано неприлично много, поэтому никакой претензии на game-changing insights, только личный опыт. Погнали!

Мозг людей с эпилепсией похож на электрическую цепь с перегрузкой. Резкие вспышки света или мигание (3+ раз в секунду) вызывают «короткое замыкание» — приступ. Дизайн с такими эффектами становится буквально опасным».

Каждый год 4 апреля веб-разработчики и дизайнеры отмечают неофициальный, но очень символичный праздник — День 404. Это повод вспомнить о культовой ошибке, которая знакома каждому пользователю интернета, и отметить креативность, с которой её можно обыграть.

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

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

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

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

25 апреля в Екатеринбурге пройдет одна из самых грандиозных ИТ-конференций на Урале: DUMP 2025. Пора рассказать о том, что ждет вас в каждой из 11 секций. Стартовать решили с самой красивой секции, спикеры которой ежегодно поднимают градус эстетики до максимальных значений.

За время своего существования сайты в интернете пережили не одну революцию, превратившись из простых страничек (и даже таблиц) в многофункциональных монстров в виде веб приложений. Сначала пользователей надо было удерживать на страницах, так в моду вошли пестрые цвета, анимации и flash player. Развился JS, веб перешел на HTML5, что подарило сообществу огромный функционал в плане технических возможностей и параметров кастомизации сайтов. Интернет быстро перестал быть местом для гиков, в интернет пришли серьезные дяди с серьезными бизнесами, которым нужно было солидно выглядеть на фоне конкурентов и продавать свои услуги. Начались огромные исследования, составление тенденций и рекомендаций, куча материалов от дизайнеров как надо делать сайты, это все переосмысливалось и обновлялось. Появились готовые библиотеки по работе со стилями, сильно упростившие процесс разработки.

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

Важной частью работы дизайнеров является передача интерфейсов в руки фронтенд-разработчиков (mobile и web). Но, между творческим замыслом дизайнера и его воплощением в коде может возникнуть немало трудностей. 

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

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

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

Представьте себе рыбу. Она плывёт по течению, думая, что сама выбирает путь. Но стоит взглянуть шире — и становится видно: течение, водовороты, подводные скалы формируют её маршрут гораздо больше, чем её воля...

Всем привет! Это мой первый пост на хабре, и я решил рассказать о своём тестовом задании на позицию Junior Product Designer. C радостью поделюсь подробностями, факапами и полезными выводами, которые сделал в процессе.

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

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

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

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

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

Делимся опытом работы над интерфейсами антивирусного программного обеспечения PRO32. Наша задача заключалась в обновлении дизайна и улучшении пользовательского опыта. Как мы справились с этой задачей, с какими трудностями столкнулись и как в итоге ускорили процесс работы — рассказываем в статье.

Привет, Хабр! На связи UX-редакция ecom.tech. Наша команда занимается созданием текстов для интерфейса Самоката. Мы помогаем поддерживать голос бренда, делаем приложение и сайт удобным и понятным для пользователя. В этой статье расскажем, как сделать сайт понятным, писать просто о сложном и не раздражать пользователей текстами. Рассказываем всё на примере сайта Самоката.