Obviously I can’t tell you much about it right now. I don’t want someone to steal my idea and write that novel instead of me, you understand? So I’m writing it in stealth mode.

OK, I’ll tell you this: it’s about vampires. And it also has zombies in it. Kinda like if you put the best parts of Twilight and The Walking Dead together. You can already see how it’s going to be genius! But I’m giving away too much, sorry. And like I said, this is going to be huge so please don’t share this with anyone else.

I’ve never written a novel before, but this idea is so good that I don’t see how it couldn’t be a success. After all, ideas are everything, right?

I thought this would be a good occasion to take a look back at this page’s evolution over the last couple months.

I’d like to thank Markup Service for coding my design. They let me try out their service, and I don’t regret it. They did a great job of perfectly reproducing my Photoshop mockup (as you can see for yourself), and got it done in just one day!

First of all, you’re probably wondering what Sharypic does. Sharypic is a web (and soon mobile) app that lets you create photo galleries that aggregate pictures from multiple sources: Facebook, Flickr, Picasa, and even Twitter if you provide a specific hashtag to crawl.

The app was originally geared towards private gatherings, but we slowly realized that it truly shined for bigger public events. As attendees tweet out photos on Twitter and Instagram, you can browse them live in a single gallery.

The Beginning

When the Sharypic team (FJ, Christian, and Martin) first contacted me, here’s what they had:

Comic Sans and Lobster together: don't look directly, you might go blind

A fairly complex and detailed wireframe as you can see. Wireframes can be helpful, as long as nobody expects you to stick too close to them. After all, this early in the process it’s hard to know if you’ll need, say, three columns or four.

My first job was to simplify the layout and try to extract the most important parts. The two big questions to ask yourself at this stage are:

• What are the user’s goals?
• What are the company’s goals?

Here (as is often the case), the user’s goals are to learn more about the product, and the company’s goal is to get them to try it out. The updated low-fi mockup reflects this:

Low-fidelity mockups let you focus on content and layout first

Colors, Fonts, and Style

Since Sharypic is a consumer startup and its users could be everybody from newlyweds to tech conference organizers, I knew from the start that I wanted to project a friendly, warm atmosphere and create a fun and inclusive brand.

For the font, we quickly settled on St Ryde. Its beautiful curved shapes bring a funky , friendly attitude but at the same time it’s still readable enough to be used for body copy. In fact, we liked it so much that we decided to use it for the logo, too.

The second big design decision we made was to make purple Sharypic’s color. I was influenced by Seth Godin’s Purple Cow book, which states that you should strive to be as memorable as, well, a purple cow.

Comparing the evolution of the homepage, it’s interesting to see that the purple actually became less present over time, and is now used more as an accent color.

The First Version

Friendly, funky, fresh, and purple

There were a lot of very cool elements in this mockup. I combined St Ryde with Kyle Steed‘s Clumsy to give it a hand-drawn feeling.

We decided to keep this for now, as we still had the actual app’s design ahead of us (although I’ll leave that part for another post).

The Second Version

So why did we decide to change the homepage? Well, while I was working on the app’s UI, the Sharypic guys assembled a dream team of designers. Sean Farrell produced a logo, and Pasquale D’Silva contributed an illustration.

The second homepage took those new elements (along with the just-designed gallery UI) and put them front and center.

The second homepage

It was also bolder and fresher, with a clean white background that made the green and purple pop. And to make it stand out even more I decided to align the logo to the right.

A big influence for this design was the Rapportive homepage. It manages to look nothing like a traditional “web 2.0″ site (logo top left, navigation top right, you know the drill), yet is immediately understandable and has a great flow.

The Third Version

We were all pretty happy with the current design, so why change again?

Well, Steve Blank defines a startup as “an organization formed to search for a repeatable and scalable business model”. The key word here is “search“.

As time went by, the Sharypic team realized that they couldn’t simply target consumers. With the abundance of free photo sharing services, getting regular users to pay for a photo gallery would be a tall order.

This is why they decided to start focusing on business, and more specifically event organizers. Christian soon concluded that the current homepage did not fit in with this direction:

We were really satisfied with the last version of sharypic landing page, but as our business was evolving to target more and more professional event organizers, we wanted our landing page to look less cartoonish. The direction we gave to Sacha for this new shot was to focus more on sharypic content and showcase events currently active on sharypic.

So we got to work on a new version:

The third version: cleaner, simpler, better

This new homepage was inspired in part by Windows Phone and its tiles. I used clean, straight lines to let the photos shine through instead of burying them under highlights and drop shadows.

Straight lines and right angles tend to feel a little cold, so to offset this I used Markerfield, a great script font that I first saw employed by the Intercom guys.

Layering elements to play with depth

I also used drop shadows and embossed effects to play with depth, while making some of the elements break out of their boxes to add movement to the layout.

Overall I’m pretty happy with this new direction. It feels more grown-up and laid-back, like browsing through a photo album at your own pace, whereas the previous versions were more like an over-excited friend shoving his vacation pictures in your face.

