Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее. Начнём со ссылок, которые обозначаются в HTML тегом . Читать далее
Подробнее
Как делать дизайн для бизнеса и больших корпораций по всему миру? В чем его отличие от дизайна для В2С? Какие есть особенности? В чем сложности работы и подводные камни? И может ли В2В быть интереснее и увлекательнее B2C? Я заметила, что статей и выступлений о дизайне в В2С намного больше. Даже если в названии статьи так прямо не говорится, чаще всего описывается специфика или опыт именно работы над В2С-продуктами. Про В2В говорят намного меньше, хотя, на мой взгляд, это ничуть не менее…
Подробнее
Привет! Меня зовут Сергей Топунов, я фронт-разработчик в SM Lab. Недавно мы сделали редизайн одной из наших внутренних систем, о чем я и хочу вам сегодня рассказать. «Оценка вклада» — это внутренняя Backoffice-система, которая нужна для регулярной оценки сотрудников. Она позволяет отметить точки роста, рабочий прогресс коллег, а также получить отзыв от других сотрудников. Основная задача, которая стояла перед нашей командой, заключалась в том, чтобы качественно и за ограниченное время…
Подробнее![[Перевод] CSS сolor-сontrast(): пошаговое руководство](https://habrastorage.org/getpro/habr/post_images/274/5f5/bf5/2745f5bf5e937166b62269f323afa7f5.png)
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его. Функция color-contrast() используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с…
Подробнее
Во всех браузерах элементу body через таблицу стилей по умолчанию добавляется внешний отступ 8px. Но почему именно 8px? Разбираемся вместе с автором книги Jump Start Sass: Get Up to Speed With Sass in a Weekend к старту курса по Fullstack-разработке на Python. Читать далее
Подробнее
К старту курса по Fullstack-разработке на Python рассказываем, как на чистом современном CSS имитировать шейдеры аккуратным наложением слоёв и эффектов. За подробностями и демонстрациями приглашаем под кат. Читать далее
Подробнее
Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке. Читать далее
Подробнее
Привет, Хабр! Меня зовут Анатолий Долгов и я frontend-разработчик международной команды Учи.ру. Сегодня я расскажу, как мы успешно синхронизировали параметры дизайна и кода. Это упростило многие рабочие моменты, уменьшило количество неприятных ошибок и сделало нас ближе к внедрению полноценной дизайн-системы. Читать далее
Подробнее
Данная статья поможет улучшить взаимодействие между дизайнерами и верстальщиками для минимизации ошибок и повышения продуктивности работы. Работа богата практическими примерами. Она будет полезна специалистам разного профиля. Дизайн является основой качественной верстки и помогает успешно продолжить создание веб-приложения. Читать далее
Подробнее
Спустя короткое время я без каких-либо навыков программирования запускаю свой первый сайт в возрасте 15 лет на популярном в то время конструкторе uCoz для своего клана. Кто помнит uCoz есть такие? Читать далее
Подробнее
В дизайне StackOverflow используются праздничные модальные окна, поэтому команда SO разработала удобный способ отображения конфетти. Первым решением был простой статический SVG с конфетти на заднем плане. Позже команда обнаружила 12 разных статических конфетти по всему коду и поняла, что нужен другой подход. Подробностями решения делимся под катом, пока начинается наш курс по Frontend-разработке. Читать дальше →
Подробнее![[Перевод] Разработка настоящих компонентов: блок сообщения Facebook Messenger](https://habrastorage.org/webt/wq/xh/y1/wqxhy1lskyqccuz69ugst5r4syi.png)
Смесь любопытства и тяги к исследованиям снова привели меня к системе обмена сообщениями Facebook. Я уже изучал компоненты Facebook и писал об этом. Сейчас я обратил внимание на то, что в одни только блоки для вывода сообщений чата вложена огромная работа. На первый взгляд может показаться, что разработка компонента, реализующего чат — это просто, что у составных частей такого компонента будет не особенно много вариаций. Если же вникнуть в тему работы с сообщениями, то окажется, что один…
Подробнее