Noupe » Showcases

Time for Mail: Services That Improve Gmail Productivity

Kevin Muldoon — Tue, 07 Feb 2012 09:03:37 +0000

Gmail exploded onto the internet in 2004 (beta) offering users a whopping 1GB of storage. This was unheard of at the time with the largest email service Hotmail only offering a few megabytes of storage. Currently Gmail offers 7GB of free storage with competitors such as Hotmail offering 5GB of storage and Yahoo offering an unlimited amount.

Gmail is popular with business users due to how quick, reliable and customisable it is. In addition to the experimental add ons that Google offers through Google Labs, there are a lot of 3rd party tools and services that help you enhance gmail.

Today we would like to show you 25 great tools that will help you get more out of Googles pioneering email service, and ensure that your personal Gmail productivity rating remains high. Enjoy.

Let’s Get Productive

* Fun fact: Google purchased the Gmail domain from Garfield, who were using it as a free email service for their members.

1. Find Big Mail
Online Service

Find Big Mail is a fantastic free service that helps you locate large emails in your Gmail inbox. All you have to do is enter your Gmail email address and then grant access to the service to check your account.

Once you have done so, you will receive an email advising you that they are processing your request and will email you again after 5 to 60 minutes once their search is complete (depending on your volume of emails). The email details your top 3 and top 20 messages by size. It also shows you the number of emails over 1mb, over 5mb and over 10mb. Each large email is linked, making it easy to review the email and check whether you need to keep it or not (or save the file elsewhere).

Pie charts are also displayed in your email and online. These show you the number of messages by size (small, over 1mb, over 5mb and over 10mb) and the corresponding space by size these messages take up.

It also adds labels to your Gmail sidebar that lists messages that are over 1mb, 5mb and 10mb. Find Big Mail is useful if you are nearing your maximum amount of storage and don’t want to upgrade.

2. CloudMagic
Google Chrome

A search tool that lets you search Gmail, Google Apps, Google Docs, Google Docs and Twitter. Once you have installed CloudMagic and refreshed your Gmail page, you will see a search box at the top of the page. This box can be moved anywhere on the page (as you see fit).

Search works in real time i.e. results appear as you type. You can view results from other services such as Google Docs instantly by simply changing the tab at the top of the box.

It’s worth checking out if you search through your inbox on a regular basis.

3. Google Mail Checkers
Google Chrome and Firefox

Do you find yourself checking Gmail frequently to see if you have new mail? If so, you may find the Google Web Checker (Chrome) and Gmail Watcher (Firefox) add-ons useful. Once installed, the apps will show add a Gmail icon to the top of your browser. Whenever you receive a new email the icon will be updated to let you know that you have received mail. A simple add on that’s very useful.

4. Better Gmail
Google Chrome and Firefox

Better Gmail for Chrome and Firefox are great add ons that add a lot of great features to Gmail.

The exact features differ slightly between the Chrome and Firefox versions. Both versions highlight rows when you hover over messages, adds attachment icons to your Gmail page and help notify you of new messages using pop ups or sounds. The Chrome version also removes advertisements from your page.

5. Google Redesigned
Google Chrome & Firefox

A great extension for Chrome and Firefox that gives Gmail, and other Google services, a complete redesign. Worth trying out if you are bored the default design of Gmail.

It works with Gmail, Google Calendar, Google Docs and Google Reader. You can disable or enable the design for each service individually.

6. Active Inbox
Google Chrome & Firefox

A productivity tool for Gmail that adds a lot of welcomed features. Active Inbox helps you prioritise tasks by allowing you to set which messages are top priority. Emails can be added to a to do list to help you plan what needs to be done.

Emails can also be assigned to projects and notes can be added to conversations too. In the Active Inbox bar at the top of the page, all of your to do items and projects are listed. It also lists those emails that are defined as high priority, emails that need to be tracked until completion and emails you are awaiting a reply on. All of these filters can be applied to emails within each message at the top which makes organising your workload much easier.

7. Rapportive
Google Chrome, Firefox, Safari and Mailplane

Replaces advertisements at the right hand side of Gmail with an informative profile of the person who has emailed you. It shows you their photo and information about what they do. It helps make new connections via Facebook, Twitter and LinkedIn too.

8. Boomerang for Gmail
Google Chrome & Firefox

A wonderful application that adds a ‘Send Later’ button to your message compose area. You can send the email in an hour, 2 hours, 4 hours, tomorrow morning, tomorrow afternoon, 2 days, 4 days, one week, 2 weeks or one month. Alternatively, you can also set the exact time the message can be sent or ask for help by clicking on the random time link.

You can also set reminders for important messages and if you don’t hear back from the contact, Boomerang will remind you to follow it up.

9. WiseStamp Email Signatures
Google Chrome, Firefox and Safari

This browser extension makes creating modern interactive signatures a breeze by enhancing your Gmail signature with social media icons and your latest tweets and Facebook posts. You can also add social icons, quotes, your latest ebay auctions, music and much more.

