Черновик веб-дизайнера

Если ты только начинаешь путь в веб-дизайне или хочешь прокачать портфолио — начни с самого популярного элемента любого интернет-магазина. В этой статье покажу, как всего за 10 минут собрать простой, но аккуратный макет карточки товара в Figma. Без лишнего, по шагам и с полезными фишками. Карточка товара — это маленький модуль, который показывает: Эта карточка встречается везде — от маркетплейсов до лендингов. А ещё её часто просят сделать на собеседованиях или в тестовых заданиях. Вот как будет выглядеть финальный макет: Макет будет адаптивным, простым и легко кастомизируемым. Совет: если нет подходящего изображения — используй Unsplash плагин (Cmd+/ → Unsplash)...

Вы открыли новый проект и… зависли. С чего начать? Где взять кнопки, поля, карточки, шапки, чтобы не тратить часы на построение с нуля? Решение есть — бесплатные UI-киты. Это настоящая палочка-выручалочка для дизайнеров: с ними вы можете собирать макеты в разы быстрее и при этом выглядеть профессионально. В этой статье: UI-кит (User Interface Kit) — это набор готовых элементов интерфейса. В одном файле вы получаете: UI-кит = визуальный язык проекта. Он позволяет собирать макеты как из конструктора — быстро, чисто, по правилам. Совет: Обращайте внимание на количество лайков, обновления и структуру файла...

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

Когда вы только начинаете работать в Figma, кажется, что нужно разбираться во всём сразу: компоненты, автолэйауты, сетки, интерактивы... Голова идёт кругом. Но есть решение, которое реально упрощает работу — плагины. В этой статье — подборка удобных, понятных и бесплатных плагинов, которые помогут вам на старте: ускорят процесс, избавят от рутины и сделают макеты чище. Без воды — только то, что действительно работает. Плагин — это мини-инструмент, встроенный в Figma, который расширяет её возможности. Если сравнивать с браузером — это как установить полезное расширение в Chrome: вроде бы всё и так работает, но с ним — быстрее и удобнее...

Вы собрали дизайн-макет, но клиент всё равно не понимает, как это будет работать. Начинаются вопросы: «А это куда ведёт?» «А что будет, если нажать сюда?» «А как выглядит мобильная версия?» Чтобы избежать путаницы и сэкономить себе нервы, нужен интерактивный прототип — не просто картинки, а кликабельная модель будущего сайта или приложения. В этой статье расскажу: Интерактивный прототип — это имитация готового сайта или интерфейса, где можно кликать по кнопкам, переходить между страницами, открывать попапы и даже заполнять формы. Это не рабочий сайт, но он даёт полное понимание логики взаимодействия, навигации и пользовательского сценария...

Если ваш макет выглядит вроде бы красиво, но всё равно «что-то не так» — скорее всего, проблема в выравнивании. Даже самый стильный дизайн начинает казаться дилетантским, если в нём нет порядка. Именно поэтому сетка и принципы выравнивания — основа любого качественного интерфейса. В этой статье подробно разберём: Сетка — это вспомогательная структура, которая помогает размещать элементы на макете упорядоченно. Она не видна пользователю, но именно она создаёт ощущение аккуратности, профессионализма и визуального баланса. Сетка помогает: Без сетки макет может выглядеть хаотично и вызывать ощущение визуального шума, даже если цветовая палитра и типографика подобраны грамотно...

Хочешь, чтобы кнопка в твоём дизайне тянулась по ширине текста и не «разваливалась» при изменении размеров? Figma умеет это — и очень просто. В этой статье покажу, как сделать адаптивную кнопку, которая подстраивается под текст, остаётся аккуратной и удобной в работе. Адаптивная кнопка — это элемент, который: Такие кнопки незаменимы в UI-дизайне: при работе с компонентами, автолэйаутами и разными языками интерфейса. Теперь у тебя — уже почти адаптивная кнопка. Она будет тянуться, если изменить текст...

Хочешь начать путь в дизайне, но не знаешь, с какой программы начать? Figma или Photoshop — как выбрать, чтобы не пожалеть через месяц? Разбираем без воды и лишней теории. Это классика. Программа, с которой у большинства людей ассоциируется слово «дизайн». Используется для: Photoshop — это инструмент пиксельной графики. Он мощный, но требует времени на освоение, и за него нужно платить. Интерфейс может показаться перегруженным. Современный онлайн-сервис, который стал стандартом в интерфейсном дизайне...