UI / UX Design

5 Key Points for Homepage UI/UX Design

April 29, 2013

Homepage UI/UX Design – 5 Key Points

A homepage is the gateway to a site’s content, functionality, and overall UI/UX design. It dishes out the first taste of what the site offers. A visitor may leave in seconds if the site does not impress, so the homepage must deliver the primary message quickly. An inviting homepage is the beginning of a great user experience.

Fresh Consulting’s UI Design Framework evaluates dozens of ingredients found in many of the best homepages. Here are five of the points related to homepage UI design:

  1. Focus on the Experience
  2. Make it Easy
  3. Make it Scannable
  4. Use a Clear Call to Action
  5. Assure SEO Fundamentals Are in Place

1. Focus on the Experience

User Experience

A site creates value when people find it and use it. The first step is engaging the target audience by creating something they will want to experience. User Experience (UX) is how people perceive their interaction with the site. UX combines sight, sound, touch, actions, emotions, and social stigma, all with individual context.

A great homepage is much more than a collection of words and images. UX designers focus on making the page not just useful, but enjoyable to use. The focus is on delighting the user.

Give users what they want — and a little more. In addition to enabling users to use your service effectively and efficiently, make them also think, ‘Wow, this application is genius.’ Exceed their expectations desirably. If you do so, they will use your website or app not because they have to but because they want to.” (Helge Fredheim – Why User Experience Cannot Be Designed).


Snowbird Homepage UI Design

Snowbird’s homepage delivers an alluring user experience. The site can be a preliminary piece of the skiing ritual in the same way the smell of buttered popcorn prepares you to enjoy the movie theater experience.

A few ways Snowbird crafts the user experience:
  • Sight: Images of pristine powder
  • Color scheme: White and blue match the mountain vista
  • Accessibility: Most important info is presented first
  • Utility: Real-time data
  • Motion: The forecast details unfold like a physical pamphlet
  • Emotion: Live cameras evoke the feeling of being at the resort

2. Make it Easy


Simplicity is intentionally including the most essential pieces, and intentionally excluding unnecessary pieces. The design and visual elements should showcase the site’s purpose. People should immediately understand what your website is about, and what you want them to do. A homepage can be a summary of other sections of your site or simply guide people to the most important call to action.

Let It Go

The key is to know when to let go. Steve Krug explains “if a site is at all complex even the best Home page design can’t do it all” (Don’t Make Me Think). It’s ok. Some things can wait. Others can live on a secondary page. And a whole lot of things don’t need to be published at all.

This principle is captured by a scene at the end of Indiana Jones and the Last Crusade. The holy grail is just beyond the hero’s reach as he hangs by one hand. “I can get it! I can almost reach it.” His father responds (with the calm sagacity of Sean Connery), “Indiana. Let it go.”

Visit Norway

VisitNorway Homepage UI / UX

The welcome page for Visit Norway embraces simplicity, with impressive results.

Surely there was pressure to include dozens of messages, features, and links on the welcome page. But a decision was made that one thing mattered more than all else for the target audience: seeing the breathtaking landscape. Let nature do the selling. Everything else we need to know can be accessed on the secondary pages. The simplicity of this page helped bring home a Webby award for best home/welcome page.

As everyone knows, pictures are worth a thousand words, and coupled with key messaging, pictures can help users envision all of the great information you want to convey.

3. Make it scannable

Small Bites

We don’t read web pages, we scan them. People absorb more content if the page is easy to understand in small bites. Content is also easier to share across social networks when it’s tightly packaged.

How to make a page scannable:

  • Words – use simple terms
  • Sentences – short and to the point
  • Paragraphs – focus on a single idea, break up the page
  • Bullet points – visualize lists
  • Spacing – use white space liberally
  • Headlines and Subheadlines – give a quick view of content
  • Inverted Pyramid – lead with most important points (within pages, paragraphs, and sentences)
  • Images – worth a thousand words

Modern Homepages

