Thanks to everyone for the comments, they were all great. But we did have to pick three winners, which was not easy. And to everyone that hasn’t won, all we can say is that better luck next time, and good luck with any of our future competitions.

A big thank you to Wix for giving us the opportunity to offer this great competition :)

The Winners

Congratulations to all of the winners and hopefully you would have by now received the winner confirmation email (if not, please get in touch with us).

Winner: Francis Saldivia.
Comment: He estado chequeando vuestras plataformas en flash y he visto que cuentan con mucha variedad y estilos lo cúal es muy interesante a la hora de mugrar mi sitio, me interesa WIX en español.

Winner: rondav.
Comment: i love it… – use it for clients. – use it for myself.

Winner: Ms. Nokano.
Comment: Wix is awesome!

About Wix

Wix is a free website builder tool, for quick and easy creation of quality Flash websites. Wix’s advantage is that it’s search engines friendly, allowing you to create a free website that looks great with no knowledge of coding or programing. The welcoming editor is a simple and very, very easy to use drag n’ drop tool that makes designing your site easy and fun.

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.

Billable – Seriously easy invoicing

7 Reasons for Malfunctioning Plugins (and their fixes)

An Analysis of Typography on the Web

Why Your Website is More Valuable Than Facebook

Design Kindle – Open source files for the modern web designer

How do Colors Affect Purchases?

10 Tips for Designing Presentations That Don’t Suck

Use the 80-20 Rule to Increase Your Website’s Effectiveness

Why Users Fill Out Forms Faster With Top Aligned Labels

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

Bokeh Effect in Web Design: Examples and Tutorials

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Creating an Animated 404 Page

BonBon Buttons – Sweet CSS3 buttons

Fluid Width YouTube Videos

A CSS3 Image Slider That Works in Internet Explorer

Twitter Box User Interface Design in Photoshop

Design An Angry Vector Turtle Character In Illustrator

Anonymous Pro – Free Font

Previous Weekly Design News…

Design News Roundup Archives →

It would be very hard to find a situation where Photoshop does not have the perfect solution for any web (or print) design problem. With Photoshop you can pretty much design a web page just as you envisaged mentally, with virtually no creative restrictions and with a pixel-perfect result.

Web design trends change, and they change regularly. As such, it is very important that a designer stays on top of the game and their UI designs reflect modern design demands. What was design relevant a couple of years will more than likely not be relevant now. It is the web designers responsibility to know what the current design trends are and have the necessary skills and tools to implement them in relation to the project.

In this article we have a huge collection of current web design Photoshop tutorials, that covers not only web page layouts, but also web app layouts, mobile UI and we have also included some of those tricky to design elements such as buttons, search boxes, headers and footers.

Textured Web Layout

In this tutorial you’ll be shown how to create a textured web layout, starting from the concept on paper, leading on to the Photoshop design and you will use the 960 grid to organize the layout. Also you will learn how to use layer styles to create an engraved text effect.
Textured Web Layout →

Clean Web Layout with the 960 Grid

In this tutorial, you’ll be designing a clean website layout using the 960 Grid System. You’ll see how working with this system can streamline web development workflow, and how to work with a grid system.
Clean Web Layout with the 960 Grid →

Stylish Blog Design Layout

This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
Stylish Blog Design Layout →

Music Streaming Website Design

You will learn how to create a beautiful and clean music streaming website in Photoshop In this tutorial.
Music Streaming Website Design →

Modern Portfolio Layout

Learn how to design a modern portfolio layout, utilizing techniques such as a unique lighting-effect text effect, a cool background pattern and design attractive calls to action buttons.
Modern Portfolio Layout →

Professional Portfolio Web Layout

Learn how to create a super professional portfolio web design through a number of techniques including lighting effects, blending options, and general design theory.
Professional Portfolio Web Layout →

Clean and Colorful Web Layout

In this tutorial you will be shown how to create a clean corporate layout in Photoshop.
Clean and Colorful Web Layout →

Cool and Clean Portfolio Website Layout

Walk through this tutorial to create a cool and clean portfolio website layout with Photoshop.
Cool and Clean Portfolio Website Layout →

Clean and Minimalistic Portfolio

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop.
Clean and Minimalistic Portfolio →

Professional Web 2.0 Layout

In this detailed tutorial you’re going to learn how to create a web 2.0 layout using the 960.gs.
Professional Web 2.0 Layout →

Designing a Highly-Professional Website

