Just how important is the home icon on your site? Does it even matter anymore, or is the symbol somewhat outdated and defunct? One of the most important aspects of an icon is the meaning behind that icon. Will people readily recognize what the icon means when they see it? Even the most beautifully designed home icon is of little use if the user doesn’t know what it does at a glance.

Although the meaning of various icons can be obscure, there are a few universal icons, such as the ones for home, print and search. The purpose of the home icon is to mark a clear path back to the home page of a website. This icon is something the user can click on from anywhere to start fresh from page one.

The fact that the home icon is such a universal symbol makes it vitally important to include in your website. If you want your site navigation to be simple and easy to understand, then you need to figure out how and if you should include a home icon on your website.

There are actually a number of different options you can use to signify a home button on the website. Which one you choose will depend upon the overall style of your website, how modern it is and even if it is a mobile friendly design.

Home Icon Style # 1: Home-Shaped Icon

An outline of a house has been a symbol for “Home” for many years. It can come in many different colors, patterns and outline styles.

It would be quite rare for someone not to know what this icon means, so the key when utilizing this type of home icon is to make sure it integrates with the overall design of your site. You can accomplish this by changing the color, size or outline style. For example, a site focused on products for kids might use an outline that looks like it was drawn with a crayon. On the other hand, a luxury spa might use a much more streamlined outline with straight lines.

Google+ uses a home-shaped icon to indicate the home button for Google Plus.

Home Icon Style # 2: Hamburger Icon

The hamburger icon can indicate navigation. When clicked on, a bigger menu drops down. Typically, the hamburger icon will be located in the upper right of the page, and the home link will be the top link within that navigation.

The hamburger menu is quite simply three lines that essentially represent a bottom bun, hamburger patty and top bun. With the increase in the number of Internet users accessing websites via their mobile devices, this has become an easily recognizable icon that doesn’t take a lot of space but indicates you can access navigation (including home, of course).

Some menu icons use text as well as the icon to indicate the navigation. For example, it might have the hamburger icon and state “Menu.” This makes it impeccably clear to the site visitor what the icon is used for.

However, anyone who has used a mobile device will likely recognize the hamburger menu easily and realize that by clicking on it, they can navigate home or elsewhere on the site. One in every 10 people in the United States who browse the Internet use only a mobile device, so this icon is likely to become more and more popular.

One good example of a hamburger icon done well is Animal Planet’s. Note how the icon is in the upper left and is easily recognizable. The second screenshot shows that when you click on the hamburger icon, you get a drop down menu, and the home link is the first one listed. The overall look matches the style and color of the entire website, too.

Home Icon Style # 3: Text Only Icon

Sometimes the best icon is no icon at all. Text within the navigation that simply states “Home” can get the message across. Another advantage of using text to indicate where the home link is located is that the page will load much faster than if the user has to wait for images to buffer.

One example of this use of style in a design can be seen at CJ Pony Parts. Note how the “Home” text is in the upper left of the page. In addition, it’s in red, so it’s easily spotted. This is a simple, but effective, design.

Home Icon Style # 4: Home-Shaped Icon with Text

You can overcome the uncertainty of what an icon is for by labeling it. You’ll notice this technique on a lot of websites. It simply makes it extremely clear what that icon is for. So, for example, you might add the outline of a house and place the words “Home” just under the icon.

In fact, it makes the website much more usable to add text to icons. While many websites add text under or next to a home-shaped icon, you could also go a bit further and put the text on the icon itself.

One example of this type of design can be found on the website Vivi LeDish. Note how the home icon also has the text “Home” on the roof of the icon.

Home Icon Style # 5: Unique Home Icons

Another idea is to use an icon that ties directly into your branding and overall design. This might not necessarily be in the shape of a house or have text. However, if you place the icon in the right location (upper right or left), your site visitors should be able to at least guess that this is your home button.

Some sites also use their logo as a sort of home button. One example of this would be Amazon.com. They use their Amazon logo as an anchor. Click on the logo, and you are taken to the home page.

An interesting example of a unique home button can be found on Carbonmade. The site uses a little chess piece emblem to serve as the home page icon. In this instance, they place the text “Home” directly under the icon. This makes it abundantly clear to the reader where to click to go to the home page.

