Design Focus

Friday Focus 07/31/09: Brilliant Lighting

Digitally recreating light is a pretty challenging task, and this week we’re going to look at websites that manage to use this effect brilliantly.

Designs of the Week

PSD Layout Design by Respiro Media

I’m not exactly sure what the orbs of light are on the header but I’m pretty sure I haven’t seen anything quite like it, and I love it. Especially when combined with the little stringed icons flying all over the place. The effect also carries over to the icons in the lower sections of the homepage, which is great.

Fred Maya

The lighthing here is a little darker, but it does have an ethereal quality to it. The arrangement of the portfolio items and the left sidebar is not really groundbreaking but it’s effective and well executed.

Ryan McMaster

Sunbursts and grunge—now there’s something I don’t see everyday. I would’ve liked a little more attention to detail particularly in the sidebar and footer elements, but I like this treatment. It’s grungy, but an elegant sort of grunge (if that’s even possible!).

Digital Convulsions

Speaking of sunbursts, here’s nicely done one. My only beef with this site is that it’s got great personality at the top, but it kind of disappeared on the lower half.

Paul J. Noble

I really like the spotlight concept here. I also think it’s great that you can navigate using the keyboard, but mouse navigation shouldn’t have been limited at just the footer. Still, a simple and effective portfolio.


So this is one of the more obvious and literal ways of recreating light, but man is this design lovely. The level of detail everywhere—and I mean everywhere—is amazing.

Sorotsky Design

Here’s a less subtle implementation of the literal spotlight effect, but it does match the gritty feel of this site. Love the use of vintage posters for navigation.


Not your usual layout, or imagery, for that matter, but it’s certainly eye-catching. I like the soft rays of light at the top and how the icons are glowing. And of course the cloth turned sparkling sea. Leaves me wanting more!

Social Media Weekly

Design, Development40 Free and Essential Web Design and Development Books from Google
A massive list of design & development books, all found online!

DesignTaming the Elephant: Design Critiques With Non-designers (plus a printable cheat sheet)
Why and how to critique, in blog post and printable forms.

HTML, XHTMLMisunderstanding Markup: XHTML 2/HTML 5 Comic Strip
A comic strip adaptation of Jeremy Keith’s clarification on HTML5 and XHTML 2.

9 Version Control Hosting Options9 Version Control Hosting Options
Get into version control systems with these hosted solutions.



How Do You Keep, Develop and Execute Ideas?

I’m fond of keeping an idea notebook close at hand. It’s usually my mobile phone, since I’m unlikely to lose it (crossing my fingers here!), and I can sync notes to my computer. I often have fleeting ideas of some great design concept, web application, or article, and it’s usually gone the minute I get distracted. For that reason, I need to be able to grab the opportunity and note down my thoughts.

It’s not such an easy task incubating and execute ideas if all you have are bullet points on a piece of paper, or on a .TXT file, though. While it’s not an elegant solution, it helps me remember. But being loose files and lines of text, the difficulty is connecting these pieces of information with each other, which would probably result in even better ideas.

Mind mapping. I’ve recently tried exploring mindmapping software, which are basically electronic equivalents of writing down your ideas and plans in text bubbles on paper, interconnected with lines, and represented by different symbols. I haven’t gotten the hang of it, but I plan to plot all my ideas, business plans, and strategies on mindmaps. Hopefully, this will help me become more organized.

And because I usually work on different desktops, notebooks and netbooks, I save my mindmaps on a folder commonly accessble via Dropbox, so I can work on it regardless of the computer, platform or even location, as long as I have an Internet connection.

Execution and follow through. Oftentimes, I am able to start with great ideas for a blog or web application. I buy a domain, write copy, and partner with designer and developer colleagues. We start out hyped, excited and energized. But then somewhere along the way the energy fizzles out. Real world concerns like servicing clients, catching deadlines and even cooking dinner might be distracting for one’s focus on executing an idea.

One solution I saw to address this is by not closing any important application windows or browser tabs on my computer. I just close the lid and put it to sleep at the end of the workday. But then with the multitude of tasks I consider important and essential, my workspace becomes too cluttered, and I am left with half-baked plans, half-executed projects, and deadlines still ominously looming over, seemingly waiting to bite me without notice.