You can create as many different signatures as you want (personal, business 1, business 2 etc). A link is placed discretely at the bottom of each email unless you upgrade to a paid account ($36 per year).

Images can easily be inserted into signatures and you can place information in columns using tables. You can also edit the HTML source directly.

10. Grexit
Online Service

A great application that businesses will find useful. The service lets you share emails in a common shared folder so that other colleagues can easily reference important discussions and information.

11. The Email Game
Online Service

Finding it hard to get motivated to clear your crowded inbox? You may find ‘The Email Game’ service useful. It times how long it takes you to address your unread emails. You can deal with emails right away by replying or forwarding them, boomerang posts or skip them and deal with them later, or archive or delete the email. Points are awarded for dealing with emails quicker, with 3 minutes being given to you for each reply.

12. 0Boxer
Chrome, Firefox, Safari and Mailplane

Another game that aims to help you be more productive. oBoxer rewards points for clearing emails and writing them. You can compete against friends and the site lists weekly and daily leader boards for other users.

Halfway Down

The post continues on page 2 here.

Creative Uses of Illustration in Web Design

Nousheen Aquil — Thu, 26 Jan 2012 09:00:42 +0000

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Teamnomad
Teamnomad’s header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren’t overwhelmed.

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn’t much here that could use improving.

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Cool Brush Design
Cool Brush Design’s site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn’t have the characteristic humanistic elements.

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

(rb)

40+ Great Examples of Facebook Fan Pages

Kevin Muldoon — Wed, 09 Nov 2011 11:00:33 +0000

Facebook has become an essential part of promoting a website or service online. Small blogs, discussion forums and huge commercial companies such as Coca-Cola and McDonalds are all using Facebook to promote their brand and interact with fans and customers.

Facebook fan pages are at the heart of any Facebook promotion campaign. A great fan page will not only encourage people to like their page; it will also effectively promote their brand and connect with readers on a regular basis so that fans don’t reach for the unlike button.

Today we will be showing you some examples of great Facebook fan pages. We hope that they will inspire you and give you some ideas for your own fan page.

The Showcase

1. McDonalds

The McDonalds fan page has a lot of different sections on it to promote their meals, deals and competitions. The main page changes frequently depending on their current promotion.

2. iTunes

A minimalist fan page that has the same look and feel as iTunes itself. Their Twitter account is promoted at the top of the page and top ten songs, apps, movies and tv shows are shown. You can also search for songs, albums, movies, apps and more directly through this area too.

All regional iTunes fan pages are shown at the left hand side of the page.

3. Livescribe

Videos, tutorials, apps and more that explain what the Livescribe smartpen is and what it can do for you. It’s a great example of how to promote an innovative product to the masses.

4. Chick-fil-A

The breakfast range is heavily promoted on the entry page. When a user clicks on a specific meal they are taken to the Chick-fil-A website for more information. Their Twitter profile and newsletter are also promoted on the entry page.

5. Baskin-Robbins

A fantastic example of how to encourage (read force!!) visitors to like your fan page. The content is faded on the fan page. In order to see the information in full, visitors have to become a fan.

6. Honda

The Honda fan page defaults to the ‘Like Our Models’ section. The design encourages people to like the page and displays a list of all of their current cars. Each car can be liked individually and clicking on the vehicle image will redirect you to the Honda website for more information. There is a useful resource area for Honda owners too.

7. Twilight

The latest trailer is given the most importance on the entry page though links to all social media profiles are shown underneath. Real time updates from fans are shown underneath as well. You can leave a comment there using YouTube, Facebook or Twitter.

8. Britney Spears

A great media fan page. Britney’s latest song can be played directly on the page and there is a link to download the song too. Information about upcoming gigs and the latest comments from fans via Twitter and Facebook are shown too.

9. Monopoly

A beautifully designed fan page that encourages visitors to like the page in order to join in the fun. There are links to the Hasbro website, their Twitter profile and another dedicated fan page for an exclusive Monopoly documentary.

10. VW

Features an owners section and information about their popular models. The entry page shows the current promotion. At the moment the promotion allows fans to upload their photo to appear in Times Square, New York.

11. Brendan’s Irish Pub and Restaurant

Brendan’s have incorporated their menu into their Facebook fan page. Visitors are encouraged to like the page in order to leave a comment underneath the menu.

12. Zappos

The main page has a large image that encourages visitors to like the page to view exclusive content. It also includes a catalogue and competitions.

13. Harley Davidson

Using a design that matches the brand styling, the Harley Davidson fan page directs visitors to visit their main website.

14. Budweiser

A simple fan page that encourages visitors to like Budweiser to support designated drivers. They also host competitions through Facebook regularly.

15. Skittles

One of the most colourful Facebook fan pages online, the Skittles page takes advantage of the 180×540 pixel allowance for the main profile picture and has links to their YouTube and Twitter profiles and their main website. Their advertisements can be watched directly through the fan page too.

16. NFL

Includes a welcome page that encourages visitors to subscribe, information about where you can watch NFL live in your area and a fun NFL Facebook game.

