Megan Taylor

front-end dev, volunteacher, news & data junkie, bibliophile, Flyers fan, sci-fi geek and kitteh servant

Tag Archives: design

post

Visualizing the News

Article Skimmer

Article Skimmer

A while ago I wrote about the Article Skimmer interface that the New York Times had developed.


Times Wire

Times Wire

Those people just don’t quit – the Times Wire was recently launched to provide a constantly updating “river of news,” including pictures.


This comes in the wake of a few other news visualization updates:

Google News Timeline

Google News Timeline

Google’s News Timeline searches multiple data sources and places the results in chronological order, allowing the user to scroll, drag or click through the evolution of a topic.


Google News

Google News

Google News has also been redesigned, with more videos and photos on section pages and some clutter clean-up.


Old Newsmap

Old Newsmap

The Newsmap, by Marcos Weskamp, also received an update recently.


New in Newsmap, from the blog:

  • rectangularized treemap layout: To accommodate text properly, cells are as rectangular as possible, this there’s more room for headlines without chopping them off in several lines.
  • search as you type: try the new search on the top right, see how newsmap updates.
  • deep linking: you can now deep link to any state of the app. just try updating your view, and notice how the url changes. You can grab and share that url with anyone.
New Newsmap

New Newsmap

I really like these different ways of seeing news. They are each targeted toward a purpose: seeing the most recent news, seeing news from different sources or seeing news over time.

What other news visualizations are out there? Which do you prefer? Or, do you prefer to browse through news Web sites instead?

post

Visualizing State Taxes in Number of Days Worked

For the past month or so, I’ve been looking for data sets to play with. As a journalist, I really enjoy finding interesting ways to visualize data, and I needed some to play with.

I came across Visualize This: Days Spent Working to Pay Taxes, a challenge posted to Flowing Data:

About 28.2% of the average American’s income goes towards taxes, which means the first 103 days of the year is to pay for government. At the end of these 103 days – April 13 – is Tax Freedom Day. However, because of varying state-by-state tax burdens and average incomes, Tax Freedom Day varies by state. Alaska, for example, has the earliest Tax Freedom Day (March 23) because it has low state and local taxes while Connecticut is last on April 30, because of “extraordinarily high federal income taxes.” For this Visualize This we’re looking at the number of days each state spends paying taxes this year (2009).

FlowingData explores how designers, statisticians, and computer scientists are using data to understand ourselves better – mainly through data visualization. Money spent, reps at the gym, time you waste, and personal information you enter online are all forms of data. How can we understand these data flows? Data visualization lets non-experts make sense of it all.

So, I didn’t get mine done in time for the contest, and the results were posted today.

Edit: These two are my favorites:

Tax Freedom Day by State 1977-2009 from Alex Lundry on Vimeo.

Here is my belated attempt (click for larger view):days_to_pay_taxes

I wanted to do something with the state median incomes as well, but I’m having trouble getting the numbers to make sense.

post

More on packaged journalism

Thinking more about programming in journalism (not computer programming, the one we associate more with radio and television) I realized there are a few things news organizations are doing that are really similar to the concept of packaging news with an identity: blogs.

At most organizations, news blogs aren’t structured around an identity. Instead they are topical. Which could be better, in some ways, what I really hate about TV news is all the self-promoting, self-congratulatory anchors and show hosts. Sometimes, identity is a bad thing.

So I was poking around several news Web sites looking for good blogs, when I stumbled upon USA Today’s “communities.” The Community Center blog (keeping you apprised of conversations and opportunities on the site where readers are getting involved with USATODAY’s daily journalism) is a hub for the other blogs on the site, which look suspiciously like beatblogs to me.

Each blog has a designated author (or small group of authors) and appear to be updated several times a day.

But something bothers me. Which of these things is at all like the other?

    game-hunters-usatodaycom
  • technology-live-usatodaycom
  • cruise-log-usatodaycom

I really like the Interactivity blog – just wish it looked as nice as some of the others.

post

Learning Web Design: 6 Blogs, 3 Cheat Sheets and 1 Degree

Over the past few months, I’ve been picking up quite a bit of freelance work. Most of it has been on the technical side of building Web sites. For the most part, I’ve been working with WordPress, so I can send a client a list of appropriate themes and let them decide.

In the scenario that I’m not using an easily theme-able framework, I’m stuck.

So, I’ve been spending some more time looking at design elements on various blogs, how colors and typography and borders are used to make even a simple layout look amazing. I’ve also been collecting resources to keep in mind when working on Web sites.