Start with a bang. Of the many ideas I’ve incubated in my head and seen the light of day, the ones that succeed, or at least are sustained, are the ones that I’ve sat upon and continuously worked on until launch. Whether it’s building a blog from scratch, finishing a proposal for a client, or writing marketing copy for a new web app or service, I find it best if I get to finish it in one sitting. In find that if it takes too many emails back and forth to confirm designs, edit the text, and other negotiations, energy that could’ve been put towards actually executing an idea might get wasted. Not only that–if you dilly dally too much, you might find yourself having doubts and second thoughts, and therefore the idea fizzles out.

There are so-called serial entrepreneurs who are fond of jumping from one great execution of an idea to another. And more often than not, they gain much experience–and money–in the process. They probably have a tried and tested formula for doing this. Or perhaps they have a lucky streak. Or maybe it just boils down to good habits, good contacts, and a great mindset for developing and executing a good business idea.

Different things might work for different people. What are your “magic formulas” for success?



Five Awesome Screencasting Tools

IMHO, one of the best things about the Internet is having access to online tutorials. Whether you need to advance your PHP skills, discover what Google Analytics is all about, or learn how to customize your Twitter profile, it seems that there are video tutorials for nearly everything these days.

If you’re looking to create an online video tutorial (also called a screencast), you’ll need some tools to allow you to capture your actions and audio. These are the top screencasting tools I recommend:

JingProject (Windows and Mac)
If you’re new to screencasting, you simply must try out Jing. It’s free and very easy to use- and it records your audio as well (which is something other free software I looked at don’t do). Once you’re ready to get more serious with screencasting, their Pro version is just $14.95 a year.

Camtasia (Windows)
Many professionals swear by TechSmith’s Camtasia, and it’s easy to see why. This is powerful screencasting software, which takes you from recording to editing to publishing all in one place- and it’s used by some very big names (e.g. Google, IBM, Stanford University…). If you’re on Windows, this is definitely one to look at- they have a free 30-day trial, and after that it’s $299 for a single-user license.

ScreenFlow (Mac)
Until I discovered ScreenFlow, I was suffering from some serious Windows-envy (see Camtasia, above). But ScreenFlow, also a commercial application, is an amazing piece of software- and it’s made for Macs (specifically Leopard). It’s got gorgeous titling support, and the latest version allows you to produce WMV format recordings and create custom cursors. Little things that mean a lot. The app costs $99, and they offer a free trial as well.

iShowU HD (Mac)
shinywhitebox’s screencasting app, also made for Macs, might not be as snazzy-looking as ScreenFlow, but is powerful in its own right. There are two versions of the app, iShowU HD ($29.95) and iShowU Pro ($59.95), and it’s a good idea to view the feature comparison before selecting one. With features like on-the-fly scaling, full-screen OpenGL app support (World of Warcraft, anyone?), and the ability to embed watermarks, this is definitely one to look at.

Adobe Captivate (Windows and Mac)
Finally, if you’ve got the bucks, be sure to check out Adobe’s screencasting application. They call it “eLearning authoring”, and it really does seem to be targeted more for education purposes, giving you the ability to create quizzes with scoring among others. This is definitely for the serious screencaster, and also costs the most at $799.

Have you tried screencasting? What software do you use?



Five Free Fonts: Gorgeous Grunge

I first discovered the, uh, joys of grunge way back in the early 90’s, when I wore too much flannel and had Pearl Jam as the background of my answering machine message. Grunge-style design, on the other hand, has lasted much, much longer than my favorite pair of ripped jeans- and when it comes to grunge fonts, there seem to be hundreds of them. How to weed out the best of the bunch? Here are my top five favorite free grunge-style fonts:

This beauty of a grunge font, by Billy Argel, tops my list. It’s big and bold and unmistakeably grunge, with some lovely distressing and just the right amount of unevenness.

Jonathan Paquette is an awesome font designer. This one is a little cleaner around the edges, but still definitely grunge, and the reversed letters are a nice touch.

