On DeviantArt, your deviations are paramount, and we want to present them in the best way possible, even in thumbnail form. Over the past few months, we've been working on a new thumbnail grid that maintains the integrity of your deviations, no matter their dimensions or content types. Our goal is to be better at displaying art than any other site on the Internet.
Problems We’re Solving
We can do better than the current thumbnail grid, which includes uneven or irregular gaps between deviations. These gaps don't have any visual rhythm, causing your eyes to jump all over the place. Some content types, including literature, journals, pixel art, and emoticons, don’t look ideal. Our new grid focuses on fixing these issues while modernizing the look and feel of DeviantArt.
Below are some concept designs that represent one avenue we’re exploring. (These are works-in-progress and not final. Also note that the category menu is hidden in these concepts, just to show how the grid would look in a full-width context.)
Before and after concept designs on the desktop site
One of our core goals for the new grid revolves around displaying more deviations. The current grid leaves uneven or irregular gaps between images, and our new grid maximizes screen space — both on desktop and mobile Web — to create a wall of beautifully displayed deviations. When user-testing the new grid, the feedback we received is that people want to see deviations, and just deviations, when they’re browsing.
More Deviations on Mobile
Every week, more and more deviants access DeviantArt via their mobile devices, using both our mobile Web site and the DeviantArt Mobile App. Currently, mobile accounts for over 37% of DeviantArt’s traffic. While that number continues to grow, we know the browsing experience is inferior, and the new thumbnail grid will significantly enhance the way deviations are viewed on-the-go.
With so many different mobile devices and screen sizes, it’s important to build a responsive thumbnail grid design that ensures your art looks good to everyone — no matter how they’re accessing DeviantArt.
While browsing DeviantArt’s mobile site, you’d typically see two or three thumbnails on your screen at a time. Our new design maximizes device screen space to show you as many deviations as possible, while also optimizing the display of deviations for retina and other high-resolution devices.
The new grid also extends to profiles, making your profile and deviations shine on any device’s screen.
Before and after concept designs on mobile Web.
Optimized for Bandwidth ᕦ(ò_óˇ)ᕤ
While the size and quality of our thumbnails is increasing, we’re intensely focused on optimizing how these images are served in regards to bandwidth usage. On the mobile version of the website, you’ll enjoy high resolution thumbnail images while your phone enjoys reduced bandwidth usage.
On the desktop site, images will use slightly more bandwidth to ensure that you’re seeing the best quality that fully represents a deviation, particularly for retina and high-resolution screens. We’re also optimizing the way images are served to you across multiple pages, so as you browse, your overall bandwidth usage will be cut down.
Deviations, Presented the Best Way Possible
With the new grid, we aim to present your deviations in the best possible way. We want to make sure your art looks like art, and your profile becomes even more of a showcase.
Comparison of size and quality of thumbnails. Click to view full size to best compare.
The new grid will be clean, putting focus on a deviation itself. Information such as the title, artist name, avatar, comment count, favourite count, and More Like This could be visible upon hover. The hover state could also include icons to indicate if the deviation is in your favourites, and if it is a Daily Deviation. (These ideas are not final — we’re still exploring a number of possibilities.)
Commitment to Integrity
As mentioned above, when designing this new grid, we paid special attention to maintaining the integrity of your deviations. With so many different types of artistic expression on DeviantArt, including non-standard image types, such as literature, pixel art, emoticons, and motion books, we want to ensure that kinds of art are featured respectfully and beautifully.
This is just the first of multiple journals to come that will discuss the new thumbnail grid. Stay tuned for more technical details and visual aids, but in the meantime, we hope you'll weigh in with your thoughts on this exciting new display!
See what's coming next by visiting the DeviantArt timeline.