17. Red Mango

The frozen yogurt & fresh fruit smoothies maker encourages people to subscribe to their fan page by offering visitors a $2 discount off one of their products by liking their page.

18. Panda Express

Whilst Panda Express interacts with their fans regularly and offers a store locator option through their fan page, their entry page directs visitors to their main website. With over 1.5 million fans, Facebook no doubt contributes a large part of their website traffic. A great example of how you can use Facebook to push traffic to your main site.

19. BMW

The BMW fan page features videos of their cars and a global map which shows Global BMW Facebook news. Most features are hidden to non-fans. These pages heavily encourage visitors to like the page to see more.

20. Teesey Tees

The Teesy Tees fan page defaults to a tab called ‘Fan Discount!’. Visitors have to like the page in order to see it.

21. Guiness Ireland

Known for it’s effective use of offline and online marketing, Guiness offer their fans the latest news about their products and entry into exclusive competitions.

22. Gary Vaynerchuk

A fantastic fan page that explains who Gary is and what he does. The page links heavily to his personal blog and company website and highlights the fact he has over 840,000 Twitter followers.

23. Oreo

A fun fan page that showcases the latest commercial and encourages users to like the page. The recipe section lists lots of great recipes from the main website.

24. Get 10,000 Fans

A great example of how you can use Facebook to increase the number of people who subscribe to your newsletter. The entry page automatically loads a video that explains why you should subscribe to the fan page and newsletter.

25. Spongebob SquarePants

Spongebob Squarepants offers games and other exclusive content for those who like the page.

26. Red Hot Chili Peppers

Features a newsletter sign up on the entry page and a video app that lets you play the Chili Peppers greatest hits. Upcoming gigs are also noted.

27. Coca-Cola

Exclusive downloads, photos, videos and other goodies for people who like the Coca-Cola fan page.

28. The Doors

A beautiful fan page that allows visitors to play some of The Doors best songs through the embedded media player.

29. Stella & Dot

An elegant design that hosts exclusive competitions for their Facebook fans.

30. MysteryGuitarMan

Straight to the point, MysteryGuitarMan directs visitors to like the page before visiting the wall.

31. Nutella

A simple design that features a delicious jar of Nutella. Putting all the focus on the product.

32. Pulp Fiction

The Pulp Fiction fan page heavily advertises the cult films release on Blu-Ray. There’s a reviews section that allows fans to leave their own thoughts on the film too.

33. Benefit Cosmetics

A showcase of the new Benefit Cosmetics store in New York.

34. Ben & Jerry’s

Another great fan page that hides the content on the main entry page to encourage people to like it. Visitors are able to view and send a funny video sketch after they have subscribed.

35. Dell

Dell are one of the few commercial companies to offer direct support regarding orders and products directly through Facebook. The latest products are also linked from the main page.

36. Oxfam GB

One of the few pages that has added several important sections to their fan page instead of just linking to their main website. Fans can shop, donate money to Oxfam and find out more about the Oxfam cause directly on their fan page.

37. Realising Designs Website Design

A great example of how you can use Facebook to tell people more about your business. There are links to their social media profiles and details of their latest projects. There is also an exclusive discount that you can claim only if you become a fan.

38. Daddy Design

One of the most colourful fan pages online, Daddy Design showcases their latest designs from their portfolio and lists all of their social media profiles. Information about getting a free quote is also there.

39. NHL

The NHL encourages interactivity by letting fans create their own NHL profile using an app in Facebook.

40. Windows

The Windows fan page displays information in 4 boxes that mimic the design and colour of the iconic Windows logo.

41. DunkinDonuts

The Dunkin Donuts page illustrates how you can leverage the traffic from one fan page to promote another fan page or application on Facebook.

42. Adobe

Individual products from Adobe have their own fan pages and have a lot of subscribers, though their main fan page has less than 50,000 subscribers. This is probably because they have used their main fan page as a hub for connecting visitors to individual products.

Overview

We hope you have enjoyed this list of beautiful Facebook fan pages from across the web. People seem to be using their Facebook fan page for a variety of reasons. Some simply want to push traffic to their main website, others want to interact with fans and customers whilst others use it as a way of building up their newsletter list or increasing their other social media reaches.

What’s your Facebook fan page like? Feel free to talk about your Facebook promotion technique in the comment area.

(rb)

Compilation of Well Designed Donation Pages

Noupe Editorial — Thu, 08 Sep 2011 10:00:19 +0000

As web designers and developers we tend to view the web somewhat differently than most. Our work keeps our focus tuned to the finer points of the field as we browse, even in our time off. We tend to get inspiration from this way of seeing the web. Hints of techniques or approaches to attempt for our next projects emerge from all corners of the web. And given that our next client could emerge from any arena, we need to be prepared for any and everything. Like for instance our next client could be some sort of charitable organization that works off of donations, and as such, they might need us to design them a site complete with a donation page.

