The Design Secrets of Collis Ta’eed

Collis Ta’eed, co-founder of Envato, is one of my favorite designers. His designs have a certain quality that you don’t see just anywhere. They’re simplistic, stylish, and unique.

Freelance Switch

The Netsetter

Net.Tuts+

What makes the designs stand out of the crowd? Small touches. Little things that add to the design, and give it a more polished look. They’re fairly easy effects to pull off if you know how.

Edge Effects

Anywhere a background of one color meets another, the edge can be softened with a little “bevel” effect.

Edge Effect on Freelance Switch

Edge Effect on Net.Tuts+

Edge Effect on Net.Tuts+

As you can see, what ends up as a neat edge between two sections is a simple trick involving a dark one-pixel line, and a tiny gradient. If you want to see a lot of this effect in action, visit the Blog Action Day site. If you have a way to zoom in on parts of the screen, try using it to observe how the effect is done. (The ColorZilla extension for Firefox has such a feature.)

Spacing

What’s not there is often more important as what is. Ample paddings and margins and a bit of spacing between lines of text go a long way to improve a design. Whitespace leaves the user room to breathe as they navigate a site. If you cram everything together, you end up with a mess.

Spacing

Subtle Gradients

Flat colors will only get you so far. A subtle gradient here or there will liven things up. Be careful of gradients, though, and keep them subtle. If you make the color shift too pronounced, the result will be very tacky.

Gradients on Net.Tuts+

Can you spot all of the gradients in the image above?

Conclusion

Obviously Collis Ta’eed isn’t the only designer to use these techniques. They’re everywhere. Collis simply uses them well, and often. Keep these techniques in mind, practice them. And have a look at the sites in the Envato network; besides having good design, they have some great content worth trying.

  • Lachy Groom

    You do know that Collis only designed a few of these don't you? http://valendesigns.com/ did most…

    • http://valendesigns.com Derek Herman

      No, I did the code and Collis did the designs. I'm a WordPress power user and can and do design with the same level of detail for my personal and other client projects, but as far as Envato sites go Colllis does the designing and I do all the coding.

      • http://intensedebate.com/people/redwall_hp redwall_hp

        See, I know what I'm talking about. ;)

  • sjl

    Yeah, Envato owns these sites, but the designs were outsourced. ;)

  • Joel

    No, they were not outsourced. And valen works for Envato.

  • http://zbra.co.za zbra

    @Lachi and @sjl… you are so wrong !

    valem just does the slicing and coding from Collis's designs…

    You should know your facts before posting.

    Collis has designed every single one of the Envato sites and influences the way most sites look today !

  • http://kicklightoriginal.com/ Andrew

    Those are some beautiful sites. I could not believe that site Haven Works was real. People actually visit it?

    • http://intensedebate.com/people/redwall_hp redwall_hp

      I don't know… It's been around for awhile, and the content certainly changes. I, too, wonder if people actually visit, besides when someone links to them as an "OMG. Bad. Design." example.

  • http://ismartphones.net/ Aleksey

    Nice themes. Say hello to your designer. I always like people which can produce masterpieces pictures, music or sites as well.

  • http://allofstarwars.com/ Luke Skywalker

    I like freelanceswitch.com site. I am interested how dim/highlight effect on upper menu buttons he did? Is it image rollover or CSS?

    • http://intensedebate.com/people/redwall_hp redwall_hp

      It's CSS. It looks like an a:hover trick. The links are set to be a light color, and then a CSS rule along the lines of #navbar a:hover { color: #000; } darkens the text when hovered over.

  • http://btstore.net/ Chris – Bermuda Triangle

    I like the edge effects in the 1st and the 3rd site, makes the site look more…digital.
    I checked envato’s site and found that the tutorials it gives are really handy. Also i like the marketplace because you can make a little profit or just buy some themes. I found out that wordpress themes are quiet popular merchandise on a lot of sites.

  • Rosa Mannelli

    Ample paddings and margins and a bit of spacing between lines of text go a long way to improve a design. Joseph

  • Naoma Laopa

    You can only achieve so much with flat hues. A tiny bit of gradient here and there will provide some vibrancy. | el paso