Design Shack — Web Design Gallery, Articles & Community

35 Marvelously Minimal Websites

Here’s to the design minimalists. Here’s to focusing on functionality, simplicity and basic design principles. Kick the tires all you want on these sites today – you’re still going to love using them tomorrow.

This is our roundup of 35 stunningly simple, marvelously minimal web designs. Enjoy!

37 Beautiful Letterpress Business Cards

Designing business cards can be tricky, because it’s always difficult to make one which stands out from the hundreds of others in circulation! Letterpress definitely brings a new dimension to business cards.

If you are looking to have a few printed, here are a range of catchy letterpress designs for inspiration. The idea of depth and an embossed logo add a completely new element, and could well be the best way to really make an impression.

Best of 2008 – JavaScript

In the last part of our summary series, it is time to see some of the JavaScript Goodies of 2008. Some of the following are resources, some are useful tutorials, some opinions and others just plain fun interesting stuff.

There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.

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.

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?

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

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!

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.

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.