Line25

Line25 Sites of the Week for May 18th 2012

Chris Spooner — Fri, 18 May 2012 07:00:27 +0000

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Iris, Vimeo, Anthm, Little Red Letter and Olly Sorsby.

Showcase of Artistic Hand Lettering in Web Design

Chris Spooner — Mon, 14 May 2012 07:00:27 +0000

With websites being built from digital code it’s difficult to imagine them being crafted by hand, but this post showcases a bunch of websites that feature custom hand lettering in traditional mediums. In place of fonts these websites boast hand crafted typography to add a real artistic touch to the design.

G’nosh

Austin Eastciders

The Soup Peddler

Kansas City CreepFest

GiveBeyond.Me

Whitmans

Kyle Steed

Kolonien

Odosketch

Marie Catribs

Amazee Labs

Let’s Do This!

War Child

ConvergeSE 2012

Full Frontal 2011

Making Connections Everyday

Brand New Conference

Line25 Sites of the Week for May 11th 2012

Chris Spooner — Fri, 11 May 2012 07:00:54 +0000

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Guided Creative, Peaxl, Rdio, DS22 and Column Five.

Guided Creative

View the website

Peaxl

View the website

Rdio

View the website

DS22

View the website

Column Five

View the website

Handy Roundup of CSS3 Generators and Tools

Chris Spooner — Mon, 07 May 2012 07:00:30 +0000

With the latest advances in CSS3 many of the effects that were once only achievable in Photoshop can now be replicated in CSS code, but it’s sometimes difficult to visualise the appearance of these effects when staring at a few lines of syntax. This is where CSS generators come in handy, this roundup of tools makes it easy to create the exact CSS effects you need with the help of graphical interfaces.

CSS3 Generator

CSS 3.0 Maker

CSS3 Sandbox

CSS Layout Generator

Variable Grid System

Blueprinter

The 1KB CSS Grid

Gridinator

Grid Designer

Ultimate CSS Gradient Generator

CSS3 Gradient Generator

CSS Gradient Generator

CSS3 Generator

CSS Button Generator

Button Maker

CSS Type Set

Typetester

Text Shadow Generator

3D CSS Text Generator

CSS Sprite Generator

CSS Sprites

Ceaser

Border Image Generator

CSS Border Radius Generator

Line25 Sites of the Week for May 4th 2012

Chris Spooner — Fri, 04 May 2012 07:00:05 +0000

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from dConstruct, Lore, Lifetree Creative, redpepper and Elaine Fisher.

dConstruct

View the website

Lore

View the website

Lifetree Creative

View the website

redpepper

View the website

Elaine Fisher

View the website

20 Pure Websites with Clean White Backgrounds

Chris Spooner — Mon, 30 Apr 2012 07:00:07 +0000

Whenever we start work designing a website one of the first things we always do is throw a bunch of colours and textures onto the canvas, but sometimes a design will benefit from the clean and crisp appearance of a pure white background. This showcase rounds up 20 minimal website designs that prove that sometimes less is more.

Information Architects

Color Grade It

Face. Works.

MmDesign

The Manual

Andy Mangold

Casey Britt

Kyan

What Happens Next?

La Wine Agency

New Gotham Designs

Big Bite Creative

Wantful

Helen & Hard

Yaron Schoen

b14

Eric Paul Snowden

Whitespace

Hanzell Vineyards

Decorated Playlists

Line25 Sites of the Week for April 27th 2012

Chris Spooner — Fri, 27 Apr 2012 07:00:53 +0000

Ghost Horses

View the website

FO

View the website

Saismo

View the website

Bundlr

View the website

Pocket

View the website

Build a Basic Dribbble Fed Portfolio Website (Part 2/2)

Chris Spooner — Mon, 23 Apr 2012 07:00:56 +0000

Continue this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this second and final part of the series we’ll go through the process of building the Photoshop concept into a working HTML/CSS web page then add the jQuery plugins to pull in our Dribbble portfolio shots.

If you missed last week’s tutorial, this is the simple portfolio website design we’re working on. Last time we finished off mocking up the design in Photoshop, so now let’s get our hands dirty with some HTML and CSS coding.

View part one of the portfolio build tutorial

