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

Веб-дизайн *

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

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

Как дизайнеру найти работу?

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

Большинство дизайнеров (81%) работают по найму. Их средняя зарплата, по оценкам «Тинькофф Журнала», составляет 120 тысяч рублей. При этом начинающие сотрудники получают 50–60 тысяч независимо от направления и сферы деятельности компании. Только 21% специалистов довольны местом работы и не планируют его менять.

Меня зовут Аня, я Lead дизайнер в WIM.Agency. В этой статье я расскажу, как найти работу, не ошибиться с выбором компании и почему важно постоянно повышать квалификацию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Истории

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

Читать далее
Всего голосов 141: ↑133 и ↓8+125
Комментарии62

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

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

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

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

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

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

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

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

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

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

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

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

One day offer от ВСК
Дата16 – 17 мая
Время09:00 – 18:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа

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