Designing a Website’s Introductory Text: Tips and Examples

Sep 12 2011 by Jacob Gube | 17 Comments

Designing a Website's Introductory Text: Tips and Examples

Many websites choose to display a short explanatory text in a prominent position of their web page layouts to inform visitors what the purpose of the site is. This introductory text, when crafted well, can help users quickly decide whether they’re in the right place or not.

A website has mere seconds to let visitors know that they’ve found what they’re looking for, and your site introduction is your brief elevator pitch towards that.

We’ll explore the use of website introductory text in various types of websites to gain a better understanding of trends and techniques for effectively designing them.

At the end of this article, there’s also a showcase of some excellent web designs that have great website introductory text for our further exploration of the topic.

Design Goals

There needs to be a purpose for every component of a website. They each have to support the goals and purpose of the site.

In this way, a thoughtful approach to the design and the copy of your website introductory text is important.

The goals of your site introduction are:

  1. To let the visitor know, as quickly as possible, what the website is about.
  2. To give hints as to what action (or actions) they can take immediately (call to action).
  3. To provide contextual information regarding what to expect should the visitor decide to spend more time on the site.

What follows are some design considerations congruent to the three goals above.

The Text Should Be Concise and Useful

Your copy should be clear and succinct — 1 to 3 sentences should suffice — akin to the abstract of a scientific paper or an excerpt of a blog post.

Short intro text improves usability by giving the web page some context, but if it’s too long, users tend to skip it according to an article by leading usability expert, Jakob Nielsen.

A thoughtfully designed and informative introduction helps first-time site visitors swiftly determine what the site is about. A well-crafted site introduction text is actionable.

The example below from Polecat is an example that highlights the importance and effectiveness of being concise. In only five words, the site intro text successfully encapsulates what the site is. Despite the brevity of the copy, it clearly informs visitors that it’s the site of iOS developers.

Show Off Your Company’s Personality

Since a site’s introductory text is commonly the first thing a new site visitor will see when they land on your web pages, it’s a great chance to display your company’s personality, just like how your website’s design theme (e.g. dark, clean, grunge, minimalist, etc.) embodies your company’s personality.

Below is friendly duck‘s site introduction: It’s short, simple, catchy and written with personality.

Be Direct

Internet users don’t have a lot of time; they want to know as quickly as possible why they’re on your site. You can do this by being clear and to-the-point with your message. For example, the introductory text of FreeAssociation tells visitors who they work with and what they do.

Offer Your Value Proposition

Informing visitors what you have to offer is a good idea. This is referred to as your value proposition. What value do you provide your customers? What makes you unique?

The Project365 site, for example, promises their customers that they’re not an ordinary new media agency and that they can deliver clever designs that attract visitors to their clients’ web properties — a promise not all design agencies can confidently make.

Place It in a Distinctive Layout Position

The site introductory text is something you’d want your visitors to see immediately. Typically, the goal is to have it be seen first.

Distinctive Design Techniques

There are many distinctive design techniques you can employ to draw the user’s attention.

You can apply methods related to visual weight, visual hierarchy, negative space and even the Figure-Ground Gestalt principle.

Additionally, you can use a tool like Google’s Browser Size to determine what percentage of the Internet population will see your site intro text on the initial page load.

Top Left

One technique that will almost always work is placing the site intro text at the top of the layout. Whether by ingrained Internet convention or actual human tendency, web users look towards the top of web page layouts when they’re in search for important site components such as primary navigation menus and search features.

The top-left of a web page’s layout, according to an eye-tracking study done by Jakob Nielsen, is a prime location because user attention leans to the left.

Notice how the Campaign Monitor site has their site’s introductory text at the top-left of the layout. They use other distinctive design techniques such as spacing (its distance away from other design elements enhances its distinctiveness), a unique type treatment and visual hierarchy.

Top Center

Another prominent location is top-and-center. The Fork website shows how placing your site’s intro text at the top-center of the web page layout helps to garner it attention.

Leverage Surrounding Visuals

