Design Shack — Web Design Gallery, Articles & Community

Win a Year of Free Hosting

We’re pleased to announce a new competition on Design Shack, in partnership with UK2. Four hosting packages are up for grabs with a total value of over $450. One “business” and three “home” hosting packages are being given away. Each is completely free for one year, comes with one (or more) free domain names and would make a fantastic home for your site.

Please read on to find out more about the prizes along with how to enter. Be sure to use a valid email address so that we can contact you if you are a winner!

Prizes & Conditions

Top Prize: A 1 year business web hosting package. Includes free setup, 3 free domain names, £30 Google AdWords voucher, SSH, 100GB disk space and 1000GB bandwidth.

Runner Up Prizes (3): A 1 year home web hosting package. Includes free setup, 1 free domain name, £20 Google AdWords voucher, 3GB disk space and 100GB bandwidth.

The competition closes on Monday 23rd June and winners will be chosen completely at random. The lucky few will be announced on Design Shack the day after. We’ll be in touch with details on how to claim your prize.

How to enter

Entering the competition is simple, and will help Design Shack evolve over the coming months. All you need to do is fill in the following form telling us:

• Two website designs which have recently inspired you
• One article or tutorial which you would like to see on Design Shack

We’re looking forward to hearing your ideas and hope to be inspired from you, our readers!

The competition is now closed!

About UK2

UK2 have been a major player in the web hosting industry since 1998, today having sold over a million domain names. They host thousands of websites and dedicated servers for customers in various countries. UK2 are one of the biggest and fastest growing web hosting companies in the UK, offering services including domains, dedicated servers and e-commerce packages. You can read more about UK2 at their website.

Design Critique: Mobile Me

Apple have recently announced a new suite of online applications called MobileMe. The aim of the development is to allow you to keep all your information in sync between several devices (e.g. your iPhone, Mac and Windows PC). In addition, Apple have created a new online site at me.com, which will hold a suite of applications including email, calendar, address book and photos.

We’re going to take a quick look at the design and layout of this new online service, and explain what works well and what we think could have been done better.

Email

This section of the service has done a great job of emulating a desktop application. The existing .Mac webmail application was already excellent, so porting this across has not changed a great deal. Design features which stand out include:

• The use of a lighter font to separate the subject and following message content
• Adding a new email indicator to the top toolbar, and the page title, to show your unread messages whilst using other applications

It is interesting to point out the lack of branding running through the site – nowhere is the ‘MobileMe’ logo featured, and the user is free to use the service without being confronted with too much Apple-centric branding. This is a distinct step away from Microsoft or Google online applications, which both use branding extensively.

Photos / Gallery

There are a plethora of modern AJAX galleries online, all with their own pros and cons. Apple’s now integrates with the iPhone, iPhoto and your Mac, along with offering different viewing methods.

The addition of reflections to the photos looks typically Apple, but seems to make reading the caption underneath more difficult. It raises the eternal dilemma – at what stage do superfluous effects become more of a hinderance to the user than a positive addition. That said, there are several design elements which are notably good:

• The permanent share-able URL in the top right makes showing others your photos very simple
• The simple design of the album settings popup
• The ability to resize all photos at once (no mean feat to achieve whilst keeping load times down)

Considering the lack of any Flash, the gallery pages do a great job of showing content in a dynamic and appealing way. The technologies used are nothing new, but have been used to very good effect.

Calendar

The previous online calendar on .Mac was relatively poorly designed, with little to no interactivity and various restrictions. The new version offers not only a much more accessible and practical design, but also a variety of new features.

We particularly like the dragging and dropping of calendar appointments which snap to place in the grid structure of the page as they are moved. Features such as this illustrate how JavaScript can really allow online applications to feel as natural and robust as desktop counterparts. Other aspects which stand out are:

• Transparency in event backgrounds allow you to still see time intervals
• Excellent use of subtle colours in the small calendar in the lower left to make it immediately obvious what day it is, which day you’re looking at and where the month begins and ends
• Slightly larger line spacing between events in the month view (making the online calendar actually easier to read and scan than the desktop version)

