Как стать автором
Обновить
49.21

Веб-дизайн *

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

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

Как заменить фотостоки на нейронки в коммерческих проектах: личный опыт и промпты

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 6.7K

Зачем нужны фотостоки, если нейросети готовы производить бесконечное количество нужных вам изображений? Расскажу, как мы получили несколько несколько сотен фотореалистичных изображений людей и пакет иконок для коммерческого сайта с помощью нейронок, потратив ~50 часов дизайнеров и $60 на Pro Plan Midjourney.

Плюс, конечно, наша насмотренность и опыт, которым я сейчас поделюсь с вами!

Читать далее
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 13

Новости

Дизайн-разбор ссылок в вёрстке

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 7.7K

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.

Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.

Читать далее
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 5

CSS для печати на бумаге

Время на прочтение 10 мин
Количество просмотров 7.9K

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

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

Читать далее
Всего голосов 29: ↑28 и ↓1 +27
Комментарии 17

Книга «Дизайн для разработчиков»

Время на прочтение 20 мин
Количество просмотров 6K
image

Привет, Хаброжители!

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

Книга раскрывает основные принципы дизайна и особенности пользовательского восприятия, которые должен знать каждый веб-разработчик. Читателю определенно понравится, как автор демонстрирует новые идеи на примерах популярных сайтов и пользовательских интерфейсов. Откройте методы исследования поведения юзеров и научитесь использовать цвет, типографику и верстку для создания удобных и привлекательных веб-интерфейсов. К концу книги вы поймете, что хорошее чувство дизайна действительно является ценным подспорьем для разработчика!
Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 5

Истории

Система иконок на React

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 5.9K

Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.

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

Деплоим сайт в облако за рубль в месяц

Время на прочтение 10 мин
Количество просмотров 12K

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

Может быть и другой сценарий. Порой нужно опубликовать в интернете страничку, например, с примерами работ по фотографии или дизайну. В подобных ситуациях есть статистические HTML-страницы, которые должны быть просто доступны для просмотра. И не всегда целесообразно арендовывать полноценный сервер, чтобы закрывать столь мелкие задачи.

Привет, Хабр! Меня зовут Саша, в этой статье я расскажу, как задеплоить в облако статический веб-сайт с помощью объектного хранилища стоимостью около 1₽/мес. А также — настроить красивый домен. Подробности под катом.
Читать дальше →
Всего голосов 42: ↑42 и ↓0 +42
Комментарии 36

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 5.6K

Например, прототип формы, поля которой можно заполнять непоследовательно.

Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure.

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

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

Читать далее
Всего голосов 27: ↑26 и ↓1 +25
Комментарии 20

Часы на синусах и косинусах в CSS

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 7K

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому.


Вот о чём я говорю:


Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 8

Как дизайнеры помогают заменить GitLab: что из этого получилось

Время на прочтение 14 мин
Количество просмотров 9K

Привет! Меня зовут Валерия, я дизайнер внутренних сервисов в Ozon Tech. Наша команда занимается продуктами, которые коллеги используют для доступа к инфраструктуре Ozon, приоритизации задач, проведения регламентных работ, выкатки и управления релизами.

Сегодня речь пойдёт про последнее упомянутое решение — REpublic или релизный портал, который помогает нашим разработчикам выкатывать более тысячи релизов каждый день. Я расскажу, зачем мы начали его делать и с какими сложностями столкнулись.

Читать далее
Всего голосов 97: ↑90 и ↓7 +83
Комментарии 52

Тесты производительности фреймворка Cample.js. Отчёт № 1

Уровень сложности Средний
Время на прочтение 2 мин
Количество просмотров 1.1K

В данной статье содержатся тесты фреймворка Cample.js версии 3.2.0-alpha.12. Это первый отчёт о производительности. Нулевой отчёт вышел несколько месяцев тому назад. Отчёт включает в себя сравнения по производительности с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript. Все результаты тестов основаны на показателях keyed реализации в репозитории js-framework-benchmark в github. Сами они располагаются на странице выпуска №122.

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Комментарии 3