Now there are many considerations that need to be made when we are designing, especially a page whose calls to actions are often vital to the mission for the client behind it. Which is why we have gathered together a showcase of well designed donation pages for our readers, complete with some resources at the end of the post to help prepare them for those potential clients to come calling. Take a peek down through to see some examples of both subtle and more extravagant designs that have tackled this task with style.

The Showcase

Operation Warm is a nice site with comfortable, welcoming color scheme. The donation page calls vary in color, however the main calls to action blend with a majority of the site given that they are the same color. The secondary calls stand out a bit more as they break from the blue.

Manna FoodBank uses a natural, earth-tone color scheme which goes well with their mission. The call to action button stands apart nicely even with only the slight changes in color, next to the information about their cause.

The Red Nose Day site uses a simple two tone color scheme. The red colors pervading the donation page denoting the passion for the mission, and driving people to take action.

Oxfam is another site whose donation page design focuses all of its attention on the necessary mission and calls to the readers.

Network for Good has a wonderful design, with three courses of action that their readers may follow. Each with a large, eye catching call to action button.

Save the Children has a sleek design for its donation page with designated avenues for assistance that the users have at their disposal. With so many courses of action for users, it could easily become a cluttered mess, but the design keeps it all organized well.

The Make-A-Wish donation page, while constructed well, does suffer from a lack of distinction for its calls. The blue becomes somewhat overwhelming with the amount of information it contains.

Mozilla has a subtle donation page design with a creative header attached to their site where fans and users can donate to keep their mission alive.

American Heart Association‘s donation page is stylish and focuses the users attention directly towards the calls. The color scheme works well, with the subtle uses of white inserted into the blue.

The Kiva site’s donation page is sharp and focused on multiple routes to lending a helping hand, and the large boldly colored call to action buttons stand out from the rest of the page nicely.

Doctors without Borders has a great donation page design, using tabbed windows to separate the various paths that users can take to pitch in. Overall the design is simple and effective.

Virgin Money Giving is a unique donation page, with a category breakdown so users can find the type of charitable organization they are looking to support.

Giving to Johns Hopkins has a stylish design pushing its cause. The contrast in colors on the header and call to action button work wonderfully in making them stand out.

Humane Society‘s donation page uses large images and bold buttons to draw the users attention and persuade them to take action.

Keep a Child Alive has a very sleek design with large buttons with various ways to contribute to the mission. With a slight grungy effect used to highlight areas of the page, the design stands out.

ASPCA has another subtle donation page design with the purple calls standing out from the overall orange design colors. Soft coloring imparts a sense of comfort and eases the readers into the cause and taking action.

Invisible Children has a donation page that is as stirring and emotive as their mission. With large images of the children the world tends to overlook connects the design with the cause in a simple yet effective way.

MJFF uses warm and inviting colors which work well for engaging the readers. The gradient on the actual donate button does help it stand out, but the coloring is still a bit too similar to the rest of the accents to really draw the eye.

The Natural Resources Defense Council has a very simplistic design with overly large and bold call to action buttons. This no frills approach puts pure focus on the mission.

Planned Parenthood‘s donation page uses a form for the main appeal to the readers, with secondary (more subtle) calls in the upper right corner. Overall, the large header and large body text compliment each other leading the reader into the ‘action center’.

Donate Life California has a somewhat whimsical design, with pink calls to action buttons that really stand out from the rest of the site, yet match with the logo of the organization.

Red takes minimalism to stylish levels with their donation page design. The overly large typographical elements really do wonders for boldly drawing the eyes to the action areas.

The Nature Conservancy has another simple, sleek donation page. Mostly text covers the page, with two subtle calls positioned under the header where users tend to expect the navigation to be.

Charity: Water‘s donation page is keeps the focus on the mission with the aid of this understated design.

The Action for Children page design has a large, eye catching call to action area which sets off the donation area nicely and effectively pulls the reader to it.

Tutorials & Tools

Below are a small handful of resources that you can use for making the most of any donation page you have to design. Go through them now, or save them for when your next client needs their site to go this route. Either way, we hope you find them useful.

Donation Page Optimization Basics

WordPress Donate Plugin

Increasing Online Giving: 10 Tips to Optimize Your Donation Landing Pages

Paypal Custom and Donation Forms

How To – Create A Donation Page for WordPress

The Most Effective Online Donation Page Ever

(rb)

Showcase of Creative and Entertaining 404 Error Pages

Aquil Akhter — Thu, 25 Aug 2011 10:00:11 +0000

When designing a website, many of us just neglect the error pages considering them insignificant. But the fact is many visitors come across these 404 error pages either because of typing a wrong URL or due to any other number of technical reasons.

Visiting an error page is not a pleasurable experience for a visitor but web designers can make it pleasurable by designing beautiful and creative error pages. All it needs is a little bit of creativity and some quality time, and your error pages will stand out. Here is a list of some creatively designed error pages that will inspire you.

Entertaining 404 Error Pages

Agens
This error page is designed with extreme creativity that features an astronaut being lost in the outer space.

Giraffe
Giraffe features a mascot guiding the lost visitors, showing them how they can get back to the site again.

