Веб-дизайн *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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