The websites of the candidates for the elections to President of Portugal 2016

Imagem

cms_presidenciais_2016

Today I decided to do a little research about what type of CMS’s website that supported each of the candidates for president of Portugal in 2016.
The WordPress is without any doubt the favorite CMS. But do not win these elections with an absolute majority 🙂

Anúncios

Tools for Examining the UX of Your Website Design

Imagem

by  in Web Design

The typical user upon hearing the word design will almost automatically assume that someone means how all the shapes on the screen come together, how widgets allow you to perform additional options, how different font choices differ from those of their own favorite websites. The fact of the matter is that web design goes a lot deeper than this, certainly a lot deeper than simple layout of a website. Your design is important, it can make or brake a sale, and once you’re at that stage, is where UX (User Experience) comes into play.

UX, or User Experience, when viewed correctly becomes an invaluable part of your brand. It has an immense amount of power over the perception of the users who are visiting your website/product. In simple terms, think of two cars — one used, and one brand new; you take either for a test drive, and while both have their wheels spinning, which one did you think felt better? I’ll leave it to you to answer that question.

Read up: Essential Designing Tools Which Every Graphic Designer Must Know

A good design will always provide a better user experience, so essentially a good UX is crucial for a business to have. It provides an experience to the customer that doesn’t make him question the reliablity or trustworthiness of your brand. Strictly UX oriented designs are more than just design and experience, a lot of credit has to go to psychology and its effects in our regular interactions with the material world.

If the task the user will be conducting is very complex or error-prone, a further approach is to break up the task into smaller steps so that each step can act as a quality gate before the user is allowed to move onto the next. We often see this design solution in online payment portals on retail websites, like Amazon. –source

Smashing Magazine recently also published an interesting article about becoming a leader of UX, envisioning some great points on how to become a great UX thinker. For this post, we will be looking at some of the most used tools in the industry when it comes to analyzing the User Experience of your business websites or projects that you’re working on, with emphasis on learning to understand what our customers really want from us.

Optimal Workshop

User Experience Testing Tools   Optimal Workshop

Optimal Workshop is a company that focuses on helping businesses understand the mental aspects of the design of your websites, and does so with four different products:

  • Treejack — Know why and where people get lost in your content.
  • OptimalSort — Discover how other people organize your content.
  • Chalkmark — Reveal first impressions of designs and screenshots.
  • Reframer — Collect, discover & share qualitative research.

if you need comprehensive info about the way your sites are optimized for content, this is the tool to explore.

UserTesting

UserTesting  Usability Testing Made Easy

UserTesting is all about giving you real-time constructive feedback from real people. With UserTesting you can signup to get a full review of your products in the form of audio, video and transcript. You can also individually signup for a real browsing test where you can watch in real-time as people browse your product/website on all types of devices. You can use your existing customer base, or use the one provided by UserTesting.

Convert

A B Testing Software   A B Testing Tools by Convert.com

It has been a long time since we last mentioned A/B testing on our site, but the last time we did — it was all about learning on how to grow our business with it. Convert is all about state of the art A/B testing tools for agencies, experts and businesses that want to have a foolproof idea of the design choices to make. Great list of features, reasonably priced.

CrazyEgg

Crazy Egg   Visualize where your visitors click

CrazyEgg is all about showing you why, where and what are your users doing on your website, and where exactly do they start to browse and where do they end to browse your site. It can be so vital to know where exactly users cut their connection with your website, since you could rearrange the insight to reflect those changes and have a better chance at keeping users engaged and active.

UsabilityTools

UsabilityTools   Unlock your business growth like never before

The crown jewel of UsabilityTools is their UX Suite. With the UX Suite you can get real people to talk about your visual design in real-time. Get insightful feedback on parts of your design that could be improved for all kinds of situations. On top of that, learn how your design performs in front of a larger audience, what are the flaws that many people notice all the same? There are also options to engage people in surveys to get solid data about your design.

