Как стать автором
Обновить
29.45
Рейтинг

Веб-дизайн *

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

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

Как сделать веб-шрифты красочными

Блог компании SkillFactory Веб-дизайн *CSS *Типографика *Дизайн
Перевод

Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке.

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

Новости

Долго. Дорого… Делать гаджет в России – учиться, терять деньги, жить на работе

Веб-дизайн *Дизайн мобильных приложений *Гаджеты Экология

Привет! Я Игорь, создатель проекта гражданского мониторинга Nebo и это моя первая статья на Хабре, в которой хочу поделиться опытом разработки гаджета.

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

Изначально мы создали проект, чтобы с помощью недорогих девайсов определять загрязнение воздуха в Красноярске. В нашем городе люди часто жаловались на удушливый смог, и очень часто официальные данные оставались не актуальными. Этому смогу местные жители даже дали специальное определение «чёрное небо».

Читать далее
Всего голосов 146: ↑142 и ↓4 +138
Просмотры 23K
Комментарии 135

6 советов по удобным интерфейсам за май

Веб-дизайн *CSS *Интерфейсы *HTML *Accessibility *
Tutorial

Хабр, привет!

За май я подобрал 6 советов. Мы поговорим о том, нравится ли вам переключать клавиатуру при вводе email, как использовать Esc, нужно ли устанавливать фокус на кнопке закрыть, нужно ли заставлять пользователя заново вводить пароль и email, зачем оставлять только цифры при вводе кода авторизации.

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Просмотры 3.8K
Комментарии 27

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

Веб-дизайн *
Recovery mode

Здравствуйте!

Я вот заметил, что почти любой софт имеется платный и бесплатный. Но я не видел чтобы был какой-нибудь движок для казино в свободном доступе. Но я это не гуглил, может и имеется. Но что толку если Вы сами не попробовали это сделать? Если не хватает знаний и сил - то дерзайте, покупайте или скачивайте пиратский софт (библиотеку или движок), но мне на разбор чужого детища не хватает сил, да и я никогда таким не занимался.

Сейчас уже такое время, что людям трудно даже программу установить на ПК или смартфон, а может разучились и не знают что так можно? Мельчают юзеры, да к тому же печатные машинки сейчас наверное остались только у разработчиков. Везде смартфоны - на андроиде или IOS, но они радуют поддержкой веб-технологий в своих браузерах. Просто открыл сайт и вуаля! Играй не хочу или сёрфь интернет, что-то смотри, читай. Не знаю как сейчас пользователи гаджетов и ПК занимают своё свободное время, как я понял сидят в соцсетях судя по количеству интернет трафика. Но это дело избранных, а тем кому не повезло в жизни ищут как бы заработать. Я кокрас из таких. Насколько я знаю заработать можно своим делом или работая на кого-то. Если рассматривать обычных людей, а не айтишников, то выбор не большой. Смотреть рекламу за копейки, разносить закладки(если понимаете), постить рекламу на всяких сайтах, раскачивать персов в играх на продажу, в случае если ничего не умеете конечно, есть конечно там перепродажа всякой всячины, стать блогером и(или) ютубером, про работу в оффлайне не говорю и наше любимое-вечное: покер и казино. А конкретно слоты - это "однорукий бандит"(запрещены в РФ, если на деньги конечно, да и не только в РФ). Я за всю жизнь играл в них 2 раза, один раз за день когда их запретили в РФ проиграл где-то 3000 рублей ставя на гонку собак, а 2 раз несколько недель назад проиграл 1000 рублей на известном сайте в слоты. Это конечно меня разозлило и я решил нанести удар по индустрии. Конечно удар муравьиный, но начало положено.

Читать далее
Всего голосов 18: ↑4 и ↓14 -10
Просмотры 3.1K
Комментарии 16

3 способа использовать box-shadow в CSS

Блог компании Нетология Веб-дизайн *Разработка веб-сайтов *CSS *HTML *
Перевод

Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.

Читать далее
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 5.1K
Комментарии 6

Как A/B-тестирование веб-страниц помогло нам повысить конверсию

Блог компании Wrike Веб-дизайн *Повышение конверсии *Управление продуктом *Дизайн

Привет! Меня зовут Амаль, я веб-дизайнер в Wrike: отвечаю за разработку веб дизайн-системы и веб-компонентов вместе с командой разработчиков и маркетологов. В этой статье расскажу о том, как с помощью А/B тестов и изменения некоторых деталей на веб-сайте нам удалось увеличить конверсию как минимум в 5 раз. Статья будет полезна, если вы планируете внедрить изменения в свою веб-систему и протестировать гипотезы по увеличению конверсии.

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 1.1K
Комментарии 0

Как я сделал дизайн для Брендспейса Авито за две недели, а потом дважды его переделывал

Блог компании Авито Веб-дизайн *Дизайн

Привет, меня зовут Максим Аксёнов, я дизайнер интерфейсов в Авито. Осенью 2020 года я начал работу над проектом Брендспейса. Это конструктор лендингов на платформе Авито, который помогает производителям продвигать товары. 

Нужно было создать универсальное решение, которое подходит для продажи чего угодно: от автомобилей до кормов для животных. В конце 2020 года в Авито запустили Брендспейс в продакшен. В этой статье расскажу, зачем нужен был проект, как продвигалась работа над ним и что получилось в итоге.

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

«Идеальный процесс работы» UX/UI Дизайнера

Веб-дизайн *Разработка веб-сайтов *Дизайн
Tutorial

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

Узнать правду
Всего голосов 1: ↑0 и ↓1 -1
Просмотры 1.8K
Комментарии 2

