Weekly Design News – Resources, Tutorials and Freebies (N.57)

This is our weekly column in which we share our favorites posts, articles and resources with our readers all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites

Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites
These techniques will allow you to better display difficult content, help users find information more effectively and provide meaningful UI cues without overwhelming the user.
Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites →

Designing for iPhone 4′s Retina Display: What I’ve Learned

Designing for iPhone 4's Retina Display: What I’ve Learned
With the introduction of the iPhone 4 and it’s new retina display, the process of designing for iDevices became a bit more complicated. In addition to creating designs for the standard resolution screens of the iPhone, iPod, and iPad, we must now create a higher resolution version for the iPhone 4. To help make things a bit easier, this post lists the most important things the author has learned from his first venture into designing for the retina display.
Designing for iPhone 4′s Retina Display: What I’ve Learned →

The Darwinian Evolution of Photoshop [Infographic]

The Darwinian Evolution of Photoshop [Infographic]
The Darwinian Evolution of Photoshop [Infographic] →

How To Create a Stylish Content Slider using CSS3 & jQuery

How To Create a Stylish Content Slider using CSS3 & jQuery
Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. In this tut you’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.
How To Create a Stylish Content Slider using CSS3 & jQuery →
View the Demo →

Collection of CSS3 Buttons

Collection of CSS3 Buttons
This is a collection of buttons that show what is possible using CSS3 and other advanced techniques. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button.
Collection of CSS3 Buttons →
View the Demo →

New Digg Style Follow Unfollow Application Using jQuery and PHP

New Digg Style Follow Unfollow Application Using jQuery and PHP
New Digg Style Follow Unfollow Application Using jQuery and PHP →
View the Demo →

Creating an Interactive Travel Map using the Google Maps API

Creating an Interactive Travel Map using the Google Maps API
In this tutorial you will be shown how to use some of Google Maps' cool features and building an interactive travel map. Everyone will be able to add new locations on the map and view the locations added by others. You will also be using MySQL databases to store the values of different locations so let’s get started.
Creating an Interactive Travel Map using the Google Maps API →
View the Demo →

CSS3 Border Images for Beautiful, Flexible Boxes

CSS3 Border Images for Beautiful, Flexible Boxes
One CSS3 property that’s been overlooked is the border-image property. The irony here is that what makes this property so useful, is exactly what makes it extremely confusing.
CSS3 Border Images for Beautiful, Flexible Boxes →

Free 960.GS CSS Photography Template and Tutorial

Free 960.GS CSS Photography Template and Tutorial
On offer here is free single-page template, fully coded using the 960.gs. The template has a few nifty CSS3 effects and uses @font-face to implement some beautiful custom typography.
Free 960.GS CSS Photography Template and Tutorial”>
View the Demo →

Pure CSS Progress Bar

Pure CSS Progress Bar
Pure CSS Progress Bar →

Custom Tweet Button for WordPress

Custom Tweet Button for WordPress
How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter.
Custom Tweet Button for WordPress →

Are CSS Frameworks Evil?

Are CSS Frameworks Evil?
CSS frameworks have a tendency to be dismissed by many CSS authors; code bloat and non-semantic class names are usually at the top of the list of reasons why. Even without ever using one, I shared the same opinion, but that might have changed after trying a few of them out while doing some research recently…
Are CSS Frameworks Evil? →

jQuery Ajaxy

jQuery Ajaxy
jQuery Ajaxy allows you to easily upgrade your web site into a full featured Ajax web application. It aims at solving complicated AJAX Paradigms by providing you with a easy managed solution to bind into page state (URL Hash) changes, AJAX form submits, and support AJAX links.
jQuery Ajaxy →
View the Demo →

jQuery Webcam Plugin

This plugin provides three different modes to access a webcam through a small API directly with JavaScript – or more precisely jQuery. Thus, it is possible to bring the image on a Canvas (callback mode), to store the image on the server (save mode) and to stream the live image of the Flash element on a Canvas (stream mode).
jQuery Webcam Plugin →
View the Demo →

Formstack WordPress Plugin

Formstack WordPress Plugin
The Formstack Web Form plug-in for WordPress makes embedding your Formstack forms as easy as clicking a button. All you need is a Formstack account and the plugin.
The Formstack widget allows you to embed Formstack web forms into your sidebar. The widget automatically optimizes the web form's CSS so that your online form will fit and look great in the sidebar.
Formstack WordPress Plugin →

Create a Photo Realistic iPhone in Photoshop

Create a Photo Realistic iPhone in Photoshop
This tutorial will show you how to create a photo realistic image of Apple’s newly released iPhone4. Hopefully, by the end of it you will have something extremely close to the real thing, which for the few who don’t own the iPhone4 (like me), may be as close as we’ll ever get.
Create a Photo Realistic iPhone in Photoshop →

Create Beautiful Surreal Photo Effect

Create Beautiful Surreal Photo Effect
In this tutorial, you will be shown how you can create a Beautiful Surreal Photo Effect via Cloud, Star and Vexel Hair in Photoshop. This is an intermediate level tutorial so some steps may be tricky.
Create Beautiful Surreal Photo Effect →

Create Colorful Lighting Burst Text Effects Photoshop Tutorial

Create Colorful Lighting Burst Text Effects Photoshop Tutorial
In this Photoshop tutorial, you’re going to see how to create a light burst text effect using some very simple techniques.
Create Colorful Lighting Burst Text Effects Photoshop Tutorial →

Google New

Google New
Google New →

18 Amazing Examples Steampunk Cities Illustrations

18 Amazing Examples Steampunk Cities Illustrations
Steampunk is a fairly recent trend of art. Combining elements of Industrial Revolution, science fiction, and setting itself as an “alternate universe”. Steampunk technology can be described as “old science fiction”. Where else can you find a giant futuristic machine powered by steam? Steampunk art usually follows certain guidelines, but allows ample room for creativity.
18 Amazing Examples Steampunk Cities Illustrations →

2400 Flag Icon Set from Liquidcity.com

2400 Flag Icon Set
2400 Flag Icon Set from Liquidcity.com →

Previous Weekly Design News…

Design News Roundup Archives →

Author: (945 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments