Sample uses of WordPress’s Twenty Ten theme

I love Twenty Ten. (Really, it’s what I was thankful for this Thanksgiving). The theme’s structure, typography and general functionality make my mouth water. It’s more than “just another WordPress theme.” The best part: It’s so damn versatile. With just the addition of a file or two (a stylesheet and sometimes a loop-index.php), the theme can be transformed into a whole other animal. Here are some of the ways I’ve tweaked Twenty Ten for freelance projects and for friends/family to quickly make WordPress sites that are compatible with all of WordPress’s awesome features. Continue reading

Spot.us 3.0: Redesign is out in the wild

Last month I promised that the Spot.us redesign would rock your world. Feeling rocked yet? We soft launched the new design and have been QA testing this week. Now we’re proud to announce it to the world.

As always, the redesign is a continual work in progress.  We have chugged away at it for a full month, but know there’s still much to be done.

Mine and David Cohn's sketches for the contributors page after our first meeting in early January at the SF Public Press offices.

You’ll notice the header and footer have been significantly cleaned up. We ditched the old, typewriter keys logo for a simpler, cleaner one. The big buttons from the header are replaced with clear, bold text links.

The pitch pages — at the heart of our redesign– are much more usable now. Instead of having trailing sidebars cluttered with links and widgets and sharing options, you have only the important stuff: Donors, amount raised, and buttons for funding or earning credits. The progress bar, unlike the old dinky one, is strong, prominent and awesome. There are tabs at the top right of every pitch that let you navigate through details, discussion, updates and other elements related to each pitch. Continue reading

Spot.us redesign is going to rock your world

It’s been a year since we launched v 2.0 of Spot.us. Now, a year, later, here I am working with David Cohn and Erik Sundelof on a whole new and improved design. And it’s going blow your mind (but maybe I’m a little biased).

As time has gone on with Spot.us and new features have been added, the pages have become a bit cluttered. We’re redoing the header, pitch page, and browse pages with the goals of:

  1. Condensing redundant views
  2. Simplifying content display
  3. Creating more consistency

For example, take a look at the current pitch page vs. the soon-to-be pitch page:

 

Also, see the detailed view below of the old vs. new community page, which will now be integrated into the browse pages:

David released the mockups to the public yesterday for you to provide us feedback. See the whole set on Flickr and leave feedback there.

Design trends in the Google Chrome app store

My latest 10,000 Words post outlines the latest news design trends in the Google Chrome app store, many of which I believe could be pointing at a future of news design.

Notably, I point to:

  • Grid layouts
  • Keyboard shortcuts
  • Full screen glory
  • Multi-column text display
  • Multi-paneled layouts
  • Big, beautiful video and imagery
  • In-browser notifications
  • Offline reading
  • Customizability Continue reading

Shout out of the night: Nacin

This afternoon I did a terrible, terrible thing. I upgraded to WordPress 3.0.2 without backing up anything. There were two key things I did not realize. Which totally screwed me over:

  1. When editing your child themes in wp-admin (not via FTP, not locally), the directory on the right also lists files from the parent theme. When you edit those files (even if the child theme is selected in the dropdown), you’re really editing the parent theme files.
  2. When you upgrade to 3.0.2, the Twenty Ten theme reverts back to default settings.

What does this mean? I edited files from the parent theme, then deleted those changes when I upgraded. And because this was a project for work (not just leisurely fun), I panicked. Continue reading

I may have found my calling (someday)

Today while browsing GOOD Magazine, my attention was immediately captured by an ad for the Maryland Institute College of Art:

Yes, that’s right. A Master’s in Social Design program.

This is the first time a master’s program has intrigued me to the point of actually considering going back to grad school someday. The premise is exactly what I seek to achieve through entrepreneurship (social good), but with a focus on my other passion– design. Continue reading

A tip for capturing your design ideas quickly


One of my new favorite discoveries is a set of printable sketch sheets that I now keep at my desk and in my purse so I can randomly start sketching ideas if they come to me. I’ve been using the 960 Grid System sketch sheets, of which you can download (in PDF format) at Nathan Smith’s Github. You can also download various templates for wireframing in Photoshop, Illustartor, GIMP, Omnigraffle, inDesign, etc.

