Streamline Your Process: RSS Feeds, Bookmarks, Frameworks, Design Resources

An old friend began learning web design last month, but said she was feeling overwhelmed by what to learn first, who to learn it from, how to keep track of it all, and how to do it efficiently. I made her some notes on the tools that work best for me. Mostly obvious stuff, but hopefully it will be useful to some:

RSS & Feedreaders

The web industry evolves rapidly and RSS feeds are crucial for keeping up. Feedreaders exponentially increase the amount of information we consume. In the early days, most of us actively hunted down websites for the right information. These days we passively receive it via subscription.

I start every weekday morning browsing Netvibes, a customizable RSS aggregator comparable to Google Reader.

I’ve divided my feeds into 7 tabs of subject matter. I start with the “General” tab which contains Weather.com info and my Gmail feed, but also the feed for 30boxes, a calendar service I use for organizing design meetings and appointments. Next I’ll browse any new feeds from the “Design & Development” tab:

During the workday, I also listen to files from my “Podcasts” tab:

podcasts

Tip: Netvibes relies on reams of Javascript which drastically slow down Firefox, especially if you subscribe to a ton of feeds. Reduce the load on your browser by selecting Settings->General Settings->”Only load modules for current tab”.

Netvibes is great for my immediate daily needs, but on the weekends when there’s more time to browse, I switch over to Bloglines. For me, the Bloglines interface is better for viewing a greater quantity of feeds and for displaying images from the various CSS galleries.

Bookmarks and Linksharing

During a week of browsing from both feedreaders, I’ll usually want to bookmark 20-30 favorite articles, tutorials and designs. In the early days, bookmarking was managed through the browser, but those bookmarks were lost if your computer died.

These days, bookmarking is more streamlined. Webpages can be tagged and organized with a simple click using tools like the the Del.icio.us extension for Firefox.

Tip: Once the list of bookmarks grows long, they can be organized into tag bundles and viewed in clouds instead of lists:

For usability’s sake, it’s good to limit the total number of new tags. Instead you can combine existing tags like “tutorial” and “photoshop” as opposed to creating new ones like “photoshoptutorial”. Like with writing CSS, it pays to be economical.

Since Del.icio.us is used by a large number of web designers, it also makes for a great search engine for finding popular new techniques or gauging web trends. You have the option of subscribing via RSS to specific keywords like “design“, “photoshop“, “CSS” and so forth. Their “popular” tag feed is also a strong favorite among bloggers and developers.

Another great link-sharing service is Stumbleupon. You give a thumbs-up or thumbs-down to links you randomly browse, and after awhile the Stumbleupon algorithm learns your preferences, sort of like Pandora does with music. If you’re a web designer, you can befriend other designers and passively “recommend” them articles each time you give a thumbs-up. Again, the process of finding useful content becomes streamlined.

Wireframing & Strategy

While meeting with a smaller-budget client for the first time, I’ll usually sketch out basic wireframe concepts with a free tool called Best4C:

This helps us visualize elements like mastheads, navbars and sidebars right on the spot. The final sketch is exported as a jpg and posted for both of us to see. This provides me some general design direction, but also provides proof-of-concept if the client contradicts their decisions later on.

For larger complicated sites, there are other wireframe and flowchart options. For Windows users, the most popular tool is Visio; for Mac users, there is Omnigraffle.

More on wireframes here, here, here and here. Wireframes help clarify structural details for you and your client, thus removing some of the guesswork and streamlining what could otherwise be a bumpy process.

Design

There are zillions of helpful design tools available online. The following are ones I use almost daily and they’re easily accessed in the Firefox toolbar:

To streamline the mockup process, I also have a huge repository of frequently-used elements in PSD format: calendar and news icons, tile patterns, vector images, tabs, buttons, gradients, layer styles, and so on. Some elements will always need to be created from scratch, but for those which don’t, it pays to build your own set of tools.

HTML & CSS

Once a design gets approved, it gets sliced into HTML and CSS. I start with an existing baseline stylesheet and valid HTML document. The rest of the build process is assisted by the Web Developer Toolbar and Firebug extensions for Firefox. Among other things, these tools help validate your pages, display image data, and inspect page elements like CSS, javascript and HTML.

Project Management

During the day, I use Basecamp to track project milestones and communicate with project managers. At the end of the day, I use Vertabase to log billable hours and generate reports.

More great billing and management tools:

Making Lists

Throughout the day, I work from a handful of ongoing lists which keep track of things like:

  • Design concepts for upcoming projects
  • Issues I need to discuss with a client or project manager
  • Shopping lists for fonts or software I want to buy
  • Bugs that need fixing, etc

For this I use another 37 Signals product called Ta-Da Lists. The lists can be shared among selected users, dragged-and-dropped in order, and each one has its own RSS feed which I track through Netvibes.

tada

Letters and Files

In the early days, there was a suite of standalone tools (MS Word, Excel) for editing documents, specifically contracts and proposals, but there wasn’t a great system for keeping track of edits or collaborating with others.

These days I find Google Docs the most straightforward solution. Like with the other modern browser-based tools, content is saved in a central location and can be accessed remotely. This is especially helpful when on vacation, using a public computer, or sharing with others.

For quick file management (PDFs, JPGs, MP3s), I’ve been using Gmail as its own hard drive. It has a decent storage capacity, labeling system and search function. But now there is also Pownce, a service to help “send messages, files, links, and events to your friends.”

Since our goal is to streamline, this great variety of tools might seem cumbersome at first, but I promise they can reduce much of the gruntwork involved with strategizing, sketching, designing, building and billing a website. In the end, it’s all about creating a personal library that works best for you.