One of the many reasons to why I want to buy an iPad is the beautiful design it features. Not only is the product itself designed beautifully but the apps that are built for it tend to have truly impressive user interfaces. Since there was a quick increase in the number of gorgeous app designs I decided to collect and showcase the ones I thought were the best. Hope you like them and I would like to thank LandingPad as the majority of the screenshots came from there and not to forget the developers and designers who worked on the apps.

There a number of reasons why you may want to be a designer, the flexibility, the freedom and the potential to become the best in your field. But there is one area that continues to push me towards a design career and that is the office or workspace. Designer’s tend to have such gorgeous desks and computers that I envy and continue to strive for. Below is a collection of beautiful workspaces courtesy of Deskography.

Background

Slab serif printing type was first introduced around 1815 and was used primarily with advertisements, posters and flyers. Vincent Figgins designed a typeface called Antique that soon encouraged others to follow similar patterns in serif design.

An excellent discussion regarding slab serif typography.

Clarendon model

Clarendon

Have some bracketing and contrast in size in the actual serif. Examples include Clarendon and Egyptienne.

Neo-grotesque model

Tutsplus

The Neo-grotesque model is currently the most popular type of slab serif type. Neo-grotesque have no bracketing and evenly weighted stems and serifs. The letterforms are similar to neo-grotesque or realist sans-serif fonts. Examples include Rockwell and Lubal Graph(as seen on the Tutsplus network).

Italienne model

Playbill

The Italienne model has a distinct difference, with the serifs being even heavier than the stems. This creates a sense of dominance as well as an attention-drawing effect. Some Italienne slab serifs, such as Playbill, have a characteristic Western appearance.

Typewriter typefaces

Typewriter typefaces, this one isn't slab serif but it's a fantastic photo!

Typewriter slab serif typefaces are named for their use in strike-on typewriting. These faces originated in monospaced format with fixed-width, meaning that every character takes up the same amount of horizontal space. Examples include Courier and Courier New (both Neo-grotesque model) and Prestige Elite (Clarendon model).

A collection of the best

Below I have collected a few of my favorite slab serif fonts both free and paid. If you have the money, I would thoroughly recommend the paid fonts. Some authors kindly supply a couple of free typefaces from their paid fonts.

Free Slab Serif Fonts

There a number of great sites where you can download free fonts, these include: Dafont, Fontsquirrel, Urban Fonts, Fontspace.

Nilland

Street Corner Slab

Alexandria

Chunk

Museo

Tertre

College

TypoSlabSerif

Paid Slab Serif Fonts

Many authors like to release their work on their personal sites, however many also like to use websites such as MyFonts and LinoType to sell their fonts

Archer

Trilby

Sentinel

Stymie

FF Tisa

Giza

FF Nexus Mix

Morgan

FF Unit Slab

I <3 New York

Showcase

Slab serif type is becoming more and more popular everyday. Since I started collecting examples of effective use of slab serif type, there has been a number of new websites that have launched using this type. A couple of them have been added to the end of the web design showcase.

Slab Serif Type in web design

Pallian Creative

Breezy Baby

Philadelphia

The Sew Weekly

Brian Hoff

Osmond Interactive

Envira Media

CreativeHunt

Festival Boreal

Edgepoint Church

Mutant Labs

Blue Sky Resumes

DesignWise

Mark Boulton Design

Day to day life

Not only are slab serif typefaces and fonts used in websites but they are also used in logos, brochures, magazines, packaging and much more. If I had a decent camera this showcase would have probably been twice as long.

Kim Florist

Nábytek

London County Council

HuntsVille

House of hoops

Golden Nugget

Bonanza

Launderette

Delicious

Love Ballads

ABCDE

Motel

One Sunday in December

Slab serif in Video

The inspiration

Tim Van Damme

The awesome designs

Alex Nichols

Julian Wachholz

Avadh B.S. Dwivedi

Wine Geek

Ilina Simeonova