So what do you think? Did you see an improvement over time, or did you like the previous versions better? Let me know!

For example, if you’re developing a WordPress theme, you can’t ask potential buyers to buy a monthly subscription, and you can’t bundle a font with the theme either unless it’s free.

For those cases, Google’s Webfonts service remains the only way to use non-standard fonts in your designs.

By the way, this post was inspired by Matthew Butterick’s own critical look at Google Web Fonts. Matthew makes some good points, but overall I still think Google Webfonts is a great initiative.

That being said, I can’t deny it’s fallen victim to its own success: the directory is now overrun with fonts of dubious quality, which means it can be hard to pick the right one. And Google Webfont’s own clumsy design doesn’t help.

Cramped typography and no breathing room makes for an ugly experience

To help you out, here are some questions to ask yourself when picking a font from a service like this:

• Is the font right for the job? Some fonts are referred to as “workhorse fonts”, meaning they’ll do the job in any situation. Most Google fonts are not like this. Instead you get a lot of quirky, single-use fonts. Nothing wrong with that in itself, just make sure you use them appropriately.
• Do you get the whole font family? A lot of fonts on Google Webfonts are only available in one weight (i.e. no italic or bold version), making them unsuitable for body copy (but headlines are usually no problem).
• Is the font available for download? If you like to mock up sites in Photoshop first (or, as Robin points out in the comments, need to use the font for non-website materials as well), make sure the font can be downloaded somewhere as well. Fontsquirrel is usually a good place to check.
  EDIT: You can actually download fonts straight from Google Webfonts (“use collection” and then “download collection” in the top right). So disregard this point!
• Is the font overused? Once a font becomes popular on Google Webfont, you’ll see it popping up everywhere on the web (I’m looking at you, Lobster). It’s usually much preferable to use a font when it still feels fresh and original, especially for fonts with very distinctive characteristics.

And here’s a quick list of my personal favorites. And no, I’m not going to put up screenshots for each one. Just click on the damn links!

Sans-serif

I find that there’s a real lack of depth in Google Webfont’s sans-serif department. As far as I know, no font in there approaches the quality of a Gotham or Proxima Nova even remotely. Pretty much the only font that I’d use even if it wasn’t free is the awesome Ubuntu by Dalton Maag.

• Ubuntu
• Josefin Sans

Serif

To be honest, if I didn’t have access to premium fonts I’d probably stick to Georgia as far as serifs are concerned. Still, Vollkorn is worth checking out.

• Vollkorn

Slab serif

Someone at Google must love slab serif fonts, because for some reason there are a ton of them on there, including some very nice families:

• Arvo
• Josefin Slab
• Crete Round
• Kreon

Script

I find that script fonts can get away with being a little lower quality than normal fonts. In some cases, their imperfections can even give them more personality.

• Bubblegum Sans
• Coming Soon
• The Girl Next Door
• Pacifico
• Delius, Delius Swash Caps, Delius Unicase
• Handlee

I’ll be honest with you. From this list, the only two that I’ve used in real-life designs are Ubuntu and Arvo. I feel like Google Webfonts is a great initiative, but right now font quality is a far cry from paying services like Typekit.

I’m sure it will improve though, and I’m looking forward to seeing the fonts that come out in 2012!

Oh, and if I missed some of your favorite fonts let me know in the comments!

Google is also now encouraging people to fund new fonts on Kickstarter. I think that’s a great initiative and I’d link to it, except that whoever built Google Webfont’s awful site decided they were too good for plain own hyperlinks, and uses fancy JS pages that you can’t link to.

Update: here are two very nice sites that help you pick good Google Web Fonts:

• Beautiful Web Type
• Better Google Fonts

I suggested maybe he shouldn’t look for a co-founder, and focus on finding a freelancer instead.

My advice was to hire someone for hard cash for a month or two first, and if things go well, only then ask them to transition into a co-founder role. Let me explain why.

1.  Scarcity

Take all the people around you who have the necessary skills to become your co-founder: coders, designers, marketing guys, whatever you need.

Now remove those who have no interest in the startup lifestyle. Hey, where’s everybody going?

Now keep only those who want to try the startup adventure, but are not already working on their own startup.

Pretty small group, right?

Launching a one-man startup now has a very low barrier to entry. So we end up with a world where everybody wants to be a startup founder, and nobody wants to be a co-founder.

2. Time

Looking for a good freelancer takes time. But looking for a good co-founder takes even longer!

After all you’re giving away part of your company, so it’s a big commitment. So not only do you have to make sure they’re competent, but you also need to get along well with them on a personal level.

All the time spent looking for the perfect co-founder could be used to hire someone and get some actual work done instead.

If things don’t work out with a freelancer, you can easily try out someone else next. And hey, at least you’re on your way to a working prototype!

3. Commitment

When you tell me you’d like me to join your startup as a co-founder in exchange for equity, here’s what you’re thinking:

I’m offering you a once-in-a-lifetime opportunity to share my dream and make it big, and I’m even willing to offer you a huge chunk of priceless equity!

But here’s what I hear:

I have this nifty little idea but I don’t really have any money. So to try it out, I’m looking for other people to work with me for free. Hopefully it won’t fail miserably like 90% of startups!

I know, I know: you really believe in your startup, and would do anything to make it succeed. How can I even doubt you!

But answer this: who seems more committed to their idea, the startup founder who works tirelessly on their project, or the one who works tirelessly and on top of this spends $4000 out of their own pocket to hire a great coder?

Personally, there’s no doubt in my mind which startup founder believes in his idea more.

4. Shares

Let me first say that I’m not an expert in this field*. But it seems obvious to me that the less equity you give away, the better.

*Although I did see the Facebook movie.

5. Money

You know that great college friend of yours who’s a genius coder and would be perfect as a co-founder? The one that’s stuck in a boring office job? If only you could make him see the light and embrace the startup lifestyle…

Too bad he has a family to feed and bills to pay. Even in the Silicon Valley, you can’t yet pay for groceries with startup equity.

But what if you offered him a salary, at least for the first couple months? Not a huge salary, just enough to put food on his table and make sure he doesn’t get evicted.

That might be enough to tip the scales and convince him to join you.

6. Traction

Asking someone to join you as a co-founder means asking him to invest his time and energy. And one of the most effective ways to convince someone to invest in your project (whether as a co-founder or actual investor) is to be able to demonstrate traction.

If you hire a freelancer to build a prototype first, you’ll be able to approach potential co-founders with a much more attractive offer: “here’s a product that already has X amount of users and is growing fast, how about helping me develop it?”

But I don’t have the money!

Hiring a freelancer is not that expensive. You can hire someone for a month for a couple thousands dollars, and a month is plenty of time to build a prototype if that’s all you’re doing.

If you say that you can’t manage to come up with even $3000 or $4000, that tells me two things: first, you don’t have any monetizable skills, so you don’t sound like a very good person to build a startup with.

Second, you’re not very resourceful, and that doesn’t play in your favor as a startup co-founder either.

I’m not saying you should sell breakfast cereal, but you can at least try to borrow seed money. If friends and family won’t invest in you, what makes you think a complete stranger will?

Chicken and pigs

I think another big reason why startup founders are reluctant to hire freelancers is that they’re afraid they’ll only be in it for the money.

It’s the old Chicken and Pig story: you’re looking for someone who’s committed to your project, not just involved!

Dan Pink’s book on motivation also backs the idea that external motivations (like money) are less effective than internal ones (like believing in a project).

But is it really that simple? I’m sure there are lots of stories of co-founders who ended up not being that committed after all. And as a freelancer myself, I like to think my contribution to startups goes beyond mere passing involvement.

So my goal with this post is not so much to have you stop looking for a co-founder (despite the title), but to at least convince you to put the freelancer option on the table.

If you’re a HNer, you can vote/comment on this post over at Hacker News

Did you know Codecademy is hiring designers and developers right now? Take a look if you want to join a great startup!

So far more than 75,000 people have signed up for the newsletter, making this one of the most quickly successful projects I’ve ever been involved with by far! Here’s how it happened, and as I go I’ll also point out more general design principles or techniques using bright yellow notes thingies like the one just above.

10:32 pm: Open email

Last Friday, at 10:32 pm I received an email from Zach from Codecademy asking for some last-minute feedback and tweaking on a design they were getting ready to launch. At that point I didn’t know that the “last-minute feedback” would evolve into a full-on redesign, all in one hour!

The design Zach showed me was looking good, but we figured it could nonetheless be improved. First of all, it didn’t really grab your attention, as there was no strong focal point.

Also, it was a little too complex, as the “subscribe” and “share” steps were both present onscreen at the same time (whereas they now happen in sequence).

So despite the late hour, I said I didn’t mind helping, got the PSD, and hopped into Photoshop for a few quick touch ups.

10:40 pm: Launch Photoshop

You can guess what happened next. If there’s one thing designers hate more than anything, it’s working on somebody else’s Photoshop document. So I decided to open up a new document, set up a grid, and quickly reproduce the current design.

I ended up changing quite a few things, ending up with the design below:

Click for full size

I showed this to Zach to keep him up to date on my progress, but told him I could do better. I wasn’t satisfied with this because it lacked identity.

10:57 pm: Find the perfect font

I decided to try out a different font. Helvetica is nice, but it’s over-used and doesn’t really generate any emotion in the reader.

Using a standard font often means you’re missing an opportunity to make a statement and create a connection with the user. This is why I chose Museo Slab, a strong yet playful font that I knew was available on Typekit as a webfont.

Also, there was no central branding element. Even for a single-use site like this, I like having a strong brand, so I quickly mocked up a logo using Museo Slab as well. Here’s the result:

Click for full size

Simply changing the font made a world of difference. However, you’ll notice that’s not the current Code Year logo.

11:05 pm: Browse stock icons

I had originally picked a lightbulb (out of the Classic iconset from IconDrawer) to represent the “lightbulb going on” in your mind when you understand something new.

Just like knowing which font to use and when, having a good icon library is vital to being a good web designer (unlike you can actually draw them yourself, which is not my case!).

