GalleyCat FishbowlNY FishbowlDC UnBeige MediaJobsDaily SocialTimes AllFacebook AllTwitter LostRemote TVNewser TVSpy AgencySpy PRNewser

Posts Tagged ‘web design’

News of the World and Twitter, as an infographic

As part of its ongoing coverage of the News of the World scandal involving cell phone hacking, The Guardian has produced a nifty interactive infographic that marries the reaction on Twitter to the story’s development over time.

Much like The New York Times here in the the U.S., the Guardian in the U.K. often makes use of infographics to tell stories, and give added dimensions to stories in other formats.

Read more

California Watch Enhances Reader Engagement With Redesign

California Watch, a reporting initiative launched by the Center for Investigative Reporting in 2009, officially unveiled its redesigned site today and to say it emphasizes reader engagement is an understatement. With a bevy of new features, such as an easier commenting system and adding Tweets automatically to the comment stream, you have to go out of your way to avoid interacting with the site.

“We really wanted to upgrade the viewer experience and our readers’ ability to interact with us,” said Mark Katches, editorial director for the Center for Investigative Reporting and California Watch.

But my favorite part of the redesign is the “React & Act” section. Much like a calendar section, this lists where and how readers can interact with the reporters who make up California Watch. For example, the site lists when reporter Joanna Lin will be participating in an Asian American Journalists Association workshop.

This takes down the invisible wall that can sometimes exist between journalists and their audience members. Remember, reporters are just people. It’s easy to forget this if you only read, in print or online, what someone writes — their byline is faceless. At the end of the day, reporters should want to hear from their readers — whether it be in person, via email, or by a phone call.

What other sites do you go to that encourage reader engagement?

Tools of the day: Markup.io and Connect a Sketch

As someone who has worked in product management, I’m always on the prowl for any tools that can make the process of planning a web project easier.  These two tools for quick feedback and quick prototyping do just that.

Markup.io

Need to make a quick comment about the design of something on your website to pass along to the rest of the team? Whether you’re a QA tester, designer, developer, or web producer Markup.io makes collaborative commenting on websites simple as ever.

Unlinke other desktop screen captruing apps, which require you to download and be running software, Markup.io is a browser bookmark that you simply click to activate. In the top right-hand side of your browser, you’ll get a markup menu with options for pen sizes, colors, and text. Then you can start scribbling away over the top of any website.

The most useful part of this tool — that sets it apart from services like Jing and Skitch — is that you users can collaboratively mark over each other’s work for contextual commenting. It also saves a cached HTML version of the site you marked up so that when the page changes later, your markup will still be relevant (see this mock example I created). The downside from the desktop-based services, however, is that you can only use Markup.io on the web and that it doesn’t record audio or screencapture video. But who knows — it’s still in beta.

Connect a Sketch

Putting into practice Matt Waite’s now-infamous “Demos not memos” mantra, comes a tool called Connect a Sketch. If you have a set of hand-drawn sketches or quick wireframes that you want to prototype, Connect a Sketch is the tool for you. Instead of having to convey the functionality of your proposed web-app or site, you can simply plug the pieces into Connect and Sketch. Their site says it best:

Connect-a-Sketch takes your sketches and wireframes and turns them into functional prototypes. Upload your sketches/wireframes, drag and drop them into your prototype, create interactive states and connections between your pages, then test and share.

Created by the team at Viget, the in-browser app is clean with an intuitive drag n’ drop interface. You start by uploading all your sketches, then linking parts of your sketches to each other to mimic interactivity. It’s a quick way to test ideas before having to code a full prototype.

Five free tools for finding design inspiration

Whether you’re working on a personal project or a package for your news organization, there will be times when you simply hit a wall and have a hard time moving forward design-wise. It happens to the best of us. When those moments inevitably occur, these are the websites I visit for finding inspiration in color schemes, design layouts, logos, CSS structure, and typography.

Design samples

Web Creme

Web Creme is a regularly-updated gallery of websites with rockin’ designs. There are hundreds of designs to peruse if you’re looking for inspiration in general site design, creative navigation or use of imagery and graphics. It’s also a one-stop shop for simultaneously finding color and typography inspiration. There’s nothing wrong with finding bits and pieces you like from each site and putting it together to make your own masterpiece with your own twist. Stand on the shoulders of giants, right?

Color schemes

If you’re looking for an individual color, a full palette or patterns, ColourLovers is the community to visit. With more than a million schemes to choose from, you can browse through categories like weddings, home, fashion or business. If you have an eye for colors, you can make an account and upload your own for the world to use. The ColourLovers blog features some of the best colors and patterns from the community.

Other great places to go for finding colors are Adobe’s Kuler which you can sync with your Photoshop preferences if you have CS4 or higher,  and Color Scheme Generator if you already have a good idea of the base colors you want to use.

Identity inspiration

Logo Pond

For me, the biggest roadblocks come when creating a logo for a website or a graphic, but we can’t skip out on these elements. They’re important for visual engagement. LogoPond has great identity inspiration from very talented designers who upload their comps to the site to be rated.

CSS Frameworks