Six Blogs

  1. Authentic Boredom: Cameron Moll’s design blog.

  2. 24 Ways: 24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

  3. Designm.ag: DesignM.ag is a new site that is aimed at providing a wide variety of resources for web designers and developers. The purpose of the site is to keep many useful elements, such as a blog, community news, design gallery, and job board all at one place.

  4. i love typography: iLT is designed to inspire its readers, to make people more aware of the typography that’s around them. We really cannot escape type; it’s everywhere: on road signs, shampoo bottles, toothpaste, and even on billboard posters, in books and magazines, online … the list is endless, and the possibilities equally so.

  5. Jason Santa Maria: This site represents an experiment in art direction online. Rather than allowing the content to flow from a content management system into the same page layout every time, I’ve created a system for fast design direction based on the needs of the content.

  6. Mark Boulton: This is primarily designed to be a portfolio presence for Mark but it also acts as a notebook, journal, experimental space and general dumping ground for designs, commentary and ideas.

Three Cheat Sheets

  1. How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds:It’s pretty amazing how much color and background can change the look and feel of a website. In this tutorial we’re going to put together a quick, simple but effective layout and then create variations using backgrounds, photos and patterns. We’ll also look at how to make seamless tiled backgrounds out of a photo, methods for ending a single photo and simple ways to create pixel patterns. In short it’s a jam packed tutorial!

  2. 8 Simple Ways to Improve Typography In Your Designs:Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.

  3. 10 Simple and Impressive Design Techniques: Simple effects and techniques are the building blocks of today’s designs. With a “less is more” mentality, we’ve selected 10 very simple and impressive design techniques that can drastically improve the performance and appearance of your designs.

One Web Design Degree

  1. The Personal Web Design Degree: The personal web design degree is the response of one designer to the question “What do I need to study to become a web designer?” The truth is that all the information needed to obtain a functional knowledge of web design is out there just waiting to be read. The only thing stopping most designers from doing so is sifting through all the information and knowing what is worth reading.

What are your favorite design resources? Where do you get inspiration?

post

Journalism That Matters

Poynter is hosting another conference in St. Petersburg, Fla.

Journalism That Matters: Adapting Journalism to the New News Ecology

The conference will take place March 1 – 4, 2009.

The New News Ecology means new jobs, new tools, new relationships, new
businesses.

But journalism’s very survival — at least its values and functions — depends
on the ability of news organizations — and citizens — to adapt to a
dramatically evolving landscape.

Where, now, does the news industry end, and begin? As some newsrooms shrink and
morph, what — and where — are the new roles for journalists — and journalism —
in a broader civic sphere? How do we match journalism with the work of
non-profit organizations, government, civic and even advocacy groups . . .
without abandoning its core values and functions to democracy? Is it time for a
national journalism service corp?

Links:
Media Giraffe Project – Newsecology
Register
Slideshow

I really miss going to conferences. Hopefully soon I’ll be able to afford them again.

post

The Bush-Cheney Legacy

A few days ago the Washington Post put together a section looking back on George W. Bush’s presidency.

It’s a bit soon, but given the zeitgeist, totally understandable. Hopefully as time goes by we’ll get more analysis of what the effects of the past 8 years really are.

The section puts me in mind of Jeff Jarvis’ “Topic Theory.” Whether we can call topics the “building block of journalism,” topic pages are an important way for users to keep track of a paper’s coverage, catch up on unfamiliar stories and gather context on an issue.

The Post’s Legacy page includes “video interviews with Pulitzer Prize-winning investigative reporters Bob Woodward and Barton Gellman, a timetable of significant news events and policy decisions, and opportunities for users to submit their own views.” (from the press release I forgot I had received) There are also graphs, articles, and photo galleries.

I have a complaint, though: clutter. There is so much stuffed into this one page, with no clear hierarchy. It’s just a bunch of stuff on a page, when it could have been designed to lead a reader through the events of the presidency.

post

News Web site user interfaces

Patrick Thornton wrote about user interfaces today, and how news Web sites are so loath to move away from an interface that mimicks the print product.

The last time I visited a news Web site, I was an employee of the paper working on code changes. I’m not counting clicking through to articles, but deliberately going to the home page of a site.

So Where Do I Get News?

I get my news from a couple of sources:

  • Google Reader, where I’m subscribed to over 400 blogs and news sites (including a personalized version of Google News), in addition to recieving shared content from all my friends
  • Twitter, where I follow over 400 users, mostly journalists
  • The AP Mobile News application on my phone. Great for the long commute to work.

