8 Homepage Design Myths Debunked

Homepage design has always been kind of an art of its own alongside other activities that go into building a complete website design.

In some way, a good homepage needs to be able to stand as a separate creation – one that achieves its specific goals. Those goals, even though they have a direct connection to the overall goal of the website as a whole, should be much more laser-focused.

I do realize that this might sound a bit vague, so to make it clear, let’s look into the eight myths on homepage design that everyone should know.

Myth #1: A homepage needs to be pretty

Granted, no one enjoys looking at an ugly homepage design, but that being said, a homepage being pretty is not the end game.

In other words, focusing only on making your homepage design pleasing on the eye won’t get you far in the direction of making your client happy (at least over the long haul).

There’s one thing that matters a whole lot more than just the visual attractiveness of a homepage, and that is the homepage’s ability to achieve its main goal.

Every homepage should have its purpose – the main reason for which the homepage was created – so when working on the design, one of your most important tasks is defining that purpose.

You can try answering the following question to make your work easier:

What is the main thing that you want your visitors to do after they see the homepage?

For example, is it subscribing to a newsletter or some kind of a membership program? Maybe it’s going to the blog and interacting with the posts there? Maybe it’s looking into the products/services offered on the site? Whatever it might be, make that your no.1 goal when designing the homepage.

If it ends up being an eye candy too, then it’s just a side bonus.

One of the best examples of goal-driven homepage design on the web is … Craigslist. It’s ugly, but it gets the job done:

craigslist

Myth #2: A homepage needs to cater to everyone

Or in other words, the myth says that no matter who comes to view your homepage, they should be catered to and happy with what they find.

However, this tends to backfire more often than not. Even though it may seem counterintuitive, alienating some of your visitors right away can have a positive impact on those visitors who do decide to stay. This is because, at that point, they already know that what the website has to offer is almost tailor-made for them.

Let me give you an example from an entirely different kind of business – the restaurant business. It’s a common mistake among many restaurant owners (at least judging by watching Kitchen Nightmares) to offer a multitude of dishes and thinking that this way, “everyone will find something for themselves.” But in practice, it backfires because the average customer has no immediate indication if the restaurant is a good fit for them.

For instance, if you fancy a pizza, you will go to a pizzeria almost 100% of the time. You won’t go to a place that serves tens of different dishes where pizza is just one of the items on the menu. Does the pizzeria alienate some of the customers just by saying right away that their main dish is pizza? Yes, of course. But do they lose anything in the long run? Not really.

Therefore, make your homepage design a pizzeria, so to speak. Show that what the website has to offer is pizza, and make it clear that if someone doesn’t like pizza, they shouldn’t be there.

Myth #3: A homepage needs to present a lot of information

We can safely say that the age of elaborate homepages is behind us.

Homepages simply no longer need to be huge in order to achieve their goals.

In fact, less is more.

Less has always been more.

As we’ve already discussed here, the main job of a homepage is to give the visitor a nudge towards a certain action that you want them to take. And as it turns out, displaying more than a minimum-effective-dose of information works against you.

This is confirmed by Nielsen Normal Group in one of their studies. They say that around 79 percent of users scan every new webpage they see, while only 16 percent read it word by word. So in the end, making a page more concise results in a 124 percent increase in usability.

Let’s take a look at the homepage at Contently.com, for example:

contently

There are just three lines of text there, followed by two calls to action: “learn more,” and “talk to us.” After reading those three lines of text, the visitor already knows if they’re intrigued enough to click either of the buttons. And that’s all you need when building a homepage.

Myth #4: A homepage needs a slider

Designing with sliders is an incredibly lazy approach.

After all, it’s quite easy to place a slider right beneath the main navigation and put some banner-like graphics in it. Most commonly, you’d use 3-4 slides and put them on an automatic rotation. It’s a very popular technique and thousands of homepages opt to do it.

However, as data confirms, sliders are incredibly ineffective at getting conversions, retaining visitor’s attention or doing anything else that would produce a positive effect.

For example, here’s what Chris Goward of WiderFunnel had to say about them in one of his research posts:

“We have tested rotating offers many times and have found it to be a poor way of presenting home page content.”

At the end of the day, the information we have at our disposal these days simply suggests one good solution:

Don’t ever use sliders on your homepages.

Myth #5: A homepage needs to talk about “you”

Where by “you” I mean the person/business you’re building the site for. So for example, “you” means talking about the products that the business has to offer.

Now, just talking about “you,” per se, isn’t bad at all. You have to do it to some extent, otherwise you won’t create any sort of a connection with the visitor.

However, what matters here is the wording you’re using.

For instance, saying something like, “We’ve been in business since 2004. See our offer by clicking here,” doesn’t achieve anything at all in terms of resonating with the visitor.

What will resonate, though, is building your homepage design around the concept of, what’s in it for the visitor.

For example, let’s take a look at the homepage at Due.com:

due