HTML5 Boilerplate is a well-document framework for getting started with HTML5.  From Github, you can download a .zip file that includes images, CSS, javascript and all the other necessary files to get the site up and running. And if you have any questions, mosey on over to the documentation or forums to search for answers or ask.

If all you’re looking for is a basic CSS framework, the 1140-pixel grid system and 960-pixel grid system are excellent starting points. These layouts are based on percentage-width columns so that you don’t have to worry about applying classes and pixel widths to divs when creating a site. All you have to focus on is the content within and which column widths you want to use — and where.

Typography

Google Webfonts

Google has a nifty font API that allows you to use pretty fonts on your site without needing to purchase a license, replace fonts with images, or do any other annoying technique.  The API is limited to fonts within Google’s own directory, but the selection isn’t terrible, especially considering that it’s free.

Using the open-source API (a collaboration with TypeKit) is simple. Just define the replacement fonts in a stylesheet and use the WebFont Loader to call the Google API and ta-da — you’re on the path to overcoming your design roadblock and making your site a little prettier.

Four major sins of news design

by Lauren M. Rabaino

Let’s be honest: In general, news site design isn’t pretty. I know I’m not the first or last to say it, but I do have a theory about why. It starts off innocently enough — an article, navigation, some ads. But as new tools, gadgets, buttons, widgets, extensions and plugins are introduced to the news consumption scene, that once simple design becomes cluttered with bells and whistles that hold the content hostage.

The plague of news design is upon us and although the average news organization has dozens of corporate hoops to jump before being able to implement a full design overall, these are four simple starting points.

Sin No. 1: The swamp of “share” buttons.

Like this on Facebook. Tweet it. Stumble it. Digg it. Bookmark it to Delicious. Who can blame a news org? Although those options should be easily accessible, they shouldn’t detract from what’s important: the content. We want our content to be shareable across multiple platforms. But there’s a nice way to do it. Take a look at this article page from my local TV news station:

There has to be a better way. Share icons should be integrated into the design of the site as a native functionality, rather than as buttons plopped into a template.

LA Times’ Hero Complex blog takes an interesting (but imperfect) approach at integrating social media icons, although the use of Comic Sans is highly unfavorable. My favorite integration is The New York Times, which presents the icons very subtle and unobtrusively:

Sin No. 2: Layers and layers of navigation

You have the typical print sections (news, arts, sports, etc). Then you have the money-making sections: jobs, real estate, classifieds, cars. Then you have the subscription options: sign in, subscribe, register, Facebook connect. Not to mention the ever-growing trend of displaying hot or trending topics beneath the nav and subnav (see the LA Times or Washington Post). When did navigating a news site get so complicated and how can we tone it down?

Let’s take a lesson from one of my favorite news navigation designs, the Spokesman Review. Instead of forcing the user to navigate based on a print-centric system of topics, the user can navigate in a way more usable to the web: by time, location, or media type.

Another idea for simplifying news navigation can be stolen from Recovery.gov, which has a “looking for?” button that allows users to choose either who they are or the type of information they are seeking.

If we were to use this in new design, the “Who are you?” could be broken down by profession:

  • Working Professional
  • Student – College
  • Student K-12
  • Parent
  • Retired

Choosing one of the options would filter the news down to what’s relevant to that particular age group.

You could also do the “What are you looking for?” concept, which for news could be something like:

  • Events
  • Data
  • An overview of today’s news
  • Editors’ picks
  • Set your own topic filters (which would allow for customizability).

Sin No. 3: Cluttered sidebars, embedded divs

I don’t want my reading experience to be disrupted by boxes of related stories, forcing my content into a little sliver of a column. And I’m not alone. This reason is why people use Instapaper and RSS to read the news. Extra context is good (related stories), but not when it makes for a disjointed reading experience.

This is where news sites can learn from blogs. For example, I stumbled upon this post the other day (which is a good read for anyone in the business of agile development), and was in awe at how clean and readable the content was:

Imagine if this design was applied to a news-intensive website (of course, a news site is inundated with ads, but as design gets cleaner and more usable, perhaps ad quantity and pricing can be rethought too):

Sin No. 4: Avalanche of links on the homepage

Every single new article on a news site doesn’t need to appear on a homepage. Every section and microsite doesn’t need to have a subhead seven scrolls down the page.

The fix? Put less stuff on your homepage. Simple enough, but also easier said than done.

A quote from a former colleague and recently hired Washington Post content producer Greg Linch comes to mind: “Context isn’t just about providing information, it’s about how you present it.”
I like Greg’s point. Throwing a bunch of facts together into a story with no organization and no clear path to understanding would be poor journalistic practice; news design functions in the same way. It should provide a clear path to understandability by being digestible.

Will Davis, web editor of the Bangor Daily News, elaborated in a separate conversation by explaining the purpose of homepage design: “Really what you need is to make it easy for people to make decisions: What is the story I need to know right now? Don’t show me a story that’s five hours old if it hasn’t changed and I’ve already read it, or if I’ve visited the site five times since it’s been up and I haven’t clicked on it.”

In my mind, what Will describes would look something like a mesh between Twitter’s “unread” count and Gmail’s ability to “mark this as read” after you’ve either clicked an email or chosen not to read it.

If you have a favorite site or fresh idea for news, please share in the comments.

<< PREVIOUS PAGE