Shop Mobile More Submit  Join Login

The Upcoming Thumbnail Grid

Wed Jun 3, 2015, 4:52 PM by danlev:icondanlev:



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.)


1a Desktop   Wall By Starvingartist-d8uzxzz by danlev    1b Desktop   Torpedo By Starvingartist-d8v06ii by danlev

Before and after concept designs on the desktop site


More Deviations

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.


Thumbs Coverage by danlev

Comparison of the grid


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.


2a Mobile   Wall By Starvingartist-d8uzy2c by danlev    2b Mobile   Torpedo By Starvingartist-d8v0623 by danlev

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.


Thumbs Size by danlev

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.)

Thumbs Pixel2 by danlev

Comparison of pixel art thumbnails. Artwork: Lightning Idle by AbyssWolf


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.




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.
Add a Comment:
 
:iconkettici:
Kettici Featured By Owner Feb 3, 2017  Hobbyist Digital Artist
that new thumbnail layout is pissing me off. seriously. Unimpressed 
Reply
:icongretamacedonio:
GretaMacedonio Featured By Owner Edited Sep 22, 2016  Hobbyist Digital Artist
Yes and No
-The layout is comfortable and relaxing, I love the gap between the deviations.

I respect the fact that is given more emphasis on the deviation itself, but the Artist is really important as well and having in upon hover is wrong.
As I see the deviation as a first impact I'd like the same with the Artist's name. Not that I don't like the fact that the name and info appears only on hover.. but I find it pretty "empty". I personally want to see both Art and Artist's name without having it to hover.
Just the Artist's Name.

I'd like to suggest adding a "back to top" button especially when someone scrolls too far, as it makes it easier to get back in just come click.. 

It's nice but I wish this "hover" feature could be added in Gallery mostly, since you won't need to see the artist's name and info as a first impact since you already know. It would be more practical and relaxing in my opinion.
Reply
:icontimscorpion:
Timscorpion Featured By Owner Jun 5, 2016  Hobbyist General Artist
For those who don't like the new layout, "sign" this petition to get the old layout back!

timscorpion.deviantart.com/jou…
Reply
:iconlurker60031:
Lurker60031 Featured By Owner Jun 4, 2016
Thumbs down. Very important informantion about the deviation is given short shrift in order to enlarge the thumbnails slightly. Including the artist name is an improvement, but that improvement is nearly obliterated by making all the information available only on "hover" and very often difficult or impossible to read due to low contrast. Overall the change is a bad one.

I'm with the chorus saying "bring back the old style!"
Reply
:iconmydragonsfly:
Mydragonsfly Featured By Owner Jun 3, 2016  Hobbyist Writer
I like it, however the loss of the title and username might be an inconvenience since I'd have to hover over the thumb to see it. Also the scrolling litterature thumbnail needs to stay, my sanity as a writer depends on it.
Reply
:iconongca:
Ongca Featured By Owner Jun 3, 2016  Student Digital Artist
I love it!!!
Reply
:iconaegis-of-justice:
aegis-of-justice Featured By Owner Jun 2, 2016  Hobbyist General Artist
Well, I don't hate it. :) Though I agree the site could use a healthy dose of modernization, I haven't been a fan of a lot of the recent UI changes dA chose to prioritize. This, however, seems like a step in the right direction.

If dA keeps their ear to the ground, and really commits to letting user feedback (or analytics, even!) drive what they change, and continually adjust, we'll be fine.
Reply
:iconkerzid:
Kerzid Featured By Owner Jun 2, 2016  Hobbyist
Why not apply this to our galleries? Why just the browsing?
Reply
:iconongca:
Ongca Featured By Owner Jun 3, 2016  Student Digital Artist
Yeah that would be awesome!
Reply
:iconshadowrx:
ShadowRx Featured By Owner Jun 2, 2016  Professional Digital Artist
Yes. Please. emotihal pleading eyes 
Reply
:icondarthpaul99:
darthpaul99 Featured By Owner Jun 2, 2016  Hobbyist Digital Artist
You didn't improve jack! This is the worst idea you could have ever come out with. More users hate this than like it & that is saying a whole lot, myself included! You would do well to listen to us! I just renewed my subscription, but now I'm not sure why since this crappy change was made without anyone asking us about it! What a load of garbage! We demand our old set up back!
Reply
:iconkerzid:
Kerzid Featured By Owner Jun 2, 2016  Hobbyist
Is this sarcasm m8? :v
Reply
:icondarthpaul99:
darthpaul99 Featured By Owner Jun 3, 2016  Hobbyist Digital Artist
No, it's the absolute truth. I'm not going to fall for their ridiculous excuses about how they are trying to explain how they made things "better" because they did not! This new crap sucks!
Reply
:iconkerzid:
Kerzid Featured By Owner Jun 3, 2016  Hobbyist
Yeah! They did not think this through! In my opinion this update is not good! They are wrong, we are right! They are never right!
Reply
:iconbarebear44:
barebear44 Featured By Owner Jun 1, 2016
I do not like this change at all:

