hongkiat.com

Comment Design: Considerations, Best Practices and Examples

2009-12-10T10:57:11Z

Comment styling is an often-overlooked part of blog design. After all, they’re at the bottom of the page, not seen until visitors already have an impression of your site, and they’re really there for function more than anything else. Why invest a lot of time in styling them and making them really stand out?

But good comment styling can set your designs apart from your competition. Taking the time to design your comments, and your comment form, can make a huge impression on your regular visitors. It subconsciously implies you care about their opinion and want them to engage in discussion on your site. Below you’ll find some best practices and examples of creating a beautiful commenting system on your next blog design.

Styling Comment Views

How you style your comments can have a huge impact on the overall perception visitors have of your blog. It shows that you care enough about what your readers have to say to take the time to show off their remarks in a stylish and user-friendly way.

Threaded View or Flat View?

Whether to have threaded comments or simply order them chronologically is always a tough question. There are a few things to consider when trying to decide. First, if you want your visitors to actively discuss your posts with each other, then threaded comments go a long way toward promoting that, especially if you have a high volume of comments.

FreelanceSwitch uses a threaded comment format.

On the other hand, threaded comments are sometimes abused. Commenters might respond to the first comment on the thread with something completely unrelated, just to make their comment show up closer to the top of the comments (of course, you can always moderate these to prevent this, but it’s an extra layer of work for the admin). If you’re more interested in having commenters reply directly to the article and not to each other, then having flat comments makes more sense.

Both options come with their own pros and cons, so you really have to weigh the benefits and disadvantages of each one before making a decision.

Best Practices

Here are some tips for creating more effective comment designs.

Emphasize Author Comments
When designing your comments, you should do something to make the author or admin comments stand out from the others on the page. This might be by adding an icon to the comment or changing the background color. This type of styling makes it easier for commenters to see replies directly from the author, and can help to increase discussion.
Include a Gravatar
People like to see other people’s faces when they’re having a discussion. By enabling Gravatars, you automate this process and encourage discussion. Bonus points: Use a custom Gravatar image for those who don’t have their own, rather than the standard geometric images or monsters.
Separate Comments from Trackbacks
Trackbacks really aren’t part of the discussion (at least not the part taking place on your blog), and shouldn’t be included inline with other comments. Give trackbacks their own special area, either above (if you usually get more comments than trackbacks) or below all the other comments (if you generally get more trackbacks than comments).
Use Design Elements That Make Sense
When styling your comments, think of design elements that make sense in regards to the type of content. Speech bubbles, quotation marks, simple borders, and alternating background colors all enhance your comments and improve readability.
Paginate Your Comments
If you routinely get more than 20 or 30 comments on your blog, consider paginating those comments to improve your page load times. Paginated comments can also make it appear you have more comments than you do, as navigating to new pages almost always makes people feel like there’s more content.
Make It Possible to Link Directly to Individual Comments
Including an anchor link to each individual comment makes it easier for visitors to share their comment with others. If someone is having a particularly good discussion in the comments on your blog, they might want to invite others to join in, and having a direct link to their last comment, or the thread they’re commenting in, makes that easier.

Examples: Neat Comment Views

The Hickensian, Hicksdesign

Dezinerfolio

Designing Comment Forms

Your comment form has to be user-friendly and encourage visitors to get involved in the discussion happening on your blog. While good comment form design alone probably won’t get you tons of comments overnight, a poorly designed form can definitely prevent your readers from commenting.

Considerations and Best Practices

There are a lot of things to consider when designing your comment form, from whether to include extra spam precautions to how to handle replies. Below are some tips for making those decisions, as well as some others.

Positioning Your Comment Form
This is a very important consideration when designing your overall commenting system. Do you want your comment form to be directly under the post itself, or at the end of the comments? The best way to decide is to ask yourself whether you want commenters to actively discuss the post with each other or just focus their comments on the post itself. If it’s the first option, then place your comment form at the end of the comments. If it’s the latter, then place it directly below the post, above the comments.
Spam Prevention
Even if you use a spam-prevention utility like Akismet, adding a bit of spam protection directly to your form can further reduce the amount of spam you get. There are two common options: one is a captcha, which can be difficult for many users to decipher (though some captcha systems are markedly better than others); the other is a question-based system, often using a simple math equation commenters have to answer before their comment will be submitted.
Requiring an Account or Allowing Alternate Logins
If you get a particularly high volume of spam comments, or if you have issues with abusive comments, then requiring commenters to have an account can be beneficial. Other options include letting users log in with another account they have, such as Twitter, Facebook Connect, or OpenID. Requiring a login makes people feel more accountable for the comments they leave, which can mean fewer abusive or spam comments. Of course, requiring a login can also reduce the number of comments you get, as some people just won’t bother.
Handling Replies
If you’re going to enable your visitors to reply directly to other commenters, it’s important to decide whether you want an inline comment form that appears when a commenter hits reply, or if you want it to just take them to the comment form already on the page. Either one is fine, though the first option is sometimes less confusing (as you know that you’re definitely replying to a particular post, instead of commenting in general).
Positioning Form Fields
How you position and label the fields within your comment form can have a big impact on the usability of that form. Usability Post has a great article that covers this more in-depth.
Form Instructions
Make it easy for your commenters to see which fields on your comment form they’re required to fill out. Also make it clear to them that things like their email address won’t be made public.
Validation
Your comment form needs to indicate to your commenter that their comment has been successfully posted, even if you hold all or some comments for moderation. If you do moderate comments, make sure you indicate that the comment will appear once it has passed moderation, so your visitor doesn’t end up posting multiple comments, thinking the first one didn’t go through.
Provide a Preview
Letting your commenters preview their post before submitting is a nice usability feature that many blogs overlook. This can also mean your blog gets higher-quality comments, as commenters are more likely to read through and edit their comments before posting.

Examples: Comment Forms

Internet Zillionaire

Authentic Boredom

Doc4 Advertising Agency

Mac Appstorm

Productivedreams.com

Sources & Resources

Blog Comments Design Considerations – JankoAtWarpSpeed
30 Must See Comment Designs for Web Designers – Blog Design Blog
77 Inspiring Blog Comment Form Designs – 1st Web Designer
Design Analysis: Comments – Snook.ca
Interface Design Inspiration: 36 Clean Comment Form Designs – Dzine Blog
15 Nice WordPress Comment Form Designs – WPCrowd
Styling Your WordPress Comments – Darren Hoyt Dot Com
Top 10 Tutorials for Working with WordPress Comments – DesignM.ag
Separating Trackbacks from Comments – Pro Blog Design
Elements of Design – SmileyCat, specifically the Blog Comments and Blog Comment Forms sections

About Author – Cameron Chapman is a professional Web and graphic designer with over 7 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Freebie Release: 45 High Quality Fruits Stock Photos

2009-12-09T03:26:11Z

Today for the very first time in hongkiat.com, we are releasing stock photos. The collection is made up of 45 high quality fruit photos and they are all free to download with no strings attached.

You can use these photos in all sorts of individual or commercial project without any restriction. However, you may not be able to resell, hotlink, re-distribute or make profit out of these photos. Please link to this article if you find these photos useful and would like to help spread a word.

Behind the scene

We’d like to take this opportunity to thank Min Thu for the generosity to release these stock photos (for free) in hongkiat.com.

My intention was to shoot these photos and to use them on free templates specifically created for flashmo.com and templatemo.com websites. Then, I think it would be really great to share with other people who love those kinds of photos around the world.

The photos were shot using Canon Kiss X3 (also known as 500D) mounted Canon F/4L 70-200mm lens. Some of them are shot using a tripod (Velbon DV-6000). I put the fruits on the 5×2 feet white table located at a big open-air balcony of my home.

Hongkiat is a very great place for web designers and developers on the net and it occasionally features photography related posts and useful freebies. I think it would be great giving free stock photos that can be used for any purpose for Hongkiat readers – Min Thu.

Thank you very much Min Thu for the great intention, we really appreciate it!

Download Fruits Stock Photos

Left click to open up image in a new window for preview, or right-click, "Save link as" to download.

Giveaway: Free Icons, Photoshop Brushes and Vector Packs

2009-12-07T11:31:46Z

Good news for designers. Our friend Stefan from Artbox7.com is feeling extremely generous today and has decided to play a small Santa role on hongkiat.com this December.

Artbox7 is a site with lots of designers’ collectibles – icons, vectors and Photoshop brushes. Winners of today’s contest will be able to access Artbox7 and get the things needed for your design, absolutely free.

What you’ll win:

We’ll be choosing 11 (1 + 10) lucky readers and here’s what you could win:

(10x) Vector + Icons + Brush Packs
10 winners with each winner getting a vector pack, icon pack and photoshop brush pack of your choice.
(1x) Complete Designer Set
This is the ultimate of all. Winner walk away with all vector, brush and icon packs available in Artbox7. You are looking at more than 447 packs with 6000+ elements, all for free. Learn more.

How to win:

Either way counts, doing both adds more weight.

Re-tweet this:
RT @hongkiat Giveaway: Free Icons, Photoshop Brushes and Vector Packs http://bit.ly/5HCgOt #hkfreebies
Drop a comment.

We’ll randomly pick 11 winners. Contest starts today, Friday 11th December, 2009. Good luck!

40+ Excellent Adobe Illustrator Cartoon Tutorials

2009-12-06T17:47:44Z

Back when Mickey Mouse was drawn by Walt Disney in 1928, it was all pencil and paper, and the frequent use of the ever dependable eraser. More than 80 years has passed and yet we still see Mickey Mouse cartoons all around the world.

That 80+ years has also brought advances in computer technology and software which now allows us to move away from the pencil, paper and the ever dependable eraser, to advanced drawing applications and input (drawing) devices. In this edition/article, we’ll be featuring the best 40+ tutorials on drawing cartoons with Adobe Illustrator and we hope it would expand your creativity and imagination to be the next Walt Disney.

Here are some related post you might be interested:

Full list after jump.

Happy Sun Character
Learn how to create fun sun character tutorial in Illustrator. This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects!

Cute Baby Seal
Simple tutorial to teach you how to create a super cute baby seal. At the end of tutorial you will get really nice, cute cartoon seal character.

Cartoon Duck
This tutorial will take you through basic shapes, using basic tools ie pathfinder, knife and eyedropper tools to create a cute duck character.

Furry Vector Monster
Follow these steps in Adobe Illustrator to create your very own super cute fuzzy monster character. We’ll be working with the basic shapes to start, then use a variety of gradients to add depth. We can then finish it off with some detailed fur effects to really lift the design from the screen.

Stinking Zombie Flesh-Eater
In this tutorial, you will learn how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques.

Cute Hippo
This tutorial will show you how to create cute Hippo Character using simple shapes and a really simple effective drawing technique . This technique has been adopted from recent addition to the store of Animal Head Graphic Set , latest addition to the store.

Owl DiNG
In this tutorial we will walk through taking a pencil sketch into Illustrator and creating vector artwork. Then we’ll bounce over to Photoshop and add some details and give it a washed look.

LeBron James Cartoon Character
In this tutorial, you will learn how using Adobe Illustrator create vector cartoons. Learn how to create Lebron James Cartoon Character.

Leprechaun for St. Patrick’s Day
Create yourself a wee Leprechaun for St. Patricks Day 2009 with this Illustrator tutorial. Easy and interesting Illustrator tutorial.

Cartoon Character with Expressive Lines
This tutorial covers the necessary steps for creating a colored multicolor cartoon character that includes shadings.