View the Dribbble portfolio website demo

So the first step towards building the fully working portfolio webpage is to export a few images from the concept. With new CSS3 properties many of the effects can be replicated in code, but we’ll still need images such as a repeating background texture.

The logo is another image that will need saving for web. Toggle off the background layer to copy in the transparency, then export this image as a PNG-24 file.

This design only needs three individual images. Thanks to the integration with Dribbble all the portfolio piece thumbnails are hosted elsewhere.





Chris Spooner's Portfolio

The HTML page can then be started with a basic structure of Doctype and head section containing the page title, stylesheet link and Google Web Font’s stylesheet for the Droid Serif font we used in the concept. A generic container div is then added to house the centrally aligned content.



Hello, I'm Chris Spooner

This is my super awesome self-updating Dribbble fed design portfolio

We can then begin copying the content from the concept into the HTML document, semantically choosing the best HTML elements for the job. The age-old “logo isn’t a H1″ debate tells us the best semantic use for the

element is an introductory heading, which leaves the logo in a plain tag. The concept shows different sizes of text in the intro sentence. These could be included in separate H1 & H2 tags, but the sentence reads better as one element, so tags can be used to provide a CSS hook instead.

The jQuery functionality to fetch the Dribbble shots will be saved for later, but for now an empty

About me.

I'm a creative designer, avid blogger and I'm generally crazy about pretty colours and shapes. As well as sharing tips & tricks through design tutorials I also enjoy creating Call of Duty and Battlefield guides on my YouTube gaming channel.

Get in touch.

If you would like to talk, you can contact me by email.
Give it a try, I hear it’s all the rage these days!

The next title moves on to a

heading, then despite the “About Me” text being visually the same size as the H1 text in the concept, semantically it fits better in paragraph tags. CSS will be used to alter the appearance of each element to match the concept later.
A simple form is then laid out with labels, inputs and textareas. The for="" attribute adds an extra touch of usability pairs each label with its corresponding input. In the concept the textarea message box doesn’t have a label, but we should still include one in the HTML. We can simply remove it visually using CSS later.

When we view the unstyled HTML in a browser it all appears perfectly legible thanks to the semantic choices we made with our code. Even though it’s not too pretty it still features the correct hierarchy between the elements.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f2f0ed url(images/bg.png);
	font-family: "Droid Serif", Georgia, Serif;
	font-size: 24px; line-height: 48px; text-align: center;
	color: #565656;
}

#container {
	width: 820px; margin: 50px auto; padding: 10px;
	overflow: hidden;
}

With the HTML in place it can be styled up to match the concept with CSS, but first the stylesheet needs setting up with the basics. A simple reset removes any default browser styling, then the body is set up with the texture background image. The global font styling is set up to use the Droid Serif typeface, with a basic size of 24px, line-height of 48px and the grey #565656 colour.
The width of the content area in the concept comes in at 820px, which is added to the container div. It’s then centrered up using margin: 50px auto;.

img#logo {
	display: block; margin: 0 auto 50px auto;
}

h1 {
	font-size: 30px; font-weight: normal; margin: 0 0 30px 0;
}

h1 span {
	font-size: 24px;
}

h2 {
	font-weight: normal; clear: both;
}

p {
	margin: 0 0 50px 0;
}

a {
	color: #a65555;
}
	a:hover {
		color: #792626;
	}

Working from top to bottom the content can then be styled up to match the concept. The logo image is centered and given 50px bottom margin, then the various font sizes are set on the headers. Headers by default are bold, so the font-weight: normal; declaration helps reset this.

label {
	float: left; margin: 0 15px 30px 0;
}
	label[for=email] {
		margin: 0 15px 0 20px;
	}
	label[for=message] {
		display: none;
	}

We’ll skip the portfolio section for now and return to it once the jQuery code is in place, so next up is the contact form. CSS attribute selectors can be used to target specific labels in order to adjust the margin on the Email label and hide the Message label.

input {
	width: 274px; height: 44px; padding: 3px 15px 0 10px;
	float: left;
	background: #f9f9f9; border: 1px solid #dedede;
	box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	font: 20px "Droid Serif", Georgia, Serif; color: #7d7d7d;
}

