Top 20 UX/UI Design tool to enhance your Designs

Top 20 UX/UI Design tool to enhance your Designs

In this article, you'll see top 20 UX/UI Design tool to enhance your Designs

UX design is all about providing your users with the information they’re looking for, and doing that in the cleanest and most intuitive way possible. Sounds challenging right? Well that’s just a day in the life of a UX Designer.



While the responsibilities of UX Designers vary from company to company (and even project to project), there are some general functions they all perform irrespective of their companies. Starting with product research, creating personas and information architecture and wrapping things up with wireframes, prototyping and product testing, UX Designers have a broad spectrum of tasks. And with so many tasks at hand, things can get a little sticky if you don’t have the right tools in place to lighten the burden. After all, no artisan really feels complete without their tools, and frankly UX Designers are no exception.

Source: Mockplus

Since designers have to deal with more complex UX issues to make their design more appealing to the targeted audience, they are looking for some tools that can help them automate some tasks or cut down on the complexities. Thankfully, there are hundreds of UX design tools available on the web. Of course, you don’t need all of them. To help you out, here we are bringing a round-up of some cool UX design tools, give them a try.

In this article, we’ve rounded up a list of the most useful tools for UX Designers and to make it a bit more user-friendly, we’ve broken these tools into five different categories: UX Analytics Tools, Session Recording & Heatmapping Tools, A/B Testing Tools, Visual Feedback Tools, and Prototyping & Wireframing Tools.

1. Sketch

Sketch is lightweight MacOS based UI tool. Although Photoshop is a personal favorite with the designers, still some have made a switch to Sketch. This super graphic design tool possesses similarity to Photoshop but is more focused on UI/UX design. The tool is powerful, has a wide range of features and brings out professional results. It extends infinite zooming, 2x export, and styled vector shapes which are apt for multiple resolutions. Sketch offers an ‘Export All’ feature and as it is vector-based, there is no problem in exporting PDF, JPG, and PNG (optionally in 2x) files.

Generally, app designers prefer 3 different tools for 3 purposes namely Omnigraffle for wireframing, Photoshop for visual design, and Illustrator for vector logos. All these 3 tools are perfectly aligned with Sketch, thereby making one app fulfill all your needs and achieve overall productivity with no wastage of time.

The sketch is suitable to use owing to its simple operation and the feature which can design the symbols of common elements like buttons, tabs, headers etc with ease. It not only fires up the process of wireframing but also enables an easy hand-off to the visual designers. As we are employing the same tool in the visual design stage, there won’t be much trouble in updating wireframes into high-fidelity visuals.

All the changes that we have witnessed in-app designing have been made possible because of Sketch’s vectorized model, components like multi-resolution exporting and shared styles and symbols.

2.Invision

A workflow, collaboration, and prototyping tool that has the capability to convert your static application designs into fully functional prototypes having an interactive nature.

What is even more impressive is the fact that these prototypes carry animations, transitions, and gestures for Android, iOS, as well as responsive web apps.

Let your clients have a firsthand experience of navigating through designs, leading to more sales when displaying to existing or prospective clients.

With Invision, you not only test visuals, but even wireframe flows in a more tangible manner.

Without any kind of coding, you can have designs coming to life, letting you as designers to identify issues and problems upfront, helping you to iterate accordingly.

3. MockFlow

MockFlow enables you to build basic layouts quickly

MockFlow is a suite of applications that are very helpful for a number of tasks in the typical project process. Primarily, the WireframePro app is a good alternative prototyping tool for you to use, especially if you’re testing out some new ideas.

If you just need to create wireframes, then take a look at MockFlow. It’s great for working on initial ideas and enables you to build basic layouts quickly, which is sometimes all you need to get thoughts into a presentable form.

4. Balsamiq

Balsamiq’s drag-and-drop elements make life easier

If rapid wireframing is what you’re looking for, then Balsamiq is a strong suggestion. You can quickly develop structure and layouts for your projects with ease. The drag-and-drop elements make life easier and you can link buttons to other pages. This means you can quickly start to plan your interfaces and then share them with your team or clients.