Whether you go all-caps (as shown here) or not, Trashed is a great headliner font- and because it’s nice and messy yet still very readable, it would be good for posters or blocks of text as well. Its maker, Last Soundtrack also designed another of my favorite fonts, which I posted about previously.

If you haven’t yet seen misprinted type’s font offerings, go. Now. Well, after reading this post, anyway. They make some gorgeous fonts, and Shortcut is among my favorites. It looks “stamped” to me, which is an effect I have a difficult time creating as a designer, so yay!

Bill Hicks
And finally, this one by The Devil in Jason Ramirez. Again, this is not as “dirty” as the other fonts on this list, but I think marries goth and grunge, and- oh, well, whatever, nevermind.

Do you have a favorite grunge font?


Design Focus

Friday Focus 07/24/09: For the Birds

This week’s Friday Focus features designs with pretty little birds in them. (No, this isn’t another collection of Twitter-related sites—only two of them are.)

Designs of the Week

Tori's Eye

Illustrations are inspired by origami and papercraft, animations are done purely in JavaScript. Pleasant and brilliant.

Loja Birds

I love the mobile motif here—everything is hanging onto something until the very end of the page. Great concept for an online shop.


I like the illustration style here because it’s more cartoony instead of delicate and craft-y. And it seems dotted and dashed lines are all the rage these days.

Pingvin Studio

I like it when sites go all out on a metaphorical design. This one has the content floating on ice!


Two things about this site mask how simple it looks. First, the hawk looks stunning—big, bright pink, and detailed. Second, the illustrations (aka Twitter backgrounds) listed on the site speak for themselves—if you’re designing a portfolio, do the same thing.


Some of you might have to squint to see the birds, but I appreciate the subtlety while still paying attention to detail—you can play hangman (or is it hangbird?) on the site! They’re all over the place, though, so you will enjoy their company.

Social Media Weekly

TypographyWeb fonts — where are we?

FreelanceFreelance Design Contracts and Templates for Designers

ProgrammingHow to Debug PHP Using Firefox with FirePHP



Outsourcing Development

You might be working developing the best idea ever. You code days and nights until you get your app working like it’ocial media supposed to. But suddenly you hit a roadblock. You want it to have the best look and feel possible, but you’re not really a designer.

Or perhaps you might be designing the best WordPress theme, but you have no idea how to market it. Will it gain traction just for its inherent qualities? Maybe. Maybe not. If you were an expert at social media marketing, too, then maybe you stand a chance at competing with the already-established premium themes out there.

If you’re working alone, then chances are you might not always be able to take care of all aspects of development. I know some crack developers who, time and again, have sourced out part of their projects to other developers and designers. Some would assign projects on a per-module basis, and then assemble these into a bigger project once complete. And since I opened my own SEO company with a few partners, I’ve handled a few inquiries for various jobs, like back-end development, theme design, marketing or content. It’s a matter of filling in for expertise that other people might need.

In some cases, it would cost you a lot of money to have experts do the work for you. I know designers who charge thousands of dollars just for a WordPress theme. But then again, I know some who would be happy to do a theme for $500 or less. The lower end of the pricing scheme is usually a result of being situated in places with lower costs of living. I know this for a fact, because I enjoy this situation myself. Compare Tokyo, New York and Manila. $500 goes a long way in Manila, but would only get you a few lattes and sandwiches in New York, and probably an order of sushi and sake in Tokyo. Okay, maybe I’m exaggerating here, but my point is that cost of living is relatively cheaper in some places.

Sometimes it’s a question of quality. Would you entrust programming and design work to people overseas? More importantly, would you entrust these to people who are complete strangers? And sometimes there are quirks and nuances that you have to consider. Is someone living in Mumbai familiar with the colloquialisms used by someone living in the west coast USA? This might not be an issue when you’re paying someone to convert your PSD graphic into CSS. But if you’re ordering articles, blog posts or other content, this would play a big part, especially if you’re building content meant to be read by humans (rather than, say, search engines).

