The Social Meet Up UI Kit: Everything You Need to Design the Next Big Meetup App

The Social Meet Up UI Kit: Everything You Need to Design the Next Big Meetup App
Adobe Products Featured

As human beings, one of our most primal instincts is to be around other people and interact with them. In other words, we are social creatures. One of the most prominent ways technology has addressed this need is via all the different takes on meetup apps.

Of course, there’s Tinder for dates, and Skout for those who just want to find good friends. If you’re a mom, then you can’t miss Peanut, which promises to connect you with good mom friends.

If you’re a designer looking to capitalize on this social meetup frenzy, you need to check out UX designer Aurélien Salomon’s new UI kit for Adobe XD, called Social Meet Up. This free kit is specifically designed to help you design and prototype a meetup app of your own.

“This social meetup kit was created to provide an extensive set of screens that designers can use as a starting point to build applications. We aimed to create something flexible and comprehensive by covering a wide range of use cases, but the main direction was around meetups: allowing you to discover and meet new people,” Aurélien said.

Getting the most out of the Social Meet Up UI Kit

Aurélien’s kit was created with the design community in mind. Designers who need super-customizable screens, colors, typography, and screen page flows can start creating in no time in Adobe XD.

A rendered demonstration of the Social Meet Up UI Kit used in a social app to display different events and event categories.

Here’s how to get started:

  1. Download the latest version of Adobe XD.
  2. Download the Social Meet Up UI Kit.
  3. Explore the kit. Take an extensive look at the UI kit to ensure you understand the reusable elements and which screens are included and which aren’t. Explore!
  4. Edit the colors to match your brand or visual direction. You can accomplish this easily by editing the colors from the assets manager panel.
  5. Adapt the fonts. There is also a list of symbols that can be edited; any changes will be reflected in the entire document.
  6. Explore and adapt the components of the kit. All CTAs, icons, and content are fully editable.
  7. Once your core screens are ready, it’s a good time to jump on the prototype tab and start building an interactive prototype. This will help you to get a sense of how your application feels. You will also be able to preview it on a real device, which is always helpful.

How aesthetic choices influence the experiences created with Social Meet Up

In the creative process, you’re not only solving a problem for users, but you also have to be quick on your feet A rendered demonstration of the Social Meet Up UI Kit used in a meetup app to display a messaging interface.and solve design problems as they pop up. In Social Meet Up’s case, Aurélien’s biggest challenge was visual; what the user interacting with their screen flows would see.

Not wanting to create a boilerplate kit, Aurélien realized early on that where he took his app, aesthetically, would also impact the user experience.

“One of the main challenges was the visual direction. We wanted to create something different and unique without compromising the modularity of the kit. We wanted to make sure that people can easily customize it to fit their existing use cases,” he said.

Social Meet Up takes a fresh approach to the visual display of familiar interactions, breaking out of the box with elegant curves and rounded elements that give the designs a sleek, highly approachable look and feel.

Because Social Meet Up is specifically made for Adobe XD, another of Aurélien’s goals was to explore the extent to which designers can take advantage of XD’s helpful features; for example, animations:

“We wanted to showcase some of the amazing features of Adobe XD, like the Auto-Animate feature, which allows you to create more immersive prototypes by enabling animated transitions.” Check out Auto-Animate in action in the Social Meet Up UI Kit below:

How Social Meet Up was influenced by … Lego?

A black batman lego piece is used to to highlight the design inspiration behind developer of the social meetup ui kit and the importance of working within constraints.
Image source: Cassidy James Blaede.

For Aurélien, much of the inspiration for the Social Meet Up came from a cherished toy from his past: Lego.

“I think my biggest influence has been Legos. When I was a kid, I could spend hours playing with one box of Legos, trying to create different things. It teaches you patience, working within constraints (due to its limited parts), and makes you understand the importance of design: design is about solving problems,” he revealed.

This early exposure to problem solving served him well, as it helped to prepare him for the type of workflow he’d rely on as a designer: “My process is pretty flexible, but we always have to make sure that we clearly understand and define the problem (which is often overlooked), brainstorm ideas, convince stakeholders, create prototypes, and test them to validate our assumptions.” This approach, combined with his background as an engineer as well as a designer with many diverse interests, influences his work on projects like Social Meet Up. He encourages other designers to look for inspiration all around them, so that it creeps up in their digital designs.

“I am getting inspired by many things. I can get inspired by looking at a landscape, encountering a problem that I want to solve, or by using various apps and services. I have a soft side for sci-fi movies, too.”

To learn more about Aurélien Salomon, head over to his Behance page, and for more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Recommended Articles