Cute Emo Kid

In this tutorial we will go through the process of drawing cute cartoon character. The concept is based on the Emo trend, we will go trough all the steps from sketch to full color vector.

Cute Panda Bear Face Icon
How to create a cute panda bear face icon all from ellipses. The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

Gang of Vector Ninjas

Constructing a group of cool vector ninja characters using just the basic shapes and a variety of simple tools, making it a good start for Illustrator beginners.

Cute Bunny Vector Character
This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations.

Cartoon Snail
Lean how to draw snail in Adobe Illustrator with some easy steps. Learn how to with Illustrator basic tools create cute snail.

Killer Chainsaw Bunny Character
This tutorial shows you how to build a Bucket ‘o’ Thought character and add a dynamic background effect.

Cute Vector Monster
Follow this Adobe Illustrator walkthrough on the creation of a cute little vector monster character, beginning with a quick pencil sketch on paper.

Grumpy Dude
Create grumpy dude in Adobe Illustrator with the brush tool. In this tutorial you will learn some digital drawing tips and how to fix little mistakes after you’ve drawn your stroke.

Fat Cat Vector
This tutorial aims to guide you from sketchbook to screen; a “Fat Cat” doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised.

Freddy the Fish
Follow this tutorial to create your own vector character – Freddy the Fish.

Vector Pirate Cartoon Character
By firstly using the power of pen and paper a character design is created, which is then scanned into the computer to use as a base for tracing with Adobe Illustrator. The final outcome is a colourful cartoon character in vector format!

Twisted Monkey Studio Mascot
In this tutorial author will explain the process that he followed at the time of designing by order the mascot in vector format for Twisted Monkey Studios, producers of horror films.

Blob Monster – The Scream
It is really simple to create Blob Monster and doesn’t take long to complete. This technique can also be used for nearly any type of simple shape / monster.

How to Create a Web Site Mascot
In this tutorial, author will give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

Create Your Own Monster
In this Adobe Illustrator tutorial author will take you through the process of creating a completely unique, memorable monster that’s not at all humanoid in form.

Adding Dimension to Your Characters
In this tutorial author will show you how to add the illusion of dimension to your vector illustrations by combining the effects of Adobe Illustrator’s versatile linear and radial gradients.

Creating Bart Simpson Vector Character in Illustrator
This is a short beginner tutorial. You will use Layers, utilize the Pen Tool and its sister tools, such as the Convert Anchor Point Tool, Direct Selection Tool, etc, to draw and colorize a vector Bart Simpson in Adobe Illustrator.

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale
This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for Micro-Stock Sales. Author also included a bunch of time-saving tools and tips as well.

Creating Convincing Characters
In this tutorial, you’ll learn some basic skills for converting your character from a pencil doodle to a complete, fully-coloured image – learning some crucial Illustrator skills along the way.

Symmetrical Illustration: Thug Bunny!
This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork. We’ll also feature a plugin for AI that speeds up your build time and cover the topic of “Opacity Masks.”

Patch Illustration 2
The following tutorial will show how author go about creating a set of NBA licensed embroidery patches featuring portraits of many of the leagues greatest players.

Basic Shading and Lighting
This tutorial goes over the elementary fundamentals when it comes to shading and lighting within a digital illustration.

Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator
This tutorial will walk you through the steps from sketch to vector in creating an original cartoon-style character vector illustration.

Vector Tutorial: Anime Coloring
In this tutorial will be detailed explain how in Adobe Illustrator coloring sketches, in this tutorial author will use anime sketch.

Adobe Illustrator Cartoon Bug Tutorial
Here is one more cartoon characters tutorial in Illustrator. This time you will learn how to create nice fly cartoon.

Adobe Illustrator Cartoon Tutorial with a Wacom Tablet
In this Illustrator tutorial author will explain how using Wacom tablet you can at first draw cartoon sketch and than create vector cartoon.

Adding Gradients to Illustrations in Adobe Illustrator
In this tutorial you will learn how to use gradient tool in Illustrator. Author will explain how to add gradient to illustrations.

Monster Character Series Part 1
First of two Spoongraphics mini-series of tutorials on how to create a set of simple monster characters. This is very simple tutorial, so if you beginner of Illustrator, you can learn some basic tools.

Monster Character Series Part 2
Here is second Illustrator tutorial from Spoongraphics mini-series of monsters tutorials where you will take a look at the Dumb Blue Sucker Monster! Again, using mostly the basic tools and shapes making the tutorial suitable for beginners to Illustrator.

Create a Twitter Style Bird Mascot
Using some basic shapes, effects, and gradients author will show you how to create a Twitter mascot for your blog or website.

Maintaining Rhythm and Flow in Vector Character Design
In this tutorial you will break down the basic process of creating a character from sketching through to the final vector file. Whether you’re interested in creating vector mascots for branding design, or making interesting characters to use in your animations, you’ll find these techniques helpful.

Create a Traditional Japanese Koi Carp Illustration
Koi Carp have been painted and illustrated by the Japanese for centuries and are familiar to people all over the world. This tutorial will take the intermediate Adobe Illustrator user through the techniques and processes needed to imitate what the Japanese have perfected.

A Cow As Chinese New Year Zodiac For 2009
At the begining of 2009 – Cow year, Kailoon.com create special new year Illustrator tutorial, where you can learn how to draw 2009 year symbol – Cow. Very interesting tutorial and result is amazing – very cute Cow .

The Making of a Chocolate Bar Character.
In this tutorial Author take the concept from sketch through to vector final. You will learn how to create sweet cartoon character – Chocolate bar character.

Character Illustration
The following tutorial will walk you through a project, a character design for Fanta soda to use in their Halloween promotion.

Ilias Sounas’ Condomunity Member Illustration Tutorial
It’s basically a character design tutorial like many others out there – just that Author wanted it to be more like an illustration and possibly also an rss icon. Author picked 5 illustrators to hand in an artwork in their own typical style.

How to Create a Cute, 3D, Vector Robot
If you want to learn how to create a rounded robot character from sketch to finished vector art, then we have an awesome tutorial for you.

Winners for Billings Mac Applications Contest

2009-12-02T12:05:06Z

First of all, we’d like to thank all readers who had participated in the Billings Mac application contest. It’s an upsetting task considering the fact that we can only choose 3 winners out of more than 250 interested commentators.

Anyway, we have good news for participants who did not make it, or readers who came to know about the contest after it’s closed. If you are still interested in getting Billing application, you can now buy it at a discounted rate.

Billings Promo code for Hongkiat readers

By applying the promo code “hongkiat15“, you will get a 15% off the original price, courtesy of Ryan Cash from Billings. The promo code will expire on 21st December 2009. So there’s about 20 days to act.

Winners of Billings

Here are the winners for Billings. You’ll be getting your licensed copy of Billings real soon.

