Веб-дизайн

eshulyndina 5 мая 2021 в 15:32

Цифровая доступность: пять ключевых проблем в интерфейсах. Совместный вебинар Яндекс.Практикума и Валерии Курмак

13 мая Яндекс.Практикум вместе с Валерией Курмак проводит открытый вебинар «Цифровая доступность: пять ключевых проблем в интерфейсах». Вебинар будет полезен дизайнерам и разработчикам интерфейсов, которые хотят научиться проектировать доступно.

Юзабилити строится на восприятии и взаимодействии. Но что, если пользователь для восприятия интерфейса масштабирует его на 400, 600 и более процентов? Как тогда работают выпадающие списки, сторис и другие такие обыденные для каждого дизайнера и разработчика элементы?

На вебинаре слабовидящий Дима Глюз покажет на примерах, какие барьеры он встречает в интерфейсах. А руководитель продуктового дизайна Яндекс.Практикума Сергей Кудинов и руководитель фронтенд-разработки Давид Роганов расскажут, как не создавать такие барьеры при проектировании.

Читать дальше →

На GitHub введут темный режим спустя 7 лет после первых просьб о нем
26 ноября 2020 в 10:46 Комментарии: 24
GeekUniversity открывает набор на факультет веб-дизайна
16 сентября 2019 в 17:31 Комментарии: 0
Самую старую в мире работающую веб-камеру FogCam (г. Сан-Франциско, США) отключат в конце августа после 25 лет работы
20 августа 2019 в 19:17 Комментарии: 11
CSS 20 лет
19 декабря 2016 в 15:36 Комментарии: 7
Видеохостинг LiveLeak с роликами без цензуры закрылся спустя 15 лет работы
13:08 Комментарии: 3
Microsoft представила новый шрифт интерфейса Windows 10
вчера в 14:38 Комментарии: 8
Слайсер с функциями моделирования. Масштабное обновление ideaMaker
5 мая 2021 в 11:13 Комментарии: 0
Google трансформирует офисы для сотрудников, которые возвращаются туда после многих месяцев удаленной работы
3 мая 2021 в 11:15 Комментарии: 10
В Facebook показали, как приблизить компьютерное зрение к «здравому смыслу»
1 мая 2021 в 09:20 Комментарии: 10
Обновление для Google Assistant: помощник стал лучше понимать имена и контексты
29 апреля 2021 в 10:36 Комментарии: 1

host_m 5 мая 2021 в 09:55

Почему стоит использовать тег <picture> вместо <img>

Перевод

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

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

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

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

Читать дальше →

SerVB 4 мая 2021 в 19:37

Практика по Котлину: Создание веб приложений на React и Kotlin/JS

Перевод
Tutorial

От переводчика.

Привет! Про Kotlin есть стереотип, будто бы это язык для разработки только под Android. На самом деле, это совсем не так: язык официально поддерживает несколько платформ (JVM, JS, Native), а также умеет работать с библиотеками для этих платформ, написанных на других языках. Такая поддержка "мультиплатформенности" позволяет не только писать всевозможные проекты на одном языке в единой форме, но и переиспользовать код при написании одного проекта под разные платформы.

В этой статье я перевожу официальный туториал Kotlin Hands-On о создании веб сайтов на Котлине. Мы рассмотрим многие аспекты программирования на Kotlin/JS и поймем, как работать не только с чистым DOM. В основном будем говорить о React JS, но также коснемся системы сборки Gradle, использования зависимостей из NPM, обращения к REST API, деплоя на Heroku, и в итоге сделаем приложение-видеоплеер.

Текст ориентирован на тех, кто немного знает Котлин и не знает или почти не знает Реакт. Если вы более опытны по этим вопросам, то части туториала могут показаться вам чрезмерно разжеванными.

kotlin-react

Читать дальше →

MagisterLudi 4 мая 2021 в 14:27

Базовая структура HTML-документа с объяснением каждой строчки

Перевод

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

Под катом — разбор каждой строчки

Читать дальше →

honyaki 30 апреля 2021 в 14:21

Примеры применения переменных CSS на практике

Перевод
Tutorial

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

Приятного чтения

honyaki 28 апреля 2021 в 17:38

Контейнерные запросы в CSS

Перевод
Tutorial

Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в Chrome Canary

О контейнерных запросах запомнилось много шуток, но они, наконец, здесь. Специально к старту нового потока курса по Frontend разработке, делимся с вами статьей, в которой рассказывается зачем нам нужны контейнерные запросы, как они облегчат нашу жизнь, и, самое важное, ваши компоненты и макеты станут мощнее. Если вы взволновались так же, как и я, давайте углубимся в тему. Вы готовы?

Tagfelix 22 апреля 2021 в 13:16

Как создают и поддерживают веб-страницы tinkoff.ru

Всем привет! Меня зовут Сергей Михайлов, в Тинькофф я работаю руководителем интерфейсов: занимаюсь внутренними сервисами, а также отвечаю за дизайн-составляющую Отдела привлечения клиента. Расскажу, как мы быстро собираем страницы с помощью нашего конструктора.

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Picard 15 апреля 2021 в 13:57

CSS: работа с текстом на изображениях

Перевод
Tutorial

Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.

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

Приятного чтения

sasha-who 15 апреля 2021 в 09:44

Нестандартные шрифты: как подключить и оптимизировать

Tutorial

Самый простой вариант — вообще не подключать сторонние шрифты. Можно пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

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

