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

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 is a collaborative software tool that helps create mockups of wireframes. It is used for prototyping and team collaboration, and is particularly useful for getting ideas, suggestions, and feedback.

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

Cons:
- Pricey, about \$22 a month
- Customer support services are limited
- Not ideal for wireframing
- Somewhat complicated, requiring a learning curve

InVision

Balsamiq is a low-fidelity wireframing tool used in user interface (UI) design.

Pros:
- Allows for quick sketching of ideas.
- Keeps focus on the basics without distracting colors or complex design elements.
- Ideal for low-fidelity wireframing.
- Can convert designs to PDF.

Cons:
- Unsuited for mid-fidelity or high-fidelity mockups.
- Some elements are difficult to edit.
- Limited collaborative functionalities.
- Limited UI elements.

Balsamiq

- 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

UI Design Tools

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

- Atomic Design
- Landing Page Best Practices

UI Design Methods

User interfaces (UIs) can be classified into several primary types based on how users interact with the system:
- **Graphical User Interfaces (GUIs)**: Users interact with visual representations such as icons, buttons, and menus on digital screens or control panels.
- **Voice-Controlled Interfaces (VUIs)**: Users interact through spoken voice commands, commonly found in smart assistants.
- **Gesture-Based Interfaces**: Users engage with digital or virtual spaces through physical bodily motions, such as in virtual reality games.

Learn Before

Related

Learn After