One rule of thumb is that users should be able to figure out in five seconds or less what an icon means. Do some A/B split testing, and if your site visitors are struggling to interpret icons, you may need to tweak them to better suit your target demographic’s needs.

AUTHOR’S BIO: Lexie Lu, the author of this article, is a designer and writer. She constantly researches trends in the web and graphic design industry. Lexie writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

In the world of web design, it doesn’t take long for certain trends to get old. One minute, it’s the latest thing, gracing websites across the world. The next… it just looks dated and a little bit tedious. And, as we all know – there’s nothing worse than having a tired-looking design on your latest project.

Not sure which web design trends you should send to the scrap-heap this year? We’ve compiled a handy list to help you. Avoid these at all costs…

1. Don’t fall flat… get Flat 2.0

It’s definitely time to ditch flat design. Heck, even the word sounds uninspiring, doesn’t it? Instead, make the most of skeuomorphism and welcome ‘almost flat’ or Flat 2.0 into your life. It adds energy to your designs, not to mention a certain sense of vintage appeal – which in this day and age, never did any designer any harm. Want to find out more about why standard flat design is so last year? Read this.

2. Hero carousels – or villains in disguise?

We are very much over carousels. They’re bad for SEO, because the lack of content makes it difficult to pump meta data onto the page. They shove content way down below the fold. They’re bad for performance. In terms of ease of navigation, they stink.

In addition to this, they’re just plain inaccessible at times – which is a sure-fire way to irritate the user. We said the same thing about giant full-page splash screens, thinking the situation couldn’t get any worse – then some bright person decided to animate them. Groan. Let’s leave carousels firmly in 2015, people.

3. Skip sound – embrace the awesomeness of silence?

If one thing is guaranteed to make a site visitor scream with frustration, it’s music. It really doesn’t matter if it’s the most awesome song in the world. It’s irrelevant if it was number one in the charts for weeks. When it’s played on loop on a website, it becomes highly annoying, like a wasp at a picnic, buzzing away in the background. We presume that’s not the effect you wanted to create, right?

In addition to driving your audience mad, it’s also a curse for users on networks with a capped data plan – something they won’t thank you for. W3C say that automatic music is bad – which, let’s face it, is all you need to know. Find out more here.

You might be able to get away with the occasional animated or video background – but again, tread carefully and always think about user experience.

4. Long forms for short attention spans. No – just no

It’s astonishing how many big businesses still make the mistake of including lengthy forms on their site – in a bid to squeeze as much information out of the user as possible. However, this often has the reverse effect, causing people to abandon the forms halfway through.

If you’re using forms, keep them short, sharp and as intelligent as possible. Resist asking for information you don’t really need. Make your form as intuitive as possible – there’s nothing more frustrating for the user than having to fill out the form again because something’s gone wrong. If you’re looking for great form creation tips – check out this site.

5. Kill the pop-up

We don’t really need to slam this one home, do we? Pop-ups began to get annoying several years ago, yet it’s alarming how frequently they still ‘pop up’ in designs. Occasionally, use of pop-ups is unavoidable – for example if you’re promoting a product. However, if you must use them, please offer something good in return for your target audience – or risk their wrath.

The Next Web have some excellent tips on how to do pop-ups the right way. Read it and learn, guys.

6. Avoid background overload

We, designers, sometimes get a little obsessed with making our sites look pretty. However, when you choose style over substance, you risk affecting user experience – and not in a good way. If information on the page is difficult to locate, then your site isn’t doing its job properly, no matter how beautiful it might look.

In addition to irritating users, the lack of information could also do damage in terms of SEO, with limited meta data and an inevitably high bounce rate. Incorporate stunning backgrounds by all means, but remember what the site’s primary function is.

Have fun designing in 2016!

The best design advice one can ever receive is to never follow a trend blindly. First, check if each feature suits your industry and audience. Does it help you get your message across? How can you benefit from it? Here, I’ve collected some of this year’s most crucial web design trends. Each has its pros and cons, so choose from them wisely.

Mobile-Friendly

Making your site responsive and mobile-optimized became more important than ever, especially after Google rolled out its recent ranking algorithm update. It’s not just about RWD. It’s about rethinking your website’s look and feel. The trend is fast-spreading, but how often do clients order from you using their smartphones? Maybe it’s better to make sure your site looks stunning on larger screens?

