HOME | DD
danlev — The Upcoming Thumbnail Grid
#newthumbnails #thumbnails #deviantartupdate
Published: 2015-06-03 23:52:34 +0000 UTC; Views: 106553; Favourites: 552; Downloads: 0
Redirect to original
Description
body div#devskin12197678 { margin:0; padding:0; border:none; } body div#devskin12197678 .gr-box { font:400 18px/28px Arial,Sans-Serif; color:#181A1B; background:#fff; padding:0; margin:0; position:relative; z-index:1; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-box { font-size:16px; line-height:24px; } } body div#devskin12197678 .gr-box .links { position:absolute; top:0; right:0; left:0; border-bottom:1px solid #eee; height:50px; line-height:50px; text-align:right; z-index:3; padding:0 30px; } body div#devskin12197678 .gr-box .links a { font:700 11px Arial,Sans-Serif; line-height:50px; text-transform:uppercase; text-decoration:none; color:#7D8080; position:relative; } body div#devskin12197678 .gr-box .links a.title { background:url(https://www.da-files.com/artnetwork/default/title-site-update_7D8080.svg) 0 0/auto 12px no-repeat; width:105px; height:12px; position:absolute; left:30px; top:20px; display:block; text-indent:-9999em; text-align:left; transition:color 0s linear; -moz-transition:color 0s linear; -webkit-transition:color 0s linear; -ms-transition:color 0s linear; -o-transition:color 0s linear; } body div#devskin12197678 .gr-box .links a.title:hover { background:url(https://www.da-files.com/artnetwork/default/title-site-update_05CC47.svg) 0 0/auto 12px no-repeat; } body div#devskin12197678 .gr-box .links a:hover { color:#40CfC7; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-box .links a:not(.title) { display:none; } } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-box .links a.title { margin:auto; position:relative; left:0; } } body div#devskin12197678 .gr-top { padding:0; margin:0 auto; width:auto; border:0; background:none; position:relative; z-index:2; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-top { height:auto; z-index:2; } } body div#devskin12197678 .gr-top i.tri { display:none; } body div#devskin12197678 .gr-top .gr { background:transparent; padding-top:50px; padding-bottom:0; max-width:1080px; padding-left:30px; padding-right:30px; display:block; position:relative; border:none; bottom:0; left:0; right:0; margin:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body div#devskin12197678 .gr-top .gr:after { display:table; clear:both; content:''; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-top .gr { max-width:420px; padding-left:15px !important; padding-right:15px !important; } } body div#devskin12197678 .gr-top .gr h2 { margin:0; font:700 60px/60px 'Montserrat',Arial,Sans-Serif; color:#000; padding:40px 0 40px; top:0; text-transform:uppercase; float:left; width:70%; border-right:1px solid #eee; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body div#devskin12197678 .gr-top .gr h2 img { display:none; } body div#devskin12197678 .gr-top .gr h2 a, body div#devskin12197678 .gr-top .gr h2 input { font:inherit; text-transform:uppercase; color:inherit; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-top .gr h2 { font-size:36px; line-height:38px; margin:0; width:100%; float:none; border:none; padding:30px 0; } } body div#devskin12197678 .gr-top a { color:inherit; text-decoration:none; text-shadow:0 0 50px transparent; transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; } body div#devskin12197678 .gr-top a:hover { color:inherit; text-decoration:none; opacity:1; filter:alpha(opacity=100); _zoom:1; text-shadow:none; } body div#devskin12197678 .gr-top .timestamp { font:normal 11px Arial,Sans-Serif; color:#7D8080; text-transform:none; margin:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0; width:28%; position:absolute; padding:62px 0 20px 70px; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-top .timestamp { display:none; } } body div#devskin12197678 .gr-top .author { font:bold 11px Arial,Sans-Serif; color:#7D8080; text-transform:uppercase; margin:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0; width:28%; position:absolute; padding:35px 0 0 30px; font-size:0; color:transparent; } body div#devskin12197678 .gr-top .author .avatar { display:inline-block !important; } @media only screen and (max-width: 767px) { body div#devskin12197678 .gr-top .author { display:none; } } body div#devskin12197678 .gr-top .author .name { width:auto; height:30px; line-height:30px; display:inline-block; text-indent:0; font-size:11px; color:#181A1B; } body div#devskin12197678 .gr-top .author .name a { color:#181A1B; } body div#devskin12197678 .gr-top .author .name a:hover { color:#40CfC7; } body div#devskin12197678 .gr-top .author .name img { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; float:left; height:30px; width:30px; margin:0 10px 0 0; position:relative !important; top:8px; left:0; } body div#devskin12197678 .gr-top .author .name span[class*='username'] { text-indent:0; color:#7D8080; line-height:30px; } body div#devskin12197678 .gr-top a { color:inherit; position:relative; } body div#devskin12197678 .gr-body { margin:0 auto; background:#fff; color:#181A1B; border:0 !important; position:static; overflow:visible; } body div#devskin12197678 .gr-body .gr { border:0 !important; position:static; } body div#devskin12197678 .gr-body .gr .grf-indent { background:transparent; margin:0; padding:0; } body div#devskin12197678 .text { background:transparent; margin:0 auto; text-align:left; padding-top:0; padding-bottom:0; padding:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body div#devskin12197678 .text h1, body div#devskin12197678 .text h2, body div#devskin12197678 .text h3, body div#devskin12197678 .text h4 { font-weight:700; font-family:'Montserrat',Arial,Sans-Serif; color:#000; letter-spacing:normal; margin-bottom:5px; } body div#devskin12197678 .text h1[align], body div#devskin12197678 .text h2[align], body div#devskin12197678 .text h3[align], body div#devskin12197678 .text h4[align] { color:#05CC47; } body div#devskin12197678 .text h1 { font-size:36px; line-height:42px; } body div#devskin12197678 .text h2 { font-size:28px; line-height:32px; padding:.6em 0 .3em; } body div#devskin12197678 .text h3 { font-size:20px; line-height:24px; padding:.3em 0; } body div#devskin12197678 .text h4 { font-size:14px; line-height:18px; } body div#devskin12197678 .text h5 { font:bold 18px/28px Arial,Sans-Serif; text-transform:uppercase; margin:0; color:#7D8080; letter-spacing:normal; } body div#devskin12197678 .text p:empty { display:none; } body div#devskin12197678 .text ol { margin-left:0; padding-right:0; list-style-type:none; } body div#devskin12197678 .text ol li { padding-bottom:10px; margin-bottom:10px; counter-increment:step-counter; position:relative; border-bottom:1px dotted #eee; } body div#devskin12197678 .text ol li:before { position:absolute; left:-40px; content:counter(step-counter) '.'; margin-right:5px; font-size:80%; color:#05CC47; font-weight:bold; position:absolute; text-align:right; display:block; width:30px; } body div#devskin12197678 .text blockquote { position:relative; margin:1em; padding:0 0 0 30px; } body div#devskin12197678 .text blockquote:before { content:''; position:absolute; top:0; left:-11px; width:24px; height:41px; background:url(https://www.da-files.com/artnetwork/default/icon-quote_open.svg?3) 0 0/contain no-repeat; z-index:2; } body div#devskin12197678 .text blockquote:after { content:''; position:absolute; top:41px; left:-1px; width:1px; bottom:0; background:#eee; z-index:1; } body div#devskin12197678 .text blockquote small { font-family:Arial,Sans-Serif; display:block; font-style:normal; font-size:12px; margin-top:5px; color:#7D8080; } body div#devskin12197678 .text blockquote small a { color:inherit; text-decoration:none; font-weight:inherit; } body div#devskin12197678 .text blockquote small .avatar { width:50px; height:50px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; float:left; margin:0 10px 0 0; } body div#devskin12197678 .text a { color:#40CfC7; text-decoration:underline; transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; font-weight:bold; } body div#devskin12197678 .text a:hover { color:#34807A; } body div#devskin12197678 .text hr { border:none; margin:5px 0; border-bottom:1px solid #eee; } body div#devskin12197678 .text br { clear:both; display:none; } body div#devskin12197678 .text strong, body div#devskin12197678 .text b { color:#000; } body div#devskin12197678 .text small { color:#7D8080; font-size:14px; } body div#devskin12197678 .text img.avatar { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } @media only screen and (max-width: 767px) { body div#devskin12197678 .text img.avatar { max-width:30px; display:inline-block; } } body div#devskin12197678 .text code, body div#devskin12197678 .text pre { color:#D4F5DE; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; padding:15px; background:#1F3626; display:block; border-left:10px solid #42794F; } body div#devskin12197678 .text h5:first-of-type { position:relative; max-height:630px; margin:0 auto; overflow:hidden; line-height:0; display:block; max-width:1080px; padding-left:30px; padding-right:30px; } body div#devskin12197678 .text h5:first-of-type:before { content:''; background:url(https://www.da-files.com/artnetwork/default/ui-container-shape_br-ffffff.svg) 0 100%/contain no-repeat; position:absolute; margin-right:30px; bottom:-2px; right:-2px; width:12%; height:100%; z-index:2; } body div#devskin12197678 .text h5:first-of-type:after { content:''; cursor:pointer; position:absolute; bottom:40px; font:bold 11px/14px Arial,Sans-Serif; color:#FFF; display:inline-block; letter-spacing:normal; z-index:28; padding:0 5% !important; text-shadow:0 2px 40px rgba(0,0,0,0.7); text-align:left; text-transform:uppercase; white-space:nowrap; left:0; margin:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; } body div#devskin12197678 .text h5:first-of-type img, body div#devskin12197678 .text h5:first-of-type img.writer-deviation-image { margin:0; width:100%; } body div#devskin12197678 .text h5:first-of-type a.embedded-deviation { display:block; max-height:inherit; overflow:inherit; cursor:default; } body div#devskin12197678 .text h5:first-of-type a.embedded-deviation:after { content:'Header Artist (View)'; cursor:pointer; position:absolute; bottom:40px; font:bold 11px/14px Arial,Sans-Serif; color:#FFF; display:inline-block; letter-spacing:normal; z-index:28; padding:0 5% !important; text-shadow:0 2px 40px rgba(0,0,0,0.7); text-align:left; text-transform:uppercase; white-space:nowrap; left:0; opacity:0; filter:alpha(opacity=0); _zoom:1; margin:auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; } body div#devskin12197678 .text h5:first-of-type a.embedded-deviation:hover:after { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin12197678 .text a[target='_self']+span.username-with-symbol.u { position:relative; top:-11px; } @media only screen and (max-width: 767px) { body div#devskin12197678 .text a[target='_self']+span.username-with-symbol.u { top:-4px; font-size:11px; } } body div#devskin12197678 .text a[target='_self']+span.username-with-symbol.u a { color:#181A1B; } body div#devskin12197678 .text a[target='_self']+span.username-with-symbol.u a:hover { color:#40CfC7; } body div#devskin12197678 .text span.user-symbol { color:#7D8080; font-weight:normal !important; margin-left:2px; } body div#devskin12197678 .text a.external:after, body div#devskin12197678 .text a.external:after { margin-left:4px; margin-right:4px; color:#7D8080; font-size:0.6em; top:-1px; position:relative; } body div#devskin12197678 .type { margin:auto; padding:15px 30px 30px; max-width:800px; } body div#devskin12197678 .type br { display:inline; } body div#devskin12197678 .type p { margin:0 0 15px; } @media only screen and (max-width: 767px) { body div#devskin12197678 .type { max-width:420px; padding-left:15px !important; padding-right:15px !important; } } body div#devskin12197678 img[src$='jpg'], body div#devskin12197678 img[src$='png'], body div#devskin12197678 a img[src$='jpg'] { max-width:100%; display:inline-block; vertical-align:bottom; } @media only screen and (max-width: 767px) { body div#devskin12197678 img[src$='jpg'], body div#devskin12197678 img[src$='png'], body div#devskin12197678 a img[src$='jpg'] { width:100% !important; display:block; } } body div#devskin12197678 .embedded-image-deviation { line-height:0; } body div#devskin12197678 span.shadow a.lit { display:block; position:relative !important; width:150px; height:200px; margin:0; padding:20px; text-align:left; text-decoration:none !important; color:inherit; border:none; color:#fff; box-shadow:0 1px #afafaf, 0 2px #cacaca, 0 3px #dfdfdf, 0 4px #afafaf, 0 5px #cacaca, 0 6px #dfdfdf; -moz-box-shadow:0 1px #afafaf, 0 2px #cacaca, 0 3px #dfdfdf, 0 4px #afafaf, 0 5px #cacaca, 0 6px #dfdfdf; -webkit-box-shadow:0 1px #afafaf, 0 2px #cacaca, 0 3px #dfdfdf, 0 4px #afafaf, 0 5px #cacaca, 0 6px #dfdfdf; } body div#devskin12197678 span.shadow a.lit img.lit { display:none; } body div#devskin12197678 span.shadow a.lit span.wrap { width:100% !important; display:block; } body div#devskin12197678 span.shadow a.lit q { min-height:0; padding:0; top:0 !important; right:0; left:0; position:relative; line-height:12px; font-size:6px; font-family:Arial,Sans-Serif; cursor:pointer; display:block; } body div#devskin12197678 span.shadow a.lit q *, body div#devskin12197678 span.shadow a.lit q:before { display:none; } body div#devskin12197678 span.shadow a.lit q>strong:first-child { font:bold 14px/18px 'Montserrat',Arial,Sans-Serif; letter-spacing:normal; display:block; margin:0 0 5px 0; padding:0; z-index:1; color:#181A1B; text-transform:uppercase; } body div#devskin12197678 span.shadow a.lit q>strong:first-child { color:#4F5254; } body div#devskin12197678 span.shadow a.lit q img { width:100%; display:none; } body div#devskin12197678 .footer { background:#181A1B; color:#ccc; text-align:left; position:relative; } body div#devskin12197678 .footer:before { content:''; height:100px; width:100%; background:url(https://www.da-files.com/artnetwork/default/bg-pattern-black.gif) 0 2px/32px auto; border-bottom:1px solid #05CC47; display:block; z-index:1; } body div#devskin12197678 .footer .type { padding-left:30px; padding-right:30px; } body div#devskin12197678 .footer br { display:inline; } body div#devskin12197678 .footer h1, body div#devskin12197678 .footer h2, body div#devskin12197678 .footer h3, body div#devskin12197678 .footer h4 { color:#f2f2f2; } body div#devskin12197678 .footer ol li { border-bottom:1px dotted #272727; } body div#devskin12197678 .footer a:hover { color:#D4F5F2; } body div#devskin12197678 .footer a[target='_self']+span.username-with-symbol.u a { color:#ccc; } body div#devskin12197678 .footer a[target='_self']+span.username-with-symbol.u a:hover { color:#D4F5F2; } body div#devskin12197678 .footer span.user-symbol { color:#7D8080; font-weight:normal !important; margin-left:2px; } body div#devskin12197678 .bottom { border-top:1px solid #272727; background:#181A1B; margin:0; padding:40px 30px; z-index:2; max-height:140px; text-align:center; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } body div#devskin12197678 .bottom a.commentslink { color:#4F5254; text-transform:uppercase; font:700 12px/18px Arial,Sans-Serif; display:inline-block; text-decoration:none; position:relative; padding:0; margin:0; transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; } body div#devskin12197678 .bottom a.commentslink:hover { color:#40CfC7; text-decoration:none; } body div#devskin12197678 i.gr1, body div#devskin12197678 i.gr2, body div#devskin12197678 i.gr3 { display:none; } body div#devskin12197678 .shadow { padding:0 !important; } body div#devskin12197678 .gr-box input, body div#devskin12197678 div.writer { border:none !important; outline:1px dotted #ccc; overflow:visible !important; padding:0 !important; } body div#devskin12197678 .baseline img { vertical-align:baseline; } body div#devskin12197678 .box { background-color:#F2F2F2; padding:1em 1.2em; } body div#devskin12197678 .smaller { font-size:.8em; } body div#devskin12197678 .content > div { display:none; } body div#devskin12197678 .button { background-color:#40CfC7; color:#fff !important; padding:.5em .7em; border-radius:.3em; -moz-border-radius:.3em; -webkit-border-radius:.3em; } body div#devskin12197678 .button:hover { background-color:#34807A; } body div#devskin12197678 .col1 { width:50%; display:inline-block; vertical-align:top; } body div#devskin12197678 .gal2 { width:48%; padding:1%; display:inline-block; vertical-align:top; } body div#devskin12197678 .gal3 { width:27%; padding:1%; display:inline-block; vertical-align:top; } body div#devskin12197678 .headimg img { width:100%; } body div#devskin12197678 .headimg { padding-left:1em; } body div#devskin12197678 .subtle { color:#999; } body div#devskin12197678 .small { font-size:.9em; } body div#devskin12197678 .w40 { width:40%; } body div#devskin12197678 .w60 { width:60%; }
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
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.
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.
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.)
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 .
QUESTION
- DeviantArt Mobile App users, you've been using this new grid style for a while now. How do you feel about it coming to the desktop site?
- Share your thoughts in a Status Update!
Related content
Comments: 2488
that new thumbnail layout is pissing me off. seriously.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
For those who don't like the new layout, "sign" this petition to get the old layout back!
timscorpion.deviantart.com/jou…
👍: 0 ⏩: 0
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!"
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
Well, I don't hate it. 
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.
👍: 0 ⏩: 0
Why not apply this to our galleries? Why just the browsing?
👍: 0 ⏩: 2
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!
👍: 0 ⏩: 1
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!
👍: 0 ⏩: 1
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!
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
Where has the "More" button gone? I can only see one page.
👍: 0 ⏩: 0
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!
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
looks great, a nice way to clear out all the negative space between all the different sized images.
👍: 0 ⏩: 0
Hmm, i guess it looks alright
Edited for typos
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
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
👍: 0 ⏩: 0
What about the gif previews? They are too small compared to the rest.
👍: 0 ⏩: 1
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
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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:
👍: 0 ⏩: 0
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...
👍: 0 ⏩: 0
I have a slow internet connection.. and they seem to load just fine to me. I can see the hi res with no problem.
👍: 0 ⏩: 0
love the idea and seems like it will really help, seeing the difference in the pixel art will really help those in that medium.
👍: 0 ⏩: 0
It looks good but I like that it has the name of the artist and the title without the need to hover it
👍: 0 ⏩: 0
for me it's better option, but i prefere deviation names to stay!
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 0
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!
👍: 0 ⏩: 0
I like the look on the mobile app. I think it's a smart move for the site.
👍: 0 ⏩: 0
I think this is a great idea! Keep up the good work DA!
👍: 0 ⏩: 0
I think it's a good idea and well thought out. Gives the viewer a better idea of what they're looking at
👍: 0 ⏩: 0
| Next =>