One inconsistency found here is the difference in design of the ‘settings’ screen when compared to the equivalent in the gallery section. It would have made sense to standardize this across all the various online applications. However, on the whole we think that the design of the online calendar is actually better than the desktop version, and hopefully some of the interface features (increased line spacing, less rounded corners etc) will be brought to the desktop version in a future update.

iDisk

The use of JavaScript and AJAX provides, for the first time, a practical interface for managing files and folders. Flipping through directories is seamless, as is dragging and dropping files as the page does not need to be reloaded for changes to take place.

The pink/purple icon for the iDisk is, to be frank, awful. The contrast between the two colours clashes and could certainly have been designed better. I’m not sure why a departure from previous aluminum drive icons, or the iDisk globe, was needed – either of these would have been more aesthetically pleasing.

However, the layout and view options look good and files/folders are clearly defined. There isn’t a great deal to say in relation to this section – it’s straightforward and does what it says on the tin.

Lessons to take away

• Branding isn’t always essential – put the user interface first and offer a simple service
• Be careful not to use visual effects when they come at the detriment of user experience and accessibility
• Icon design is not easy, but avoiding colours such as bright pink is generally a good idea!
• It is certainly possible to create online applications which look, feel and respond in a similar – if not better – way to desktop counterparts
• Pay attention to line spacing, as it can make text much easier to read

Do you have any other comments and opinions on this new service? Let us know below!

An Informative 404 Page

Classic 404 error pages are prone to being relatively useless. Whilst a well designed page can provide a means to find what they are looking for, wouldn’t it be great if you could find out more about what went wrong? This tutorial will show you how simple it is to have an explanatory email sent to you whenever a visitor hits a 404 page.

Read More

PSD2HTML Review

For several years, PSD2HTML have been the primary sponsor of Design Shack. We don’t like to suggest a service to you unless we have tried it ourself to ensure that it’s worth a recommendation. A recent addition to our network of sites, 13 Styles was in need of a redesign and I took the opportunity to use PSD2HTML’s service and document the process.

This article will be more than a straight forward review of PSD2HTML. We’ll be considering the basic idea of these type of services and considering when, and for who, they are appropriate. Honesty will be foremost, and I hope that you will gain a real insight into using a PSD to XHTML tool.

PSD to XHTML Services

PSD2HTML are one of the first companies to provide this service (you can see their original press release), but there are a huge number of competitors in the area today and a Google search for “psd to html” brings back over half a million results. Here is a table summarizing the main players in the industry (a more in depth list can be found at Most Sliced):

We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.

The Process

The ordering process at the site is very simple. There are several options available, starting with either a basic or professional package. We opted for the professional, as semantic, search engine friendly coding was a must have. Other optional additions are:

• Flexible width
• Stretching the header and footer
• Rollovers and dynamic menus
• sIFR flash replacement
• Commented CSS and XHTML code
• Load speed optimization
• Integration with CMS software (e.g. WordPress, MT, Drupal, Blogger, CubeCart)

After submitting the order, we were contacted at the start of the following working day with a request to clarify some of the features in the submitted PSD file. By the end of that day, some 7 hours later, the markup was provided through their online ticket system. The speed of the turn around was incredibly impressive – it would take even an experienced designer far longer than 6 hours to code a relatively complex site such as the one we submitted. If you need results quickly, this service would seem to be a great resource.

Speed isn’t the only factor, however. We’re going to show you, in full, the code created by PSD2HTML for the new layout.

The Results

This is the original 13 Styles design:

And this is a screenshot of the new version which we created in Photoshop:

You can see the full website through the following link. It is essentially the exact code which we received back from PSD2HTML, and will still require customization before being integrated into the real 13 Styles site.

View the design

Please feel free to take a look and judge the quality for yourself. We found it to be great – well laid out with the correct separation of content and presentation and semantic coding. We aren’t incredibly easy to impress, but this was certainly not a rushed, second rate effort. The process takes web design to a level of ‘mass production’, and high standards can be achieved through having a huge catalog of code examples and snippets to work from.

Do We Recommend Them?

The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:

• Are short on time
• Are a skilled designer, but not a coder
• Require high quality, semantic and valid code
• Want to have a personal, well trained contact creating the design