I’ll be blogging for 10,000 Words!

I know everyone raves about how amazing Twitter is for building connections within your niche. If you’re reading this post on my blog, you probably have already experienced it firsthand and probably only know me through our niche on Twitter. But that won’t stop me from sharing yet another anecdote of how Twitter has brought great opportunity to my life: I am officially a contributing blogger for 10,000 Words. Continue reading

BCNI Notes: Design Roundtable “News Sites Still Suck”

Yes, this post is a bit delayed, but now that I’m on a flight home to Cali, I finally have a moment to finish it.

My BCNI experience finished with a bang thanks to Major Highfield‘s roundtable discussion on news site design and mobile news design. For those of you who don’t know Major, the former newsie is now the mobile tech lead for ING Direct. His roundtable was an open discussion about what works and what doesn’t in current news design, and a look forward at new ideas and trends.

He identified the following most common types of design we see in news:

Column Design (NYT)

Very reminiscent of print design, “column”-based news sites have thin vertical modules. The most well-known example is the New York Times.

Grid view (CNN)

The grid news design has less emphasis on hierarchy and gives equal balance to story display. Although Major used CNN as the example, I’ve included Newser as a more ideal example of the grid layout.

Buckets (MSNBC)

Bucket designs group stories by topic beneath a main header.

Lists (Digg)

Timeline view or “river” view are also common terms for a list layout which is as it sounds: A list of headlines, like Digg.

Combo package (Toronto Star)


The Toronto Star combines these different possibilities by offering the user different modes of viewing news, although Major noted that this isn’t ideal UI. The Toronoto Star manages multiple layouts from which the users can choose their favorite:

Major said you should push out the best user experience and not force the user to choose. Based on the heavy emphasis the Star’s designers put on evidence-based design, I’d venture to guess that they’re collecting data about which display is used most often in preparation for something radical. But that’s just a guess. :)

Combining advertising with editorial design

Traditionally, display ads thrown into random columns and headers of news sites was the preferred advertising style online, as adapted from a print model. The new type of advertising comes in the form of embedded ads (i.e. ads displayed inline with the rest of the editorial content). We see this manifesting in LA Times’ decision to sell keyword ads within articles this week. A bad example of this can also be seen on CNN.com:

A good example of embedded advertising is in the free desktop version of Tweetie:

I think the reason CNN’s embedded ads fail is because CNN isn’t being honest with its customers. Tweetie clearly labels its ads as such and implements them elegantly into the design of the app. It also helps that the ads are very targeted at the user. CNN’s embedded ads try to look like editorial content and it’s deceitful. They’re also not very useful or pretty.

Takeaways

So the point of all this is that news sites still suck. One nugget that really stood out was in our conversation about news site navigation. We still categorize stories under sports, arts, news, opinion, etc. because this is how the print product was laid out. But is that what’s relevant to readers? I know that when I browse news, I don’t care about the topic. I care about the timeliness and its relevance to me, no matter what “section” it falls within. I don’t necessarily want to read about crime and sports, but if it’s happening within a three block radius of me, then I do care. So maybe instead of categorizing news sites into traditional categories, we can make the main navigational elements more relevant with categories like “time” and “location” (see the Spokesman Review for a great example of this).

One revelation that came about for me during this discussion (which might ironically deem this entire blog post irrelevant) is the fact that news design doesn’t matter at all when we’re all subscribing to news via RSS. Is there really any type of news site experience that will be more convenient and relevant? Am I ever going to want to visit 40 different sites each day, all of which are designed differently, and hunt down news that’s relevant to me within each of those sites? Or would I rather leave my Google Reader extension active in the browser, open in it in between tasks, quickly be presented with news I already know is relevant to me (distraction-free), and carry on with life? The latter is the news consumption pattern that fits best into my daily routine and allows me to consume the most news in the least amount of time. The fact that Google Reader’s social features push me the most relevant news being shared by the people I follow only increases its relevancy.