Christian Grab

Ivor Pandilla

Louie Mantia

Antoney Calvert

JR Tashjian

Amy Berry

Luis Ramos

Yahya Junianto Aifit

Jake Przespo

Jan Van Lysebettens

Amrinder Sandhu

Martin Greenwood

Mike Jolley

Ben Bodien

Liji Jinaraj

Dean Harris

Guy Lewin

Rendian Therianto

Katrina Neufeld

Ali Bahsisoglu

Ismael Sobek

Magnus Mathisen

David McGeorge

Chris Rowe

Felix Niklas

Chris Carey

Jennie S Chen

Mark Tyrrell

Joshua R Jones

Michael Villar

David Merfield

Maximilian Schoening

Chris Wallace

Aref Jdey

Joao Da Silva

Maykel Loomans

Meelk!

Kevin Liew

What you will be winning

The Smashing Book

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.

How to enter

To enter yourself into this competition, simply tweet out a message including @creativityden somewhere within your 140 characters. Then comment below with your twitter username and a link to your tweet

Will be taking entries until Friday 18th December. Winner will be announced later that day.

Good luck to everyone who enters!

Colorful comment section

The colorful comment section developed and designed for wordpress blogs.

Colourful comments

Querying and displaying the most commented posts

The code is fairly simple. Firstly, it queries the database, finding the x most commented posts between two given dates. It then loops through the posts calculating the width and color of each post. I have tried to make the code as readable as possible, but if you have any problems do not hesitate to leave a comment. I am currently learning php myself so anyone who can improve this code, please share your improved version

My Version

My attempt is referred to as ‘spaghetti code’ – don’t use it! Instead use Dylan’s improved version below mine. I shall leave my version up so you can see the mistakes I made and how Dylan cleaned my mess up.

<h2>Most commented</h2>

<ul id="most_commented">

<?php

#Fetch the five most commented posts between the 1st of January 2009 to the 31st of December 2009
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 5");

#Declare counter variable
$i = 1;

#Loop through each post
foreach ($result as $topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

    #My hacky way of finding the number of comments on the most commented post
    if ($i == 1) {$mostcomments = $commentcount;}

    if ($commentcount != 0)
    {

    #Display our results
    echo '<li style="width:';
    #Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
    echo round((260/$mostcomments)*$commentcount,1).'px; '; 

    #Change the color for each post - hex values - change these values to have different colors
    echo 'background-color:#';
    if ($i == 1) echo 'c32a2a';
    elseif ($i == 2) echo 'c37d2a';
    elseif ($i == 3) echo 'bac32a';
    elseif ($i == 4) echo '8fc32a';
    elseif ($i == 5) echo '4ec32a';

    echo ' ;"> ';

    #Display the post title with a link to the post
    echo '<a href=" ';
    echo get_permalink($postid);
    echo ' "> ';
    echo $title;
    echo '</a>';

    #Display the comment number
    echo '<div class="comment_no">';
    echo $commentcount;
    echo '</div></li>';

    }

$i++;

}

?>

</ul>

Dylan’s much improved version

<h2>Most commented</h2>

<ul id="most_commented">

<?php

# Fetch the five most commented posts in the last 12 months
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN NOW() AND DATE_SUB(NOW(), INTERVAL 12 MONTH) ORDER BY comment_count DESC LIMIT 5");

# Initialize $mostcomments
$mostcomments = FALSE;

# Initialize the colors.  Change these values to have different colours
$colors = array(
	'#c32a2a',
	'#c37d2a',
	'#bac32a',
	'#8fc32a',
	'#4ec32a');

