Как стать автором
Обновить
61.94

Веб-дизайн *

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

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

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

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

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

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

Читать далее
Всего голосов 8: ↑7 и ↓1+6
Комментарии56

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

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

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

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

Читать далее
Всего голосов 14: ↑14 и ↓0+14
Комментарии12

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

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

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

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

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

Читать далее
Всего голосов 10: ↑8 и ↓2+6
Комментарии5

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

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

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

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

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

Читать далее
Всего голосов 38: ↑34 и ↓4+30
Комментарии46

Истории

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

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

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

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии13

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

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

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

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

Читать далее
Всего голосов 9: ↑6 и ↓3+3
Комментарии0

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

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

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

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

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

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

Читать далее
Всего голосов 24: ↑20 и ↓4+16
Комментарии22

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

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

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

Читать далее
Всего голосов 6: ↑5 и ↓1+4
Комментарии7

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

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

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

Читать далее
Рейтинг0
Комментарии2

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

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

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

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

Читать далее
Всего голосов 16: ↑15 и ↓1+14
Комментарии6

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

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

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

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

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

Читать далее
Всего голосов 94: ↑88 и ↓6+82
Комментарии47

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

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

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

К счастью, SVG — не единственный формат векторной графики. Есть более эффективные и минималистичные альтернативы.
Читать дальше →
Всего голосов 63: ↑60 и ↓3+57
Комментарии26

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

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

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

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

Читать далее
Всего голосов 28: ↑28 и ↓0+28
Комментарии6

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

One day offer от ВСК
Дата16 – 17 мая
Время09:00 – 18:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

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

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

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

Самый быстрый способ обучения — это практика, так что приступим!
Читать дальше →
Всего голосов 67: ↑66 и ↓1+65
Комментарии13

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

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

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

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

Читать далее
Всего голосов 9: ↑8 и ↓1+7
Комментарии0

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

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

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

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

Читать далее
Всего голосов 3: ↑0 и ↓3-3
Комментарии8

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

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

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

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

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

Поехали!
Читать дальше →
Всего голосов 44: ↑44 и ↓0+44
Комментарии1

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

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

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

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

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

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

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

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

Читать далее
Всего голосов 25: ↑25 и ↓0+25
Комментарии24

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

Время на прочтение18 мин
Количество просмотров6.5K

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии1

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

Работа

Веб дизайнер
36 вакансий