Frywiles
The missing bird in the row represents something is misplaced and cannot be found. Proper navigation is provided to help users get back to the website.

iFolderLinks
A baby weeping over a computer greets you when you come across the error page on iFolderLinks.

Apartment home Living
A very interesting approach of designing 404 error page. A nice ol’ chap appears whenever you come across an error page and a lady peering from behind the frame lets you navigate the website properly.

Factor D
Factor D features a beautiful yet terrified vintage scream queen to indicate the horror of being lost.

Sure Dev
This error page comically appears as if the user has broken the site with their plate spinning shenanigans.

Blizzard Entertainment
Here is another example of the site appearing to have been broken by the user.

Milrayas
With a whimsical play on the Where’s Waldo series of books, this 404 error page playfully asks where is the page?

TK Designs
This page uses an illustrated, space age character running through exasperated and lost. The page includes a search box to help users find their way again.

Blue Daniel
This extremely interactive (complete with animation) design is brimming with creativity. Set in a mock NYC subway line dubbed track 404.

Bit.ly
Here the mascot is floating out to sea, far from the familiar shores of the site.

8bitpeoples
In true 8bit fashion, just what you would expect from this site, comes a little creativity to go a long way.

Audiko
Has an extremely colorful and artistically crafted error page. Bold and beautiful.

Cooklet
Appropriately designed 404 page that simply says you came too late, the empty plate an indicator that you have missed out on something.

NPR
The 404 error page for NPR is designed in such a way that it redirects the lost users to the stories of lost people, places and things.

Prime
The site’s creative way of demonstrating that something is missing, easily earned it a place in this showcase.

Spiritual But Not Religious
This site uses a tongue in cheek sense of humor that plays into the site and its mission wonderfully.

Good Old Games (GOG)
This innovative 404 design suggests that the page you were looking for has broken out of the site and is now lost somewhere in the cosmos.

Abduzeedo
A very creatively designed error page that also uses the lost in space theme to inform visitors that the page they sought could not be found.

HomeStarRunner.com
This 404 page takes a bit of a different tact. Instead of being helpful, they berate the user and tell them to go away.

Hoppermagic
Here Hoppermagic takes the whimsical route, deploying their rabbit logo who has chewed on the cables and caused the error.

WeAreTeachers
This error page plays on the age old excuse given to teachers when homework was left undone, which works well on a community site of teachers.

Wooga
This error page also goes more of the comical route with their weeping raccoon, saddened by the users error.

Zappos
Here the cute, little weeping penguin also plays on the idea that the users error has caused the sad face. They also provide you with navigation that can take you onward and the make the penguin happy again.

Blippy
A vividly colored and extremely beautiful 404 error page. With an animated rainbow that appears to make the sadness of the 404 error go away.

OrangeCoat
OrangeCoat has designed a creative 404 error page flowchart that works with its users to try and figure out what caused the 404 error and to then help them along their merry ways.

Jolie Poupee
This error page was designed for Jolie Poupee which is eco-friendly children’s clothes stores. It is the perfect blend of cute and creepy.

Warhammer online
This fantasy gaming site uses imagery from the realm, mixing humor with the lore for their 404.

Twinpx
A visually compelling 3-Dimensional rendering of a broken 404 image is used to grab the users attention and let them know they are lost.

Planetgeek
The page features a small bit of the classic 404 error page as an appropriately geeky t-shirt design, and gives the lost users proper navigation options to return back to the site.

Limpfish
A very simple and clean error page designed like a torn out wanted ad from a print publication announcing what the page is missing, and needs to be complete.

Deliciously Creative
Employing the imagery of a broken egg as they explain that something may have broken, their playful explanation playing into the imagery and site’s mission, this 404 page is wonderfully simple and creative.

D20srd
This playful and entertaining take on a 404 design sets up the page like a role playing game trap deployed on its visitors.

Clubpenguin
Using some of the sites animated penguins, who are checking a map to show they are lost, this 404 design has the penguins point you in the right direction…towards the navigation.

You may also want to consider our previous posts:

(rb)

Showcase of Italian Web Design Pt.2

Otba Mushaweh — Mon, 22 Aug 2011 10:00:52 +0000

Last week we had a showcase of Italian web design from a member of the Italian web design community. This week we have a showcase from a different perspective. This week, we have a showcase and look at Italian web design from a designer outside of that community. Complete with interviews and more, this second installment will hopefully paint a fuller picture of the state of the web design industry in Italy.

Some Background and Influences

The Italians are remembered for producing an ongoing stream of gigantic and awe-inspiring artworks, largely based on the intellectual climate or religious trends of their times. Frescoes and mosaics have been a staple in Italy, from the medieval period onward. Byzantine art was largely decorative, colorful and calligraphic. Naturalistic art was next, created by the groundbreaking Giotto de Bondone. Gothic art emerged at the same time, also called the International style.