5. Pidoco

With the cloud-based software Pidoco you can create, share and test wireframes, mockups and prototypes. You will be able to add multiple pages and layers, and it also includes a library of drag-and-drop interface elements. Pidoco allows you to share prototypes with clients online and has functions to facilitate feedback and back-and-forth discussion. The price of this tool starts from $12 up to $175 a month (depending on the number of active projects).

Website: www.pidoco.com

6. Gliffy

Gliffy is a web-based diagram editor. This tool, let users drag and drop components and export images. You have got the possibility to collaborate online and there is also a version tracking function included. Gliffy is recommended for personal use and/or smaller businesses. Pricing ranges between $3.99 to $7.99 a month or you can choose the enterprise option (custom pricing).

Website: www.gliffy.com

7. UXPin

Designers are usually forced to come up with manual documentations when creating prototypes for development-ready designs.

UXPin is a great tool for automating the prototyping process and obtaining effective feedback.

UXPin allows the design teams to design, collaborate, and assess the prototypes before the development of the final product.

It works by generating necessary data for developers to use in designing various projects and ensures the prototype is in sync with the projects’ design elements.

8. Visual Inspector

Running a live website is a great way for UI designers to ensure any interface issues arising during the design and development of an application are resolved before deployment.

The Visual Inspector tool helps designers to achieve this quickly and without any hassles. It does not require coding or complicated tech skills to get the software running.

Visual Inspector can work with any website template — HTML, WordPress, and other templates.

9. InVision

Cost:

  • Single project — Free
  • 3 projects (starter) — Single project — Free3 projects (starter) — $15/monthUnlimited Projects (Professional) — $25/month5/month
  • Unlimited Projects (Professional) — $25/month

Runs on:

  • Single project — Free
  • 3 projects (starter) — Web5/month
  • Unlimited Projects (Professional) — $25/month

Prototypes for:

  • Single project — Free
  • 3 projects (starter) — AndroidiOSWeb5/month
  • Unlimited Projects (Professional) — $25/month

Invision is by far the most popular prototyping tool in the world. Their team is constantly adding new features to help designers prototype more efficiently. With InVision’s project management page, you can organize design components into a status workflow. You can set columns for To-do, In progress, Needs review, and Approved, and drag and drop your design components into the appropriate column.You could add interactions and animations to static images. You can upload multiple file types, including JPG, PNG, GIF, AI, and PSD. It has push and pull integrations with apps like Slack, Dropbox, Box, Trello, JIRA and much more.

It has simplified every aspect of our workflow and collaboration between design and development. One can design better, faster, and more collaboratively with real-time, and it’s in-browser design collaboration and presentation tools. Seamlessly launching meetings and creating guided tours with clients, and also present designs to stakeholders.Many unicorns use this prototyping tools for us UI/UX needs like Uber, Salesforce, Twitter, Linkedin etc which proves that this tool is the best for prototyping.

10. Adobe Experience Design

Cost:

  • Single project — Free
  • 3 projects (starter) — Free5/month
  • Unlimited Projects (Professional) — $25/month

Runs on:

  • Single project — Free
  • 3 projects (starter) — OS XWindowsAndroidiOS5/month
  • Unlimited Projects (Professional) — $25/month

Prototypes for:

  • Single project — Free
  • 3 projects (starter) — All5/month
  • Unlimited Projects (Professional) — $25/month

With Adobe XD, you can draw, reuse, and remix vector and build artwork to create wireframes, screen layouts, interactive prototypes, and production-ready assets all in the same app. We can switch easily from design to prototype right within the app. Also, add interactions and transitions and share with teammates and stakeholders to test the look and feel of your design.A product coming from adobe allows integrations with several of its products like Photoshop and After Effects which is a big plus.

Designers can be more productive by just importing files from their tools of Adobe without any hassle.Clients can make comments on your prototypes when you share directly, and view designs in real time on actual devices.

11. POP

