commentary

Join the Peerlist Interaction Design Challenge - July 2024

Join the Peerlist Interaction Design Challenge - July 2024

We are hosting a 10-day Interaction Design Challenge! If you want to learn interaction design, join us and learn from the community.

Yogini Bende

Yogini Bende

Jul 25, 2024 7 min read

Peerlist Team is investing a lot of time and effort into interactions these days! We've recently pushed many new features in the Peerlist Mobile App and, during this, we've explored many new interactions on mobile and web.

Last week, during our lunch table conversations, Ajinkya mentioned digging deeper into interaction design and taking on a challenge to create 10 interaction designs in 10 days. As fun as it sounds, taking a challenge alone isn't so motivating! So, instead, we thought, why not invite like-minded fellows around us and work on our skills together?

This week, we are launching the Interaction Design Challenge — a 10-day challenge for all designers and developers who want to learn and build some brag-worthy interactions and create proof-of-work!

How It Works:

  1. Daily Interaction Design: Every evening, we will share one interaction design. Your task as a developer or a designer is to re-create it with code, figma or any tool of your choice!
  2. Post Your Submissions: Once you're done, you can post your submissions as a GitHub repository, codepen url or figma link on Peerlist under the context #IxDChallenge.
  3. Learn and Share Feedback: Engage with fellow creators by sharing feedback and learning from each other.
  4. Top Submissions: Every day's top 3 submissions will get featured in this blog!

Recruiters and hiring managers, if you're looking to hire frontend devs and designers, keep an eye on this space! You'll find some wonderful creators here. Check out #IxDChallenge on Peerlist to see what others have created.

How to Submit Your Submission?

  1. Open Peerlist Scroll
  2. Click on "Create New Post" and select #IxDChallenge from the context.
    Create new post with #IxDChallenge
    Create new post with #IxDChallenge
  3. Submit your work as a post. Add the Challenge Name and Day of the challenge. If you've added the code to GitHub, Codepen, or Figma, include those links.
  4. Take a screenshot and share it along with your post. You can also add gifs.
  5. Add any learnings from the task. (Optional)
  6. Hit post! Your submission for the day is done.

Here is an example post for your reference

Example submission post for your reference
Example submission post for your reference

So, are you ready? Here is your Day 10 challenge!

Challenge 10 — Circle of reactions

We've finally reached the end of the 10-day Interaction Design Challenge! If you've made it through all 10 days, congratulations! That's no small feat, and I'm sure you've learned a lot along the way. For the last challenge, we're asking you to create a circle of reactions. Let your creativity shine and show us what you've got!

Here is a link to the Figma File for your reference.

Challenge 10 — Circle of reactions
Challenge 10 — Circle of reactions

Challenge 9 — Message Reactions

We all use WhatsApp and know how handy those reactions are! In fact, many people have asked me to add these reactions to Peerlist as well. We can discuss that later, but today, for the 9th day of the challenge, try recreating this feature.

Just one more day to go!!

Challenge 9 — Message Reactions
Challenge 9 — Message Reactions

Here are some amazing submissions from Day 8

Challenge 8 — Mobile Navbar

Wow, we are almost at the end of this! It's already been a week started this daily interaction design challenge. So we thought let's have an easy one for the 8th day. Because we have some tough one for the weekend.

Here you go — a mobile navigation bar. Don't be limited to the design provided. Uee it as a reference.

Challenge 8 — Mobile Navbar
Challenge 8 — Mobile Navbar

Here are some amazing submissions from Day 7

Challenge 7 — Swipe left

You see cards everywhere—swipe to read news, swipe to confirm, swipe to reject, swipe to the next, and so on! Today's challenge is to recreate a smooth card swipe effect.

Here is a link to the Figma File for your reference.

Challenge 7 — Swipe left
Challenge 7 — Swipe left

Challenge 6 — Page Switch

This is our favorite page switch transition we created for Peerlist. If you check out our mobile app, you will see this transition live in action. Notice the minor detail of the page opening from a button. It's a component used for many things in our mobile app, and today, let's recreate this.

Here is a link to the Figma File for your reference.

Challenge 6 — Page Switch
Challenge 6 — Page Switch

Here are some amazing submissions from Day 6

Challenge 5 — Action Toolbar

This smooth action toolbar works in various ways and patterns. Imagine adding this to your portfolio to showcase different tabs and highlights—how cool would that look! This interaction is inspired by Mariana Castilho from uilabs.dev

Here is a link to the Figma File for your reference.

Challenge 5 — Action Toolbar
Challenge 5 — Action Toolbar

Here are some amazing submissions from Day 5

Challenge 4 — Figma Dev Mode

This Figma dev mode switch looks buttery smooth, and that's why it's up there for Day 4 of the IxDChallenge. Be creative and add your personal touch to it!

Here is a link to the Figma File for your reference.

Challenge 4 - Figma Dev Mode
Challenge 4 - Figma Dev Mode

Here are some amazing submissions from Day 4

Challenge 3 — Melody Popup

Create this music card animation where, on click, it plays the song with a smooth expand effect. Feel free to be creative and add your personal touch! This animation is inspired by AceternityUI's expandable card component by Manu Arora.

Here is a link to the Figma File for your reference.

Challenge 3 - Melody Popup
Challenge 3 - Melody Popup

Here are some amazing submissions from Day 3

Challenge 2 — Jelly Tags

Create these tag animations as shown in the image. Feel free to be creative and make them even better! You can use these tags for anything, like selecting locations, skills, or, in this case, cuisines.

Here is a link to the Figma File for your reference.

Challenge 2 - Jelly Tags
Challenge 2 - Jelly Tags

Here are some amazing submissions from Day 2

Challenge 1 — Upvote Animation Showdown

For Day 1, let's start simple!

Create the upvote animation shown in the image. Feel free to be creative and make it even better! Here is a link to the Figma File for your reference.

Challenge 1 - Upvote Animation Showdown
Challenge 1 - Upvote Animation Showdown

Here are some amazing submissions from Day 1


Let's start creating!

I will keep updating this article daily with new challenges and featured submissions! If you have any queries, questions, or suggestions, reach out to me, Jay or Ajinkya! We would be happy to help.

Let's learn and build together 🚀

Create Profile

or continue with email

By clicking "Create Profile“ you agree to our Code of Conduct, Terms of Service and Privacy Policy.