Another way you can grab the eyes of site visitors is through the use of surrounding visual elements that reinforce and direct the eye gaze towards your message. Notice the three illustrations that all help to reflow your eyes towards the site introductory text on Carbonmade‘s home page.

Draw User Attention Using Typography Techniques

There are several typography composition techniques you can employ to further enhance the attractiveness of your site’s introductory text. Let’s discuss a couple.

Typography Size

One typography styling technique is size. Bigger objects are easier to get to (according to Fitt’s Law) and the Gestalt principle of Similarity indicates that if an object is significantly bigger than other objects around it, it will stand out as a distinct object.

Notice how big the site intro text is on Teehan+Lax. Regardless of its low contrast versus its background and the vividness of surrounding areas, it still manages to attract your attention due to its relative scale.

Text Styling

A unique text effect that has a high contrast against its background can also go a long way towards a site intro text being able to garner attention. Notice the simple gradient text effect on the Great Bible Tales site and how it’s able to help draw your eyes toward their site’s value proposition.

Consider Using a Short Heading

Some messages need further explanation. A popular strategy in this situation is to use a brief, keyword-rich heading followed by a short paragraph. Twitter demonstrates this technique with a big, bold heading followed by a short sentence.

Close Proximity to Calls-to-Action

The worst thing that can happen after reading a site’s intro text is to fail to realize what the next potential action can be. Decrease the chances of the site visitor hitting their browser’s back button by having relevant calls-to-action close to your message.

As shown below, Clearleft gives you the link to their About page through a call-to-action ("See what Clearleft can do for you.") immediately after their site’s intro text.

MailChimp does the same by providing an eye-catching call-to-action button that you can click on to register an account with their web service.

Showcase of Introductory Text in Websites

Let’s look at how the design goals, trends and techniques we’ve discussed above are applied to other websites by dissecting other real-world examples of well-designed site introductory text.

Bellstrike

A succinct, direct-to-the-point site intro text can be found on the Bellstrike website. The text styling is unique and the font size is huge — two popular visual design strategies to achieve distinctiveness, like we talked about earlier. Two beautiful call-to-action buttons sit ready and waiting at the foot of the introductory text once the site visitor has finished reading. The content is useful, offering the site’s unique value proposition of quickly providing websites to non-profit organizations. Positioned at the top-left of the layout, the site intro text is guaranteed not to be missed by incoming site visitors. Also, notice the surrounding visual — the hanging bell on the left of the site logo — that helps direct eye flow downwards toward the text.

Square

Square’s site introduction is a concise value proposition: you can start accepting credit cards using your mobile device if you use their service. The text is situated at a visible top-left position in the layout using a big, striking font style. A convenient call-to-action web form for signing up for a free account below the site’s intro text makes it easy to take action. Take note of how the surrounding visual — the index finger and thumb points to the left — redirects your eye flow to their sign up web form and site intro text in case it strays too far to the right.

Fish

This site has the introductory text on the left of the layout (a prominent location since, as stated earlier, our attention leans to the left of web pages). The introductory text is short, concise and useful, with the value proposition of combining and reimagining French and Asian cuisines. Below the introductory text, you can find a call to action enticing you to view the restaurant’s menu.

Fatburgr

Fatburgr uses a captivating headline that utilizes a simple but effective gradient text style as well as a large font size. The headline is followed by a short and personable sentence describing what Fatburgr does as well as proposing their value to the customer ("Do you know the nutritional content of what you’re ordering? …Fatburgr gives you nutritional information…"). Two huge call-to-action buttons can be found in an eye-gaze-drawing location at the foot of the site intro text.

31Three

31Three’s value proposition is that it offers creative services to developers. We can see the site intro text positioned at the prominent top-left of the layout, using a large font size as well as more-than-ample empty space surrounding the message.

CulinaryCulture

The site intro text of this site is concise and useful. Within 10 words, they’ve managed to describe what the site is and for whom the site is for. The short intro text is followed by a three-column thumbnail gallery that outlines some of the things you can do on the site (such as sharing and reviewing your favorite eateries) followed by a call-to-action link to sign up for an account on the site. Aside from that, we can see the use of a beautiful, eye-grabbing text effect, the use of a large font size and a placement for the text in a distinctive layout position, top-and-centered.