Transforming your ideas into a workable prototype that people can actually use and share their valuable feedback is a time-consuming task. POP is here to help you out. With this tool, you will be able to build prototype right away without going through the rigorous and time-consuming process of doing it manually.

12. Wireframe CC — The minimal quick wireframe tool

Platform: Web-based

**Speed: **Less than10 mins

**Price: **Free

Fidelity: Low-fidelity

Wireframe.cc is an online wireframe tool, featuring a simple interface for quickly sketching your wireframes. It even reduces the toolbars and icons of a typical drawing app.

So, how quick it could be?

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

As the tool says itself, it only focuses on the very basics, no interaction or animation are available. The function of Wireframe.cc is basic and quick but kind of limited.

User feedback: “ This quick design software allows you to create the skeleton structure of the website before you go into adding all the complicated content on it. “

13. Balsamiq Mockups — A quick wireframe tool based on Flash

Platform: Mac, Window, Web-based

Speed: 5–10 mins

Price: Free trial — 30 days; Pro — $89

Fidelity: Low-fidelity

Balsamiq Mockups, developed by a software engineer, has won favor by many designers. It’s a great tool for designers to do quick wireframe design.

How Balsamiq can work quickly to do wireframe?

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

However, Balsamiq Mockups is not suitable for building large prototypes for the lake of in-depth animations.This is also not the original intention of the tool, which is actually created to do quick and rough wireframes not any prototypes.

User feedback: “ Mockups takes the product design process from hours to minutes… I just mocked up a new interface in about four minutes using the AIR version. So amazing! 

14. Fliud UI — A quick wireframe tool focuses on mobile App pattern

Platform: Web-based

**Speed: **10–15 mins

Price: Individual-&8.25 per month; Pro-$19.08 per month; Team-$41.58 per month

Fidelity: High-fidelity

Fliud UI is a web-based wireframe tool. Unique with the most wireframe tools, it supports gesture and animation. If you are seeking a tool for high-fidelity wireframe design, Fliud UI maybe your first choice.

Check the unique features to quickly do high-fidelity wireframe design in Fliud UI:

  1. Just with a mouse, you can build what you want, like sketching with a pen on paper, no limitation, no hindrance.
  2. The biggest feature is the concentration only on the basics. Wireframe.cc provides 3 design pattern, including web, mobile landscape and vertical screen mode.
  3. It’s quick to share via a simple URL.

But one thing, upload multiple images is not supported.

User feedback: “ It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.

The above are the 5 quick wireframe tools that can help you do real quick wireframe design. Each has their unique features and some cons. But in general, they are a good a tool for quick wireframe design.

Here, I’d like to share my favorite. The quick speed to do a wireframe is the first requirement, they are all in demand. But in the real design process, we usually need more features, such as the design inspiration, various ways of presentation and share, shortest learning curve, flexible interaction and animation, and plenty more easy-to-use settings. With my personal experience, Mockplus is the best one that meets the maximum requirements. It’s absolutely a brand new tool you shouldn’t miss out.

15. Principle

Principle is perfect for building great-looking animated interactions

Interaction design is what Principle excels at, especially when it comes to mobile applications. Tweaking and getting animated interactions just right is a breeze with Principle. You can look at individual assets and how they independently animate, right down to timings and easing.

16. Atomic

Atomic is another interactive design tool but what sets it apart is the ability to create form elements that you can actually type into. There is also a useful feature that enables you to import data and populate your designs. This really saves some time!

17. UXPin

For larger projects and design systems, UXPin’s a top solution

Described as the ‘end-to-end’ UX platform, UXPin is essentially another design tool but with a powerful ability to create design systems. UXPin serves larger design teams that need to work off the same styles and guides, saving time with product development when collaboration plays a large part.

18. Flinto (MacOs only)

Price: $99 (there’s a 14-days free trial)

This UI design tool is specialized in creating the design for apps and first of all – mobile apps. With its help, you will be able to add animated transitions among the different screens, create little interactions that will express the behavior of users and easily add scrollable areas with any scrolling animation. It is completely compatible with Sketch and that could make the design creation easier.