Figma закрыла Dev Mode: пути обхода и их краткий обзор

Время на прочтение 5 мин
Количество просмотров 26K

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим. Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказываем под катом!
Читать дальше →
Всего голосов 44: ↑44 и ↓0 +44
Комментарии 36

Виртуальные туры в недвижимости: 6 шагов внедрения

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 853

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

Узнайте, как разработать виртуальный тур!
Всего голосов 7: ↑4 и ↓3 +1
Комментарии 7

Без онлайн-курсов! Гайд для ux-дизайнера: какие навыки развивать и как учиться бесплатно (без пиратства)

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 5.9K

«А зачем платить за курсы? 99% материала, который там дают, можно найти на ютубе. Покупай, если не найдешь нужный материал. Но сначала попробуй бесплатно!» — сказал мой брат после того, как я поделился идеей пойти учиться на дизайнера.

Я так и сделал. Но вскоре понял, что самый сложный вопрос «какие навыки мне важнее развивать именно сейчас», а не «найду ли я нужный материал». Новичкам проще — им нужна база. Но какие навыки надо развивать когда ты middle или senior?

Читать →
Всего голосов 10: ↑5 и ↓5 0
Комментарии 4

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

Я создал подробнейший гайд для карьеры дизайнера

Уровень сложности Простой
Время на прочтение 1 мин
Количество просмотров 4.1K

Привет! Я Дима, автор телеграм канала Дизайн тусовка. Я собрал полноценный гайд для всех грейдов на основе своего опыта и недавнего поиска работы в топ IT компаниях России, вот мой результат:

Читать далее
Всего голосов 20: ↑4 и ↓16 -12
Комментарии 1

Как на ваш выбор влияет дизайн. Подробно про тёмные паттерны в UX

Уровень сложности Средний
Время на прочтение 20 мин
Количество просмотров 7.4K

Вы знаете, каково это.

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

Или, может, вам была нужна та самая пробная подписка на 7 дней, но когда вы решили её отменить, то это резко из одного действия превратилось в лабиринт до надписи «Отменить подписку». Все эти техники объединены в группу, называемую «Тёмные паттерны», шаблоны для создания манипулятивных схем взаимодействия системы и пользователя.

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

Узнать как мной управляют
Всего голосов 29: ↑28 и ↓1 +27
Комментарии 9

Подробный гайд как сделать темную тему с помощью variables фигмы

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 1.7K

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

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

Как прокачивать насмотренность в UX для дизайнера интерфейсов (личный опыт)

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 5.3K

Хочу поделиться своим опытом и рассказать, как я прокачиваю насмотренность в ux (не ui). Надеюсь, это кому-нибудь поможет.

Читать далее →
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 6

Как улучшить юзабилити сайта для увеличения конверсии

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 1.3K

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

Узнайте как увеличить эффективность сайта!
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 3

Приглашаем на Ozon Tech Community Design Meetup

Время на прочтение 2 мин
Количество просмотров 1.2K

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

Тесное взаимодействие и сильная вовлечённость может привести к пониманию с полуслова, а может породить фрустрацию и конфликты. Как услышать друг друга, проговорить ожидания и обозначить границы ответственности — об этом в нашем новом митапе. 

Приглашаем присоединиться к этому разговору 21 февраля в 18:30 — офлайн в Москва Сити и онлайн в трансляции на Youtube. Под катом найдёте подробный анонс и ссылку на регистрацию

Читать далее
Всего голосов 16: ↑14 и ↓2 +12
Комментарии 2

Создание сайтов через нейросети

Время на прочтение 13 мин
Количество просмотров 20K

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

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

Читать далее
Всего голосов 15: ↑11 и ↓4 +7
Комментарии 13

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

Работа

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