Verify

Design Surveys with Verify

Verify is the fastest way to collect and analyze user feedback on screens, sketches, mockups or a live website. It helps you verify your assumptions and act on data rather than intuition. Here is a full interview with one of the marketing people from Verify, that talks about the deeper behind the scenes action of Verify.

ClickTale

Improve Digital Customer Experience   ClickTale

ClickTale is focused on helping businesses to optimize usability features, maximize the potential conversion rates, as well as to provide deep web analysis that can have a drastic impact on the course of the website. They’ve got their own patented software that allows you to see what your users are experiencing on your website at any given time, so as to allow you to see what kind of potential changes could be made. ClickTale is able to provide benefits such as website optimization (including for landing pages), increase return of investment rates and help with conversions, as well as fix problems with your sites, and improve the overall customer quality/experience.

Usabilla

Usabilla   A new standard in user feedback

Usabilla provides various Voice of Customer solutions that help businesses, e-commerce managers, marketing experts, designers and UX guru’s to create and improve websites based on real user feedback. They’ve got some of the best tools in terms of gathering targeted user feedback, looking at visual analysis and creating amazing surveys.

Usabilla also provides an intuitive reporting dashboard that allows you to monitor live feedback, get an aggregated overview and export the results.

Proto.io

Proto.io   Prototypes that feel real

In our post of wireframe tools, you will find no shortage of apps and tools that can provide prototyping features, but Proto.io is focused solely on that — helping you to build interactive and beautiful prototypes that require no coding. A lot of freelancers have reported this app to be particular useful at the current price that it is.

Inspectlet

Inspectlet   Website Heatmaps  Session Recording  Form Analytics

Inspectlet has built their product around letting you to gain deeper knowledge and understanding of what your visitors are doing on your website, it helps you to see what their natural course of action is when they first interact with your design. The list of features includes analytics, heatmaps, the ability to replay an interaction of a live users. Great stuff all around.

Tools for Examining the UX of Your Website Design

Each tool is built by a different group of people and designers, so each tool will certainly provide a different approach to the most important things to look out in the User Experience category. A web heatmap might be good to understand the rotation of the average user on your website, while interactive surveys can provide a more deeper understanding of the needs of your users. It’s all about being there for the users/customers, they’re the ones shaping the future of your business.

via codecondo.com

The Difference Between Good UI and Bad UI

Imagem

By 

When I visit your page (just like if I visit your house for dinner), I should feel welcomed. Good user interface makes me feel at home. Everything makes sense, and the cat isn’t hopping on the dinner table. Bad user interface is cat hair in your soup–it leaves a bad taste in your mouth and you’re ready to exit stage left quickly.

So, what exactly is user interface, anyway?

Put simply, user interface (UI) is how the site interacts with the user. It’s less about a site’s beauty and more about its usefulness in delivering the product to the user. If you’re a blogger, the product is your point-of-view; if you’re an online candle store, the product is a candle. The purpose of UI is to get the user to the product as efficiently and quickly as possible.

Consider the 4 E’s of Good UI design. UI should always be the following:
-Easy to use
-Easy to understand
-Error-free
-Effective for the end-goal (or product)

Conversely, bad UI design is sluggish, complicated, and generic. And, surprisingly, there’s little gray area. Either you have a thoughtful UI design, or you have a generic blob that doesn’t meet the requirements of your users.

What Does Good UI do?

An effective UI design is intuitive, both in how it interacts with the user and how the user interacts with the site. Good UI design has threads of familiarity. Even if I’m visiting your page or app for the first time, I should understand how it works–and quickly.

A good user interface holds my hand and takes me where I should go. Customers like hand-holding. And, that’s not an insult to your customers. Of course, what works for one site most definitely will not work for another, and that’s why testing is so important. More on that a little later.

What Does Bad UI do?

