Function Web Design & Development Blog -

A close look at the Creativity of Illustrator Pasquale D’Silva

liam — Fri, 13 Nov 2009 09:59:24 +0000

Every now and then we all come across a designer who takes us by surprise, and reminds us what it means to truly be a creative person. This is exactly how I felt when nearly 2 years ago I came across the work of Pasquale D’Silva.

Although illustration and animation aren’t really things I do, the vibe that comes from Pasquale, and the level of creativity he keeps up is something we can all related to and respect.

When you stumble across somebody so creative in this industry it’s always a good idea to talk to them, and if their skills can work for you, work with them. I hadn’t really planned to find an illustrator to work with, but once I saw his work I just had to find an excuse to work with him. And in the past our previous meetings have worked out very well.

Having worked with such an interesting character, and got to enjoy his work over the past year or two I felt it would be nice for me to share some of his work with you guys and perhaps open some eyes to a guy who keeps me very intrigued, blows my mind and inspires me on a daily basis.

In this post I will be showcasing some of the fantastic work from Pasquale, and tying in some interview questions that I put to him. Plus read through to find out how to win a cool t-shirt from Pasquale.

Work of Pasquale D’Silva

Before we get in to the interview I’ve chose a selection of Pasquale’s work that I would like to share with you. More of his work will be placed throughout the interview.

01. You are clearly a creative guy. Can you tell us where did your interest in illustration & animation came from?

The plan was to be a mechanical and micro-electronic engineer. I wanted to build neat robots to fight each other to the death, and send things to the moon. Unfortunately that required a lot of boring math, and in my senior year, I swapped all my courses out to arts courses. It freaked my careers councilor out for sure..

I’ve always loved drawing and making funny things. I used to draw really weird things and write wacky, crudely illustrated stories when I was in Primary school.

I only seriously thought about animation & illustration as a career after watching Disney B-Rolls for hours on end in early high-school.

It was wonderful learning that there were a few adults who could actually make a living drawing animals, candlesticks, monsters & funny looking people for kids and adults (big kids) all day. I didn’t want a regular ‘boring’ job, so I just stuck my hands into drawing & animation!

After sending in a showreel of work to a local animation & effects studio, they were nurturing enough to take me in and train me up. It turned into a job working on a couple of animated television series, where I learned a lot of very valuable information.

02. What was the motivation for you to pull out of university & focus on your freelance work? Has the decision worked out for you?

University was a struggle. Not for grades - I was happily sitting at ‘honors’. I had been working for an animation studio before entering university, so jumping into it felt really sheltered.

Nobody was brutal enough with critique, and the bar was set pretty low. For something as subjective as animation, applying an academic set of criteria was almost ridiculous! It felt too mechanical, and it was hard to feel motivated to work on neat things.

I left at the end of ‘08 and haven’t looked back. That being said, I am still glad that I got to go to university and collaborate with friends. I ended up making a really fun little short, and had some great times sharing and learning from each other.

Freelance was doing great, and the north (America & Canada) presented a plethora of opportunities. I’ve been working with many new faces up here.

Everything is exciting and fresh! I think the best thing that came out of the big move to Vancouver was ending up in a place saturated with creative people, and being independent!

03. How is your time mostly spent? Is there a balance between your illustration work, and your animation work? Which of the two would you say you prefer spending time on?

For the most part, I’m Illustrating as Freelance work & animating for personal projects. Since animation is so laborious, it requires a pretty large budget to get rolling- so they are the more occasional pieces.

When I’m animating, I don’t get to spend as much time as I’d like examining and working each drawing; but when I’m illustrating I don’t get to see it move and come to life. So for that reason, I like to keep a pretty even split between the two.

04. If you had to choose some work that would define you as a designer what would it be. Talk us through the work and what makes it a perfect representation of you & your work.

Looking back at my art even months ago, I see a lot of change. In months from now, I’d probably pick something different, but I guess right now I’d say my on going ‘freak-a-day’ project (which has been daily sometimes in the past months).

I love pushing out really quick & loose drawings. I find that I learn a lot more about my quirks from spontaneous reflex drawing: Freak a Day.

After drawing studies, natural patterns occur in the choices of lines I’ll put down, so it’ always nice to have a collection of the looser sketches. Sometimes the freaks will come from ideas I dream up, or sometimes they’ll just emerge from a squiggle that I’ll use as the base shape.

05. You always have a great use of colour in your Work. Where does this understanding come from & do you have any tips you could share?

I find colour to be very non-formulaic, even though there are a lot of theories which help as a guide. I love just looking at nature for inspiration. Real life is the best thing to learn from. Don Shank & Lou Romano (Two of my favourite layout artists) are a big inspiration.

They develop the colour scripts & layout art for many of Pixar’s films by going out into the field with art supplies, and just slapping studies together. I think that colour is incredibly important to nail down in all types of design, be it web, print or animated! It really helps to establish mood & character.

If I have any useful tips for colour- I’d say it’s just all about examining what’s around you and studying what occurs naturally!

06. You’ve recently opened a shop! Talk us through what you’re doing, and what you have planned for the shop.

Yes! I am really excited that people can now own a physical copy of my art for their walls or chests! I just started working with a great screen printer; Sage Screen-printing who uses traditional methods to hand-press prints.

I was actually at his studio while the paints were mixed and pressed for my first line of limited edition tees! Being hand controlled, we got to control every fine detail from the colour contrast, to checking that every layering of paint registered properly.

I think having prints made in the traditional fashion is so rewarding. After seeing what goes behind it, I really fell in love with the method, and plan to roll out a lot more art designed for press.

It’s a great feeling being able see your art in a more tactile form than just on screen!

07. It seems that friends & collaborations with designers play a big part in your life and your work. Introduce some of these people to us and share what you’ve been up recently.

Collaborating with my friends and other artists is a blast. It means that I get a diversity of projects to work on, & get to make things even better than I could have produced on my own.

I just started co-hosting a weekly show with Timmy Allen (from Rev3’s Film Riot) & Nick Campbell from GreyScaleGorilla on motiongraphics & animation called Keyframe.

We hold a round table discussion about news, questions & breaking down pieces of work. We just finished our second episode, and hope that we can make each episode even better than the last!

I’m also working on a live action x animation film with my good videographer friend Josh Knepper. It’s called Packed.

Right now we are trying to develop our own methods to blend effects work with illustration & animation. We recently did a comprehensive rewrite of the script, & are now testing the final effect proofs in the coming week or two. For some reason, we also require a full body, skin-tight, green-screen suit; so we’ll be getting into some spandex soon…

My store system was built by my friend Brian Reavis who is an amazing wizard of code. I recently flew out to visit him & his equally talented brother and started building a crazy project that involves robots & twitter. - But that’s still under wraps!

…and of course there are the numerous collaborations I’ve had with you here at Function, Illustrating fun characters to share & more recently, the pieces put together for the redesign of Smashing Magazine!

08. Could you please explain why you have so many quick sketches or doodles uploaded online & what their importance is?

Animation & Illustration is my passion. Though I absolutely enjoy making art for other people, it’s still work! I chill out making art as well, so working on my own projects is meditative. I love to push together fun little pieces to share with the world, and to add to my portfolio. I’m always working on something new in order to diversify my work showcase as much as possible. There are no limits when you are working for yourself.

09. What tools, online or offline are most important to your work-flow.

All of my drafting is usually traditionally planned (Pencil on Paper). Getting it into digital is the easy part! I develop most of my drawings on paper, and then vector the scans using Adobe Flash or Illustrator.

It’s kind of un-orthodox, but I find the bendable line tools & interactivity between drawing elements in Flash to be so much more intuitive than Illustrator. I spend most of my time vectoring in Flash & then accomplishing the rest of the polish in Illustrator.

Raster work is produced with Autodesk Sketchbook, Corel Painter, or Photoshop depending on the aesthetic I am after. I animate with Flash, Autodesk Maya, & composite with After Effects.

It used to be an extremely tedious process taking pencil sketches into digital through scanning, and re-inking the the linework. I recently added a Wacom Cintiq to my work-flow, and it’s really shaved down hours upon hours from my process.

Being able to use the original marks placed on canvas is a godsend! Sketchbook is Cintiq’s best friend. It’s so nice being able to doodle quick scribbles with the pencil brushes. All of the characters in my Freak-a-day set were drawn using it!

10. You definitely have a good balance of fun and professionalism about you. Do you think this is important for your client relationships and collaborations with other designers.

I’d like to think that it’s one of my stronger assets! I think establishing a friendly and comfortable relationship with a client is a wonderful thing. The relationship will be incentive for a client to want to keep hiring a designer for future projects, whilst the designer can feel comfortable working on a project.

I’m often selective about clients, and make sure that working together will really benefit the both of us.

Keeping it lighthearted is important, especially in an industry as loopy and fun as animation/character design. A good personality reflects pretty strongly on your work. Better work comes from the projects which are least stressful.

11. Thanks for taking the time to talk to us, anything you’d like to add?

My pleasure Liam. Thanks for talking to me and letting me share my thoughts! I just want to say that I am always looking for fresh new projects & people to work with. Come hang out on my site, have a look around in my shop, and check out some of the fun projects I am working on!

Win Pasquale’s work on your Chest!

Pasquale has been kind enough to let one of you guys have one of his t-shirts delivered to your door absolutely free. Simply post a comment to win, remembering to enter your email address, so we can contact you (only if you win) - One word posts won’t be accepted so make it a valuable comment & feel free to share the competition via Twitter and other modern contraptions.

For a better view of what you will be winning, with sizes check the details out.

One winner will be picked randomly. The contest will only run until Monday November 16th 2009: 4pm GMT. So make sure to get your entry in quickly.

Stay in Touch with Pasquale

There’s a few ways to keep up to date with Pasquale. Let’s quickly run through them! His Twitter. Personal Blog. Flickr stream & Tumblr. Make sure to check out the new Shop and his work Portfolio.

Revisited: Creating Custom Write Panels in WordPress

Spencer — Thu, 15 Oct 2009 13:50:11 +0000

Almost a year ago (wow, time flies!) I wrote a little tutorial explaining the nuances of add_meta_box in WordPress, and how it can be used to create some nifty Custom Write Panels. It was a nice little script, and still functioned great. I use it on almost all of the projects Liam and I have, and up to this point, it has been great. However, for an upcoming project, I foresaw some problems.

The current way things are set up in the script, it created a new row in the postmeta table for each custom input you included. Because of this, when you wanted to display the results on your theme, you also needed a separate variable for each input. Again, this great, and I never had any problems with it. But what happens when you have more than just one or two inputs? What about 8-10? Then things start getting a little hairy. Not only do you have to create 8-10 separate variables, but it creates a bunch of unneeded entries in the database.

So I decided to revise my script. Although it is only about 15 lines shorter than the previous one, it should function quite a bit faster (although I’ve done no real time trials.) The basic idea of the changes is to use a single row to include all the input fields, instead of one for each. If we store all of the data in a serialized array, we can have one key that holds all of our data. Because there is only one row to retrieve, we only have to define one variable to display our data.

A quick Example

This graphic is just a quick example to those of you who are new to custom write panels to help you see how this technique can be used to improve your experience in Wordpress. Click to enlarge.

Things start of basically the same. I’ve slightly altered my meta box arrays (taking out info that never really gets used.) I’ve also added a new variable, $key which will be used to label our new data (among other things.)

Where We Left Off (in functions.php)

Note: Please excuse the code indentions. The WordPress plugin auto-formats it. Sorry!


 array(
"name" => "image",
"title" => "Image",
"description" => "Using the \"Add an Image\" button, upload an image and paste the URL here. Images will be resized. This is the Article's main image and will automatically be sized."),
"tinyurl" => array(
"name" => "tinyurl",
"title" => "Tiny URL",
"description" => "Add a small URL of this post that will be used to track tweets, and share the post.")
);

Then, to get it out of the way, lets add our function that actually creates the panels:


function create_meta_box() {
global $key;

if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'post', 'normal', 'high' );
}
}

Same exact thing as before, just used our $key variable to label the title.

Displaying the Write Panels

The next part is pretty similar as well. This is what we use to build the meta boxes. Like I said, not much changes. I’ve just removed some extra code that wasn’t needed (checking for standard values, which was removed from the arrays) and I also changed the way I setup the nonce.






ID, $key, true);
?>

Now I’m using WordPress’s wp_nonce_field to create a nonce. This time it is outside of the foreach loop, because we clearly only need one! (Not sure what I was thinking before.)

As I mentioned before, I took out some code to check for default values, and instead replaced it with a $data value. This looks for our single meta row, with our defined key, and fills the input with any necessary data.

Saving the Data

The final part, where we save the data, is what got changed the most. The basic idea is to loop through our original $meta_boxes array, creating a new array to hold the values. In English: for each array in $meta_boxes, get the value of the input field, and add it to a new $data array.

So now we have a single array. Check out the code below:


foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

Not too bad right? In the function, we also need to verify the data. Since I have a better understanding of how the nonce works now, I’ll try and explain how we verify it. We can use WordPress function, wp_verify_nonce to verify that the correct nonce was used in the time limit. If that’s not true, we return the $post_id to abort the script. This stops you from being tricked into doing something you don’t want to. You can read more about nonces from Mark Jaquith.

The next snipet checks to make sure that the current user has the authority to edit a post. Because we have only created the meta_boxes on the post page, we only need to check that they can edit posts.


if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

