Веб-дизайн *

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

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

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

Слово креативность слышал каждый первый работник сферы IT и маркетинга. И ладно бы слышал! Часто эту самую креативность заставляют проявлять. Что делать, если ты не очень креативный человек? Как придумать идею, если ты никогда этим не занимался?

Сегодня расскажем о паре рабочих техник. Расскажем на примере креативов для таргета, во-первых, потому, что наша компания – про рекламу, а во-вторых, потому что картинки – это наглядно и весело.

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Пока все апгрейдят свою жизнь на всяких онлайн-школах, я решил заняться даунгрейдом. Опыт разработки более 10 лет. Сразу к делу: в какой-то момент мне понравилось держать в руках паяльник. Случилось это в преклонном для электрика возрасте. Примерно тогда же по стечению обстоятельств я решил собрать свой первый АКБ для своего электроскутера и Остапа понесло! Пошли сборки АКБ для электровелосипеда, электросамоката, электроскутера и даже инвалидных кресел на электротяге. Затарился литий-ионными (Li-Ion), литий-железо-фосфатными ячейками (Lifepo4) и Li-NMC.

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

Wireframe — это карта экранов, которая показывает навигацию между ними и содержит минимальную детализацию.

Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек. 

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

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

За мои 20 лет в профессии UX-дизайнера накопилось немало практики и полезных навыков, которые легли в основу 10 основных правил. О них сегодня пойдет речь.

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

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

Получаются вот такие картинки.

Недавно мне довелось поработать с Bootstrap 5, и в сравнении с Tailwind это был сущий кошмар

Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы?

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

Дизайн-системы и UI-киты сейчас воспринимаются как равнозначные или тождественные. Но это не так! Более того, смешивать их будет чистым дилетантством, что недопустимо для современных UI/UX-дизайнеров и фронтендеров. В этой заметке я — Денис Пушкарь, оунер дизайн-системы Ростелекома — объясню почему.

Я не принимал участия в разработке методологии БЭМ или популярных сегодня схем именования БЭМ-сущностей (БЭМ-сущностями называют блоки, элементы и модификаторы — «кирпичики» для построения внешнего вида HTML-страниц по методологии БЭМ). Но у меня есть некоторые предположения о том, что могло учитываться при разработке этих схем именования.

В этой статье я сначала разбираю эти предположения, а в конце рассматриваю на примере расширения «BEM Helper» к редактору Visual Studio Code, как автор этого расширения трактует схему именования БЭМ-сущностей и что он упустил при создании своего расширения.

Привет! Меня зовут Ксюша, я старший продуктовый дизайнер в Ozon: проектирую разделы возвратов для личных кабинетов покупателя (Ozon.ru) и продавца (Seller Center) и немного — админки. Дизайнеры на Хабре не частые гости, но статья будет полезна не только дизайнерам и дизайн-лидам, но и разработчикам, тестировщикам и менеджерам.

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

В методологии БЭМ, которую используют для создания сайтов, существует соглашение (схема) по именованию классов CSS (БЭМ-сущностей), которые привязывают к HTML-элементам HTML-дерева. Я рассматриваю классическую схему именования классов CSS по методологии БЭМ, а также — как создать функцию на языке PowerShell для проверки (валидации) имен БЭМ-сущностей на ошибки.

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

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

Создал мини курс по программе для векторной графики Inkscape в 2022.

Разработал методические материалы для изучения темы «Кодирование и обработка графической и мультимедийной информации» в школьном курсе информатики.

«Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, CDR, AI, EPS, WMF или SVG». «Inkscape - редактор векторной графики, аналогичный по своим возможностям таким программам, как Adobe Illustrator, Corel Draw и другим».

2,5 года назад мы поняли, что работу с Госуслугами нужно упрощать — ведомства часто отказывали из-за неправильно заполненного заявления. Тогда был придуман новый подход к услугам. В него мы вложили весь опыт команды проектировщиков, аналитиков и оунеров, исследования и результаты тестирований гипотез.

Дополнительным источником инсайтов и вдохновения для нас стали феномены из когнитивистики — науки о сознании и его процессах. Они заставили обратить внимание на многие вещи в UI и UX с точки зрения работы мозга и его восприятия интерфейса. 

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

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.