Design Shack — Web Design Gallery, Articles & Community

Best of 2008 – Typography

Typography is beginning to come to the fore as one of the most crucial elements of web design as people start to understand its importance. There’s no doubt that if you perfect the size, style and position of type on your page, the rest of the design will flow much easier.

In part one of our 2008 roundup, we saw some of the most useful graphic design tutorials of the year. This second section will walk you through a selection of the best typography related resources and articles of 2008 – tutorials, downloads, fonts, and everything you need to perfect the use of type in your design.

Best of 2008 – Graphic Design Tutorials

As we arrive at the last month of yet another year, it’s time we revise and reflect on all the goodies this year had to offer. At the same time  it’s great to practice the tips and lessons learnt for the years to come!  We have brought together a series of what we feel are some of the best tutorials of 2008 from around the web.

We’re starting off with the most useful graphic design tutorials of the past year. In no particular order, read on to see 33 that have stood out in particular.

Creating Fading Site Dividers

You might have seen these fading dividers/separators on various sites, which seem to fade both horizontally and vertically. Here is an example of what I mean:

They provide a great way to split content up, doing so in a subtle and non-intrusive manner. I would like to share a simple way to create these fading dividers using Photoshop.

Pirobox jQuery Lightbox

Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages.

I’m pleased to announce that today, in partnership with Pirolab, there’s a new jQuery lightbox script available. It has been designed and created by Diego Valobra. If you’d like to read more about the features and download the lightbox script, click through to read on.

Design Forums

I just thought I’d take a moment to mention a new designer forum which launched recently. Design Forums has had a really successful first month, with over 180 members and some 1500 posts. I’m not generally a huge forum fan, preferring to frequent design sites and blogs which have better ‘crafted’ content and articles. That said, I’ve read a few very well thought out posts with some excellent discussion over the past month.

It’s a UK based site, which means that it may not be perfectly suited to US readers (though to be perfectly honest, most of the content is very general).

Take a look and do let me know your thoughts. Are there any other design forums which you frequent regularly?

Simple Hover CSS Menu

Our partner site, 13 Styles has just released a new CSS menu called “Simple Hover“. It is, as the name suggests, a simple affair, with a link description appearing when hovered over.

The menu is completely free to download, use and customize, contains no images (it’s all CSS) and should work in any browser or operating system you use.

Please let me know if you find any problems or would like to contribute a menu in the future.

Visit

Announcing Design Top 10

A project we have been working on for a while launches today – Design Top 10. The site will be updated every month, featuring the best website designs, tutorials and resources published in that period. Hopefully it will grow into a great place to find inspiration and keep up to date with the best content produced online.

The design stems from a notebook style layout, as the site is a ‘scrapbook’ of discoveries and inspiration on a monthly basis. I feel that it fits the profile of the site well and I’m really happy with it.

Please take a look at the site and, if you find it appealing, write a post about it or drop me a comment – I’d love to hear what you think. I hope you find Design Top 10 a useful source of inspiration!

Visit Design Top 10 Subscribe

Creating a jQuery Dashboard

The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.

Before getting started, you may like to check out the demo, or download full source code here.

3D Spiral Winners

Thank you to all who participated in our 3D Spiral giveaway. We have randomly selected three winners, who are:

• Joseph Engo
• Julio Chacon
• Myriam

Congratulations! We have contacted each of you with information on how to claim your free copy of the 3D Spiral flash component.

To be notified whenever we give away new products and freebies, click below to subscribe:

RSS Feed Twitter

Creating a Virtual jQuery Keyboard

For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.