If you remember the old script, in order to save the data, we first had to check to see if it existed, update it if it did, add it if it didn’t, or delete it if it was blank. Phew! A lot of checking. Imagine having the database do that 10 times? Seems quite slow right?

Well shortly after I wrote the old tutorial, WordPress updated update_post_meta so that if the row does not yet exist, it will create if for you. That allows us to only use one function, instead of checking for three. (I decided to exclude the delete, because chances are you’ll always have something, and one row isn’t nearly as bad as 3 or 4.)

So our final save function looks like this:


function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;

foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

update_post_meta( $post_id, $key, $data );
}

Final Code

Here is all of the new code. The last few lines initiate the script.


 array(
"name" => "image",
"title" => "Image",
"description" => "Using the \"Add an Image\" button, upload an image and paste the URL here. Images will be resized. This is the Article's main image and will automatically be sized."),
"tinyurl" => array(
"name" => "tinyurl",
"title" => "Tiny URL",
"description" => "Add a small URL of this post that will be used to track tweets, and share the post.")
);

function create_meta_box() {
global $key;

if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Custom Post Options', 'display_meta_box', 'post', 'normal', 'high' );
}
}

function display_meta_box() {
global $post, $meta_boxes, $key;
?>



ID, $key, true);
?>

Implementation

One of the main reasons I redid the script was to have better implementation. Because all of our data is stored in one single row, we only need to call it once.


$data = get_post_meta( $post->ID, 'key', true );

Put that inside the while in the WordPress loop. Remember to change “key” to whatever value you entered in the script. That variable is now holding the array of information stored in the database. So you can simply access it like so:

Like I said, not much changed on the back-end, it’s only a few lines shorter, but it should be quite a bit more efficient, as well as more expandable.

If you have any questions about the code above, or the tutorial in general, please do not hesitate to leave a comment below. I will do my best to help answer any questions that may arise.

Beautiful Post Thumbnails: Top Examples & Best Practices

liam — Wed, 30 Sep 2009 00:32:55 +0000

Your blog post thumbnail will play a big part in how your users see your website, and how they navigate it. A well designed post thumbnail can really engage your visitors and help encourage them to explore your website.

Examples of Post Thumbnails

A very Unique Solution on Tutorial9

Introducing, a true master at making an interesting post thumbnails, Mr David Leggett. In this case a very bold & unique use of the content (icons) to create a memorable thumbnail.

Clean and crisp thumbnail on AppStorm

A very clean lighting effect in the background with a modern font & great colors to catch attention. Notice the 1pixel white drop shadow on the word “interview” - a simple & effective approach.

Keeping your Photographs Relevant (UX Booth)

Another fantastic example from David Leggett. This time he’s not relied on his skill in Photoshop, he’s simply relied on that old favorite the photograph. A good looking, and relevant photo perfects your content perfectly.

Clever use of Screenshots on Obox

This example by Obox shows how placement of the elements on the thumbnail can generate interest. You get a sneak peak at the content with some cleverly placed screenshots with a good background lighting effect and the all important text which looks fantastic and the contrast is perfect.

Picking the Perfect Image, Courtesy of DesignShard

Again, Keeping your image relevant is a must. And in this example another photo, but it has 3 things: simplicity, visual impact and relevance.

OutlawDesign Makes the Thumbnails Part of the Design

Two great examples on Outlaw Design Blog. We see a stunning Photograph on one, and on the other one of the logo’s from inside the post has been chosen for the thumbnail, a great visual impact.

You can also start to see how the blog design benefits from showcasing multiple good looking thumbnails. The post thumbnails really become part of the design in this case.

UxBooth again with Text Over Photographs

Using fantastic looking text on top of some really appealing images can be a real hit. This is a great example of strong typographic elements on top of a crisp & relevant photograph.

WebDesignLedger Improve Exploration

Apart from looking great, a relevant & good looking thumbnail can help visitors navigate through your posts. This is particularly important if you have a lot of posts on your blog or site.

WebDesignerDepot Keep it Simple & Effective

If you are lucky enough to be writing about something that includes a lot of great looking content, show off this content. It’s not just a quick solution but a very effective one, and again it would help people who are scanning your content understand what the post includes.

Fubiz Lets the Image do the Talking

Layout can play a big part in the effectiveness of your thumbnails. This example uses quite a large image with a simple line of text. For me these are very useful, especially when the image is very pretty!

Fubiz does more with their Thumbnails

Having such interesting post thumbnails gives you the chance to experiment with alternative ways of navigating content, like this fantastic gallery view on Fubiz.

Build Internet combine Photography & Text

Text on the top of a photo once again, just another example of how this can work so very well. Remember our quality tips too when putting together any graphics.

Good Thumbnail Positioning on PSDTuts

The layout of your thumbnails is important. This style (which I first saw used across the Envato sites) seems to be very popular with bloggers.

WebDesignerWall Uses CSS to Style Thumbnails

A Simple use of a gradient & some nice typography. What I like about Web Designer Wall is that each of their thumbnails has the white edge with a gray border, it gives your images a bit of consistency and having a default style on images can make them fit in with your site a lot better.

Imeem have also styled their Thumbnail Border

Every thumbnail on the imeem website looks like it’s almost a photo sitting on top of the page. There actual photo does not have this effect on it, the frame around the image has been made & just sits behind, this makes your thumbnail look as if it’s it’s part of the frame, but really it’s all separate.

It’s a easy way of styling multiple images and leaves you open to change the style of the border, when you update your web design.

Methods of Making Creative Thumbnails

Summing up your post into one image, and making it look attractive is a big part of catching the interest of readers who are exploring your homepage. It has also become more common to see thumbnails next to blog title on a homepage, rather than just text. Layout of the image is important too, finding the perfect place to put your image is an art in itself. Sometimes a full image is used, sometimes a small thumbnail, anything from a photo to a sketch or full vector illustration, the ability to create so many different things should be your biggest advantage!

You have a fresh canvas with each blog post, you don’t need to keep constancy with your thumbnails & post images, each one can be a new work of art, a chance to express yourself and a chance to back up what you are writing with your creativity.

There are a variety of ways capturing & creating the perfect thumbnail for your post, but it’s important that the image compliments the post, keeps relevant and isn’t too complicated - we’re going to explain a select few examples in further detail now.

Unique & Custom Graphics

Without doubt this would be the most time consuming way of creating good looking thumbnail/introduction images for your post, but as you will see it’s clearly worth the time when you get it right. This process would involve looking at the post as a product, and the post thumbnail as an advert for that product, you need to find creative ways to best showcase that product, using a mix of various design methods.

A closer Look at Tutoria9’s Unique & Bold Style

David Leggett, the fantastic designer behind Tutorial9 has included some important techniques to style his thumbnail, a nicely executed drop shadow, a background lighting effect that helps to build depth, and also some blur is applied on some elements to also build depth and give the image something different visually. David has also kept some basic ideas in mind, such as contrast (light on dark) and he’s included a tag-line.

I think this example is a great use of space, and the fact David has made his image posts such a big feature on his site gives him room to experiment & create something outstanding each time. Have a think about what you can take from this and apply to your next blog thumbnail, remember to keep Quality in mind.

Relevant & Interesting Photography

Photographs have always been a very pure and captivating way of getting a point across or sharing an emotion. They can keep those same attributes when being used in you thumbnails. Remember to spend some time, either taking images yourself, browsing stock photo websites or searching flickr for captivating images that the author has released under the creative commons agreement. *Use Advanced search for Creative Commons settings

Example of Relevant Photographic Thumbnail

This Article on Simplemom is a fantastic example of getting your images absolutely right. The image wasn’t taken by the author of the article, but it couldn’t get any more relevant to the topic. This just goes to show how taking the time to find a perfect image is well worth it, and a clever photograph really helps to compliment your content & invite readers to your post.

Other than symbolizing the content of the article very well it’s also a pretty image visually, I like the feeling of depth and the contrast with the colors and the whole composition just ticks all the right boxes. Remember if your original photo doesn’t have all of these things, some simple touch up’s in Photoshop wouldn’t go a miss.

Creativity with Screenshots

Many posts online these days (this one included) have a lot of images throughout. If you’re writing about something that exists on a website or blog you might have some screenshots to support your content. If you do a small amount of work in Photoshop you can make these screenshots worth of a thumbnail.

Fine Example of Using Screenhots as your Thumbnail

In this example by Andrew, he’s used a screenshot as the backrgound to the image. Rather than a standard screenshot he has cleverly built up a sense of 3D and depth - first by creating a lighting effect, and then placing the screenshot at an angle, to give the feel that it’s not just a flat image. He’s brilliantly continued this theme by placing a really nice graphic on top of a post-it note.

I really like how Andrew has built something up from nothing, and with a little bit of effort he’s created something truly interesting that works.

Multiple Uses for your Thumbnails

Using thumbnails gives you the advantage of using them in a variety of ways, and in a variety of places throughout your website. Having the choice to do what you want with them means you can be as creative, or as straight forward as possible. Let’s look at a few solutions.

Featured Posts Slider

GOOD is a fantastic website design all in all. But the featured posts with thumbnails are a particularly beautiful element of their website. The thumbnails are very good looking, but the layout and the use of a scrolling showcase transform them from just being beautiful, to being incredibly useful.

Gallery of Posts

The Autoblog website has a lot of new articles each day, so drawing attention to posts can be hard and things quickly move off the front page, so having a gallery style feature area allows for you to keep interest on a article long after it has been publishes. It also improves interactivity, and although I’m not completely in love with the design, it works very well and could look very nice.

Another good example of this would be Fubiz (as featured earlier in the post).

Make Lists easier to Scan

For sites that have a lot of content listing other articles, be it popular, featured or recommended etc, is quite an important part of internal traffic and exploration by users. Sometimes these lists can look a little un-inviting, especially if long. Adding thumbnails to your lists could be a great solution.

Draw Attention to Related Posts

Thumbnails with related posts not only look great, but provide something stimulating and fresh to look at, and gives the user something to do once they have finished reading your post. Without doubt it’s a smart way of drawing and keeping attention on your articles

Think about the Positioning on your Blog

Aside from using in galleries, sidebars and below your content for related posts, you need to get the positioning of your blog post right from the very beginning. Think about in which pages your thumbnail is going to be used, and how in you can best display the image to benefit both the content and the user.

Example Layout Mock-Ups for you

From the examples on this article I’ve created some quick mock-ups of popular layout and positioning of thumbnails which could spark some ideas for your own blog. These are just quick examples but illustrate only a handful of successful ways you could integrate thumbnails into the layout of your blog posts.

Full (Fixed) Width

Using the full column width gives you a lot of space to use, and there is a good balance between content and the image. The down side is that it doesn’t look great on fluid width sites.

Next To Title

Your images tend to be smaller in these places, but the positioning is great & it makes scanning through the posts very easy.

Next to Title Right

Another fantastic solution, I think this one looks great and keeps your title in line with your text.

Thumbnail within Content

To keep focus on the title you could move the thumbnail to a more obvious place. In this position the image is part of the content, and the text can wrap around it or go along side it. A good solution but for me not always the best looking.

Thumbnail within Content (Right Side)

Same advantages and disadvantages as mentioned above. Although this one doesn’t break up the layout on the text as much and for me sometimes is a better solution then the one above.

Full Image with Small Paragraph

If the content is visual based & you have a lot of good photos or images you could use a full image could be a huge hit. Trying to describe how cool something looks is nowhere near as good sa just show how good it looks, and that’s a big plus for this layout option.

Final Thoughts & Tips

The point of this post was not to just simply show you some good looking screenshots, we intended to make you think about why you should be using thumbnails on your blog, and show you how a little time & effort with your post thumbnail.

This is not something for designers specifically, it’s more for content writers and webmasters to start thinking about how and why then can help their users by either putting some time in yourself, or hiring somebody who can create such images for you.

• Keep it Relevant
Relevant images will compliment your content and help users to navigate your site if you integrate them well.

• Don’t be afraid to Pay for Quality
Whether it’s paying for good quality images, or hiring a designer to spend a little time working on a creative thumbnail for a post.

• Make sure you give Credit
If you use an image from flickr for example, it’s always nice to give a link back to the original source and author.

• Think about your Layout
If you’re going to add thumbnails to your posts have a good think about where you are going to place them.

• Think of creative ways to use them
Once your blog posts each have a cool thumbnail start thinking of interesting ways you can get your users to interact with your content - use your thumbnails to your advantage.

Resources

iStockphoto.com | Loads of quality Images
GraphicRiver | Various Icons, Illustrations & Stock Imagery
Dreamstime | Big collection of premium Images
Sxc.hu | Free images, beware that these images are often over-used
StockVault | Quality free images
Flickr | A link to Flickr Creative Commons search
Photoshop Action for Screenshots | Tutorial that could be used for Thumbnails
Using Images to Take Your Posts to a New Level | Fantastic Video & Post
How To Find Free Photos for your Blog | Great tips and resources

The Envato Marketplaces Re-Design: Our Involvement

liam — Mon, 28 Sep 2009 03:34:20 +0000

We’ve recently had the pleasure once again of working with Collis Ta’eed and the team at Envato, a company we admire - and one full of creative & down to earth guys - running a very successful network of sites. Having them use your icons on their site(s) is one thing, but working with them is a true honor.

Here’s our write up of our involvement in the recent re-design, our thoughts on it - and our early design drafts for Collis.

A look at the new Envato Marketplaces

There’s a lot of people to please when you’re re-designing such a huge network of sites, and a lot of pressure on the team behind it, it calls for some creative thinking and a fresh look at things. The first time I saw a near finished Envato Marketplaces re-design I knew right away that I was looking at something that people were going to love, and I think that’s probably a big hurdle when you’re making a big change to something people are used to.

