≡ Menu

20 Best 404 Error Pages By Fortune 500 Companies

404 pagesA 404 error page is like a red headed stepchild — often neglected and, sometimes, even mistreated. After all, developers hope their website visitors will encounter it sparingly or, ideally, not at all. Because of that many web designers have fun with it.

404 error pages can be a great hidden outlet for creativity, but what if the website is the face of a big corporation? How does the corporate culture play into the mix? To answer these questions we decided to check the Fortune 500 companies 404 error pages. All of them.

Considering the resources invested into the top U.S. corporations’ websites (a safe assumption), the 404 pages should get their share of attention. It turned out it is not exactly so.

We found out that many Fortune 500 companies use generic web server 404 pagesSyscoIngram Micro, TJX Companies,  Gilead and Xerox,  to mention a few. This is a rather amazing oversight considering the little effort it takes to customize it.

The majority of the 404 pages, though, provide a directory of links to the different sections of the website for lost visitors. While predictable and safe, they are lacking, most of the time, any creativity.

Finally, a few Fortune 500 companies found a way to create practical yet original 404 pages while incorporating them into their overall brand image. Below are a few examples.

Mattel

Mattel shows a Magic 8 Ball game on their 404 error page!

Mattel’s Magic 8 Ball game idea is very playful — pun intended :-). Unfortunately, the game is made in Flash, and there is no adequate fallback provided — you will not see it on an iPad.

Meet he dogs of Amazon

Meet the dogs of Amazon

The Amazon giant displays random profiles of its workers dogs’. There is a link to a page listing them all alongside their favourite toys, likes and such, and even a Dogs of Amazon calendar! :-). But Amazon is not the only dog loving company out there:

Time Warner Cable

Time Warner Cable

Dish is into plush kangaroos (with nice animation):

Dish Network

Dish Network

[click to continue…]

{ 0 comments }

Designing default avatars with polygonal backgrounds

Whoever started the trend (later made popular by Google), today the default user avatars are usually represented by their name initials inside a colored circle.

While redesigning avatars for smartQ workflow management tool, we decided to spice it up a bit by adding a simple background pattern to the colored avatar circles. Here is the result:

smartQ

We started with a low poly background, to keep the design flat and modern. There are many tools for creating low poly art. SVG was our format of choice as a vector format, so it’s retina-friendly and scales nicely.

We did not want the pattern to be the same for each avatar, so we started with a larger polygonal frame, then applied a circle mask to it. By moving the mask coordinates an infinite number of background variations can be created:

Grayscale polygonal vector background

Grayscale polygonal vector background

We started with a grayscale  background and added colors to it via a color layer on top of the polygon background, then we blended it using CSS Blend Modes. After a few experiments, we found that the “overlay” mode worked the best (mix-blend-mode: overlay). The result is below:

See the Pen Default avatars with polygonal background by Dis (@Dis) on CodePen.light

It does not work in IE/Edge, where it simply degrades to the traditional flat color avatars.

It is a light solution, no JS involved (though it can be used to randomly generate colors and mask positions). It also does not add much to the download time, since low-poly SVGs are small (you can also use a smaller SVG frame, compress it, and even use background rotation for more avatar background variations).

The resulting default avatars look familiar, yet have a new element to them.

{ 0 comments }

We just added statuses to screens — “Open”, “On Hold”, ‘In Review” and “Closed”. You can also filter screens by statuses.

Screen Status

Also, now you can easily hide the closed (completed) design comment from a screen:

Hide closed design comments

{ 0 comments }

Firefly update: Archive projects

Archive

We just added the possibility to archive projects and switch between all/active/archived projects view.

{ 0 comments }

We just released a big batch of updates we have been working on for some time.

The security for projects has been extended with Everybody Else role to make setting the access level for non-team members easy. For example, now you do not need to add people to the project team just to let them post comments into it!
Everybody Else

We also added the integration with all popular cloud storage services. Now you can post new screens or attach files to notes from Google Drive, Dropbox, Box and OneDrive!

Dropbox, Google Drive, Box, OneDrive integration

Adding files to Firefly now became easier as well with drag-and-drop upload support (not supported in Firefox right now).

Drag-and-drop support

In addition to that, we improved the highlight of new screens and notes, added the Settings section and updated a dozen of other things.

We hope you will like the updates, and, as usual, your feedback is welcomed!

{ 0 comments }

2-minute Video Introduction to Firefly

Firefly Intro

We created a short 2-minute video introduction to Firefly that covers its main features. Feel free to share it with your team if they are new to Firefly!

{ 0 comments }

Google updates its logo

New Google Logo

 

Today Google changed its logo and other branding elements to a more modern look. It is a much more geometric and bold design with a san-serif typeface.

SitePoint published a great review in today’s newsletter and Google Design team blogged about how the changes evolved and the reasoning behind them.

{ 0 comments }

BMP file format now supported

Now you can also upload your designs in BMP format (in addition to PNG, JPG, GIF).

{ 0 comments }

Firefly update: Link Mode

Link Mode

We just added the possibility to create links between screens – simply switch to Link mode and click anywhere to create a link area. Those links can be used in View Mode for interactive presentations.

{ 0 comments }

Firefly update: Screen Print View

Print View

Now you can print out not only the screen image, but also all its markers with the comments!

{ 0 comments }