textarea {
	width: 788px; height: 210px; padding: 15px; margin: 0 0 20px 0;
	background: #f9f9f9; border: 1px solid #dedede;
	box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
	font: 20px "Droid Serif", Georgia, Serif; color: #7d7d7d;
}

The input and textarea elements can then be styled up according to the concept. The original design of the form fields is quite visual with the inner shadow and border effects, but they can all be replicated with CSS, using properties such as box-shadow for the inner shadow effect.

input:focus, textarea:focus {
	background: #fff; border: 1px solid #c6c6c6;
}

input#submit {
	width: 136px; height: 57px; float: right; clear: both; cursor: pointer;
	background: #585858 url(images/btn-bg.png); border: none;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
	font-size: 30px; color: #f9f9f9;
	text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
	-moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
	-webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
}

To aid usability, styling for the :focus state is added to change the colour of the form fields to white (as opposed to the slightly off-white) and the border made slightly darker when the fields are active. A range of declarations then set up the input with the ID of submit to match the concept by using the dark grey background texture image, resetting the width & height and adding various CSS shading effects on the button and text.

Now the CSS is in place it’s about time we set up this Dribbble integration. Dribbble does offer an API, but for those like me who aren’t too hot with their PHP it can be a little daunting. Thankfully there’s jQuery plugins such as Jribbble that also do the job and are much easier to set up. The jQuery library, the Jribbble plugin and a blank Javascript file are added to the head of the HTML file.

$(document).ready(function () {
	$.jribbble.getShotsByPlayerId('chrisspooner', function (playerShots) {
	    var html = [];

	    $.each(playerShots.shots, function (i, shot) {
	        html.push('');
	        html.push('');
	    });

	    $('#portfolio').html(html.join(''));
	}, {page: 1, per_page: 12});
});

Sample Javascript code from the Jribbble readme can be used as a base for the code to activate the Jribbble plugin in our scripts file. The sample code pulls in a list of a player’s shots and includes the title as a H3 element. Some adjustment to the html.push lines removes the heading to leave a linked thumbnail image in each

item. The code set in the variable is then injected into the UL element with the ID of portfolio in our HTML.

ul#portfolio {
	width: 720px; margin: 0 auto 50px auto;
	list-style: none; overflow: hidden;
}
	ul#portfolio li {
		float: left; margin: 20px;
	}
		ul#portfolio a {
			display: block; width: 200px; height: 150px;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		}
			ul#portfolio a:hover {
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		}

Testing the webpage in a browser shows the Dribbble shots being pulled into the page, but they’re currently being added as unstyled list elements. The final few CSS declarations float the LI items side by side and a touch of box-shadow creates a shadow effect that increases on hover.

This leaves our little portfolio website project complete as a fully working webpage that automatically updates itself with Dribbble shots. Check out the demo to see it in action.

View the Dribbble portfolio website demo

Line25 Sites of the Week for April 20th 2012

Chris Spooner — Fri, 20 Apr 2012 07:00:52 +0000

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from ShopLocket, Paper, Face Fun, Leaflet and CSS Igniter.

ShopLocket

View the website

Paper

View the website

Face Fun

View the website

Leaflet

View the website

CSS Igniter

View the website

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Chris Spooner — Mon, 16 Apr 2012 07:00:14 +0000

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

Line25

Line25 Sites of the Week for May 18th 2012

Showcase of Artistic Hand Lettering in Web Design

Line25 Sites of the Week for May 11th 2012

Handy Roundup of CSS3 Generators and Tools

All in One CSS3 Generators

CSS Layouts and Grids

CSS3 Gradient Generators

CSS Button Generators

CSS Text Editors

CSS Sprite Generators

Misc

Line25 Sites of the Week for May 4th 2012

20 Pure Websites with Clean White Backgrounds

Line25 Sites of the Week for April 27th 2012

Build a Basic Dribbble Fed Portfolio Website (Part 2/2)

Hello, I'm Chris Spooner This is my super awesome self-updating Dribbble fed design portfolio

About me.

Get in touch.

Line25 Sites of the Week for April 20th 2012

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Hello, I'm Chris Spooner
This is my super awesome self-updating Dribbble fed design portfolio