currently reading

UI Exercise: Exploring a Dribbble Layout Redesign

Please note: This is just an experiment. I do not know all of Dribbble’s goals, nor am I claiming this is a better layout than Dribbble’s existing site. There is likely some reason that I’m not aware of why Dribbble is using it’s existing layout and not this one or some other layout. To be abundantly clear: I love Dribbble’s existing design, it is very well executed. This isn’t a full redesign, this is a UI experiment building off of an idea that I had. Thanks to how incredibly well designed and developed Dribbble is, all I had to do was re-arrange elements and not make a single alteration to the design aside from the rearrangement. To be incredibly clear, I am not saying this layout is a demand, or even a suggestion to Dribbble, as I cannot possibly know or accomodate for all of the goals or take Dribbble’s usage statistics into consideration.

All I’m doing is flexing my creative muscles to grow better at design and information architecture.

View Demo | Discussion on Dribbble

Experimental & Outside the Box Layouts

I am a huge fan of uncommon and experimental layouts, simply because they go against the norm. I also enjoy pushing the limits of design, trying new things, and attempting to come up with brand new ideas. That is the main reason for this UI Experiment, it’s another opportunity for me to try out and uncommon experimental layout.

The Dribble Layout Experiment

Dribbble UI Excercise
Hover for details, click to view the demo | View the original shot

All I did was rearrange a few elements, I didn’t change the design of anything. Most notably, I moved the comments over to the right and made the shot area sticky. Aside from that, I moved the tags below the shot and made them inline, I moved the “More by” and “More in Project” and “More From Following” to the left, below the tags. I took the “This shot is a rebound of” out of the frame and moved it to the right below the Like, Bucket, Rebound, Tweet, Short URL, and ad section and I put the Rebound of this Shot section below that and removed two of the items. Other than that, I kept everything exactly the same.

Benefits of this Layout

Dribbble is all about the shot. But currently, you lose the most important element of the shot page when you scroll down. To me that is not ideal. (Again, to be fair, I could be unaware of some goal that completely nulifies this new direction) When participating in a discussion on Dribbble, how many times have you scrolled down, read a comment, scrolled up and looked at the shot, scrolled back down to re-read the comment or the next comment, scrolled back up to look at the shot, then scroll down to start writing your comment, but scrolled back up… you get the point.

That is why I made this rearrangement – to keep “the shot” as the primary focus of the page, no matter how far you’ve scrolled down and to keep the shot visible while participating in discussion. I’m curious if this layout would increase the responses on Dribbble.

Another benefit of the sticky element, is there isn’t any wasted space in the sidebar. You know that giant area of nothing that happens on short sidebars with long content areas? Yeah, that isn’t an issue anymore.

Personally, I really like the benefits of a sticky sidebar, though it does come at a cost.

Downsides to this Layout

On the downside, this layout limits the expandability of the Dribbble shots page. Another downside is the shot owner’s initial comment is pushed below the fold – only on small monitors, when the shot is a rebound, and has a bunch of rebounds. That situation would be rather rare given the activity on Dribbble and it’s audience. Furthermore, all a user has to do is twitch his/her finger on the scrollbar and they can see the shot owner’s initial comment alongside the shot, as well as all other comments alongside the shot. As Dribble is made up with Tech Savvy users who return frequently, personally, I don’t believe having the initial comment below the scroll for users with small monitors is much of an issue.

Another limitation to this layout is with the Tags as well as the “More” sections in the sidebar. If a user were to have dozens of tags, then the sidebar could get too large. Also, in the situations where there is a third, or on rare occasions a fourth, “More” section, that could also make the sidebar too tall. That is a major drawback, but it could be alleviated two ways. If someone has more than “X” tags, or of the tags reach a third or fourth row, then the remaining tags get hidden and replace by a “more” button that reveals the extra tags. Also, if the sidebar is taller then the window height, it isn’t scrollable. That can easily be accomplished with Javascript, though I did not do that in the demo.

Sacrifices are most definitely being made in order to have the sticky shot, but to me the benefits of the sticky shot outweigh the cost of the sacrifices.

Personally, I have a large monitor, don’t use a large number of tags, nor have I encountered many people who do use large amounts of tags. I am not aware of usage statistics for the average number of tags or monitor usage stats. Maybe if I was aware of some of those stats then this layout would be completely nullified. But from my personal experience and knowledge of how and who uses Dribbble, I believe the number of people who have a small monitor is low enough that it would be worth it to give the majority of the users an enhanced browsing experience. But again, I have no clue what those stats are, so I cannot say if this layout is better for Dribbble or not. Again, it just an experiment to “flex my creative muscles.”

There is No Perfect Design

Yes, I said it. There can be some amazingly awesome websites out there. But there is no perfect website. It is impossible to accomplish every goal, have the strongest push for every possible action, or account for every user’s personal preferences and usage habits.

That being said, it is our job as a web designer to do the best we can in balancing the website’s goals and accomplishing them as best we can, make sure every action is as accessible as possible, and tailoring the site to accomodate a the most common usage habits and account for the less common habits.

Design is about weighing the pros and cons of design decisions against goals and providing the best possible outcome.

The layout I built accommodates my personal goals, actions, and usage habits – which is why I pursued it. I am guessing this layout accomodate’s other user’s goals, but I cannot know for certain as I do not know everything that Dribbble’s owners know.

Care to Share Your Thoughts?

I would love to hear y’all’s feedback. Are there any other shortcomings to this design that I’m not aware of? Do you use Dribbble differently? Would you enjoy this layout? Are there any improvements you would make?

Please feel free to hit me up on Twitter, @BrianPurkiss, or join in on the Dribbble discussion.

View Demo | Discussion on Dribbble

Click to Expand

Recent Tweet Twitter Bird

follow us on twitter, on Facebook, and on Google+.