Blue Pixel

A three-word heading using a big, bold font style is followed by a one-sentence value proposition in this site’s intro text. Notice how the surrounding visual, an electric guitar, is angled in such a way as to aid eye flow towards the site introductory text.

Web Typography for the Lonely

A simple statement of what the site is serves as this website’s concise site introductory text.

Sunday Best Websites

A big and high-contrast headline contains the value proposition of Sunday Best Websites. Two paragraphs follow the headline describing in greater detail what service they provide and what their design style is like. The site’s intro text, as can be seen in many of the examples we’ve already talked about, is followed by a call-to-action link that describes their project methodology. The use of a surrounding visual helps direct eye flow to the left, with the arms of the illustrated gentleman outstretched, serving to place the attention back towards the text.

Vegas Uncork’d

The site introductory text of Vegas Uncork’d, a website aimed at promoting a Las-Vegas-based wine and food festival, has a captivatingly big headline, followed by a two-paragraph description. The headline features a distinctive text style, making it very attractive to the eyes relative to its surrounding elements.

Igor Zagnienski

A concise introductory text written in the first-person voice is situated on the top-left of Igor Zagnienski’s site layout. The introductory text’s high contrast against its background as well as plenty of space surrounding it makes it eye grabbing.

Electric Pulp

It’s hard to miss the site intro text in this website: it’s humongous and has a high contrast against surrounding elements. The site’s intro text is personable and, most importantly, concise; in three words, new site visitors already know what the company does.

Assistly

Assistly summarizes their value proposition in 9 words with the emphasis on what they do, which is to provide users with the facility to manage their customer support department. A large font size, the use of a drop-shadow text style and a prominent top-center location serves to attract the user’s attention.

Bitfoundry

A big, eye-grabbing heading styled uniquely and attractively, followed by a two-sentence intro paragraph describing who, what and where Bitfoundry is, serves as this site’s introductory text. The text is placed at the top-center of the layout. Space, a high-contrasting color and size is used as visual design devices to provide the text some distinction against surrounding elements.

N.Design Studio

Nick La’s design blog uses big, bold fonts in its site intro text. In a handful of words, the intro text manages to answer who the site owner is, what the purpose of the site is and where the site owner operates from. He uses a surrounding visual of a koi fish to anchor the message to an attractive image.

iSaidWhat?!

There are a ton of mobile apps out there, and thus, an iOS app’s website needs to get to the point quickly or risk the user looking elsewhere. At the top-center of iSaidWhat’s mobile app website is a short intro text detailing the value proposition of the app.

Kickoff

Here you can see this web-based collaboration tool’s simple site introduction located at the top-center of the web layout. The surrounding image below it helps focus your eyes towards the center of the page layout.

Blue Sky Resumes

At the center of this site’s layout, you can see the Blue Sky Resume’s site intro text. It consists of a captivating heading that plays on the wants of potential clients to be one-of-a-kind (the site’s value proposition), followed by a short paragraph describing what they can bring to the table if you choose to hire them. The text has big fonts and a drop-shadow text style to give it prominence. The surrounding visual of a cookie helps ensure that the intro text is anchored with a distinctive image that will help bring the text attention.

Analog

Positioned at the top-center of Analog’s web layout is a concise site intro text outlining what they do for their clients. Space surrounding the text is an effective tool for gaining a viewer’s attention.

co: collective

The site intro text here is short and to-the-point. A more-than-ample amount of whitespace surrounding the text, the top-center text placement as well as the web page layout’s visual hierarchy arrangement serves to give the text block its distinctiveness.

Conclusion

Designing your site introductory text, if you choose to have one, is important because it’s one of the first things visitors will see when they visit your site.

Using succinct copy, placing the intro text in a highly visible position, using common typographic styling and leveraging surrounding visuals to your advantage are among the popular trends used in today’s site introductory text.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

17 Comments

Mike B