It doesn’t say, “We’ve been in the tracking business for X years.”

It does say, “Due.com helps you keep track of your time and lets you invoice like a pro.” It is almost entirely visitor-centered.

In a nutshell, make your homepage about them, not about you.

Myth #6: A homepage needs to showcase company news

Really, please don’t.

People generally don’t care about what’s going on on the inside of a company.

Why? Again, there’s nothing in it for them.

In essence, any sort of company news has very little connection to the visitor and their needs, unless the visitor is an investor or the website is meant to be an internal company website, in which case, you are clear to show company news on the homepage.

Myth #7: A homepage needs to look the same on all devices

The idea of designing websites for multiple devices is quite a new chapter in web design history. Not that long ago, the only thing we had to consider was whether our site was looking as good on 800×600 as it did on 1024×768.

But times have changed, and now we have a multitude of screen sizes and resolutions to deal with. However, thinking that your homepage needs to look the same on all of them is a dangerous route to take.

The main problem with this reasoning is that a person visiting your site from a mobile device is probably in a completely different mindset than a person visiting from desktop.

For instance, if someone visits a restaurant’s website from desktop, they probably want to get familiar with what the restaurant has to offer, what’s on the menu, and so on. But when they visit from a mobile, the no.1 thing they’re interested in is the address and the opening hours.

Good homepage design should at least try to cater to different sub-groups of visitors based on the device they’re using.

This can be achieved with responsive design to some degree. Through CSS classes, you can set certain HTML blocks to have more focus, or to not get displayed at all.

In short, a homepage doesn’t need to look the same everywhere, but it needs to help the visitor in solving their current issue.

Myth #8: Once you build it, it stays

Homepage design should never be a one-off task.

The unfortunate thing is that your first attempt at designing a homepage for any site (that’s any site) won’t produce the optimal result. This is all due to the fact that you simply can’t predict how the homepage is going to perform in the real world.

You can only assume how the visitors will interact with the homepage, but you can’t know for sure. This knowledge comes with time and by testing different concepts.

Therefore, rather than hoping that your design is going to rock right off the gate, build at least two alternative versions and split test them against each other.

How different do the designs need to be? This is up to you. You can start with some simple differences in copy, or more significant differences in the overall layout. The point is that there needs to be a difference and that you need to set a metric in place that will allow you to judge which version is better (this is usually done by tracking clicks on certain links or the occurrences of a visitor filling out a form).

Once you have some raw data, you can scrap the lower-performing version of the homepage, create a completely new version, and then run it against the previous winner.

Doing this at least a couple of times is how you build a quality homepage.

Conclusion

There’s a lot more that could be said on the topic of homepage design mistakes, and we didn’t even get to the technical issues (like using images that are not optimized, or fonts that are too small).

I guess we’ll leave that for next time.

So what do you think, are you guilty of falling for any of the myths described here?

How To Create Compelling Narratives Through Web Design

You start by typing your worries into a large star. Soft music plays in the background as the user is guided through a short, gentle meditation. As the story unfolds, the star becomes smaller and smaller, as does the problem within it. Eventually the problem and the star completely disappear into the galaxy, reminding the viewer how small one problem can be in comparison to the vastness of the universe.

Created by San Francisco-based web developer and designer Marc Balaban, Pixel Thoughts recently soared to the front page of Reddit and quickly amassed almost one million unique visitors.

The mindfulness project took Balaban less than 36 hours to create. It’s an example of how powerful simple web design can be in telling stories and connecting with an audience.

“Marshall McLuhan said the medium is the message, and right now the web is the ultimate medium,” Balaban said. “The reason why I love web development is it gives you instant access to tell stories and to create feelings and emotions out of people.”

“The web combines a really unique way to tell a story and to have a captivate audience,” he continues. “You can tell some really engaging stories in a very short period of time because so many people have access to it.”

Front-end Frameworks: Getting Started with Bootstrap

When I started developing websites way back when, I noticed that there were similar chunks of code and page structures that I would use over and over again. I had this grand idea that I would create templates to reuse for similar projects. The closest I got to this was to create code snippets for my text editor. (See how to create snippets with Dreamweaver here.)

Though creating snippets are really useful, getting from design to code faster or creating quick prototypes can be achieved using front-end frameworks.

What is a Front-end Framework?

In web development, the term front-end generally refers to the content you can see and interact with in the browser (e.g. clicking a green button) and is usually written in HTML, CSS and JavaScript.

A framework is a set of pre-written templates, code snippets and modules that are meant to aide in creating websites and apps faster while still using standards-compliant code. Frameworks are useful to get you up and running quickly. Also, looking at the source code and reverse-engineering the code is also a great way to learn!

There are many to choose from ranging from basic frameworks that provide just a grid to full scale frameworks that include modules such as typography styles, buttons, forms styles, tabs and JavaScript functionality. Find a framework that suits your needs and also has good documentation for usage.

Set yourself up for UX success: 5 key questions to consider before starting a project