However I soon realized that a calendar would be much more appropriate (after all it says “year” right there in the name!).

I also added in the Twitter and Facebook buttons in the header, and moved the Codecademy logo to the left to make space for them:

Click to view full-size

11:13 pm: Hold texture try-outs

It was looking good, but I knew it was still missing something to “make it pop”. So I decided to try out adding a background texture to the page.

My process to pick a background is simple: try out all of them! That’s why you need good textures in your library. I suggest taking a look at SubtlePatterns.com

11:22 pm: Design the quotes

The last step was designing the little quotes that ended up replacing the big boring blocks of text in the final design.

Elements like quotes, testimonials, notices, etc. are a good way to break the flow of the page to refocus the user’s attention and slow them down. Kinda like the note you’re reading right now!

By then it was getting late, so I decided it to call it a day. You can see my final mockup below, and you can compare that with the live final result.

Click to view full-size

The moral of this story is that you don’t always need weeks –or even hours– to create something. Sometimes you just need to stop over-thinking things and trust your creative impulses. That’s what makes working with startups so great.

Folyo is a private job board that helps startups find amazing designers, and I officially launched it in September. So far it’s helped several companies (here’s an example) find great freelancers, and quite a few designers are now using Folyo as a source of interesting projects.

It’s the end of the year, so I thought I’d reflect on a couple things I learned in the past couple months:

Don’t skip the MVP

The List, the first incarnation of Folyo

MVP stands for Minimum Viable Product, and it simply means the most limited possible version of your product that is valuable to people. Or, as Eric Ries puts it:

The minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.

The MVP is especially important for bootstrapped startups because of the “least effort” part. When you don’t have outside funding, every resource counts (actually, that’s true even if you do have funding, but you know what I mean), and you can’t afford to spend time and energy on a dead end. This is why it’s so important to validate any new product or idea as quickly and cheaply as possible.

Folyo’s MVP was an email newsletter simply called “The List”, and in fact it didn’t even have its own domain. From June to September 2011, I registered as many great designers as I could to the newsletter, and then contacted startups and incubators to suggest posting job offers if they were looking for designers.

Technically, The List was as minimal as possible, and it cost me nothing to create and manage (apart from my time). I hooked up a Wufoo contact form to MailChimp to manage designer subscriptions, and as for job offers, I simply forwarded any Wufoo submission to Posterous to automatically create a blog post for each job offer.

Unlike Folyo, The List was free, which means I didn’t validate a business model. But at least the experiment did indicate that there was a need for such a service, since quite a few companies posted projects and found designers through it.

So after successfully running the newsletter for about a month I started working on its successor, which would this time be a “real” web app.

Know when to outsource (or not)

Hacker News freelancer threads, a great source of talent

One thing I struggled with early was deciding if I should try and do everything myself, or hire someone. I had already started learning Rails, and to be honest I could even have chosen to do everything in PHP.

But after talking with my friend Sean from Bushido, I decided to hire someone. What he helped me realize was that knowing when and how to outsource was a valuable skill in itself, and one that (unlike coding) I had no experience in.

So my reluctance to hire a coder wasn’t due to perfectionism (as I was telling myself), but simply to being afraid of venturing into new territory. Once I got over that fear, I realized that this new skill would be extremely valuable to learn, and hired Jonathan Bryan (whom I originally lured in with the promise of working on a completely different idea, Talkbee).

This proved to be a good investment, as not only did Jonathan do a great job, he also became my own private Rails tutor. Turns out that when you’re paying someone by the hour, you don’t feel bad about asking dumb questions.

Since then, I’ve become confortable enough with Rails to implement new features myself, and I’ve gone back to my self-sufficient ways. But I have no doubt that hiring a developer to get things started was the right move.

Start small, start local

My new strategy: start local

This is something I only understood very recently.

Back in December, I got a chance to hear Brian Chesky (co-found of AirBnB) speak here in Paris, and one thing he said really stuck with me. He told the audience how he’d once mentioned to Paul Graham (of silicon valley incubator YCombinator) that most of their users were in New York, and Paul answered: “well, what are you doing here then?”.

Brian then explained how they’d organize meetups and parties for their early users, just to get their feedback and create a sense of community between them.

The lesson for me was that even if your ambitions are to take over the world (with AirBnB certainly seems intent on doing), you’ve got to start somewhere.

Folyo is an international site with an international audience, and there’s no reason why a company from Brazil couldn’t use it to hire a designer from South Africa.

However, I now realize that it’s going to be much easier for me to find clients and get traction here in France first, simply by virtue of physically being here, and having connections here.

So I think that even in the age of globalization it’s important not to skip steps. Start by dominating a niche (which could be local, an online community, a specific market, etc.) and expand from there.

Blogs are not your friends

If TechCrunch was honest

Blogs like Techcrunch, ReadWriteWeb, or Mashable write about startups, so if I tell them about my startup they’ll write about me, right?

That’s basically what I used to think before realizing how wrong I was. Those blogs don’t write about “startups”. They write about 1% of startups (and I’m in the 99%!).