September 12th, 2011

Good article and examples Jacob. I like Fork’s large simple text.

Glenn

September 12th, 2011

Jacob – great article ! And (surprisingly) the first article on this topic I have seen. Businesses — especially small businesses need all the help they can get with writing good home page copy. Small businesses seldom farm it out, and their first thoughts go to the very NON-keyword rich phrases like “Welcome to…” :-)

Senko

September 12th, 2011

Nice article full of great tips. I’m working on my new online portfolio and will use a lot of the tips.

Majid Ali

September 12th, 2011

I am starting a new blog and I think these tips will help me to make my blog a super blog.

Thanks,It was treat to read the article.

Mat

September 12th, 2011

What I love about this article is not only the useful information, but all the fantastic examples of it all in practise. Also, some of the services exemplified here have peaked my interest on their own!

AnhTra

September 12th, 2011

Really nice article! Thanks for your sharing.

Daquan Wright

September 12th, 2011

Wow, great case study Jacob. I just had to go through every example and view the website for myself. xD

I don’t yet have a logo, but I plan to get one for my redesign (working on my first now). I was going to place my logo at the top left, after observing other websites. But now that I look at these websites, perhaps I should put my intro copy in the top or center as well. Perhaps I’ll link the logo and have it guide the user to the:

1) Intro Copy or 2) Call to action

This is so exciting, we can always test how the changes we make to these elements will affect users as well.

If you got the time, Jacob, I’d appreciate you taking a look at this and giving me some brief thoughts. :D

Link: http://imageshack.us/f/850/introcopy.png/

Aravind Ajith

September 13th, 2011

great article! I really take extra care when I design introductory text / welcome banners. here is my startup’s site – http://www.fidiz.com/ Please check the intro text there

Jeremy

September 13th, 2011

It’s important that introductory text is not only well presented but that it is also immediately comprehensible. A couple of the examples you have given (“We partner with brands to deliver world-class digital experiences” and “We define and design customer experiences in the digital channel”) are little better than the “exceeding your expectations” style of empty marketing waffle. It’s true that your eyes go straight to the text, but then you start scratching your head. What sort of “world-class digital experience” are they trying to get me to buy? I presume the company makes websites, but it isn’t at all obvious. “Customer experiences in the digital channel” sounds like a poor translation from a foreign language. Underneath the baffling text, there’s a link to “Our Services”, but how many casual visitors are going to bother with that?

Shagufta

September 13th, 2011

Nice article get lot of interesting ideas and info
really helpful!!!!

jenrandall

September 13th, 2011

Enjoyed the read and screenshots.

Jacob Gube

September 13th, 2011

@Glenn: 100% agree re: small businesses, and not just regarding web content, but also a lot of things related to web tech. That’s part of the reason why I’ve started contributing to American Express OPEN Forum, which is a site for small- and medium-sized business owners. I write about web stuff there, especially focused on spending your budget the right way (things you should pay for, things you can get for free, “did you know you could do this on the web?”, etc.) I got my start working with small business owners (and I was one myself) so aside from you designers and developers, they’re a group I’m also very passionate about.

@Mat: Awesome! Exactly my intention with the showcase at the end; how the techniques are applied in existing websites.

@Daquan Wright: Firstly, try out imgur.com instead of imageshack.us. :)

About your intro text: I think you can be more concise and direct to the point. There are a lot of words you can cut out and I think you can say the same thing in just two sentences. To a first-time visitor, having to read two paragraphs is a big time investment!

Irina

September 14th, 2011

Great article and some really inspiring examples, as always. Just wanted to say thanks for your efforts!

Mihai @ Freshome

September 15th, 2011

The article is great and very well researched ..what I wanted to see is more examples of blogs and how this can be applied to them.

Jen

September 16th, 2011

Love the examples you gave in this article.

David

September 19th, 2011

Great showcase, that webtypographyforthelonely site has some really interesting examples.

Abe

September 22nd, 2011

A nice article.
I found it very useful.
Thanks for sharing.

Leave a Comment

Subscribe to the comments on this article.