thenine (#7)
yesterdayhero (#149)
Thomas Bishop (#226)

Once again, congratulations and stay tuned for more contests on hongkiat.com

40 Beautiful and Colorful Blog Designs

2009-12-01T14:08:54Z

Bright colors can scare off a lot of web designers, especially when you use a few of them together. It takes more care and precision to create a design that uses eye-popping color well, without being overwhelming or looking amateurish. And if you’re combining contrasting colors, extra care needs to be taken to prevent your design from being jarring.

The blog designs featured below make excellent use of bright colors. Most use multiple colors together, though a few take a more monocromatic approach. Some are set against dark backgrounds; others are set against white. And in case you don’t want to jump into an original design like these, there are a number of blog templates at the end that use similar bright color schemes.

Here are more examples of beautiful blog design we’ve previosly showcased:

Full list after jump.

Original Blog Designs

The sites below are original, one-of-a-kind designs, perfect to lend some inspiration to your own designs.

WebDesigner Wall
WebDesignerWall’s site uses a wide range of colors and a hand-drawn design. It’s artistic and fun, a perfect look for the site’s content.

Web Design Hobart
Web Design Hobart uses a bright watercolor design for its background with lime green accents, while the rest of the site’s design elements are a bit more subdued.

Brija.com
Bruja uses a more limited pallette, though the bright red and yellow are still very eye-catching.

Design Disease
Design Disease’s site uses a cyan blue and lime green, with additional shades of each color used throughout the rest of the site, and a few other bright accents.

Cult-foo
Using bright colors against a muted background color (like gray) makes the colors pop even more, as shown by Cult-foo’s website.

Danilo Fiocco
The bright colors and cartoon character lend a very informal feel to Danilo Fiocco’s site.

Eric Dies
The lime green really stands out against the gray background on Eric Dies’s site.

Designministeriet
Cyan and lime green with hot pink accents makes Designministeriet’s site feel very modern and young.

Dezine Zync
A bright background stands out more when mixed with transparent elements, as shown on Dezine Zync’s website.

Dreamling.ca
Mixing slightly muted bright colors with a white background gives Dreamling.ca’s a very feminine look.

Depthinfinity
Depthinfinity’s site combines a bright, multi-colored background with lime green and other bright accents to create a very fun and artistic site.

Ezobase
Ezobase uses a CMYK (Cyan-Magenta-Yellow-Black) color scheme, which looks very fresh on a website.

Joshua Giblette
Shades of a single color when set against a neutral background can have a huge visual impact, as displayed on Joshua Giblette’s website.

Nimbupani Designs
Mixing multiple bright colors can be tricky, but is executed well on the Nimbupani Designs site.

Krftd
A bright, graffiti-esque background is mixed with cyan accents within the text to really make Krftd’s site pop.

Super Girl
Super Girl is another great example of bright colors used with a white background to create a feminine look.

TruSpeaks
Combining a header with bright colors with a bright but monochromatic background makes the content on the TruSpeaks site stand out and creates a very modern and hip feeling.

Almost-Famous.TV
Combining a single bright color with a white background makes Almost-Famous.TV’s site look very pulled together while allowing the layout to look like it’s trying to break free from its grid-based design.

Entropia Blog
Mixing very bright colors both in the text and background image makes the Entropia Blog look fun and fresh.

Brian Jeremy Kupetz
A graffiti-esque painted background mixed with accents that take their color cues from the background itself make for a very pulled-together yet lively look.

Ilovecolors
Ilovecolors mixes bright colors with grunge-influenced elements to create a very unique design.

Moradito
The bright, pixelated background of Moradito really stands out when it’s combined with transparency and a few colored accents.

Hello My Name is Heather
A lime green background and brightly-colored header combined with bright accents and images within posts makes for a very cheerful design on the Hello My Name is Heather site.

Duirwaigh Studios – Message from the Muse
Duirwaigh Studio’s Message from the Muse blog mixes bright colors with a vintage-inspired design to create a background that really pops.

Veerle’s Blog
The steel-gray background of Veerle’s Blog mixed with bright orange accents and a bright header looks very original.

Inspiredology
A rainbow-colored header image combined with cyan and magenta accents makes the Inspiredology site look welcoming and original.

Celebrific
Celebrific’s bright pink and light blue color scheme really pops and makes the site’s content really stand out.

Colorful Blog Themes

If you’re unsure of designing a bright theme from scratch, turn to one of the pre-made themes below.

WP Coda
The WP Coda theme’s purple design mixed with brighter accents lends a very fresh but still professional look.

Acosmin Grungy
The Acosmin Grungy theme combines bright colors with grunge elements to give an edgy feeling.

Infinity
The Infinity theme makes great use of transparency mixed with bright colors and cartoonish illustrations.

Colourise
The Colourise theme’s dark background makes the bright colors stand out even more and lends a very masculine feel.

Notepad Chaos
Notepad Chaos’s theme combines a bright background with a limited color pallette to give a fresh and informal look.

Tribal Music Theme
The graffiti-inspired look of the Tribal Music Theme makes it feel very young and hip.

Lightsource
The Lightsource theme is available in multiple monochromatic color schemes, all of which lend a fresh feeling to any blog.

Ambience
Ambience is a great theme that mixes bright colors with transparency.

Digital Farm
The Digital Farm theme mixes a very bright, illustrated header with an otherwise muted color scheme, and is a very young and fun theme.

Color3
Color3 mixes a brightly-colored background with bright green accents and very subtle transparency.

Colors
Colors is another great theme that mixes a very bright, neon-colored background, a bright header, and bright accents.

Anatomyinc
The Anatomyinc theme is an artistic-looking theme with transparency and a bright background.

Liquid Magazine
The Liquid Magazine theme’s half-tone inspired background is bright without taking focus away from the content.

Retro and Vintage Web Design – Best of

2009-11-26T18:50:36Z

Vintage-inspired designs, when done well, can end up looking even more current and relevant than an entirely new and modern design. Whether it’s only taking inspiration for your typography, color scheme, or other elements, or whether you create a design that would feel entirely at home in the 1950s, 1920s, or any point before, using vintage and retro styles can be fun and challenging.

Below are forty designs inspired by retro, vintage, and antique elements. They range from campy to completely professional, and everything in between. Use them as inspiration for creating your own vintage designs.

Here are more retro and vintage related articles we’ve previously published:

Full list after jump.

Antique and Pre-20th Century Inspired Designs

The most common eras antique-inspired websites take design cues from seem to be the Victorian era and classical Rome and Greece. The best designs tend to be formal-looking, and evoke a sense of propriety without looking stuffy. In some cases, they imitate broadsheet newspapers or other items from the times they’re inspired by.

The Statement

Xocolatl

Theocacao

The Dollar Dreadful Family Library

The Astonishing Adventures of Lord Likely

Sensi Soft

Internet Zillionaire

Early 20th Century Inspired Designs

The early 20th century (through WWII) has inspired numerous designs. Some are influenced by the Film Noir and detective movies of the 30s and early 40s. Others pull from Depression-era pop culture (including children’s toys and games). And others take their cues from WWII-era military and civilian artwork and posters.

Webdesigner.ro

The Ernest Hemingway Collection

Team Fortress 2 – The Sniper vs. Spy Update

Radio – The New York Moon

mediaBOOM

Mister-Aero

Media Ambassador

MacTarnahan’s Brewing Company

Fred Perry – 100 Years

Five Cent Stand

Field Notes

Target Scope

Blind Renaissance, Inc.

Amelia Earhart Book

DeVotchKa

Post-WWII and Later Designs

Designs inspired by the mid-20th century (post WWII up through the 60s) pull mostly from the popular culture of the era. Fonts inspired by the era are particularly popular, along with vintage color schemes. Fashion also seems to be a big influencer, as are vintage radios, cars, and televisions.

Tricycle Terror

Thigpen Designs

Singularityconcepts.com

Style 4 you

Small Stone Recordings

Rocket Club

Prahba

Jeff Sarmiento

Lataka

Kretivia

Klassiker in Acryl

Level 2 Design

Capitol Media

Edgewater

Custom Design

Carrozzeria Verga

Blue Moon Dueling Piano Bar & Restaurant

Tomatic

30+ Realistic Gadget Design Photoshop Tutorials

2009-12-08T12:55:04Z

There’s an ancient Chinese proverb that says "工欲善其事，必先利其器"; the direct English translation means "In order to do a good job, once must have a good tool." When it comes to the design industry, the tool is Photoshop.

Photoshop is truly a designer’s best friend. It is used to design almost anything, be it icons, websites, photo enhancements, etc and the list goes on. In fact, in one of our earlier post "Stunning Apple Concept Design", most of the gadgets were created with Photoshop too. It’s never a tough job learning how to create a gadget when you know the basics and the next thing you probably need is – good tutorials in conversational tone.

Here’s a list of 31 wonderful Photoshop Tutorials that gives you step by step tutorial how gadgets are created. Full list after jump

Realistic Gadget Design with Photoshop

Black iMac
This tutorial will help you create a realistic black iMac in Photoshop. The image is recreated in Photoshop using a front look iMac picture found via Google Images. It is a step-by-step tutorial to help you easily create an iMac of your own, in PhotoShop that is.

Apple Remote
Apple has always throbbed our hearts with their exceptionally innovative and beautifully designed products. Apple remote is no different. Here is a tutorial to teach how to design a Apple remote in Photoshop with a realistic view and shiny looks. The tutorial also shows you how to change colors of such objects in photoshop easily.

Sony Playstation 3
A gadget like Playstation is great to play with and it can add a lot more fun if we could turn it into a Photoshop image. And it’s not a tough task when you have a very well written tutorial infront of you.

Nokia 5300
Using just multiple vector shapes, layer styles and some other tools, you can easily create mobile phone mockup in PhotoShop. The tutorial here shows you how to create a look-alike of Nokia 5300 Mobile phone.

PlayStation Portable
Designing a portable gaming console couldn’t get easier that this. Here is a revamped tutorial for creating beautiful PSP in PhotoShop. No-doubt it is going to take some time to finish this up, but in the end you will have refreshed your photoshop skills and have a cool-looking PlayStaion Portable to add to your PhotoShop creations.

Nintendo Gameboy
If making a PSP in photoShop doesn’t get you excited, how about a Nintendo Game Boy? The tutorial will help you create a truly realistic Game Boy in PhotoShop and it involves using just basic tools that PhotoShop users use everyday.

USB Stick
This tutorial explains USB stick image formation in Photoshop. It is a pretty basic tutorial and you can even have the PSD if you want.

Mouse
Simple things are always fun to create in PhotoShop. This is a tutorial for creating a realistic computer mouse in PhotoShop. You will alos be able to get a free PSD from the author’s blog.

XBox 360
Microsoft’s XBox 360 is a very eye-catchy gadget. The looks are stunning and what’s more interesting is that you can create it in PhotoShop too. Here is a step-by-step tutorial for creating a Xbox 360 look-alike in PhotoShop. There are simple techniques involved in this tutorial, like gradient tool and pen tool which, most likely, every Photoshop user should be used-to.

Nintendo DS Lite
This tutorial is not for newbies. Although it is easy to follow, but the author doesn’t explain the minute details. However if you are an intermediate level PhotoShop user, you can easy follow along and make you own DS Lite in PhotoShop with this tutorial.

Digital MP3 Player
Creating an image of an mp3 player in 3D view is certainly an interesting thing to do in Photoshop. But that won’t be easy if you just hang around without knowing the techniques. Here is a tutorial which guides you throughout the procedure of recreating the image in 3D view.

Custom MP3 Player
This tutorial shows you how to create a custom MP3 player in Photoshop complete with buttons and the display. It can be done at ease when you know what steps to follow and this tutorial will provide you the steps in a very detailed manner. You can also work on shade, the button dimensions and the button patterns.

LCD Monitor
Creating shiny gadgets in Photoshop is fun. Creating a Monitor is no different. The easy steps in this tutorial will guide you through the procedure to accomplish it.

Microsoft Zune 2
This is a tutorial which teaches you how to create a Microsoft Zune media player in Photoshop from scratch.

Loox Pocket PC
Here is a tutorial to create a Loox Pocket PC in photoshop and boost your PhotoShop creativity.

Detailed Audio Player
Yet another Photoshop tutorial about creating an audio player with minute details. This tutorial will be a great opportunity for all designers to practice the Shape Tools and Layer Styles skills. It involves a los of adding and subtracting of Shapes.

Sony Ericsson S500
In this tutorial you will learn how to make a glossy, shiny and a very beautiful mobile phone in PhotoShop. The author has provided a PSD file too, incase you need take it as a reference to create your own design.

HTC Touch Diamond
In this tutorial, Constantin Potorac shows how he created an amazing look-alike of HTC Touch Diamond phone.

Apple iPhone
Apple iPhone is a great innovative and heart throbbing gadget. The sleekness along the curves, the ‘Home’ button and and other minutes details are not that easy to design in Photoshop. But, this tutorial shows you how to create a realistic iPhone easily. You just have to follow the clear instructions on this tutorial carefully and with-in no time you will be an expert in creating an iPhone in PhotoShop.

Sony Ericsson W800
This tutorial shows you to create a Walkman phone in PhotoShop. The designing of Sony Ericsson W800 will require some skills with the brush and pen tool though.

Strawberry Mobile Phone
Now here is an interesting tutorial to look at. This tutorial will guide you to create a Straberry phone in Photoshop. You just need images of strawberry and your mobile phone as reference images.

iPod Nano Video
Refresh your layer structure and pen tool skills by recreating an iPod Nano Video in PhotoShop.This tutorial will also give you a glimpse of how to recreate objects in PhotoShop from an original image.

Apple MacBook
Apple’s sleek gadgets are fun to create in photoshop because they look beautiful on the screen as well as in the real life. Here is a step-by-step guide for creating a MacBook from scratch in Photoshop.

Wii Controller The Wii controller in the image below is a true creation of Photoshop. Learn to create a simillar one in Photoshop by following this simple tutorial.

Woofer
Here is a tutorial to create a woofer in Photoshop with a wooden texture background. This tutorial also shows how to put on screws on the woofer to make it look more realistic.

Portable Media Player
Fancy creating a portable media player in Photoshop? Now you can. Create your video mp3 player in Photoshop by following some simple steps detailed in this tutorial. The reference image used in the tutorial is of RCA Lyra X3030 portable media player.

Retro Atari Game Catridge
If you have ever owned an Atari gaming console, you will definitely love to create this mockup in Photoshop. This tutorial is about making a super retro game cartridge. Theme of the tutorial is to teach you to create a very easy, but really cool, 3D and geometric effect in Photoshop.

Blackberry Mobile Phone
Obsessed with Blackberries? You will love to create one in PhotoShop too. You will learn how to create a blackberry mobile phone look-alike in Photoshop by followwing the instructions in this tutorial. Author has explained in a detailed manner how to use Vector Shapes, Masks, and mostly Layer Effects to create this elegant design.

iPod Classic
A very simple yet inspiring tutorial of creating an Apple iPod Classic in PhotoShop from scratch.

iPod Shuffle
iPod Shuffle is one of the simplest gadgets to design in photoshop. If you are just starting to design tech related stuff in Photoshop, you should start with the iPod shuffle. Read the tutorial, and create one of your own.

Nokia 5800 XpressMusic
While Apple fanboys may enjoy designing the iPhone, there are Nokia fanboys out there too who will love to design Nokia 5800 XpressMusic. This tutorial is a 12 step precedure for attaining something like the below image.

Giveaway: (3x) Billings – Professional Billing Application

2009-11-28T08:38:54Z

Today’s giveway is an utmost useful application for both freelancers (programmers, designers, photographers, etc) and small business owners. The name is Billings and we figured it’s pretty self-explanatory already.

Billing is a Mac application that allows you to deal with your clients smartly – track timing and expenses, issue an invoice or statements, keep an eye and easily identify which client has an overdue balance, generate report and much more. Billing also provides you with variety of beautiful invoice template so you’ll look more professional when you send an invoice or statement over.

There’s so much more, but we figured these following will give you a better idea of Billing:

You can buy Billing at the price of $39.99 per copy, but today we are giving away 3 copies to Hongkiat readers, absolutely free. Here’s how to win yourself a copy.

How to Win

Drop a comment below if you are interested in Billings. Remember to include a valid e-maill address as we notify winners via e-mail. We’ll randomly choose 3 winners. Contest starts today, ends Friday 27th November, 2009. Good luck!

Update: Thank you for the participation, the contest will now close and we’ll announce the winners on Monday.

Freebie: Fluzzy Twitter Icon Set

2009-12-08T13:02:10Z

Meet Fluzzy, yet another high quality free Twitter icon set released exclusively for Hongkiat readers from our friend at Iconshock. You might also want to check out Blitter Twitter Icon set we previously released no long ago.

Fluzzy is free, comes in a set of 6 different icons in two separate sizes – 256×256px and 512×512px. All graphics are in tranparent .PNG 24-bit. We’ve also included the .AI source. For designers who wish to get the most of the icons, you are welcome to do so.

This icon set is free for personal or commercial projects, however you are not allow to re-sell, re-distribute or generate profit out from it.

Download Fluzzy

Download Fluzzy (256×256, 512×512), PNG format
Download Fluzzy source Ilustrator .AI format
Download Fluzzy full set (Icons + source)

Editor’s Note
Are you a designer looking to release your work (Wordpress theme, icon-sets, wallpapers, stock photos, etc)? We can give a hand, both financially and have it featured in Hongkiat.com, drop us a word!

Masters of Paper Art and Paper Sculptures

2009-11-21T12:42:06Z

To most people, making a paper plane could be one of the simplest thing to do. It’s the simplest and easiest form of paper art, for this case a flying art. However, there’s a special minority who takes thing to the next level. They can turn the basic form of origami – which is folding a paper in half – together with a little cutting, folding, bending, shaping, and more paper folding, into an utmost creative artwork you have ever seen.

Credit: Sculpture by Simon Schubert

In this post, we will attempt to show how these minority, creative minded folks turn a very thin slice of wood – paper – into wonders, and bringing paper art to the next level. Without further ado, here’s an impressive showcase of paper art and paper sculptures by some the best paper artistes in the world. Full list after the jump.

Jen Stark

Jen Stark is a contemporary artist whose majority of work involves creating paper sculptures. She also works with drawing and animation. Her work draws inspiration from microscopic patterns in nature, wormholes, and sliced anatomy.

Over and out

Reciprocal

Enchant

Coriolis Effect

Simon Schubert

Cologne, Germany based artis, Simon Schuberts works imagine architectonical settings, common situations and objects, whereas the material he uses are either simple or sophisticated – white paper folded or mixed media arrangements.

Emma Van Leest

Daniel Grein

A trained designer for digital and print media from University of Applied Sciences Schwäbisch Gmünd Germany.

Elodole

Helen Musselwhite

Helen Musselwhite creates highly individual and visually appealing framed paper sculptures.Each piece combines intricate hand cut layers of coloured paper and strong graphic images arranged to make interesting and intriguing scenes in box frames.

Carlos N. Monila

Olafur Eliasson

Jolis Paons

Paper dress sculpture made from pages of telephone book.

Aoyama Hina

"I don’t follow traditional but I am trying to create a mixture of the traditional and modern styles and to produce my own world through this super fine lacy-paper-cuttings technique" Aoyama

Sher Christopher

Sher graduated with a very distinctive sculptural style, working with clay moulds and paper, from the University of Wolverhampton with a BA (Hons) in Three Dimensional Design and a successful end of year show at Covent Garden in 1992.

Yulia Brodskaya

Yulia Brodskaya was born in Russia (Moscow); prior to moving to the UK in 2004 she was interested in diverse creative practices ranging from Textile Painting, Origami and Collage to more traditional Fine Art practices.

Peter Callesen

Born in the year of 1967, Danish artist Peter Callesen takes the most commonly consumed media – A4 papers and turn them into wonders.

Little Erected Ruin

On The Other Side

Looking back

The Short Distance Between Time and Shadow

Ingrid Siliakus

Inspired by master of origami paper artwork Prof. Masahiro Chatani, Ingrid studied his work for years and is now a master of her own.

Jennifer Khoshbin

Khoshbin was exposed to art at an early age. Both her grandfather and uncle are master carpenters; her mother is a ceramic artist; her brother is a film maker and curator; and her sister is a new media artist. It seems meant to be. (via jen11show)

David Brownings

An illustrator from Bristol UK; currently majoring illustration in UWE.

Su Blackwell

Independent Arts and Crafts professional from London, United Kingdom.

Chatsworth, Derbyshure ‘A Guide to’

The Story of Peter Pan: The Pirate Ship

Alice: Through the Looking Glass

The Old House

Bert Simons

One of Bert’s most impressive portfolio would have to be his 3 dimensional pseudo realistic paper portraits and sculptures. They are so realistic that some might find it eerie.

Harry Hamelink (2007)

Mr. Ivo Opstelten

Bert Simons himself

A couple more..

The Lifespan of Paper-Marriage
via ppt-ping

White Shadows
via hellofromthemoon

Serial Cut
Madrid based studio, established in 1999 by Sergio del Puerto.

Origami Koi
via Richi89

50 Beautiful and Professionally Looking Joomla Templates

2009-11-21T17:10:59Z

Joomla is an award winning open source content management system (CMS) that allows you to build websites of different varieties like blogs, personal portfolio site, photo galleries, e-commerce sites, etc. Joomla is easy to customize and thanks to the Joomla community, there are plenty of beautiful templates to choose from so you can have a great looking Joomla powered website and online application.

This following post is dedicated to Joomla users and those who wish to start with Joomla. Here are some beautiful and professionally looking Joomla templates you should know.

Free Joomla Templates

City sky | Demo | Download
The template features 2 parameters that serve to change the background on the one hand and to insert one’s twitter URL on the other, the latter then being highlighted to direct the attention of your readers to your twitter account.

Guild Wars | Demo | Download
Perfect for your online games website, it is perfect for clan forum.

Disco Beat | Demo | Download
Help you distribute your site contents between 4 layout columns – a 2-column central area and two neighboring sidebars (left & right). The main area will be your main site contents holder, while the sidebars will allow you to set apart supporting classified information.

PJ Enchanted | Demo | Download
Available in both native Joomla 1.5 as well as Joomla 1.0.x versions.

Top Gear | Demo | Download
Organized in 4 columns, including a 2-column main area, surrounded by a left and a right sidebar. The top-speed JavaScript based main menu bar will allow for a real quick navigation to the internal pages of your car racing website.

JS Lunar Eclipse | Demo | Download
Easy navigation and plenty of space to make modular websites expand.

Forex Trading | Demo | Download
Dedicated to the foreign exchange market affairs and is targeted at banks or other official institutions operating that trade markets globally.

Violin1 | Demo | Download

JS Optimus | Demo | Download
Clean template that let’s your all important content speak for your site, and not get buried under a distracting template. Built to be SEO optimized and take subtle advantage of Joomla 1.5’s template override features.

Bikini Beach | Demo | Download
This template can be successfully used for various leisure time related websites – from professional travel agency portals promoting their hot offers online, through e-stores offering sunbathing accessories, to personal sites representing trip diaries.

World of Warcraft Flash Joomla Template | Demo | Download
One more perfect Joomla template for game website.

Contaminated | Demo | Download
Black based toxic green for the alternative people out there with breadcrumb supported.

Sabana Plazza | Demo | Download
Lightweight and fast loading (its filesize only about 50 Kb).

Diablo III FLASH | Demo | Download
This is the FLASH version of Diablo III templates for Joomla. This is a standard Joomla template. However, it includes a flash header with great effects.

The DailyPraise | Demo | Download
Makes creating news and magazine site easy.

Digital Systems | Demo | Download
Comes with many standard features and is very easy to integrate with any Joomla installation. It comes with a custom right menu and all module positions are fully collapsible.

Default | Demo | Download

Professional Joomla Templates

Delicious | Demo
Features a 3 column layout, plenty of module positions, a menu with built-in support for VirtueMart 1.1 and a native or blog styled date tag for articles.

Dark Rational | Demo
This template has enough features to satisfy your need for gadgets, but still lightweight enough to be fast and super good looking as well.

Espresso | Demo
Espresso comes packed with themes for some of the top components for Joomla!, including: My Blog, Jomsocial, JomComment, Kunena, Seyret, and exclusive Joomla! content overides.

JA Tube | Demo

Showcase Plazza | Demo
For those of you who want to make your own CSS gallery website.

Blog You | Demo
Gives you complete control over the template styles in our custom TI template manager, from preset styles to your own custom styles, template control has never been easier.

Bliss | Demo

Snappa | Demo
A little grunge and dirty look.

NewsPro Darkness | Demo
Perfect for online newsportals, magazines, blogs, fashion and entertainment sites.

You Tutorials | Demo
Advanced Joomla frontpage styling that takes off the standard Joomla template look and gives your more flexibility and uniqueness.

Sea of Glass | Demo

JA Quartz | Demo

SuperBlog | Demo
Incorporates two very powerful extensions, K2 and the Superblogger Plugin (both from JoomlaWorks).

Creative | Demo
Introduces new styling and layout concepts in the Joomla template world. Menus with shadows, blog date tags with multiple designs and collapsible module positions give this template maximum flexibility. You can enable the blog styled dates to make it work as a blog, the VirtueMart enabled menus to make it an e-commerce website, or keep it simple and use it as a presentation page.

Mediaplate | Demo

PopPraise | Demo
One big trendy guilty pleasure that comes with drop-shadows, gradients, rounded corners, sex appeal, and even a pink color theme option.

eShop Dark | Demo

JA Cooper | Demo

Meridian | Demo

Microblog Plazza | Demo
Microblog Plazza is completed with a TPStatus component, where a user in your website will have his/her own microblogging page in which he/she can write a status update and then receive comments from other users. It’s like a great mix of twitter and facebook.

Zappa | Demo
Make your website gleam with a fun and bright Web 2.0 style template.

JA Opal | Demo

Refraction | Demo
Refraction is a template to inspire and amaze. Utilising transparent overlays over professional and artistic background images produces staggering results, all matched with the perfect colour combination. Its easy to radically change the design with just an image and colour.

EcoLife | Demo
This ground breaking new template has been handcrafted to be Eco-Friendly, feature filled & graphically stunning. This template comes bundled with many extra features & extra stylings for some of the most popular Joomla! components.

Grunge!sta v2 | Demo
Created in antique elegance manner with a touch of Gothic style for those who want to stand out.

Viyo | Demo

Dub | Demo
Packed with Moo + Jquery effects and Modules, Dub offers some of the most advanced effects and scripts on the web. Dub offers multiple themes and 2 layout styles with a host of graphic elements and font colors.

Affinity | Demo
Released from RocketTheme and features extensive third party support for powerful and popular community products, such as JomSocial, K2 and phpBB3. The template’s core feature is Sortable Elements, which allows for the movement of modular rows, individual positions and stacks of modules.

Yougames | Demo

Scene | Demo

ElveSocial | Demo

Infuse | Demo
Infuse is an infusion of artistic flair and functionality. The theme boasts six, individual and unique, style variations, meticulously constructed to perfection. The theme is accompanied by 6 Style Variations, each with 3 different background options, culminating in a total of 18 possible combinations.

Crystal | Demo
Crystal offers lots of different color variations for menu items, allowing you to style every page in a different color.

About author:Dainis is blogger from Latvia. He is webmaster of Psdeluxe.com (Photoshop deluxe) – Design community where you find photoshop tutorials and useful resources for web and graphic designers. Follow Dainis on Twitter

80+ Creative Geek T-Shirts You Can Buy Online

2009-11-21T17:12:47Z

We love tees because they have so many rooms for creativity in terms of design. As designers who always strive to maintain originality and uniqueness, we are sucker for creative stuff, that includes what we put on.

When was the last time we you walked down the street and people start checking out your attire? It doesn’t have to be something branded, a creative and catchy t-shirt will do, really. Here’s a collection of creative t-shirts you can buy and add to your wardrobe this holiday season. Full list after jump.

Interactive Tees

Wi-Fi Detector Shirt

You can display the current wi-fi signal strength to yourself and everyone around you with this stylish Wi-Fi Detector Shirt. The glowing bars on the front of the shirt dynamically change as the surrounding wi-fi signal strength fluctuates.

T-Qualizer

A fully functioning graphic equalizer in a handy t-shirt format. Party like it’s 2999 with the glowing display on the T-Qualizer that dynamically changes with any ambient sound or music.

8-Bit Dynamic Life Shirt

During your normal activities two and a half pixelated hearts will light up on your shirt. But get within hugging distance of your significant other wearing the matching shirt and suddenly the hearts on both of your shirts start to light up until you’re fully powered up.

Electronic Drum Kit

Hit the drums on this shirt with your finger and they play through the built in speaker simple but amazing. With 7 different drum sounds you’re ready for a personal drum solo on your chest.

T-Sketch Light Up Flashing T-Shirt

Whatever you draw or write on the special section of the shirt will be converted into an illuminated message or design.

Transformers Light Up Flashing T-Shirt

Whoever you go with, you will love these t-shirts, they actually light up! The bright logo is sure to attract the right sort of attention and will look stunning at the cinema, at parties, or out clubbing.

Animated Retro Table Tennis Shirt

Amazing animated glowing old skool gaming on your chest. The two automated computer players are very talented and never seem to miss a shot.

Geek Tees

There’s no place like 127.0.0.1

Sometimes you just have to get away. Just close your eyes, click your heels, don this fine t-shirt and all your troubles will flow by the wayside just like those luser files piped into /dev/null.

Turn Me On T-Shirt

The "On button" on monitors from nerdy girl.

Error 405 T-Shirt

HTTP Error 405 – Method not allowed.

Invisible T-Shirt

This is what would happen if you use the Photoshop eraser tool on yourself!

Apple Timeline

It’s easy to forget that Apple is 30 years old. Lets take a minute to remember the 20th Anniversary Mac.

Binary Tree

A binary "tree" which displays a tree data structure.

No One Cares Blog

Tell it like it is: No one cares about your blog. No one reads your blog. Enough about your blog already. Your blog is not special or interesting. Your blog is boring.

HD DVD 4by4 T Shirt

09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0. Wear it with pride and look stylish-geeky too.

Bathroom Blogger Funny T-Shirt

Confess it! You’re a toilet clogger and a bathroom blogger. It’s so wrong but it feels so right!

G33K HOODED PULLOVER

PHP code made for geeks.

Geek inside

Geeks rule.Support geeks with this awesome shirt.

Internet People

The Internet – where awful people meet.

They Use Photoshop

They may or may not perform medical experiments on eccentric rednecks, but they are here, they are among us, and they use Photoshop.

In Your Base

Pinkos capture your territory. Aren’t they supposed to be all about sharing?

Gaming Lifestyle

Drool marks and blood-shot eyes along with slowly decomposing junk food are hallmarks of a late night gaming session too good to stop, until you pass out that is.

DaVinci Hax

If recently uncovered sketches prove to be authentic, that nefarious DaVinci guy may have been the unwitting inventor of our future doom!

RRoD

If you’re not careful, your 360 may jettison you out an air-lock.

My first time

My first time. It’s all there on a spacious 1.2MB floppy disk.

Social Media Venn Diagram

A Venn diagram showing the psychological forces at work among users of social networking tools

1 Random Thing

1 random thing, because 25 random things is 25 too many.

Extra Lives

Don’t worry, I have extra lives.

Can’t sleep, ghosts will eat

For anyone that grew up in the 80s or anyone that has ever played Pacman. For the retro gamer in all of us.

Super Geek

It’s Super Geek. Give this gift to the special geek in your life.

Having an iPhone has completely changed the way I poop

Alt of Ctrl

Alt of Ctrl shirt shows your wild side in computer keys.

Your skill in Reading

This one is for all the MMORPG freaks out there. Now you can share that rewarding experience with those around you as they read your shirt!

Cancel or Allow

Without mentioning any names, we know that some of you are a little frustrated with the newest version of a certain operating system.

Explosives Man

Haven’t you had enough of those pesky machine gun-building, health-healing, quick-running, disguise-wearing, rocket-launching, flame-throwing hooligans? Exact revenge with your own style of renegade justice: KA-BOOOM!

Insomniac Innovation

Insomniac Innovations, is the perfect tee for anyone who likes to stay up during the weee hours of night all the way into the early morning.

Refill Required

Every laptop battery monitor will let the user know when it is getting low. Your coffee could use a similar system so your coffee cup never ends up empty just when you need it most.

Modern Pirates

Show your support for the piracy scene with this Modern Pirate t-shirt.

The Last Supper Pacman Videogame Shirt

It wasn’ t until PacMan ordered a giant white ball that Mr. Ghost knew something had gone awry. Disastrously awry.

I Don’t Wanna Grow Up

If peter pan had the option, he’d wear this shirt every day.

Twitter Tees

That’s what she Twittered

Display a tweet of what she twittered right on a shirt.

No-One Reads Your Stupid Tweets

The truth hurts, but people need to know it. Even if you’re being (slightly) immature about it.

Drop Tweets Not Bombs

Friends Don’t Let Friends Tweet and Drive

It’s totally safe to tweet and text message while driving.

History never reTweets Shirt

A funny play on lyrics from an old song mashed for twitter lovers.

I’m Not a Blogger I Just Tweet A Lot.

I’ll Suck Your Tweet

Fail Whaling

When Twitter experiences an outage, users see the “fail whale” error message image.

I T Therefore I Am

The philosophy of twitter users.

In space, no one can hear you tweet

Don’t tweet in space.

Typographic Tees

IM In UR Blank

Reclaim the phrase for the humans by captioning yourself. This shirt is full of write-on, wash-off goodness.

Alphabet Hi T-shirt

Hi! is highlighted to attract attention.

Spell Dyslexia T-Shirt

This funny dyslexia shirt is perfect for that friend our family member always claiming to have dyslexia.

Fluorine Uranium Carbon Potassium

Thanks to phosphorous, “P” was taken, leaving “K” for potassium (obviously)…

PHP (pretty hot programmer)

So many memories so little RAM

Sex Drugs Helvetica Bold

Sex drugs helvetica bold, white print on black.

Will Kern for Food

Will kern for food, white print on black.

Tetris Taught Me the Fundamentals of Architecture

Funny Novelty Tees

Durtbag Punchline Shirts

A funny novelty tee where a priest, a rabbi, and a horse walk into a bar.

Durtbagz Zombie Shirts

Give this for super funny holiday gifts to prevent others from accidents. Hitting them just makes them want to eat your brains.

You Can Count On Me

I’m old school reliable, baby. Like an abacus, you can count on me.

Oktoberfest Serving Wench T-shirt

Stop Following Me! (Evolution)

Wear the Evolution 2 design with the caption “Stop Following me!”

Be Rational! Get Real!

Pi and i argument. What would happen if Pi and i got into an argument.

Can’t Touch This Equation

Finally, all that math you learned in high school is getting put to use.

Find X

Perfect t-shirt for anyone getting ready to step into a math test. You can never be wrong with this funny find x tee shirt!

Invisibility Shirt

Your invisibility t-shirt will come as invisibility shirt currently deactivated. Remember turn it on at your own risk!

Tuxedo T-Shirt

This funny tuxedo t-shirt is great for parties, weddings, or other special events. Dress up by dressing down.

Muscle Man T-Shirt with Real Nipple Ring

Biker Chick Coverup

The Biker Chick Cover-Up features a hot and sexy bikini.

Misc Creative Tees

Barcode Colour T-Shirt

Abstract and colourful barcode printed on a black tee.

Apartment Building

Living in the city, we might be merged into the urban environment better when putting on the skin of the city.

Beijing Satellite

Wearing a SQY-T Useful Information t-shirt, you might be more helpful to those who stare at your t-shirt.

Map of Shanghai

Google map of Shanghai. You’ll never get lost again in Shanghai.

Love Is Colorblind Heart

You Complete Me

This shirt helps you show your softer side in the most nerdy way possible. With a galaga t-shirt!

The Hangover Movie Funny T Shirt

Tigers love pepper. They hate cinnamon!

You Rock My Small, Self-Centered Universe

Tell the one you love that they’re almost as important as you are.

Points of View

Realist, idealist, capitalist, communist, conspiracist, sexist, nihilist and opportunist, each with their own witty opinion of the glass half full or half empty.

Milky Way

Exit

Exit from rain on your shirt.

RedDot Boxing Gloves

RedDot Boxing Gloves Tee features the illusion of crimson boxing gloves strewn around the neck.

Bulzeye Headphones V-Neck Tee

This Bulzeye Headphones V-Neck Tee in Vintage White features crystallized headphones on front and Bulzeye logo on back.

Wish You Were Here

The title says everything.

Journey to the City of No Horizon

A surreal concept where there is a city of no horizon with endless flow of river towards bottom and infinite extension of sky towards top.

CutMe

Hands Down

Nice colors and placement for a hand skeleton.

Macro Photography II – 70 Beautiful Photos of Insects

2009-11-21T17:18:32Z

Insect photography is challenging under the best circumstances. Think about it: you’re taking photos of something that is likely smaller than your little finger (and at largest is still probably smaller than your hand), has no reason to cooperate, and likely views you as a predator or is oblivious to your presence entirely. And even if you’re taking photos of dead insects, it still takes a lot of skill (and a good macro lens) to get the right focus and lighting.

The photographers who managed to snap the photos below all deserve some serious respect. They’ve managed to capture the beauty and complexity of some of the most beautiful specimens in the insect world. Look at their coloring, their structure, the way their bodies are segmented, and let them inspire your designs. Whether you simply borrow a color scheme or go for something a bit more obvious, insects can serve as a wonderful source of artistic inspiration, one that is often overlooked.

Here are more photography related entries you might be interested:

Full list after jump.

Insect
by FockLove

Insect
by PauliusC

Insect Series 3
by Grugster

Insect 08
by Josgoh

Insect
by Phaedrus-42

Insect vs Spider
by Afri

Insect
by TheRedGirl

The Insect
by VerzaubertRocken

Leaf Insect Shot 2
by Jakwak

Unidentified Insect
by Gerald Yuvallos

Insect.
by Drvall

Insect On Wood
by Rockinxrebecca

Green Insect
by Abank

Insect
by Fuegomujer

Insect 01
by Josgoh

Insects With Attitude
by MJIphotos

Insect
by Diganta Talukdar

Spotted Cucumber Beetle
by Wolfpix

Metallic Green Insect
by Srini G

Insect Macro
by Publicenergy

Death To A Dragonfly
by Greekchickie

Dragonfly_Z19789
by Ennor

Dragonfly
by CW Ye

Nasty Insect
by Geaannunziata

Green Insect
by Jaszczura

Insect Eye To Eye
by Saddogeyes

Insect 7
by Mewlo

Insect.
by ZWincik

Insect 03
by Harry-Schoemaker

Spiny Leaf Insect
by Duskmoth

Macro – Dead Insect
by Noitu-lover

Cricket Macro
by Martin_Heigan

Insect Macro
by Salendron

Insect 33
by Josgoh

Hylotrupes Bajulus
by Selley

Tiny Red Cricket
by Garion

Insect Macros_021
by Josedeluna

Insect Macro
by Aidiwz

Shy Hopper
by James Jordan

Dead Insect
by Baton101

Insect Photo 3 – Set 3
by Blookz

Insect
by Mega-Ale

Rays Of Dawn
by Ageofloss

Mr. Insect
by MrStuart

He Can Fly
by Viand

Bottle Fly On Red Flower
by Erica_Marshall

Hawker Dragonfly Macro
by Mushi_king

Fly Extreme Macro
by Martin Heigan

Blue Fly in Flight
by David Reece

Blending In
by Kibondo

Bee
by DoeLay

Resting Insect
by Pusakal1402

Third Insect
by Owczak

Dragonfly
by HVargas

Dragonfly.
by Le-Voyageur

Dragonfly
by Jaydehawk

Red Dragonfly
by Sh0ggy

The Hanging Dragonfly
by SubterfugeMalaises

Dragonfly
by Indja-art

Halloween Pennant Dragonfly
by Motleypixel

Cinnabar Moth (Tyria Jacobaeae)
by Nutmeg66

Columbia Silk Moth
by Furryscaly

Male Golden Birdwing Butterfly Bangkok
by Travlinman43

Grey Dagger Caterpillar (Acronicta Psi)
by Nutmeg66

Saddleback Caterpillar
by Cotinis

Cuckoo Wasp (Chrysididae) Pollinating Euphorbia Flowers
by Martin_Heigan

Yellow-faced Bumble Bee – Bombus Vosnesenskii
by Maxi Millipede

Transparent Butterfly
by Thefost

Copper Butterfly
by Reini68

Butterfly In Hand
by DigiDragon

Excellent HTML Newsletter Templates – Best Of

2009-11-21T17:20:43Z

A well designed newsletter/email template can be the difference between success an failure. Whether its to update customers about a product, or to share information, having a well designed template can be a great starting point to guide your readers and give them a clear coherent flow when they read your email. This is crucial, considering how important the first impression is.

Here is round-up of some of the best free HTML newsletter templates on the Internet you can download without paying a penny.

Here are more related entries you might be interested:

Full list after jump.

Top Five: Free Newsletter Templates We Like Best

Campaign Monitor – 30 FREE HTML Newsletter Templates
Here is a neatly sorted collection of 30 well produced templates which have been tested against all major email clients and web mail, for example Outlook, Thunderbird and Gmail. One of the feature is that it already pre-sorts all the templates into those with left or right sidebars, or single column templates
Carbon Graffiti – 10 Free email marketing templates
Carbon Graffiti is a great design website, and one of the cool resources theyve made available are 10 free email marketing templates. Designs range from very simple basic ones to custom complex templates.
Aweber: – 5 Awesome Functional Newsletter Templates
Aweber has some of the best newsletter templates out there, and some of them go beyond a good design and are pretty darn functional as well. Here are 5 of the best from Aweber.

Download
This is a great email template to use when sending over a note asking someone to download a file. This template also comes in 3 flavors – one for PDFs, one for audio, and one for any other files, as well as 6 colors – so youre able to easily customize your readers download experience.

Welcome
This is a perfect email template to use send when youre welcoming new members to your service.

Blog Newsletter
If you write a blog, this is a great template to share your info and updates in a newsletter to build a stronger relationship with your readers.

Malibu
This email template was specially built to communicate promotional offers in a quick and efficient manner.

Outdoorsy
2-column (right-hand sidebar) email template with an organic feel and navigation links available to use in the header.
MailChimp – 4 basic flexible HTML email templates
Mailchip four basic, flexible templates that you can use to get started. They’ve been tested to render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more.
Cakemail – 17 Well Designed Newsletter Templates

More Free Newsletter Templates

Here are some other sites which also offer up free newsletter templates for download.

Interspire – 30 Free Newsletter templates
Stock Layouts – TechTimes theme
This is a beautifully designed theme, although it requires you to register (for free) on the site.
Octeth – 10 Free Email Templates
Hot Email Templates – 28 Free HTML Email Templates
Active Campaign – 11 Free Email Templates
Mach5 – 4 Free Email Templates
Omnistare Tools – 10 Free Email Newsletter Templates
A variety of free templates, but it requires (free) signup.
Benchmark – 3 Simple HTML Email Templates
Delivery Success – 10 Free Newsletter Templates
Templatesbox – 84 Free Newletter Templates

About Author: James Yeang is the writer of a Malaysian tech blog called Friedbeef’s Tech, and can also be found on Twitter.

Breadcrumb Navigation Examined: Best Practices & Examples

2009-11-21T17:22:03Z

Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary while others may feel it is too big of a hassle for what its worth. Fact of the matter is, breadcrumb navigation will greatly increase the usability of a website. Breadcrumbs give users an alternative method of navigation, allow them to see where they stand in the hierarchy of a website, and will reduce the number of steps needed to navigate to a higher-level within a website.

Outlined here are the different types of breadcrumb navigation being used today, why they are important, and how they should best be implemented online. Also included here for your reference are over 30 examples of how breadcrumbs are being used online today. Remember, while it is likely that breadcrumb navigation will not make or break a website it will provide an added benefit to your users by increasing the overall usability and functionality of your website.

Breadcrumb Types

Path

Path-based breadcrumbs indicate the steps, or path, a user has taken to arrive at the current page of a website. Furthermore, users will see links to pages they have previously visited to reach the current page. Out of the three types of breadcrumb navigation, Path-based breadcrumb navigation is least popular online. Reason being, Path-based breadcrumb navigation provides the similar functionality to the “Forward” and “Back” buttons on a browser. For most websites Location-based and Attribute-based breadcrumb navigation offers better functionality.

Location

Location-based breadcrumbs indicate to the user where the current page stands in the hierarchy of the website. This type of breadcrumb navigation is most commonly seen on websites with more than two levels of depth or content. Upon moving further into a website users are provide with links to pages, or categories, that act as a “parent” or a level up from the page they are currently viewing. For example, a user may be on the “Speak” page however the “What we do” page is a parent of the “Speak” page while the “Home” page is a parent of the “What we do” page.

Clearleft Ltd

Attribute

Attribute-based breadcrumbs indicate to the user the attributes or categories ascribed to the current page within a website. Often seen on e-commerce websites, products may not only fall under a category but under certain attributes as well. For example, a vehicle may be categorized as an SUV then have the attributes of being the color black and released in the year 2010.

Cars.com

Why Use Breadcrumbs?

Great Usability
Breadcrumbs provide an additional means by which users can easily navigate a website. If a user lands on an internal page on your website from another source breadcrumbs will allow the user to see exactly where they stand within the sites hierarchy. User are also given the opportunity to move up to a higher level of the website at any given time without any hassle.
Easy to Backtrack
Primary navigations are not designed to be followed backwards were breadcrumbs are. Since backtracking is extremely popular online providing a little additional help can go a long way.
Eliminate Additional Clicks
Breadcrumbs allow users to jump from one level of a website to the next without having to use the “forward” or “backward” buttons on the browser. Additionally breadcrumbs eliminate the need for users to continually resort to the main navigation.
Shows Users Hierarchy
The primary navigation of a website will not reflect the hierarchy of every page within the site. Giving users breadcrumbs will allow them to see the hierarchy of a page within a website.
Visually Pleasing
Not only do breadcrumbs provide users with additional usability, they do so without taking up much room or space on the page. Breadcrumbs are easy to implement into the visual design of your website and provide a great benefit to users.
Provides Additional Help
It is entirely possible that some users may not understand how a websites primary navigation works and in some cases users may not even know what they are looking for. Giving users breadcrumbs will allow them to see the overall progress and structure of a website thus allowing them to navigate the website better.
Lower Bounce Rates
Typically breadcrumbs will provide a more detailed navigation than the primary navigation. In doing so, users will be given more options on how to navigate a website. Giving them the opportunity to easily back track a few levels within the website will lower your bounce rate.
Builds Interest
When a user lands on an internal page of a website odds are they are already on a page of interest. Breadcrumbs may provide links to additional pages and information of which the user is also interested in without making them start from square one.

Breadcrumb Best Practices

Use Breadcrumbs at the Top of a Page
The most common and instinctual placement for breadcrumbs is within the top of a page. This allows users to find the breadcrumbs in an uncomplicated manner and make use of them accordingly.
Use Breadcrumbs Consistently
If you do decide to use breadcrumbs make sure that you use them across your entire website. Giving users breadcrumbs on some pages and not others will only confuse and frustrate them. (One prime example of this is Amazon as they remove breadcrumbs from the individual product pages.)
Breadcrumbs Should Degrade Gracefully
Breadcrumbs should always start with the home page and degrade to the currently page. In doing so your breadcrumbs need to go from the highest level to the lowest level one step at a time.
Stylize Breadcrumbs Appropriately
You want your breadcrumbs to be seen however you do not want them to be the focal point. You also want to make it apparent that your breadcrumbs are not part of the main content to a page, only additional support to it. Find a happy medium where your breadcrumbs are noticeable however not overbearing.
Categorize Pages Clearly
If you have pages that fall under two or more categories you may not want to use breadcrumbs on your website. Trying to place a page under two or more categories will likely only produce unclear breadcrumbs and puzzle the user. Make sure your website has an organized hierarchy and is displayed accordingly through your breadcrumbs.
Clearly Separate Each Level
Make sure users are able to distinguish the difference between each breadcrumb level. The most common separator between levels is the ‘greater than’ character (>). Other good separators include right double angle quotations (»), slashes (/), and arrows (→). If using a plain text character, only use one. (» is more appealing and effective than >>)
Single Out the Current Page
Use a different style on the last item of a breadcrumb list to establish that it is the currently page being viewed. You can accomplish this by making the item bold, changing its color, or emphasizing it.
Do Not Make the Current Page a Link
There is no need to make the last item of a breadcrumb list a link because it is the current page being viewed. Creating a link here will only confuse users, especially when they click on it and are not taken to a new page.
Do Not Use Breadcrumbs as a Page Heading
Using the last item of a breadcrumb list as the heading of a current page is ineffective. If you choose to use breadcrumbs do so with the addition of a page heading as well.
Breadcrumbs Do Not Replace Primary Navigation
Breadcrumbs are only to be used as support to the primary navigation, never to replace the primary navigation altogether. You should always provide users with a primary navigation from which they can navigate a website before using breadcrumb navigation.

Great Examples of Breadcrumbs

Littman Bros. Lighting

Guardian.co.uk

AREA 17

Wufoo

Girl Scouts of Middle Tennessee

The Glasgow Collective

About Author – Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at letscounthedays and would love to hear from you on Twitter. Please feel free tell him hello!

100+ Clean, Simple and Minimalist Website Designs

2009-11-21T17:23:19Z

Minimalism has been a popular website design style for years. It has so many benefits; minimalist sites load faster, take fewer server resources, and are often faster to develop than more graphically complicated designs. Plus, they give a professional, clean impression to visitors.

Many people still view minimalist designs as boring. But there’s a real art to effective minimal website designs, something not all designers can effectively master. When you limit the number of graphic elements you use and put the focus on negative space and typography, a good eye for spacing and proportion becomes crucial.

Below are more than 100 excellent examples of clean, simple and minimalist website designs. They run the gamut from simple brochure-style sites to ecommerce and portfolio sites. What they all have in common is a design aesthetic where less is more.

Rainfall Daffinson
A white background with red accents.

Ben Hulse Design
Dark gray background with white and gray lettering.

Amy Levy PR
White background with gray and red lettering.

Brand Spanking New
A black and white color scheme with gray, orange, and pale blue accents.

Frieze Magazine
A minimalist grid design.

Indie Labs
A dark gray, white and sky blue grid-based design.

Rikcat Industries
An entirely black and white design.

The Morning News
A minimalist magazine-style site.

Mark Boulton Design
A mostly black and white site with colored accents.

Jonnotie
A gray and maroon design.

Finch
A mostly black, white and gray design.

Maqina
A single column portfolio site.

Chama Inc.
A simple black and white design with an emphasis on typography.

Jon Tan
Another simple black and white design with orange accents and great typography.

Mark Wieman
Gray and White with mustard-yellow accents.

Cameron.io
A simple dove gray and white design with red accents.

Postmachina
Black background with gray and white text.

Concentric Studio
A simple design with a lot of white space.

DS.Emotion
A simple design that makes good use of drop shadows and red accents.

Kyle Sollenberger Design
Uses a soft color palette and slightly oversized text.

David Sutoyo
A soft gray, white and dark blue design.

Brad Young Photography
A dark background with soft gray and blue typography.

The DECK
A black and white design with strong typographical elements.

Hot Meteor
A simple design with retro elements.

The Portfolio of Matt Bango
Another simple design with blue accents and an emphasis on typography.

Vesess
Another black and white design with gray and red accents.

Design Intellection
A grid-based design with excellent typography.

Surfstation
A soft color palette and a two-column design with lots of white space.

The Old Fashioned
A black and white grid-based design.

CRW / Corporate Risk Watch
Uses a textured background and some hand-drawn elements.

Being Wicked
A mostly black and white design with oversized typography.

Eduardo de La Rocque
A dark gray and white, single column design.

Pixelumbrella
A rarely-seen minimalist grunge design.

NineZero
A narrow, single-column design with a lot of white space.

SimpleBits
A simple design with a textured header and a focus on typography.

Poccuo
A grid-based design with blue, gray and black text.

Davroc Interiors
A design composed entirely of shades of bluish-gray.

Sascha Eggenberger
Hand-drawn elements in black and white with blue accents set this design apart.

Nathan Carnes
A subtle color scheme and textures with black and gray typography.

Nathan Borror
Makes use of colored and geometric accents while still retaining plenty of white space and a simple design.

Beseku
A black and white design with an emphasis on typography.

NZ Venues
A subtle dark gray and white design with small, multi-colored accents.

Chris Garrett Media Ltd
A dark design with subtle gradients in the typography and blue accents.

DesigningTheNews.com
A black and gray design with a focus on typography.

3by9
A multi-colored minimal design with colorful accents and lots of white space.

Typographica
A black, white, and gray design that places emphasis on the images it displays and uses a grid-based design.

Theme
A magazine/grid-style design with orange accents.

Monty Lounge Industries
A blue and gray design with an emphasis on typography.

Berit Somme
A black, white and gray design that places the emphasis on the portfolio pieces.

el Candor
A black and white grid-based portfolio site.

Design by Silnt
A grid-based design in shades of gray.

Pixelcraft
A cream-colored background and black typography keep things simple.

Klipp og Lim
A grid-based design with a portfolio slideshow in the header.

Ole Martin Kristiansen
A dark background with subtly-colored typography.

SiteInspire
A gray site with bright red accents.

MediaFlex
A dark background with white typography that leaves the emphasis on the images.

Vudumedia
A black, gray and white grid-based design.

AREA 17
A black, white and gray design with some dark blue typography.

just.dot
A grayish-brown background and a grid-based design.

LegiStyles
A dark background with an emphasis on typography and tomato-red accents.

Visualbox
A subtly-patterned dark-gray background with bold white and gray typography.

Flush
A dark gray, slightly-grungy design.

Designme
A dark background with gray and white typography.

Designjunction.in
A dark background with lighter typography.

deCode
A dark, textured background with hand-drawn elements and a bit of a retro vibe.

72 Rivington Street
A bold, black and white grid design.

Analogue Motion
A grid-based design with a subtle color palette and typography.

Astheria
A subtle blue, gray and white design with plenty of negative space.

Cade Martin Photography
A white and gray design with the emphasis on the typography.

Daniel Howells
A subtle design that focuses on the typography.

Eightface.com
A black and white design with red highlights.

Fever
A gray background with gray and red text.

Fell Swoop
A white background with black and red typography and tons of negative space.

FRKT
A black and white design with subtle textures.

Jamie Gregory
A grid-based deisgn that focuses on typography.

Joni Korpi
A gray and black design with an emphasis on typography.

Matt Hinchliffe
A black and white design with light blue accents.

Martin Hipp
White background and green accents.

Stefan Persson
A grid-based design with orange accents.

Strange/Beautiful
A gray and white grid-based design.

Voce antica
A white and gray two-column design.

Inkcover Blog
A black and white design with oversized typography.

Allday.cc
A very simple black and white design with minimalist navigation.

Final Eyes
A black, white and gray single-column design.

80/20
A gray color scheme with green accents.

Craig Wilson
A very simple black and white design with hand-drawn elements.

Pomade
An extremely minimalist design with black text and red accents.

SOFA
A grid-based design that emphasizes typography.

The Typographic Desk Reference (TDR)
A minimalist sales page that utilizes modal windows.

I love Typography
A simple design with olive green typography accents.

Artypapers
A white background and subtle gray and pink color scheme.

Sisson Studio
A brown and tan grid-based design with a white background.

We Love Typography
A grid-based design with a white background.

Gordymac
A blue and gray design with plenty of white space.

National College of Art & Design: Postgraduate Study
A gray design with circular images and white text.

Minimalissimo
Black and gray typography with plenty of white space.

Wide Angled
A grid-based site that puts the emphasis on the images it features.

Hair Ott
A gray, black and white design with a Flash slideshow in the header.

Tim Parkin
A grid-based design with a white background.

Selldorf Architects
A simple black and white design.

LUXUX
A grid-based portfolio site.

Fluid
A grid-based design with a white background and simple typography.

Saturday
A simple design with a Flash slideshow.

The May Blog
A simple gray and green color scheme on a white background./p>

quadrifolia
A very bold green and white design.

Dhyr.Hagen
A bold gray and white design.

Nonesuch Records
A simple black and white design with an emphasis on imagery.

Freebie: Blitter Twitter Icon Set

2009-12-08T13:00:31Z

We love freebies, and we love them more if they are high quality freebie. We occasionally search the Internet high and low to dig out these hidden gems to make designers’ life easier and better. This week, with the help from our friend Iconshock, we are releasing a free high quality Twitter icon set, named Blitter.

Blitter Twitter icon set comes in two sets of sizes, respectively 215×215 pixels and 512×512 pixels in transparent .PNG 24-bit format. We’ve also included the Adobe Illustrator .AI source file just in case you want a bigger version of any icon. Feel free to use, edit for any type of individual and commercial projects. However you should not re-sell or take advantage of the freebie to generate any revenue of any format.

Help us spread a word if you like what you’ve downloaded.

Download:

Download Blitter (256×256, 512×512), PNG format
Download Blitter source Ilustrator .AI format
Download Blitter full set (Icons + source)

The Designer – Iconshock

"As one of the new projects, we are going to give a free Icon set monthly especially design for all the readers of Hongkiat, because we really like to be part of this amazing blog, and show you where the love comes from. Enjoy it! – Iconshock"

Iconshock is renown in the icon design industry for being the only one to release the massive sum of 5000 new icons each week. We have also built a huge and active community around icon design with more than 60,000 members, plus a blog and a forum where the public can reunite to discuss about design and programming issues, and also download design related resources.

Despite all of us being under 40, throughout these 5 years our company has built a valuable experience and knowhow in the market. We have a solid structure and we are 100% proudly Colombian. We offer almost thirty different icon styles, organized in more than 40 categories building up an astonishing collection of more than 750,000 individual icons.

20 Best Wordpress Typography Plugins To Enhance Readability

2009-12-08T13:05:18Z

WordPress has pretty decent typography features in the core installation. But there are plenty of areas ripe for improvement. That’s where the plugins below come in.

Credit: Image background by fabianohikaru

Whether you just want more control over how the basic text on your site shows up or you want to do something a bit more advanced, there’s surely a plugin available to help. There are plugins to better handle things like hyphens and long URLS, plugins to replace text with images (whether in headlines or to avoid censorship), and plugins to let you add print-centric elements, like drop caps and pull quotes, to your posts.

Be sure to check out our previous post on Dynamic Image Replacement for more useful WordPress typography plugins and here are some Wordpress related plugins we’ve previously published:

Full list after jump.

Wordpress Plugins For Better Readability

TTFTitles

The TTFTitles plugin is another dynamic text replacement plugin that lets you replace your headers with images using any TrueType font you choose. It’s mostly a rework of the Image Headlines plugin. It has been tested with WP 1.5.2 up through 2.7.
DRF2WP EN

DRF2WP EN is a font replacement plugin that allows you to replace any font on your WP site with a dynamically generated image that uses any TrueType or OpenType font you want. The source code remains in-tact, which means your site won’t take a hit with search engines. The plugin works with WP 2.5 up to 2.8.4.
Drop Caps

The Drop Caps plugin lets you add a customized drop cap to each of your posts and pages (or even comments and other excerpts), similar to what’s commonly done in print publications. It can also be used to create other types of initials. The plugin has been tested with WP 2.3 up through 2.7.1.
WP Typography

The WP Typography plugin adds a number of typography features to your blog. It includes hyphenation, spacing control, forced internal wrapping of long URLs, intelligent character placement, smart handling of quotes and other characters, and CSS hooks for styling ampersands, acronyms, and other special characters. It works with WP 2.7 up through 2.8.4.
Simple Pull Quote

The Simple Pull Quote plugin lets you insert pull quotes into your blog posts to emphasize certain sentences or phrases using custom fields. Pull quotes can be styled by editing the included CSS file. It works with WP 2.7 or 2.8.
jQuery Font Resizer

jQuery Font Resizer is a plugin that improves the usability and accessibility of your blog. It adds three links to each page to allow visitors to resize the type on that particular page. It’s a great option to make your site more user-friendly to visitors who want a larger or smaller type than standard. It’s known to work with WP version 2.0.2 up through 2.7.
WP-Syntax

WP-Syntax is another syntax highlighter that uses GeSHi. It gives you the option to highlight with or without line numbers and maintains formatting when you copy snippets. WP-Syntax is compatible with WP 2.0 up through 2.8.
Google Syntax Highlighter for WordPress

The Google Syntax Highlighter for WordPress lets the original Google Syntax Highlighter that was developed by Alex Gorbatchev work within WP. It’s a completely client-side highlighter, supports multiple languages (including Ruby, Python, PHP, JavaScript, XML, HTML, Delphi, CSS, C++ and more), and is very lightweight. It’s known to be compatible with version 2.0.0 through 2.2.2.
WP-Syntax Colorizer

WP-Syntax Colorizer is a simple plugin for colorizing code snippets within your blog posts when run alongside WP-Syntax. WP-Syntax Colorizer has been tested with WP 2.0 up through 2.5.
CodeColorer

CodeColorer adds syntax highlighting to code snippets placed on your blog. It’s a great plugin to use if you frequently post code snippets, such as on a web design or development blog. It works with version 2.7 up through 2.8.4.
TextImage

The TextImage plugin replaces all the text in a post with a PNG image. It’s a good plugin to use if you wnat to block search engines from seeing your content or otherwise fly under the radar. It also gets around most automated filtering that certain countries use to censor internet content. It’s been tested with WP 2.1 up through 2.7.1.
Censortive

Censortive helps you get around automated censorship by replacing certain words with images of the word instead of text. You define which words you want to be replaced and Censortive does the rest. It’s a great plugin for getting around a lot of censorship without blocking your content from search engines. It’s been tested with WP 2.0.2 up through 2.3.
Title Style

Title Style gives you additional formatting options for your post titles. It can be used to wrap lowercase words or words like “the”, “a”, or “of” in em, span, or other elements. It’s compatible with WP 2.0.0 up through 2.8.4.
PS Disable Auto Formatting

PS Disable Auto Formatting prevents WordPress from applying its own auto formatting functions to your posts and pages. It prevents WP from stripping out tags when you’re editing in the HTML editor and has a positive impact on the way the visual editor formats your posts, too. It’s known to be compatible with WP 2.5 up through 2.8.3.
Post Typographer

Post Typographer plugin adds a number of typography improvements to your posts automatically. It changes dashes with spaces around them to em-dashes, transforms hyphens without spaces to n-dashes, and turns spaces after particular words into non-breaking spaces, among other features. It’s been tested with WP 2.5 up through 2.8.3.
Author Intro for Post

Author Intro for Post plugin adds an author intro to the beginning of each post based on the author’s name and bio information. It’s been tested with WP versions 2.0.2 through 2.7.
WP-Footnotes

WP-Footnotes makes it simple to add footnotes to your posts. Usage is incredibly easy and only requires you to use double-parentheses around your footnote. It does the rest. It’s compatible with WP versions 2.0 through 2.6.

Plugins for Admins

Here are a couple of admin plugins that can help you improve your site’s typography by giving you more editing options in the backend of your site.

WP Super Edit

WP Super Edit adds a host of WYSIWYG options to the standard WP visual editor. It adds two full rows of additional features to your visual editor toolbar, including options for applying specific styles and for adding and formatting tables. It’s known to work with version 2.8 and 2.8.1.
Real WYSIWYG Plugin

The Real WYSIWYG Plugin adds a WYSIWYG editor that actually shows you the page layout of your post within the visual editor. It makes it easier to see how your line breaks, images, and other elements will actually fit on your page.
Text Control

Text Control gives you additional options for formatting posts on your WP site according to a variety of different syntaxes and encoding options, including Textile 1, Textile 2, and Markdown. It’s compatible with WP 1.5 and higher.

30 Stunning Apple Concept Designs

2009-11-21T17:26:54Z

A great wave of excitement is sweeping across all Apple fans as they await for the official launch of the latest amazing Apple product by year end. Yes, it is the eagerly anticipated Apple Tablet, which was reported to be commercially available this coming November. Some of us may have seen the prototype online, and few will disagree that it is yet another beautiful creation by Apple.

In terms of the design and the aesthetic value of IT wares, there is little dispute that Apple create some of the finest and most creative design for their products that few or no other competitors can match. Over the years, product concept designs by hardcore Apple fans began to surface as Apple started to stand out among its competitors. Although these designs are not going to be marketed as actual products, it reflects the deepest wishes of die-hard Apple fans.

Here is a fine compilation of some of the best, coolest and most creative Apple concept designs created by fans. Don’t you just wish these are available in the market?

Desktops and Laptops

Mac Mini (Slim)

Mac Mini is super-slim concept design of the actual Apple Mac Mini. It has all the features of the original machine but is a lot slimmer. Connect the Mac Mini to a Apple LED displays and you will have a powerful Multimedia computer in-front of you. By Isamu Sanada.

Apple iView

iView is concept Mac design with curved display that is made for best orientation with the curvature of a human eye. It has a dual-sided display and 2 web-cams on both sides of the display. By Nuno Teixeira.

Apple Tribook

The tribook has exactly what the name and the picture suggest, it has three screens. One is the regular laptop-style screen and the other two can be folded to save the space when they are not in use. It is possible that the fordable screens use the Apple’s patented transparent screen technology, that way when they are folded – it can still be used a simple Macbook too. By Adam Benton.

Transparent iMac

A truly futuristic iMac concept design with a transparent display. Equipped with a transparent 30-inch display and a wireless keyboard with light-sensitive illuminated keys, this Concept design can also be set to various levels of translucency and can fade during sleep modes. By Adam Benton.

MacBook Mini

MacBook mini is a smart concept design goes one further to make MacBooks smaller. It features a foldable trackpad which saves up the space when you are not using the keyboard. One other mockup of the MacBook mini by the same designer is a sliding trackpad, which sounds like a better idea than the foldable one. By Isamu Sanada.

Mac Air

Now this is something purely innovative. An Apple Tablet concept that doubles as a desktop, just awesome. It Sports a 5.2-inch LED-backlit glossy widescreen TFT display and can be hooked to a wireless Keyboard, a mouse, a super drive and a Time Machine to turn it into a fully functional wireless Desktop. By Isamu Sanada.

Mac Mini

Concept is to discard the drawbacks which a iMac mini user would nark about the owned machine. And the mark about the Mac Mini is the I/O ports. This concept design makes the ports reachable easily and the V-shape design makes sure that it will remain cool while you are using it. That’s because the hot air will pass through the legs instead respiring from back lying on the top. By Sait Alanyali.

Mac Tab

MacTab can be used as a standalone tablet as well as a laptop with a physical keyboard. It boasts a very thin wireless keyboard that can be easily removed from the tablet and put back to cover the screen when transporting it. The hinges on the back side can be used to support the tablet while in ’standing’ position and it can be used for placing the keyboard too. By Yann Le Corroler.

Tablets

Mac Tablet

This Mac Tablet concept has an optical drive and a slider-style Physical keyboard. It comes sports a physical keyboard which can hide inside the device itself. By Isamu Sanada.

Macbook Touch

Yet another concept design by Isamu Sanada. The MacBook Touch is actually an iPhone concept design with a bigger screen and I/O ports. By Isamu Sanada.

Foldable Macbook Touch

This concept has a foldable design that makes it a Tablet-cum-Macbook. It features Flexible OLED technology which makes the foldable, full-size display possible. When in notebook mode, one half of the screen is converted to a touch screen keyboard and trackpad. By Tommaso Gecchelin.

MacBook Mini

This MacBook Mini is a tablet Concept that Apple is always asked to develop into a product that would be a perfect design. This concise tablet can be used to view pictures, listen to music and watch movies in High Resolution. Moreover, surfing the internet will delineate the great fun.

Apple Netbook Concept

This concept is a belief rather than a imaginary concept and the rumours all around gab about this product being the new Apple Tablet. By Adam Benton.

Mac Pad

MacTab is a concept Apple tablet design that is equipped with a QWERTY physical keyboard. The keyboard can be easily closed, thanks to the slider mechanism. By Maverick18x.

Apple TouchBook

This concept may be a reality soon as the rumours are that the two companies, Apple and Verizon, are looking forward to develop a wireless iPhone. The device is expected to be thinner, lighter and much affordable than the iPhone. The product may be launched by the end of this year and it will be the best to view pictures, listen music and watch HD videos.

iPhones

iPhone Elite

When Apple was to launch iPhone, a reporter asked Steve Ballmer what he though about it – He laughed and said, “A Phone without a Keyboard?”. If only he could see this concept design of iPhone. iPhone Elite has a dual slider mechanism. It has a bigger camera and a full QWERT physical keyboard too. By Mat Brady.

iPhone 4G

Mix iPhone with iPod Touch and through in some Macbook Air too. You get a slim iPhone 4G like this one. It has a front camera for video-conferencing and retains curves of a Macbook Air. By Rodolphe Desmare.

iPhone Video

This Photoshop creation is a concept about iPhone Video. This one won’t be much diverse from the iPhone, but some extra buttons on its left and some additional effects for the sleek screen and home button make this look better than the iPhone. By Chromatix.

iEye

The iEye is a concept mobile phone which boasts a shutter button onto the camera making it over iPhone constraints. The phone curbs a glut of features that take in 720p HD video, 5.1-megapixel stills, 12GB of flash memory, and a large-capacity lithium-ion battery hardwired inside. Moreover a 30 pin connector boosts its aptitude in connectivity for easy file transfers. By Adam Benton.

iPhone Nano

What can be a copulate when a iPhone and Nano are parents? The iPhone Nano. It’s a pretty good concept which can be abstracted from the image below. It’s a concept mated from a iPhone 3G and Nano G4. By FreshAndContent.

iPhone Pro

A unibody iPhone with pretty slick looks and flatter body. The iPhone 3.0 or iPhone Pro comes in two versions, aluminium and glass.

iPods

iPod Chimera

This concept is by far one of the best and most sophisticated iPod concept. Apart from the sleek and slim looks, it also has earpieces that are able to play wirelessly. Made up of entirely Titanium, iPod chimera has a scratch/smear resistant display that is able to play 720p HD videos.

iPod Nano 4G

Not much creative but a good idea about a iPod Nano 4G. This concept is splendid with some more sleek curves and great combination of colours. Indubitably, the design will come with many more features and as the image suggests, an accelerometer as well. By Chromatix.

iPod Shuffle

This concept is a portrayal of an iPod Shuffle wrist wrap dangling and would be found on all the joggers and runaway models on the roads, strapped on their arms. An iPod shuffle with a Mp3 bracelet and a wireless ear piece that might look prettier on arms of girls. By Isamu Sanada.

hiPod Concept

hiPod is a wrist watch style iPod that has a foldable display that becomes a digital watch when closed. It has the regular iPod dial-navigation and comes with a pair of wireless earpieces. By Isamu Sanada.

Miscellaneous Apple Concept Gadgets

Apple iRing

With this concept iRing design, you are able to control your iPod via bluetooth. You can control playback and volume on any of your Apple media devices using the touch-sensitive strip. It sports an OLED status display which can be use to toggle between ‘pause’ and ‘play’. By Victor Soto.

iVault

iVault concept entices you to own it in an affordable price of about $499 and will store hundreds of thousands of songs, videos and pictures. You are able to sync it with your Laptop/Desktop wirelessly just like Apple’s Time Capsule.

iCal Watch

The concept is a marvel of its own . It syns with iCal via Bluetooth so that you won’t miss and appointment or a meeting. Moreover the watch has a touch screen making it a snap to use.

iSticks

The set of iStick speakers are compatible with all Apple products and when compared to Harman Kardon speakers, it seems better to opt for and much reliable with iSub in a combo arrangement.

iLight

The iLight concept has a touch-sensitive panel which can be used to control the torch. Single tap to turn on, another to turn off, flick fingers forward and backward to control the luminosity, and double tap to lock the touch-panel. By Miyoshimasato.