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

Веб-дизайн *

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

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

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

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 146
Веб-дизайн *Визуализация данных *Интерфейсы *Usability *
Кейс

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

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

Новости

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

Уровень сложности Простой
Время на прочтение 13 мин
Количество просмотров 6.1K
Веб-дизайн *Информационная безопасность *Разработка веб-сайтов *JavaScript *
Из песочницы

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

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

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

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

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 43K
Блог компании ISPsystem Веб-дизайн *Дизайн
Мнение
Перевод

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

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

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

Читать далее
Всего голосов 85: ↑79 и ↓6 +73
Комментарии 46

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

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 10K
Блог компании RUVDS.com Веб-дизайн *Работа с векторной графикой *Обработка изображений *IT-стандарты *
Векторизация растровой графики, источник

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

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

Истории

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

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 2.4K
Блог компании Яндекс Веб-дизайн *HTML *Usability *Accessibility *

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

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

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

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

Уровень сложности Простой
Время на прочтение 11 мин
Количество просмотров 15K
Блог компании RUVDS.com Веб-дизайн *Интерфейсы *
Туториал
Перевод

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

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

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

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

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

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

Уровень сложности Простой
Время на прочтение 1 мин
Количество просмотров 1.6K
Веб-дизайн *Canvas *Графический дизайн *Дизайн игр *Дизайн
Из песочницы

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

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

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

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

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 6.2K
Высокая производительность *Веб-дизайн *ReactJS *Будущее здесь Визуальное программирование *
Из песочницы

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

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

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

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

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 3.7K
Блог компании RUVDS.com Веб-дизайн *CSS *Графический дизайн *
Перевод

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

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

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

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

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

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 3.3K
Блог компании Timeweb Cloud Веб-дизайн *HTML *Гаджеты Смартфоны
Обзор
image

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

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

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 3.4K
Веб-дизайн *Разработка веб-сайтов *Usability *Дизайн мобильных приложений *
Мнение

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

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

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

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

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

Время на прочтение 18 мин
Количество просмотров 4.3K
Веб-дизайн *Интерфейсы *Usability *Accessibility *Дизайн

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

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

30 идей по улучшению страницы подтверждения заказа в интернет-магазине

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 1K
Веб-дизайн *Интерфейсы *Usability *Разработка под e-commerce *Дизайн
Обзор

Странице подтверждения заказа часто отводится незаслуженно мало внимания. Но с ее помощью можно решить много задач и создать ценность – как для клиента, так и для компании. Как еще ее использовать? В статье – 30 идей.

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

Как мог бы выглядеть тёмный Хабр

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 3.4K
Веб-дизайн *Разработка веб-сайтов *Habr
Обзор
Recovery mode

Пользователи часто спрашивали тёмную тему на Хабре. Насколько мне известно, команда разработчиков в курсе этой потребности, но пока не готова представить реализацию. Тем не менее, она есть.

Смотреть много скриншотов
Всего голосов 24: ↑21 и ↓3 +18
Комментарии 31

Архитектура дизайн-системы. Критикуем и предлагаем

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 2.4K
Веб-дизайн *IT-инфраструктура *IT-стандарты *Прототипирование *Бизнес-модели *
Туториал

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

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

Все web-дизайнеры привирают о свои размерах. Или проблема height'ов

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 2.8K
Веб-дизайн *Интерфейсы *Дизайн

Третьего дня, сдавай дизайны мобильного приложения. «А вы помните, что есть статус бар и чёлка?» — осведомилась менеджер подрядчика. «Юная леди, я с 2006 и разрешения 1024x768 помню, что есть бары операционных систем, окно браузера и бары ввода адреса и управления в нем» — вежливо проинформировал я.

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

Федеральные рекомендации по интерфейсам: переманить цифровую бюрократию на свою сторону

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 2.6K
Блог компании РТЛабс Веб-дизайн *Интерфейсы *IT-стандарты *Usability *

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

Читать далее
Всего голосов 22: ↑20 и ↓2 +18
Комментарии 10

Шрифтовая «не-пара»

Время на прочтение 6 мин
Количество просмотров 2.8K
Веб-дизайн *Типографика *Графический дизайн *Дизайн

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

Читать далее
Всего голосов 13: ↑9 и ↓4 +5
Комментарии 64

Бестолковый дизайн

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 6.9K
Веб-дизайн *Разработка веб-сайтов *Интерфейсы *Дизайн мобильных приложений *$mol *
Мнение

Здравствуйте, меня зовут Дмитрий Карловский и я.. нет, я не дизайнер. Так что не стоит воспринимать мои слова всерьёз. Я просто пользователь. И у меня пригорает от популярных дизайнерских решений, бездумно копируемых из одного приложения в другое..

Я надел огнеупорное бельё и готов внимать
Всего голосов 40: ↑28 и ↓12 +16
Комментарии 74

Продуктовый дизайн. Инструкция по Agile методологии для новичка

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 1.9K
Веб-дизайн *Интерфейсы *Usability *Agile *Дизайн
Обзор

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

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

Читать далее
Всего голосов 7: ↑2 и ↓5 -3
Комментарии 4

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

Работа

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