-
Whilst I can see there is an underlying structure to the page in the usual header, sidebar and main content, each area feels like it's content is 'floating' and not anchored within each section. This has the result of making it harder to make sense of the page at first glance.
Taken individuallly each area (header, content, adverts, navigation, footer ) is incredibly busy in itself and because each area isn't separated clearly from each other by use of lines or panels, they are effectively visually merging together.
Additionally there are so many instances of social icons being used over the page all at different sizes, widths and formats that these are also over complicating the design.
In a beautifully clean design, the use of panels or lines to separate content should be unecessary because the visual structure comes through careful use of typography and clean placing of elements
I have made some design notes on each area but overall in brief:
Header The facebook icon on the left is fighting with the logo. Also the navigation at the top is distracting from the main horizontal navigation. They're not separated enough or of different enough sizes for the hierarchy to be immediately apparent.
POSSIBLE SOLUTION: The addition of more horizontal white space and moving the logo to the left whilst keeping all social icons together on the right should help. Ideally the top line navigation could move to the footer to clean up the header.
Main Content area - I realize this is probably dynamically generated in terms of stories but the widow of 'Failure' really sticks out to me. - The space to the right of the google image is very tight and not consistent with the space to the right of the pictures in the stories below it. - The social icons aren't integrating well on the main story compared to the other stories. They are all differing widths, heights etc so are hard elements to work with. In order to make them feel cohesive it would be nice if you could ditch the dig icon and just have the two facebook/tweet icons the same as the rest of the stories on the page. If you can't drop the dig icon then simply ranging the logos and aligning them to the right will help create a strong right horizontal line running through the page. - The area to the bottom of the news stories I actually think is working well. It feels cohesive and structured and the balance of typography is working well.
Side panel - The top and today is working well although the numbers are huge and fighting with the headlines on the left. Personally I'd make the subhead larger so it's clearer to see at first glance of the page and make the numbers 1-6 slightly smaller. The borders between the images feel a bit messy - I think simple lines running between each story should be sufficient - it looks like lines and borders around the images too which makes it look a bit more messy. - The top box call to action again feels like it could be clearer and more simple. The sign up headline is tiny whilst the social icons take over. I realize this is all about linking to the social networks but it's more important to be clear on what each section is about first before the user is given an option to like it. So THIS IS NEWS big and 'I like this' smaller. SIGN UP FOR MASHABLE big and 'Mashable I like' smaller. - Still on the top sign up box. I'm not sure but am questioning if it is necessary to repeat the twitter icon here? Maybe it is but I'd prefer to see clearer icons in a panel along the top right horizontally above the main navigation so to link to facebook, digg, twitter etc all in one place nice and clear at the top. - Is it possible to put the top and today panel above the big number advert box? As a user of the site, I'd find this more useful higher up the page and I find the numbers are so grabbing of my attention that I almost miss the box beneath it at the moment.
I did delve deeper into the rest of the site and found a lot of areas felt in need of more design attention such as the About Us page - more horizontal space needed between each person and just nice simple horizontal rules would help structure the page a bit more.
I like the change of colour on each section area across things like tech, video, dev& design etc. But why do you have all three icons for digg, twitter and facebook on the tiny iPhone stories when on the rest of the site, it's just twitter and facebook apart from on the main story. Consistency I think would be good for these.
If any of these comments don't make perfect sense or you need clarification on anything then please don't hesitate to ask me.
I hope this helps.
-
-
Emma Simpson commented:
This site works well and made me think it may work to put your advert right at the top and the header etc below.
Plus maybe work the navigation for the different areas of the site such as design & dev, tech etc into a vertical left navigation. and move the current horizontal navigation which is at the very top of the page into the area currently occupied by design & dev, tech etc. Obviously change it's design to match the rest of the horizontal nav instead of just having text on white for it. http://www.shortlist.com/
-
-
Mashable.com Homepage
-
1
move this ad unit after the trending story
serve reader 1st then present ads.
-
2
move up
since the top spot is vacated. move whole sidebar + trending story up.
-
3
swap logo with join mashable
people read from left to right. Brand before anything. put logo then the call to action. it will have a side effect of the Logo talking directly to reader making it more effective. also the nav bar is left aligned. so its a bit jarring.
-
4
move this to the right
-
5
if possible
have the fb like within the article. how can the reader like a summary? the share buttons are social proof enough to drive readers into the article.
-
6
make this into a grid
turn this into a grid of thumbnails. you can fit 16-24 in there. have a div show the story when they hover it. click to go into article.
-
7
color code this
color code this. the site is color varied enough thats its a design fit.
-
8
All social in one place
All social icons (retweet, fb share, digg, comments, fb like) should be in one place
-
9
Two columns to have complete headlines
All headlines are trunked with this 3 column approach. Maybe try a 2 column approach
-
10
Date at front
There's no need for bullet points if dates are at the front of the line. This is especially more useful since s.o. can scan the dates.
-
11
One story large
There are only 3 stories on the whole page with headline and intro text. Maybe have one story for each section enlarged as well
-
12
Facebook Icon
as this is already down in the footer, it seems odd that you would want it up here next the logo, it also seems unbalanced being so square compared with the rest of the icons in the footer
-
13
This nav menu
this would be better incorporated into the main nav, that's my opinion, as to me it feels like it's squashing the site name and logo
-
14
I would move this down under the header
at the moment there's too much going on.
-
15
Love it
don't change it
-
16
can you make it hideable?
-
17
another one?
-
18
and again
-
19
see these are nice and round
not like the one at the top
-
20
due to the size of the pages
wouldn't it be better to be top 10?
-
21
different styles
there seems to be no continuity in the icons
-
22
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
23
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
24
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
25
Logo to the Left
Why don't you move the Logo to the left and the facebook to the right after the search zone, and then the search zone goes from the right to the middle, and make it a little bit larger the text input
-
26
Google ads...dammm I am blind to them :)
To be honest me, I am blind to the google ads, and I am sure most of the people are, but I think is okay since you don't have to many options here :)
-
27
The Sidebar is OKAY
The Sidebar is okay, I just miss the category view also here, maybe make it collapse with an "+" you know...
-
28
Top Stories...to much uppercase
Why do you use that much uppercase? It's really hard to read, it's like a title which goes on and on and never stops, that my first impression! Use only the title uppercase and the description normal... and gray color not the same blue, it's confusing
-
29
Number of social media items
The number of social media items on the page is just insane. It's cluttering the interface with so many choices I don't know where to click anymore.
-
30
Why is this here
Is this related to search?
-
31
The main menu
Is to small and cluttered. The icons help a bit but it's still a text soup. Consider drop down menus, tabs like yahoo, or something else to un-clutter this area.
-
32
Top menu
Some of these buttons could be in the footer or many menu. The most annoying problem with this design is the amount of choices available.
-
33
Social area
This is nicely done.
-
34
Social networking buttons
If this is the main page, why would you need these here? Usually I read the article before I share it or Digg it ... so the place for these would be in the full length article page.
-
35
Top stories
This is bad. Most users will never read this small text, they will skip this area completely.
-
36
News Layout
I would consider another layout for news in which you could fit more top stories in without the user having to reload the page. See Yahoo or other news sites. They don't make you reload the page.
-
37
News Layout
I would consider another layout for news in which you could fit more top stories in without the user having to reload the page. See Yahoo or other news sites. They don't make you reload the page.
-
38
Partners
This is OK. Dimmed logos.
-
39
Footer
The footer looks like a filler with no interesting or worthwhile content.
-
40
page-top menu items
Spread these links out the full width of the 960 pixels, make them a much darker shade, and give the whole bg div a light blue hue. And make the bg repeat the whole screen width (repeat-x).
-
41
Not impressed by "Bing search"
I'm sure Microsoft pays a nice chunk of change for this so my comments really don't matter. But IMO I would rather see an unbranded search field as a user. When I see the branding my mind connects that with a browsers search field, which is often branded, and I think "search the web" not "search this site". So I typically don't use search fields on sites when the field is branded with a search engine that is unrelated to the site.
-
42
Put twitter here also, or instead
This is a good call, I'm sure. But Twitter should probably be here too, or instead. I bet more of the audience uses twitter to engage with Mashable type content than facebook. Facebook seems to be used (at least in my circles) more for personal connection than getting outside content. Or, seeing as how the footer states there are over 400K RSS subscribers, why not make this the RSS feed icon?
-
43
Repeat-x
Why not take up the whole screen width here? Keep the container for the content, but let the background take up the whole screen width.
-
44
Can you say "Fugly"?
-
45
Perfect.
This is very appropriate, and nicely done (both the email signup and the social media links). However, I think the facebook link in the header is confusing and deterring from engaging with this element by separating the social media links.
-
46
Nice choice of colors sitewide
And great use of color against white, with neutral gray tones
-
47
Populating content
Like how on the actual site content populates here as you scroll down the page.
-
48
Actual site has a ton of sidebar stuff.
Is all the sidebar stuff on the actual site necessary? And so much advertising. I know you gotta pay the bills, but man!
-
49
Very useful. Like this piece.
-
50
Like how these partners are listed, but not obnoxious.
Take the hint elsewhere!
-
51
Good but unnoticable.
Consider changing "About Mashable" to a slightly larger font-size and color to blue or darker gray to stand out. This is maybe a little too hidden to me.
-
52
Good. Nice touch on having stats listed.
I did use the formatting for bullet points but it seems to have put it all in one great long running paragraph. Hope it still makes sense.