Line25

Line25 Sites of the Week for May 25th 2012

Chris Spooner — Fri, 25 May 2012 07:00:34 +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 Finch, Google Ventures, Andy Chak, Loft Resumes and A Student’s Guide to Web Design.

20 Creative Examples of Intro Videos in Web Design

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

Remember when websites used to feature Flash intro videos as part of a splash page? These days video use in Web Design is much more creative (and UX friendly!) with many sites using video to provide an introduction or a tour of their product or service. This post rounds up 20 great examples of video intro use in modern web design, with these designs using video as embedded objects or as lightbox style popups with the help of Javascript.

Vimeo

Sevenly

Nest

Paper

Pocket

Letter Learner

Anthm

GoPro

Things for iPad

FiftyThree

La Bubbly

iA Writer

Sir John A Day

St. John’s University

Visit Norway

Project Re:Brief

Starved for Attention

Union State Neighborhood

Social Design House

Sony Make.Believe

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.

Iris

View the website

Vimeo

View the website

Anthm

View the website

Little Red Letter

View the website

Olly Sorsby

View the website

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

Line25 Sites of the Week for May 25th 2012

20 Creative Examples of Intro Videos in Web Design

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.

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