We’re seeing many websites create sections on their home page with clear titles or pictures that are easy to scan. A site can be simple and easy and still be long vertically. Designers are simplifying homepage UI by lengthening the pages and including less information to digest at once. As the user scrolls, they are taking in more supplementary information.

Memory Palaces

Breaking the content into pieces gives the brain anchors to remember ideas. Our memory is hard-wired to look for spatial relationships. (World Memory Champion Dominic O’Brien used a ‘Memory Palace‘ to memorize 1040 random digits in a half hour). This is why it may be easier to remember a 10 digit phone number (e.g. 877 563-7374) rather than a single string of 10 digits without context (8775637374).


Spotify Homepage UI Design

The homepage for Spotify uses a vertical structure for easy scanning. The homepage has 7 sections, each showcasing a banner image and a short message no longer than 40 words. You can understand the complete message by literally scanning the page, reading nothing more than the 15 words contained in the headlines.

The page is structured so one message displays on the screen at a time. This makes the content easier to digest. Additional images, diagrams, and bulleted lists round out the content for people who want a quick overview.

4. Use a Clear Call to Action


The homepage UI should invite visitors to stay, explore, or take action. The call to action (CTA) lays out what the user is expected to do. Users anticipate receiving this guidance on a homepage.

How to design a great Call to Action:

  1. Make it stand out. Size, color, and surrounding negative space can help focus attention on the CTA.
  2. Use a clear label. Use a precise, active verb. “Join now” is better than “memberships.”
  3. Make it look clickable. A button with contrasting color works well.
  4. Limit the number of choices. Many sites only need one CTA on the homepage. If more choices are necessary, pay attention to the positioning within the page. Often, placing a few calls to action in close proximity improves clarity, and helps users compare options.

Turning Point

Turning Point Homepage

The Turning Point campaign’s homepage presents a clear call to action.

  1. The “Donate Now” button stands out with a green shade against surrounding negative space.
  2. The action verb “donate” is precise.
  3. The green button appears clickable. And the designers took it one step further. The entire banner graphic, representing half the pixels above the fold, is a clickable object. This is especially helpful on a mobile device.
  4. The page focuses on the primary action – Donate Now. All other choices are grouped together in the header. This layout ensures the secondary options do not distract from the primary CTA.

5. Assure SEO fundamentals are in place

Content First

As search engines get smarter and smarter, search engine optimization should be about connecting the right content with the right people. “The best way to improve your ranking is to produce great content that people link to” (“The Inconvenient Truth About SEO“). The foundation of great content is an experience that the target users will not forget, and want to share with others. In other words, “make pages primarily for users, not search engines” (Google’s webmaster guidelines).

SEO trickery will only take you so far, and anything black hat will eventually catch up to you, so focus on the basic fundamentals. This includes reviewing the technical SEO points and choosing appropriate keywords, titles, and descriptions that will attract your target audience.

Trek Bikes

Trek Bikes Homepage

For example, Trek Bikes is the leading manufacturer of bikes by US sales. Their website is clearly tailored to people interested in bikes. It showcases bikes, gear, and stories. With this content, capturing their target audience is a downhill race.

We analyzed the basic SEO of trekbikes.com. On the positive side, each of the following elements includes the keyword “bikes”:

  • URL: www.trekbikes.com/us/en
  • Title: Trek Bicycle: The world’s best bikes for road, mountain, or town.
  • Section Heading: We believe in bikes

But Trek also missed some easy points:

  • Banner graphics: No alt tags – should add a quick description, possibly about “bikes”
  • Meta Description1995 – 2013 Trek Bicycle Corporation. All rights reserved. This description should be customized with a more compelling emphasis of key content.

The results? Despite some weak points in the SEO analysis, Trek ranks in the top 5 results for the following searches:

  • Bike
  • Bicycle
  • Mountain Bike
  • Road Bike
  • Bike Gear