Patrons emerged from rich and powerful clans in the 1420’s, and remained influential for half a millenium. This was the time of Donatello, Brunelleschi, and Alberti, who looked back on the classical period for inspiration. Tuscan painters Fra Angelico and Fra Filippo Lippi experimented with color during the same era.

Lyrical artists, such as Botticelli, Filippino Lippi, and Baldovinetti emerged next, paving the way for the Big Three: Michelangelo, Leonardo da Vinci, and Raphael. These great masters were rivals for ascendancy during the Renaissance—Raphael with his religious paintings featuring Madonnas, Leonardo with his wildly imaginative notebooks and Michelangelo with his Sistine Chapel. Mannerism followed in the early 1500’s. Titian was the foremost master of Venetian painting, characterized by luxurious color, sensual bodies and exquisitely lit paintings of scenery.

By the 1600’s, Rome was the epicenter of a new style, Baroque art—church ceilings decorated with clouds and cherubs. The energy and joy of all things Baroque was best captured by Bernini. In the next century, the Venetians again ascended with the rococo style, distinguished by its immense landscapes. Italy’s impressionists pre-dated all others. Their expression of this movement was through light and shadow (macchie).

More giants emerged with the two schools of Post-Impressionism. Those who meticulously depicted strict structure were Cezanne and Seurat. Those who experimented with color and shape were Gauguin and Van Gogh. Its name (Neoclassicism) explains Italian art’s swing backward once again into the design aesthetic of Ancient Rome and Greece. Artists Leon Battisa Alberti and Filippo Brunelleschi utilized the elements of mathematical symmetry and geometric proportion. As the 20th century dawned, Modigliani became the acknowledged master of Expressionism, followed by Cubism and Futurism. Girogo de Chirico edged the Metaphysical movement toward Surrealism.

In Web Design

Italians express themselves aesthetically with the inborn fluency that other humans use to breathe. Therefore, Italian graphic design displays an expected strength and freedom of expression, while maintaining a surprising softness and informality in its design elements.

Italian design schools include the study of art history and public spaces in their web design curriculum. Basic art principles are used as a grounding, such as color theory, expression of geometric shapes (especially the square) and optical illusions.

Modern technical skills are combined with humanism, so that practicality and user interfaces are uppermost. Italian web design maintains an intimate connection between the creator and the observer.

What’s Unique About Italian Web Design?

Here are some other issues:

• They use a usability rule called “Tired Rule”, which outlines a specific set of usability guidelines to follow.

• The websites often enough require to be published in two languages (Italian/English).

• Italian web designer earn less than british or american designers.

• They have a particular taste for retro style in typography,they use and mix fonts to obtain a perfect geometry and an perfect readability for their design.

• They are extremely precise and take care of the details, by doing so, the website will be noticed for sure.

• There are features in common to almost all the Italian sites.

• Many designers are still using Flash, So there are alot of sites created by Flash.

• Beautiful Domain Names.

The State Of Affairs

We talked to people in the Web design industry in Italy to get their opinions on the state of affairs.

Q: Could you please describe the life of a freelancer, developer and designer in your country?

(Your Inspiration Web Staff): Working as a webdesigner – especially as a freelancer – can be very stimulating and quite demanding: looking for inspiration, working on the design and development phase, studying and honing one’s professional skills, etc…In terms of one’s personal life, working hours don’t exist, daily schedules don’t exist. One can be sleeping during the day and working at night, or having to work for ten consecutive projects without having any inspiration whatsoever…this is a struggle that every freelancer, developer and designer must confront on a daily basis.

(Piervincenzo Madeo – PV. M Garage): I’m taking my initial steps into this world. I have a ‘strange’ background story, because I come from engineering studies and for this reason I don’t have a complete view of a real life as a freelancer. But I can say that to start my activities, in order to engage clients and to create a strong network, I had to take a look beyond the italian borders… I have to write a blog in english to have visibility, and I have many requests from clients who live in other countries. I love Italy, but it’s hard to begin a professional activity in web design field building (basing) a business only on italian audience.

(Raffaele Rasini – Creative Bits): Difficult, almost all web designers start out as a freelancer but without an entrepreneurial spirit and desire to get involved in a sector where there is plenty of competition after the first year many decide to go to work in a web agency or even change job direction to something more classic and recognized. We must hold on, collaborate with other web designers and choose carefully (when possible) the works that are proposed in accordance with the potential advertising that could generate more than the earning after work.

Beaver Lab

(Egidio Bacigalupi – Beaver Lab): Life is hard … especially to get it started! We work at any time and the idea of the weekend and spare time disappears. We must be available and open with our client: the satisfaction is crucial because the word of mouth is still the best market strategy. Our daily diet is based on many coffees and we must never lose the desire to take the risk and to be as much creative as possible!

(Michela Chiucini – web is love): The life of a freelancer has some pros and cons. Sometime we have to work more time than employees but we also have the freedom to manage our working hours and projects; the most annoying aspect is the paperwork, I hate it.

Q: Where do you get inspiration from?

