Рубрика «веб-дизайн» - 11

Скруглённые или остроугольные? - 1

Скруглённые или квадратные? Вот в чём вопрос.

Нужно ли менять обычные остроугольные кнопки на скруглённые? Какие из них лучше для юзабилити? Как мы вообще принимаем подобные решения?

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

Скруглённые или остроугольные? - 2

Переменные, используемые для улучшения заметностиЧитать полностью »

8 простых UI приёмов чтобы сделать дизайн-прототип динамичным, не прибегая к анимации - 1

Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.
Читать полностью »

В ежегодном опросе «The state of JavaScript» разработчики рассказывают о том, что они используют здесь и сейчас. Вопросы там знакомы и привычны фронтенд-сообществу. В 2019 году появился опрос «The state of CSS», который ввёл разработчиков в ступор. Оказывается, многие технологии разработчикам не знакомы, хотя большинство из них уже активно используются. Возможно, разработчики используют привычные инструменты и технологии, и не стремятся применять что-то новое? Возможно, просто нет задач под новые технологии? Зачем использовать CSS Grid, CSS Multi columns, там, где проще построить все на Flexbox? Возможно, это все касается старичков, а джуны уже и не знают про Flexbox и Float и в опросах не участвуют?

The state of CSS - 1

Сергей Попов (popovsergey), руководитель Лиги А, спикер и организатор конференций задался этими вопросами, провел свой мини-опрос и даже получил результаты от организаторов «The state of CSS». Всю информацию Сергей обработал, структурировал и получил срез фронтенд-сообщества: кто что знает и использует, где учатся верстальщики и сколько зарабатывают, какие технологии актуальны, а какие пора сдавать в переработку, и что изучать, чтобы применять всю мощь CSS. Расшифровка доклада — один из вариантов отчета по актуальному состоянию CSS, вместе с оригинальным отчетом «The state of CSS» подскажет, куда двигаться и какие технологии применять.

Осторожно, под катом много диаграмм и картинок, действительно много, но они все по делу. В хорошем качестве они тут.
Читать полностью »

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

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

Если дефолтный порядок не устраивает, то разработчики прибегают к свойству z-index: оно даёт контроль над виртуальной осью z (глубиной), которая концептуально проходит «сквозь» страницу. Таким образом, элемент с более высоким z-index отображается «ближе» к пользователю, то есть рисуется поверх элементов с более низкими индексами.
Читать полностью »

Как мы подружили SCSS с CSS Variables на примере c темизацией UI Kit - 1

Всем привет, меня зовут Виталик, я senior фронтенд-разработчик Skyeng. Наша команда делает онлайн-платформу Vimbox для изучения английского языка. Примерно год назад мы с дизайнером доделали небольшой UI kit, искоренивший хаос в интерфейсе и кодовой базе.

Оказалось, что в компании не мы одни хотели UI kit, и к нам стали приходить другие команды за советом «как написать собственный». Нам удалось отговорить их от этой затеи, пообещав темизировать свой – это сэкономило компании сотни часов разработки. Выбирая решение, мы рассмотрели Angular Material, кастомизированные сборки и CSS Variables и в итоге остановились на последних, несмотря на их слабую совместимость с SCSS, основой имевшегося UI kit. Под катом – подробности того, что мы сделали.

Читать полностью »

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2019.

Дайджест продуктового дизайна, июнь 2019 - 1

Читать полностью »

User Inyerface — как не надо мучать пользователя - 1

Студия Bagaar собрала худшие элементы сайтов в одной онлайн-форме и предложила ее заполнить. Сможете пройти это испытание?
Читать полностью »

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

image

«Наевшись» сотней-другой сомнительных откликов и десятком неудачных собеседований, провалив попытки переманить толковых специалистов, запросивших слишком много даже для графа де Ла Фер, мы поняли, что пора кардинально менять стратегию. К поиску подключили креативный отдел. Сформулировали проблему, «поштормили» и придумали решение: если нам не удается собрать базу толковых UX-дизайнеров pull-методами, применим push – пусть они сами нам напишут, решили мы. Осталось придумать детали.

image

Читать полностью »

Как я делал социальную сеть в 2019 - 1

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

Организовываем эффективный рабочий процесс веб-разработчиков: Confluence, Airtable и другие инструменты - 1

Я работаю фронтенд-разработчиком около двух лет, участвовал в создании самых разных проектов. Один из выученных мной уроков: взаимодействие между разными группами разработчиков, объединенных одной целью, но имеющих различные задачи и степень ответственности, — дело непростое.

Советуясь с другими участниками команды, дизайнерами и разработчиками, я создал цикл создания сайтов, предназначенный для небольших команд (5–15 человек). В него включены такие инструменты, как Confluence, Jira, Airtable и Abstract. В этой статье я поделюсь особенностями организации рабочего процесса.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js