I contacted most of the biggest blogs, and do you know how many of them ran a story on Folyo? None.

Do you know how many had a real, live human reply to my email to tell me they were not interested? None.

Do you know how many sent me an automated rejection email? None.

I can only imagine my emails are collecting virtual dusts and spiderwebs in a big pile of unread messages from other hopeful young startups. Next time I feel like contacting tech blogs, I think I’ll write to Santa Claus instead. I’ll have a better chance of getting a reply, and having my wishes come true.

So the lesson here is: if your communication strategy sounds something like “1. Create cool product. 2. Have TechCrunch blog about it. 3. Profit!”, I have some bad news for you…

People don’t care much about you either

Woohoo! 11 people, a new record!

Startups suffer from a strong case of survivorship bias. The startups that we do hear about are the ones who are successful at, well, making people hear about them.

The logical fallacy goes something like this: Every startup that I know of, I hear people talking about it on Twitter. So if I launch my startup, people will talk about it on Twitter!

The problem is that you’re not considering all the startups that you do not know of, precisely because people are not talking about them on Twitter (or Facebook, or blogs, or podcasts, and so on).

And the bad news for you is that your startup will very probably fall into that last category. Meaning you’ll quickly be faced with the very harsh reality that people just don’t care about your startup.

So your job as a startup founder is not just to create a great product, it’s to do that and then make people care about it.

Or alternatively, make people care about something, and then once you have their attention, try to sell them your product. That’s what I’ve been doing with Folyo by writing  guides and blog posts to help drive traffic to the site. Sure it’s a ton of work, but at least it’s fun (provided you like writing), and so far I haven’t found a better way.

Free products attract users (or at least they should)

On the net, apparently there's such a thing as a free lunch

Folyo charges companies to post an offer, but is completely free for designers. And although I’ve struggled to find paying clients, I’ve had no trouble recruiting designers to join the site. There’s about 300 of them so far, and I even reject most of the applications to preserve a high quality.

My strategy to recruit designers to Folyo? Simply ask them if they want to join, one by one, via Dribbble or Twitter. It takes time, but most people accept (and are in fact grateful for hearing about the service!).

So if you run a free service and still have trouble attracting users, I suspect you’re not offering something valuable enough, or maybe you’re not solving a real problem.

Run a marathon, not a sprint

You and your competitors

If I people had invested money in Folyo, or I had employees depending on me to feed their kids, I’m pretty sure I’d be a nervous wreck right now, obsessing over conversion rates and business plans.

But since I didn’t, I feel no pressure at all. If this thing works, great. If it doesn’t, oh well. In fact I’m pretty sure the site could even go down for a couple days without affecting things much either way.

That doesn’t sound like the usual party line of working 80-hour weeks, eating instant ramen, and sleeping in the office (although I do those last two things, because I love ramen and work at home).

But I’d much rather start slow and small, and make mistakes when they don’t really matter, instead of burning through cash, energy, and people going in the wrong direction.

Hard Stats

State of the art accounting technology!

As an experiment, I’ve decided to be open with how Folyo is doing (at least for now). So here are some facts:

• Development costs: $2,640
• Ad Campaigns (StumbleUpon & InfluAds): $640
• Revenue since launch: $1,870
• Average monthly income: $623
• Net loss: $1410
• Number of designers: 306
• Number of paying clients: 28
• Refunds (i.e. clients who couldn’t find a suitable designer): 7
• Average number of projects per weekly newsletter: 2.3

As you can see, there’s some good and some bad. The good is that I’ve got revenue and users, which is more than a lot of startups can say. At $623 per month, it’s not a salary but it’s already a sizable source of income.

The bad is that I’ve still got very few offers: I average 2.3 per week, which is a far cry from my target of 10 offers per week. And I’ve also not recouped my initial investment yet (to say nothing of the time spent instead of working on client projects, of course).

Enjoy the ride

It sounds cliché, but I think it’s important. You should enjoy what you do, and not just be thinking about the day when you get bought out by Google and can retire to Costa Rica.

Folyo gives me a reason to get in touch with great designers, and learn about exciting new startups. I’ve got people thanking me every week for the service, and users from all over the world.

Even if it never made another cent, I’d keep running the site just because I enjoy it. And I think that in itself made Folyo a success in 2011!

And although Christmas is over, I’m pretty sure people like free stuff all year round. So here are a couple of my favorite places to get your fix of shiny PSDs for $0.

365PSD

One of the first free PSDs sites, 365PSD promises a different PSD every day. Almost all of them are free, and you can also download whole-year packs for a couple bucks.

It was originally single-handedly maintained by Jonno Riekwel, but has since then been bought by DesignMoo.

DesignMoo

DesignMoo provides tons of free design resources, but it does require you to register before you can download them. DesignMoo has recently come out with a Pro feature that even lets you sell your own resources through the site.

PremiumPixels

PremiumPixels started out as the playground of WordPress themes superstar Orman Clark, but he’s recently been featuring other designers as well.

This site’s name is appropriate, because every single item is truly outstanding. There’s a strong emphasis on UI elements, which makes it a very practical resource for web and mobile app designers.

Design Kindle

Design Kindle is a relatively new entrant in this space, but it’s already got a lot of very high quality free stuff, with a focus on icons.

FreebiesBooth

It’s a booth, and there’s freebies inside. What more do you need to know? FreebiesBooth was launched by another great designer, Pawel Kadysz and features lots of very high quality icons and UI elements.

The Icon Deposit

 The Icon Deposit doesn’t feature just icons, but also UI elements and even tutorials and code snippets. In fact, Matt Gentile‘s specialty is UI kits featuring every possible form element under the sun. Who thought radio buttons could be this much fun?

Le Freebies

Prague design agency Breezy wins the prize for best name and best mascot with their freebies section. Although as a frenchman myself, I object to that English-looking guy smugly smoking his pipe.

But all is forgiven thanks to the tons of great freebies they provide, and I especially like their wooden AppStore button.

SalleeDesign

Speaking of French guys (and mustaches), Jeremy Sallée is the real deal. He’s got an extremely impressive portfolio (check him out on Dribbble!) and he’s nice enough to give out some of his work for free.

Honorable Mentions: UI Kits & UI Parade

Unlike the other sites featured here, UI Kits & UI Parade don’t actually upload content, they just link to freebies on other sites.

That being said, they’re still great resources that you should definitely check out.

Easter Egg: Dribbble

While Dribbble is not strictly speaking a freebies site, did you know it hides tons of free stuff? Just search for keywords like “free” or “PSD” to discover pages after pages of wonderful resources.

Updated on January 7th, 2012

PurtyPixels

Another nice resource, this one comes to us from WordPress theme designer Richard Tabor.

BlazRobar

Australian designer Blaz Robar shares some very nice PSD templates on his site.

Updated on January 11th, 2012

Pixel Pixel Pixel

Pixel Pixel Pixel promises three times the amount of pixels for the same price! Which, if you’ve been paying attention, is 0.

What I really like about this site is that it veers from the usual crisp pixel-perfect style and features quite a lot of distinctive retro-grunge stuff.

You’ve probably got enough free PSDs by now to fill up a couple hard drives, and crash Photoshop many times over, so I’m going to stop here. But if you know other good sites that I left out, please tell us in the comments!

Thanks to Alex, Hamza, Maurice, Mael, and Szymon for their suggestions for this article on Twitter!

The list was getting quite long so I decided to clean it up a little, and I thought it would be interesting to share the result. Without further ado, here are the sites, bookmarklets, and apps I use regularly in my design work.

Readability

Readability Read Now is a nifty bookmarklet that extracts the content of a page and displays it in a nice, readable layout. I don’t use it as much now that I send most of the content I want to read to Instapaper on my iPad, but it still comes in handy from time to time.

Space Ipsum

Space Ipsum is a space-themed Lorem Ipsum generator. Because space is cool, and latin is not.

Gridr Buildrrr

Another basic tool that every designer will eventually need, Gridr Buildrrr is a simple (you guessed it) grid builder.

Ultimate CSS Gradient Generator

When Alex Sirota designed the Ultimate CSS Gradient Generator he was nice enough to use the same gradient building UI as Photoshop, so it’s one less interface to figure out.

CloudApp

CloudApp has become an integral part of my workflow. Its basic use is uploading a file by dropping it on the CloudApp menubar icon, but the real gem is the Photoshop integration. In one keypress, you can take a screenshot of the currently open document and upload it to the cloud. Very useful to share what you’re working on!

DropMocks

When I need to share a single file with someone, I use CloudApp. But when I need a quick way to share a gallery, nothing beats DropMocks. Just drag and drop your images, copy the URL, and you’re done!

MarkUp

OK, I must confess I haven’t actually used MarkUp much, but it’s such a cool tool that I wanted to feature it here. It lets you draw on any website, and then share the result with a unique URL!

ProCSSor

Whether you’re one of those weirdos who like to debate over the various merits of different styles of CSS coding, or you just need to clean up a CSS file, ProCSSor will make your life easier. It lets you easily reformat CSS files, plus it has a beautiful UI.

CSS3 Generator

Look, I trust you when you tell me vendor prefixes are important. But don’t ask me to type them out myself. The straightforward CSS3 Generator will take care of the grunt work for you.

Layer Styles

Similar to the CSS3 Generator, but Layer Styles uses the exact same UI as Photoshop. Can be pretty handy when you’re looking for the quickest way to convert a PSD mockup in HTML/CSS code.

CopyPasteCharacter

Out of all the tools in this list, CopyPasteCharacter is probably the one I use the most frequently. It’s drop dead simple: you have a grid of unicode special characters (like arrows, smileys, etc.), and you just click one to copy it to the clipboard.

BrowserUI

BrowserUI is a set of Photoshop actions that add a browser frame around any image.

Type-a-file

Listen up, people: it’s (almost) 2012, and there’s simply no excuse to have ugly typography on your site anymore. Especially with a great site like Type-a-file, which gives you 8 pre-made type styles to use on your site.

FontFriend

“I like that site, but I wonder what it’d look like with a different font…?” If you’ve ever thought this, FontFriend is your, umm, friend. This bookmarklet lets you preview any site with any one of the Google Webfonts.

But wait, there’s more! Drag and drop any font file from your desktop to the bookmarklet’s UI, and it will actually use that font on the current page! No, I don’t know how it works either. My guess: magic.

Unused CSS

No matter how careful you are when coding your stylesheets, you’re bound to introduce some unnecessary elements. Unused CSS lets you know which CSS rules you can safely remove.

After running it on this site, it seems like 45% of my rules are useless. So either there’s something wrong with that tool, or I’m a really, really bad CSS coder. I’ll let you decide which one it is…

Cubic-Bezier

I haven’t actually used Cubic-Bezier yet in a real project, but I have to include it because it just looks so cool.

Dabblet

Lea Verou, the CSS master behind Cubic-Bezier, recently came out with Dabblet. It’s a very simple UI to write, preview, and share snippets of HTML and CSS.

SymbolAssist

So CopyPasteCharacter wasn’t enough for you, and you’re back for a double dose of Unicode goodness? SymbolAssist got you covered, with 30 different arrows, and yes, that includes the ☞ pointing-finger one.

WhatFont

Extra! Extra! Designer’s secrets exposed! Font selection revealed!

That’s the headline that the Design Times would print if such a publication actually existed, because that’s what WhatFont does. Hover over any section of a page, and this bookmarklet will tell you what font is being used there.

IdentiFont

Alternatively, if WhatFont isn’t enough, IdentiFont got your back. It’s a font search engine, and it’s got a very useful “find similar fonts” feature.

WhatTheFont

Last but not least, WhatTheFont is another font identification tool, and this one works very well. Upload an image, identify the letters, and it will do the rest. It’s even got an iPhone app so you can identify fonts on the go (and impress your date!).

NoisePNG

You can do a lot with CSS3, but one thing you can’t do (yet) is bring the noise. NoisePNG does only one thing, but it does it well, providing unlimited quantities of noise for your designs.

Patternify

I saved the best for last: Patternify is a tool that lets you create pixel patterns in the browser, and export them as base64 code that you can include straight in your CSS!

And it also happens to be my very own modest contribution to the webdesign ecosystem

There you have it. 23 tools that will make your life easier, or at least waste half an hour of your day.

But I hear this Internet thing has gotten pretty big lately, so I wouldn’t be surprised if I failed to mention one or two sites… Feel free to let me know in the comments if I missed your favorite tool!

When Watson wonders how such basic fact could be ignored by “any civilized human being in this nineteenth century”, much less by a detective famous for his intellect, Sherlock gives this explanation:

I consider that a man’s brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things so that he has a difficulty in laying his hands upon it.

On the other hand, a smarter person pays close attention to what he puts in his “brain-attic”, because he knows that “it is a mistake to think that that little room has elastic walls and can distend to any extent”.

I was reminded of this story lately when watching the BBC’s excellent modern interpretation of Sherlock Holmes. Just like in the book, a surprised Watson discovers that Sherlock doesn’t know the first thing about the solar system. And the fact that the series takes place in the 21st century and not the 19th only serves to underscores Sherlock’s ignorance.

However, I feel like there’s still merit to this idea of “not crowding up your brain-attic”. I recently read a great post by Adam Smith explaining how grit is the most important quality to succeed in any enterprise, above self-control and intelligence.

In that post, Adam discusses ways one can deliberately increase their “grittiness”:

Second, I wonder if it’s possible to trade away some self-control to get more grit.  That sounds like a good bargain.

Some studies show that willpower is a limited resource; if you use willpower for task A then you’ll have less left over for task B.  If this is true, maybe you should exert less self-control in some areas in order to have more willpower left over for commitment to your long term goals.

Doesn’t that sound a little like Sherlock’s philosophy? Letting go of certain things will make it easier to focus on what really matters.

I find that this principle applies to pretty much any area of life. If you’re not cleaning up your brain-attic regularly, it’ll quickly get filled up not only with pointless distractions, but especially with things that may seem like they matter, but ultimately don’t.

Stories about great men and women often emphasize how dedicated to their work they are, and how much they care about every little detail. But what gets left out of the story, is that to be able to care so much about one thing, you have to not care at all about thousands of other.

So here’s my advice: if you want to accomplish more, start caring less.

This was the era of full-flash sites, splash screens, and table-based layouts. It’s hard to convey just how different things were back then. There were no javascript frameworks, the Mac OS browser of choice was Internet Explorer (I know, hard to believe), and WordPress didn’t exist.

The mere idea of Content Management Systems was still so new that a lot of agencies still developed their own system in-house, or else didn’t bother at all.

This is how I ended up building a hundred-page product catalog website consisting entirely of static html pages. No database, no PHP… in fact the only thing that could help was Dreamweaver’s site-wide search and replace. However, the lack of version control (remember, it’s 2001) meant that one false move would irreversibly mess up the whole site.