Bad UI drops you off in the middle of the desert and expects you to make it on your own to the rain forest. It does not lead you where you need to go. Too often, this is because websites try to cater to an impossibly huge demographic, so the core audience is marginalized in favor of appealing to the broader audience.

Here are 10 Examples of UI gone wrong (and how to avoid it on your site):

1. UI is not responsive.

Alex Araujo is a personal site that shows mobile responsiveness.

He’s dead, Jim. In this day and age, having a website that users must pinch to zoom on mobile web devices is embarrassing. Although zooming in isn’t difficult, it indicates that you are out of touch with your users. If you notice that your website gets a fair amount of traffic from mobile devices, you should consider updating your UI to answer the call.

Consider fat fingers and failing eyesight in your design. Not all of us are blessed with nimble finger tips.

2. UI is not intuitive.

Codrops

When you create your website or app, you should already have in mind your target customer. The usability of your design is determined by how easily your target customer can navigate around it. It doesn’t matter if adults aged 18-49 can use an app thats targeted to ages 6-10. When your UI doesn’t make sense to the user, it will be abandoned.

Strive to implement platform conventions whenever possible. Most users expect the location of the search box to be in the upper right hand corner a website. Or visited links to change color. Users will feel at home with design elements that they expect. By all means, be creative, but don’t sacrifice user experience.

3. Design is inconsistent.

Earth911

The tone of your website should be fairly consistent on every page. A reader shouldn’t feel as if they are on a totally different website from one page to the next. Maintain uniform navigation and a decisive tone throughout.

4. There is no target.

Who is your target user? If that is not immediately evident on the first page, you’ve lost. Many generic websites are offered to the masses, but very few succeed.

Remember an important principle, known as Pareto’s Principle aka 80/20 rule.

In this case: 80% of your sales come from 20% of your customers.

This principle is true for whatever type of website or app you have, whether you’re monetizing it or it’s just for fun. It’s infinitely more important to find out who those 20% are, and tailor your website just for them.

5. Social interaction is lacking.

TeuxDeux

Users need to feel validated in choosing to spend time on your site. One of the most powerful ways to fill that need is through touting your popularity. Implement social tools on your website, such as comment forms. Showcase your number of subscribers on your newsletter sign-up. Post recommendations or reviews from satisfied users, with images and links to their websites.

6. There is no direction.

Your Memoir

This point goes back to hand-holding. Figure out what your bottom line is. What do you want users to get from your site or app? Is it entertainment, a good, or a service? Whatever the end-goal, you must lead them to it. When I visit your site, I shouldn’t be met with a lot of information that will possibly distract me from the goal.

This is precisely why a blog plastered with ads doesn’t work nearly as well as a blog with one or two carefully placed endorsements. When you narrow the focus, you control the path.

7. The forms are too needy.

Foogi.me

The only thing worse than a long, drawn-out form is one with unclear error messages. As emphasized in the 4 E’s of Good UI, you want the user interface to be error-free, but form fields will challenge everything you know about usability.

It’s important to allow your users to be humans, and humans make errors. Your form fields should accommodate the user by offering to correct misspelled words or inline error validation. Another good UI design is pre-filled forms, populated from information filled out on other pages within your site.

Also, consider requiring less information from users upfront. It’s already a hassle to register for one more site, so make your registration be as painless as possible, which leads me to the next step.

8. Lack of social login.

Klout

Social login is so important on the web, right now. The seemingly disparate parts are coming together. If you’ve configured your website as its own isolated community, you’ve done a disservice to yourself and your users. Everything is connected.

Instead of asking users to sign up cold, integrate the social login, where you allow them to connect to your site through social media, such as:

  • Facebook
  • Twitter
  • Google+
  • LinkedIn

The benefits are that it’s less work for the user, and it allows you to have more information about that user had they registered to your website cold, like photos.

Of course, be sure to allow users the option to sign up the traditional way. Some users do not use social media, or may prefer to have a separate interaction with your site.

9. It is slow.

