michael.cervieri.com » Design

And the Winner Is: Best Designed News Sites & Apps

Michael Cervieri — Mon, 03 Oct 2011 22:42:05 +0000

They don’t give us the criteria but the Society for News Design’s inaugural Best of Digital News Design competition announces the following five winners:

CNN: World’s Best-Designed News Web Site (CNN.com) and World’s Best Designed News App (CNN for iPad)
The Globe and Mail: World’s Best-Designed News Web site
The Guardian for iPhone: World’s Best-Design Mobile App
NPR for iPad: World’s Best-Designed News App

Back in March, the SND announced sixty other winners for individual project.

Originally posted at the Future Journalism Project.

The Continued Search for Pixel-Perfect Fluid Layouts

Michael Cervieri — Fri, 30 Sep 2011 18:38:53 +0000

Ever since content first appeared in a Web browser designers have sought pixel-perfect control over its layout. Basically, many strive for the detailed layouts they can achieve in print.

Adobe, with its print and Web legacies, is trying to accelerate that process by working with WebKit, an open source browser engine used by Safari, Chrome and countless others, and its community, and the W3C, the international Web standards body.

In particular, it’s promoting CSS Regions and CSS Exclusions.

Via ReadWriteWeb:

CSS Regions is a module that builds on the column-based layout options now available in CSS3 to enable front-end developers to flow text across different columns (or “regions”) on a page. This allows for more dynamic page designs, which can shapeshift to fit different devices and device orientations on-the-fly…

…Another improvement to CSS proposed by Adobe is called Exclusions, which lets developers flow text into a non-rectangluar shape, or to wrap it around graphics on the screen, much like what’s been possible in desktop publishing for decades.

Originally posted at the Future Journalism Project.

What Happens on the Backside of Your Favorite Web Sites?

Michael Cervieri — Thu, 18 Aug 2011 02:22:00 +0000

Luckily for us there’s a Tumblr for that. And while you might think it’s all a bunch of code the site illustrates otherwise.

Created by Jeff Lam and Josephine Yatar, we now see the secrets behind Twitter, Flickr, YouTube and others.

H/T: WebUrbanist.

Originally posted on the Future Journalism Project.

Re-imagining Food Labels

Michael Cervieri — Fri, 12 Aug 2011 23:15:59 +0000

Food labels are a tricky lot and often leave people confused.

When asked what’s wrong with them, Good Calories Bad Calories author Gary Taubes responds, “Many things. Short answer is it’s too small and too hard to read. Second, it focuses on the wrong information. The fat and sodium content of the foods are not nearly as important as the sugar and digestible carbohydrate content, at least by my research on the subject. So giving fat, total fat, sodium, etc., is misdirecting attention away from the factors that actually cause weight gain, metabolic syndrome, diabetes, heart disease, etc.”

What to do? Have a design challenge.

Which is exactly what the Berkley Journalism School did when it issued a call to designers to see who could best re-imagine how labels should be done.

Via Berkley:

Rethink the Food Label is a project by the UC Berkeley Graduate School of Journalism’s News21 program and Good Magazine. We asked the public, food thinkers, nutritionists, and designers to redesign the Nutrition Facts Label to make it easier to read and more useful to people who want to consume healthier, more nutritious and wholesome food.

Designs could incorporate the nutrition label’s existing break down of fats, sugars, vitamins, calorie counts and percent daily values. Or, they could re-imagine the label to include geography, food quality, food justice, carbon footprint, or lesser-known chemosensory characteristics.

Click through to meet the winners.

Originally posted on the Future Journalism Project.

The Evolution of Web Design

Michael Cervieri — Fri, 12 Aug 2011 19:54:00 +0000

The Evolution of Web Design is a great stroll down memory lane noting the text only pages created after Tim Berners Lee’s very first in 1991, the rise of Macromedia’s Flash in the late 90s, the emergence of JavaScript, CSS and Ajax in the early to mid naughts, and the rise of HTML5 and the mobile Web of today.

That’s a whole lot of ground to cover over twenty years. And to think that in another twenty today will seem as quaint to us then as 1991 hypertext seems to us now.

Check it.

Originally posted on the Future Journalism Project.

Suggestions on Design Resources

Michael Cervieri — Wed, 10 Aug 2011 20:06:00 +0000