While every project and client will have unique needs, there are a few crucial questions you can ask yourself at the outset of any undertaking to make sure the user experience is getting off on the right foot.

1head-1

Who am I designing for?

It is called user experience after all! The most important piece of creating great UX is understanding your audience or users. There are several ways to do this.

  • Analytics data: Where are people coming from? How long do they spend on the site/app?
  • Marketing information or demographics: Who are the target audience? How old are they? What do you know about their habits?
  • Research with users: Best of all is getting up close and personal with end users. You might be able to do this through contextual inquiry, interviews or informal testing of existing products/sites.

The nuggets of information that you are trying to capture are understanding your users’ needs, behaviours and what they are trying to accomplish.

Customer Spotlight: Alexsandre Andrade’s Revved Up FIAT Campaign Website

Like many pros before him, Alexsander Andrade started young. He completed his first course in design and development at the age of eleven. By the age of 13, he’d managed to acquire paid gigs pushing pixels and bringing websites to life. These days he’s still doing just that, working as a freelance designer on a handful of international projects.

“I fell in love with creating after that first course,” said Andrade. “It happened naturally, and since then I have worked in digital and offline agencies, newspapers, marketing departments and design studios.”

Andrade is hooked on the challenge of creating something for the commercial market that is beautiful and not only sells a product, but an idea. Ideally, he prefers to take on research-driven projects so they can be designed to really speak to a target market.

“It’s amazing to me that while people consume creative work each day, they rarely have an idea how much thought and time was put in to get it on the market,” said Andrade.

We talked to Andrade about a project just like this. As part of the team at DSUP Design Studio in Brazil, Andrade designed and developed a campaign website for Maggi FIAT, a car dealership, with the help of Dreamweaver, Illustrator, and Photoshop.

While Andrade had a lot of creative freedom on the project, he felt his biggest challenge was to show the client something different. At the time, he felt that agencies were trying to sell cars online by simply showing visitors features like ABS Brakes and Airbags.

dw_customer_fiat2

“I wanted to show something more than just the typical specifications – I wanted to show the pleasure that this new car could provide a driver,” said Andrade. “The main idea of the campaign was to connect the consumer to the car model best suited to their lifestyle – the best car for travel, for commuting to work or going to a shopping mall.”

The market for selling cars is competitive and Andrade wanted to create a seamless experience for the user through clean and simple design.

“The main idea behind the design was to make the visitor feel a connection between their lifestyle and how the car fits within it,” said Andrade. “I chose to use hexagons as the figure to represent those connections.”

Different sections were created for different car models based on lifestyle activities, and Andrade implemented a call to action button that would direct the consumer to the closest FIAT store for each one. Another important element of the website was the fact that it was responsive.

dw_customer_fiat3

“I choose to use Dreamweaver because it’s easy, practical, and intuitive,” said Andrade. “It allowed me to make the website, the main attraction of the campaign, responsive.”

Andrade leveraged his Creative Cloud subscription, also using Illustrator and Photoshop for design elements and layout.

You can view the FIAT campaign on Behance here.

New to Material Design? 12 Principles You Need to Know

Material design has gotten really popular recently, as many designers have started integrating it into not only their Android projects, but other web-bound projects as well.

Just to remind you, the concept was first introduced by Google in their Google I/O 2014 keynote. This presentation has been viewed more than 1.5 million times to date and it’s still being treated as the main overview of what material design is and how we should be thinking about it.

Flat Design vs. Material Design: What Makes Them Different?

Spoiler alert. The difference is in the details.

For the untrained eye, flat design and material design look very much alike. And please don’t get offended when I’m saying this. No matter how big of a supporter you might be of one trend over the other, you have to agree that the difference between them really is subtle. Subtle, yet crucial, I should add.

But let’s start at the beginning and look into the facts about each of the two design types.

When it comes to flat design, we already covered its basic principles and history a couple of months ago here on the blog. Feel free to see that article (we even had 10 great designers chip in on the topic and share their opinions of flat design’s domination in the current web design landscape).

Intro to Coding and Designing For Accessibility

People use the web in a variety of different ways, but a mistake that designers and developers sometimes make is to assume everyone uses the web in the same way as we do. This is why, especially over the past 12 months, people have started talking about accessibility on the web. Making websites as accessible as possible to everyone including people who are partially or fully blind, people who rely on screen readers, and people who navigate using only a keyboard, is not only becoming a more important conversation among creators, but in many countries it’s now the law.

We sat down with Avery Swartz, a web designer and founder of Camp Tech, to talk about accessibility and why it should be on the forefront of every web designer and developer’s mind.

Experts Weigh In: Mockups – Design Software or Code?

A new project brief comes across your desk. You need to create something to show your client. Do you jump right into your code editor to start mocking something up or do you launch design software? We’re seeing this conversation play out across the web, so we thought we’d ask a few experts to weigh in by sharing their process. Have something to add? Let us know in the comments.