Обновить
57.51

Веб-дизайн *

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

Сначала показывать
Порог рейтинга
Уровень сложности

Новый перспективный веб-фреймворк Cample.js. Реактивность без VDOM

Уровень сложностиСредний
Время на прочтение2 мин
Охват и читатели13K

Всем привет! В данной статье я бы хотел рассказать о таком фреймворке как Cample.js.

На сегодняшний момент (версия 3.0.1), фреймворк является активно поддерживаемым в разработке нового функционала. Есть поддержка работы с данными, которые благодаря реактивности без виртуального DOM отображаются крайне быстро. Пример тестов.

Читать далее

Как сделать доступный UI, несмотря на хорошее ТЗ

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели9.1K

Привет! Меня зовут Евгений Подклетнев. В ИТ с 2011 года. Сначала занимался внедрением информационных систем, прошел путь до менеджера по внедрению. Последние 6 лет занимаюсь системным анализом. Сейчас я старший системный аналитик, в том числе выполняю функции дизайнера пользовательских интерфейсов в КРОК. 

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

Читать далее

Как оценивать задачи и подружиться с дедлайнами

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели12K

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

Всем привет! Меня зовут Маргарита, я UI/UX дизайнер в компании Tourmaline Core. В этой статье решила поделиться своим опытом, набитыми шишками и успешными практиками, и разобраться, что нужно учесть при оценке времени выполнения задачи.

Статья будет полезна как начинающим дизайнерам, так и другим специалистам, сталкивающимся с горящими дедлайнами и проблемами в оценке задач.

Читать далее

Китайские сайты такие китайские

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели25K

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

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

Дисклеймер. Ничего из сказанного ниже не стоит воспринимать как камень в огород китайского дизайна и его создателей. Все, о чем пойдет речь в статье, просто непривычно европейцу.

Читать далее

4 фичи для инклюзивного дизайна на примере приложения Duolingo

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели3.4K

Мы — команда дизайнеров EnAble: Ася, Альбина, Анжелика. Расскажем, как делали приложение Duolingo доступным для дислексиков, как впервые работали с инклюзивностью.

Читать далее

Atomic Design в веб-дизайне

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели24K

Веб-дизайн — постоянно эволюционирует, адаптируясь к новым технологиям и требованиям пользователей. Одним из последних инновационных подходов, зародившихся в веб-дизайн-сообществе, является атомарный веб-дизайн (Atomic Design).

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

Читать далее

Как No-code и генеративный ИИ позволяют за секунды создавать новые сайты

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели63K

Фронтенд и бекенд — прошлый век?

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

Создание сайта с нуля у опытного разработчика займет в среднем от 100 до 500 часов. Причем если нужен уникальный дизайн и множество картинок, это ещё и выльется в копеечку. Но, оказывается, люди без опыта и знаний уже делают сайты бесплатно, и за 10 минут (или 10 секунд, если используют один из сервисов). Не имея ни малейшего понятия о том, что такое PHP, Python или Java.

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

Читать далее

Как создать дизайн-систему, в которой комфортно всем

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели4.3K

Привет! Меня зовут Константин. Уже второй год мы с командой проектировщиков работаем в БФТ-Холдинге над большим продуктом для государства. В этой статье я поделюсь своим опытом, а также расскажу про ошибки, с которыми пришлось столкнуться на пути к созданию удобной дизайн-системы.

Читать далее

Как мы переработали личный кабинет Soax с учётом пользовательских сценариев

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели4.6K

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

Читать далее

Обеспечение безопасности Frontend приложений

Уровень сложностиПростой
Время на прочтение13 мин
Охват и читатели23K

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

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

Читать далее

Почему японские веб-сайты выглядят так необычно, или учимся оценивать дизайн, не делая поспешных выводов

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели58K

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

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

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

Читать далее

Форматы векторной графики. Замена «толстому» SVG

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели23K
Векторизация растровой графики, источник

Все знают стандарт векторной графики SVG (Scalable Vector Graphics). Великая вещь, которая незаменима в веб-дизайне. Но этот формат до сих пор полностью не поддерживается ни в одном браузере по одной простой причине: он невероятно сложный. Если посмотреть на спецификации, там более 200 подпунктов в 27 разделах (около 900 страниц на бумаге). Только оглавление занимает 19 экранов. Мягко говоря, это перебор.