Slow is evil. We’re talking seconds, but it can make a huge difference in whether the user sticks around to wait for the page to finish loading. A slow website can hurt you.

To counteract this, implement best practices for website speed. These best practices include:

  • minimizing your HTTP requests by unifying elements and using CSS Sprites
  • combining style sheets
  • enabling compression to reduce bandwidth.
  • Use .jpg and .png and compress those images as much as possible without losing quality. For .png specifically, this is a nice tool I use to reduce the file size: tinypng.com

10. There are readability issues.

Symbolset

Good user interface also tackles content. It’s nice to have engaging content, but if it’s presented in the wrong way, users will not read it, and it may come back to haunt you.

The most important thing you need to know about usability is that most people don’t read, they scan; and if the scan seems interesting, they’ll skim; and if the content is bursting with personality (ahem), then they’ll read. But, the first point is creating scannable text. Do this by using subheadings, bullets and highlighted text.

Next comes the appropriate use of font and size. Text size should always be bigger than what you think, generally hovering around 16 pixels, but compensate for your font.

Last, but not least, is content. Make your content relatable for your target audience and easy to read. Remember, user interface is how the site interacts with the user.
So, now that you’ve had a rundown of the main points of good and bad UI, here are 5 questions you should ask yourself about your current design:

1. Who is your target audience?
2. Why are users coming to your site? What is the user hoping to solve by visiting?
3. Can Grandma use it? Is it painfully simple? If not, start over.
4. Are you effectively leading users to your target?
5. What is the clear solution?

After you answer these questions, it’s time to start testing out your site. Testing is a necessary component to efficient UI. Fortunately, testing can be done easily and inexpensively with automated testing. The key rules to follow when testing, as outlined by Jakob Nielsen, are: Get representative users; ask them to perform representative tasks; shut up and let them do the talking.

Good UI is actually not complicated, at all. It’s about simplifying the focus.

via dburnsdesign.com

Common Design Mistakes

Imagem

What makes a design good or bad? True, it’s subjective to some degree — but ultimately, good graphic design will inspire responses and clearly communicate visual information. Bad design, on the other hand, will impede and muddle that communication. Here are 8 common pitfalls of design and how to easily avoid them:

1. Perfect symmetry

DesignTips

Balance is one of the fundamental principles of design. It refers to the way elements are distributed throughout a layout, and it provides a sense of order and stability. However, balance doesn’t have to mean using perfect symmetry all the time. While symmetry isn’t necessarily a bad thing, it’s a boring and easy way to convey information. By using asymmetry, you’ll create visual interest and spontaneity, and also capture people’s attention effectively.

DesignTips2

2. Not enough white space

DesignTips-Repetition3

Proximity is another major design principle. Related elements should be visually grouped together — this helps people connect information and determine relationships between items. A common mistake is strewing content all over the entire page, which looks cluttered and doesn’t help communicate information effectively. Embrace white space and give each element room to breathe. White space creates contrast, guides people’s eyes in a particular direction, and establishes a clear visual hierarchy.

DesignTips-Repetition4

3. Too little repetition

DesignTips-Repetition

Repetition lends a sense of unity and consistency, and it also improves readability. If you don’t repeat a few visual elements throughout your projects — for instance, certain colors, layouts, or spatial relationships — your design could lack continuity and your reader can’t “tie it all together.” But don’t overdo the repetition either. Otherwise, it will become overwhelming or bothersome.

4. Center-aligning text

DesignTips6

A common newbie design mistake is to center-align chunks of text. Too much centered text looks clumsy and sloppy, and it’s actually harder to read because it gives the text ragged left and right edges. This forces your readers to work harder to find where each line starts, since there’s no consistent starting place.

It’s best to use left- or right-alignment. Save the centered text for headlines and short lines of text only.

5. Too much text in one line

DesignTips7

Reading multiple long lines of text can cause eye fatigue. Content is much easier to read if you keep the measure, or the length of a line of type, short. Research shows that optimal readability is between 45-75 characters per measure, including spaces.