Anyway, my point with all this is that it was pretty cool when WordPress came out a couple years later, in 2003. It pretty much democratized blogging, and then went on to be tweaked and adapted into a full-featured CMS.

It’s been nearly 10 years, and we’re still using our trusty old WordPress… But just because we’re using the same software, doesn’t mean our methods can’t evolve.

So I took advantage of my recent blog redesign to dig deeper and try to use modern tools and techniques instead of relying on the same old proceses.

I’m no WordPress expert by any means, so take all this advice with a grain of salt. But if you’re interested in a behind-the-scenes look at this blog, please read on.

Boilerplate Theme

My starting point was the Boilerplate theme. Based on Elliot Jay Stock’s excellent Starkers, it’s pretty much as bare-bones as it gets, except with a couple nice additions straight from the Boilerplate HTML5 template.

I mainly chose this over Starker because it seemed to have been updated more recently, but any minimalistic starter theme will do.

Git

The Mac OS GitHub app makes it easy to review changes and push to the server

At first, using version control for a simple WordPress theme might seem like overkill, but no way am I going back to the good old “make-one-false-move-and-delete-3-weeks-worth-of-work” days.

But not only does Git give you version control, it also makes deploying your site much, much easier. Provided your hosting provider supports Git (happily, Dreamhost does), all you’ll have to do to update your files once you’re setup is a quick git push origin. Goodbye FTP! I won’t miss you and your 5k/s upload speeds!

And if you’re allergic to the command line, don’t worry. GitHub has come out with a great  app for Mac OS. It’s free, and you can use it to manage your repository even if you don’t host your code on GitHub.

SASS/Compass

With SASS you can use variables, mixins, and even functions in your CSS

Not using Git feels like going back in time to the dark ages of web development, and so does writing “plain” CSS.

SASS and Compass make writing CSS so much easier it’s not even funny. Add variables and mixins to your CSS, say goodbye to vendor prefixes, and use awesome new syntaxes like nested CSS rules and the “&” character.

You can run SASS & Compass from the command line, or use this nice GUI.

Compass will automatically monitor a given folder (say, /sass) inside your theme directory and will compile your .scss stylesheets into regular .css files every time you make a change.

W3 Total Cache and Amazon CloudFront

You should probably be using this

When it comes to performance, WordPress is not top of the class, especially if you start adding fancy plugins. That’s why it’s especially important to use a caching plugin to speed up your site.

My favorite plugin is W3 Total Cache: it’s got everything you could dream of (including automatically minifying and merging CSS and JS files), yet is pretty easy to understand.

What’s more, it also integrates seamlessly with CloudFront, Amazon’s CDN.

What this means is that once you open a CloudFront account, all your static files (i.e. images, CSS, JS, etc.) will be served from whichever Amazon server across the world is closest to the user. This will speed up your site, and unless you get ridiculous traffic you won’t be paying more than a few bucks a month.

If like me you use both Git and W3TC, make sure to add w3-total-cache-config.php to your .gitignore file, otherwise W3TC’s settings will get overwritten every time you push to your server.

Backup and Sync

Please tell me you're not still using PhpMyAdmin

One of the common pitfalls of WordPress development is that as you write posts, you let your local dev install get out of sync with the remote website.

While we’re already syncing all site files with Git, we still need to take care of the database. The ideal way of doing this would be taking the local database and dumping it on the remote server, but I have to admit I haven’t found a simple way to do this yet.

So we’re going to do the reverse instead: write our posts on the remote end, then backup the remote database on our local machine. Fortunately, there’s a plugin that does just this, and it even comes with an automation script.

Oh and if you’re looking for a simple way to manage your databases, Sequel Pro is a great app for Mac (and it’s free!).

Disqus

The Disqus homepage. Show-offs!

I also decided to ditch the standard WordPress comments and use Disqus instead.

The reason is that Disqus lets people log in with their Twitter or Facebook accounts, and if they already connected on another blog using Disqus, they’ll be able to post on yours right away.

Plus, Disqus gives you a central repository for all your comments. And lastly, if you ever need to switch to another CMS, not having your comments tied down to WordPress will make it much easier.

The only downside is that using Disqus makes it a little harder to style your comments just like you want to. So if you want to get really fancy, it might not be the best option for you.

Miscellaneous Plugins

I'll just add one more plugin… Last one I promise!

Here are a couple other plugins I use:

• Contact Form 7: I asked on Twitter for a WP contact form recommendation, and Contact Form 7 was the clear winner. Gravity Forms also had some votes, but it’s not free.
• Raw HTML Snippets: Sometimes you just need to embed a raw HTML snippet in your post, and this plugin does just that.
• Revision Control: If you don’t want your database to balloon up as WordPress stores revision after revision of each post, you might want to give this a try.
• Search Regex: When you transfer a WordPress blog from one domain to another, image paths inside posts won’t be updated. This plugin fixes this by letting you search and replace across all posts.

Well, there you go. That’s pretty much all the tools I used to build this site. I know everybody has their own tips and tricks, so make sure to let me know in the comments if you have anything to add!