×

The Landing Page

Return Home

Landing
Page

A web presence for everybody.

Take
The Tour

Every website is made of sections that display content and help orient users. Sections can be designed in a variety of ways and combined with other sections to create a unique page layout. The Landing Page has 5 sections: a navigation bar, a masthead, and 3 content sections. Together, these sections can be used to display a variety of content.

Not sure what a website section actually looks like? Check out this reference sheet for a breakdown of each section type.

The masthead is usually found at the top of a page, displaying an image, logo, or slogan. They are also sometimes called headers or hero sections. Mastheads range in size and design, with the primary goal being to grab attention and confirm to users that they have arrived at the correct place.

Though mastheads are an excellent design element, they are not always necessary. If you find you don't need one, you can switch it out for an additional content section for free.

Content sections are inherently flexible, and may contain a wide variety of content depending on your needs. On a single-page website, the first content section often provides an overview of who you are and what services you offer.

On this Landing Page, you're reading content in the 1st content section right now.

Due to the flexible nature of content sections, the second content section can display almost anything. Often, it is used to display staff biographies, or more in-depth information about your services.

On this Landing Page, the second content section is labeled "Layout Examples" and contains image galleries as well as the written word.

The most popular content for final sections to display is contact information, or next steps for the user to take to take advantage of your services. As with the other two content sections, this is not always the case, and this section can ultimately be used to display all kinds of content.

On this Landing page, the third section can be identified by the "Animations & Interactions" label.

The following sections will demonstrate some example layouts, animations, and user interactions that can be used to customize your users' experience and display your content most effectively.

Layout
Examples

This section contains common layouts used to display text and images. This is not an exhaustive selection of possible layouts, just examples to demonstrate what's possible.

These examples have all been created to be mobile-friendly, which means that the layout will change depending on the size of the screen you're using. The different layouts are most easily seen on a desktop screen; on mobile devices, almost all layouts are reduced to full-width blocks.

Text
Layouts

The most common layout for text is a full-width paragraph, like this one. These paragraphs take up the full width of the screen, with margins on either side to create space between the paragraph and the edges of the screen.

Column 1

When viewed on a phone, you'll see this text as a single, full-width row. But on medium and large devices like laptops, you'll see 2 columns.

Column 2

When viewed on a phone, you'll see this text as a single, full-width row. But on medium and large devices like laptops, you'll see 2 columns.

Text can also be made into headings of various sizes and weights to create a visual hierarchy for readers.

Heading 1

Heading 2

Heading 3

Heading 4

Text can also be arranged in a blockquote, like below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna.

The following 3 cards appear in a row on medium and large devices like laptops, but appear singly as full-width items when viewed on mobile devices. The icons on them can be changed out to other icons, or even photos or other images.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pharetra convallis posuere morbi leo urna.

Last updated December 4, 2023
Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Last updated December 4, 2023
Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra convallis posuere morbi leo urna.

Last updated 3 mins ago

Image
Layouts

Images can be laid out in a variety of ways. They can be displayed singly, in groups of images, or alongside text. You can see a few examples below.

On mobile devices, an image of a hiker in a slot canyon will appear above this paragraph. On medium devices like tablets and large devices like laptops, the picture and this paragraph will appear side-by-side. The picture will be aligned on the left, with the the paragraph filing the remaining space across the page.

For this paragraph, an image of a moodily-lit, historic basement from Grafton Ghost Town will appear below this paragraph. On medium devices like tablets and large devices like laptops, the picture and this paragraph will appear side-by-side. The picture will be aligned on the right, with the the paragraph filling the remaining space across the page.

Image
Gallery

For mobile users, the following 6 images will appear one after another, as single, full-width images. On medium and large devices, the images will be arranged in a grid designed to showcase both portrait and landscape images.

Morro Bay, Califorina at sunset A slot canyon in southern Utah
The Ba'hai Temple in Wilmette, IL A winter sunrise captured in Loveland, CO
Wildflowers blooming in the desert A tree growing out of rock in a slot canyon in southern Utah

Thumbnail
Gallery

For mobile users, the following 4 images will appear one after another, as single, full-width images. On medium and large devices, the images will be arranged in a row of thumbnail images. Multiple rows of images can be added to form a grid of thumbnails.

St. Ignatius parish in the spring
St. Ignatius parish in the summer
St. Ignatius parish in the autumn
St. Ignatius parish in the winter

Animations
& Interactions

Animations cause pieces of your website to move, change shape, or otherwise transform. When used judiciously, they can engage the audience, create flow, and provide feedback to the user.

For example, you'll often see buttons animated to get bigger when you hover a mouse over it and change color when you click it. This animation helps confirm to the user that the button is intended to be clicked.

User interactions are pieces of code that allow a user to interact with pieces of the website directly, usually by scrolling, clicking, or typing. They often involve animations of some sort, but can also be something like a contact form, which allows a user to type information and submit it to the website.

Below are some hands-on examples of these two design patterns.

Fade in

This animation is often triggered on page load or when a user scrolls, and causes the text on the page to fade in. For an example of what text fading in looks like, click the button.

Slide in

This animation, like Fade In, is often used when a page loads for the first time. Click the button below to see these two image cards slide in from the sides of the screen.

...

The largest house in a ghost town.

...

The upstairs interior.

Hamburger menu

A classic user interaction, hamburger menus have become ubiquitous in mobile navigation bar design. You'll most often see them at the top of a website, aligned to the right. When you tap them, they open a menu of links to other parts of the website.

Hamburger menus are included in all of my landing pages as a freebie.

Click the example below for a demonstration.

Thumbnail Expansion

Another common interaction, when you click the below thumbnail, it will expand in size for better viewing.

Sunset at Woodlake, Virginia