Как отформатировать текст в Интернет по ширине с переносами

Веб-дизайн *

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

Однако, я решил попробовать читать новостные сайты, habr или lib.ru с "книжным форматированием".

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 2.1K
Комментарии 14

Советы по проектированию интерфейса. Часть 2 — Когнитивное искажение

Веб-дизайн *Дизайн мобильных приложений *Графический дизайн *Дизайн
Tutorial

На наше пользовательское поведение и наши психические процессы зачастую (если не всегда) очень серьезно влияют Когнитивные эффекты. Память, мышление, восприятие, внимание - это вот все про них, про эти эффекты.

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

Попробую рассказать про несколько эффектов, как всегда с откопанными примерами, и с небольшими советами:)

Читать далее
Рейтинг 0
Просмотры 1.6K
Комментарии 1

Heretic: простое решение для создания простых сайтов

Веб-дизайн *Разработка веб-сайтов *JavaScript *

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

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

SPA (Single-Page Application, или одностраничное приложение) — хорошее решение, которое не требует перезагрузки каждой страницы, когда содержимое нуждается в обновлении. Но проблема в том, что эти веб-сайты полностью генерируются на стороне клиента, в браузере; не каждая поисковая система сможет их проиндексировать. В подобных ситуациях хорошим решением является рендеринг страницы на стороне сервера (Server-Side Rendering, или SSR), после этого — «переключение» в режим SPA (регидрация). Когда пользователь захочет перейти на другую страницу, с сервера будет загружен небольшой фрагмент данных, и необходимости перезагружать полностью страницу не будет.

Идея состоит в том, чтобы создать такой шаблон (boilerplate), чтобы каждый веб-мастер (или любой человек, обладающий базовыми навыками верстки на HTML и CSS) мог создать веб-сайт, который будет достаточно быстрым и удобным в обслуживании. Здесь в игру вступает Heretic.

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

Советы по проектированию интерфейса. Часть 1 — Гештальт

Веб-дизайн *Usability *Дизайн мобильных приложений *Графический дизайн *Дизайн
Tutorial

Если ты часто задаешь себе вопросы вроде: Правильно ли я собрал главную страницу? Каким способом лучше выделить кнопку СТА чтобы она не потерялась во множестве объектов? Как направить пользователя в нужное место и управлять его взглядом? То попробуем разобраться вместе : )

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 3.5K
Комментарии 5

Фидбек в UX или как вытащить на свет истину

Блог компании SDVentures Веб-дизайн *Дизайн мобильных приложений *Дизайн

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

Фидбек от пользователей это всегда ценные вводные. Но если относится к этим вводным без достаточной доли осторожности, собранный фидбек может превратиться в бессмысленный список задач в бэклоге, в котором эти задачи приоритезированы по принципу «кто громче и чаще орал». Что, в свою очередь, приводит к распылению ресурсов команды, а сам продукт становится результатом скорее компромисса, чем результатом чёткого видения. На пользовательский опыт такой процесс разработки тоже влияет – есть немаленькие шансы, что он будет неконстистентным и непродуманным.

“Что с этим делать?” - спросите вы.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 1.7K
Комментарии 7

3 совета по удобным интерфейсам за март

Веб-дизайн *Разработка веб-сайтов *Интерфейсы *HTML *Accessibility *

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

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

Атака «Браузер внутри браузера». Как защититься

Блог компании GlobalSign Веб-дизайн *Информационная безопасность *JavaScript *Браузеры

Поддельное окно авторизации, чтобы выманить пароль пользователя

Современные средства HTML/CSS позволяют сгенерировать фрейм, практически неотличимый от настоящего браузера, как на скриншоте вверху. Более того, можно нарисовать в нём «адресную строку» с любым URL. Это открывает двери для нового класса атак, который получил название BitB (браузер внутри браузера).

Насколько реальны такие атаки и что можно противопоставить в качестве защиты?
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 9.7K
Комментарии 16

Погружаемся в CSS: как использовать :where ()

Блог компании Нетология Веб-дизайн *Разработка веб-сайтов *CSS *Учебный процесс в IT
Перевод

Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования.

Читать далее
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 6.9K
Комментарии 6

Простые советы начинающему веб-дизайнеру. Бракуем макет

Веб-дизайн *

Привет. В результате работы с начинающими веб-дизайнерами прослеживаются повторяющиеся ошибки — общие в не зависимости от среды разработки (опыт с figma и photoshop). Обсудим их.

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

Так как забраковать?
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 3.3K
Комментарии 4

Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Блог компании Нетология Веб-дизайн *CSS *HTML *
Перевод

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Читать далее
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 7.3K
Комментарии 3

Гид по цвету: физиологические эффекты, социокультурные ассоциации и связанные эмоции

Веб-дизайн *Дизайн Мозг Биология
Из песочницы

Дикий лонг-рид о цвете в разработке дизайна: какое влияние цвета оказывают на людей как на вид животных, на какие ассоциации мы должны обратить внимание и как работать с эмоциями пользователей.

Читать далее
Всего голосов 23: ↑23 и ↓0 +23
Просмотры 7.8K
Комментарии 8

Frontend-разработка: какие концепции остаются актуальными в 2022 году

Веб-дизайн *Разработка веб-сайтов *
Recovery mode
Из песочницы

Когда вы разрабатываете сайт, то либо решаете проблему пользователя, либо нет. Будет это эффективный инструмент для бизнеса, приносящий прибыль, или это будет еще один сайт в сети Интернет? Это зависит от множества факторов…

Читать далее
Всего голосов 24: ↑4 и ↓20 -16
Просмотры 15K
Комментарии 7

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

Работа

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