Anyway, here’s some screenshots for you to gawp at first!

What Work Did We Do?

Well, we’re going to show you some of our early mock-ups that we sent to Collis months ago. Now I must explain, you’re going to look at the mock-ups and wonder why our drafts look nothing like the final designs showcased above. And you would be right to be curious. On the face of things it’s hard to see the relation, but I can assure you we played our part(s).

The Interesting thing about this Re-Design

Before you look at the mock-ups then, it’s probably interesting to know how Collis went about the project. He approached 3 designers, myself, Aaron Lynch & Kai Loon informing us of his master plan to give the Marketplace a refresh. He wanted a new perspective on the design and some ideas from outside of his own head.

Our brief was to create something from a fresh pair of eyes, and offer something different to Collis. We had a lot of creative freedom as we we’re always aware that Collis was going to take our designs and create something himself, we just had to offer him something different that he could take away, take elements from - or simply just use them as inspiration. For me it was a clever approach on Collis’ part, it offered him a variety of styles from a variety of designers that he could take and shape into a fantastic design.

Our Early Design Drafts

Now I wouldn’t normally share screenshots of work that didn’t follow through into the final live version, but this was such a unique and different approach to a re-design process that I don’t mind sharing some screenshots with you all. Keep in mind these snippets are from 3 different design concepts.

You can see from the details above the overall level of finish and quality. Something that Envato uphold throughout all of their websites, but other than that I wanted to try something that I purposely wouldn’t normally do, rather than trying to create that typical Envato look I though that Collis would much rather appreciate something that was different, even if it wasn’t ever really going to be used as the base of a design there’s various elements that I offered in a different light.

Full Screenshots of the designs (if you must)

Concept 1 - A polished finish with a minimalistic approach.
Concept 2 - A slight hint at texture and injection of colour.
Concept 3 - A lot of colour & big bold typography.

Looking through the final live version of Flashden for example I can see things that could have been made as a result of my designs, but there’s a lot of it that never crossed over - but that was never really the point of this project.

It’s also worth noting that a lot of our Icons, that are on sale - are being used throughout the marketplace, and we just love seeing our icons used, especially when they are executed so well. Feel free to share in the comments where you are using our icons.

Custom Icon Design

One thing we did complete from start to finish was a re-vamp of the Envato badge icons that are used throughout the Marketplace, on profiles & portfolio’s of all of the users. There was already a full set of icons that were being used, so we had to touch-up and re-draw the ones that worked well enough, but then come up with a completely new concept for many of the icons.

Why not check out all of the badges out for yourself.

Now Go Check It Out

Now that the site is all new and shiny it’s the perfect time to sign up, if you haven’t already. *Note Signing up an account will give you access to all of the network sites. There’s a lot of offer across the Network, everything from Icons to Sound & Video files, a truly remarkable network of sites, and a huge pleasure to work on.

Follow Me

You can now follow authors on Graphic River & the other Marketplaces. It’s a great way to keep up to date with your favorite authors and the recent updates are shown very neatly on the front page for you. It’s a fantastic way to keep your eyes on what is going on.

Graphic River Updates
Twitter Updates

Follow the other people mentioned:

@collis @aaronlynch and @kailoon - *all well worth following!

178 Free Icons: WooFunction Free Icon Set goes Live

liam — Fri, 25 Sep 2009 15:26:19 +0000

A really great set of icons for free. Something that you’ve seen before on this blog, but I think this most recent free set shows just how far I’ve come since the first set, just over a year ago now. This new set of icons was made exclusively for WooThemes & with their help we’ve proud to offer you this fantastic set of icons for absolutely nothing!

With this set we’ve gone for a more refined, Mac OSX style Icons (almost) - which seem to be really popular with web designers recently. We’ve also gone for a (smaller than usual) 32 x 32px size, with a few of them available also at 16 x 16px. The pack includes 178 transparrent .png files.

To anybody who was confused by the title image, it’s not your fault. I was trying to use the icons in a statement, you see the Icons spell out the line below… Ahh never mind! I’ll stick to normal image previews from now on!

See & Grab the Icons

Take a look, let us know what you think. Download links are below the preview and comments are welcome too. This set is completely free to use, just make sure you give credit - details of which are below!

Share These Icons

Please make sure you read this before using or sharing online. Thanks.

If you find these icons useful we’d like you to pass them on to other who you think might appreciate the set. The URL to share is: http://www.woothemes.com/2009/09/woofunction/.

Important: Even though we won’t force you, we appreaciate if you link to this article when sharing the icons. This icon set is released on the GNU General Public License.

Download The Icons

The icons are being hosted at WooThemes, so head on over to the Download page and download them, don’t forget to leave a comment and let us know what you think of them too.

There’s a lot more Icons on offer

We’ve got a lot more icons available for download, so if you liked these you are in for a treat. Keep an eye on our icons portfolio for more sets from us. We’re happy to get your ideas and thoughts which will help for future icon releases.

Daily Edition: Re-Inventing a WooThemes Classic

liam — Tue, 15 Sep 2009 22:44:13 +0000

Any WooThemes fan will be familiar with their popular Gazette Edition theme, but for 2009 they wanted something that would push the Gazette Edition theme forward with a more modern, stylish and minimal design. They contacted us about the fantastic project and we gladly accepted.

As with most things, the more time you spend working at something the better you become at it. For me each time I work with WooThemes just gets better and better. There’s a real understanding on both sides which makes the projects they give me a real joy to work on. And at the same time it means we make something which not only keeps you guys happy, but gives all involved in making the theme a real sense of satisfaction.

Daily Edition is the latest result of this meeting of great minds. *

From the moment they emailed me about the project to seeing the teasers released and finally seeing the theme go live I’ve been buzzing about this latest theme. Although each project I work on is special to me, I just felt this latest design hit the nail on the head, so for me seeing the fantastic comments on the early preview release it was a huge relief to see that people took a shine to it.

As Adii from WooThemes said himself;

Breathing some new life into the incredible success of Gazette Edition we wanted another news/magazine based theme that was minimalistic enough to let your content speak, whilst customizable enough to brand however you like. We approached our friend Liam McKay as we thought this was just up his alley, and did he impress!

Theme Details

Taking my initial design, and working it into 19 individual styles - and then pumping all sorts of JQuery goodness into the theme, on top of the fantastic custom theme options and features WooThemes love to build into each theme, this latest one is classic Woo at it’s best.

As mentioned the Theme aims to build upon the success of the Gazette Edition theme, with a more modern approach and minimalistic feel, so it had to have the great things people loved from the Gazette Edition, but be different and fresh enough to be value for money.

The standard WooThemes options apply for buying with pricing starting at just $70. And with a very helpful and devoted team on hand to answer all of your questions and queries, quality and value for money come as standard.

Important: This week you can use the discount code WEFUNCTION for 25% off the Daily Edition Theme!

The Wallpaper

A big part of this theme which I’ve not really done before was the creation of a Wallpaper to accompany the theme and to support what the theme was all about. My approach was to go for a really soft brushed, collage effect of memorable news items from history.

It’s actually quite a textured piece with a lot of brushes in play with various overlays and subtle watercolor elements mixed with a lot of clouds, smoke, and some hints of grunge. The deeper you look at it the more you can see the work that has actually gone into it. The wallpaper is available in various sizes and is available on the theme details page.

Your Thoughts

As always I’d love to hear what you like (or dislike about the theme) so make sure to check out Daily Edition - Also please make sure to check out the Wallpaper and let me know what you think of that too. A lot of effort went into both and opinions are alwats welcome.

226 Brilliant Freelance & Work Related Icons Available Now

liam — Thu, 04 Jun 2009 16:54:09 +0000

For this icon set we’ve focused on icons based around freelance and office work, this set contains everything from invoices & contracts, to noticeboards and project folders. For a full understanding of the variety of icons on offer make sure to check the full preview image.

Function Freelance & Work Icons Details

As always we want this set to be able to be used along side our other two icon sets [ 1. Function Premium Icons ] [ 2. Premium App Icons ] - So we’ve made them in a similar style, same dimensions and a similarly low price. The set is available for only $15 which includes all the icons featured below, just click the image or buy them direct.

Congratulations to our Previous Winners

In our last pack of Icons we gave away 10 sets free. We had some great comments & feedback and are happy to announce the winners, who have all been informed and have received their winning Icons.

Josh

Thomas from BrushKing

Matthew from UXBooth

Jaswinder from Jaswindervirdee

Angie Bowen from Arbent

Chad Mueller from Inspiredology

Michael Angrave from CreareDesign

Steve Robillard from Digger Design Labs

Tom

Grazz from Blogging CSS

Other Icon Sets Available

As mentioned we’ve made all of our icon sets in a similar style, meaning you can put them all together to build one large collection of various themed icons. So if you like what you see here make sure to check out the other sets that have been available for some time now.

40 Cute Free Twitter Graphics: Badges, Icons & Buttons…

liam — Mon, 25 May 2009 02:15:22 +0000

We’ve put together this free set of unique twitter graphics. Simply drag and drop the various graphics, icons, badges and buttons into your work free of charge. There really is no limit to what you can do with this brilliant set, lovingly designed by Pasquale D’Silva

Follow us on Twitter

If you enjoy the free set make sure you follow us both on Twitter: Follow me (Liam) @liammckay or @darkmotion (Pasquale) on Twitter!

Preview of the Set

The set includes 40 Files in total, all in Transparent .png format. The buttons etc come with PSD files too so you can edit and re-size them as needed. The original characters come as a large High Res image which makes it very easy to scale down and use however you want. We’ve included many size variations for you, and everything from badges, to silhouette so hopefully it should be as easy as possible for you to use them.

Download the Set

The full set comes in a .zip containing all of the graphics, which we’ve nicely organized. If you are going to share the set make sure you do so my sharing the Post URL, so in other words don’t link directly to the file. If you are using the set for your design work a link back is not required, but always appreciated.

Download Full Set | 5.5 MB | .ZIP

Special Thanks to Pasquale

Pasquale D’Silva is the artist behind the twitter bird characters. I’ve worked with Pasquale to bring you many free characters in the past and each time he’s injected a lot of fun and charm into the designs. He’s a fantastic guy with a great humor and a raw talent for this sort of thing. So if you’re ever in need of some character design work be sure to get in touch:

Pasquale’s Blog
Darkmotion is the Blog he runs, very entertaining.

Pasquale’s Portfolio
Portfolio of selected works & animations.

Pasquale on Flickr
Flickr is where he keeps photos, sketches etc

Pasquale on Twitter
@darkmotion is his Twitter

Free Social Media Icons & 275 New Premium App Icons

liam — Thu, 14 May 2009 14:23:40 +0000

To promote our new application icon set with 275 fantastic icons we’re giving away this free unique set of social media icons. The free Social media icons are available to everyone, and a nice little bonus for anyone buying the full set.

Preview of Function App Icon Set

As you can see from the image below, you get a beautiful free set of social media icons as a free bonus. The other images are available via graphic river at a very cheap price. Download details below the image.

Details & Download

The set is perfect for anyone building a website, online app, or an app of any kind. We’ve made them similar in style to our other sets so you can always use them along side any of the other sets.

Download Full Set

You can grab the full set for $20 from Graphic River right now.

Download Free Social Media Icons

When sharing these icons all we ask is for a simple link back, either a link in the footer, info page, or readme file. If you are using them in any websites/apps/projects a link back would be nice but isn’t necessary. Enjoy & Download the Free Set.

Subscribe & Win 1 of 20 free Copies

We’re giving away 20 free sets of this icon pack (as it’s so big we thought it would be fair to give a few more copies away) To be in for a chance of winning simply follow these Instructions:

1. Subscribe to RSS Feed
If you haven’t already subscribed to us subscribe now.

2. Promote this Page
Promote the premium icons, the free social media icons, or this giveaway. Or all! (You can do this by twitter, your blog, facebook or anything)

3. Give us Feedback
Only comments that mention that they have subscribed & give us their thoughts on the icons, or any ideas for some new icons are eligible to be selected for the competition.

*Eligible entrants will be chosen and given a number, a random number will be generated 10 times (via random.org) and those people will get an email about it.

Entries end on 1st of June 2009.

Our Other Icon Set

We have another icon set available on Graphic River, the Function Premium Icon Set is the best selling Icon Set on Graphic River, with a 5 star rating. We make all our sets so that they can be used together, effectively giving you one huge collection of Icons that you can mix & match to your needs. Enjoy these icons and make sure you take part in the give-away above too!

Exclusive look at the New Outlaw Design Blog Re-Design

liam — Wed, 15 Apr 2009 16:58:49 +0000

Danny Outlaw has given us an advanced preview of his re-designed Outlaw Design Blog. And I’ve got to say it looks fantastic, Danny talks us through the process & reasons behind it, and what we can expect from the new design, and in fact the new Blog, as his re-vamp goes further than just a fresh new look.

What I love About the New Design

Before we get Danny’s thoughts about the design and the inspiration behind it, I thought I’d talk you through some of the things that make this design stand out for me.

The Subtle Touches

Yeah a word I love to use, but this is a prime example of how subtle elements & details help build a feel of quality. Everything from the background illustrations, the bullet holes and the 1pixel highlights around boxes to the small little green bar on the hover state in the top navigation. It seems everything has been thought of.

Footer Area