It is not a forward step. The pagination, sure - but the new huge thumbnails give no info on date of posting, comments, faves etc. You have to hover over it - and only SOME yield these results.      It also favors the bigger images over smaller ones - which is unfair. 

Worst of all, any Literature submissions with images as part of them no longer show the header image - just a bland grey-green overscreen saying 'Literature.'  That is a REALLY BAD idea.

Can we please have it back as it was - which was better in every way apart from the pagination.  Or at the very least the option not to have it this way?

Yes to the pagination; a big no thanks to the vulgar, mobile app- appeasing thumnails.
Reply
:iconxx--missty--xx:
xX--MissTy--Xx Featured By Owner May 31, 2016  Student General Artist
Where has the "More" button gone? I can only see one page.
Reply
:iconumsauthorlava:
UMSAuthorLava Featured By Owner Apr 10, 2016  Hobbyist Digital Artist
I really prefer the Thumbnail View option since I can see all the names without having to hover. At least let that stay an option! And quit removing it time to time!
Reply
:iconlynucs:
lynucs Featured By Owner Jun 1, 2016  Hobbyist Interface Designer
Exactly this!!!!!!!!!!!!!
Reply
:iconbarebear44:
barebear44 Featured By Owner Jun 1, 2016
Agreed!
Reply
:iconrubixa-seraph:
Rubixa-Seraph Featured By Owner Nov 26, 2015  Hobbyist General Artist
prntscr.com/97fx27 (Screenshot of front page)

So...something I've noticed that I think is very important: images that are "too wide" gets cropped, however, it is almost impossible to tell that it's been cropped unless you have images of, say, a person who is missing their head and their feet.

Since this is an art community, I should not have to go in depth into why cropping a piece of artwork without indication that you are not seeing the full piece. SO MUCH INFORMATION gets lost. I can't begin to imagine  now how many images I may have not clicked on because I felt the thumbnail preview showed me a LACKING piece of artwork instead of a full piece of artwork.

PLEASE re-implement the "have been cropped to fit to grid" indicators, or do not crop people's artwork at all.
Reply
:iconshaleene1:
Shaleene1 Featured By Owner Sep 27, 2015  Hobbyist General Artist
Too large. We should have the option to use or not to use the new thumbnails. And an option to make them smaller. Like they used to be before you kept increasing the size. 
Reply
:iconlenafluffs:
LenaFluffs Featured By Owner Sep 26, 2015  Hobbyist Digital Artist
Actually, here's an (albeit old) idea. I think I'd like it a lot better if we could choose the space between thumbnails. For those who like it cluttered, they can choose a small space, and for those who like it spread out, they can choose a large space.
Reply
:iconjennystokes:
jennystokes Featured By Owner Sep 24, 2015  Professional General Artist
Why bother with this!
Reply
:iconreedymanedkelpie:
reedymanedkelpie Featured By Owner Sep 23, 2015  Professional General Artist
I think that while the new grid makes the look of the overall page better, it takes away from the impact of each work individually.
Reply
:iconhpa-feliciano:
hpa-Feliciano Featured By Owner Sep 23, 2015
The hover thing doesn't work. DX
Reply
:iconfeeesh:
feeesh Featured By Owner Sep 23, 2015  Professional Filmographer
looks great, a nice way to clear out all the negative space between all the different sized images.
Reply
:iconvirmont89:
Virmont89 Featured By Owner Edited Sep 23, 2015  Student General Artist
Hmm, i guess it looks alright :) now you can at least see them a lot better and clearer.