So maybe the question we should be asking ourselves as news designers isn’t how to make our sites better, but how to create an experience that surpasses that of the Google Reader experience. And maybe that’s the topic of another post. Stay tuned…

Mustang Daily summer web goals

Before my tenure with the Mustang Daily is over, I want to work with the future online editor and developer (whom we’ll be hiring in the upcoming weeks) to acheive the following goals, most of which are relatively simple:

  1. Develop a better system for sending out the daily e-mail edition. We’re currently using feedburner, which we find to be inconsistent and ugly. We want something customizable that we can send out during times of breaking news. It will also include ad spots ($$$ = good!)
     
  2. Lay the foundations for a community wiki. The wiki will allow users to contribute information they have about on-going issues on campus, clubs, etc. I have no idea how it will be organized or the scope of our topics, but we’ll start with topics we’re covering, then expand to have a page for all clubs, organizations, administrators, etc.�
     
  3. Set up a community-generated calendar. Time and time again we get complaints from students about our lack of coverage on certain events. Everyone knows we can’t cover it all, though. But that doesn’t mean those events aren’t important.  A community-generated calendar would be a resource for all students and a way for community members to promote themselves. Because it will surely be a populare page, it also means much advertising potential. (e.g. This calendar is sponsored by _____.)
     
  4. Create an easy system for submitting news tips. This could easily be done using a Google form (through Google docs) or a WordPress plugin. When setting this up, we could also do a form for submitting letters to the editor. �
     
  5. Make prettier landing pages. Although our front page is bomb (I’m not going to be modest ;) ), our news, sports, opinion, arts and multimedia pages are boring as ever. Those pages were a quick fix when the site launched, but I want to redesign them to have a main, featured story and maybe a secondary story, then the rest listed below. It needs structure.�
     
  6. A page of aggregated tweets. Although it might be tough working with the Twitter API (thank goodness I’m hiring a web developer), it would be really cool to experiment with a page called “voices on the web” or “community tweets” (or probably something catchier) that agreggates tweets with the words “Cal Poly,” #calpoly, #poly, #slo, SLO, San Luis Obispo, etc. 
And that’s just a start. If I can meet all these goals by the end of the summer, then I’ll start up a new list. 
If you think of any ways these ideas can be better, let me know! My summer starts June 12. Let the fun begin!

Make your résumé reflect your talent… visually

If you know a thing or two about graphic/web design, make your résumé mirror your knowledge.

When a “new media” journalist has a résumé made off a Microsoft Word template, it shows nothing about the creativity that person has.

I recently redesigned my résumé to give it that Twittery feel. Why?

  • Using elements that are popular in web design show that I actually pay attention to web design trends
  • It’s eye-catching. What would be more memorable? Times New Roman with a bulleted list, or Helvetica in colorful boxes?
  • If I have “graphic design” listed as a talent, I sure as hell better have a unique résumé. In a way, the design of your resume is your own advertisement for yourself.

A few other tips for journalists’ resumes:

  • Keep it short and clean. While this applies to pretty much every résumé, it’s especially important for a journalist. Journalists are supposed to be pros at keeping things concise and to the point. The first hint at whether you’re truly capable of that is through your resume.
  • Run it through spell check. Again, this is more important for a journalist than it would be for an engineer. If you can’t copy edit your own resume, how can you be expected to copy edit your stories?

Who would you hire as your new media reporter?

Here are some other great ideas for resume design:

  • Brand yourself. Give yourself a logo that you use on your résumé, your business card, your Web site and your blog. It’s a goal I have for myself, in fact. It gives you an identity and establishes your credibility
  • Use color. I often hear the use of color/borders/shapes as huge résumé no-no. I disagree. Use color appropriately. Draw the readers’ eyes to the parts that are important, use it as a separator or as an accent.
  • Use white space. Don’t make your résumé look like a novel. Again, applying basic principals of Web design, less text is better. Don’t distract the recruiter. Use bulleted lists and keep it clean.

Now, here’s some inspiration. Go open Photoshop, Illustrator, inDesign or all three and make yourself a new resume masterpiece. Even if you’re no good at graphic design, it’s easy to use good fonts and a little color to make your resume sparkle.