A smashing example of a very useful and simple footer. We’ve got special attention to a new feature of the site, the podcast, as well as some relevant links & information, topped off with a very hand & easy to see search bar.

Overall solid feel

With everything in mind, and looking at the full design - it has a very solid and easy to use feel about it, something that not all blogs have. What I mean by this, is it’s a site that just feels right, and I can imagine feeling comfortable spending any amount of time on it. I’m Looking forward to seeing it go live (which I believe is on the 20th April)

The Preview

Click the image to see a full size preview of the design.

What inspired such a huge relaunch?

To put it simply, I always a bit unhappy with past versions of Outlaw Design Blog. While the designs them self weren’t bad, I just didnt feel they helped me contribute to the community as much as I wanted to.

I started Outlaw Design Blog because I wanted to share my skills, opinions, and thoughts on the business of design. While a traditional blog helps do this, it is only one of the many tools out there for sharing such things. Now that the web and its users are more accustom to finding information in a variety of formats, I decided it was time to raise the standards and start offering information in a variety of multimedia formats.

It is really this interest in multimedia sharing that really sparked the fire for the re-launch.

When Outlaw Design Blog was just a thought, the idea was to create a “super blog” that was a combination of Freelance Switch, PSD tuts, and Smashing Magazine. I never really came close to create such a blog in the past, but this relaunch should change all that.

Rob Palmer Branded07.com who did all of the illustration and the better part of the design also inspired me a lot. I love his site and work. I have worked with him in the past and he is just amazing! He went all out on this design for me and he deserves many thanks for that.

What cool features can we expect to see in the re-launch?

One feature that will play a large part of the new Outlaw Design Blog is one that I have already started playing with a bit and that is video. I am planning on making video a part of as many posts as possible in the future. Everyone learns in their own way; some people learn better by reading, other by hearing or seeing. For this reason, I want to add video, text, and possibly audio for every post that can handle it. After the relaunch, and as my video editing skills improve, the videos should become a little more professional looking and less like home videos.

Aside from regular videos for posts, I am working on doing a semi-regular video with David Leggett from Tutorial9 which should be awesome.

Another feature that I am really excited about is the Outlaw Design Podcast. I am working with Andrew Lindstrom from the Well Medicated Blog to create a podcast with a few other panel members including David from Tutorial9. The podcast will be monthly and cover a variety of topics the freelance creative should appreciate.

I have also been building up a collection of high quality stuff to give away. You can expect to see everything from hi-res textures to premium Wordpress themes.

I have been working on building up a collection of Photoshop Tutorials. So you can expect to see anywhere from 2 to 4 Photoshop tutorials a month.

I am also working one finding some developers to work with to create some top notch web tutorials for designers.

This new design also has an entire section dedicated to review of products and software that creatives are interested in. On these types of posts, readers will be able to read my review, write thier own, and read others review of the product. There will also be a link to purchase the product, as well as compare prices on it.

Additional Screenshots

What Do You Think?

Does it look promising to you, does it sound like Danny has made a change for the better? Did you prefer it before? Whatever your thoughts we’d love to hear them. I personally am really looking forward to it, from the design side of things I can’t wait to see the site live, and from the content side of things Danny has put a lot of effort into improving what he has to offer his visitors, so I’m also excited about seeing and reading that!

How to Spot Quality within Web Design: Examples & Tips

liam — Sun, 12 Apr 2009 23:12:43 +0000

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.

01. Spacing

One of the main things that I look for within a good website design is clever use of spacing with design elements. Paying close attention to how certain things are spaced out and lined up can really make a difference to the overall appearance and sense of quality of your design.

I think the key to getting your spacing right is to look at all of the elements within your design. Looking at the bigger picture really can help you get a good idea of how best to space your elements. Sometimes zooming out and taking a different look at your designs can be a great help.

Examples of Excellent Spacing

Great Spacing on the Good.is Website

As you can see here, there is a very clean and open feel to the content here. This is completely down to the designer allowing a good amount of space around the text & images.

A very well spaced out Digital Mash Website

Having well spaced out elements can make them a lot more attractive, and a lot more clickable. Digital Mash is a great example of a very welcoming website.

Creatica Daily has heaps of space

Again the great use of spacing here really helps let the content speak for itself. There isn’t a lot of content in each post, but they’ve not been afraid to give the content a lot of space. Just because you only have a few lines of text, doesn’t mean it can’t use a lot of space.

Lots of Space on the Postbox Site

Taking a close look at the Postbox website, you can really see how space there is around the edges. There’s actually a 60px padding here. It sounds like quite a lot, but when you see it in action it looks great.

Getting Spacing Wrong

The main mistake people make when it comes to spacing is having their content too close to the edges. No matter how well you’ve styled your content, if you cram too much in, it loses a lot of it’s style and quality.

Example of not using enough spacing

We showed in the previous section how good the spacing was on the PostBox website, but we’ve made the mock-up below to show how it would look with less spacing. And you can see just how much bad spacing can effect your design. It takes a lot away from the design and certainly removes the quality feel from it.

Tips on Effective Spacing

Deciding on how much spacing to use is something which will vary from time to time, you really need to train your eye to allow for the correct amount of spacing for each element, and use it effectively to fit the design. It’s touch but something you can pick up with practice.

• Design using a grid system
Using a grid certainly helps you to understand the importance of spacing

• Try & Try again
You can always use a method of trial and error until you find what looks right.

• White Space isn’t a wasted space
Just because you have an empty area, it doesn’t mean you have to fill it.

• Less really is More
Rather than trying to fit more in an area, fit less, give it space and keep just the vital important information.

02. Pixel Perfect Detail

You can really tell when someone has put real effort into the finish of a web design. Sometimes it’s the subtle things that really make a difference, and a lot of people might not even notice. What I mean when I talk about Pixel Perfect Detail is the method of paying close attention to lines, edges and borders. Rather than just have a simple line, sometimes adding some small details, whether it be subtle gradients, or something as a simple 1px shadow or highlight can really make your work stand out. Some designers of note that are really good at this are: Collis Ta’eed, David Leggett and Wolfgang Bartelme.

Examples of Pixel Perfect Details

A close look at the detail on Envato

If you look in the examples I’ve cut out, you can see in Example 1, how the green bar has a 1 pixel lighter green line on the border. Example 2 uses a soft gradient shadow on the inside of the box and leaves a 1px clear white border at the top. Clever, using a shadow to give the impression of a highlight above it. The green area behind has a very soft subtle shadow which helps draw attention to the clean and crisp detail within the white box below. Although it doesn’t seem like much these thing really do help to make everything look that little bit more polished, they give a sense of 3D and realism, almost like the elements are placed onto the page, rather than just a flat and static layout.

The Details on Tutorial9.net

David Leggett has a great understanding of how to really make pixel’s pop. His recent redesign of tutorial9 is a great mix of so many pixel popping techniques. In Example 1 you can see how he’s made the tabs look that little bit slicker by adding a simple 1px highlight to the top. Example 2 see’s a variety of techniques. A Drop shadow on the camera icon, a shadow highlight on the white area, and a 1px highlight on the top of the navigation bar.

Pixel Perfect Buttons & Separators on RedBrick Health

This beautiful navigation, created by Ryan Scherf is another great example of using pixel perfect details to get that feel of quality in your design. The pink button has a 1px highlight, and the separating lines between the links have the same level of quality and detail, as you can see rather than just having a gray line separation, Ryan has included a 1 pixel highlight below it to prevent it looking flat and 2 dimensional.

Pixel Perfection Applies to Grunge too: AvalonStar

Here we have the beautiful AvalonStar: Distortion blog, which uses a great grunge style. But even with a dirty & grungy design using a 1px highlight can still make a big difference. If you look at Example 1 you can see how a shadow gradient has been used on the brown top area, the green box which lies below it has a 1px highlight at the top. The combination of the shadow above and the 1 pixel highlight really make the boxes look that little bit more polished.

Quick tips for Perfect Details

Practice makes perfect in this case, as you can see from the examples something as simple as a 1px highlight line can add some really cool depth to your designs, you don’t need to rely on really over the top bevels and gradients to give the impression of something with a bit of depth.

• Keep it Subtle
Small details that compliment the content are the key.

• Think in Pixels
Borders, gradients, lines and shadows etc don’t have to be huge to be effective.

• Before & After
Compare your results to how they looked before you applied the effects. Then you can see just how effective they are.

03. Well thought out Typography

Although the actual content of the website won’t be written by the designer, they play just as important role in the overall quality of the content. Their role is to make sure that the content is displayed in a way that is easy to follow and read through. There are many ways that you can ensure your type is readable and usable, and while I’m not going to list a set of rules and regulations on what, and what not to do, I will give you some examples of where clever typography really does make a difference.

Examples of Well Thought out Typography

Big & Beautiful on The Netsetter

Titles are important within web design, especially when you are designing for a blog. A recent trend in web design is to use big & bold fonts for titles. This works in a number of positive ways, not only does it tick all the right boxes from a usability point of view, but it helps to create space and define structure within a design. This example from Netsetter is a great illustration of these points, you can see how the title creates a lot of white space around it, and naturally it’s very easy to read.

Leading & Spacing with your Text

The Viget website really is a beautiful example of how important typography is within web design. The example we see below (taken from their portfolio showcase) shows once again how using a larger sized font helps to create and open space. Even with the thin, crisp font they have used you can see just how much space has been created in that area. The actual typeface itself is very slick, and is a great choice of font. The other thing that stands out here is their attention to detail with the line height (Leading), the spacing between each line of text has been increased from the default value to create a lot more space and make the text much more readable. A trick which you could try in your next design.

Web Design Ledger, Fonts to Fit your Mood

Finding the perfect font can be done through trial and error, or you can make your choices based upon the different moods certain fonts help bring to a design. The example here, Web Design Ledger, has a retro and worn look to it, while still having a very open and modern feel to it, so choosing fonts that help evoke a similar moods to these is essential to it’s success. Henry Jones (the designer) has chosen a popular transitional serif typeface: Georgia for the titles which compliment the retro & worn aspects of the design very well. The modern feel to the website comes from using a very different font to the titles, the main content body is written in Helvetica, a sans-serif typeface with a very rounded, open feel to it. The two choices of typeface in this example are very clever and really help to compliment and set the mood of the design.

Quick check list for Typography in Web Design

Spotting good typography within web design becomes a little easier when you’ve seen some great examples of typography (above) But when exactly is it that makes these examples so good, and what should you be looking out for when you come to design your next website?

• Is it Readable?
Don’t be scared of making your titles big and bold.

• Have you thought about spacing?
Spacing can vastly improve readability.

• Do your fonts fit the mood?
Make sure your fonts compliment the design.

There are probably a thousand more tips out there, but I don’t consider myself an expert in this area, I think I’ve just learnt to appreciate the impact of good typography. If you want to learn more about the things to look out for and see some better examples i strongly suggest you check out this post from Smashing Magazine.

04. Organization of Elements

Being a designer appeals to many because of it’s creative nature, and sure it can be a lot of fun. Now I know that Organizing doesn’t sound at all creative or fun, but once you get into a habit of good organization it doesn’t have to be as dull as it sounds. The way you organize the elements in a website is always going to be different, it depends on what type of site it is, and how important certain features are to the content of that website.

Although there’s always a variation in how and where you place things, there are some things you can do to make organizing your content very easy. The first thing you need to do is decide what you want your design to achieve. For example, are you designing to sell a product, are you designing for content, or are you designing for signups & referrals etc.

Designing to Sell: 37Signals

Taking a look at the massively popular 37 signals website it’s easy to see that it’s no coincidence they are selling their products so well. They’ve made it as easy as possible for you to see what’s for sale and help you to make the final decision to buy. Everything you want from a site designed to sell.

In the Example image you can see that the site has 4 key features that make it ideal to encourage you to buy. Attention is the first thing, they’ve made a very dark box with a quick summary & big bold titles. Next they generate your Interest by listing some benefits of each product with a lovely illustration. Desire is the next point, and this is archived by placing quotes & testimonials, and as in this point some videos of “What our Customers have to say.” The final feature to keep in mind is Action; on 37Signals there are various action points throughout the page, also nice to see that as the page is quite long they even have some action points in the footer.

Designing for Content (Blog): Well Medicated

When you’re designing for a blog it’s a completely different story. You don’t need to spend time convincing and re-assuring your users about your product, your “product” is already on display, your content is your product. Make it easy for your users to see your posts, explore them and connect with you & your blog.

Content should be (one of) the first thing(s) you see on a blog. In this example a nice bold pink title font really draws your eyes straight to the content. There’s a good sized preview image and a good 2/3 paragraphs of text followed by a “Continue Reading” link. There’s also the standard date & author information. For me this is one of the most perfect examples of what I would class as quality “Content Design.” Attention can be directed to anything of interest, here the nice big subscribe icons are the focus and help the users to stay connected with your content. Plus it without doubt will increase the amount of subscribers, so it works on two levels. Encouraging your users to Explore is quite simple, you can use anything from tabbed recent or popular content in the sidebar, to drop down menu’s or simple & effective lists. It’s easy to do, but very effective, especially on a blog. Blogs tend to be very personal things, so allowing your visitors to Connect with you in a variety of ways can be a big plus, and can help encourage people to get to know you, and visit

Tips to Help with Organizing your content.

Of course there’s always times where you’ll need to do things differently and break the norm. But there are some simple tips you can follow to keeping a well structured and well ordered design.

• What are you designing for?
As we’ve shown above, decide the goal of your design

• Design using a Grid
Grids allow you to make the most of your space.