Hidden Main Menus

Due to mobile screen limitations many websites hide their main menus on mobile devices when making their websites responsive. You can also see this element on many desktop site versions. Unfortunately, this solution is not quite user-friendly. Some of your audience may have difficulty finding it or understanding the icons. Sometimes, a more old-school way is better.

Scrolling vs. Clicking

Scrolling is much more convenient than clicking, especially on mobile devices. That’s why there are more websites with long pages and several screens of content. In some cases the whole website is turned into a single page. Such designs are often quite convenient for users, but they may become a real problem for SEO. Take SEO requirements into account. Maybe adding another page is not so bad?

Ghost Buttons

Ghost buttons are great. They are not quite call-to-actions, but rather a subtle way to attract users’ attention. To avoid being unnoticed, check the overall page layout from a usability point of view and test the visibility of your buttons.

Large Background Images and Videos

Yes, appealing, large background visuals add a powerful and elegant look to your site, yet not everyone goes for it. Why? First, such elements can be quite heavy and may overload browser cache. Second, in some cases texts and even whole menu items and menus become invisible because of the color scheme of the background image.

Oversized Typography

The bigger, bolder, better type was the trend of 2014 and it has maintained its popularity. It’s an efficient way to grab your visitors’ attention. It’s especially great if combined with large background images and ghost buttons. Just don’t forget about the copy. Your message should be short, catchy, and smart.

Storytelling and Interaction

Speaking of content, sometimes words are not enough. Let your website tell your story. With fancy animations and fun interaction ideas, you will make your clients say, “Wow!” This is not going to be easy though. Be prepared to compromise on things like accessibility, cross-browser compatibility, page loading times etc.

Trends come and go. The best thing to follow is common sense. Be careful and listen to yourself. Keep an eye on your competitors and get inspired with the leading brands, but remember that the main goal for most websites is to serve business needs of their owners (generate leads and sales) and not just bring fun to the visitors or win design awards.

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

No, we are not just talking about great looking colors here. More than 7 to 15 percent of males are color blind. Also, as people keep growing older, they have difficulty reading low contrast text. In addition, many of the websites today are viewed on smaller devices, such as mobile phones, and when out in the sun, color appear different. Small screens also make it difficult to read text that does not stand out from its background color. That constitutes a significant number of people with a need for high contrast text.

That’s the reason why a color contrast check is mandatory if you want your website to be accessible to most people. The color contrast used in your website needs to take into account the needs of people who are on the spectrum for color blindness, those using smaller devices (and different light conditions), and of course, the elderly.

Compliance to WCAG 2.0 (Web Content Accessibility Guidelines) norms ensures the accessibility of a website to color challenged people. If you did not do the color contrast check before designing your website, you might have to discard some of the vibrant colors or shades you have chosen.While it’s not a great position to be in, it’s nothing to panic about either! Checkmycolors.com’s color contrast tool can help you quickly find out which of your colors may not be WCAG 2.0 compliant.

That said, making your website accessible to color blind people does not mean you need to go for a bland and colorless website. Far from it! In fact, paying such close attention to your colors will enable you to develop greater sensitivity to design your website with colors that are even more vibrant ie visually accessible and give your website even greater appeal. Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

Understanding the Spectrum of Color Blindness

The term ‘color blindness’ actually refers to a broad spectrum of color vision impairment. Not all afflicted people are blind to the same colors. The common types of color blindness are:

•  Protanopia: reduced ability to see red colors
•  Deuteranopia: reduced ability to see green light
•  Tritanopia: reduced ability to see blue light
• Achromatopsia: reduced ability to see most colors

Protanopia and deuteranopia are more common while the other two are very rare. That does not mean we cannot use red and green in websites. It just means we need to be sparing in the use of these colors.

WCAG 2.0

While talking about contrasts, it’s not just images we need to look at. Color contrast for text plays an important role as well. WCAG 2.0 (guideline 1.4.3) norms dictate the minimum contrast that we need on webpages when displaying textual content. The color contrast between the foreground or textual color and the background color can range from 1 to 21. The minimum requirement is a ratio of 3:1. That leaves us free to unleash our creativity safely with all the other shades and hues.

Level AA and level AAA are used to differentiate the amount of rigor required in the color contrast.

• Level AA