К счастью, SVG — не единственный формат векторной графики. Есть более эффективные и минималистичные альтернативы.
Читать дальше →

Как сделать сервисы доступнее для людей с нарушениями зрения. Исправляем 5 самых частых ошибок

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели3.8K

Всем привет! Меня зовут Юля Долгун, я фронтенд-разработчик из Поиска. Одна из моих задач — поддерживать доступность в поиске по товарам для пользователей с различными ограничениями здоровья.

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

Читать далее

Ближайшие события

16 простых и эффективных правил дизайна UI

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели50K

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

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

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

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

Самый быстрый способ обучения — это практика, так что приступим!
Читать дальше →

Collage_n — редактор для создания коллажей и спрайтов

Уровень сложностиПростой
Время на прочтение1 мин
Охват и читатели2.1K

Collagen работает на новой ссылке: https://sergey1234ovechkin.github.io/collagen_2/index.html

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

Читать далее

Можно ли экспортировать макеты из Figma в готовое React приложение?

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели18K

Последнее время из каждого утюга кричат по технологии будущего - что Chat GPT может писать код вместо программистов, а MidJourney создавать интерфейсы вместо дизайнеров. Мы полезли в Community фигмы, а там по запросу Figma to Code больше сотни плагинов, которые обещают сгенерировать чистый работающий код на основе ваших макетов и за пару кликов создать готовое web-приложение вместо ваших frontend-разработчиков. Все это звучит вдохновляюще, но так ли это на самом деле?

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

Читать далее

Основные принципы маскирования в CSS

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели42K

В мире дизайна маскирование является популярной техникой реализации уникальных эффектов. Будучи дизайнером, я сам использовал эту технику много раз, но не очень часто в веб-среде. Думаю, что от её применения на сайтах меня удерживала недостаточная поддержка браузерами. Полноценно этот функционал поддерживается в Safari и Firefox, а вот в браузерах на движке Blink (Chrome и Edge) — лишь частично.

Радует то, что тема CSS маскирования будет частью Interop 2023, а значит, вскоре можно ожидать кросс-браузерную поддержку этой возможности (Вау!).

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

Поехали!
Читать дальше →

Этот смартфон должны были выдавать выпускникам курсов JavaScript — смотрим на Alcatel Fire E на базе FireFox OS

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели5.4K
image

Веб-технологии давно и прочно вошли в нашу жизнь. Мы каждый день пользуемся уже ставшими привычными нам сервисами вроде социальных сетей или новостных сайтов. Браузер стал неотъемлемой частью современного смартфона, а некоторые приложения и вовсе полностью «переехали» в браузер, получив название PWA, хотя подавляющее большинство приложений всё ещё остаются нативными. Ребята из Mozilla как-то раз подумали: «отдельные PWA приложения это, конечно, круто, но почему бы не сделать мобильную систему, которая построена практически полностью на веб-технологиях?». И таки умудрились сделать, дав ей имя — FireFox OS(B2G), предназначенная для бюджетных смартфонов! Сегодня мы с вами: узнаем, что же это за ОС такая, что у неё под капотом и проверим, на что она способна в 2023 году. Встречаем — Alcatel OneTouch Fire E!
Читать дальше →

Интерфейс дерева комментариев. Сравниваем Хабр и клиенты Reddit; переделываем Хабр

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели5.2K

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

Одна из самых старых и самых популярных площадок с деревьями комментариев — это Reddit. Правда, большая часть его пользователей едина в одном: его интерфейс ужасен. Но его API открыто, поэтому на выбор есть множество клиентских приложений, особенно для мобильных телефонов — Joey, Relay, Slide и Boost и другие. Их авторы — как правило, и сами недовольные стандартным интерфейсом Реддита — потратили много времени и сил на поиск удобного интерфейса для комментариев. И большая их часть пришла к очень похожим вариантам дизайна.

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

Читать далее

Интерфейс доступный каждому: практические рекомендации

Время на прочтение18 мин
Охват и читатели9.3K

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

Читать далее

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