Understanding UI/UX Design

What is UI design?

User Interface Design refers to the design of the user interface for software, websites or applications. It’s about programming the look of things, with a view to facilitating usability and to improve the user experience.

User interface (UI) is anything a user may interact with to use a digital product or service. This includes everything from screens and touchscreens, keyboards, sounds, and even lights.

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.

User interfaces are the access points where users interact with designs. They come in three formats:

1. Graphical user interfaces (GUIs) — Users interact with visual representations on digital control panels. A computer’s desktop is a GUI.

2. Voice-controlled interfaces (VUIs) — Users interact with these through their voices. Most smart assistants — e.g., Siri on iPhone and Alexa on Amazon devices — are VUIs.

3. Gesture-based interfaces — Users engage with 3D design spaces through bodily motions: e.g., in virtual reality (VR) games.

What is UX design?

User experience, or UX, evolved as a result of the improvements to UI. Once there was something for users to interact with, their experience, whether positive, negative, or neutral, changed how users felt about those interactions.

To understand what UX is really all about, there are 10 comprehensive explanation of UX design

1. UX design is the process used to determine what the experience will be like when a user interacts with your product

2. User experience design is an approach to design that takes the user into account

3. UX design is about solving problems through empathy

4. User Experience Design is a process for designing systems that offer a great experience to users

5. UX is improving how useful, easy, pleasant, marketable, or addictive it is to use a product

6. User experience design is the fulfillment of a brand’s promise

7. UX design is the art and science of generating positive emotions through product interactions

8. UX design is a commitment to building products with the customer in mind

9. UX design is design with an awareness of every touchpoint that makes up the overall experience with your product or service

10. It’s the practice of meeting people’s needs before, during, and after product development

Difference between UI and UX

1. At the most basic level, UI is made up of all the elements that enable someone to interact with a product or service. UX, on the other hand, is what the individual interacting with that product or service takes away from the entire experience.

2. UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function

3. A UX designer is concerned with the conceptual aspects of the design process, leaving the UI designer to focus on the more tangible elements

4. UI is the bridge that gets us where we want to go, UX is the feeling we get when we arrive.

5. UI is focused on the product, a series of snapshots in time. UX focuses on the user and their journey through the product

6. UX encompasses all the experiences a person has with a product or service, whereas UI is specific to the means by which people interact with a product or service.

Introduction to Design Tools

Designers make use of some design tools to bring their work to life and those tools include Figma, Sketch, AdobeXD, InVision, Marvel app and so on.

Some of the design tools are discussed below with their advantages and disadvantages.

1. InVision

Need a collaborative tool to create mockups of your wireframes?

Well, InVision is not only a workflow platform but also an amazing tool for prototyping and team collaboration. It may be one of the best features it has to offer. While it allows you to work individually without any nuisance, you can easily communicate with your team of designers. This is especially useful for getting ideas, suggestions, feedback, and the like quickly.

Main features are:

• Whiteboarding
• Mockups sharing and presentation
• Prototyping
• Project management (for designers)
• Real-time meetings
• Research and user testing
• Feedback and commenting
• Team organization and collaboration

Advantages:

• Let’s you integrate images or sketches in your prototypes with drag and drop feature
• Hassle-free design and prototyping
• Good support system for collecting feedback.
• Clean interface for real-time sharing and commenting on prototypes
• A user-friendly interface

Disadvantages:

• Not only is it pricey but allows limited actions (the yearly plan is $22 / month)
• Customer support services is limited as well
• Slow as a snail
• Not good enough for wireframing
• Somewhat complicated and requires a learning curve
• More good for adding interactivity to designs than designing

2. Adobe XD

If agility is something you desire in designing or creating prototypes, then Adobe XD is a good option, because not only does it let you design but also share user interfaces and experiences. With Adobe XD it’s smooth sailing for digital projects under its Creative Cloud suite. Moreover, it’s the industry standard. If you’re new to Adobe’s XD however, you may find its interfaces different from the regular adobe. However, it’s in competition with the leading design tools in the market.

Main features are:

