A guest Kotaku post by Naughty Dog’s Alexandria Neonakis on UI design within one of the most critically acclaimed games from 2013. I love seeing how the interface changed over time. It’s an especially cool look considering how rarely we get behind-the-scenes access to AAA game design.
88 different typefaces are mentioned on this informative Typewolf post; Avenir, Brandon Grotesque and Adelle lead the pack.
Designer and speaker Elliot Jay Stocks:
If you’ve identified the website described here, I’m afraid there are no prizes, because there’s no correct answer. It is, in fact, a number of websites. A very large number. And if a new product website launches tomorrow, chances are it will fit that description, too.
The web right now is a beautiful place. Web design has matured as an industry and the technology now enables us to create whatever we might dream of in HTML, CSS and JavaScript. But it’s clear that laziness amongst designers has never been more rife.
Fascinating rebuttal to my linked post from designer Mills Baker yesterday, this time from Goran Peuc:
He exposed a good question and a good topic, but exposed it from the wrong angle and with the wrong starting thought, wrong premise to the whole thing.
A premise that designers had a seat at the table to begin with.
Spoiler alert: they didn’t.
Designer Mills Baker:
But for the design community, the issue is larger than anyone’s feelings, or even the success or failure of these apps. I worry about the reckoning to come when Square sells to Apple for less than its investors had hoped, or when Medium shuts down or gets acquired (or pivots to provide something other than an attractive, New Yorker-themed CMS for writers, the poorest people in the first world)…
In order to avoid losing its place atop organizations, design must deliver results. Designers must also accept that if they don’t, they’re not actually designing well.
This typography learning resource has gotten a lot of buzz online and I can see why. Typekit is a well respected source of custom web fonts, and the backing of Adobe – with its many font foundries – doesn’t hurt either. You’ll find a few quick lessons, links to many external posts along with recommended book selections.
The New York Times recently launched their first major redesign in eight years. That’s an eternity on the web, so it’s impressive to see the NYT largely catch up with modern web design and development principles so well. New pages have a responsive design framework to work well across smartphones, tablets and laptops. Articles embrace a “content first” design with less distractions from the main text. And management got the message that good performance is good design with average page weights dropping and faster speeds across the board.
Trends and tech standards aside, even casual readers will find the new NYT article layout a redesign highlight. Content is all on a single page with endless scrolling for navigation. It makes reading easier and is a clear nod to the fluid designs of native mobile design. The improvement is especially noticeable on long form articles; my reading flow was frequently interrupted with content previously broken into many pages my reading flow was frequently interrupted.
Article design is clean and sparse, especially as you move further down the page. Often it’s borderline minimal with little more onscreen than the article text itself and a top aligned navigation bar. Even other suggested articles don’t appear until you reach the article’s bottom. Attention stays refreshingly on the article text. This makes for a more pleasurable reading experience than what I find on most news sites. Also article images and videos are expandable into large, full screen lightboxes. It’s a cool addition given our much higher expectations for web media since the last NYT refresh.
The NYT’s modern design sensibility extends to article comments as well. Instead of adding a chronological thread of commentary below article content, comments are hidden by default and optionally brought in alongside the article (It’s akin to more experimental designs over at Medium and Gawker Media.) The use of real estate makes it easy to refer back to article passages as you’re scanning reader feedback. To help sort through what’s important, comments can be organized chronologically, by reader votes and by direct editor picks. Overall the comments design is such an improvement that I’m reading them regularly; I rarely did with the previous design.
Most NYT pages are now also responsive with navigation and content optimized for the display you’re on. For the first time I’m able to browse through much of the site on an iPad or iPhone (which occurs frequently when I dive into NYT links on Twitter and RSS) without feeling hampered. Interestingly, the NYT developers didn’t use a traditional responsive method where CSS media queries make alterations on the fly to page markup. Instead there’s an upfront check for the general boundaries of your device at which point custom CSS and HTML are generated dynamically. It’s unorthodox, but the NYT has an very diverse audience to support. An out of the box solution is justified.
The much touted new universal navigation works as promised. It makes it easier to jump from one paper section to another without having to scroll significantly or bounce back to the home page. It’s a logical extension of the “content first” approach to the NYT’s article design: stay out of the way yet remain readily accessible.
On the other hand, the more time I spend with the NYT redesign away from viewing and reading the articles, the more I see missed opportunities for change. Foremost is the home page, whose design still feels, like many newspapers online, muddled. There’s just too many levels of hierarchy that blend together. Take the two leftmost columns: there’s a narrower column with larger, italicized headlines and then a wider column to its immediate right with smaller headlines. Given the styling change I expected two different sets of content from different newspaper sections. I was wrong. Stories “wrap” from the first to second column according to chronology and editor preference.
The “Inside Nytimes.com” section further down are smartly curated deep dives that don’t fall under traditional breaking news. Unfortunately, the horizontal carousel navigation is slow, dated, and there should be more articles to choose from. Moving further down you get the common top set of stories from each section of the paper (e.g. World, Business Day, Opinion). It’s well placed in relation to the top stories above but the area needs more white space and a larger font size to improve legibility.
There’s also inconsistent, puzzling navigational choices throughout the site. The smaller “micro sites” like Dealbook, the Bits blog, and the Opinion section often differ the order and placement of the main links (sections, home, search) at top. Moving down into article content also changes the top nav bar actions: options and user account settings links disappear, replaced by share and comments icons. In reality, at least the share and comments icons – the most relevant actions within an article – should be accessible regardless of my location on the page. The NYT instead pushes these actions out of the way in favor of home delivery links and a corner ad. Yet there should be a way to keep both the ad and delivery push alongside comment and share options without the space feeling cramped. It’s annoying to scroll down into an article just to share easily or see if there are any comments.
Likewise, while the new nav bar with a list of related articles at article top is useful, it needs some behavior adjustments. It appears inconsistently: it’s natural for it to appear when you’re at the top of an article, but odd that only a quick scroll up makes it appear otherwise. To mirror native mobile experiences, any scroll up should make the article nav bar appear. Alternatively the NYT should remove the “scroll to appear” behavior outright. There’s a few animation and spacing problems with the nav bar as well. The animation that slides individual articles in from right to left can distract from article text; I’d prefer something subtler. Also the global side navigation is hard to navigate with touch. Slightly larger hit targets on the styling for narrower width devices would solve this.
All in all, the good news about the NYT design deficiencies is that they’re correctable, unlike some of the more fundamental problems I see with the web editions of papers elsewhere. When looking at the news competition (e.g. Washington Post, USA Today) I’m reminded of the widening web design and development gap between younger, online only journalistic companies and their older counterparts rooted in print. Compare Pitchfork to Rolling Stone, The Verge to Wired and Gawker to People. Post redesign, the NYT is a rare exception to that gap.
Nice walk through a series of bite sized tutorials, by designer Kevin Hon Chi Hang. I still find myself mostly wedded to Photoshop comps for my development workflow, but I’d like to learn more about Sketch for side projects; this looks like a good place to start.
A lot of design and development insights in this Gigaom post by Janko Roettgers. Fascinating to see the Netflix team debate image weight so heavily:
However, the team ran into a significant issue when it began to build out the final UI for consumers in the third quarter of 2013, just months before it was scheduled to launch. It discovered that lower-end Blu-ray players and streaming boxes couldn’t handle WebP decoding on the fly, or at least not as smoothly as Netflix would like them to. That’s why the team decided to still serve JPEGs to cheap consumer electronics devices by default, but send WebP images to game consoles and other more powerful machines…
…The goal was to find that sweet spot where images look great but still load quickly, and transitions are smooth — something Netflix internally calls a “recipe” for image encoding. It was a time of constant fine-tuning, a time when even something as minuscule as a 150ms delay during an image transition warranted further tweaks. “You will feel that,” insisted McCarthy.
Chasing down page weight and experimenting with multiple platforms? There’s a lot in common here with web development workflows.
This typographic blog post has already been passed around tech and design circles, but it’s absolutely worth a look if you haven’t seen it. The subject matter is 2009’s Moon and it’s cool to see a lot of futuristic fonts in discussion. You’ll probably learn something about Eurostyle; I had no idea there were variants (like Microstyle) that deviated slightly from the original typeface.