○     For normal sized text, the minimum color contrast should beat least 4.5:1.

○     For large sized text, the minimum color contrast should beat least 3:1.

• Level AAA

○      For normal sized text, the minimum color contrast should beat least 7:1.

○      For large sized text, the minimum color contrast should beat least 4.5:1.

Integrating checks into your workflow

Instead of waiting until you finished designing your website, it is a good idea to integrate contrast checks into your workflow, so you do not need to re-do or change your color scheme later. Doing the work up front, during your design process, makes sure you have it handy once you start execution. So how do we go about it?

1. Map out your desired color scheme. Jot down a quick list of text and background colors you wish to use on your website. Feel free to refer to other websites using accessible color contrasts. When starting to build your color palette from scratch, Color Palette Accessibility Builder and Color Extractor are good tools to use. As the name suggests, the Color Extractor website extracts the colors from a website of your choice to help you build your own palette. Of course, your example website should have colors that are accessibility compliant. A good rule of thumb is to use cool colors for the background and warmer ones for the foreground text.
2. Check whether chosen colors are accessible. Traditional methods used colored goggles to do a contrast check for color blindness. However, we now have several online simulators that do the job. Checkmycolors.com  can help you check whether your colors and text aer WCAG compatible.Paletton.com, WebAim and color-blindness.com are other online resources to screen out inaccessible colors.  lets you quickly check color contrasts for accessibility. Paciellogroup offers you a free downloadable tool to do the same job.
3. Create a mockup or use placeholders to build content and use the selected colors to build a sample website for further testing.
4. Run a grayscale test. It is easier to judge color contrasts in grayscale compared to viewing website in color. After you are done choosing your color palette, converting all your colors to grayscale can be of help to evaluate the color contrasts used in a website. Gray-bit.com is among online resources available for your grayscale check.
5. Test on color blindness simulators to screen out non accessible colors. Chromatic Vision Simulator and VisionSim are among free mobile apps which help you check your colors for various kinds of color blindness.
6. Double check your buttons and CTAs. Using colors to indicate the functions of buttons is not enough. In some cases, red and green change to some other colors. You then realize the need to also have contrasting text to explain the button function.
7. Adjust your colors, hues and fonts to bring them within accessibility values. Tanaguru Contrast-Finder will suggest other colors if the colors you selected do not offer sufficient contrast.

By following these steps you can make color contrast a de-facto part of your web workflow. The wide range of tools and simulators available today ensures that you don’t waste time, and effort, in figuring out the right contrast and colors.

Are you already including color contrast checks in your workflow? How do you go about it? Share with us in the comments on Facebook or Twitter.

Are you ready to let the world know about you as a web designer? If your answer is yes, then this post is for you. We’ve compiled a list of Web Design Awards you might want to participate in this year. Some of those awards are free and some require registration fee. Some of them are conducted just once in a year; other nominations are done monthly, weekly and even daily. Choose the ones you like the most and may the force be with you. Good luck!

1.      European Design Award

Submission Deadline: February 21

Submission Fee: starting from EUR 40 (for students) and EUR 140 per single standard submission.

The European Design Award is the most reputable design award in Europe. It has 35 separate design nominations and you can take part in all of them simultaneously. The only limitation is its cost – you pay EUR 140 per submission. For multiple submissions, you get volume discounts. Each nomination has three levels of distinction: Gold, Silver and Bronze. Gold winners receive a trophy during the official Award Ceremony. All winners additionally get some recognition and promotion, as they will be published in the ED-Awards catalogue and on the website itself.

2.      D&AD Award

Submission Deadline: February 18 (may be extended until February 25)

Submission Fee: starting from GBP 105.

The non-profit British Design & Art Direction organizes this prestigious international award each year. If you are between 18 and 23, you can participate in their New Blood Award section. Otherwise, you have to register for the Professional Awards section. There are many nominations available with different categories. All winners get a Yellow, White or Black Pencil as recognition of their achievements. New Blood Award winners can use their Pencil Marks in their portfolios, CVs etc. The winners’ works will be showcased at the D&AD Awards Night, as well as their international exhibitions and events. This Award is a great opportunity to get some buzz around your name in a designer community. However, it’s not the cheapest one.

3.      Awwards Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: EUR 40 for a one-time single website entry, EUR 120 for an entry followed with a featured profile in the Awwards directory.