Edited for typos
Reply
:iconchilde-of-fyre:
Childe-Of-Fyre Featured By Owner Edited Sep 23, 2015  Hobbyist Digital Artist
These are AWFUL! Where's the titles? Removing image titles from the thumbnail view is a VERY BAD idea here!

Here's a thought, guys (not that DA actually LISTENS to us anyway... they're too intent on becoming another Facebook to give a hoot), but how about allowing the users to upload their OWN THUMBNAILS when they upload an image. Give us a standard size - say, all thumbnails must be 300x300 pixels, or some-such thing... and let us upload our own thumbnails..

If you people did THAT, you would have nice, even, same-size thumbnails (no matter the dimensions of the work) to have in your grids, thus making the display of the thumbnail grids much simpler to have it look nice and evened out.

The loss of the titles is a horrible, AWFUL thing. I do NOT like this at ALL. I have been here on DA for over 10 years, and while you're technically (just barely at this point, I might add!!), better than the likes of Renderosity and some other gallery sites - I have to say that I am really not impressed with ANY of what DA is doing lately, and this is just one more insult to the underlying injury you all are doing to this community.
Reply
:iconkerzid:
Kerzid Featured By Owner Jun 3, 2016  Hobbyist
k
Reply
:iconfrigidchick:
Frigidchick Featured By Owner Sep 22, 2015  Hobbyist General Artist
love it
Reply
:iconmadam-mannal:
Madam-Mannal Featured By Owner Sep 22, 2015
instead of dragging to FAV, change it to click and fav, like when you move your mouse around the picture if shows how many favs and comments it has, so when you click on the little fav star it can +fav it? I saw some of this stuff on other websites, not exactly like this something like it, so I think it would be pretty cool since you can't drag fav it anymore or anything :)
Reply
:iconmichelvictor:
MichelVictor Featured By Owner Sep 22, 2015  Professional Digital Artist
What about the gif previews? They are too small compared to the rest.
Reply
:iconshadowrx:
ShadowRx Featured By Owner Jun 2, 2016  Professional Digital Artist
And why can't we use ANIMATED GIFS as PREVIEW IMAGES for Flash and Large GIF files??? Hell, let us use ANIMATED GIFS for ANY preview image. Right now the only way we get animated thumbnails is by having TINY animated gifs as the deviation :no:
Reply
:iconfantasylost:
FantasyLost Featured By Owner Sep 21, 2015   Digital Artist
I obviously use the site differently than most of the commenters because I do NOT like the new layout at all.

Having extra "white space" between pictures is much more pleasing to my eyes. I would not want to view pictures in an art gallery that are crammed together, and I don't like viewing them crammed together on DA. I do not need thumbs any larger than I have now as I NEVER fave from a thumb. I want to see each picture at its largest view before faving, both to really appreciate the artwork and to read any descriptive comments left by the artist. I use thumbs to whet my appetite, not to satisfy it. Viewing my Collections in full-screen via SitBack with music playing in the background is my favorite way of viewing artwork on DA.

Your full-screen examples of the before and after views for the desktop are in "portrait view," making it appear that we will see lots of rows of pictures in the proposed layout. My desktop, like most, are "landscape view." I see only 2-1/2 to 3 rows of pictures per screen in your proposed layout, not the 5 rows shown in your example. I search for stock photos. The larger thumbs will double the time it takes me to scroll through hundreds of potential pictures. Having the photographer's name displayed under the thumbs saves me lots of time as I don't have to hover over each picture only to discover that I already Watch that photographer and likely have already analyzed and downloaded that picture from my Message Center.

For Literature, I like the current "scrolling" thumb option that allows me to read a good portion of the text without first having to open the deviation page, which then requires me to resize my screen into a readable book width before I can read it comfortably. The new layout thumbs are static. I now find myself less likely to open the deviations.

