The Vogue Redesign (by Code and Theory) has a number of lovely new functionalities (I came across this bit of news in PSFK that references the original Times article). The design/layout/UI challenges of creating readable image-rich online Magazines are numerous. Vogue’s redesign provides some interesting responses to these challenges, but naturally can’t address everything. Here’s a quick rundown of some features I appreciated.
1. Large Feature-Preview Window
The first bold element here is that it pushes the top-nav down significantly. This thing is huge – quite a statement for those with larger resolutions / smaller monitors. The Vogue audience must be viewing their site from fairly large gorgeous monitors (like mine!). Obviously attractive real-estate for an ad-buy.
2. Previous/Next Buttons
They live at the top of the page – and include the Title of the prev/next article. Handy and easy to use.
3. Posting Guidelines
Publishers (and Brands) are naturally very sensitive to open-ended, free-form, un-moderated discussion threads. I’m interested in the 3 issues that Vogue chose to highlight:
- Don't promote yourself here
- Play Nice
- Don't try to break it
I did not test whether an attempt to Post would go Live immediately or I’d have to wait for it to be moderated ...
4. Full Justification
Full-Justified copy is hard to read. Looks pretty (theoretically) but doesn’t inspire me to dive in. I haven’t even skimmed the article below and nor am I planning to.
5. "Most Popular" Widget
This reminds me of the “Inside New York Times” Widget – a nifty way to illustrate articles deeper in the site. It’s placed above a “massive footer,” a trend that I also like. Vogue's version of this widget takes a slightly different spin than the Times’ by displaying Likes, Comments, and Tweets (all of which are all interestingly low – we’ll see how/whether they change over time).
This is what the NYTimes' version looks like (designed by Razorfish):
6. Subsection Preview
Within the “Fashion” section there’s a little “preview” functionality. When selecting the subsection titled “The Verdict is in,” for example, it brings up a row of product rather than taking you directly to that section. This drives user directly to the content rather than to "Landing Pages."
Here, I clicked on “Model Wall,”
7. Massive Footer
Footer-navs used to only include a line of useful yet un-thrilling links, and this footer still has them (Contact, Updates, Press, etc). However there’s a trend toward making footers Massive (see Zappos and the Times), and having them do a lot more for the brand (there's also an SEO rationale behind massive footers).
Social Media links, International links, and E-Mail/Newsletter Registration are commonly placed in footers now (I happen to like when customer-acquisition startegies are paired with nice offers - ie., "let me know why I should subscribe to your newsletter - don't just expect me to give you my email address!").
On the Vogue site the user also is displayed additional content. Not sure how much I dig that – my first thought is “if you didn’t feature this content above, then it’s not what you want to serve to me first, so I’m not interested.”
8. New Ad-Banner Placements
One of the central features of Vogues redesign, according to the Times Article, is that it will give advertisers the ability to own 100% share-of-voice on featured content. I did not see examples of this (maybe I didn't look hard enough or maybe no sponsors have bought-in yet) – but I did see that Gucci bought (point-roll) ad banners above all the Collections pages. I’m sure brands won't be all that psyched that the ad precedes the user’s experience of their Collection. But then again that very fact makes it a valuable ad-unit.
9. Look-View (aka “Slideshow”)
The size of each individual Look is impressive. The image scales if you drag-open your browser window, so it becomes dithered at this size, which is in turn less than impressive. I imagine that Vogue will accept larger-res images go-forward, which will be a treat to see at this size on a good monitor. (I included my browser in the screenshot to illustrate scale)
10. Adding an Image to Lightbox
This is the modal for adding an image to a lightbox. The "Save" button you see here is actually for making a NEW lightbox. So normally you select the name of your existing lightbox and then just close the modal. I would recommend flipping these two functionalities, and having a clear and consistent “Save” button for both actions.
11. Look-View in Lightbox
The Looks in Lighbox are very large as well. The description of the Season and Designer don’t follow (“Image for season 10225 & designer 18029”) but I’m sure it’s something they aim to fix. “Look #” should also be included here.
12. Video presentation
Before I clicked on “Videos” I thought for a second about what I expected to see. This is good practice in doing even a cursory audit of a site. I expected a grid of videos, perhaps divided by themes or categories. Instead I was greeted with one large video – and I liked that. "Don’t make me select again – show me your most recent video." For the casual browser (which is most of us), the most recent video is also the most relevant video.
Immediately beneath the video is the full catalogue. There is no filter other than All Videos or Vogue Diary, and again, I find that sufficient. Perhaps a serious fashion-video-phile will want greater sorting/filtering functionality.
That's a pretty swift cursory overview. Congrats to the Code and Theory team. I intentionally did not read the Times article before diving in and experiencing the site - but now I will.