• Test the Placement of Elements
Be the visitor, would you be able to use it.

• Remove any unnecessary Elements
Anything that isn’t essential should be removed, or out of the way

• Balance of Attention
Some things need to stay simple to allow others to shine

05. Restraint & Subtlety

Designers are always looking for ways to make an impact with a unique design or special effect within a design. But sometimes you can make a bigger impact by restraining yourself. There comes a point where something crosses from being good to being too much. A good designer can spot when the line has been crossed, and avoid putting too much into a design or special effect.

Examples of Subtle Effects within Web Design

Soft Gradients on “Things” Website

I’m always on the look out for subtle effects on all the websites I visit. Sort of sad maybe, but I can’t help but pick out all the little details for future inspiration. Gradients are often over used and really in your face, but used correctly gradients can add a element of reality and depth to a design. Most people might not even spot the gradients, and those for me are the best ones.

Drop Shadows on Icon Dock

Icon Dock is a smorgasbord of subtlety. Pixel highlights, gradients and drop shadows. But for the sake of this example we will focus on the drop shadow, it’s not very big, and it’s opacity has been reduced to just put the highlight on the content box and bring it forward very slightly. It’s a beautiful example.

Subtle Background Textures; Scouting for Girls

Having a textured background can make or break your design. A lot of times the background becomes too much of a distraction that it actually takes away from the quality of the design. So it’s often a good idea to keep your background textures subtle and soft. The Scouting for Girls website does a great job of using a texture to compliment the overall style & quality of the design.

A hint of Wear & Tear: Viget Advance

I don’t think you can ever be too subtle, any amount of detail no matter how subtle will be noticeable, and whether people are aware of it or not it does have an impact. This example from the Viget Advance blog shows some hints of wear & tear, just a very small amount of wear, but without it the paper would look flat and dull. It’s the small imperfections that make it more believable and real.

Watercolours on WebDesignerWall

When using watercolours it’s always nice to make sure you mix the colours and keep the colours very soft, faded, and well… Watery. Using watercolours can benefit your design in many ways, it allows you to inject some subtle colours and bring in some texture, which is why it’s become quite a popular choice for many designers to include.

Subtle Floral Elements; Dara’s Garden

This is a brilliant example of subtle floral detail within a design. There are some more vivid floral illustrations that are also quite stunning, but in this example we are focusing on the lighter & softer details in the background. This really shows the importance of subtlety, the soft colour and worn look to the pattern means that your eye is aware of the detail, but it isn’t the main focus.

Tips for Subtlety in your Design

For me, subtle details in a design can really push a design from being good, to being amazing. If you’re looking for a way to inject something special into your design, subtle details really are the way to go. Here are some tips to keep in mind when including subtle details in your design.

• Build up your layers
Never just use one brush or texture, build your details up.

• Experiment with opacity & Colour
Sometimes even 3% opacity can have a positive impact.

• Don’t worry, Be Brave
Done be afraid to be too subtle, or too faded.

06. Using Colour to it’s Full Potential

People often judge colours on their personal taste, which is a huge mistake. If you’re ever in a situation where you need to decide upon what colours look good in a design your mind should always be on the brand, and building a theme and mood using a colour scheme.

Brilliant uses of Colour In Web Design

Real Estate can be Real Colourful: Oypro

The thing I like about the Oypro website is that it proves that a “boring” subject doesn’t have to have a boring design. All too often corporate sites have a reluctance to allow designers to really put across some creative flair in their designs. There seems to be a need to keep things simple, flat, and gray. But this design proves that you can still have a corporate looking website, without the need to hold back.

Keeping your Colours Relevant: Tennessee Summertime

Summertime in Tennessee is a vibrant, bright and very warm website. Everything you’d want to associate with a site that is promoting summer activities. There are a lot of different colours in play here, but all of them are relevant. Good quality designs have a colour scheme that is relevant to the service or product that they are designing for. Sometimes it’s the obvious colour choices that make for the better design, a good example of my point is Hell Design - it wouldn’t make sense being any colour than a firey red.

Variety in your Backgrounds: Saturized Studio

It’s not enough just to have colour in your background and expect that to make it interesting. Some of the best backgrounds are those that have a bit of variety, in this example we see that the beautiful orange/red colour is subject to all sorts of lighting effects and gradients. It gives an extra something to the background, and prevents it from looking stale and flat. Important to note here too that the contrast between the dark & deep orange works really nice set behind the much lighter content area.

Tips for using colour in design

Colour is always a good area for exploration and trying different possibilities and variations, but it’s always important to keep a few things in mind when choosing colours and a colour scheme.

• Experiment
A boring topic doesn’t have to have a boring colour scheme.

• Variety
Try using gradients, patterns, brushes on your colourful backgrounds. Colour alone doesn’t make something look good.

• Stick to a Theme
Make sure your colours are relevant to your product/service.

07. Doing something Nobody else has done

Some of the best websites around are those that are out of the ordinary, strange and somewhat bizzare. But those that challenge the norm may end up changing what the norm is. But being truly original and creating something nobody else has done before is the toughest thing to do in design.

You could end up making something of amazing brilliance, or you could end up with a design that’s worthy of nothing but criticism. It’s a very thin line between success and failure; I mean there are reasons something’s never been done before, and it’s usually because it’s a shit idea. You’ve got to be brave to step away from what people know and love, and here are a few examples of that point:

Unique Navigation on MB Dragan

Not exactly your average site navigation, but would the website look as good if it just had a standard navigation. I’d say it was a bit of a risk having the navigation in such an unusual way, but it does fit in with the site, it is relevant, and it’s done to such a standard that it’s hard not to appreciate how well it works with the overall design.

Visualbox & their very Visual Navigation

Visualbox have one goal in mind, showing you their brilliant work. So they’ve got very little text, on first look all you see is their Name and a selection of their work. The preview box changes when you hover over it to reveal details of that project, so it’s actually a very effective and functional solution, and much more appealing then just having a list of links.

Straight to the point with Nikola Mircic

So you’re a interface designer, you want people to see your work, and hire you. Nikola Mircic shows us how getting straight to it makes for a really impressive site. You are greeted with a wide variety of his work, his name & what he does at the top, and a contact link. There’s no mass of text or fancy words to convince you to use his services, he literally lets his work talk for itself. Of course you can click on the images to see more & get some text, but the layout if very unique and I love how it works.

Tips for trying something new

The examples above are not meant to be “inspiration” for unique ideas, just simply a couple of sites that I found that I’d deem to be quite unique. The fact is you can’t really search around for inspiration on new ideas, as it kind of spoils the point of it. So really you can just ignore this whole section if you are trying to think up something new!

• Keep it Relevant
If you’re going to do something very new and unique, ask yourself “does it make sense” and “does it fit with the branding?” if so then go do it!

• Ignore everything you know!
Okay maybe not everything, basic principles may stay the same, but there’s no point looking for inspiration on new ideas, you’ll just be heading in the wrong direction.

• Keep a level of quality
I think generally if your new idea looks good, and works well it’s much easier for you to justify.

What Do you look for in a Quality Design?

There are so many things that can make a design stand out as quality, I’d say I’ve just covered a few of the base points. So I’d love to see your ideas and thoughts about what you look for when you decide whether a design is good or not.

Danny Outlaw Talks Personal Branding & Promotion: Tips on How to Get Yourself Out There

liam — Sun, 12 Apr 2009 09:00:31 +0000

Starting out as a designer, or blogger isn’t always easy. The hardest part is promoting yourself & your blog. Danny Outlaw, from Outlaw Design Blog talks us through how he tackled the problem, and gives us some seriously useful and true tips to help you build your own personal brand. Danny is re-launching his blog soon, and talks us through his strategy of building his brand.

Meet Danny Outlaw

I started out doing graphic design and web design several years ago. While I love doing creative stuff, I find the business side just as exciting. Over the years I have started to do more “creative director” type stuff than actual design work. As a result, I have really started to focus on creating a variety of sites and businesses to try and help the creative community.

While I can’t share too much about the new Outlaw launch, I can tell you that my main focus of the relaunch was to create a site that helped creatives with both the business and creative aspect of the industry.

Websites that I write and contribute for include:

Web Designer Depot
Smashing Magazine
Freelance Folder
Graphic River
PSD Tuts
Tutorial9

Websites that I run include:

Wordpress Designers
T-Shirt Mogul
Freelancing Abroad
Linkbait Writing Services
DesignThatInspires.Us
Outlaw Design Blog

There are probably more, but I loose track sometimes!

How did you start out, with Designing & with Blogging

I have been into design and business since I was a kid. Ever since I got on our first family computer with a dot matrix printer, I was hooked. Then in the 5th grade I got a subscription to Entrepreneur Magazine, and I knew I would never work for anyone.

I wanted to start a blog to help position myself as an expert in the industry. I always felt that the fact that I had a really good handle on the business side of freelancing meant that I had a lot to offer to the community. People really seemed to like what I was saying when it came to the business of freelancing and the blog just sort of took off. In the past I didn’t run the blog as best as I could have, but that will change with the relaunch!

Why is this blogging Important to you & What are the Benefits.

Like I said, for me, blogging was about setting myself up as an expert in the industry. While Outlaw Design Blog helped start that personal branding, working with other major sites really helped sky rocket the “Danny Outlaw” name into the design community.

It’s funny, I’ll work with people or chat with them online who don’t realize I’m Danny Outlaw. Then when it comes up that I’m Danny Outlaw, people kind of freak out. I get a lot of..” oh man, I didn’t know YOU were Danny Outlaw! I love your stuff, it really helped me out!”

Are there any down sides to having your time split between so many things & How do you Manage your time & Work?

For starters, I pretty much don’t contribute anywhere that can’t afford to pay me. I do so much in any given day, that I can’t afford to write these intense articles, videos, and round ups if I’m not getting paid for it. I’ve lucked out that I have been doing this long enough and well enough that people don’t mind paying my rates.

As far as managing my time goes… The three things that help me out the most are my iPhone, Basecamp, and working with a close team. I have a very select and small group of designers, writers, and developers that I work with. I couldn’t do what I do without them. Being able to have a small team of people you can count on goes a long way at getting things done. Make note that I’m not talking about out sourcing, but working with a small group of people who’s work I really admire.

What advice would you give to help others get their name out there?

Creating a personal brand is all about finding a hook. Start by trying to figure out your own personal angle and then take it to an extreme. My whole Outlaw brand is a prime example. I created a name, site design, and avatar around the Outlaw brand.

I think avatars are an under utilized aspect of branding as well. Using your own picture works OK, but if you use some sort of unique graphic or image that helps reinforce your brand, it will make your name and avatar more memorable.

Branding aside, its all about creating great work. Every site that I write for has contacted me to write for them because of the work they had seen on my site and the other sites I write for.

How important do you see social media services to the success of a designer & blogger?

I talked about this a little bit in a video I recently did for Graphic River.

“If you don’t mind sharing some of your social networking profiles, then add your profile links and invite your clients to connect with you. If both you and your client are active in these networks it can help keep your name fresh in a would be clients mind. For example, if you are the only designer they are following on Twitter or Facebook and you regularly post about design; a would be client will probably think of you the next time they need design work done.”

I think connecting with clients and would be clients via social media is something that every creative should do. Combine the above mentioned ideas with a creative brand/name/avatar and you could probably increase your workload 10% or more.

Having worked on so many websites who are the most interesting people you have come across?

As you know, I have been a fan of yours since we first started chatting it up in the early days of Outlaw Design Blog.

Recently I met with David Legget from Tutorial9 and UX Booth. He is a really impressive guy with a great head on his shoulders. Everything he does and the ideas he comes up with are all about the benefit to the end user. I really admire that. I constantly find myself bouncing ideas off him to get get his feedback.

I’m also a really big fan of Rob Palmer of www.branded07.com who did the majority of the illustration work with the new Outlaw Design

What sites would you recommend to people who want to start guest blogging

Its hard to say. The few places I approached in the early days to guest blog on had little to no impact. And all of the ones I write for now contacted me.

One piece of advice I can give is to learn how to write a guest post that is profitable for you and the blog you are writing for.

Find ways to add links back your site in the post without being spamy, use your business as an example in the article, add photos or images you created into the post.

What posts seem to go down the best when you are writing for other blogs

With so many new design blogs popping up, everyone seems to have the “I can do that” mentality. They fail to come up with creative ideas for articles and instead just do something similar to what they saw on SU or Digg.

Coming up with creative and useful ideas for posts is the best thing you can do. Obviously longer posts/list do better, but a mid length post that is original, creative, and helpful can do way better.

What’s the difference between writing for you own blog, or writing on someone else’s?

The only hard part here comes in having to think up all of the content. When you write for 6+ creative websites, it gets a little hard to come up with unique ideas for all of them. Then the problem of “what do I save for myself” also comes into play. Obviously I want to save some of the good linkbait type articles for myself, so finding that balance can be hard.

Name 5 Dream Blogs or Websites you would love to write for

I don’t really have any. I write for them already!

The one I was really excited to start working with was PSDtuts and then Graphic River. I am a huge fan of the Envato Network. I love Collis and Cyan. They are just genuinely nice people and I am super happy to be a part of what they are doing.

Would you say your strategy has worked for you?

I’m pretty happy with how my personal branding strategy has worked at this point. I’d say a better part of the design community knows or has heard of the Danny Outlaw name, and that’s what I’m going for.

If I would have known that Outlaw Design Blog would have done as much as it has for the brand, I would have put a lot more into it a long time ago.

But this new launch includes a lot of the things I would have done in the past had I known.