6. Poor kerning

DesignTips8

Kerning simply refers to the individual spacing between two letters. It sounds minor, but it can make a huge difference. If two letters are too close together, it can make words look messy, unclear, and difficult to read. If kerning is done right, it creates a neat, visually organized piece of text.

7. Font and color overkill

DesignTips9

Contrast is an important, powerful design rule. We’re wired to notice differences, and contrast adds focal points and prevents things from looking boring. You can use different colors, typefaces, textures, size, and shapes, especially if you want to emphasize an idea, but don’t overdo it.

For example, the last thing you want on a landing page or brochure is a chaotic mélange of excessive fonts. Not only does it look disruptive and distracting, but our eyes have a hard time scanning multiple typefaces. You can experiment with contrasting fonts, but limit it to 2-3 at the most, and make sure they match the tone of your project.

The same idea goes for colors: too many colors can make your design look garish, overwhelming, and cluttered. Stick to 2-4 colors, and be conscious of how your text looks on top of those colors.

If you’re looking for good fonts, check out our “Fun Fonts” lightbox. And for inspirational color combinations, try our Palette tool, where you can search for images by color palette.

8. Using rasters

DesignTips-Repetition10

Raster images are made up of pixels, and these are your typical jpg/jpegs, tiffs, gifs, bmps, and pngs. They’re resolution dependent, so when you enlarge them, they become pixelated and blurry because you’re stretching the pixels. Vectors, on the other hand, can be scaled up or down without losing any quality, because they’re made up of geometric shapes like points, lines, and curves. Shutterstock has the largest vector collection in the industry, so if you’re looking for inspiration, check out some of the vectors in our popular Geometric and Linear collection lightboxes.

Without good design, even the best, most powerful idea gets lost in the mix. By learning how to avoid common design mistakes, you’ll be able to create content that looks clean and professional, while also conveying your message effectively.

via shutterstock.com

Free Ebooks for Designers & Developers

Imagem

books_w1024

Whenever you are a newbie designer, or an advanced pro, the Web always has some interesting reading for you. Looking for a little experience in wiring SVG, building web apps or becoming a full-time freelancer? Well, there is no need to drown in hefty books. There are a lot of short, but useful ebooks which can help you become a pro in a particular subject. And the best part of these ebooks is that all of them are completely free to download!

So, scroll down and enjoy a showcase of 15 free ebooks for web designers and developers to take your skills to the next level. Some are available as PDF and other formats, while others can only be read online.

1. Pocket Guide to Writing SVG

In this guide, you’ll find a detailed introduction to writing SVG (Scalable Vector Graphics) and get an understanding on where to start. Using clear examples of fruit images and brief description of attributes, you’ll learn SVG step by step with this handy pocket guide. Also available in Portuguese.

Author: Joni Trythall

Available: Read Online

2. Speaking JavaScript

This ebook would be useful for both newbie Javascript programmers and for seasoned JavaScript programmers as it features the topic in-depth. The author continuousyly blog about Javascript and his other interests on his blog2ality.com

Author: Dr. Axel Rauschmayer

Available: Read Online

3. Adaptive Web Design

Learn the origins of progressive enhancement, its mechanism, philosophy, and a lot of practical ways which you can apply progressive enhancement principles using JavaScript, HTML, and CSS in this 6-chapter book.

Author: Aaron Gustafson

Available: Read Online

4. 27 Page Type Classification eBook

The 27 pages of this short ebook will walk you through the key classifications for typography. It covers a quick history for each classification and core characteristics of the style.

Author: Jacob Cass

Available: PDF

5. 11 Things to Do with Every New WordPress Install

This guide includes 11 awesome tips on how to build a great WordPress site. If you’re a newbie on this matter and who is just going to install WordPress, this ebook was written for you.

Author: iThemes Media

Available: PDF

6. Building Web Apps with Go