According to the site, they get more than two mil unique visitors per month. So if your website is featured as “Site of the Day” you will theoretically get visible for at least 100K visitors. All winners will be published in an annual book “The 365 Best Websites Around the World”. Depending upon the category, you have an opportunity to get official Awwwards certificates for the following nominations: Site of the Day, Site of the Month, Site of the Year and Honorable Mention. Judging criteria include 40% design, 30% UX, 20% creativity and 10% content. Once per year, Awwards.com holds a conference, as well as price-giving. So in addition to online exposure, you have a great opportunity to get featured at that event.

4.     CSS Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: USD 30 per submission.

CSS Design Awards is a global platform showcasing the best web designers and their works. They say they are one of the top two most visited online web awards in the world (according to Alexa) and the most followed awards group on Facebook. The winners for Site of the Day get site badges and certificates. The winners of Website of the Year and Designer of the Year additionally get a handcrafted trophy finished in brushed chrome and gold. Judging criteria include the design itself, creativity, functionality, usability and code.

5.      CSS Winner Award

Submission Deadline: no deadlines, sites can be submitted all the year round

Submission Fee: free of charge.

CSS Winner is an international platform awarding best designs on a daily, monthly and yearly basis. The main evaluation criteria are the design, user experience, creativity and content. All winners get exposure on the website and through social media network and obtain a CSS Winner certificate. The main jury consists of nine designers from all over the world, and 80% of the total ranking for each website takes the opinion of those designers. The community can also participate and vote – their opinion is taken into consideration as 20% of the total ranking.

6.      Favourite Website Awards (FWA)

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: free of charge.

FWA is a UK-based design award portal for designers from all over the world. They were the first online award program that received over 200,000,000 website visitors. FWA accepts websites, online games and online movies/animation for nominations. The main criteria are creativity, originality, design, and content. A remarkable feature of this portal is their collaboration with Google’s Creative Sandbox. The winners of the Site of the Day nomination are reviewed with Google, and if Google finds the website suitable for their program, this particular website is featured on Google’s Creative Sandbox.

7.      Promotion & Marketing Design Awards

Submission Deadline: Early-bird entry March 20, regular submission deadline – April 17

Submission Fee: starting from USD 40 for early-bird student submission, up to USD 85 for regular single entry.

This award is held by the HOW brand, which initially started as a print magazine in 1985. With time, they grew into a bigger hub for designers providing design competitions, online design courses, job portal and more. The award itself contains several categories and supports single entries and campaigns. They provide discounted prices for students and are quite flexible with submission fees. The winners get a free trip to the 2016 HOW DESIGN LIVE event and will be published in HOW’s FALL 2015 issue.

8.      CSS Awards

Submission Deadline: new submissions accepted at any time

Submission Fee: USD 9.99 per submission, or alternatively, it’s free in exchange for a Like or Follow on Facebook and Twitter.

This website accepts website designs from all over the world. They have quite a tricky system for submissions – you can submit your website for a small fee of USD 9.99 or alternatively you can like them on Facebook or Follow in Twitter and then send a message with your website URL + Agency / Freelance URL. This is partially the reason why they have around 43K followers on Twitter and around 7K Likes on Facebook. But at the same time, they have 1,192 followers on Pinterest and 2,127 pins, so they’re still worth your attention.

This website also has an additional website exclusively for submissions of one/single page websites. All terms and conditions are the same.

9.      Webbyawards.com

Submission Deadline: January 30

Submission Fee: USD 345.

The Webby Awards is one of the most prestigious international awards, presented by the International Academy of Digital Arts and Sciences (IADAS). They have several categories, and each category has two honors – The Webby Award and The Webby People’s Voice Award . The winners for the Webby Awards are determined by the International Academy of Digital Arts and Sciences. The winners of the Webby People’s Voice are selected by the online community. For the previous year they received 12,000 entries from over 60 countries. This year, the submission deadline was December 19, but they extended it until January 30. Even if you won’t manage to participate this year, you have some time to thoroughly prepare for the challenge for the next year.

There are lots of other awards and contests worth mentioning here, but we’ve limited the list to an uneven amount intentionally. Hopefully, you’ll propose to us the tenth award you like best. So what award would you like to be mentioned here? Share your thought with us on Facebook and Twitter.