Anything big we can look forward to soon?

T-Shirt Mogul

The T-Shirt mogul website will be launching shortly after Outlaw Design Blog is up and running. It will be an interactive learning environment on how to start and run a profitable t-shirt business. It will includes things like weekly lessons on helping you setup, market, and brand your t-shirt company. There will be a members only forum, month teleseminars, and a whole lot more. One really cool selling point of that site will be all the resources that come with being a member. For $27 a month, you will not only get business lessons, but every week we will be uploading unique vector graphics, Photoshop brushes, blink t-shirt images, hi res pictures of models in blank shirts and tons more.

These resources alone are well worth the price

Freelancing Abroad

The Freelancing Abroad is another interactive learning site where people can join and learn how to run a profitable freelance business from just about anywhere in the world. The will be 4 - 6 moths worth of lessons and worksheets that teach you everything you need to know about working and living abroad. It will also include a members only forum where you can talk directly to me and I will also do regular telesiminars, videocasts, and much more.

I think the creative community is going to be really interested in this site. So I’m going all out to make sure it will be worth the cost.

Thank You Danny

We’re really excited about the new Outlaw Design Blog, and we will be bringing you an exclusive first look at the new website just before the re-launch. You can subscribe to stay informed. Hopefully you found Danny’s words helpful, it’s always good to get a good honest review of the good and bad, which in turn can give you guys a better idea of what works, and what doesn’t. Please leave a comment and let us know your thoughts.

Portfolio: 3 Application Icons for MacRumors New Software Bundle (BunnyBundle)

liam — Wed, 01 Apr 2009 11:51:54 +0000

We’re excited to announce that we’ve worked with the biggest mac website & forum around, MacRumors, designing some icons for a new Mac Software Bundle they have released recently. Take a look at the software bundle and see their range of innovative new products for Mac users.

We were approached by MacRumors to make 3 icons for them, I’ll outline the Icons we made and their functions below:

FemText

Today’s modern women don’t have time to be bogged down by bloated, male-centric word processors. They need their ideas to flow forth, like a fresh summer’s breeze (or possibly a gentle mountain stream) and FemText is the only text editor designed with the gentler sex in mind. The idea: For this icon we played on the TextEdit Icon, with a softer and more feminine touch.

Screen Supersize

Just install the Screen SuperSize drivers and pop your 4th generation iPod nano into its dock. Its humongous 240×320-pixel display will instantly become your Mac’s primary desktop. Use your iMac, MacBook, MacBook Air, or MacBook Pro screen or your Mac Pro external display for extra apps, windows, and palettes. You’ll be more productive in no time! The idea behind this icon was to represent viewing your current screen on a much more convenient, smaller screen.

UnDesktop

How often does this happen to you in your work as a Photoshop professional? You’ve been hired to airbrush photos for the Sports Illustrated swimsuit issue. While the boss isn’t looking, you use your computer to do a little private web surfing for information about the sociological implications of using bond-based financing for urban development initiatives. But your boss returns suddenly and you can’t hide your windows fast enough. You’ve been caught! The Idea for this icon was to show an easy way to close the window, and cover what you were viewing with a work related window, hense the split screen.

Read the Full Information

Make sure you read the full information and key features before posting a comment. You can see all of the applications, including others that we didn’t design the icons for, on the MacRumors BunnyBundle information page. I think you’ll agree they are truly amazing applications. The price is set at $49, for the whole bundle, and more bundles are unlocked after a certain amount of apps are sold. Enjoy.

Icon Set Giveaway Results & Some Graphic River News

liam — Thu, 05 Mar 2009 03:09:16 +0000

Thanks to everyone who gave us feedback on the icons, and ideas for future sets. We’re very happy with how things went. Right now we have the Highest Rated, and the Most Downloaded icon set on Graphic River, and the 3rd most popular file overall.

We chose the 10 winners based upon their uses for the icons, and I hope that the icons can make an impact on the designs that all of the winners use them in.

The Winners

We’re really happy that so many people took the time to give us some feedback, and here are the list of the lucky 10 winners:

01. DVQ / cosmokramer
02. Nick C
03. John / johnyboy
04. Cody / cosm44
05. Jordan / Cupcakes
06. BrandRob
07. Dan Cameron / sproutventure
08. boxcarracer
09. iPad
10. Design Studio 51 / ToddyBoy

Some other Amazing Files to Check Out!

While I’m really happy with how well my icon set is doing on Graphic River, I’ve been really impressed with a lot of the items for sale on the site. So here’s a round up of a few of my favorite items currently available for download on Graphic River.

Commerce Theme Vector Icon Set

Very useful icons with a great style to them too.

Circularity - Circular Icons

A really nice icon set which I think has a really nice finish to it.

Colorful Abstract Circles

Very well made and beautiful looking abstract.

Graffiti Grunge Painting

Lovely work here, this pack could have a lot of uses for your grunge work.

So there we have it. Congratulations once again to the winners, and I hope you all enjoy exploring Graphic River. If there’s any items on the website which you think deserve a mention, do so in the comments section.

Function Premium Icon Set: A Set of 148 Great New Icons & GraphicRiver Giveaway

liam — Mon, 23 Feb 2009 23:12:21 +0000

We’ve been working hard to create these beautiful icons exclusively for GraphicRiver. They are a great addition if you already have our free icon set, they are done in a similar style and could be used together. The new icons are a lot more refined and clean, with a lot more new icons that may have been missing from the first set. Check them out and let us know what you think.

We’re also quite excited to announce that the latest marketplace from the wonderful Envato team is now up and running. It’s called Graphic River, and it is where we have put out latest icon set up for sale. Also, if you have a read through this post you will see that they will be giving away 10 free copies of our icon set… scroll down for details.

View The Complete Set

Icon Set Details

There are 148 icons in total, and they are ideal for use in your website, blog or application. We’ve seen or last set used in everything from top 25 iPhone applications, to web blogs and some really neat websites. We hope that this new set will be just as successful and useful to all of you out there.

Download Function Premium Icon Set | .zip Format | 2.5mb | 48×48px Icons

Win 1 of 10 Free Copies of the Icon Set

As part of their launch Graphic River have agreed to allow us to give away 10 free copies of the icon set. They launched their new marketplace today, and I really suggest you check it out. The Graphic River website allows you to buy & sell all sorts of graphic resourecs. Everything from icons and Vector illustrations, to Brushes and Shapes for various softwares.

How to Win a copy?

1. Sign up to Graphic River, if you haven’t already.
2. Leave a Comment Here telling us what you would use the icons for.
3. With your comment include your Graphic River username.
4. Make sure you fill out your email address on the comment form, so we can contact you if you win.

Winners will be chosen & announced on March 2nd. The winners are the people we judge to have some good solutions for how to use their icon set.

Good luck to everyone, we hope you all enjoy the new icon set. Leave us some feedback and let us know what you think, and possibly give us some ideas for a few set. I think the next set will be free so it would be great for us to see what icons everyone would like to see.

Free Theme: Magazeen. Style & Functionality in one Theme, now on Smashing Magazine

liam — Mon, 23 Feb 2009 14:12:40 +0000

We’ve been working hard on a few things lately, and this latest theme is one that we’ve made just for you guys! We’ve been working with Smashing Magazine for a while, and we’re happy to finally be able to release the theme. We’ve worked hard on making something that had the clean and sleek style that you’d expect, but we’ve put some extra focus on extending the capabilities of WordPress and it’s standard features, giving you a few extra features to improve the user’s browsing experience.

Download & Demo

Download & Details | Demo

More details and information is available on the link above, also you can check out the live demo to see the theme fully working. We’ve included the PSD files for you to have a play with and make your own customizations to the theme, or just to have a look around. Be sure to check it out and let us know what you think of our latest free theme.

The Neat New Features

jQuery Latest Image Showcase

All of the latest posts are automatically added to the top of the homepage in a neat and interactive showcase of recent posts. A thumbnail is automatically created, and when you scroll over the image the title appears, it’s a cool little way to encourage your visitors to explore and enjoy your posts.

Latest Posts & Featured Posts

We’ve built in some custom widgets that you can control from the WordPress admin panel to easily change the settings for the latest and features posts in the sidebar. We’ve also made them look beautiful, even if we do say so ourselves.

Thanks to You Guys & Smashing Magazine

We’d just like to say thanks to Smashing Magazine for working with us on this brilliant theme, and for (in our honest opinion) running one of the best sites on the net. They really do provide a huge amount of quality and informative content, serving thousands of designers of all levels, so if you haven’t already Subscribe to Smashing Magazine RRS feed.

Also, we’ve not had much chance to blog recently, so thanks to anyone who’s still with us, and I promise you we’ve got a few posts to come in the coming weeks and some interesting and cool new announcements. Thanks guys, let me know your thoughts on the theme.

How-To: Taking WordPress One Step Further

Spencer — Fri, 05 Dec 2008 16:10:49 +0000

Creating a website is no easy task. WordPress is an easy solution for creating a Blog, but sometimes something a little more, in terms of functionality, is needed. After trying many other platforms, I have found WordPress to be the easiest to use. Because of it’s wide array of themes, great plugin system, and easy to use administration system, WordPress takes the cake. Using a Custom Write Panel, Custom Options, and manipulating the theme files, the possibilities are almost endless. In This post we have a few ways you can transform your plain WordPress powered Blog into an easy-to-manage Internet Identity.

The Layout

There are a few things that even the novice WordPress user can do. You can work straight out of your admin panel for a quick solution, or if you are feeling adventurous, editing some theme files can help produce a fresh new structure for your site.

Static Homepage

Anyone who has explored the WordPress admin panel has probably seen the options required for this, but may have not known what they do. WordPress has a built in feature which allows for the Blog owner to select a published page to show up as their default homepage, and select a separate page to list the blog posts. This is great if you want your visitors to see a static page first (ex. About Me page), before they go on and view the blog posts.

You first need to select the page which will show first. Just select any page from the drop-down list that has content on it. Next, you will need to select a blank (but published) page to show the blog posts on. Just create a page like you would normally, adding a title (ex. Blog), but no content. Select that page from second option’s drop-down

home.php

WordPress has another built in feature (it seems they love to make our lives easier) that allows for a completely custom homepage. If your homepage has a different layout from your blog, you can create a separate file, and have that loaded as your homepage. As seen in the template hierarchy, WordPress first checks to see if a home.php file exists. If so, it will load that instead of index.php.

So by creating a file named home.php, filling it with whatever you would like, and uploading it into your theme’s root folder, you are able to create a separate homepage. By utilizing the Loop, this is a great way to show only certain posts when the guest first views the site.

Note: All HTML Markup is based on the WordPress Default Theme.






Welcome!

This can be a custom part of the home.php, just a little custom welcome text. You can check out some of our latest News Posts below.

This should all look pretty familiar if you have any experience working with WordPress themes. First, I’ve included the header.php file with the get_header(); function. Then just some basic HTML Markup that includes a welcome message at the top of the page.


News Posts













There are no new posts in this category.

Here is where we are going to list our latest Blog posts. It is just a basic loop, except for one minor difference:

query_posts can be used to modify a WordPress loop. I’ve modified this loop to only show one category, in my case, a news category.

The last part of our home.php:

The last difference is the way I include a sidebar. By using an include_once(), I can include a different sidebar in our home.php. You can use a Include Tag to include a separate file. In the same directory as your theme files, create a file you would like to include in your sidebar.

Live Examples

WooThemes

Custom Page Templates

Like using a home.php, using a Custom Page Template is useful for creating unique pages that do not fall under the same layout as your main blog. However, custom Page Templates allow for any page to be custom, not just the homepage. The best part about them, is they are super easy to make.

If I wanted my “About Me” page to include a different sidebar then the rest of my blog, and perhaps the Search Form above it, there is a very easy way to go about this. In your theme’s directory, just create a file called about.php

That is the most important part. WordPress will read the top of the file and realize that this file is supposed to be used as a Page Template. Below that, you can add whatever code you like. There are two ways of doing it. You can add static content to your post, or add the Loop again, so the content is retrieved from WordPress. Here is an example of the latter:

Live Example:

Cushy by WooThemes

Conditional Tags

Let’s face it. Viewing the same style pages eventually get’s a little mundane. If you’re looking for a way to spice up your site, or just show different information on certain pages, there are a few ways to do it. Conditional Tags as well as custom pages allow for the ultimate control. Below are just a few scenarios:

If you are not currently viewing a Page, show the sidebar. If you are on a Page, do not show the sidebar.

If you are on the homepage, get a special footer file. If not, show the normal one. This could be used to show more information about your company or site when the visitor first views the site.

For a full list of Conditional Tags, check out the Codex.

The Loop

The Loop. The Loop. The infamous loop. The Loop can be a wonderful thing, or a scary one. It all depends on how you approach it. I’m going to show you a more advanced way of using a Loop, because you can find some great info on the Loop on the WordPress site.

Creating a Gallery Site

Creating a gallery can be great for a portfolio site, a “best web gallery” site, or anything that requires showing some images of stuff.

The code and/or information below assumes you have successfully setup Custom Write Panels

The basic structure for a gallery type site is simple. Create the post adding the necessary information, and list the posts in the gallery page. To start off, make sure you have added the following Custom Write Panels.

Image
Website

These are the only ones needed to create a simple gallery, but of course it can be easily modified to fit any of your needs. The next part would be to create the actual Gallery page. This can be done using a Custom Page template.

Now it’s time to add the loop (in between get_header(); and get_footer();) which will show our posts.

You will of course need to change category_name=Gallery to the name of your category.

For now, I’m just going to do the basic markup. No styling or anything, just so you can get how the the code will be set up. First, we’ll do our gallery item’s title like normal:

Now the cool part. Using a great script called TimThumb we can dynamically create thumbnails of any size. Download the source, and upload it into your theme’s folder under thumb.php

Download TimThumb

Now we’ll start a link so the thumbnail is clickable.


" title="">

I’m setting the URL to be equal to the value entered in our custom field.

Next the image: This gets the value of the image field, and applies the TimThumb code, setting the thumbnail to 100×100px.


/thumb.php?src=ID, "image_value", true ); ?>&w=100&amp;amp;amp;amp;h=100&amp;amp;amp;amp;zc=1" alt="" />

And end the link:

The last part would be to show the description of the website. We can do that by showing an excerpt of the post body.

That’s it for our gallery.php. Now it’s time to activate the Gallery page. In your WordPress admin panel, go to Write > Page. Create a new page with a title of “Gallery.” Leave the body blank, and apply our Page Template

Now, create a post with the correct information, and visit your gallery page. It should list all of your information! Of course, the gallery.php is a very simple, minimalistic page; but it functions.

Note: If your thumbnails are not showing up, please make sure you created a folder named “cache” in your theme’s directory, and it is writable.

Custom Loops

Sometimes you may find yourself needing to use more then one loop. However, an important note on the WordPress codex tell us that instead of using query_posts like we did in our gallery system (it was okay there, because it was the main, and only loop, in our page), we need to use something called WP_Query();. This can be used to fetch any posts, and best of all, it uses the same parameters are query_posts.

First, we need to define a variable as a new query. Then we take that variable, and apply some parameters to it:


query( 'showposts=10&amp;amp;amp;amp;cat=-63' ); ?>

Next, we simply loop through the results just like we would with a normal loop.


have_posts()) : $latest->the_post(); ?>

Like I said, you can use any of the Parameters, making this a great tool to grab posts from certain categories and displaying them around your site.

Social Networking

With the amount of social networking sites, topsites, and tons of ways to spread the word about your articles and blog posts, there has to be an easier way to submit them. By adding links to the bottom of your posts, you can get users to submit your articles for you!

Site RSS


Subscribe'); ?>

Stumble Upon


StumbleUpon

Digg


Digg this

Del.ic.ious


Del.icio.us

Design Float


Float This

Mixx


Mixx

Obviously there are tons more. All you have to do is figure out what variables the submit page takes to fill in the fields, and then create the URL dynamically. Here is a list of some variables you can use.

the_title(); - The Post Title
the_permalink(); - The Post’s URL
the_excerpt(); - A small portion of the article

Conclusion

There are a million ways you can customize and expand your WordPress powered site. I’ve touched on a few, but of course, there are many more. If you are interested in learning a different aspect of WordPress, please leave a comment and let me know. I’ll leave you know with some great WordPress powered sites, that you may or may not have known ran WordPress.

Resources

WordPress Codex - Coding for WordPress
WPCandy - Articles, Tutorials, and Resources
We Love WP - WordPress Powered Website
Intersquash - iPhoneize Your Website (Great for WP)
Web Designer Wall - WP Tutorials
WooThemes - Premium WordPress themes.
WordPress Lessons - Tutorials via WP.org
ThemeForest - Premium WordPress Themes
WP Designer - Creating a Full WordPress site
Lorelle on WordPerss - WordPress Resources
WordPress.com - Get a Free Blog
WP CMS - WordPress CMS Modifications

WordPress Powered Sites

Stunning Free Character Pack: Free Illustrations for any use

liam — Mon, 17 Nov 2008 13:20:31 +0000

This set of free characters is ideal for adding a little personality into your designs. With a variety of actions and poses to chose from you can easily adapt them into your designs anywhere you feel needs it.

Inject a little fun into your dull and boring help pages, emphasize a feature or a button on your page, add a little hint or tip on your page coming from one of the characters, use them to show off or present your portfolio items… Basically you can use them for anything, we don’t mind. All we ask is that you link back to this page if at all possible, but it’s not a requirement.

Created by Pasquale D’Silva

We’ve worked with Pasquale before on our Twitter Illustration in a previous post, but we really love his style so wanted to work with him again on something which we would use, but also something that we could share with you guys.

We highly recommend you check out his work via his blog @ darkmotion.com because he truly is one of the most talented and professional people you will ever come across, so if you did like this character set, and perhaps want something a little more unique and something created just for you give him a shout.

The Full Set

Here is the complete set - we’ve gone for quality and usefulness, trying to create poses that could be used in a lot of many different ways, and for many different things, take a look below!

Show us what You’ve done

If you do download these and use them it would be cool to see them in action, leave a link in the post below and let us know what you think of them. And if these go down well we should be seeing some more like this in the future.

Download the Character Pack

The files are in .eps format perfect for scaling. You will need to unzip the pack at first, then you will find the files inside. Enjoy!

Download Function Character Pack | 309.8 kb | .zip

Free Theme: Color Paper Wordpress Theme now on Smashing Magazine

liam — Thu, 06 Nov 2008 15:49:27 +0000

A while ago we had the pleasure of working with DreamTemple for a Wordpress Theme which they’ve given away for free on Smashing Magazine. That means you can get this beautiful and unique theme for free, from the king of freebies Smashing Magazine.

We’re very happy to once again have some of our work featured on such a wonderful resource, and are working on another free theme which will be also be released on Smashing Magazine.

Theme Details

Details and Subtle Touches

As always we’ve added many subtle background effects and textures, the beautiful dark wood texture contrasted with the clean open paper background on which the content lies. We’ve managed to make something which remains very spacious and clean when it comes to the content, even though it sits on top of something very decorative and grungy.

Colour Changes

As a added extra touch, we’ve created some additional schemes which you can easily switch through by clicking any one of the colour tabs on the side of the theme. This will change the colour of the links throughout the page. We were going to have a completely new theme for each tab, but the colours never looked as good as they do right now, so we felt it would be better to retain the quality of the original and just have the links change colour.

Traditional Blog Layout

Although Magazine styles are great (well I still think so at least) - we’re just as happy to see more and more personal blog layouts coming back. The truth is, not every blog needs to have a magazine layout, so we’re glad to have been able to offering something for those of you who prefer something which is more personal.

Once again, we’d like to thank DreamTemplate for working with us on this theme and Smashing Magazine for releasing the theme and their great support.

Download & Demo

Download & Details | Demo

More details and information is available on the link above, also you can check out the live demo to see the theme fully working. And as the theme is free you’ve got no reason not to try it out. The PSD file is also available for download, make sure you check the download & details link for that. Thanks, let me know what you think.

Themes: Open Air, A magazine and A Personal Blog Theme

liam — Fri, 31 Oct 2008 00:52:56 +0000

Another collaboration between ourselves and WooThemes, the result: this stunning theme with optional layouts. We’ve realized, that while a lot of people no doubt love magazine style themes - there are still a lot of people who would like the option of having something a little more personal. So here you have it!

As always with WooThemes there is a range of colours to chose from, and a really easy to manage back end, which means whichever layout you chose - it’s always easy enough to manage.

Theme Description

OpenAir is designed to have a very sort and open feel to them, with soft subtle gradients and border with great use of white space to give a spacious and elegant feel to your content. We’ve set the theme around a grid based layout so that information can easily be seen and read throughout.

Theme Details

Navigation

We’ve made navigation very easy and well presented through the theme. At the top you have any links/pages you’d like. And along the other navigation/tabs we have a list of categories. Making it very easy for you to browse through the categories, and to see which category you are in at any given time.

Post Info & Related Posts

Related posts are a great way of encouraging exploration to your website. And we’re used to seeing them hidden away in posts or at the end of posts, but why not have them on the front page next to a post? They are easily accessible now next to any post.

Grid Layout

Grids are undoubtedly a great way of displaying a lot of information, in a easy to browse and manage way. OpenAir makes great use of grids in this way to display older posts in a much more attractive way.

Download & Demo

Download & Details | Demo | Blog Post

Use the links above o read more about the theme and to experience it for yourself. We’ve had a few releases on WooThemes and are really proud to be working along side some great guys. Not only do they provide great looking themes, but if you purchase a theme you’ll no doubt be impressed with their support forums and custom back-end theme options. And right now they are running a 3 for 1 deal on all of there themes, Including this one.

Tutorial: Creating Custom Write Panels in WordPress

Spencer — Mon, 20 Oct 2008 19:31:15 +0000

Everyone knows that WordPress is one of the most, if not the most, popular blogging systems on the internet today. With its out of the box features, plugins, and great theming community, its no wonder WordPress has been accepted as today’s standard. However, sometimes you just want to add a little more.

It seems the latest fad to hit the WordPress scene is adding thumbnails into a blog post. This is fairly easy to do with some knowledge of custom fields, but can be a little complicated if your client is new to WordPress, or blogging.

Luckily, WordPress has a solution for us. We are going to use a little something called add_meta_box.

Note: This tutorial requires both knowledge of WordPress, as well as PHP.

I shared a link in a comment that WordPress has a little tutorial for this on their site. However, it is a little incomplete, and leaves a little to be desired. So, let’s get started making our own!

Examples of Usage

To see how you can use custom write panels take a look at these couple of examples, or click the image below.

functions.php

Please excuse the indention of the code. The WordPress plugin does not like my tabs.

All of the code we are about to add will be put in functions.php. This file is included automatically in the Theme, so anything we put in here can be used throughout the theme.

To make this expandable for the future, we are going to declare all of our information in an array. This way, we can add some information to the array, and it will be automatically added to our Admin Panel.

Information Array


/*
Plugin Name: Custom Write Panel
Plugin URI: http://wefunction.com/2008/10/tutorial-create-custom-write-panels-in-wordpress
Description: Allows custom fields to be added to the WordPress Post Page
Version: 1.0
Author: Spencer
Author URI: http://wefunction.com
/* ----------------------------------------------*/

$new_meta_boxes =
array(

);

Inside of that array, we are going to add more arrays which will hold the information of the new meta box.


$new_meta_boxes =
array(
"image" => array(
"name" => "image",
"std" => "",
"title" => "Image",
"description" => "Using the \"Add an Image\" button, upload an image and paste the URL here.")
);

The array is pretty self explanatory. The first value is the name of field, after that would be a standard value (in this case, it is blank, but this would be useful to store default information), and then the Title of the meta_box, ending with the description.

There are 3 functions that will be the backbone here. Let’s go ahead and declare those now:


function new_meta_boxes() {

}

function create_meta_box() {

}

function save_postdata( $post_id ) {

}

Creating the Fields

Lets work on function new_meta_boxes().

This is the function where we are going to build the actual HTML inputs. We first need declare a few variables as global. We will then be able to access them inside the function. We need to be able to access the $post variable, as well as $new_meta_boxes (our array.)


function new_meta_boxes() {
global $post, $new_meta_boxes;
}

Because all of our information is in an array, we need to loop through it all, and create an input box for each one:


function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {

}

Next we need to figure out a default value for the inputs. We can do this by checking the get_post_meta WordPress function.


function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

if($meta_box_value == "")
$meta_box_value = $meta_box['std'];
}

This is some pretty simple PHP. We define $meta_box_value, and set it equal to get_post_meta. Next, we check to see if our variable == "" (equals nothing) meaning no data has been previously entered. If nothing has been entered, we set the $meta_box_value equal to the std value we defined in the array

Time to start building the inputs. First off, we are going to create a hidden field that we will use to verify the data later on.


echo'';

Now we can echo the title of our Custom Input:


echo''.$meta_box['title'].'';

Next our actual input box. This gets the value of $meta_box_value we worked out earlier.


echo'
';

Finally, just add our little description we defined in the array


echo''.$meta_box['description'].'';

(All of that is still in our function new_meta_boxes() function.)

Make it Meta!

Our next function, function create_meta_box(), will actually create each of the meta boxes. We are going to be using WordPress’s add_meta_box


function create_meta_box() {
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', 'Custom Post Settings', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}

if ( function_exists('add_meta_box') ) { is important because this function did not exist in versions of WordPress before version 2.5. You need to on at least version 2.5 before this will work.

From WordPress.org, the function works like this:

callback is the most important. That is calling our function (new_meta_boxes). context decides whether or not this field should display on the “Write > Post” page, or the “Write > Page” page. You can read more about the parameters on the WordPress site

Saving the Data

Now here’s the important part, and the part where WordPress.org is pretty vague. This function will save our data.


function save_postdata( $post_id ) {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {

}
}

This is our function, and we’ve started off with including a few variables. Again, we need to include $post so we have the ID of the WordPress post. Also, we have to include the $new_meta_box array, as we will loop through it again.

This next bit (inside of the foreach loop), will verify that the data we are receiving is genuine.


// Verify
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}

if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}

No we are going to define a variable that will get the data out of our fields.


$data = $_POST[$meta_box['name'].'_value'];

It gets the $_POST data from our fields we created in the previous functions.

Now the last thing to do is to decide what to do with the new data. To keep WordPress from creating a new database entry each time, a few checks need to be made. First, we try and get any information with the same key and post id. If it returns empty, we know this custom field has not been added before. So, lets add it.


if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);

Next, we check to see if the new data in the field is different from any old data. If it is, we simply update the field.


elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);

The last thing to do is delete one, if the field is left empty. This will keep our database free of any blank entries.


elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));