It can be argued that design does not come from the ability to write code, but rather the ability to create an intuitive user experience which is simple to operate and gives the desired message. Using a service such as this ensures that you are free to focus on these aspects without being bogged down in small issues such as cross browser compatibility.

PSD2HTML impressed us in every area when coding the 13 Styles site, and we would not hesitate to recommend using their service. Be careful, though, that you don’t lose the passion for crafting your own HTML and CSS.

PSD2HTML by psd2html.com

Introduction to CSS3 – Part 6: Backgrounds

For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

View the live examples page

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:

.backgroundsize {
background: url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Multiple Backgrounds

The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.

The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.

.multiplebackgrounds { 
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Background Origin

CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.

In conclusion…

There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.

We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Inspirational Workspaces

Believe it our not, your office environment as a designer can have a huge impact on the quality of work produced. Whether it’s in a cluttered office, a contemporary apartment, or even a caravan; the standard of your design creations (even your CSS code!) can really be impacted by the surrounding. This article will take a look at some inspiring workplaces, desks and gadgets to give you a few ideas.

Why is Working Environment Important?

When you spend any length of time in one particular place, it is worthwhile making it somewhere you feel comfortable, at ease and productive. A study or office can often feel to be a confined area, prone to becoming strewn with papers and wires. Having a simple, clutter free place to work can help because:

• It removes distractions, allowing you to focus on the task at hand
• You feel relaxed and comfortable when working
• It leads to heightened confidence, knowing that everything is well managed and in it’s place

The Desk

A driving instructor needs a comfortable car, a professional sportsman requires the latest, supportive trainers and a clown would be lost without his face paint. In the same vein, a good quality, well organised desk can help hugely with the workflow of a designer. Here are a few examples of really great workspaces:

Whilst it may not be possible to have a completely “paper-free” desk, restricting yourself to one or two notebooks and some post-its is usually an achievable goal. Many designers swear by Moleskine note books and the classic Fisher Space Pen. Finding tools which you work well with is the first step towards a really productive workflow.

The Room

The larger environment of your room is also worth considering. Whist constrictions are obviously always imposed by size and layout, the following are important aspects to get right:

• Plenty of light, with blinds to dull it down on very bright days
• A good air flow from large windows that you are able to open
• Plants help to oxidize the air and look natural
• Plenty of storage compartments to keep clutter down
• Photos of family and friends (consider Jewel case frames)
• A comfortable and supportive chair

Here are a couple of examples of very different, but very well laid out working environments:

Keeping it Clutter-Free

Finally, the dilemma of how to keep the clutter away from the desk top and into well organized piles, drawers and filing cabinets. We’ve put together a five step plan to getting closer towards this goal:

1. Buy a filing cabinet and drawer combo. All permanent documents you need to keep (e.g. receipts) go in the filing cabinet, all your pens, paper and accessories go in the drawer.
2. Buy a letter tray to keep documents separate. One tray is for documents yet to be looked at, one is for those to be sent, and another is for all your other miscellaneous bits of paper.
3. Go wireless where possible. Whether it involves investing in a wireless keyboard and mouse, a wireless router or a networked hard drive. Try to cut down on the wires trailing around your desk.
4. Scrap your paper organizer. iCal on the Mac is an absolute workhorse for me. I use it to manage all my business tasks and appointments, family birthdays, social events and finances. It syncs with my iPhone so I have all that information with me on-the-go, and it can be downloaded to other computers via .Mac. It is an enormous improvement over a paper calendar or diary.
5. Be ruthless. For a few weeks, aim to be ridiculously strict about having any clutter lying around on your desk. After you’ve consciously focused on it for a short time it will start to become something you do naturally.

See the benefits!

Once you have a relaxed working surrounding and are feeling in-control, you’ll start to see yourself working more efficiently, feeling more motivated and being more creative. When you don’t need to worry about when your next electricity bill is due, or where that important client brief is (under a pile of papers on your desk), it frees you to focus on what you love – designing.

Do you have any other examples of great workspaces? Clutter saving tips? Please do let us know in the comments – we’d love to hear them.

Introduction to CSS3 – Part 5: Multiple Columns

Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

• column-count
• column-width
• column-gap
• column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

h2 {
column-span: all
} 

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

RSS Feed Icons

The RSS feed icon has become somewhat iconic in web design, and is arguably one of the most recognized symbols. This great article has a huge collection of RSS feed icons – from a photorealistic style as shown here, to small buttons to hand-drawn sketches.

Adding an RSS feed icon that stands out and looks different can be a great way to draw the reader’s attention to your subscription options. Have a browse through and see which ones fit the look of your site.

View the RSS Icons

Introduction to CSS3 – Part 4: User Interface

This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Resizing

The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the resize:both; line:

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

Box Sizing

The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

Outline

Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:

• Outlines do not take up space
• Outlines may be non-rectangular

They can be created as follows:

.ui_outline {
width: 150px; 
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

In conclusion…

These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.

The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

Design Critique: Blog Platforms

Most designers are familiar with the relative pros and cons of different publishing tools – but what about the websites of the blog platforms themselves? We all know that you shouldn’t judge a book by its cover, but I would argue that there’s no harm in looking…

We’re going to take a look at the homepage for four popular platforms: WordPress, Textpattern, ExpressionEngine and Blogger. Which ones are beautiful enough to compel you to use their platform, and which ones have the design aesthetic of a hello kitty toaster? Hopefully through a critique of these designs you can take home some good pointers for use in your own work.

WordPress

The WordPress homepage has recently gone through a complete re-design for the release of version 2.5 of the software. Whilst the site does have a huge amount of content, the homepage is simple and easy to read.

What works:

• The use of orange to highlight download links makes the task that most people visit the site for a simple one
• The style of language – “WordPress is both free and priceless at the same time” is a great sentence.
• It makes WordPress understandable to someone who has very little knowledge of technical aspects. The words PHP and MySQL are not even mentioned!
• Form input fields have been painstakingly designed

What doesn’t work:

• The WordPress for Dummies image in the bottom corner clashes with the colour scheme
• The fact that the site ironically doesn’t seem to be powered by WordPress

Textpattern

Textpattern is the most basic of designs and does not go a very long way to ‘selling’ itself to potential users. However, with all the focus being placed on textual content it does live up to it’s name. We use Textpattern to publish certain sections of Design Shack and we’re more than happy with it!

What works:

• Splitting the layout using only text columns screams professionalism
• A subtle use of yellow defines the Textpattern ‘brand’
• The requirements and interface features are quickly found

What doesn’t work:

• The site is focused towards the technically minded
• There is no emphasized area of text which introduces the software
• Screenshots are displayed in a fairly flat and uninteresting manner
• The download link is tricky to see
• The amount of content on the page is excessive, overloading visitors a little too quickly

Blogger

Blogger differs from the other platforms we are analysing as it is a hosted service. Powered by Google, it allows completely non-technically minded people to start publishing a blog with great ease.

What works:

• Content is kept simple with a minimum of technical information
• The ’3 easy steps’ idea easily guides the user through a straight forward process
• Branding is used well, imprinting the Blogger logo on the readers mind

What doesn’t work:

• The use of typography is confused, with too many different effects, colours and faces
• The site lacks professionalism, clearly focused towards a certain user group
• The icons look decidedly dated
• Tables are used for layout in certain areas which really should be styled with CSS

Expression Engine

As the only commercially sold platform in this analysis, Expression Engine has a different motive to persuade publishers to use their software. This leads to a design more reminiscent of other commercial software sites.

What works:

• A professional, well designed colour scheme
• The use of tabbed content on the homepage to show a greater amount of information in a visually appealing way
• The website is powered by Expression Engine itself
• Unlike Blogger, the icons and graphics used and professional and well crafted

What doesn’t work:

• The bold logo for the testimonial section immediately draws the eye – away from the main Expression Engine logo
• Due to the heavy graphical nature of the page, loading time is slightly longer than the other designs

Lessons to take away

• From WordPress: Place emphasis on the most important reason the user came to the site, in this case, to download the software
• From Textpattern: Too much information can overload the reader, and a brand can be created using a single line of colour
• From Blogger: Guide the user through a process
• From Expression Engine: Using a dynamic area can allow more information to be conveyed without overloading the user at first

We hope you enjoyed this “design analysis” concept and found it to be useful. Please feel free to give your two cents on the above designs in the comments.