As a stock user, I prefer the deviation data to appear instantly under the thumbs (as we currently have) rather than through the much slower one-thumb-at-a-time hover. Useful information for me beyond the name of the artist and title would include: logo when I've already faved it, logo if the deviation can be purchased via PCP download, date of upload, and download size of the picture. I also like the thumb "More Like This" option we currently have as I use this option frequently to find more artwork in the styles that I like. I only wish that DA could provide us the option between viewing the data under the thumbs OR viewing it via hover. Such an option would satisfy both those of us who need that extra information up front and those who only want to view the deviations themselves while obtaining that information if desired through hovering.
Reply
:iconmarki-moomoo:
marki-moomoo Featured By Owner Sep 21, 2015  Student Digital Artist
The idea is wonderful and looking amazing, also the pictures are very high quality but like most said you drag your images into my favorites bar.
Reply
:iconkawaiixfukuro:
KawaiixFukuro Featured By Owner Sep 21, 2015  Student General Artist
The thumbnail grid looks amazing the images are coming up in high-resolution with little problems. One problem I do have is I can't drag and image into my favourite's bar which means I have to open up every deviantation single file and favourite it that way which is annoying. My last concern is you don't get to see the title of the art piece, nor the deviant's username- but that's not a big problem. Otherwise everything is great c:
Reply
:iconjuliettasan:
juliettasan Featured By Owner Sep 21, 2015  Hobbyist Digital Artist
I like new desighn of thumbnais which can now built nice wall from deviations and they better visible especially pixel art. But it has no titles and name of artists it makes in inconvenient...
Reply
:iconbushcraftonfire:
BushcraftOnFire Featured By Owner Sep 21, 2015  Professional Traditional Artist
I have a slow internet connection.. and they seem to load just fine to me. I can see the hi res with no problem. 
Reply
:iconraekia12:
Raekia12 Featured By Owner Sep 21, 2015  Hobbyist General Artist
love the idea and seems like it will really help, seeing the difference in the pixel art will really help those in that medium.
Reply
:icondeathbiscuitt:
DeathBiscuitt Featured By Owner Sep 21, 2015  Hobbyist Digital Artist
It looks good but I like that it has the name of the artist and the title without the need to hover it ^^;
Reply
:iconguns-for-stars:
guns-for-stars Featured By Owner Sep 21, 2015  Hobbyist Digital Artist
for me it's better option, but i prefere deviation names to stay!
Reply
:iconcolin-bentham:
Colin-Bentham Featured By Owner Sep 21, 2015  Professional General Artist
If you want to reduce bandwidth, you could consider a file duplication algorithm so an image appears once. rather than multiple times. If people submit to various groups then the image seems to appear for each group. wouldn't it be better to have one image with the groups submitted to on the Rollover?
Reply
:iconcraytato:
Craytato Featured By Owner Sep 21, 2015  Hobbyist General Artist
I definitely like that it utilizes all the "extra space" because before it would look a little wonky. In addition to that, you can fit more deviations in the spaces, so more pieces have some sort of recognition. It reminds me of how Google formats it but i like it!
Reply
:iconskiretehfox:
SkireTehFox Featured By Owner Sep 21, 2015  Student General Artist
Definitely easier on the eyes
Reply
:iconveleven:
Veleven Featured By Owner Sep 21, 2015
I like the look on the mobile app. I think it's a smart move for the site. :)
Reply
:iconart-ingress:
art-ingress Featured By Owner Sep 21, 2015  Hobbyist General Artist
Looks great , the sooner the better
Reply
:iconwolfphantom21:
wolfphantom21 Featured By Owner Sep 20, 2015  Hobbyist Traditional Artist
Looks very nice
Reply
:iconelvenphilosophy:
elvenphilosophy Featured By Owner Sep 20, 2015  Hobbyist Digital Artist
I think this is a great idea! Keep up the good work DA!
Reply
:iconbear-21:
Bear-21 Featured By Owner Sep 20, 2015
I think it's a good idea and well thought out. Gives the viewer a better idea of what they're looking at
Reply
:iconjustanewb42:
justanewb42 Featured By Owner Sep 20, 2015  Student Photographer
Looks great.  
Reply
Add a Comment:
 
×

:icondanlev: More from danlev


Featured in Collections

DeviantART news by Sonikkudrawings

Useful Journals by AiKoNaishinno

Journals by selfmadecannibal


More from DeviantArt



Details

Submitted on
June 3, 2015
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
93,492 (11 today)
Favourites
621 (who?)
Comments
2,498
×