Update: Chicago Tribune redesigns, drops "Trib" rumor

The big Chicago Tribune redesign has been released and, not surprisingly, it’s not the version that was heavily circulated around the Web that featured the title “Trib.”

Here are a few before and afters:

A prototype that surfaced the web last week showed a front page the read “Trib” big and bold across the masthead– a bold move that the traditional newspaper apparently wasn’t quite ready for.

While the new design is obviously a lot more modern, will it work? Newspapers won’t survive by simply giving themselves a facelift. They have to start from within and change the content to match the new design. What does that entail?

  • More features
  • A more magazine/blog-like appeal
  • More modern design (like the Tribune)

My theory is that newspapers cannot keep using print to try to break news. If newspapers want to make it, they need to stop cutting jobs and pages. They need to add pages and add jobs. Change the content to be an in-depth analysis of yesterday’s news that was already broken on the Web.

When TV got big, radio was supposedly going die. That was almost 80 years ago.

The industry isn’t dying. It’s changing. We need to embrace it.

Online social networking shaping real-life social gatherings

Who is going to be tagged in your wedding album on Facebook?

As Gen Y gets older, more real-life events are increasingly centered around the online product.

I recently went to the wedding of my boyfriend’s high school friends and this was the case. Every table at the reception had a note encouraging guests to take pictures then upload them to SnapFish for the bride and groom to print.

This is quite the evolution from the days when the bride and groom would purchase disposable cameras to give out to guests for picture-taking. Not only is money wasted on the disposable camera, but also on getting the horrible pictures developed.

With this method, you can only print the photos you like and you don’t have to pay for the camera.

Another money-saver: online invitations. The same wedding party sent out their invitations through Pingg.com, which allowed for quick RSVPing, provided instant directions, looked clean and best of all– was free! Guests were allowed to comment on details of the reception of well, and other guests could see who was and was not coming.

Invitations can be printed, twittered, text messaged, e-mailed, and were even hosted as an “event profile” Web site.

Brilliant, easy, fast, free. The way event planning ought to be.

Papers should look like the Internet

The new possible new design

When a potential version of the Chicago Tribune’s redesign starting trickling its way through the Web, I fell in love.

Although I’m known as a Web enthusiast, I’m also a sucker for great design — whether it be web or print. All graphic design is intriguing to me, and this prototype definitely sparked my interest.

If newspapers are going to survive, there needs to be major restructuring to represent elements of both the Web and magazines. I think this design accomplishes both:

  • Masthead content – They go with the name “Trib.” This is brilliant because it’s casual. It sounds like the name of a blog and it’s what seasoned readers call the newspaper anyway. It’s making that personal connection with the readers, a very blog-like appeal, I think.
  • Masthead style – This is no traditional masthead. Again, it reminds me of a blog banner. It feels so casual and clean. I love it.
  • The current, “old” design
  • Headline typeface – The current design uses traditional serif fonts, while this potential new design has a main headline in a Helvetica-like font (much like a magazine would)
  • Big central image - This is so magazine-like, which isn’t necessarily a bad thing. Newspapers are dying, but magazines aren’t.  Everything about the layout reminds me of a magazine, and even the content is a lot more feature oriented
  • Basic, bold graphics – Although I can’t read the teasers on the bottom (I’m assuming they’re teasing to the Web), I can tell that the graphics are far more simplified than what the Tribune currently has in their print edition. They’re very much like icons you’d see on a Web site
  • Infographics – The current Tribune is very text-heavy. This design adds more visual and presents statistics quickly and organized. Far more visually appealing than that traditional look of the current paper.

If newspapers want to survive, I think they need to do what the Chicago Tribune is considering: a massive redesign. Not only visually, but contextually.

Instead of being a place of who, what, where and when, the newspaper should be a place of “why?”

Instead of cutting pages and jobs and keeping the same content style, newspapers need to add pages and jobs and change their content style.

Instead of trying to break the news in the newspaper, the industry needs to break news online and use print as a deeper, more feature-like and in-depth look at the news that was broken online.

And the Trib already has a head start.