Clustering by views, comments and hearts

Estimating the popularity of content is not an easy task, especially when we know that attractiveness is subjective and mostly in the eye of the beholder. There are various reasons why we might be interested in popular items, especially when they are in a subject close to our heart or related to what we already do. Such reasons include learning from the best examples, learning about new people who are the best in their field, learning which work is worth reviewing without spending too much time on every new published piece. We could also notice new trends or learn to anticipate what could be valued in the future.

Exploring Dribble data

Dribbble is a place where graphic/UI designers and animators present their work and get feedback on it. Many people are willing to help and as long as someone is open to criticism, they can learn how to improve the quality of their work. The site has a dedicated section for job offers, which is another plus for both beginners and qualified designers.

The site is already well-established in the design community and exists from a long time. Here we will concentrate on Dribbble shots sorted by the criteria "popular" and "all time". This is how we could obtain information about the first 600 of the most popular items since the introduction of the site. This gives us a limited amount of data we could explore, but it is still useful. Here you can see the results from the clustering with the DBSCAN algorithm given the numbers of views, comments and hearts received.

DBSCAN clustering of Dribble shots by views, comments and hearts

In the lower left part of the diagram we see many items colored with dark orange, which indicates that they belong to the same cluster. This is the cluster with the most items in it. Since we want to retain all the information and avoid viewing any individual item as noise, we allow clusters to be formed from single items as well. This leads us to have 58 individual clusters. The more items there are in a cluster, the more alike they will be in terms of their popularity as determined by the community. This means that the individual items carry a greater amount of novelty compared with the rest. If we omit the clusters with many items, we obtain a slightly more interactive diagram, which is also easier to look at.

Checklist Twisted Hypercompact Animated 3D Logotype Qiwy iOS/iPhone app curl test waffle iphone icon Instagram Logo Replace Fun Buttons Dribbble Logo/Emblem/Mark for Hypercompact Potato landing page Google Brand System - Motion Ui Kit Warehouse UI8 Wireframe Kit Flip Clock Kick Push UX/iOS/UI iPhone idea with video process Cub Studio iOS 7 Redesign Device Dashboard Mobile - iPad - UI/UX/iOS Bedouin by Circular In-app Visual Data Delivery Card Icon set [GIF] Float Label Form Interaction Apple OSX Montauk Slide Concept COVERT INBOX clyp - iPhone Sidebar iWatch Mock-Up Squarespace Ui Kit (Metro) Playing With Number 3 Linkedin Boxing Glove iPhone App icon iPhone 5 Mock ups FREEMIUM Simple Stats iPhone 5 Grid Freebie PSD: Flat UI Kit The Volcano Bills Bills Bills Free iPhone 6 4,7-inch Template [PSD] iOS UI Kit Actions 6 Photorealistic iPhone 6 mockups Iron Man Mask 430+ FREE storyboard illustrations Free 16px Broccoli dry icons Iphone Template for personal use Free responsive wireframes (GIF)
Fig. 2: Diagram of the most popular Dribbble shots

Each item is a link to the Dribbble page dedicated to that particular shot, so you can view it yourself. Including thumbnails of the shots here is not possible for legal reasons. The result is somewhat hard to interpret—for instance, the circle on the right corresponds to an item which has received quite a lot of views, but which doesn't necessarily rank best in the number of comments or hearts received. The item at the top of the diagram is also the first item on the Dribble list. The leftmost item has received a disproportionate number of comments relative to its views and hearts. Each item has its own specifics, so if you are interested, you can learn more about them. This diagram shows that there are plenty of great examples to explore. It is not given to lead to the false conclusion that only these examples are worth exploring. These are just examples we have some preliminary information about.

Exploring Codepen data

Codepen is a similar place, but directed more towards web designers and developers, who can publish their work and get feedback on it. As on Dribbble, there is a lot of creative work waiting to be explored. However, what is sometimes forgotten is that the website doesn't just show an end result, but also pushes people to share the code that led to it, so that everyone could create a similar version (or enhance an existing one) by themselves. A very positive effect I noticed while preparing this post was that the designers on both sites seem to influence each other or recreate their work by novel means which were different from the original author's intention. For instance, an animation of variable-width lines along the path of the mathematical sign for infinity was first created and animated on Dribbble before someone else found a way to update its style on Codepen.