#Loop through each post
foreach ($result as $i=>$topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

	# store the most comments in the first iteration, as a non-zero value evaluates to TRUE
	$mostcomments = ($mostcomments) ? $mostcomments : $commentcount;

    if ($commentcount != 0)
    {
		#Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
		$width = round((260/$mostcomments)*$commentcount,1).'px; ';

		# use $i to correlate to an element in $colors rather than 5 if() statements
		$background_color = $colors[$i];

		# Get the permalink for this post
		$permalink = get_permalink($postid);

		# Use heredocs to output, to save on 1001 echo statements
		# Closing COUNT; is intentionally indented weird (see docs for why)
		echo <<<COUNT
			<li style = "width:$width;background-color:$background_color;">
				<a href = "$permalink">$title</a>
				<div class = "comment_no">$commentcount</div>
			</li>
COUNT;
    }
}

?>

</ul>

I decided to insert this code into my sidebar, however you can put it anywhere on your blog.

Add a little CSS

#most_commented a {
        color: #000;
        font-size: 14px;
}

#most_commented a:hover {
        color: #fff;
}

#most_commented li {
        position: relative;
        min-height: 40px;
        opacity: 0.9;
        margin: 0 0 -15px 0 !important;
        padding: 15px 10px 15px 10px !important;
}

#most_commented li .comment_no {
        position: absolute;
        top: 12px;
        right: -11px;
        padding: 5px;
        color: #efefef;
        background-color: #101010;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

Done! Easy as pie

Stay tuned! I plan on implementing this for most viewed posts and most tweeted/dugg posts

Step 1

Let’s get started! Boot up photoshop and create a new canvas. Set width to 550px and height to 250px. Press OK and you should have a brand spanking new canvas ready to draw your pixel perfect menu. If the canvas doesn’t have a background then go ahead and press Shift + F5 and fill the layer to white. I added a radial blur to spice mine up a bit.

Start off with a nice background

Step 2

Grab the marquee tool (M) and draw a rectangle from one side two the other. Create a new layer by pressing Ctrl + Shift + N and fill the area with any colour. Double click the newly create layer and add a gradient overlay. I chose a linear gradient with a dark and lighter shade of red. Also add a black outer stroke, and set opacity to 90ish percent (if you used different colours for your gradient overlay then you may have to lower this).

Add a background for our menu

Step 3

To add a shine to any object in photoshop is fairly simple. Hover your cursor over the thumbnail of the menu background layer whilst holding Ctrl. The cursor should change to a one with a dashed box on top of it. Left click to select the area of the menu background.Now grab the marquee tool, hold alt and draw a rectangle that covers the bottom half of the menu background. You should now just have the top section selected. Create a new layer, fill the selection with white and reduce opacity to 2%.

Add a shine

Step 4

Now onto the menu itself, select the rounded rectangle tool (U) and draw a button onto your menu background. The colour of the rectangle is up to you. I just made mine a lighter shade of red. Now to add some crisp borders. Double click on the rounded rectangle layer and add a white outer stroke and reduce opacity down to around 20%. Now add a black inner glow with the opacity set to 80% (again, play with these values until you’re satisfied). Set the choke to 100% and size to 1. I also added a gradient overlay, from dark to light red (very subtle).

Add a pixel perfect button

Step 5

To make the selected/pressed state you just add a black inner shadow with an opacity of 60%, angle of 90 degrees, distance of 3 and size of 3. Add some text with a black drop shadow, an opacity of 20%, distance of 1, spread of 100 and size of 1.

Add an inner shadow

Step 6

To make the normal state, select the area of the button using the method in step 3. With the button selected click on select from the top menu, choose modify and then contract. Contract the selection by 1px. With the gradient tool (G), select or create a gradient that starts from white with 100% opacity to white with 0% opacity. In a new layer, draw this gradient from the top to the bottom of the selection. Now contract the selection again by 1px and press the delete key. Set the layer to overlay and reduce the opacity until you are happy.

Add another pixel perfect button, this time with a shiny edge

Step 7

Repeat steps 4,5 and 6 to add more buttons to the menu and that’s it! Easy I hope you enjoyed this tutorial. If you have any queries then please feel free to leave a comment. I will try to respond as soon as possible.

Continue to add buttons for each link