LooksBetter.io: Revolutionizing Design Feedback for Designers

Alain Di Fabio — Mon, 24 Jun 2024 11:06:02 +0000

LooksBetter.io: Revolutionizing Design Feedback for Designers

In the design world, getting quick and constructive feedback can be the difference between a good project and a great one. LooksBetter.io is a platform that aims to transform how designers gather opinions on their creations, offering an intuitive and collaborative system to compare design choices.

What is LooksBetter.io?

LooksBetter.io is an online platform that allows designers to upload images of their projects and compare them to receive votes and comments from the community. Whether you’re trying to decide between two layouts, color schemes, or icons, LooksBetter.io helps you understand which option resonates most with your audience.

How Does It Work?

Sign Up and Log In: First, you need to register or log in to your account on LooksBetter.io.
Create a Post: Once logged in, go to looksbetter.io/post/new. Fill in the form by adding a title, uploading the two images you want to compare, and adding between 1 and 6 tags to better describe the context of the images.
Share: Publish the post and share it with the LooksBetter.io community. Other users can vote and comment on your images, providing you with valuable feedback.
Analyze Feedback: Review the votes and comments to make informed decisions about your design choices.

Why Use LooksBetter.io?

Quick and Honest Feedback: Receive immediate opinions from a community of designers and design enthusiasts.
Data-Driven Decisions: Votes and comments help you understand which option is more appreciated by your audience.
Collaboration and Growth: Connect with other designers, exchange ideas, and improve your skills through mutual feedback.

Example Post

Here’s an example of how a post is displayed on LooksBetter.io:

Conclusion

LooksBetter.io is a powerful tool for anyone working in the design field, offering a simple and effective way to refine your creations through collaborative feedback. If you haven’t tried it yet, check out LooksBetter.io and see how it can help you take your projects to the next level.

Tagline and Brief Description

Your Web Designer Community for Perfect UI Choices. Post your image comparisons, gather hearts (❤️) and thumbs up (👍), and discover which design works best thanks to votes and comments from the community. Users can also comment on individual posts.

Useful Links:

LooksBetter.io

Shelf selector (Inspired Arc icon selector)

Alain Di Fabio — Mon, 24 Jun 2024 10:59:34 +0000

This component is inspired by how Arc makes you choose its app icon. 🖥 Watch the demo video to see the component live in action!

⚡️ TECHNOLOGIES

React
Tailwind CSS
Typescript ⚙️ HOW IT WORKS

const items = [
{
  src: '/images/arc-icon/1.png',
},
{
  src: '/images/arc-icon/2.png',
},
...
]

<ADFSchelfSelector
  className="w-full max-w-lg"
  selected={selectedIndex}
  onSelect={(index) => setSelectedIndex(index)}
  items={items}
/>

Change color indicator or sides fade color with:

<ADFSchelfSelector
   ...
  classNameSides?: string;
  classNameIndicator?: string;
/>

Replace this following default classes:

> classNameSides = "via-white to-white",
> classNameIndicator = "bg-blue-500 shadow-blue-500",

Follow me on X: adfdev

DEV Community: Alain Di Fabio

LooksBetter.io: Revolutionizing Design Feedback for Designers