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.

  • dawnprofies

    hi Darren.

    i find it interesting that you use different RSS Readers for different environments (work, home, what ever).

    have you tried Google Reader ..? i swear that it is an all-in-one solution, and i would be surprised if it’s lacking ANY features that the others offer.

    just curious.

  • John

    Darren,

    Wow! – This is a HUGE revelation for someone (like me) badly in need of updating my own work methodology to at least try to stay in the game with you young guys. Thanks so much for this!

  • http://playworkplay.com/ Hafiz

    Just like what John said above, this is an awesomely huge and useful list! Also, what do you think about CSS frameworks like Blueprint? I find that it is a useful tool for wireframing design, so that instead of working with images, the wireframe is already XHTML/CSS which I suppose will help conceptualizing things. Moving design elements around is usually just a process of moving the HTML tags around, so it’s pretty quick and really not that hard.

    Although using said frameworks for the real work would be another discussion, I’m sure.

  • Darren

    Also, what do you think about CSS frameworks like Blueprint?

    I posted a bit on CSS frameworks and basically concluded there is a lot to learn from tools like Blueprint, but ultimately it seems best to take pieces of other frameworks and incorporate them into whatever works best for you personally. It’s unlikely there will ever be a baseline CSS document that appeals to absolutely everyone, but there is lots to learn in the experimentation.

    Moving design elements around is usually just a process of moving the HTML tags around, so it’s pretty quick and really not that hard.

    True, under the right circumstances. Adjusting columns and floats in CSS isn’t ideal to do on the spot while meeting with clients, though. Best4C makes it nice and easy.

  • http://www.robertngodon.com robert g

    Nice article, i guess I am ‘in the flow’ as I use pretty much everything you do and then some.

    As for google reader, I think netvibes beats it hands down. Unlike google reader you can look at nearly all of your rss feeds all on one page next to each other separated at a glance. Very cool for quick scanning.

  • http://www.stationfour.com Chris Olberding

    Very nice article. With so many emerging services and technologies it’s easy to fall into habits and not take advantage of ‘better ways’ or managing your time. There were definitely a few things here that made me say, “Hrm, I need to reevaluate how I do that”

  • http://megaform.net Tomas M.

    If you have a server with MySQL 5, there is a very nice free and open source project management program WebCollab (http://webcollab.sourceforge.net)

    To sketch menu tree for a bigger project you can use free and open FreeMind (http://freemind.sourceforge.net)

    And the most important: when you are in the need to compare two versions of Mimbo code you would use free and open WinMerge (http://winmerge.org) – it can compare whole folder with sub-folders at once!

  • http://megaform.net Tomas M.

    Correction: WebCollab requires MySQL 4.1.3, or higher.

  • Pingback: Buffer Dump 19DEC07 « Feet up, eyes closed, head back()

  • http://bentrem.wordpress.com Ben Tremblay

    Just so! I’m using almost identical NW/BL … with GoogleReader in the background. Nice set of tips.

    One warning about that very nice del.icio.us plugin: it interprets “remarks” as tags … and a lot of sites add very very over-large remarks when you bookmark them. The del profile I’ve worked on for years now has hundreds of spurious tags because I uploaded a huge slab of bookmarks w/o realizing what would happen. And del’s tag management system is, well, primitive. Painful, that. Really.

    cheers
    –bentrem

    p.s. I’ve pointed to my low-buzz worpress blog … is where I log resources such as yours

  • http://mozdawg.blogspot.com Ben Tremblay

    *typo* (Have you seen the way Ning allows comment editing? Very slick.)

    I meant to type NV/BL for NetVibes/BlogLines.

    ^5.

  • Pingback: Sunday Weekly Roundup #19 - 12/23/2007 » Blog at veanndesign.com()

  • http://blog.codesignstudios.com Dennison Uy – Graphic Designer

    Your article is like a mirror of my process, except I use Google Reader instead of Netvibes, and I have never heard of Best4C until now. I use Photoshop for wireframing, but If I really have to come up with something very simple very very quick, or if the wireframe requires a little bit of interactivity, I use just use PowerPoint.

  • Pingback: beginners web design - Page 2 - DesignersTalk()

  • Floroskop

    Hello!
    I think this try.

  • Pingback: Improvisation in Design | Darren Hoyt Dot Com()

  • Pingback: Dreaming of the Portable Workspace | Darren Hoyt Dot Com()

  • Pingback: beginners web design - Page 7 - DesignersTalk()

  • Jessica

    Thank you so much for posting this! I am new to Web Design and sometimes I wish there was a piece of code that would enable me to hang myself! It can get very overwhelming – not to mention there are not a lot of experienced Designers who are willing to help. This post has been a huge help to me and thanks again! – Jessica

  • kayarieevef

    ?????? ????-????? 2008 ???? ?? 200 ??. ???? ????????. ??????!!!
    +7 960 200 9209

  • http://www.salut-rossii.ru/ Оксана

    Salut-rossii.Ru:Мы работаем на Российском рынке большой срок в 15 лет.Мы проводили такие фейерверки как: на 10-летие телекомпании НТВ, и многие другие

  • Pingback: Beginners Web Design « iDesigners Blog()

  • Pingback: Beginners Web Design « iDesigners Blog()