(Your Inspiration Web Staff): I believe inspiration is a universal thing, just as its sources tend to be. It’s true that we look at CSS galleries once in a while (as well as blogs which focus on web design) looking for ideas, but most of the times I’ve noticed that inspiration comes in the form of flyers, tv ads, photos, colors, fonts, wallpaintings…a little bit everywhere, and rightfully so.

Web is Love

(Piervincenzo Madeo – PV. M Garage): Usually on-line, from css galleries and works of top-designers all around the Web; sometimes also off-line from magazines, newspapers, from TV too. But being active in the design community is my biggest source of inspiration: great people, stunning works and helpful ‘colleagues’.

(Raffaele Rasini – Creative Bits): Many say that to find inspiration one must observe nature, go for a walk and take photos, get off the computer and look for creative input elsewhere, I find this good and necessary, but I also think that since we are ux designers and not painters we also need to consider the various web resources like patterntap.com or the wonderful drawar.com that allow us to follow, analyze and replicate the solutions to common problems without having to reinvent the wheel each time.

(Egidio Bacigalupi – Beaver Lab): Internet is the best source… but often the best ideas rise up during a trip by car or chatting with friends over a plate of pasta.

(Michela Chiucini – web is love): Inspiration comes when you look at something familiar with different eyes. There isn’t a particular source where I get inspiration, it could happen reading a book, watching a movie, travelling, walking or just sitting in front of my computer. Rather, the most prolific moments are late afternoon and early morning.

Q: How do Italian designers handle typography? Are any font embedding techniques widely used? Is the choice of available fonts big? How vivid is in your opinion typography in Italian web design?

(Your Inspiration Web Staff): Of course, Italian designers are no exception, they know that good-looking typography can determine whether a website or design will be successful or not. We use some of the most common techniques, such as @rules “@font-face”, which are provided by CSS (currently supported by all major browsers), cufon, sifr… basically all of the main techniques present in this sector.

Multiways

(Piervincenzo Madeo – PV. M Garage): If I think about pro-designers, really pro, I have to say that they work superbly with typography. They have a particular taste for retro style in typography and I love how they use and mix fonts to obtain a perfect geometry and an perfect readability for their design. It’s just my opinion from my experience, but I don’t think there is a large use of embedding techniques, but who looks for a wide choice of fonts, for web design works, they use @font-face. It works quickly and without adding problems to the development routine.

(Raffaele Rasini – Creative Bits): The web panorama in Italy is not so advanced as one might think, with regards to typography we can not compete with the quality of other countries, as I said before there are too many beginners who decide overnight to be a web designer without any graphic background, without having studied the essential bases of typography that are necessary to achieve at least a decent website, this does nothing but increase the mediocrity (at least from a designer prospective) of italian websites. Fortunately there are also real professionals that they do their job well and bring a breath of fresh air in an otherwise depressing web reality.

(Egidio Bacigalupi – Beaver Lab): I love typography (I also deal with graphics and printing). I think fonts give you great potential for communication and have an intrinsic beauty. There are many beautiful fonts but also creating your own is fascinating. In the last period we are developing projects through the interaction and composition of fonts and the use of kinetic typography.

(Michela Chiucini – web is love): In Italy many designers are still using Flash, this has been the widely used solution for a long time. In html based websites the choice is the same as for other countries. Luckily more and more clients are asking for html websites so the attention on typography is increasing.

Q: What’s the situation on the market? How much do designers earn?

(Your Inspiration Web Staff): The Italian market is still quite young in regards to web design. The term ‘webdesigner’ is used very loosely, and one can be labeled as such even without having the necessary experience. Often enough, clients have a hard time distinguishing between a great-looking design and website with one that is mediocre and amateurish: they still think that what’s important is to be on the web, without considering the how. Because of this it’s quite hard to find clients who are willing to invest adequately on creating a website, considering that there are providers who charge ridiculous prices, such as 100 euros. Having said this, a webdesigner’s potential earnings is based on his or her level of preparation: some webdesigners succeed and are able to make a living with this while others might pick up webdesign to make some money on the side.

(Piervincenzo Madeo – PV. M Garage): There is thing that I can affirm without fear to mistake: ‘italian web designer earn less than british or american designers.’ Here, I’m talking only about italian scene, the culture of web lacks. We have to educate a client before asking for a payment, because many italian clients think a website can be done in one day expending 100 Euros.

Studio Grafico

(Raffaele Rasini – Creative Bits): There is high demand but few realize how much work there is behind a website and expect the prices of a flea market, I think the average earnings of an Italian web designer are at least 1/3 of, at the same level of capacity, what an American earn.

(Egidio Bacigalupi – Beaver Lab): The market is saturated, the communication culture doesn’t exist in many companies and it is not so easy to get paid … you need to propose yourself in a new and fresh way to be convincing and be economically competitive! I also believe there are profound differences between north and south: the north is certainly more receptive and willing to invest in the communication field.

(Michela Chiucini – web is love): Many clients are just discovering the importance of having a well crafted website and this is a good thing, but it’s still an underpaid job if compared with other countries.

Q: Is being a Web designer considered high-level, sophisticated work?