• You can create vector designs and do wireframing
• Offers voice prototyping
• Includes drawing tools too
• Offers non-static interactions and mobile and desktop previews
• Lets you share tools, give feedback on designs
• Gives you a device-specific artboard to start a project
• XD integrates with Creative Cloud
• Let’s you import any UI kit, for example, Google’s Material Design

Advantages:

• A clean interface
• With its repeat grid feature you don’t have to copy-paste or Ctrl+D things, just select the group and adjust the grid when you want to replicate
• You can fill the UI by dragging and dropping content
• Saves time and energy — If you are in the web design industry, you’re most likely already an Adobe user
• With the entire suite and integration, you don’t have to pay for another software
• Works best on PCs and lets you design for PCs
• Adobe XD even supports UX design

Disadvantages:

• Originally, it wasn’t created for UI/UX design
• The subscription on a monthly basis, somewhat costly
• Some say it isn’t as mature as Sketch and InVision
• It’s very difficult to share with clients or colleagues

3. Figma

Hands down one of the best and most easy-going interface design tools, what’s more, it lets you collaborate with your team of designers in real-time. This is especially helpful if you’re working alongside multiple contributors.

It’s available in the browser, however, you can also download it for Windows, Mac, or Linux, and there are both free and paid versions depending on what you use it for.

Figma has already replaced Invision, Sketch, and Zeplin and has been widely used by big companies like Uber, Microsoft, Slack, Braintree and more.

Main features are:

• Scale your design to fit the parent frame
• Four formulas: union, intersect, subtract and exclude, lets you combine any set or number of shape layers with accuracy
• Interactive 60fps editing
• Pixel-perfect image previews

Advantages:

• Easy and simple in use
• Great tool for wireframing and prototyping
• Cloud-based storage
• Has all basic vector need
• Zeplin integration
• Has almost all the XD tools

Disadvantages:

• The app freezes during any medium to rigid task
• Hogs all of your RAM

4. Sketch

Figma may have replaced Sketch too for some, however, it is still some big companies like Google, Apple, Facebook, Nintendo’s sweetheart.

So what makes it so great? First off, it’s a vector-based design tool that focuses on on-screen design. Many mobile app designers and developers use Sketch to design epic user interfaces for varying smart devices. With Sketch it’s plain sailing. It offers a torrent of easy-to-use but powerful tools allowing both beginners and professionals to design at their best.

Main features are:

• Grids and guides (let you place and move around the objects)
• Symbols (to create icons, avatars as well as other design elements)
• Vector editing
• Collaboration platform
• Code export
• Libraries
• Plug-Ins
• Can be integrated with Jira Cloud, Zeplin, and more

Advantages:

• Offering the essential web designer tools ( it’s a12MB in comparison to Photoshop CS5, which is 412MB)
• No font-rendering woes, it stays the same on the web
• You can design elements like icons etc and reuse them
• Collaboration platform
• The export codes let you refine and use your creations in other apps
• Built-in grids
• Autosave and multiple artboards
• Device-mirroring (you can mirror your designs on devices to test how they look)

Disadvantages:

• Can slow down your machine
• Doesn’t let you create permanent color palettes
• The learning curve makes you throw yourself out of your comfort zone
• Some say it isn’t user-friendly however, to each its own

5. Marvel App

If you’re taking baby steps and need to give your idea or concept a tangible form then Marvel is your go to app.

This mobile app design platform was created for everyone, not just app developers or designers. Hence, it’s simplicity and user-friendly interface. You can create first-rate prototypes or mockups without hassle.

Some of its users include IBM, Buzzfeed, Deliveroo, Stripe, and more.

Main features are:

• Lets you create wireframes and mockups
• Lets you design website or app prototypes from your browser
• Lets you sync designs from other apps like Sketch
• You can design as well as test and scale
• Lets you collaborate with your team
• Lets you download assets or generate Android XML, CSS, and Swift codes for your prototypes

Advantages:

• Easier to set up and work on
• User-friendly interface
• Cloud-based prototyping and wireframing
• Offers Plugins for sketch and photoshop
• Lets you share the URL in a single click, interested people can easily view it in their browsers

Disadvantages:

• Costly and trial only allows 2 projects per user
• Doesn’t work offline
• You can’t animate mockup screens (isn’t the end of the world although)