На этой неделе — творческое переосмысление геологической (или все же ареологической?) карты Марса на основе карты, сделанной USCS. Использовалась те же геологические данные, что и для оригинальной, но было добавлено больше топонимов и подписей, проведен редизайн визуального стиля, а термины из легенды карты упрощены для общего понимания.
Недавно запустился сервис nodesign.dev, который собирает инструменты и материалы по дизайну (в основном UI). Идея заключается в том, что многим разработчикам приходится время от времени дизайнить какие-то элементы своих проектов, и у большинства нет релевантного дизайнерского опыта или художественного образования. Создатели сервиса решили помочь им и запустили одноимённое движение, призывающее разработчиков делиться друг с другом опытом, наработками и знаниями в области дизайна. Конечная цель — чтобы как можно больше небольших проектов без штатного дизайнера могли позволить себе хороший внешний вид и UX.Читать полностью »
На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».
Цвета играют жизненно важную роль в формировании внешнего вида веб-страниц. С помощью CSS мы можем управлять основным цветом элементов и их фоновым цветом. Для этого, соответственно, используются свойства color и background. Когда, много лет назад, я изучал CSS, мне не удалось найти доходчивого руководства по использованию цветов в CSS. Поэтому я решил написать такое руководство сам. В этом материале я расскажу о типах цветов и о ключевых словах, используемых при работе с цветами. Мы поговорим о том, в каких ситуациях используются те или иные методики работы с цветами и рассмотрим примеры. Сразу скажу, что здесь я не буду касаться теории цвета.
В статье расскажу о том, как мы разрабатывали миниатюрное электромеханическое цветовоспроизводящее устройство для элементов умной одежды и систем адаптивного камуфляжа.
Читать полностью »
В ходе разработки программного обеспечения наступает момент, когда нужно проектировать механизмы выполнения потенциально опасных действий. Пара случайных кликов — и пользователь поставит себя в неловкое положение перед начальством или безвозвратно уничтожит несколько часов работы. Как проектировать программы так, чтобы защитить их пользователей от подобных происшествий?
Чаще всего эту проблему решают, предусматривая показ диалогового окна для подтверждения действия, и этим ограничиваются. Если выполняемое действие может привести к серьёзным последствиям, то пользователь прочтёт сообщение, выведенное в окне, и, если он стремился сделать именно то, что сделал, подтвердит это действие. Правильно?
Несмотря на популярность вышеописанного механизма, использование диалогового окна подтверждения действия — это, в 90% случаев, неправильно. Поговорим о том, почему это так.
Читать полностью »
Всем привет.
Я Михаил Кравченко, дизайнер игровых интерфейсов. В этой статье опишу процесс создания интерфейса для игры. Статья будет полезна начинающим дизайнерам, художникам, которых просят рисовать интерфейсы, геймдизайнерам и менеджерам игровых проектов.
Ниже вы видите результат, который у меня получился.
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Одно из решений, которые приходится принимать фронтенд-разработчику при создании сайта, касается выбора способа включения изображений в состав веб-страниц. Этот способ может заключаться в использовании HTML-тега <img>. Это может быть применение CSS-свойства background или тега <image> элемента <svg>. Выбор правильного подхода к работе с изображениями весьма важен, так как это может очень сильно повлиять на производительность и доступность проекта.
![[в закладки] Работа с изображениями в веб - 1](https://www.pvsm.ru/images/2020/04/18/v-zakladki-rabota-s-izobrajeniyami-v-veb.jpeg "[в закладки] Работа с изображениями в веб - 1")
Материал, перевод которого мы сегодня публикуем, посвящён изучению различных способов включения изображений в состав веб-страниц. Здесь будут обсуждены преимущества и недостатки этих способов. Кроме того, мы поговорим о том, когда и почему их обычно используют.
Читать полностью »
Я любопытен. Мне всегда интересно открывать инструменты разработчика браузера и разбираться с тем, как сделан какой-нибудь сайт, на который я заглянул. Этот материал представляет собой мой первый рассказ о таких вот изысканиях. Дело в том, что я обнаружил некоторые интересные примеры использования CSS (по крайней мере, они показались интересными мне), о которых мне захотелось рассказать.
Речь идёт о CSS-находках в новом дизайне Facebook. Этот дизайн появился сравнительно недавно. Я его увидел пару недель назад. Сначала все элементы интерфейса казались мне необычно большими, но я привык к ним буквально за несколько дней. Здесь я расскажу обо всём том интересном, что я нашёл в дизайне Facebook.
Читать полностью »