19. Adobe XD

Price: free

I’ve already told about Adobe Illustrator previously, and this is another product for designers from Adobe team. As they say on the app’s webpage, that it “is made for designers like you, by designers like us”. I appreciate such an approach very much. The Adobe XD focuses not on drawing, like Illustrator, but on prototyping and collective creation, with sharing and commenting options.

20. Marvel

Marvel is web-based app (no need to do any downloading) that has a very shallow learning curve. With an upgraded account, you can make your project a collaborative one. Choose from lots of different prototype frames, from an Apple Watch to an iPhone 6.

You can create screens directly in Marvel or add images from Sketch or Photoshop for example, and sync designs from your cloud storage.

All Marvel’s features are simple and easy to use – such as gestures, layering images and user testing. It also offers a Sketch plugin, which is great if you do lots of app design work in Sketch and want to nick some of the cool features from Marvel, such as the range of gestures and image layering.

Free for one user with two projects, otherwise plans start at £8/US$12 per month.

Design Patterns for Beginners with real-world Examples

Design Patterns for Beginners with real-world Examples

Design Patterns for Beginners with real-world Examples. When do you use Design Patterns? How do you implement different Design Patterns in Java? What are Design Patterns? Why do you use Design Patterns? What are the different types of Design Patterns? When do you use Design Patterns? What are the real-world examples for Design Patterns.

Design Patterns tutorial explained in simple words using real-world examples.

TABLE OF CONTENT

  • 0:00:00 Introduction
  • 0:01:40 What are Design Patterns?
  • 0:04:15 How to Take This Course
  • 0:05:50 The Essentials
  • 0:06:53 Getting Started with Java
  • 0:09:23 Classes
  • 0:13:34 Coupling
  • 0:15:34 Interfaces
  • 0:21:17 Encapsulation
  • 0:26:25 Abstraction
  • 0:30:33 Inheritance
  • 0:32:55 Polymorphism
  • 0:36:42 UML
  • 0:40:52 Memento Pattern
  • 0:42:43 Solution
  • 0:48:31 Implementation
  • 0:54:22 State Pattern
  • 0:59:46 Solution
  • 1:02:59 Implementation
  • 1:09:31 Abusing the Design Patterns
  • 1:11:18 Abusing the State Pattern

The Basic Design Patterns All Developers Need to Know in 2020

The Basic Design Patterns All Developers Need to Know in 2020

The Basic Design Patterns All Developers Need to Know. What is a Design Pattern? There are about 26 Patterns currently discovered. In this post, you'll see the 3 types of Design Patterns all Developers should know: Creational, Structural and Behavioral. We will go through one basic design pattern for each classified type.

What is a Design Pattern?

Design patterns are design level solutions for recurring problems that we software engineers come across often. It’s not code - I repeat,❌CODE. It is like a description on how to tackle these problems and design a solution.

Using these patterns is considered good practice, as the design of the solution is quite tried and tested, resulting in higher readability of the final code. Design patterns are quite often created for and used by OOP Languages, like Java, in which most of the examples from here on will be written.

Types of design patterns

There are about 26 Patterns currently discovered (I hardly think I will do them all…).

These 26 can be classified into 3 types:

1. Creational: These patterns are designed for class instantiation. They can be either class-creation patterns or object-creational patterns.

2. Structural: These patterns are designed with regard to a class's structure and composition. The main goal of most of these patterns is to increase the functionality of the class(es) involved, without changing much of its composition.

3. Behavioral: These patterns are designed depending on how one class communicates with others.

In this post, we will go through one basic design pattern for each classified type.

Type 1: Creational - The Singleton Design Pattern

The Singleton Design Pattern is a Creational pattern, whose objective is to create only one instance of a class and to provide only one global access point to that object. One commonly used example of such a class in Java is Calendar, where you cannot make an instance of that class. It also uses its own getInstance()method to get the object to be used.

