Can you post your design or test here? The picture is too small to see the difference and it would be super interesting to see for readers.
Hi, I'll try to add a download link to the Figma file here soon :) Thanks for your feedback
That would be awesome!
I've added 11 images to the bottom of the blogpost. I was unable to add a download link to Figma. Hope this helps :)
Digging the experiment here. In looking at the results, some of the outcomes seem pretty close to a coin toss. I'd be really curious about the designs in which one was mostly preferred and maybe run additional tests (maybe changing the order in which they're presented) to see if the results are repeatable because the differences do seem quite subtle.
My singular experience in using grids has lead me to the following conclusions:
Using a grid allows me, as a designer, to justify the precise spacing of my design elements, and develop consistency across multiple designs—especially when working with multiple people. Intentionality around spacing allows me to control a gaze and productively constrain my decision making.
As a developer, it allows me to set constant spacing variables, rely on those across the entirety of an application, and make on-the-fly spacing decisions in code where a static design fails to accommodate for an edge case.
My absolute hope is that, passive consumers, at the very least unconsciously feel that there's an underlying logic to the design—even where there's no evidence of a grid in its final form—and that my use of a grid to establish a consistent and functional visual hierarchy has resulted in a better experience for them.
But my experience suggests that using a grid system exclusively doesn't always result in a more visually appealing or performant outcome. I've seen way too many designs following no grid structure or design system out perform those that do in both respects. I'd love for science to confirm otherwise—it would make me very happy indeed.
Yes and no... I think pixel perfect is in our designer head and view, we know when it's should be 22,5 pixel and not our customers and users if for them the result is beautiful and the UX is good, they will be happy and feel good.
They can fell the differences if they well know our app and they are able to use them on different devises, if no, they will see nothing.
On the last app I builded, I used 40, 43, 30, 23, 20, 16, 10, 8px on the different screens on depending how the design speak to me and how I feel using it.
Great post, a testing on more users can be really interesting.
I think the answer lies in the results. Perhaps pixel perfect is not the best description, but pixel-perfect is needed for a good visual rhythm. And that will result in a more beautiful design, in the eyes of the user. At least, according to my beliefs and this little test :) thanks for ur comment and reading.
Love the scientific approach.
I wonder whether the result would be the same if you designed the non-grid versions first, to your aesthetic liking, and then realigned things to 8px grid.
That's actually what I did, haha :D (dont tell anyone)