Why Don’t I Go To News Sites?

Because they don’t give me what I want. Because I prefer serendipity.

I’m interested in a lot of things and a lot of places and a lot of people. There isn’t one place where I can get all the information I want. And I’m busy, I don’t have time to spend all day bouncing from site to site, hoping someone wrote or produced something I care about.

The other reason is this: A lot of people complain about the Internet being an echo chamber. To some degree, this sucks. I have to scroll through a bunch of work that is the same concept iterated over and over.

But, since I don’t visit news sites, I also don’t see the hierarchy that editors and readers have placed on certain stories. The echo chamber mitigates this problem for me, because I can gurantee that if something is important (or even important only to a certain group of people…people I chose to follow because I care about what’s important to them…) I’ll see it at least 5 times in Google Reader and another 20 on Twitter.

Is a different UI (user interface) really going to change my behavior? I’ll still have to visit multiple sites. The river of news (a la Facebook or Twitter) can get really annoying when I’m looking for something specific. For me, that only works seredipitously. And those cool mapping UI are just cluttery and hard to focus on. To be honest, if I’m looking for articles on a specific topic, I’ll just do a Google search.

Thornton is right, though: news Web sites need to stop emulating print. But they need to do it in a way that actually helps the users. We’ve learned certain behaviors when looking for content online. There are rules that we expect Web sites to follow, and when those are bent too much, we get frustrated. Not good for news sites.

So the question is, without breaking basic UI rules or being gimmicky, how should news sites be designed differently?

Edit: Check out the comments for a discussion between Aron Pilhofer and myself about user interface vs. user interaction.

post

NOT Another Resolution: Learn Design

I deliberately left something out of my resolutions post last week.

I left out my recent efforts to defeat my greatest weakness: Design.

Forget about when I started building Web sites (age 11), my relationship with design didn’t start until I got into online journalism.

And I learned that I couldn’t design my way out of a keg. ::shudder::

For a while I thought I could get away without being able to design visual elements. I could shoot photos and video, I could program in Flash and code a site from a .pdf. After all, there’s a reason for having designers, right?

I was wrong. I learned that sometimes, there just isn’t enough designer to go around, and you have to be able to make your own decisions. Things move faster and more smoothly if I don’t have to go ask the designer about an element.

Also, there are design elements to everything else I do online, from customizing a Twitter page to visualizing data. I was going to have to learn.

But how do you learn design?

I didn’t take a class, or sign up for a workshop. I just started reading design blogs. Following designers on Twitter. Paying attention to what I liked about certain Web sites and what made them ugly.

And I’ve made progress. I’m not good at details, but I can spec an overall design that doesn’t make people wish for blindness. I’d say I’ve reached paper bag status (as in can design my way out of), but anything more is beyond me.

I want to get better, because I hate not being able to do things. And because Web deisgn is important. I know I’ll never be a designer, but it would be nice to have a touch of the craft.

So if you’ve got resources, blogs, Web sites, or people that I should be paying attention to, please let me know in the comments.

Edit: I decided to add in a list of what I’m reading.

post

Washington Post: TimeSpace

Awhile ago I realized that somehow I ended up on the Washington Post’s press release e-mail list. I’m not complaining, it’s a good way for me to find out about what they’re doing.

Today, the World section launched an app has has been around for a bit (I think they had a elections version) in beta. It’s called TimeSpace: World.

It’s pretty freakin’ cool, although sadly loading page page also loads a ginormous ad above the application. This is not quite what people mean when they talk about making web apps pay.

From the e-mail I got:

Using innovative technology, TimeSpace: World compiles all world news content from The Washington Post, washingtonpost.com, PostGlobal, Foreign Policy magazine, and partner sites including The Associated Press and Reuters onto one, customizable map.

Here’s how it works: coverage is collected into clusters around hot-spots on an interactive map. By clicking a cluster, users can view articles, blog posts, photos, videos, and even reporter twitter feeds (without leaving the page). A timeline below the map illustrates peaks in coverage and allows users to customize news searches to a specific day or hour.

They also made a widget for the app, and individual items have unique URLs for easy sharing. The content includes articles, blogs, photos and video.

I really like the idea, though unless you’re looking for something specific, it can get overwhelming to look at. The map is designed really well, with a neat sliding timeline function that also shows how much content there is for a specific time. Looks like there are some tracking possibilities here.