Is this because Trek has decent SEO fundamentals? No, it’s because thousands of people link to the Trek website and the brand has been around for dozens of years. SEO is much easier when the whole site is optimized for the target market from the beginning. The amount of time a site has been delivering relevant content matters, and so does the amount of content.

Additional Resources

Homepage UI Design

Hubspot – 15 examples of brilliant homepages and elements of homepage design.
Mashable – 8 Tips for small business homepages.
Nielsen Norman Group – Top 10 guidelines for homepage usability

User Experience

Smashing Magazine – Usability and User Experience
UX Myths – Frequent User Experience Misconceptions

Make it Easy

UX Myths – Myth: more choices and features result in higher satsifaction
Boag World – Three secrets to simplicity

Make it Scannable

Nielsen Norman Group – How Users Read on the Web
UX Movement – Content Chunking
Econsultancy – 14 Fantastic Scrolling Websites that Tell a Story

Call to Action

Smashing Magazine – Call to action buttons and best practices
Boag World – 10 techniques for an effective call to action
limwriter – Craft an Effective Call to Action


Nielsen Norman Group – SEO and Usability
Smashing Magazine – The Inconvenient Truth About SEO

Richard is a Digital Consultant, UX specialist, Certified Public Accountant, Matchwits Champion, life-long logolept, and capsaicin enthusiast.

  • Pingback: 5 Things to Remember About Effective UI Design | Artisan Talent Blog()

  • Scott

    Snowbird’s homepage / website is a failure. I know this is a bold statement but I’ve seen their site come up many times on review blogs. Here’s the thing. Yes, it’s pretty. But, where is it? You have to search, and I mean hard, to confirm that it’s in the state of Utah. Lift tickets and other purchases, don’t confirm the location, etc until very far in the process. The lift ticket purchase experience is so clean they don’t even confirm what exactly you’re purchasing. It sure is pretty… but the IA and content strategy is embarrassing. It’s time for us, as an industry, to get away from championing pretty but poorly planned websites.

    • Richard Rose

      Thanks for the comment, Scott. I emphatically agree with you that a pretty site is a failure if it lacks good content or IA. “The design and visual elements should showcase the site’s purpose.” In this case, Snowbird suffered from regional myopia. For all of us living outside the state of Utah, location likely tops the list of key content (this little detail certainly should be more accessible than 3 clicks deep).

  • very useful information regarding homepage UI & UX

  • Great article Richard, I will check and adapt some of these guides to my website http://sundstedt.se where I think perhaps I could simplify further by removing some right hand side buttons?

  • This was a good read! Thank you for sharing your thoughts. I found this interesting article that may be helpful , check it out http://bit.ly/2aWR4W7.

  • popcorn

    good read

  • Fu Lifang

    Useful for homepage UX design. Thanks for your sharing. I will use it for my website optimization. https://www.user.com.sg

You might also like...



UX Lessons Learned from the Hawaii Missile Alert

Is there such a thing as a user error? Or when errors are made, does the blame lie with the design of the interface? On January 13th, the state of Hawaii realized firsthand the danger of what some are calling a “user error.” If you’re a designer, and see the interface, you’ll likely agree that … Continued



When Out-Of-The-Box Doesn’t Quite Fit, Invest in Your Key Interactions

There is no doubt that many WordPress plug-ins and front-end UI frameworks, like Angular, save massive amounts of design and development time by providing pre-designed and developed interactions. The baseline unedited versions are often robust and provide good solutions for general user needs. We call these unedited versions “out-of-the-box,” meaning, when you first plug it … Continued



The World of Website Accessibility

When building your website, it’s important to account for accessibility, designing your product so that users with disabilities can access it. Your business should care because the number of people affected by disabilities worldwide is large. The World Bank Group estimates that one billion people – 15% of the world’s population – have some level of … Continued

Pacific Science Center

application maintenance and development

Pacific Science Center


mobile development



web design, microsite development


Seattle Public Library

ui/ux design, microsite development

Seattle Public Library