Site Design: Sports Illustrated Redesign (si.com)
over 9 years ago from Nic Lanzillo, Interactive Designer at Sports Illustrated
over 9 years ago from Nic Lanzillo, Interactive Designer at Sports Illustrated
I have no idea where to look, everything seems to be randomly placed.
This was a concern. We're working hard to figure out some possible page layouts, help keep some visual organization.
Do you mind if I ask is this a consistent issue (throughout the various sections) or just with the homepage?
Thanks for your comment, Eric!
I'd have to second that; it feels like a Masonry-esque layout rather than something with a clear eyeline. It feels...arbitrary? I mean that not condescendingly, but that the content does not feel like there is a grand, authoritarian order over it. It appears to encourage free-form exploration.
It also looks very cramped on smaller desktops--I'm using a 11-inch Chromebook right now, and articles feel squashed under the weight of the ancillary content, header-bar, and post titles.
Thanks, Jason! Appreciate the feedback.
We're big fans of the DN community over here. We launched our new (fully revamped) site today. It certainly has its bugs, most of which we're (hopefully) aware of. They'll be plenty of work for us to do over the next few weeks and months. Any and all feedback welcome.
I rather like the very large Menu navigation - although it feels far better on my cinema display than on my laptop screen.
I also like the way you've compartmentalized your categories and branded content. Also, pushing down the page on activation versus an overlap is very slick, IMO.
I'm a little surprised you put your two ad units so closely together, but they're ALWAYS hard to design around.
Appreciate the kind words, Eric!
Which two ads are you referring to?
Leaderboad and IMU
Never easy (nor necessarily fun) designing around ad units :)
With our ads, they're automatically placed within the rivers (when applicable) so there have been river arrangements, where edit has populated content and the river structure comes off a bit wonky. Ads could be getting pushed together, awkward tile spacing, etc.
I noticed that it's only responsive to about 965px; why not go fully mobile?
With our current desktop, you are correct...it's only responsive to that 960px. Bringing the site up on mobile, you'll see it is responsive to that size.
Whats the reasoning behind this?
Couldn't even tell ya. Others involved in the process would have to weigh in here.
My best guess...a few of the river tile variations do not warrant anything below a 3 column layout.
That logo needs a redesign so bad.
Ha! We would love to see what you guys could come up with. Thanks for the comment, Taulant.
Something that would make it immediately better is making the logo white and removing the 1px stroke around it.
We do have a flat white version, currently in our footer.
First thing that I noticed too. It looks cheap
Wow. Everything is so large. http://take.ms/ypQck
In all honesty, with the large condensed type, huge buttons, social media everywhere, fixed sidebars and headers, it tells me and shows me that the content is not primary and there are major hierarchy issues here. Not to mention the design is just not my preference.
Seems like it was pushed early without a lot of core design thought. :(
Thanks for the feedback, Cody.
We dealt with some abnormal periods during this redesign process. Definitely a heavier lift than many of us expected.
I see your point that some aspects of the site seem to have been pushed too early. Unfortunately, you fall under time constraints and with this project we had to launch with some work-in-progress elements.
You commented about the the overall "large" feel of the site...would love to hear a few ideas you or anyone else may have for general design / layout / UX? Areas that you feel could be improved upon.
I don't know this publication (I have heard of it but not seen it before) and I very much doubt that I would be the target market but the representation of women seems really outdated - I guess that's the content which you probably have no control of?
You're correct. Our department does not have any control over the editorial content.
menu and homepage layouts seem a bit haphazard and lacking hierarchy. looks much better at tablet width than desktop. photo and video pages are brilliant. love the integration of related story cards in the articles, though not sure why hundreds of them are vomited onto the bottom of the page.
geogrotesque is a strange font choice. seems too "high tech" for sports media. also, the obligatory everything is illegible on windows :
Thanks for your feedback, Jim!
Is this what it's supposed to look like? http://f.cl.ly/items/0t20401E3n2j1b1t1o0Y/Ska%CC%88rmavbild%202014-06-24%20kl.%2015.55.06.png
No, that's actually the old site. Try refreshing / clearing your cache. It's slowly propagating...sorry for the hiccup.
That's what I saw at first too, and I thought I was being trolled.
Just a little FYI, the ads are still showing mockups. It seems as they are still in rotation, so you should probably remove them:)
https://www.dropbox.com/s/hqzc6woibwofv38/Screenshot%202014-06-24%2015.36.07.png
https://www.dropbox.com/s/quuukpvoszvh1dk/Screenshot%202014-06-24%2015.36.31.png
Thanks for the heads up, Anders. Appreciate it!
503 error...
Thanks for the heads up
I do not like it at all - way too busy - the old site was comfortable this is just too much glitz.
Article pages look great, and like the left side bar with all the stories as well as the infinite scroll in the article page.
The share buttons at the bottom of the article are enormous - a very brave decision and I applaud whoever had the balls to try this and to stick with it. I've not come across them in this size and I think they could be a winner.
The big X (close) icon on each article is odd - the articles don't behave like popups so this behaviour is unusual to the user. If you stack articles on top of each other I expect the X to go Back rather than Home.
When using the Hamburger menu it takes an age to load from Edge to Extra Mustard once clicked.
Overall I like it. The visual tile nature of it makes me want to explore.
Appreciate the comments, Thomas. Thanks!
First things first - I think this is already a massive upgrade from the previous. Ditching the old, gridiron-ie look is a great move.
I see the hierarchy issues, and I can't help but feel like this is the product of the hamburger menu and ad placement (I'm talking about Desktop solely here). When the generated placement ends up like this (http://imgur.com/2Z8udzL), the visual weight of the ads overpowers the content of the site.
To me, the size reduction of the header/menu bar caused by the hamburger menu is the culprit. If the header had a little more visual weight, it would become the focal point.
Also, I think the fact that the banner ad is wider than the content box gives the ad even more priority, causing more hierarchy issues. Bringing the ad width in line with the content may help. An equal margin for the top and bottom of the banner ad may also help - or at least a reversal, with more space at the top as opposed to the bottom.
I know it's always harsh to put this stuff out to the public, especially with such a large undertaking - this one had to be difficult to put together with so many pieces! Congrats on launching it. Hopefully my suggestions are helpful.
Todd, thanks so much for your feedback!
We have heard some concerns about the hierarchy and it's a completely valid point. Something for us to turn our attention to.
First, congrats as this must have been a beast.
Second, as I'm curious, what were the goals and what are you guys watching in terms of how people use the site with the redesign? What's a success, beyond getting rid of those lovely tabs and ribbons?
Ha! Couldn't agree more with the tabs and ribbons.
To the best of my knowledge, I'd say originally the 3 highest priorities were:
1) Placing focus on the content (stories, photos, videos, etc) 2) Establishing more cohesiveness across all our products (si.com, various blogs, etc) 3) A responsive build. A site with some flexibility to grow with the brand.
As for watching current users...I'd say my immediate focus turns to our new main nav and homepage layout. Since we're not surfacing those section links, does that present a challenge for our users? With the homepage, does the river tile format bring about confusion?
Really appreciate the comment, Rob!
Is the site still powered by CNN's content management system?
For our CMS, we're using drupal.
Getting a redirect loop error on Chrome and Safari.
Thanks for the heads up, Jorge. I'll pass this info off to our team.
Wow, this must have been a tough redesign. So much content! I can't say I love the look of the main page -- too busy for my tastes. I really like the simple design of the single article pages though. The transition from the main page to an article is cool too.
It was quite an undertaking. Much more than what was originally anticipated.
The homepage is a work in progress. We're still trying to flush out various layout options that would be available for our editorial staff. The goal being to help "clean up" the various section content on the homepage.
Thanks for your comment, Geoff!
I thought it would be fully responsive but resizing my browser shows otherwise and it doesn't get any smaller than around 1024 px.
Bringing it up on my phone, it does look to be responsive to that size. Wondering why it doesn't resize on my Chrome desktop browser.
Great point about desktop. We currently do not have any breakpoints set, after tablet size. Certainly something that could change in the future.
The aim for the site is to be responsive across all devices.
Appreciate the comment!
This is what I get when I test the site in WAVE: http://wave.webaim.org/report#/http://www.si.com/
Appears to be pulling our old site. Thanks for the heads up, Pauline.
Beautiful
looks very in Fi style. UPD: http://blog.f-i.com/fantasy-behind-the-new-si-com/
Looks like I should be looking at this on an iPad. Thats fine but I always feel the web should offer more than a mobile experience.
Right on. Thanks for the comment, Jordan!
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now