(Your Inspiration Web Staff): Not exactly, a lot of people are still confused about what a web designer really does and many believe (frustratingly, I must add) that web design is not really a profession but a hobby, something that is easy to do. Only few people really understand the passion, the sacrifice and the years of study that are needed to be in this line of work, so that these people also understand the true value of webdesign: economic as well as mental. Hopefully things will get better, I really hope so.

(Piervincenzo Madeo – PV. M Garage): As I said here the culture of web is lacking. For this reasons there are many people who think that with a CMS installation nothing is impossible. After some days and a lot of failed attempts the looking for a professional web designer begins. So, those who know the issues and the hard work that there is behind a well-done website deeply respect our work, other people tend to think of web designing and developing as a low-tech job.

PV.M Garage

(Raffaele Rasini – Creative Bits): Unfortunately not, many see us as computer experts who also make web sites. Actually it is not so, it is a serious and very important job, the figure of a ux/web designer is essential and irreplaceable, their work can literally determine the success or failure of a web service, regardless of the efforts of a marketing department, if made in the wrong way.

(Egidio Bacigalupi – Beaver Lab): It’s a work of precision as for printing. We have to be extremely precise and take care of the details: by doing so, the website will be noticed for sure … But unlike print, you can correct mistakes or change something in the works without compromising it. From my colleagues’ perspectives this is definitely a high-level and high-precision work, while it’s different with clients: they often make everything easy and give little value to our work.

(Michela Chiucini – web is love): It strongly depends on the culture the person has about the web. Those who have got enough knowledge of web issues, of course, appreciate our job. We could say that to learn web design is as simple as to learn to do it badly, that’s why some people think it possible to be able to craft a website in few hours with little effort; clearly these people are the first not to consider web design sophisticated work.

Q: Do you see any remarkable differences between Italian designs and ones in the US and Western Europe?

(Your Inspiration Web Staff): Honestly, I can’t think of anything. I feel that web design is not a sector in which one can find differences resulting from different countries, on the contrary: a sense of aesthetics, development, programming language…all of this is considered universal, bringing web designers closer to one another, something which I don’t think can happen in other professions. We are all part of the same club.

(Piervincenzo Madeo – PV. M Garage): As I said here, in Italy, the ‘ignorance’ about this field is widespread. This creates some problems when we must explain to our client why we want to earn 20 euro/hour, 15 euro/hour or 30. So, there are people who to earn their ‘salary’, they push down the manometer of ‘quality’ and pump the ‘quantity,’ for this reason many italian web designs have an ‘ordinary’ quality (minimum for decency). However there are great designers, I’m thinking of Michela Chiucini , Simone Maranzana , Francesco Mugnai who work and create great designs following recent world wide trends designing their website.

(Raffaele Rasini – Creative Bits): Abroad have more courage in breaking the rules and trying something completely different from the rest, in Italy there is much distrust for everything that is new and it always ends up starting to use a model already tested with little creative freedom.

Creative Bits

(Egidio Bacigalupi – Beaver Lab): I think they are a step ahead and more innovative. They set the rules and trends of the moment…and they like to be different and dare!

(Michela Chiucini – web is love): I see remarkable differences between good designs and bad ones. Nowadays we see good designs from every country. The web is a global medium and every person follows his own taste and cultural background.

Q: And how does all of this work? Is the situation currently good or difficult? Do most customers want to have an English-speaking or Italian-speaking sites?

(Your Inspiration Web Staff): I can say that the situation is improving, businesses have started to understand the potential of the web and of its economic benefits. This is why they are willing to invest online more and more. The first businesses to adopt and take advantage of the web were tourist-related enterprises such as hotels, restaurants, and bed&breakfasts which often enough require a website to be published in two languages (Italian/English), since they must be found easily.

(Piervincenzo Madeo – PV. M Garage): In general, the situation we have here can only improve. But I think we are turning the right way. English-speaking or Italian-speaking, you said… depends on the client’s target and what kind of website they need.

Your Inspiration Web Staff

(Raffaele Rasini – Creative Bits): There are ups and downs as in the other countries, the economy is recovering and the urge is coming back to get back into play with new projects but the time has lengthened, all is progressing slowly and there is still much uncertainty. I am still positive that within 2 years everything will be back to normal as before the crisis. Surely one of the main factors that have most impacted the Italian economy is the decline in exports to other countries so it is now almost obligatory to have a web site in English, even more than other languages like French and Spanish.

(Egidio Bacigalupi – Beaver Lab): The situation is often difficult because to set in projects poorly designed is always more and more complicated. All customers want a multilingual website but they often don’t provide the contents in the main language. Luckily, some recent experiences gave me hope: companies are starting to understand the true potential of a website well structured and rich in content, and they want to invest time and money.

(Michela Chiucini – web is love): The general situation could be definitely improved for the reasons mentioned above. Italian, English (or both) strongly depends on what kind of website customers want and on the market they are turning to. Anyway, even if not strictly required, an english version helps increasing the traffic and makes a website look more professional.