Have you considered outsourcing development? It might be a good business move, but only if you can do it right. Outsourcing does not mean you can just pass on a task to someone else in its entirety, without much monitoring and interaction. Similarly, micromanaging outsourced work would be too much work for you, that you would probably be better off doing it yourself. Strike a balance. Build trust and keep communication lines open.

Have you outsourced development work before? Share your experiences.



Getting started with the Grid

I’ll admit: it took me some time to really begin using CSS Grid frameworks. As an “old-school” web designer who started with tables and img spacers (the horror!), then fell completely in love with pure CSS layouts, I was so accustomed to writing every line of my stylesheet myself, the idea of using a premade “framework” was simply out of the question.

Then, a year or so ago, all these “grid-based” layouts started appearing everywhere, and they weren’t just clean and streamlined, they were beautiful. The first Grid framework I tried out was Yahoo!’s YUI– I figured, hey, it’s from Yahoo!, that fun place that serves purple cupcakes at their company functions – it must be easy to understand. But I took one look at all the .yui-t1s, .yui-t5s, and yui-gcs in and I thought my head would explode. Where were the nice, semantic terms I had grown so accustomed to? Content? Sidebar? Navigation-Menu?

It wasn’t until very recently that I decided to take another look at Grid frameworks- this time with an open mind. By now I had realized that the value of these frameworks was that as layout tools, they make life easier for many designers. And as tools, they can be as useful to you as you want them to be. That realization convinced me to jump right in and learn how to use the Grid. If you’re looking to get started, here are some of my recommendations:

Look at several different frameworks first.
The most popular Grid frameworks are 960.gs, Blueprint, and of course the aforementioned YUI (which is actually a great framework, despite my initial head-explosion!). I’ve tried them all out, and they all have their pros and cons, but the fact is that if you choose any one of these three, you just can’t go wrong.

Get inspired by grid-based designs.
So many beautiful websites are built with a Grid- and they don’t look “grid-like” at all. For example, look through this list of Grid designs on Web Designer Wall.

If math is not your strong suit, get out your calculator.
No, not really- it’s not like you have to actually compute stuff when using the Grid- these frameworks have been set up so that it’s easy to figure out what classes to use (for example, in Blueprint, if I want two equal columns on a 24-column grid, I use the class span-12 twice- because 12+12=24!) However, you should know that there are numbers involved here, and sometimes the fastest way to use the Grid is to make quick calculations.

You don’t have to give up good semantics.
As a strong believer in well-defined, semantically correct HTML and CSS, I usually rename my classes before going live. Remember that nothing’s stopping you from changing “span-11” to “main-content”, or “span-8” to “navigation-bar”.

I’m currently using the Bluetrip framework on several projects- it’s sort of a combination of Blueprint and 960, with some other goodies thrown in. Do you use CSS Grid frameworks?


Design Focus

Friday Focus 07/17/09: Old Newspapers

This week on Friday Focus, we pay homage to the good old newspaper, whose elegance and practicality ought to transcend the ages. Print isn’t dead; not quite yet.

Designs of the Week

The Astonishing Adventures of Lord Likely

When using newsprint hues, keep things interesting with bold, intricate type. The thing that bothers me here though is the excessive use of uppercase text. Needs more variety and hierarchy in typography—smallcaps, italics, drop caps, etc.

The Art of Nonconformity

This site has its own flavor of old, publication-like, and grungy, but doesn’t look outdated whatsoever. Perhaps it’s the orange and blue. Or the crazy line scribblings in the header. The only minor letdown here was the footer—a lot more detail could’ve gone into that. Really like the fixed world map background though.

J. Bradford Dillon

This one also seems lacking in hierarchy—hardly any variation in type sizes, for starters. But kudos for creating a 100% fluid layout. Not to mention the “Table of Contents” style articles list to the right.

The Old State

Ignore the use of monitors, gradients, and rounded corners and you’ll enjoy how much of an ancient-looking site this is. Especially their blog. The branding has a lot to do with it, but I also think it’s the bold use of black and white.

Social Media Weekly

DesignCrank Up Your Design Radar

AccessibilityA Designer’s Guide To Accessibility and 508 Compliance