Flowers & Freckles asked us if we have design resources we’d recommend. I brainfarted and hit publish by accident before entering the following but here it is:

Do we have design resources? Sure do, I can’t list them all and what follows is a little messy but it generally works for me.

I use Google Reader to organize my content sources and have general categories that I put RSS feeds into. For example, Media, Technology, Politics and Business. I also have a category called “Visuals”. This is a catch-all that includes everything from photo sites, to design tutorials, to data visualization to design theory.

A non-exhaustive but somewhat exhausting list of the 46 sites I monitor includes (alphabetically and not in order of preference):

That said, I don’t actually read content within Google Reader. Instead, I use Feedly which is a service that sucks in everything I have in Reader and lays it out like a magazine according to the categories I have.

I like this better than Google Reader because the Reader interface makes me feel like I have hundreds of unopened emails that I need to wade through. Feedly gives me more of a sense of browsing through what might be interesting.

Feedly doesn’t allow me to display the output publicly but Google does and you can see what type of design content I look at here. And if you you use a feed reader yourself, you can add this feed URL to it to suck in the firehose of that which I’ve set up.

Anyone have suggestions for design resources, be they tutorials, theory or just pretty things?

Originally posted on the Future Journalism Project.

Social Media Propaganda

Michael Cervieri — Sat, 06 Aug 2011 15:52:00 +0000

Social Media Propaganda Posters

Via Aaron Wood. Click through for more.

Originally posted on the Future Journalism Project.

Cover of the Day

Michael Cervieri — Thu, 04 Aug 2011 17:01:05 +0000

Cover of the Day via Society of Publication Designers.

National Journal. Damage Done: No matter how the debt-ceiling debacle turns out, confidence in our political and economic system is underater. The salvage operation won’t be easy.

Originally posted on the Future Journalism Project.

Visualizing Ireland

Michael Cervieri — Wed, 16 Mar 2011 18:21:22 +0000

Designer Paul May created “From Over Here”, a project that physically represents all stories in the New York Times from 1992 to 2010 that mention Ireland.

Via Paul’s blog:

Each card represents a month of articles about, or related to Ireland. The size of the card represents the numbers of articles from that month. The people and topics mentioned in the articles are etched on each card.

Flickr Set. H/T: Core77.

Originally posted on the Future Journalism Project.

Adobe Proposes Standards for a More Designy Web

Michael Cervieri — Fri, 11 Mar 2011 14:00:10 +0000

Adobe proposed new CSS standards to the World Wide Web Consortium, the international standards body for the Web, that would allow for more magazine-like layouts.

Called CSS Regions (PDF), the proposal is an attempt to break out of the typical grid layout that designers work within by creating a property called regions that aren’t constrained by geometry or position.

From the proposal:

CSS Multi-column Layout specification has pushed the limit of what is possible to achieve with CSS. However it still falls far short of the goal of representing typical magazine, newspaper, or textbook layouts in the digital space. This specification aims to close the remaining gap by giving content creators basic building blocks to express complex layouts. It does not aim to cover higher-level layout issues (e.g. allocating areas to fit all the content completely or placing areas on the page). These issues can be addressed by using either scripting or another CSS module.

The most obvious shortcoming of the CSS Multi-column layout is that columns are all of the same dimensions and placed next to each other. In more complex layouts, content can flow from one area of the page to next one without limitation of the area sizes and positions. For complex layouts, these areas need to be explicitly defined; in this specification they are called regions.

We noted the other day that Adobe released an FLV extraction tool called Wallaby that creates HTML, CSS and JavaScript versions of Flash animations, which is necessary for display on iOS devices such as the iPad and iPhone.

This proposal moves in the same direction by allowing designers to create complex layouts using Web standards instead of proprietary plugins and tools such as, say, Adobe’s Flash player.

Is the company cannibalizing itself then? Not really.

It’s still pushing forward with Flash Player 10.3 beta and last week previewed its 11.0 player. However, back in the print world it has InDesign and is pushing its adoption to create tablet ready apps. This was used, for example, to create digital magazines such as Wired and the New Yorker for the iPad.

If Adobe can get the proposed standards accepted, browsers will follow. And with that, they’ll have another tool at their disposal in their digital magazine publishing workflow.

Originally posted on the Future Journalism Project.