You will learn how to design a super-professional and very clean website for a fictional Architecture studio, attempting to reproduce the websites main objectives of the studio: elegance, simplicity, rhythm and professionalism.
Designing a Highly-Professional Website →

Clean Portfolio Layout

In this Photoshop tutorial you will be shown how to build a layout to create a website for a web designer or a small web agency.
Clean Portfolio Layout →

Designing A Membership Site

The idea for this design was to create a membership area for the software WishList Membership which is a WordPress plugin, however the design could be used for any membership site or even a blog, if you get the right coder.
Designing A Membership Site →

Apple Style Layout

In this tutorial you will be taought how to create an Apple inspired web layout.
Apple Style Layout →

Simple iPhone Application Website Layout

In this tutorial you will learn how to make a simple and clean layout for your iPhone application.
Simple iPhone Application Website Layout →

iPhone App Layout

This tutorial will guide you trough the steps of a complete and beautiful layout for an iPhone App web site. Along the way, you`ll learn how to create nice iPhone inspired effects and you`ll play a bit with some blending options and you`ll integrate some custom graphics which will beautify the layout.
iPhone App Layout →

Soft Portfolio Layout

You will learn how to create a soft portfolio template using some warm colors. This psd layout can be used not only for a portfolio, but in the same time can be used to showcase your product (an ebook, a script, a software, etc).
Soft Portfolio Layout →

Mobile App's Layout

In this tutorial you’ll be shown you how to create an apple themed mobile app layout.
Mobile App's Layout →

Joomla or Drupal Layout

Joomla or Drupal Layout →

Drupal PSD Layout

You will be shown how to easilys to create a clean business layout that can be used for any CMS you like.
Drupal PSD Layout →

Ecommerce Theme for Magento or Prestashop

In this tutorial you will be taught how to create a nice theme for an ecommerce website (Magento or Prestashop) using Photoshop. This psd template can be used to create a women clothing shop.
Ecommerce Theme for Magento or Prestashop →

Sleek WordPress Theme in Photoshop

In this tutorial you'll create a clean business layout that would be perfect for a WordPress theme, oras a portfolio layout.
Sleek WordPress Theme in Photoshop →

Create a WordPress Theme in Photoshop

You will create an WordPress theme which can be used for a personal blog, but at the same time for a variety of blogs such as business, showcase your product/services, etc.
Create a WordPress Theme in Photoshop →

Artistic Website Layout

Learn how to create a psd template that can be integrated easily with WordPress, Joomla or Drupal.
Artistic Website Layout →

Creative Blog Footer

Creative Blog Footer →

Twitter Box User Interface Design

Twitter Box User Interface Design →

Eye Popping Dialogue Boxes

Eye Popping Dialogue Boxes →

Calculator UI Tutorial

Calculator UI →

Clean and Fresh Call-to-Action Button

In this tutorial, you will be shown how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop.
Clean and Fresh Call-to-Action Button →

Creative Button Animations with Sprites

This tutorial will show you how to build creative hover animations for buttons using sprites. Part 1 of this tutorial explains the design process in Photoshop. In Part 2 we will convert it to XHTML + CSS.
Creative Button Animations with Sprites →

Noise and Textures

Adding subtle noise or texture to UI elements can look great, but what’s the best way to do it? The goal is to find the best method that maintains quality when scaled, but is also easy to implement and edit.
Noise and Textures →

Create a Slick and Clean Button

This Photoshop tutorial shows you how to create a simple and clean "Web 2.0 style" button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).
Create a Slick and Clean Button →

Clean and Sleek Buttons

Clean and Sleek Buttons →

Recreate Tabloid Style Headers

The act of news reading has largely moved from paper to screen, thanks to the internet. This doesn’t mean that newspapers are dead, its familiar aesthetics can simply take new life in modern-day newspapers: blogs and websites. Bold titles, catchy sub-headers, taglines and graphic styles yield
Recreate Tabloid Style Headers →

How to Redesign the Spendometer iPhone App

This tutorial series will demonstrate all the steps necessary for redesigning an iPhone application with Photoshop. You will learn many of the unique considerations and design patterns used when creating stand-out app interfaces.
How to Redesign the Spendometer iPhone App →

Crafting Subtle & Realistic User Interfaces

If you're trying to design a realistic-looking user interface element then you have to think about what that object would look like in the real world. What's the easiest way to do that? Look at it from the side. What would a button look like if you viewed it from the side of your monitor? Let's take a look.
Crafting Subtle & Realistic User Interfaces →

Menu Interface for a Fantasy Themed iPhone Game

In this tutorial, you’ll create a main menu interface for a fictional iPhone game. You’ll go through setting up Photoshop to accurately display target screen size, setting up a wire frame for the project, creating a background, making a logo, creating rock texture for the sidebar, and wood texture for the saved games-box and buttons.
Menu Interface for a Fantasy Themed iPhone Game →

How to Create iPhone Like Button in Photoshop

In this Tutorial you’ll learn how to create iPhone- like buttons in Photoshop. This is very simple and yet effective tutorial.
How to Create iPhone Like Button in Photoshop →

Designing The iPhone's Toggle Switch Interface Element

In this tutorial you will learn how to emulate the iPhones toggle switch in Photoshop
Designing The iPhone's Toggle Switch Interface Element →

Creating a Knob in Photoshop

A Photoshop tutorial explaining how to build a brushed aluminum knob for a graphical user interface (GUI).
Creating a Knob in Photoshop →

iPhone-Like Button in Photoshop Tutorial

Here’s a tutorial on how you can design an iPhone-like (or Apple-like, if you will) button in Photoshop. You can quickly learn how to design the button even if you don’t consider yourself very skilled in PS.
iPhone-Like Button in Photoshop Tutorial →

How to Create a Realistic iPhone

In this tutorial you are going to learn how to create a realistic iPhone image in Photoshop.The only necessary skills to get through this tutorial is the basic knowledge of how to use the most common tools in Photoshop.
How to Create a Realistic iPhone →

How to Create an iPhone Icon: Full Workflow

In this detailed tutorial you’ll be shown how to create an iPhone icon from scratch using Photoshop’s vector shapes, layer styles and masks. Starting from a hand drawn sketch you’ll proceed to create the high resolution icon for iTunes. Finally you’ll be taken through the necessary steps to re-size the icon by hand in order to create the remaining sizes for the Home Screen and Spotlight searches.
How to Create an iPhone Icon: Full Workflow →

You might also like…

40 Professional and Detailed Web Layout PSD Templates »
Android App Developers GUI Kits, Icons, Fonts and Tools »
Complete Collection of Blank T-Shirt Mockup Templates »
iPhone and iPad Development GUI Kits, Stencils and Icons »
A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
40 Detailed and High Quality Mobile Phone .psd Source Files »
50 High Quality Free Icon Sets in PSD Format »
49 Most Creative Photoshop Tutorials of 2009 »

This is our selection of our favorite web designs from the past week or so, some sites we discovered, but the most of them have been recommended by our readers.
Thanks for all your recommendations, and we hope you like this selection of sites as much as we do, feel free to comment and let us know what you think.

The DARA

Oroza

Awesome – We Add Javascript

Sam Gilbey

Supersteil

TEDxAthens

Business Development Advisory

Singleframe DESIGN

Wing Cheng

Tricycle Inc.

You might like… previous Weekly Inspirations

Weekly Web Design and Development Inspiration Archives »

Well-designed ecommerce and shopping cart websites are regularly referred to for web design inspiration by creative and experienced web developers. They are also being featured on various CSS website galleries, and in fact there are more than a few gallery sites that are solely dedicated showcasing beautiful and standards compliant shopping cart and ecommerce websites.

With the exceptional flexibility for customization of ecommerce scripts, third party tools and advanced functionality, shopping cart websites have revolutionized their look and feel and overall performance. In this post, we bring you 50+ fresh ecommerce websites that are not only beautiful but are also effective in presenting themselves as an online shop. Please go through the websites and let us know which ones are your favorites in terms of their design and usability.

Nicola Whitman

Mister Spex

GSelect

Waltzingmouse Stamps

Alexandalexa

Scarafaggio

Perfect Order

Husky CZ

The Cotswold Company

La Belle Epoque

Hydrokultúra

Ocean Sales

Rip Curl

CellarThief

Bilka

Diva

Walstick

Columbia Sportswear

New Look

Marine Layer

Harley-Davidson USA

MySoti

Baby Besos

Mama-La-Mode.com

Energie Online Store

The Well Body Store

Surf Ride Surf Shops

Madison

Foot Locker

Journeys Shoes

Fenn Wright Manson

PUMA

Flirt Catalog

Blossom Mother and Child

Build-A-Bear

Coach

Lodger Footwear

Steve & Co.

Tungsten Rings for Men

United Pixelworkers

rüsthaus

Better Closet

Kuhn's Jewelers

Perfume Point

Duffle Coats

GNC

Grana and Mau

Martha Rey

GroveMade

Snow Sport Protection

About the Author…

Rafi Md is a freelance graphic designer from India. He’s the Founder and Photoshop Freebie Creator for GraphicsFuel, a graphic design blog providing original, high quality Photoshop freebies and design resources. You can also find him on Twitter as @GraphicsFuel.

Previous parts of the Top 50 Web Design Styles Series

50 Examples of Large Photography Backgrounds within Web Design »
50 Examples of Creative 404 – Page Not Found Pages »
A Showcase of 50 Amazing Personal Blog Web Designs »
50 Creative Examples of Illustrations in Web Design »
50 Professional Web Design Agency Web Sites »
50 Bright and Vibrant Web Designs – Color Inspiration »
50 Impressive Magazine and Newspaper Styled Web Designs »
50 Inspirational and Fresh Minimally Designed Web Sites »
50 Creative and Inspirational Personal Portfolio Websites »
50 Inspiring Web Application and Service Web Site Designs »
50 Examples of Effective Uses of Typography Within Web Design »
50 Beautifully Crafted Corporate Ecommerce Web Designs »
50 Creative Examples of Vintage and Retro in Web Design »

It has been a while since we last ran a good web design book giveaway, and if you are a WordPress developer or you are currently learning WP, you will certainly love this competition. What we have on offer is the chance for two of our readers to win one of two PDF ebooks, entitled WordPress 3 Site Blueprints that usual sells for $32. It has been written by Heather R. Wallace and its a book that will show you everything you will ever need to build a varied collection of feature-rich customized WordPress websites.

This competition will run for the next 14 days, and all you have to do for a chance to win your own copy is leave a comment below telling us why you love WordPress. Winners will be chosen at random and will be notified by email. Best of luck to everyone :)

About the Book: WordPress 3 Site Blueprints

While some books merely talk about the capabilities of WordPress in general and leave you to figure out how they apply to your situation, WordPress 3 Site Blueprints takes a different approach. The first chapter will show you how to migrate from an existing static website to a WordPress blog. Each of the other chapters is devoted to the construction of a different type of site that can be created with WordPress and the right combination of themes and/or plugins. As you follow along, you will learn by doing because each of these nine chapters shows you how to build a WordPress-powered site from start to finish. That means that, by the time you reach the end of every chapter, you will have a fully-functional site online.

You can also download a sample chapter, bly clicking here: Chapter No.4 “Project 4: Building a Local Classified Ads Website”.

How to win this book

This competition will run for the next 14 days, and all you have to do for a chance to win your own copy is leave a comment below telling us Why you love WordPress. The winners will be selected at random and will be informed directly after the competition ends via email. Good luck to everyone :)

Over the years I have a saved a decent sized library of useful design and blogging related PDF ebooks, I love them. I have voraciously collected them, and all stored on my mobile for whenever the chance of quick read arises. In this post I would like to share my favorite 20 (freely available) ebooks with you.

All of the below books are have been written to be read quickly, they are neither very long nor are they the definitive resource on their specific subject. Having said that, they are all a ‘darn good read’, and well worth downloading. Some of the books may have been written a few years back, but the topics are certainly relevant now.
So if you are a web designer, graphic designer or even a blooger you are bound to find something worth reading in this round-up.

Introduction to Good Usability by Peter Pixel

This guide is especially handy if you haven’t done a lot of webdesign yet or if you are involved in webdesign but don’t do any of the real work. I hope to shed some light on some common interface elements and mistakes people often make with them.
A lot of books have been written in the past but the threshold for reading them, especially if you have never built a site, is quite big, hence this short guide. This is by no means a complete guide or solid set of rules, but it is definitely a good start.
Introduction to Good Usability →
Download the PDF →

Web Accessibility Checklist by Aaron Cannon

Written by Aaron Cannon, blind web developer and accessibility consultant.Aaron explains in his article “The Accessibility Checklist I Vowed I’d Never Write”, that the problems with a “simple checklist that, when followed, will give you an accessible site without fail.” No such checklist exists or likely ever will. He believes that this list is not the perfect solution, nor is it the only solution, but believes it is a good first step, and it gives our developers and designers a place to start from.
Web Accessibility Checklist →
Download the PDF →

CSS Systems For Writing Maintainable CSS by Natalie Downe

A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
This ebook elaborates on this concept, and also describes a number of tricks used to preempt maintainability issues.
CSS Systems For Writing Maintainable CSS →
Download the PDF →

Better CSS Font Stacks by Nathan Ford

Better CSS Font Stacks →
Download the PDF →

Faster, and More Secure Webfonts by Bram Pitoyo

Font embedding for the web is a great step in making the web look better and become more functional, but what about security and load times?
Bram Pitoyo’s ebook takes the top layer off font embedding and shows us how things work, and ultimately how to improve performance and make it more secure.
Faster, and More Secure Webfonts →
Download the PDF →

Type Classification eBook by Jacob Cass

This book has been made to help you learn the 10 broad classifications of type. These are the basic foundations of what you need to learn to learn typography and it is essential for any designer to know how to classify type. This book goes through the 10 type classifications with a brief history as well as the key characteristics of each.
Type Classification eBook →
Download the PDF →

HTML5 Quick Learning Guide by freehtml5templates.com

This guide introduces you to just the main elements of HTML5 that you’ll probably want to use right away. This guide is for those who want to get the basics figured out first, and worry about the finer details later on.
HTML5 Quick Learning Guide →
Download the PDF →

The Woork Handbook by Antonio Lupetti

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other general topics about web design.
The Woork Handbook →
Download the PDF →

Web Font User Guide by FontShop

This Web FontFont User Guide contains information aimed at web developers, system administrators and website visitors.
Section B is for web developers, showing how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server and, finally, section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.
Web Font User Guide →
Download the PDF →

Typo Tips – Seven Rules for Better Typography by Erik Spiekermann

Typo Tips – Seven Rules for Better Typography →
Download the PDF →

How to Start a Business Blog by Michael Martine

How to Start a Business Blog, by Michael Martine, is a step-by-step-guide to help you plan, set-up, and create content for a business blog.
How to Start a Business Blog →
Download the PDF →

Forty’s Pocket Guide to SEO by Forty

Pocket Guide to SEO contains everything you could want to know about SEO. Buried deep inside its pages you’ll find tips, tricks, general information about search engines, and how you can make them work for you – in a completely ethical way, of course.
Forty’s Pocket Guide to SEO →
Download the PDF →

Why design? by AIGA

The “Why design?” booklet outlines the role of design in business strategy. It seeks a common framework for why design adds value to clients’ interests. It defines the power of Designing, a larger concept that includes strategy as well as artifacts across a variety of disciplines.
Why design? →
Download the PDF →

The Design Funnel: A Manifesto for Meaningful Design by Stephen Hay

From the authour of this manifesto, Stephen Hay: "Would you like a process which would help translate the often vague, unclear wishes of your clients (and yourself, for that matter) into a clear and solid basis for your design? This manifesto will show you how."
The Design Funnel: A Manifesto for Meaningful Design →
Download the PDF →

How To Be Creative by Hugh MacLeod

Written by HughMacLeod, an advertising executive and popular blogger with a flair for the creative. He offers his 26 tried-and-true tips for being truly creative with each point being illustrated by a cartoon drawn by the author himself.
How To Be Creative →
Download the PDF →

Time Management for Creative People by Mark McGuinness

Time Management for Creative People →
Download the PDF →

Who's There? by Seth Godin

Who's There is not an ebook about how to write better or how to follow the traditional conventions about formatting and building a blog. Instead, he talks about how building a blog asset can have a spectacular impact on you, your career, your organization and your ideas.
Who's There? →
Download the PDF →

A Concise Guide to Archiving for Designers by Karin van der Heiden

AIGA worked with the Dutch Archives for Graphic Designers (NAGO) in the Netherlands to publish an English version of A Concise Guide to Archiving for Designers. The guide provides designers with the proper ways to store and describe their collections in 10 short chapters.
A Concise Guide to Archiving for Designers →
Download the PDF →

Guerrilla Freelancing by Mike Smith

Guerrilla Freelancing →
Download the PDF →

KnockKnock by Seth Godin

KnockKnock →
Download the PDF →

You might also like…

12 Useful and Free Downloadable Web Design Books »
9 More Useful and Free Downloadable Web Design Books »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »

For today’s post we have an extensive selection of UI templates, all in Illustrator format, and all perfect if you are a web, mobile or app designer who prefers to use Adobe Illustrator rather than the more commonly used Photoshop.

It was mildly surprising how difficult this post was to put together, I really did expect to find a lot more. What is clear from this is that generally most designers would not even consider Illustrator for UI design, which was an even bigger surprise. So, if you are a UI designer who does prefer Illustrator over everything else, then you may consider this post as your treasure chest.

iPad Wireframe Template (.eps)

License: This file must not be hosted on any other site but you are free to use it.

iPad Vector GUI Elements (.ai)

iPhone Sketch-Like Elements (.ai)

iPhone UI Vector Elements (.ai)

Illustrator Template for iPhone Design (.ai)

Creative Commons Attribution 3.0 Unported License”>

iPhone 4 Vector Template (.ai & .eps)

Creative Commons Attribution-Share Alike 3.0 United States License”>

Touch Notation (.ai)

Creative Commons Attribution-ShareAlike license”>

Nokia S60 Wireframing Stencils (.ai)

Windows Phone 7 Design Template (.ai)

Gesturecons – Multi-Touch Icons (.ai & .eps)

License: Commercial license costs $100, you can download it freely for wireframing (Creative Commons License).

iOS Icon Template for Illustrator CS5 (.ai)

User Interface Design Framework – Huge GUI Elements Library (.ai)

License: This framework is released as a complete web designer kit for free, even for commercial use. Your only requirement is a link back.

Sketchy Illustrator Wireframes (.ai)

Sketching & Wireframing Kit (.ai & .eps)

Yahoo Design Stencils

Browser Screens and Website Elements (.ai & .eps)

Wireframe Symbols (.ai)

Template for Blueprint CSS Comps (.ai)

960 Grid System Illustrator Template (.ai)

Symbol Signs (.eps)

Liquidicity – 165 Vector Icons, in 5 Colours (.ai)

135 Free Vector Icons (.ai)

The Graphs 2 (.ai)

Pie Charts in Illustrator (.ai)

Website Template (.ai)

Web Elements Vector (.eps)

Creative Commons Attribution-Share Alike 3.0 Unported License

Vector Web Page Elements (.ai & .eps)

Vector Glass Buttons and Bars (.ai & .eps)

Web Application Storyboards (.ai)

Divine Proportion Template (.ai & .eps)

The divine proportion, also called the Fibonacci Sequence, golden mean or golden spiral, has been used by master architects and sculptures for thousands of years.
You can use this as a template for your layouts or illustrations to create a visually pleasing design. If you are designing a website, this Golden Ratio Calculator can help determine column widths.

You might also like…

20 Free Web UI Element Kits and Stencils →
A Useful Selection of Android Developer Tools and Resources →
25 Awesome Adobe Fireworks Resources for Web and App Developers →
Android App Developers GUI Kits, Icons, Fonts and Tools →
iPhone and iPad Development GUI Kits, Stencils and Icons →
10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
25 UI Inspiration and Design Pattern Resources →

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.

The New Digg

Periodic Table of the Elements – Josh Duck

Why working at home is both awesome and horrible – The Oatmeal

For The Record

45 Free Applications For Designers And Developers – Noupe Design Blog

12 Standard Screen Patterns

10 Useful Frameworks To Develop HTML-Based Webapps for Touch Devices

55 Excellent Examples of Websites Using HTML5

20 Very Useful Comment Page Hacks for WordPess Users

Lifehacker Pack for Android: Our List of the Best Android Apps

Getting to Work with CSS3 Power Tools

Toucan CSS reset

Smoothie Charts

jQuery Html5form

WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface

How To Create A Google Android 3D Logo in Photoshop

TL Tweets – Free WordPress Tweet Archive Theme

Dynamic Bokeh styles for Adobe Fireworks

Dragnet website wireframes kit for Adobe Fireworks

Freebies: Facebook, Twitter & RSS Feed Icons

Previous Weekly Design News…

Design News Roundup Archives →

In this CSS (2 & 3) round-up article we have focused on highlighting as many varied techniques covering as many aspects of web, mobile and application development as possible. And believe me, it wasn’t easy!
Due to CSS3s current popularity, the volume of new tutorials and fresh ideas has jumped skywards. We simply could not highlight all of the articles and tutorials, there were far too many! What we have done is filtered the round-up down to our favorite 50 tutorials, resources and tools from recent months.

There is nothing more refreshing and stimulating than some fresh CSS techniques and tutorials…

Coding a Stylish Blog Design Layout in HTML & CSS

In this in-depth tut, from Chris Spooner, you will learn how to take a blog layout that has been firstly designed in Photoshop and then take it and convert it to CSS & HTML.
Coding a Stylish Blog Design Layout in HTML & CSS →
Demo →

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images →
Demo →

Create Animated Price Grid Using CSS3

In this tutorial you will learn how to build an animated Price Grid using CSS3 only. No jQuery, no images and with no Flash.
Create Animated Price Grid Using CSS3 →
Demo →

Create a Vibrant Digital Poster Design with CSS3

Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
Create a Vibrant Digital Poster Design with CSS3 →
Demo →

How To Develop CSS3 Border Radius Tool

In this article you will be walked through the process of how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the device is rotated between horizontal and portrait modes.
How To Develop CSS3 Border Radius Tool →
Demo →

Getting Started With (and Gotchas of) CSS Media Queries

In this article you will be shown how to adapt your web app to look and feel more like a native application that makes use of CSS media queries to change the layout when the mobile device is rotated between horizontal and portrait modes.
Getting Started With (and Gotchas of) CSS Media Queries →
Demo →

Bulletproof CSS3 Media Queries

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets .
Bulletproof CSS3 Media Queries →
Demo →

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

In this article, with a few CSS rules, you will learn how to create an iPhone version of your site using CSS3, that will work now. You’ll have a look at a very simple example and it discusses the process of adding a small screen device stylesheet to a site to show how easily you can add stylesheets for mobile devices to existing websites.
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website →

Mastering the 960 Grid System

In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. By the end of this article, you’ll be able to convert your designs to HTML and CSS in no time at all.
Mastering the 960 Grid System →

Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property.
Pure CSS Reflections →
Demo →

How To Beat Form Spam With Just CSS

In this article the authour shares his method for beating spam bots that he has been using for nearly 3 years and works consistently. It’s been incredibly effective, doesn’t carry the usability issues and implementation hassles of something like CAPTCHA, and uses nothing more than a bit of CSS!
How To Beat Form Spam With Just CSS →

4 Ideas For Styling Link Hovers With CSS

Usually you’ll see an underline, or an underline removed, or a different color. But there are many ways to show people that they can click and in this article the author shares his favorites.
4 Ideas For Styling Link Hovers With CSS →

The CSS white-space Property Explained

This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used.
The CSS white-space Property Explained →

Sexy Tooltips with Just CSS

Sexy Tooltips with Just CSS →
Demo →

Getting to Work with CSS3 Power Tools

CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.
Getting to Work with CSS3 Power Tools →

Word-Wrap: A CSS3 Property That Works in Every Browser

Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.
The property I’m talking about is the CSS3 word-wrap property, and believe it or not, it works in every single browser, including all versions of IE. In fact, it was even supported as far back as IE5.
Word-Wrap: A CSS3 Property That Works in Every Browser →

Subtle CSS3 Typography that you’d Swear was Made in Photoshop (Video)

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!
Subtle CSS3 Typography that you’d Swear was Made in Photoshop (Video) →

Sleek Card Pockets using CSS Only

In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.
Sleek Card Pockets using CSS Only →
Demo →

Animated Wicked CSS3 3d Bar Chart

Animated Wicked CSS3 3d Bar Chart →
Demo →

Start Experimenting With CSS3 Keyframe Animations

Start Experimenting With CSS3 Keyframe Animations →
Demo →

Animated Sprites with CSS3 Transitions

This technique is not really anything new, it just combines two concepts (sprites and animations) that most CSS developers should be fairly well familiar with by now. Combining the two methods, you can create a simple animated rollover effect with endless possibilities.
Animated Sprites with CSS3 Transitions →
Demo →

Super Cool CSS Flip Effect with Webkit Animation

In this article you will take a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.
Super Cool CSS Flip Effect with Webkit Animation →
Demo →

Create A Clean and Stylish CSS3 Contact Form

Building stylish contact forms typically requires the use of images (and maybe some JavaScript) to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish.
Create A Clean and Stylish CSS3 Contact Form →
Demo →

iPhone Style Checkboxes With CSS3

Here’s some form input checkboxes styled with CSS3 to look like iPhone style on/off buttons. There’s some -webkit- animations for Chrome and Safari. The clever bit is using the label to switch the checkbox off and on using the ‘for’ attribute whick targets the ‘id’ of the checkbox.
iPhone Style Checkboxes With CSS3 →
Demo →

Form Design with CSS3

Form Design with CSS3 →
Demo →

Menu, Navigation & Button CSS Tutorials

Fun Animated Navigation Menu with Pure CSS

CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. In this tutorial you’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions.
Fun Animated Navigation Menu with Pure CSS →
Demo →

iPhone “slide to unlock” Text in WebKit/CSS3

If you made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, you could make the iPhone/iPad’s slide to unlock screen with no images at all.
iPhone “slide to unlock” Text in WebKit/CSS3 →
Demo →

CSS3 Flying Menu

In this tutorial you will learn how to create a simple menu that has a flying effect when the user hovers over them using only CSS.
CSS3 Flying Menu →
Demo →

Fading Button Background Images With CSS3 Transitions

CSS3 transitions with another CSS3 property, RGBa, will allows y to animate an element’s opacity without affecting contained elements.
Fading Button Background Images With CSS3 Transitions →
Demo →

Simple CSS3 Dropdown Menu

Simple CSS3 Dropdown Menu →
Demo →

Popout Details on Hover w/ CSS

Popout Details on Hover w/ CSS →
Demo →

Styling Pretty Buttons with only CSS3

What you will be showing here, is how you can use some CSS3 properties to create lightweight, good looking buttons. The code will be very easy to adjust, will have complete flexiblity, so the buttons can be any size, ratio, color, font and you only need to edit the CSS file.
Styling Pretty Buttons with only CSS3 →
Demo →

Pure CSS Collapsible Tree Menu

In this tut you will learn how to build a collapsible tree menu using only CSS.
Pure CSS Collapsible Tree Menu →
Demo →

CSS3 Minimalistic Navigation Menu

In this tutorial you will be making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
CSS3 Minimalistic Navigation Menu →
Demo →

Images Effects & Galleries

Fancy Inset CSS Image Borders

In this article you will be exploring how to add a nice, styled, inset double border to any image. This effect works in all modern browsers and degrades gracefully for Internet Explorer.
Fancy Inset CSS Image Borders →

Fancy Image Hover Using CSS3

Here you will learn how to create a fancy image hover effect with CSS3 that is typically achieved with jQuery, but now using the transform and the transition properties you can have the same effect.
Fancy Image Hover Using CSS3 →

Pure CSS Sliding Image Gallery

The idea of this image gallery is to get one image to slide in while the current image slides out. There’s a lot of z-index going on as well so the new image always appears to be at the top.
Pure CSS Sliding Image Gallery →
Demo →

CSS Border Tricks – Pressed, Beveled, Shadows, Intented Borders

The author shares some simple border style tricks to get various effects for your next project.
CSS Border Tricks – Pressed, Beveled, Shadows, Intented Borders →
Demo →

Semantic CSS3 Lightboxes

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.
Semantic CSS3 Lightboxes →
Demo →

Fresh CSS Tools & Resources

Primary CSS

Primary is a simple open-source CSS Framework, designed for Developers and Designers in order to make using CSS as easy as possible.
Primary CSS →

CSS3 PIE

CSS3 Pie is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features.
CSS3 PIE →

IE-CSS3 – CSS3 Support in IE 6, 7, and 8

IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.
IE-CSS3 – CSS3 Support in IE 6, 7, and 8 →

Gridulator

Gridulator →

Toucan CSS Reset

Toucan CSS Reset is a reset stylesheet, unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.
Toucan CSS Reset →

CSS Reset – a simpler option

CSS Reset – a simpler option →

HTML5 Readiness

The idea of this visualization is to show how much support exists for each new HTML/CSS feature. It shows support for 8 browsers (IE 7, 8, 9, Opera 10.10, Safari 4, Chrome 4, Firefox 3.5, and Firefox 3.7). The browsers are grouped into color schemes based on their underlying rendering engine – e.g. all Firefox versions are shades of blue, Chrome/Safari – yellow, IE – pink. Each ray also has a different background color if it is a CSS3 feature.
HTML5 Readiness →

FontFonter

FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.
FontFonter →

Typedsgn

Typedsgn.com is a website to showcase the natural curiosities of typography on the web using the most advanced coding techniques via CSS3, HTML5, @font-face and other markup languages.
Typedsgn →

Font Dragr

Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts onto the page and it will be added to the font list. The last font dropped will change the font-family of the pages text and the title.
Font Dragr →

ColorBlendy

Ever fire up Photoshop just to multiply a couple of colors? No more. Blend colors with different modes like multiply, overlay, dodge, within the convenience of your browser.
ColorBlendy →

CSS3 Button Maker

To use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name “button” on HTML elements to make them look like buttons.
CSS3 Button Maker →

CSS3.0 Maker

CSS3.0 Maker →

CSS3 Click Chart

Each example on the CSS3 Click Chart, visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart →

CSS3 Watch

CSS3 Watch is fantastic resource for everything CSS3 related. You will find tutorials, concepts and plenty of inspiration.
CSS3 Watch →

You might also like…

50 Awesome New jQuery Plugins →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →