Some input on altering design please!

Heya everyone!

First, I’m asking here instead of design/UX because it’s primarily having to do CSS related adjustments and responsive design. This forum has helped me a bunch with this in the past.

The site in question is a social content sharing site. My intention is not to create a single layout that works for everything from PCs to phones. I have a function built into the script that detects mobile , separating into phone and tablet. I will be paring down my initial design to fit those formats. Right now, I’m just trying to design a layout that works well for various resolutions on the desktop and a bonus would be that it looks good on a tablet.

First, here’s an example page on the site:

A little about this page. It isn’t always a video. Sometimes instead of a video, it’s pictures and a body of text.

As you can see by the screenshot, I’m not a design guy. I kept tacking on the features as I wrote them. It’s ugly, it’s not valid markup(I haven’t validated because I knew this day was coming) and it’s confusing. I do think I know the level of importance for each portion of the page however, so I thought I would use that as a guideline.

First, the content. Second, sharing, third comments and bringing up the tail, poster information. The navigation arrows, I think I would put at the very top, to allow them to quickly shoot through the pages until they find something they’re interested in.

I’ve looked at a lot of sites and it seems that the share/like functions are everywhere. On some sites, I saw the same buttons in four different locations, so maybe a share bar at the top and bottom? I considered a bar on the left that follows the scrolling of the page, but wasn’t sure how that would mess up a responsive design.

A couple things of note: The share buttons grow and shrink in number, based on the user’s preference. They might have turned them off completely, set only two to show or 6. I do plan on having advertising on the site for all anonymous users, so I’m taking that into account when designing.

So here’s what I’ve come up with in Gimp:

I’ve gotten rid of the superfluous explanation brackets for the sharing/reporting/voting. I’ve placed them on a single bar. Report will become a popup jquery box allowing the user to submit without leaving the page. If you look at the user details portion(Labeled “The Deets”, I am thinking to have it collapsed by default and clicking the h3 will expand it via jquery. If I do that, I will have to move the navigation.

I’m also considering separating the sharing, content and details with divs utilizing a small 1px border, to visually group the items.

I would like to know what you think of these changes, what could be better and what you think should be changed, removed or added.

Thanks very much for your time!

If a moderator feels that this would be better served in the design/ux category, would you mind moving it for me?


We’ll see if someone answer here… if not, I’ll move it tonight (it is morning for me). I can’t check the page while I’m at the office because the firewalls here are kind of strict and don’t let pass images and stuff.

Thank you very much for your help molona.

Perhaps a move now?

I moved it for you.


Thanks Ryan. I got late yesterday and today is resulting in a … challenging and interesting day… let’s leave it like that :smile:

I suspect that you’re not getting any feedback because, and I’m truly sad to say this, the mockup doesn’t tell much, if anything at all.

Too much empty space and annoying ads (funny you took those into consideration) and a 80’s design make me want to run away.

Right now it looks kind of dated, to be honest

Thanks for your help, molona. I’m a little confused though. Currently, there are no ads on the site that I have placed. The only media on the page linked is the remotely hosted video, which is the subject of that particular page. Do you mean the ads that the host is putting into the video? When I viewed the page in IE with no ad blocking extensions, I still didn’t see anything that would be considered and advertisement.

No, not in the video but in the page. It may belong to hosting? They’re horrid

Oh, to clarify that’s not part of the page that I’m trying to redesign, that’s part of the image hosting service I’m using. I’ll start using imgur or self hosting for future images.

Currently, there is no advertising active on the site:

Still lots of white space on the right and a bit dated design. There are things I do like. One of those is the comments. Although the title itself, funny enough, needs more white space around it.

And all the input boxes need to be wider and have some padding, definitively.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.