Now, to actually make things work, we need to “hook” WordPress. We can do this by using add_action. This simply adds our functions to a specific area of WordPress. In our case, we need to hook the admin_menu, as well as when the post is saved, save_post.


add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

Our Final Code


/*
Plugin Name: Custom Write Panel
Plugin URI: http://wefunction.com/2008/10/tutorial-create-custom-write-panels-in-wordpress
Description: Allows custom fields to be added to the WordPress Post Page
Version: 1.0
Author: Spencer
Author URI: http://wefunction.com
/* ----------------------------------------------*/

$new_meta_boxes =
array(
"image" => array(
"name" => "image",
"std" => "",
"title" => "Image",
"description" => "Using the \"Add an Image\" button, upload an image and paste the URL here.")
);


function new_meta_boxes() {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);

if($meta_box_value == "")
$meta_box_value = $meta_box['std'];

echo'';

echo''.$meta_box['title'].'';

echo'
';

echo''.$meta_box['description'].'';
}
}


function create_meta_box() {
global $theme_name;
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', 'Brazen Post Settings', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}


function save_postdata( $post_id ) {
global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
// Verify
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}

if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}

$data = $_POST[$meta_box['name'].'_value'];

if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
}
}


add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

Implementation

Now I bet you are wondering “now how the heck do I get information?!” Well, it’s quite simple really. You do it the same way you would for a normal custom field. We’ve been using the function already in the tutorial, get_post_meta().

So, just open up one of your theme files where you want the custom data to appear. First, let’s check to see if there is anything entered for this post. Because if there isn’t, we shouldn’t show anything (in this case, it would result in a broken image.)


ID, "image_value", $single = true) != "") :
?>

Now the actual image:


ID, "image_value", $single = true); ?>" alt="" />

And to end our if statement:

Conclusion

As you can see, customizing WordPress is not an easy task. However, it pays off in the long run. By streamlining the User-Interface of adding custom data, you can help make your life, as well as your clients life a whole lot easier.

If you have any questions about the code above, or the tutorial in general, please do not hesitate to leave a comment below. I will do my best to help answer any questions that may arise.

Themes: Hallmark a Joomla theme now on ThemeForest

liam — Sat, 18 Oct 2008 01:13:15 +0000

Demo & Info

That’s right, we’ve worked on a Joomla Theme. Although we love Wordpress we realize it’s not everybodies’ first choice of CMS. So we felt it was only fair to make something just as pretty as our Wordpress themes for the Joomla people.

The result, Hallmark, a premium Joomla theme ideal for running news/magazine sites - or your own personal blog. We’ve even included a custom styled comments system, something which is optional but really is pretty and can help add that extra bit of interactivity to your website.

Theme Description

The focus here was on clean simple slick lines, and soft gradient effects and lighting, while maintaining a very open and light feel to the theme allowing a lot of content to be visible on the front page, without making it look too busy. We’ve done a lot of customizing with Joomla to maximize it’s abilities. And feel there is now plenty more to offer which most Joomla themes don’t include.

Theme Details

Layout

The first thing that you notice is a blog like layout at the top, which makes this ideal for the blogger who chooses to use Joomla. As we scroll down we can see there is more of a Magazine style layout with a lot of content that is easily accessible. We’ve also made the pagination look pretty with the next and previous pages with the page count looking very clean.

Comments

One of the areas I think most Joomla themes are lacking is with interactivity and comment. We’ve custom styled a popular Joomla comments plugin, which comes with the Theme which you can use to transform the comments area into something a lot prettier and easier to use.

Further information

The theme is only available exclusively through Theme Forest. Sign up process is very easy and you can sign up, and have the theme purchased in only a matter of minutes. The price of this wonderful theme is currently only at $30, and as you can see you are getting a lot of theme, for very little money. See the Hallmark info page and leave a comment there, or below and let us know what you think.

50 Stunning Examples of a great redesign: My Top Picks

liam — Wed, 15 Oct 2008 12:54:22 +0000

A redesign can be worth its weight in gold if you get it right. There is a thin line between freshening up your design, and taking a step backwards with a redesign. Sometimes a redesign can be subtle and simple, and other times it can be a huge re-vamp of a company and it’s goals. Here’s a look at some of my favourite re-designs in no particular order.

01. AT&T Inc.

This is an ideal example of how a subtle upgrade can make a huge difference.

02. BP Garage

A completely different direction and modern feel. A huge improvement!

03. Sprint

Looking at the old sprint logo it’s obvious a re-design was needed.

04. Mindshare

A great find via Brand New. Great use of colours & typography.

05. Mustang 2010

The current 2009 Logo, compared to 2010. Subtle improvements, but wow so much more aggression! Source: AutoBlog.

06. Adobe Photoshop CS4

Adobe has come a long way in a short time, I like the way things are going.

07. Discovery Channel

Probably one of my favourites. Really love the placement of elements.

08. Fanta

The old can really does look dated compared to the new look.

09. Johnsons Baby

Not one of the obvious choices, but I love the softer approach.

10. Fiat Bravo

Yeah that’s right, a car made it into the list. A great example of a successful redesign, and Fiat’s recent sales figures prove it. Plus I drive this car, so a very biased choice!

11. Steinlager

I hate lager, but if you presented me with this… It’d be rude to say no.

12. Applebee’s

Great example of a redesign where the concept stays similar but the execution is on a completely different level.

13. Firefox / Firebird

A name change, and a great leap forward. Time really is a healer.

14. QVC

A huge Brand, and a major revamp. And a much needed one.

15. Vauxhall

A UK car maker with a new, more prominent identity. I like the old one, its clean and not much is wrong with it. But the new logo reflects more on a new company direction and style of their cars.

16. MSNBC

A fresher look, more open and less in your face. Works well I’d say!

17. Ford

Yep, more cars related stuff. But a much deserved mention here.

18. Ford Fiesta

Sticking with Ford, their new style Fiesta really is a beauty.

19. The BBC

One of the most recognizable UK brands, good job it looks great then.

20. Direct TV

The same concept, shape and fonts. Just better.

21. Barack Obama

What a difference a year makes. The 2007 site compared to the ‘08. Probably one of the best website re-designs around right now.

22. Grooveshark

David Pache, this guy knows how to redesign a brand identity.

23. BusinessWeek

Simpler, Bolder, Cleaner. A successful redesign in my book.

24. Viget Labs

It is amazing how far we’ve all come in terms of web design in just a few years, Viget is a great example of this.

25. Toys”R”Us

A much more playful typeface and colour scheme. I found this via a great article on Logo Design Love: 10 Sucessful Logo redesigns.

26. Seat Leon

The old model wasn’t hideous, it’s only after you see the new model you start to believe it is. A truly amazing revamp, hats off to Seat design team!

27. N Design Studio

How to flip your website into an iconic design, courtesy of Nick La.

28. The BBC website

Words cannot describe how much I hated the old design. The new site really is something for the BBC to be proud of.

29. Wordpress.org

A much more engaging and approachable design from Wordpress.

30. Microsoft

Making something out of nothing, and doing it well. Microsoft.

31. MailChimp

I dare you to find a better looking mascot. A huge improvement, but a much needed one I must say, the new chimp really does have that “cute-factor”

32. CNET

A subtle update, and you know I love subtle. Beautiful end result.

33. Wembley Stadium

When updating something so Iconic, you need to make something just as iconic. I’d say a job well done on this one.

34. Apple iPod

Advanced technologies and production methods sure do look good.

35. The Simpsons

Right? Now you’re including cartoons… This list is crazy! Maybe so, but this has to go down as the redesign I’m most glad of.

36. XBOX

A new direction with the XBOX design, colours shapes etc are a huge leap in the right direction.

37. Design Shard

With a growing blog it’s important to design for the needs of your visitors. Max does a great job here on Design Shard.

38. KFC

Colonel Sanders is looking better in his old age. A cleaner look.

39. Walmart

A more modern feel to a logo which was showing its age.

40. Envato

A sleeker looking logo really can help kick off your re-branding.

41. Best Buy

A logo which is more fitting to the company & its products.

42. Macmillan

A great bold move by MacMillan Cancer care charity, but one that works really well and a very recognizable brand now.

43. Holiday Inn

Quite possibly my favourite, something about this is just so welcoming. Which is good for a Hotel company right!

44. British Telecom

I have no idea what that guy is blowing into, and I don’t want to know. Needless to say the new logo represents a more dynamic company, with more to offer than just horn blowing.

45. Vicks

The old logo very possibly was made in MS Word. You’d struggle to make the new one in Word, so I like it!

46. Fuel Your Creativity

Adelle really has put a lot of thought into her new logo, and it really has paid off. The new logo has a much more lasting impact.

47. Amazon

For an online store like Amazon the old logo didn’t really fit. The updated version looks better in both web and print.

48. Virgin Media

Not really a redesign, more of a buy-out and brand build. Never-the less it was a refreshing moment for customers like myself!

49. Macbook Pro

Top to bottom glass front, one solid aluminium base and you’ve got yourself a pretty Macbook Pro.

50. HP

I’ve not actually seen this used anywhere but adverts. But I really like it!

Sources of Information

Below is some of the sites and blogs I used for research on this post, along the way I found some great resources and inspirations.

Brand New

Without doubt a lot of these have already been covered by Brand New, a wonderful project by UnderConsideration which I urge you all to add to your RSS feed and start to follow. The content really is amazing, and if you love the logo’s I’ve featured above you’ll love it for sure.

Logo Design Love

As I’ve already mentioned there is a fantastic post on Logo Design Love which you might also find interesting “10 Sucessful Logo redesigns“. The logo design Love website is well worth checking out for various posts on Logos and Brands on a regular basis.

Identity Works

Another great resource which documents the process of various redesigns and their goals from 1998 onwards was Identity Works. A really great site to explore and find out about the history of the brand identities.

Brazen; A versatile WordPress theme for the veteran-blogger as well as any beginner.

Spencer — Fri, 10 Oct 2008 22:44:30 +0000

Demo & Info

First off, I’d just like to introduce myself. My name is Spencer, and I am the lead developer here at Function. I’m the guy that takes Liam’s awesome designs, and turns them into working sites.

Liam had this design laying around, and I knew I couldn’t let it go to waste. So, I’ve spent the last week or so, coding and perfecting this theme. The theme is great right out of the box, ready to be used by anyone or very easily customized.

Theme Description

A light theme, with a nice contrasting background, this design is sure to help present any amount of content. A unique sideblog area allows you to easily post small updates, or “micro-blogs.”

Theme Details

Custom Admin Panel

In an effort to make this theme more user friendly, a custom backend has been implemented straight into WordPress! This will allow you to change things like the header color, tracking codes, ad space, Sideblog options, and other features!

Multiple Color Themes

In the previously mentioned custom admin panel, you can choose between a green (default), blue, or red header color. All the colors work great with each other, and provide just another thing to make your website even more unique.

Custom Write Panel

This theme features subtitles, as well as post images. Normally, you would need to go through messy custom fields to add these extra features, but with a custom admin panel its super easy! Add the information just like you add the title of the post. You can learn all about it in the very detailed README included.

Get it Today

Check out ThemeForest to get it today! The price is currently at $25, an absolute bargain. If you don’t yet have an account for Theme Forest sign up using the banner below.

Themes: Evo a fresh Magazine theme available on Theme Forrest with $25 Giveaway

liam — Mon, 22 Sep 2008 19:33:45 +0000

Demo & Info

To celebrate the launch of Theme Forest and our new theme Evo, we’re giving away 5 sets of $25 credit to be used on any theme on the site. Find out more at the end of the post.

The theme is ideal for either being used straight out of the box, or brilliant for being customized. It wouldn’t be hard to stamp your own personality onto this clean and sleek magazine theme. We’re very happy to have the theme available among so many brilliant themes on Theme Forest. Check it out and let us know what you think, for your chance to win $25 Credit.

We were asked by Collis a while ago if we could create a couple of themes for his (then upcoming) new project Theme Forest. We jumped at the opportunity, and by his comments he seems pretty happy. It was a great pleasure for working with such a genuinely nice guy, and despite some complications, problems and delays (due to issues out of our control) he was very understanding and patient.

Theme Description

A cool, sleek theme with the focus on content. There is a large featured post area which is ideal for showing off some crisp photographgy/portfolio items or some amazing imagery that you can find to compliment your article. It really encourages you to find that perfect image to go with your content and keep your readers interested.

Theme Details

Layout

The layout puts the initial focus onto the most recent item, below that we have made use of the 960 Grid System to give the older news a more appealing look and making them easier to browse. The blocks of news below allow for a lot of content to be displayed without looking too busy. Check the live demo to see what I mean.

Navigation

The Navigation is fully dynamic and looks great, as you can see. The colours throughout the site are very easy on the eye and clean, it also makes the whole thing quite easy to customize. And at only $30 it is a great theme to use as it is, or to build upon.

Typography

As always we made sure that the titles were nice and large, clear and easy to read. The beautiful Georgia font came into play for the titles yet again. We felt that it really worked well with the layout and overall feel of the design. Although we love the fonts, we imagine that you could experiment with a few other fonts and colours if you wanted to, to really make the theme your own.

Win $25 Credit for Theme Forest

We are giving away 5 packs of $25 credit to be used on any Theme Forest template. First of all sign-up to Theme Forest using the banner below, and then enter the competition by doing the following:

How to Enter

Simple. Just post a comment about the theme, or about Theme Forest and let us know what you think of either the theme, or Theme Forest, or both. 5 random answers will be chosen to win the prizes, but all feedback will be useful for both us and Theme Forest staff.