A class using the singleton design pattern will include,

  1. A private static variable, holding the only instance of the class.
  2. A private constructor, so it cannot be instantiated anywhere else.
  3. A public static method, to return the single instance of the class.

There are many different implementations of singleton design. Today, I’ll be going through the implementations of;

1. Eager Instantiation

2. Lazy Instantiation

3. Thread-safe Instantiation

Eager Beaver ?️

public class EagerSingleton {
	// create an instance of the class.
	private static EagerSingleton instance = new EagerSingleton();

	// private constructor, so it cannot be instantiated outside this class.
	private EagerSingleton() {  }

	// get the only instance of the object created.
	public static EagerSingleton getInstance() {
		return instance;
	}
}

This type of instantiation happens during class loading, as the instantiation of the variable instance happens outside any method. This poses a hefty drawback if this class is not being used at all by the client application. The contingency plan, if this class is not being used, is the Lazy Instantiation.

Lazy Days ?

There isn’t much difference from the above implementation. The main differences are that the static variable is initially declared null, and is only instantiated within the getInstance() method if - and only if - the instance variable remains null at the time of the check.

public class LazySingleton {
	// initialize the instance as null.
	private static LazySingleton instance = null;

	// private constructor, so it cannot be instantiated outside this class.
	private LazySingleton() {  }

	// check if the instance is null, and if so, create the object.
	public static LazySingleton getInstance() {
		if (instance == null) {
			instance = new LazySingleton();
		}
		return instance;
	}
}

This fixes one problem, but another one still exists. What if two different clients access the Singleton class at the same time, right to the millisecond? Well, they will check if the instance is null at the same time, and will find it true, and so will create two instances of the class for each request by the two clients. To fix this, Thread Safe instantiation is to be implemented.

(Thread) Safety is Key ?

In Java, the keyword synchronized is used on methods or objects to implement thread safety, so that only one thread will access a particular resource at one time. The class instantiation is put within a synchronized block so that the method can only be accessed by one client at a given time.

public class ThreadSafeSingleton {
	// initialize the instance as null.
	private static ThreadSafeSingleton instance = null;

	// private constructor, so it cannot be instantiated outside this class.
	private ThreadSafeSingleton() {  }

	// check if the instance is null, within a synchronized block. If so, create the object
	public static ThreadSafeSingleton getInstance() {
		synchronized (ThreadSafeSingleton.class) {
			if (instance == null) {
				instance = new ThreadSafeSingleton();
			}
		}
		return instance;
	}
}

The overhead for the synchronized method is high, and reduces the performance of the whole operation.

For example, if the instance variable has already been instantiated, then each time any client accesses the getInstance() method, the synchronized method is run and the performance drops. This just happens in order to check if the instance variables’ value is null. If it finds that it is, it leaves the method.

To reduce this overhead, double locking is used. The check is used before the synchronized method as well, and if the value is null alone, does the synchronized method run.

// double locking is used to reduce the overhead of the synchronized method
public static ThreadSafeSingleton getInstanceDoubleLocking() {
	if (instance == null) {
		synchronized (ThreadSafeSingleton.class) {
			if (instance == null) {
				instance = new ThreadSafeSingleton();
			}
		}
	}
	return instance;
}

Now onto the next classification.

Type 2: Structural - The Decorator Design Pattern

I’m gonna give you a small scenario to give a better context to why and where you should use the Decorator Pattern.

Say you own a coffee shop, and like any newbie, you start out with just two types of plain coffee, the house blend and dark roast. In your billing system, there was one class for the different coffee blends, which inherits the beverage abstract class. People actually start to come by and have your wonderful (albeit bitter?) coffee. Then there are the coffee newbs that, God forbid, want sugar or milk. Such a travesty for coffee!! ??

Now you need to have those two add-ons as well, both to the menu and unfortunately on the billing system. Originally, your IT person will make a subclass for both coffees, one including sugar, the other milk. Then, since customers are always right, one says these dreaded words:

“Can I get a milk coffee, with sugar, please?”

???