Roses are #FF0000, Violets are #0000FF

I’ve never really used regular color names in my CSS styles, preferring to stick to HEX values I get from Photoshop. I was a little surprised then to see this, a long list of CSS color names that are “supported by all major browsers”. It starts with AliceBlue, an almost ethereally light blue, goes on to Chartreuse and FireBrick and HoneyDew… there’s even a pretty light lavender shade called Thistle, which I’m now seriously considering painting my guest bathroom in.

But then- aha. Apparently, despite all these lovely color names being supported by major browsers, the W3C have listed that only sixteen of these color names are “valid”. They are (and why these particular colors, I’m not exactly sure- although they do seem to cover all bases):

  • Aqua
  • Black
  • Blue
  • Fuchsia
  • Gray
  • Green
  • Lime
  • Maroon
  • Navy
  • Olive
  • Orange
  • Purple
  • Red
  • Silver
  • Teal
  • White
  • Yellow

Of course, nobody wants to be remembering color names these days- and when I don’t want to open up Photoshop, I turn to Chirag Mehta’s Name that Color, which gives you the color name, its hex value, and its RGB values.

If you have a little more time on your hands, check out the very awesome Color Scheme Designer, which can keep me busy for hours. It sports a quick-loading, and lovely, interface, as well as “page examples” with your chosen color palette. You get hex values upon rollover, or you can export in several formats.

How do you use colors in CSS?



How Important Is Brand When Launching A Web App?

Think Google. Think Twitter. Think Microsoft. Think WordPress. These are either established brands in their respective industries, or hip, new startups that have made the grade. These are already mainstream, with instantly recognizable brands and names. If you’re just starting out with a web app or service of your own, don’t you want to achieve this status someday?

How important is the role that a brand name plays in the success of an online venture?

And if brand is so important, is it also very important to consider the domain name early on in the planning stages? All of the brands I’ve cited above have their own .com names. But what if you have an excellent brand idea, but realize later on that the domain name is no longer available–at least on the popular .com and .net TLDs?

I’m in the process of planning and launching several new online ventures. And among the first considerations I’m working on are the brands and domain names. For this reason, I’ve already purchased several domains that I’ll possibly use. I’m also thinking of using existing domains I own, which I could just turn into a brand, like what I did with WorkSmartr.com, which I turned from a productivity blog into a site for outsourcing online work.

Here are a few things I think are important when choosing a brand.

A name that sticks. As I see it, brand is an essential aspect of business building. People are better able to remember something that they recognize easily. People are more likely to use a product with a cool sounding name. If your brand has made it into pop culture, then even better. See how you can “google” a word or “tweet” an update.

A name that’s descriptive. Another consideration is whether your brand is descriptive. This makes it easier for people to search for you. If you want a blogging platform, maybe the first thing you see on searches is “blogger.” Or how about Twitter Buttons? The domain name is usually one of the things that can help search optimization, so why not get one which already has the keywords you need?

A play on words. Web 2.0-ish names have been popular and everyone had been jumping on the bandwagon. Flickr started it, and a host of others followed (I must admit I do have my own domains that use a similar variation).

A name that’s flexible. Sometimes, getting the exact domain name may not necessarily be an absolute requirement. Think Dropbox. It’s a popular application, but they’ve had to be content with getdropbox.com. How about Backpack, which uses backpackit.com? It’s not the end of the world if you don’t get the domain name you want. For instance, I realize a business called “Racoma” owns the domain racoma.com, which incidentally stands for my surname. So I have had to use racoma.net and racoma.com.ph instead. What’s great is that because I’m more active online, my sites running on the .net and other domain extensions are more searchable than those that don’t belong to me.

Remember that a brand should stick in your target audience’s mind. If it doesn’t, and if your venture doesn’t succeed as planned, then it’s probably time to move on to the next one. I’ve seen it happen before. It’s not so difficult to rebrand, relaunch and redesign in today’s online environment.

No matter what, just make sure your name doesn’t fall under that “stupidly thought of” brand or domain, just like these “unintentionally worst” company URLs. That would be a laugh.