If you attempt to collect data automatedly on this site, you may be surprised that you don't get the results you expect. Codepen wants to create the impression that it relies on JavaScript to load its content. Even after a page has loaded, a simple "view source" still won't show us individual pen details, at least in some browsers. This made the data collection process harder, since it had to rely on a lot of manual work. Since many demos are computationally heavy or use special libraries loaded only on some pages, various browsers failed for various reasons on different pages. Out of the first 1000 pages with popular pens, there were 2-3 that were impossible to access by any means, at least on my machine. Chrome shut down unexpectedly a couple of times and Firefox leaked a fair amount of memory over time until the machine became unusable. For these reasons, I had to switch to a more lightweight browser, which also failed a couple of times, but on average performed quite well.

Codepen doesn't seem to show unique content on every page—sometimes the same demos appeared under different pages. There were some pages which showed only four demos at most. With 12 demos/page, we would expect the first 1000 pages to have 12000 demos, but the sample contained only 11224 unique links.

Applying DBSCAN on this dataset turned out to be impossible. We run out of memory, no matter how we choose to tune the parameters. For this data size, it would be more appropriate to use k-means, so we pick 20 initial clusters. The following is the result of the k-means clustering after applying a 2D PCA decomposition on the original data.

K-means clustering of Codepen pens by views, comments and hearts

We see again that there is a lot of overlap and some clusters contain a very large number of items, which aren't even visible. Once we see how many items each cluster has and think in terms of how many demos a visitor of this page would be willing to visit, we may choose to omit clusters containing more than 25 demos. This is how we obtain the following diagram, where all the items are clickable again.

Gravity Points Collection-Repeat: 1.0.0-beta.9 Sticky menu on scroll Squishy Toggle Buttons Creating the QLOCKTWO in HTML5, CSS and Javascript CSS image slider w/ next/prev btns & nav dots CSS3 Checkbox Styles Fullscreen HTML5 Page Background Video Responsive Table Pull Menu - Menu Interaction Concept CSS 3D Solar System Mesmerizing Mostly Fluid Star Wars opening crawl from 1977 Sign-Up/Login Form Pure CSS Parallax Scrolling AngularJS BootStrap 3 Modal Dialogs Responsive CSS Image Slider simpleWeather.demo.js v2.7.0 Style a Select Box Using Only CSS CSS3 animation effects for Magnific Popup Bootstrap Carousel Fade Transition Spiral Art Maker Mona Lisa with pure CSS Touch device jelly menu concept Very Simple Slider Canvas Orbital Trails The Last Experience CSGO Signature generator! Flat Responsive Form using CSS3 & HTML5 pen#PwLXXP Physics Playground Absolute Centering CSS3 Working Clock #DaftPunKonsole Tabs And Navigation: Nightly Tearable Cloth I could not stop Pure CSS Tabs CSS Image Hover Overlay Pure CSS multiline text with ellipsis Single Element Pure CSS MacBook Pro [CSS3] Neon Glow Chill the lion Musical Chord Progression Arpeggiator Simple Pure CSS Drop Down Menu A Pen by Michael Trilford align-content: flex-start Answer for Louisa on CSS-Tricks Responsive Bullet List with CSS Icons Flex Row Wrapper w/2 Elements. CSS Text filling with water Dropdown with Multiple checkbox select with jQuery demo:CSS image hover effects Toggle Navigation A Pen by stephen answer for layout question from css tricks question Zero lines JS game CSS3 Snow Animation A Pen by Jodie Stark
Fig. 4: Diagram of the most popular Codepen pens

Here we can see, depending on the color, in which cluster each item falls. This is how we could explore interesting new content that we haven't seen before. And we don't have to view 11224 different demos to see some great examples. But again, we should expect that some great new demos won't be visible here.

Both lists are only temporary and likely to change over time. But I hope that this post has given you an overview how you could seek interesting designs without spending too much time on it.