There goes your billing system laughing in your face again. Well, back to the drawing board….

The IT person then adds milk coffee with sugar as another subclass to each parent coffee class. The rest of the month is smooth sailing, people lining up to have your coffee, you actually making money. ??

But wait, there’s more!

The world is against you once again. A competitor opens up across the street, with not just 4 types of coffee, but more than 10 add-ons as well! ?

You buy all those and more, to sell better coffee yourself, and just then remember that you forgot to update that dratted billing system. You quite possibly cannot make the infinite number of subclasses for any and all combinations of all the add-ons, with the new coffee blends too. Not to mention, the size of the final system.??

Time to actually invest in a proper billing system. You find new IT personnel, who actually knows what they are doing and they say;

“Why, this will be so much easier and smaller if it used the decorator pattern.”

What on earth is that?

The decorator design pattern falls into the structural category, that deals with the actual structure of a class, whether is by inheritance, composition or both. The goal of this design is to modify an objects’ functionality at runtime. This is one of the many other design patterns that utilize abstract classes and interfaces with composition to get its desired result.

Let’s give Math a chance (shudder?) to bring this all into perspective;

Take 4 coffee blends and 10 add-ons. If we stuck to the generation of subclasses for each different combination of all the add-ons for one type of coffee. That’s;

(10–1)² = 9² = 81 subclasses

We subtract 1 from the 10, as you cannot combine one add-on with another of the same type, sugar with sugar sounds stupid. And that’s for just one coffee blend. Multiply that 81 by 4 and you get a whopping 324 different subclasses! Talk about all that coding…

But with the decorator pattern will require only 16 classes in this scenario. Wanna bet?

If we map out our scenario according to the class diagram above, we get 4 classes for the 4 coffee blends, 10 for each add-on and 1 for the abstract component and 1 more for the abstract decorator. See! 16! Now hand over that $100.?? (jk, but it will not be refused if given… just saying)

As you can see from above, just as the concrete coffee blends are subclasses of the beverage abstract class, the AddOn abstract class also inherits its methods from it. The add-ons, that are its subclasses, in turn inherit any new methods to add functionality to the base object when needed.

Let’s get to coding, to see this pattern in use.

First to make the Abstract beverage class, that all the different coffee blends will inherit from:

public abstract class Beverage {
	private String description;

	public Beverage(String description) {
		super();
		this.description = description;
	}

	public String getDescription() {
		return description;
	}

	public abstract double cost();
}

Then to add both the concrete coffee blend classes.

public class HouseBlend extends Beverage {
	public HouseBlend() {
		super(“House blend”);
	}

	@Override
	public double cost() {
		return 250;
	}
}

public class DarkRoast extends Beverage {
	public DarkRoast() {
		super(“Dark roast”);
	}

	@Override
	public double cost() {
		return 300;
	}
}

The AddOn abstract class also inherits from the Beverage abstract class (more on this below).

public abstract class AddOn extends Beverage {
	protected Beverage beverage;

	public AddOn(String description, Beverage bev) {
		super(description);
		this.beverage = bev;
	}

	public abstract String getDescription();
}

And now the concrete implementations of this abstract class:

public class Sugar extends AddOn {
	public Sugar(Beverage bev) {
		super(“Sugar”, bev);
	}

	@Override
	public String getDescription() {
		return beverage.getDescription() + “ with Mocha”;
	}

	@Override
	public double cost() {
		return beverage.cost() + 50;
	}
}

public class Milk extends AddOn {
	public Milk(Beverage bev) {
		super(“Milk”, bev);
	}

	@Override
	public String getDescription() {
		return beverage.getDescription() + “ with Milk”;
	}

	@Override  public double cost() {
		return beverage.cost() + 100;
	}
}

As you can see above, we can pass any subclass of Beverage to any subclass of AddOn, and get the added cost as well as the updated description. And, since the AddOn class is essentially of type Beverage, we can pass an AddOn into another AddOn. This way, we can add any number of add-ons to a specific coffee blend.

Now to write some code to test this out.