This is a 15-chapter ebook by Jeremy Saenz, which will teach you how to quickly build web applications using the Go programming language.

Author: Jeremy Saenz

Available: PDF | ePUB | Mobi | Read Online

7. Go Mobile With WordPress

It’s never too late to turn your site mobile. Learn what is responsive design, mobile sites and mobile apps, and the tips you need to turn a site mobile-friendly.

Author: iThemes Media

Available: PDF

8. HTML Canvas Deep Dive

It contains exercises, interactive examples and walkthrough lessons to get you started on building your canvas app. It is advised that you should know a bit Javascript and HTML before going into this book.

Author: Josh Marinacci

Available: Read Online

9. 10 Keys to Great Landing Pages

In this really short ebook you’ll get to know the key differences between landing pages and home pages, why they are so important, and how to build smart cool landing page, all in less than 20 pages.

Author: iThemes Media

Available: PDF

10. Book of Speed

The book of speed by Stoyan Stefanov is an online, free ebook about web performance. It begins by focusing on the business implications of web performance: why speed matters to the bottom line, and then moves on to changes that can make the performance better.

Author: Stoyan Stefanov

Available: Read Online

11. A Practical Guide to Designing for the Web

This ebook written by Five Simple Step’s founder Mark Boulton. The ebook covers 5 main chapters including topics like research and ideas, colors, typography, layout and what to expect if you are going into the world of web design.

Author: Mark Boulton

Available: PDF

12. PHP: The Right Way

There is so much outdated info on the Web that leads new PHP users astray. This ebook if here to stop that. PHP: The Right Way is an easy to read and understand ebook with PHP best practices and links to authoritative tutorials.

Author: Josh Lockhart

Available: Read Online

13. Essential Career Advice for Developers

This book was written by the founder and CEO of iThemes, specifically for developers. It will tell you how to build your portfolio, work with clients, develop good communication skills, and inspire you to keep learning and exploring.

Author: Cory J. Miller

Available: PDF

14. So You Want To Be A Freelancer?

Do you want to be a full-time freelance web designer, but have no idea where to start? This ebook will tell you all pros and cons of a freelance web designer career, along with some practical tips how to build a strong business in this field. You’ll learn how to make money, be more organized, find new clients, and more.

Author: iThemes Media

Available: PDF

15. Magic of CSS

There are six chapters encompassing the box model, layout, table layout, color, typography and CSS transitions. The book is easy to understand, well written and full of interactive examples to keep things interesting.

Author: Adam Schwartz

Available: Read Online

via hongkiat.com

What Makes a Great 404 Error Page?

Imagem

No one wants to think website visitors are spending time on error pages, but it happens. The 404 error page is one place that these interactions happen rather frequently. Design it in a way that speaks to users rather than encouraging them to leave your site.

More memorable and less frustrating 404 error pages are the most successful. They can also be the most fun to design. So what can you do to create the best 404 page for your site? Here are a few tips, tricks and gallery of great examples.

What is a 404 Error Page?

404 page

Website visitors land on a 404 error page when they try to visit a page that does not exist. This can be because the page has been removed, the server or internet connection is down, users have clicked a broken link or typed a URL wrong.

Typically 404 error pages result in one of the following messages:

  • 404 Not Found
  • HTTP 404 Not Found
  • 404 Error
  • The page cannot be found
  • The requested URL was not found on this server

When it comes to the overall design of 404 pages there are two options – a generic 404 page or a custom 404 page. Generic pages just spit out the messages above with no regard to the design. Custom pages are those that you design and create options for. You must have access to the host server to do this. (That is not something we will go into here, but you can learn more about it from A List Apart.)

Good custom 404 error pages tell users what to do if they get misdirected in some way. Pages should include usable information that will help a visitor stay on your site and find the information they are looking for. (Hopefully they will have a nifty design as well.)

Basic Must-Have Information

404 page