alexshy 7 апреля 2021 в 07:20

Веб-империя правительства UK: все во имя человека, для блага человека

Цифровизация сейчас в повестке дня едва ли не любого государства. Но все понимают ее по-разному, по-разному ее начинают, до разной степени готовности и продуманности доводят и приоритеты расставляют по-разному.

Для кого-то и у кого-то цифровизация – это контроль и запреты, для кого-то и у кого-то – удобство и польза каждого отдельного гражданина.

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

ПРЕДУПРЕЖДЕНИЕ: немного лонгрид, вынужден сразу предупредить. Но материал задуман и предназначен для других целей, так что короче никак. Поэтому, кому не интересно, не тратьте время, а кому интересно, наберитесь чуточку терпения.

Сгораю от любопытства

host_m 2 апреля 2021 в 10:20

Крутые трюки с переменными CSS

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.

Читать дальше →

host_m 1 апреля 2021 в 10:40

Font size бесполезен, давайте это исправим

Перевод

Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:

Если мы измерим сами буквы, то нигде не найдём числа 32:

32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?

Читать дальше →

synedra 31 марта 2021 в 10:04

Ущерб от баннерной рекламы

Перевод

Очевидно, баннерная реклама раздражает пользователей. Но насколько сильно? Возможно, она настолько всех бесит, что доход от рекламы не стоит потерь в трафике. А возможно, и нет. Если коротко, то даже единственный небольшой баннер снижает трафик примерно на 10%. Подробный анализ — под катом.

dyakonov_design 30 марта 2021 в 19:02

Найди меня, если сможешь

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

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

Aigul_ag 30 марта 2021 в 15:23

Гайд по UI анимации. Как начать анимировать интерфейсы

Привет! Меня зовут Айгуль, я продуктовый дизайнер в Райффайзенбанке, а до этого работала в Mail.ru Group, OneTwoTrip и приложила руку к нескольким стартапам. Как-то я взяла на себя задачу продумать систему UI-анимаций для дизайн-системы. Но когда я начала над ней работу, удивилась, как мало написано практических материалов. В статьях часто перечисляют правила анимации Уолта Диснея, которые никак не помогают в UI, или авторы делают подборку красивых гифок без намека на то, как такое реализовать.

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

prctmlm 29 марта 2021 в 08:56

Они рисуют дыры в бюджете. Что не так с вашими дизайнерами?

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

cat

Читать дальше →

Itelma 28 марта 2021 в 15:30

Под капотом у Emoji

Перевод

В течение последних нескольких недель Nikita Prokopov внедрял поддержку эмодзи для Skija. Он решил поделиться несколькими мелкими деталями того, как это «самое большое новшество в человеческом общении со времен изобретения буквы

» работает под капотом.

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

Unicode

Каждый символ на компьютере кодируется числом. Самая популярная кодировка — Unicode, а две самые распространенные подвариации — UTF-8 и UTF-16.

Unicode выделяет 2²¹ (2 млн) символов, назывемых «codepoints». Из этих двух миллионов сейчас определены только ~150k символов. В эти 150 000 символов впихнули все языки, мёртвые и живые и прочие украшательства. Можно использовать различные шрифты, писать задом наперед и кверх ногами:

, а также отобразить «GHz» как один глиф:

.

Направленная вправо двуглавая стрела с оперением и двумя вертикальными штрихами:

или семиглазый монстр:

. И утка:

Читать дальше →

ArtRom 25 марта 2021 в 14:58

Как мы визуальный конструктор обучения цифровых агентов разработали

И снова привет, Хабр! В прошлой статье мы рассказывали, как создаем голосового агента (предпочитаем этот термин, а не "голосовой робот") всего на 500 записях. Если кратко вспомнить содержание, то мы научились успешно обучать агентов на очень небольшой базе звонков.

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

mikerere 25 марта 2021 в 10:25

Странный эффект вкладок браузера и белых сайтов

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

dyakonov_design 19 марта 2021 в 17:26

Ховеры бывают разные

Когда у нас в eLama компонентов в библиотеке стало достаточно много, мы заметили, что ховеры не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д.

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

Дизайн спасет мир

Все подряд

Лучшие

Авторы

Компании

Цифровая доступность: пять ключевых проблем в интерфейсах. Совместный вебинар Яндекс.Практикума и Валерии Курмак

Новости

Почему стоит использовать тег <picture> вместо <img>

Практика по Котлину: Создание веб приложений на React и Kotlin/JS

Базовая структура HTML-документа с объяснением каждой строчки

Минуточку внимания

Примеры применения переменных CSS на практике

Контейнерные запросы в CSS

Как создают и поддерживают веб-страницы tinkoff.ru

CSS: работа с текстом на изображениях

Нестандартные шрифты: как подключить и оптимизировать

Веб-империя правительства UK: все во имя человека, для блага человека

Крутые трюки с переменными CSS

Font size бесполезен, давайте это исправим

Ущерб от баннерной рекламы

Найди меня, если сможешь

Гайд по UI анимации. Как начать анимировать интерфейсы

Они рисуют дыры в бюджете. Что не так с вашими дизайнерами?

Под капотом у Emoji

Unicode

Как мы визуальный конструктор обучения цифровых агентов разработали

Странный эффект вкладок браузера и белых сайтов

Ховеры бывают разные

Вклад авторов

Читают сейчас

Самое читаемое

Минуточку внимания

Ваш аккаунт

Разделы

Информация

Услуги