Figma is a cloud based collaboration tool where users can work with others on the same file at the same time.

Pros:
- Real-time collaboration
- File sharing through email or links
- Easy tool to design, prototype, and provide some code for developers
- Cloud-based 
- Free Plan
- Plugins

Cons:
- Must be connected to the internet
- Unable to see who edited what

Figma

Balsamiq is the fastest and most focused low-fidelity wire framing tool in the industry. 

Pros:
- It is fast, you can quickly sketch ideas fast
- Keeps you focused on basics, no fancy colors or design elements
- Perfect for low-fidelity wire framing
- Ability to convert design to PDF

Cons:
- Not great for mid-fidelity or high-fidelity mockups
- Some elements not easy to edit
- Limited collaborative functionalities
- Limited UI elements


Balsamiq

InVision is a collaborative tool that helps you to create mockups of your wireframes. It is great for prototyping and team collaboration. It is particularly useful for getting ideas, suggestions, and feedback.

Pros:
- Integrate images or sketches with drag and drop
- Good system for collecting feedback
- Hassle-free design & prototyping 
- Interface for real-time sharing and commenting on prototypes

Cons:
- Pricey about $22 a month
- Customer support services is limited
- Not good for wire framing
- Somewhat complicated, requires learning curve

InVision

Adobe XD is a great option when creating prototypes because you can also design with other users. It is especially popular since you are able to use it under the Creative Cloud suite. 

Pros:
- Repeat grid feature you don’t need to copy & past you can just adjust the grid you want replicated
- Fill the UI by dragging & dropping content
- Saves time & energy
- Works best on PCs
- Supports UX design

Cons:
- Subscription is on monthly basis, somewhat costly
- Not as mature as Sketch and InVision
- Difficult to share with clients/colleagues

Adobe XD

Sketch is a vector-based design tool focusing on on-screen design. Many mobile app designers & developers use Sketch to design user interfaces for varying smart devices. Easy-to use and is good for both beginners and professionals.

Pros: 
- Essential web designer tools available 
- No font-rendering woes, stays the same on the web
- Design elements like icons & reuse them
- Collaboration platform
- Built-in grids
- Export codes
- Autosave & multiple dartboards
- Device mirroring to test how they look on your devices

Cons:
- No permanent color palettes
- Learning curve
- Can slow down your machine

Sketch

Marvel allows you to create first-rate prototypes / mockups without the hassle. You can create wireframes and design website & app prototypes from your browser. You can even sync your designs from other apps and collaborate.

Pros:
- Easy to set up and work on
- User friendly interface
- Cloud-based prototyping & wire framing
- Plugins for Sketch and Photoshop
- Share URL in single click

Cons:
- Costly , trial allows only 2 projects
- Doesn’t work offline
- Can’t animate mockup screens

Marvel

Generative Artificial Intelligence is a technology that allows for the translation of imagination into a computer screen. It has the potential to significantly impact the creative process by enabling faster brainstorming and exploration of new ideas, potentially making the creative process more accessible to a wider audience.

Currently, there are no fully developed generative AI tools for generating complete user interfaces. However, some companies, such as [Adobe](https://blog.adobe.com/en/publish/2022/10/18/bringing-next-wave-ai-creative-cloud), have started to implement AI features in their products.

Generative Artificial Intelligence (AI)

- InVision (Free, paid plans available)
- AdobeXD
- Sketch
- Marvel
- Balsamiq
- Figma (Free)
- Generative AI

Rutgers University, Newark

San Jose State University

University of Michigan - Ann Arbor

- UI Design Methods
- UI Design Tools
- UI Design Elements
- Types of Interfaces

UI Design Methods and Tools

* Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field

* Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons

* Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows

* Containers: accordion

User Interface Elements

Types of User Interfaces
- Graphical user interfaces (GUIs)
- Voice-controlled interfaces (VUIs)
- Gesture-based interfaces

Types of Interface

UI Design Tools

Methods and techniques used to make an interface easier to use.

- Atomic Design
- Landing Page Best Practices

Learn Before

Related

Learn After