public class CoffeeShop {
	public static void main(String[] args) {
		HouseBlend houseblend = new HouseBlend();
		System.out.println(houseblend.getDescription() + “: “ + houseblend.cost());

		Milk milkAddOn = new Milk(houseblend);
		System.out.println(milkAddOn.getDescription() + “: “ + milkAddOn.cost());

		Sugar sugarAddOn = new Sugar(milkAddOn);
		System.out.println(sugarAddOn.getDescription() + “: “ + sugarAddOn.cost());
	}
}

The final result is:

It works! We were able to add more than one add-on to a coffee blend and successfully update its final cost and description, without the need to make infinite subclasses for each add-on combination for all coffee blends.

Finally, to the last category.

Type 3: Behavioral - The Command Design Pattern

A behavioral design pattern focuses on how classes and objects communicate with each other. The main focus of the command pattern is to inculcate a higher degree of loose coupling between involved parties (read: classes).

Uhhhh… What’s that?

Coupling is the way that two (or more) classes that interact with each other, well, interact. The ideal scenario when these classes interact is that they do not depend heavily on each other. That’s loose coupling. So, a better definition for loose coupling would be, classes that are interconnected, making the least use of each other.

The need for this pattern arose when requests needed to be sent without consciously knowing what you are asking for or who the receiver is.

In this pattern, the invoking class is decoupled from the class that actually performs an action. The invoker class only has the callable method execute, which runs the necessary command, when the client requests it.

Let’s take a basic real-world example, ordering a meal at a fancy restaurant. As the flow goes, you give your order (command) to the waiter (invoker), who then hands it over to the chef(receiver), so you can get food. Might sound simple… but a bit meh to code.

The idea is pretty simple, but the coding goes around the nose.

The flow of operation on the technical side is, you make a concrete command, which implements the Command interface, asking the receiver to complete an action, and send the command to the invoker. The invoker is the person that knows when to give this command. The chef is the only one who knows what to do when given the specific command/order. So, when the execute method of the invoker is run, it, in turn, causes the command objects’ execute method to run on the receiver, thus completing necessary actions.

What we need to implement is;

  1. An interface Command
  2. A class Order that implements Command interface
  3. A class Waiter (invoker)
  4. A class Chef (receiver)

So, the coding goes like this:

Chef, the receiver

public class Chef {
	public void cookPasta() {
		System.out.println(“Chef is cooking Chicken Alfredo…”);
	}

	public void bakeCake() {
		System.out.println(“Chef is baking Chocolate Fudge Cake…”);
	}
}

Command, the interface

public interface Command {
	public abstract void execute();
}

Order, the concrete command

public class Order implements Command {
	private Chef chef;
	private String food;

	public Order(Chef chef, String food) {
		this.chef = chef;
		this.food = food;
	}

	@Override
	public void execute() {
		if (this.food.equals(“Pasta”)) {
			this.chef.cookPasta();
		} else {
			this.chef.bakeCake();
		}
	}
}

Waiter, the invoker

public class Waiter {
	private Order order;

	public Waiter(Order ord) {
		this.order = ord;
	}

	public void execute() {
		this.order.execute();
	}
}
You, the client
public class Client {
	public static void main(String[] args) {
		Chef chef = new Chef();

		Order order = new Order(chef, “Pasta”);
		Waiter waiter = new Waiter(order);
		waiter.execute();

		order = new Order(chef, “Cake”);
		waiter = new Waiter(order);
		waiter.execute();
	}
}

As you can see above, the Client makes an Order and sets the Receiver as the Chef. The Order is sent to the Waiter, who will know when to execute the Order (i.e. when to give the chef the order to cook). When the invoker is executed, the Orders’ execute method is run on the receiver (i.e. the chef is given the command to either cook pasta ? or bake cake?).

Quick recap

In this post we went through:

  1. What a design pattern really is,
  2. The different types of design patterns and why they are different
  3. One basic or common design pattern for each type

I hope this was helpful.

Find the code repo for the post, here.