Figma Live Embed Kit
Tools to help you design, prototype, mockup, web and mobile projects
Why use a web prototype tool?
Way before design and Prototype tools were in existence, I remember creating a layout in Photoshop.
I also have seen designers share hand-drawn sketches of their design on paper.
Since Photoshop, Adobe has seen the need for a tool that strictly focuses on design and prototyping, this is when Adobe XD was created.
Then again, could this be Adobe’s response to the success of Sketch?
For whatever the reason, in the end, everyone benefits.
So what is a web prototyping tool?
The designers at ExperienceUX have the best definition of this question:
A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch, to a clickable HTML prototype. However, typically when people talk about a prototype they are referring to an interactive prototype of some kind which allows users to navigate from page to page and use functionality such as drop down menus.[ExperienceUX].
Advantages
- Non Designers can use these tools.
- No coding skills required to use these tools.
- Collaboration: share your concepts and design with others.
- Actual evaluation: the designer and clients can actually try out your concept.
- Actual feedback from clients.
- Can save time and money: as you have a better handle of the client needs.
Disadvantages
We live in an imperfect world. If there are good things about prototyping, there are not good things in using these tools:
- Extreme time can be involved to build the prototype, which can offset the initial cost savings.
- Confusion of prototype and finished product: a prototype is basically the initial design before adjustments are added. The client may have expected all their changes to have been implemented in the finished product.
- Design limitations: prototype construction can be limited to designers knowledge, skill, and experience.
- Incompabitibily: Trying to fit the prototype design (or reuse an existing model) into the client’s requirements even though it is technically not feasible.
Designing and Prototyping Tools
Tools for Web and Mobile Apps| Tool | Description | Platform |
|---|---|---|
| Figma | Figma is the first interface design tool based in the browser, making it easier for teams to create software. Never upload, download, or worry about versions again | CrossBrowser |
| Sketch | Sketch is a app for UI, Mobile, and Web design. | MacOS |
| Adobe XD | For designing and prototyping UI & UX for Web and Mobile apps. | MacOS, Windows, IOS and Android. |
| Adobe Illustrator | Although Illustrator is used to create vector drawings, it can also be use to cre | MacOS and Windows |
| InVision App | The new InVision—codename: V7—runs on an entirely new code base, is remarkably fast, and redefines collaboration across teams and stakeholders. It also comes with a whole new look. | Cross Browser (All major browsers) |
| Axure | Axure is a desgin, wireframing, protoypting tools for creating web and desktop apps. The Pro version offers documentation and other neat features. | MacOS and Windows |
| Webflow | The power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. | CrossBrowser |
| FluidUI | We've spared no effort to ensure prototyping with Fluid UI is fast. ... Create interactive web and mobile prototypes with taps, swipes, clicks and more gestures using Fluid UI's simple and fun to use linking system. ... | Browser Tool: Chrome and FireFox |
| Gravit Designer | Gravit Designer is a full featured free vector design app right at your fingertip. It is available for different platforms including Mac, Windows, Linux, Chrome and the Web. | Cross Platform MacOS, Windows, Linux |
| ProtoPie | ProtoPie is a prototyping tool for smart devices. ProtoPie makes elaborate prototypes possible without any coding, and these prototypes can be tested on actual devices. | MacOS and Windows |
These are just some of the tools available for use right now.
If you do a search on the internet, you will discover a wealth of more design and prototyping tools.
I am sure if you have the time to test all these tools, you can find one that best fits your needs.
All the best!
Gerald Watanabe
Islandwebtek
