11 инструмента за създаване на макети и прототипи на вашите сайтове и уеб приложения

Уеб рамката (мокет) всъщност е схематичен план на уеб страница за UI / UX дизайнер. Можете дори да начертаете на ръка основата върху лист хартия, но е много по-ефективно да използвате инструментите за телена рамка, тъй като те ви позволяват да използвате инструменти за плъзгане и пускане, да си сътрудничите с други дизайнери и да показвате на клиентите вашите идеи, преди да започнете да ги правите. Дизайнерът създава телена рамка в черно и бяло, за да очертае местоположението на ключови елементи като лого, навигационно меню, съдържание и др.

В този списък ще намерите 11 от най-добрите инструменти за структуриране и създаване на прототипи на нови уебсайтове, теми и приложения. Да започваме!

1. InVision

Цените започват от $0 за 1 прототип
Поддръжка на платформа: базирана на браузър; Всички браузъри

UXPin има безплатен план.
Настолно приложение, Pen Tool, Променливи и условни взаимодействия, Локални шрифтове и API заявки.
Поддръжка на платформа: базирана на браузър; Всички браузъри

UXPin е богат на функции инструмент, който ви позволява да създавате телени рамки и макети, преди да създавате прототипи на UX дизайни. Това е друг чудесен онлайн инструмент за екипа за разработка. Тя ви позволява да представите своя дизайн на други членове на екипа, клиенти и да правите промени в реално време. Използва се от Microsoft, NBC и USA Today.

3. Приложение Marvel

Цените започват от $0 за основни функции
Поддръжка на платформа: Safari; Chrome; Firefox

Marvel App е инструмент, който ви позволява да проектирате структура на уебсайт, преди да разработите UX дизайн за уебсайтове и приложенияс адаптивен дизайн. Можете да създадете свои собствени въведения или да използвате изображения, създадени с Photoshop или Sketch. Този инструмент също работи в реално време, позволявайки на членовете на екипа и клиентите да оставят отзиви или да създават бележки.

Цените започват от $0 за 5 графики
Поддръжка на платформа: базирана на браузър; Всички браузъри

Gliffy е многофункционален инструмент за телена рамка и блок-схема за нови уебсайтове. Компаниите може да харесат инструменти за блок-схеми, а уеб дизайнерите ще оценят способността да създават прости дизайни на уеб страници.

5. OmniGraffle

Цените започват от $49,99
Поддръжка на платформа: Mac и iOS

Този многофункционален инструмент от OmniGroup не е само за създаване на телени рамки на уебсайтове. OmniGraffle ви позволява да създадете основната рамка на вашия сайт по различни начини, включително с помощта на вашия iPad и Apple Pencil. Има функция за разпознаване на форма за тези, които предпочитат да нарисуват своя дизайн, вместо да използват инструмент за плъзгане и пускане.

Цените започват от $0 за 1 проект
Поддръжка на платформа: базирана на браузър; Всички браузъри, налично приложение Chrome

Moqups е инструмент за телена рамка и прототипиране, който ви позволява да създавате прости оформления за уебсайтове до етапа на UX дизайн. Можете да свързвате връзки, да добавяте свои собствени изображения, да експортирате в PDF/PNG файлове и др. Това е много удобен инструмент за представяне на вашите идеи пред клиенти и членове на екипа. Използва се от Opera, Intel и военновъздушните сили.

Цените започват от $289 за един лиценз
Поддръжка на платформа: Windows и Mac OS

Axure е друг многофункционален инструментс които можете да създавате wireframes и прототипи на сайтове за браузъри на компютри и мобилни устройства. Можете да започнете в черно и бяло и след това да добавите лога, изображения, цветове, шрифтове и да тествате различни версии на UX дизайна.

8. Просто в ума

Цените започват от $19 на месец
Поддръжка на платформа: Windows и Mac OS

Този популярен инструмент за телена рамка и създаване на прототипи се използва от Google, Adobe и Oracle. Тя ви позволява не само да планирате напълно как вашият сайт ще изглежда, усеща и функционира, но също така и да разработвате мобилни и уеб приложения. Дизайнерите могат да се възползват от възможността да интегрират инструменти за по-добра работа. Това включва Adobe Illustrator за плавно прехвърляне на SVG файлове от Illustrator към Justinmind.

9. Присмехулник

Цените започват от $12 на месец за 3 проекта
Поддръжка на платформа: базирана на браузър; Всички браузъри

Mockingbird е wireframe приложение с прости функции за прототипиране на UX дизайн. Използвайте инструмента за плъзгане и пускане за бързо създаване на wireframe, използвайте UI елементи за свързване на страници и всичко това заедно ще ви даде възможност да създадете база, стил и карта на сайта в един инструмент.

10 Hot Gloo

Цените започват от $14 на месец за 2 проекта
Поддръжка на платформа: базирана на браузър; Всички браузъри

HotGloo е инструмент за телена рамка и прототипиране, използван от компании като NBCUniversal, Disney и Sky. Той разполага с адаптивно създаване на телена рамка, пълен списък с елементи на потребителския интерфейс и готови шаблони за потребителски интерфейс. Също така е чудесно за използване от екипа за разработка и координация с клиента на всички етапи на работа.

11. Mock Plus

Цените започват от $10 на месец
Поддръжка на платформа: Windows и Mac OS

Mockplus е прост инструмент за телена рамка, който ви позволява да преминете от черно-бяла скица на телена рамка към добре проектиран цветен макет. Той има над 200 предварително зададени компонента, които правят създаването на wireframe много лесно. Проектът може да бъде изпратен до клиенти и колеги чрез облака.