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:
- A List Apart
- Digital Web
- 456 Berea Street
- Smashing Magazine
- Design Meltdown
- Vitamin Articles
- CSS Globe
- SitePoint Articles
- Design Observer
During the workday, I also listen to files from my “Podcasts” tab:
- Photoshop TV
- Talking WordPress
- This Week in Media
- The WordPress Podcast
- Boag World
- Rissington Podcast
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.
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:
- For placeholder text in mockups, I use lipsum.com
- For color palette inspiration, I visit DefenceMechanism, SlayerOffice and ColourLovers
- For layout inspiration, I use “Screenshots in Syndication“, a tool I created from a combination of technologies
- For font management and typography help, I use TypeNavigator, What the Font and Adobe Type Manager
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
- For cross-browser checking, I use Browsercam
- For extensible tabs, I use Sliding Doors Meets CSS Sprites
- For managing code, I use Dreamweaver snippets
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:
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.
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.