Список обновлен: 01.01.2023
Готовые макеты Figma, в большом количестве, можно найти в интернете на специализированных сайтах или на сайтах-портфолио некоторых дизайнеров. Макеты представляют из себя готовые шаблоны сайтов, которые вы можете открыть в Фигме для просмотра. Так же, вы можете скопировать макет себе в драфты (Duplicate to your drafts), если хотите иметь возможность редактировать его.
Довольно часто, дизайнеры ищут макеты для того, чтобы посмотреть как в нем реализованы те или иные элементы дизайна. Качественный проект, подготовленный и оформленный профессиональным дизайнером, может стать отличным руководством для начинающего при создании собственных макетов. Ведь помимо способов реализации тех или иных идей, в макете можно подсмотреть и некоторые «технические и организационные моменты». Так же, бесплатные макеты Figma ищут верстальщики и программисты, которые хотят добавить больше работ в свое портфолио, либо просто попрактиковаться в верстке реальных проектов.
В нашей подборке вы сможете найти макеты сайтов и интернет-магазинов, макеты мобильных приложений, лендинги, простые макеты для начинающих или более сложные, для тех, кто уже окончил курсы Figma и готов к непростым задачам.
1. Макет интернет-магазина одежды
Макет дизайна для сайта интернет-магазина одежды. В макете представлены различные блоки, включая категории товаров и блок с мобильным приложением. Макет содержит в себе только главную страницу, в нем нет дизайна страницы карточки товара или корзины.
Открыть макет
2. Макет административного интерфейса (админки)
Бесплатная версия макета административного интерфейса Panda. Макет включает в себя главную страницу админки и набор используемых компонентов с иконками. Сам макет главной страницы находится в Pages > Templates > Dashboard pages
Открыть макет
3. Макет Figma — лендинг
Бесплатный макет SaaS лендинга для Фигмы. Шаблон выполнен в синих тонах и имеет два варианта: светлый и темный. Так же доступны версии для различных устройств (планшеты, смартфоны) и разрешений экрана. В самом макете есть большое количество информационных блоков, а так же, блоков с ценами и отзывами.
Открыть макет
4. Макет мобильного приложения (темный)
Макет Figma для мобильного приложения Android или iOS, выполнен в темной цветовой гамме. Сам макет содержит в себе 10 экранов (или страниц) мобильного приложения, с большим количеством элементов интерфейса (формы, кнопки, информационные блоки, модальные окна и т.д.).
Открыть макет
5. Макет блога / информационного сайта
Макет личного блога или информационного сайта в светлых тонах. Состоит из 9 страниц: главная страница, страница записей, одиночная запись, категории, страница автора, страница «о нас», контакты и страница с юридической информацией.
Открыть макет
6. UI Kit — Material Design
UI Kit — набор элементов Material Design 3 для Figma. В наборе имеются компоненты в светлой и темной цветовой гамме. Отлично подойдет для дизайна мобильных приложений под Android.
Открыть макет
7. Макет лендинга товаров для красоты и здоровья
Макет лендинга для рекламы и продажи товаров для красоты и здоровья. Дизайн выполнен в теплых тонах и содержит различные информационные блоки, в которых описываются преимущества товара и демонстрируются его фото.
Открыть макет
8. Макет cайта для дизайнеров интерьера
Макет сайта для компании предлагающей услуги дизайна интерьера. Легкий и светлый макет, состоит из 7 страниц, на который вы сможете найти большое количество уже готовых элементов и секций. Отлично подойдет в качестве основы для вашего дизайна или для верстки в портфолио верстальщика.
Открыть макет
9. Макет приложения либо мобильной версии интернет-магазина
Макет приложения интернет-магазина либо мобильной версии интернет-магазина. Можно использовать в качестве основы при создании приложения либо мобильной версии сайта. Макет содержит в себе большое количество шаблонов страниц.
Открыть макет
10. Макет лендинга или сайта-одностраничника
Неплохой макет с контрастными темными блоками на основном белом фоне. Содержит большое количество элементов для отображения информации на странице. Подойдет для лендинга или сайта-одностраничника для компании.
Открыть макет
11. Макет кредитных карт
Более 30 макетов кредитных карт в слоях. Все изображения, текстовые данные и градиенты можно редактировать, либо заменить своими. Отлично подойдет в качестве примера для создания собственного дизайна кредитной или дебетовой карты.
Открыть макет
12. Иконки популярных социальных сетей
Набор из более чем 50 иконок популярных социальных сетей и приложений, таких как: WhatsApp, Instagram, YouTube, Pinterest, Twitch, Telegram, Viber, Вконтакте и других. Отлично подойдут для оформления любого блока контактов или блока с социальными сетями компании на сайте.
Открыть макет
13. iOS 16 UI Kit
Большой UI kit операционной системы iOS 16. Отлично подойдет для создания дизайна либо прототипа мобильного приложения для устройств iPhone или iPad.
Открыть макет
14. Набор SVG иконок Remix Icons
Если, по каким либо причинам, вас не устраивает плагин Iconify, в котором вы можете подобрать практически любую иконку для своего макета, вы можете скачать этот шаблон со всеми иконками популярного пака Remix Icons.
Открыть макет
15. Макет сайта для онлайн школы или курсов
Неплохой макет для онлайн школы или курсов (например по дизайну). Макет выполнен в светлой цветовой гамме и содержит векторные иллюстрации и фото, которые можно заменить на свои.
Открыть макет
Конечно, этот список можно сделать просто огромным, в несколько сотен записей как минимум. Но нам не хотелось собирать на этой странице все, что удалось найти на просторах интернета. Поэтому, мы отобрали лишь наиболее интересные (на наш субъективный взгляд) макеты.
В заключении
Список однозначно будет видоизменяться в будущем: добавим новые макеты, что то наверно удалим как потерявшее свою актуальность.
P.S.: если вы нашли какой то макет, который как вам кажется просто обязан быть в этом списке — отправьте нам ссылку через форму обратной связи на странице «Контакты».
с псд любой дурак может, с пережатого жпега попробуй, вот где скилл )
У HTML Academy есть рассылка, иногда присылают на почту макеты для практики верстки
Лучше всего качай уже сверстанные шаблоны с psd исходниками. Потом пытайся верстать по макету и после каждого блока сверяй с исходной версткой, что бы приблизительно понимать как правильно, так будет намного эффективней.
научиться пользоваться поиском и проблем не будет
У меня же скопилась гигантская коллекция(качал отовсюду, htmlacademy тоже прилично добавили), интересно — пиши, закину куда-нибудь
На чтение 7 мин Просмотров 14.3к. Опубликовано 21 марта 2023
В последние годы произошли большие изменения в том, как разрабатываются сайты, как делаются отзывчивые прототипы сайтов и как работает электронная коммерция. Стандартная целевая страница строится поверх HTML-шаблона, который был сделан с учетом витрины интернет-магазина. Это связано с тем, что все более распространенным и популярным становится сайт, который полностью реагирует на изменения и имеет широкий набор функций.
Использование бесплатных HTML-шаблонов сайтов имеет массу преимуществ. Во-первых, вы можете сэкономить много денег. Шаблоны сайтов – это отличный способ получить профессионально выглядящий сайт без необходимости тратить много денег.
Кроме того, вы можете найти большое разнообразие шаблонов на выбор. Это означает, что вы можете бесплатно скачать шаблоны сайтов, которые соответствуют вашим конкретным потребностям и стилю. Наконец, использование шаблона поможет вам быстро и легко запустить свой сайт.
Содержание
- Ucorpora
- Grad School
- Invent
- Hexashop
- Financing
- Elegance Template
- Architect
- Victory Template
- Impact Agency
- Liberty Market
- Denschool
- KidKinder
- Tween Agency
- Tooplate Fashion
- Pavo Landing Page
- Inodino
- Antique Café
- Wave Café
- POSH Auto Parts
- Faith in Christ Church
- Life News
- AAnglo
- Tacko Auto Parts
- Free Rise Church
- Leadership Event
- Mexant Financial
- Snapx Photography
- Fanadesh Education
- ECOURSES Online Courses
- Zoofari Safari Zoo
- Apex Home Repair
- Drivin Driving School
- Foody Organic Food
- Transpolar
- Baker Cake & Bakery
Ucorpora
Удивительный бесплатный HTML CSS шаблон сайта Ucorpora использует современные технологии и отзывчивый дизайн.
Grad School
Бесплатный HTML-шаблон Grad School был создан специально для создания образовательных сайтов. Полноразмерный видеобаннер можно увидеть, если прокрутить вниз до того места, где он находится на сайте, в дополнение к трем блокам с переворачивающимся контентом.
Invent
Сайты, посвященные IT-решениям, IT-компаниям или корпоративным IT, могут использовать бесплатный шаблон Invent, который можно скачать. Он будет хорошо отображаться на различных настольных компьютерах и мобильных устройствах, поскольку построен с использованием сетки Bootstrap 4.
Hexashop
Вы можете начать зарабатывать деньги на своем онлайн бизнесе, используя HTML/CSS шаблон HexaShop. Более подробную информацию о HexaShop можно найти по ссылке.
Financing
Financing – это бесплатный HTML bootstrap шаблон, который может быть использован для широкого спектра тем сайтов, таких как консалтинг, консультирование, бизнес, консультант, корпоративный, финансы и финансовые проблемы. Любой сервер может загрузить этот шаблон и использовать его.
Elegance Template
На HTML-шаблоне Elegance в фоновом режиме может проигрываться видео с синим градиентом. В HTML-документе это видео также воспроизводится в фоновом режиме. Стрелки вверх и вниз на клавиатуре можно использовать для перемещения между различными разделами сайта. Элементы карусели используются на многих страницах.
Architect
Независимо от того, как долго вы работаете в архитектурной отрасли, вам все равно необходимо создать сайт для своей компании, который будет отлично демонстрировать вашу работу, чтобы оставаться конкурентоспособным.
Victory Template
Victory – это CSS-шаблон, ориентированный в основном на заведения общественного питания, в частности рестораны. Для бронирования можно использовать простую HTML-форму. Шаблон также предлагает регулярно меняющиеся блюда.
Impact Agency
Impact – это великолепный бесплатный HTML шаблон Bootstrap 5, который идеально подходит для компаний, желающих выделиться в Интернете. Он был создан с помощью Bootstrap и включает в себя версию HTML 5.
Liberty Market
NFT используется Liberty NFT Market. Это HTML CSS шаблон Bootstrap 5 с пятью редактируемыми HTML страницами и яркими цветами. Этот макет имеет профессиональный уровень.
Denschool
Школьные HTML шаблоны для детского сада, начальной школы, колледжа, средней школы и университета доступны под названием Denschool. Свободны по Creative Commons 3.0 для частного и коммерческого использования.
KidKinder
Бесплатный HTML-шаблон дошкольного учреждения называется KidKinder. С героическим заголовком и элементами пользовательского интерфейса, такими как контактная форма, навигация в нижнем колонтитуле и форма подписки, он прост в использовании.
Tween Agency
Основанный на CSS HTML маркетинговый шаблон под названием Tween Agency. В нем есть регулятор изображений, три вкладки во всю ширину сайта, слайдер-аккордеон для FAQ, прямое всплывающее изображение в области проекта, две колонки для цен и встроенная контактная форма HTML.
Tooplate Fashion
HTML-шаблон Tooplate Little Fashion имеет отточенный внешний вид. Включает в себя домашнюю страницу, страницу о сайте, информацию о продуктах, FAQ, контактную страницу и страницу регистрации/входа в систему. На главной странице размещен полностраничный слайдер изображений и информация о правах на использование.
Pavo Landing Page
Бесплатный шаблон под названием Pavo доступен для немедленного использования. Он был разработан для широкого применения. Он может создавать дизайн непосредственно в собственном стиле с помощью Tailwind CSS и шаблона, основанного на Bootstrap и имеющего ряд классов.
Inodino
Шаблон сайта для дизайна интерьера Inodino – это отличный HTML-шаблон для переделки домов и офисов, а также для фирм, занимающихся дизайном интерьера. Бесплатный для частного и коммерческого использования по Creative Commons 3.0.
Antique Café
Этот HTML шаблон кафе является одностраничным. Имеется 2-колоночное меню горячего и холодного кофе; также есть разделы “О сайте” и “Контакты”. Фоновые изображения могут быть легко изменены.
Wave Café
Wave Café – это HTML-шаблон с видео-фоном. Этот отзывчивый шаблон дружелюбен к мобильным устройствам.
POSH Auto Parts
Любая онлайн-компания, продающая автомобильные аксессуары, запасные части или что-то совершенно другое, может использовать HTML-шаблон для электронной коммерции Posh Auto Parts.
Faith in Christ Church
Для любой христианской церкви Faith in Christ Church является отличительным, передовым и потрясающим HTML шаблоном сайта. Этот бесплатный церковный шаблон предоставляет вам массу вариантов дизайна и творческую свободу благодаря своему великолепному, современному внешнему виду.
Life News
Отзывчивый, кроссбраузерный дизайн сайта для индустрии здравоохранения использует шаблон Magazine. Дизайн на основе CSS имеет формы для событий, галерею контактов, подписку на рассылку, фоновое видео и шрифты Google.
AAnglo
Мы используем такие известные и современные инструменты разработки, как HTML, CSS и SASS. Этот шаблон блога невероятно изыскан и великолепен. Он удобен для многих видов сайтов-блогов. С разделами электронной коммерции этот HTML шаблон позволит вам создать идеальный блог.
Tacko Auto Parts
Отличный автомобильный аксессуар для любого онлайн-бизнеса – современный HTML-шаблон автоаксессуаров Tacko.
Free Rise Church
Бесплатная тема для католической церкви. Здесь представлены несколько страниц сайта. Дизайн на основе css предлагает фоновое видео, шрифты google, события, галерею, формы регистрации контактов и рассылки новостей.
Leadership Event
Leadership Event – это HTML-шаблон для цифрового маркетинга, построенный на CSS-основе для встреч и мероприятий. Для сайта вашей компании или организации вы можете расширить этот одностраничный дизайн шаблона на множество страниц.
Mexant Financial
Mexant – это криптовалютный HTML CSS шаблон и конструктор сайтов для цифрового маркетинга или бизнеса. Четыре веб-сайта включены подменю из главного меню расширить страницы. Предусмотрены формы и карты, а разделы имеют таблицы и вкладки.
Snapx Photography
SnapX Photography предлагает 5 HTML шаблонов страниц с формами входа/подписки и выпадающими меню. Заголовок имеет темно-серый цвет, а содержание – ярко-синий.
Fanadesh Education
Fanadesh отвечает образовательному веб-шаблону. С помощью этого шаблона с элементами html вы сможете легко создать сайт для детского сада, университета, домашней школы, онлайн-образования и многого другого.
ECOURSES Online Courses
Online Courses включает в себя предварительно созданные HTML-страницы и CSS bootstrap-шаблоны для успешного сайта.
Zoofari Safari Zoo
Zoofari — бесплатный шаблон сайта дикой природы – это лучший дизайн веб-страницы, подходящий для создания любого сайта, связанного с сафари и зоопарком.
Apex Home Repair
Apex Home Repair бесплатный шаблон сайта использует правильный HTML, CSS, SASS, bootstrap и jQuery. Он удобен для мобильных устройств, настраивается и полностью отзывчив.
Drivin Driving School
Drivin – это отличный шаблон сайта для автошкол, потому что он бесплатный, имеет привлекательный дизайн и использует самые последние и передовые технологии.
Foody Organic Food
Бесплатный шаблон сайта Organic Food содержит различные опции для экономии времени.
Transpolar
Веб-дизайнеры с большим опытом сделали шаблон сайта Transpolar таким образом, чтобы его можно было использовать для создания сайтов о транспорте.
Baker Cake & Bakery
Отличный шаблон для бизнесов, связанных с производстваом хлеба, и пекарен.
Здравствуйте.
Я новичок в верстке и, скорее всего, задам сейчас очень глупый вопрос, но, тем не менее, буду рад, если Вы найдете время ответить ).
В первом макете под названием «Agata Bielen» есть папка слоев с сеткой (grid). Эта сетка имеет какое-то функциональное назначение при верстке или же её назначение исключительно эстетическое? Если второй вариант, то она должна накладываться на все три экрана или на какой-то определенный? Или вообще идти отдельным экраном? Необходимо ли реализовать кнопку, используя которую пользователь сможет включать/выключать эту сетку по желанию?