To be most effective a 404 error page should be somewhat simple in nature. It should tell users that there is an error (obviously) and what options they have to move forward from this page.

What a 404 page should not have is a bunch of technical jargon. (You don’t want to scare users, do you?) In all reality, you probably should not even use the headline “404 Error” because many of your users won’t have any idea what that means. Stick to something with more meaning, such as “The page can’t be found.”

There are some other pieces of information that you must have on the 404 page. Remember, the point is to keep visitors clicking if they found the page in error, not lose them.

  • A strong headline or text explaining to a user why they are here. It is jarring when you land on a webpage that is not what you intended. Make sure users know they are not on the right page, but they are on the right website.
  • Search. Make sure the 404 error page has the same search functionality (and in the same location) as the rest of your site. That way users can look for the page they intended to visit.
  • Links to your homepage and sitemap. Likely this will happen as a design element that includes a header or footer that matches the rest of the site.
  • Minimal information otherwise. Consider stripping away complicated navigation. If a user gets to a page in error, only give that person a few options that will result in success. Too many options here could further frustrate or confuse the user.
  • Include a obvious call to action. Tell users what to do next.

Make 404 Pages Usable

404 page

Part of the design process when thinking about 404 pages should be usability. Include features that make the page both visually appealing and functional for the lost user.

Google has a list of great suggestions for information to include on a custom 404 page in its webmaster tools. These tips include:

  • Tell visitors clearly that the page they’re looking for can’t be found. Use language that is friendly and inviting.
  • Make sure your 404 page uses the same look and feel as the rest of your site.
  • Consider adding links to your most popular articles or posts.
  • Think about providing a way for users to report a broken link.
  • Make sure that your web server returns an actual 404 HTTP status code when a missing page is requested so that it does not show up in search results.
  • Use the Enhance 404 widget to embed a search box on your custom 404 page.
  • Use the Change of Address tool to tell Google about your site’s move.

To that list of tips is one more for designers: Be creative. A 404 page does not have to be boring if it is technically sound.

Design 404 Pages With Purpose

404 page

When you are thinking about the design of a 404 error page, first consider how it works in relationship to the rest of the site. What is the mood or tone of your overall design? How can this page match that feel?

Great error pages mesh seamlessly with the site they live on. If your site has a light and humorous tone, so should the 404 page. The colors and imagery should also have a consistent design. Be careful though in the design not to blame the user for landing on the wrong page. (This happens more frequently than you might think.)

Think about the design for an error page as you would any other page in the overall design scheme.

  • Maintain design consistency. Use the same color, typography and image styles that are integrated on other pages of the website.
  • Maintain branding. Using the same logo, header and footer treatment will help users recognize your site.
  • Keep it simple visually. Less is more when it comes to error pages.
  • Don’t make users scroll. This is a one-screen design.
  • Avoid too many gimmicks. While it is a good idea to maintain the tone and feel of your site and brand, too many “extras” can make users forget what they were looking for in the first place.
  • Apologize and be empathetic. It’s ok to be sorry that a user landed in the wrong place.
  • If your site requires a login, add a place for it. (Did the error happen because the user needed to be logged in?)
  • Be creative. Or funny. But test the page first. Make sure random users “get it.”
  • If you uses “404 error,” add a second line of text telling users what it means or what they need to do next.

12 Great Examples

There’s nothing like hitting a great 404 error page. It eases the frustration of a bad or broken link. Here are a dozen pages that are sure to make you want to stumble upon an error.

Deviant Art

404 page

Gig Masters

404 page

iFolderLinks

404 page

Lego

404 page

LimpFish

404 page

Magnt

404 page

Mattel

404 page

ModCloth

404 page

NPR

404 page

Steve Lambert

404 page

Titleist

404 page

Tobi

404 page

Conclusion

It can be hard to think of designing a page that is the result of an error as fun or a place to showcase some creativity, but it an be. Designing an effective 404 page is a mix of simplicity, usability and design flair.

via design shack