Online Backup Solutions for Disaster Prevention

When it comes to backing up data, you’d think I had it all taken care of. I have two external hard drives connected to my workstation, and I’m supposed to sync the files on these drives every day, so I have two backups- but I don’t, of course. I save everything on one drive, foolishly confident that the latter won’t freeze up and die on me all of a sudden.

Which it did. Two days ago. Right before my eyes, folders on the drive were disappearing. And I lost everything on it.

It wasn’t all bad, of course- I still had the data on the other drive, but it was about a month old. Everything since then- photos, videos, PSDs, music files- was gone.

Since then, I’ve been researching various online backup solutions, and that’s what I want to post about today. Here are the best of what I’ve found:

Their MozyHome solution costs $4.95 a month for one computer with unlimited backup. They also offer a 2GB account for free, no strings attached- perfect if you need to backup only a couple of important files, not your entire system. A Google search on Mozy will bring up a lot of good and bad user reviews, but for something simple and very affordable, it’s definitely one to look at.

This one’s probably got the best interface, IMHO. Dropbox works sort of like Mac’s iDisk- it shows up as a disk on your desktop- but it’s really more of online storage space rather than a full-on backup service. If that’s all you need, this might just be the best choice. Check out their screencast for details on exactly how it works. You can get a free account that includes 2GB, or upgrade to 50GB for $9.99 a month.

Backblaze is one of the newer services. I actually did try it out a few months ago, but although I was impressed by its ease of use (set it and forget it), I didn’t like that I couldn’t choose exactly what was going to be backed up (only what was excluded). I’m a bit of a control freak, though, so if you want something fuss-free that’ll back your data up while you carry on with your life, do look at Backblaze. It’s $5 a month per computer for unlimited storage, and they have a free trial for Intel Macs.

Google Storage.
The three solutions I’ve mentioned above are all traditional backup and storage services, but given that all my email is forwarded to my Gmail account anyway, and with the announcement of Chrome OS, I have to consider the option of storing my data with Google. I am currently using about 3 gigs of my alloted 7.95 gigs at Gmail, and it turns out I can purchase additional storage from Google, starting at 10GB for $20 a year.

Do you use any online backup solutions? What services do you recommend?


Design Focus

Friday Focus 07/10/09: Featuring Food

Apologies for posting this a day late, but I will try to make it up to you with yummy-looking websites. It’s a food-centric Friday Focus!

Designs of the Week

About Seafood

The full-width background photo under the earmarked recipe notecard is great. Unfortunately I’d rather that the top navigation wasn’t part of the Flash objects on this site. I like the very subtle grungy texture used here as it does seem to reinforce the seafood/marina feel.

Eat Seasonably

A very green website, both in color and food group. Perhaps the best way to present veggies (and fruits) is to photograph them on a crisp, white background, and that works quite well here.

La Bodeguita de María

This is a nicely-designed restaurant site—elegant photography, rich dark hues, and good spacing all over. I like the high-res icons jutting out of both sides of the layout.

Orca Bay Seafoods

Another full-width background photo effect, this time it’s much bigger and has several rotating images. I kind of wish the content below it were longer—more than 3 links each for the new and popular recipes, for example—because you want to give more diverse options to your readers.

Food Tease

This is one of the more “different” designs of the bunch, because of the illustrations, brighter colors, and the overall lighter attitude this site has. But, really, when it comes to food websites, the greatest measure of good design is in the food photography, so make sure you prioritize that!


How pretty is that lettuce as a frilly background! Brings way more to the table than any other Photoshop brush, no? I would’ve liked a little more tweaking on the navigation but on the whole this is a nice, clean site. Very easy on the eyes.


We get a more hip atmosphere from this site, but the food photos are still front and center. Great JavaScript effects, typography, and color scheme.

Social Media Weekly

Design, Typography, Freelance25 Must-Read Books For Designers, Typography Lovers And Freelancers

User Experience, UsabilityRecommended Books for your User Experience and Usability Library

DesignUsing Wireframes to Streamline Your Development Process

HTML, CSSFour Methods to Create Equal Height Columns