Landing Page vs.

Homepage: What Are The Differences and

When Should You Use Them?

A homepage is usually the first page people see when they arrive at your
website. It should instantly tell visitors who you are and what you do. A good
homepage summarizes your business and gives a broad overview of
everything you offer. It also acts as a hub for the rest of your website, allowing
visitors to poke around and learn more about your business.

A landing page is more of a promotional tool. It focuses on getting the visitor

to perform a specific action—like signing up for an email list, subscribing to a
service, or purchasing a product. Landing pages usually remove the
navigation options (home/about/contact us/etc) to prevent visitors from getting
distracted and clicking away.

Homepage
• Occupies your root domain (www.yourwebsite.com).
• Receives traffic mostly from organic search.
• Links to every other important page of your website.
• Gives a comprehensive overview of what your business does.
• Uses a broad call to action, such as “Contact Us” or “Learn More”.

Landing page
• Is a secondary page on your website (www.yoursite.com/landingpage)
or a subdomain (landingpage.yoursite.com).
• Receives traffic mostly from paid marketing campaigns (search ads,
social ads, email marketing, etc.).
• Omits or downplays navigation options.
• Stays focused on a single topic or offer throughout the page.
• Uses a specific call to action, such as “Sign Up” or “Buy Now.”

User Interface Elements Every Designer Should Know

3 Types of UI Elements
Ideally, we can group UI elements into 3 major categories.

1. Input elements – users interact with them to put in their information or

move to the next step.

2. Output elements – those elements show the result of a previous user

action.

3. Helper elements – further divided into navigational, informational, and

containers, they help to move through the digital product, get information,
and point user’s attention to some element.

Input elements
Input elements are responsible for handling different user inputs. Sometimes
they’re also part of the input validation process. Some of the most used input
elements include:

• Dropdowns – control elements that allow users to select one option from
a list that appears when they click or hover over a specific area. The list
“drops down” when activated, providing a set of choices for the user to pick
from.

• Combo boxes – they combine the features of a text box and a dropdown.
Users can either type a response or select from a predefined list by
clicking a dropdown arrow. This provides flexibility for both manual input
and selection from a set of options.

• Buttons – interactive elements that users can click to trigger an action or

submit a form. They often have labels indicating the action they will
perform, such as “Submit,” “Cancel,” or “OK.”
 • Toggle switches – UI elements that allow users to switch between two
states, typically on and off. They provide a visual indication of the current
state and can be toggled by clicking or sliding.

• Text fields – areas where users can input alphanumeric characters,

whereas password fields are specifically designed for entering confidential
information like passwords. Password fields often hide the entered
characters for security reasons.

• Date pickers – UI elements that facilitate the selection of dates from a

calendar. Users can typically choose a date by clicking on a specific day,
month, and year within the provided interface.

• Checkboxes – small, interactive elements that allow users to select or

deselect options independently. They are often used in lists or forms where
users can choose multiple items from a set.

• Radio buttons – they present a set of options to users, but unlike

checkboxes, only one option can be selected at a time. When one radio
button is selected, any others in the group are automatically deselected.

• Confirmation dialogues – pop-up messages that appear to confirm an

action or decision before it is executed. They typically ask the user to
confirm or cancel an operation to prevent accidental or unwanted actions.
Checkboxes

Checkboxes allow the user to select one or more options from an option set. It is
best practice to display checkboxes vertically. Multi-columns are also acceptable
considering the available space and other factors.
Source: Github.com

Dropdowns

Dropdowns allow users to select one item at a time from a long list of options.
They are more compact than radio buttons. They also allow you to save space.
For better UX, it’s necessary to add a label and a helper text as a placeholder.
I.e. “Select One, Choose, etc.”

Source: Stackoverflow
Combo boxes

Combo boxes allow users to either type a custom value directly or select a value
from the list. It is a combination of a drop-down list or list box and a single-line
input field.

Source: mdbootstrap

Buttons

Buttons allow the users to perform an action with touch or click. It is typically
labelled with text, icon, or both. Buttons are one of the most important parts of a
UI. So it’s important to design a button that the user will actually click.
Source: Evergreen UI

Toggles

Toggles allow the user to change a view/value/setting between two states. They
are useful for toggle between on and off state or switching between list view and
grid view.

Source: Youtube

Text and password fields

Text fields and password fields allow users to enter text and password
respectively. Text fields allow both single-line and multi-line inputs. Multi-line
input fields are also known as “textarea”. Password fields generally allow single
lines for a password.

Source: Shopify.com

Date pickers

A date picker allows users to pick a date and/or time. By using a native date
picker from the platform, a consistent date value is submitted to the system.
Source: Material Design

Radio buttons

Radio buttons allow users to select only one of a predefined set of mutually
exclusive options. A general use case of radio buttons is selecting the gender
option in sign-up forms.

Source: UXPin
Confirmation dialogues

Confirmation dialogues are responsible for collecting user consent for a particular
action. For example, collecting user consent for a delete action.

Output elements
Output elements are responsible for showing results against various user inputs.
They also show alerts, warnings, success, and error messages to the users.
Output elements aren’t neutral by nature. They rely on inputs and various
operations.

Source: Google Doc

4 Common output elements

Alert UI Element

An alert presents a short, important message that attracts the user’s attention. It
notifies users about these statuses and outputs.

Source: material-ui.com

Toast UI element

This refers to a UI feature where an event (user input, server response,

calculation etc.) triggers a small text box to appear on the screen. Ideally, it
appears at the bottom on mobile and bottom left or right side on the desktop.

The difference between “Alert” & “Toast” is that the former doesn’t dismiss itself
and the latter does after a certain time.

Source: Evergreen UI
Badge

This feature generates a small badge to the top-right of its child(ren). In general,
it represents a small counter or indicator. This can be something like the number
of items over the cart icon or online indicator over a user avatar.

Charts

Charts are a common way of expressing complex data sets because they depict
different data varieties & data comparisons.

The type of chart used in UI depends primarily on two things: the data we want to
communicate, and what we want to convey about that data
Helper elements
All other elements fall into this category. The most widely-used helper elements
include:

• Notifications – messages or alerts that appear on a user’s device or

screen to inform them about important or relevant information. They can
 include updates, reminders, or warnings and are often designed to grab
the user’s attention.

• Breadcrumbs – small navigational elements that show the user’s current

location within a website or application. They typically appear as a trail of
links at the top of a page, indicating the hierarchical path back to the main
or home page.

• Icons – graphical symbols or small images used to represent actions,

objects, or concepts. They serve as visual cues to help users quickly
understand and navigate interfaces. Icons are commonly used in menus,
toolbars, and buttons.

• Sliders – UI elements that allow users to select a value from a continuous

range by dragging a handle along a track. They are often used for settings
like volume control or adjusting numerical values within a specified range.

• Progress bars – visually represent the completion status of a task or

process. They typically consist of a filled-in portion that grows as the task
progresses, providing users with a visual indication of how much work has
been completed and how much is left.

• Tooltips – small, contextual messages that appear when a user hovers

over or clicks on a specific UI element. They provide additional information
or explanations about the purpose or functionality of the element, aiding
user understanding and interaction.
Navigational UI elements
Navigational components simplify moving through the site, desktop or mobile app
or any other digital product. Navigational helper UI elements include things like
navigation menus, list of links, breadcrumbs, to name but a few.

Navigation menus – graphical interfaces that present a list of links or options,

allowing users to move between different sections or pages of a website or
application. They are commonly found at the top, side, or bottom of a page and
serve as a primary means of guiding users through the content.

List of links – a collection of hyperlinked text items that typically direct users to
different pages or resources. Lists are often used in navigation menus, sidebars,
or content sections to organize and present a set of related links in a structured
format.

Breadcrumbs: Breadcrumbs are a navigational aid that displays the user’s

current location within a website or application. They appear as a series of links,
usually at the top of a page, indicating the hierarchical path back to the main or
home page. Breadcrumbs help users understand their position in the site’s
structure.

Search fields – input elements that allow users to enter search queries. They are
commonly accompanied by a button or icon to initiate the search. Search fields
enable users to quickly find specific content within a website or application.

Pagination – divide the content into separate pages to improve navigation and
loading times. It involves organizing large sets of data or results into numbered
pages, with links or buttons to move between them. Pagination is often used in
search results, lists, or other content-heavy sections.

Informational UI Elements

Tooltips- A tooltip shows users hints when they hover over an element indicating
the name or purpose of the item.

Icons- It’s a simplified symbol that is used to help users to navigate the system,
presenting the information and indicating statutes.

Progress bars- A progress bar indicates the progress of a process. Typically,

progress bars are not clickable.

Notifications- -It is an update indicator that announces something new for the
user to check. Typically shows completion of a task, new items to check etc.
Message boxes--It’s a small window that provides information to users but
typically doesn’t prevent users from continuing tasks. Message boxes perform
tasks like showing warnings, suggestions, etc.

Modal windows -It’s used to show content on top of an overlay. It blocks any
interaction with the page — until the overlay is clicked, or a close action is
triggered.

Containers UI Elements
Responsible for holding various components together. Widgets, containers, and
sidebars for part of this category. The Newsletter subscription widget of UXPin
blog is also a good example of a container.
That category of UI elements transfers information. It comprises:

• Tooltips

• Icons

• Progress bars

• Notifications

• Message boxes

• Modal windows
Tooltips

A tooltip shows users hints when they hover over an element indicating the name
or purpose of the item.

Icons

It’s a simplified symbol that is used to help users to navigate the system,
presenting the information and indicating statutes.
Source: Dribbble

Progress bars

A progress bar indicates the progress of a process. Typically, progress bars are
not clickable.

Source: Tenor
Notifications

It is an update indicator that announces something new for the user to check.
Typically shows completion of a task, new items to check etc.

Message boxes

It’s a small window that provides information to users but typically doesn’t
prevent users from continuing tasks. Message boxes perform tasks like showing
warnings, suggestions, etc.

Source:
Evergreen UI
Modal windows

It’s used to show content on top of an overlay. It blocks any interaction with the
page — until the overlay is clicked, or a close action is triggered.

Source: Evergreen UI

Group and Containers

How would you separate certain elements from the rest? That is what groups and
containers are for.

Widgets

It’s an element of interaction, like a chat window, components of a dashboard, or

embeds of other services.
Source: Dribbble.com

UI Containers

Containers hold different components together. This includes text, images, rich
media etc. Cards in modern UI design are one of the best examples of
containers.
Source: Material.io

Sidebars

Sidebars also contain other groups of elements and components. But that can be
switched between collapse and visible state.

Source: Semantic-UI
Search bar

The search bar holds the search field and search options. Typically, the search
bar features a search field and filtering option. Twitter’s advanced search is a
great example.
Source: Twitter

Brand Copywriting
Brand copywriting is more than just words on a page; it’s the voice of
your brand. brand copywriting is the art and science of crafting the
written content that represents a brand’s voice and messaging. It’s a
strategic approach to writing that not only aims to persuade and sell,
but also to establish a brand’s identity and values in the minds of its
audience.

As a digital marketer, copywriter, or entrepreneur, understanding

the nuances of brand copywriting is crucial in establishing a
compelling and memorable brand identity. It’s not just about selling
products; it’s about narrating a story that resonates with your
audience and builds lasting connections.

Tips to Create Compelling Brand Copy

1. Understand Your Brand’s Core Values and Personality: Start by defining

what your brand stands for. What are its core values? What personality do
you want to convey through your words? Whether it’s friendly and
conversational or formal and authoritative, your brand’s personality should
shine through in every piece of copy you write.

1. Know Your Audience: Effective brand copy resonates with its intended
audience. Which means that you can’t write effective brand copy without
knowing your audience deeply. The key is to conduct thorough research
to understand your audience’s demographics, pain points, desires, and
language. The more you know about them, the more targeted and
impactful your copy will be.
2. Craft a Unique Value Proposition: Your value proposition should
succinctly convey what makes your brand different and better than the
competition. It’s not just about the features of your product or service,
but the benefits and experiences it offers to the customers. This is
another case where some good, old-fashioned research is crucial.
Analyze what your closest competitors are saying to and offering your
shared audience so you can differentiate yourself from the pack.
3. Use a Consistent Tone of Voice: Consistency in tone helps in building
brand recognition. Your tone should closely match the mission and
values of your company. Whether that’s serious, playful, inspirational, or
educational, ensure that the tone of your brand copy remains consistent
across all platforms and pieces of content you produce.
4. Show, Don’t Tell: Use storytelling to create an emotional connection
with your audience. Instead of just listing product features, tell a story
 that illustrates the benefits and experiences your brand can deliver.
There are many ways to work storytelling into your brand copywriting,
including personal stories, third person stories from popular culture, and
your customers’ own stories through testimonials and case studies.
5. Be Clear and Concise: Clarity is key in brand copywriting. Avoid jargon
and complex language. Your message should be easily understandable
to ensure it resonates with your intended audience. If you have voice of
customer (VOC) data from interviews, surveys, and other sources,
make sure that you use your audience’s own language when
communicating with them. When your ideal customer reads your copy,
they should say to themselves, “It’s like you’re in my head, reading my
mind!”
6. Incorporate SEO Best Practices: While maintaining your brand voice,
you also need ensure that your copy is optimized for search engines.
Use relevant keywords naturally, so your content ranks higher and
reaches a wider audience. After all, the best copy in the world can’t
make an impact if no one sees it.
7. Test and Refine: Finally, always test different versions of your copy. Use
A/B testing to see what resonates best with your audience and
continually refine your approach based on feedback and results.

Example 1: Apple, “Think Different”

Analysis: Apple’s iconic “Think Different” campaign ran from 1997 to
2002 and still stands as a masterclass of brand copywriting. It’s
succinct, yet it perfectly encapsulates Apple’s ethos of innovation
and individuality.

The phrase “Think Different” was carefully chosen. First, it was a

response to IBM’s earlier slogan, “Think.” Also, Steve Jobs insisted
that the slogan be “Think Different,” not “Think Differently,” (which
was briefly considered) because he wanted it to read as both an
adverb and a noun (as in “think victory” or “think beauty”).
Example 2: Nike, “Just Do It”
But “Just Do It” is more than just a slogan; it’s a call to action that
inspires and motivates. This simple, yet powerful phrase captures the
essence of the brand’s commitment to fitness, determination, and
overcoming challenges. It speaks directly to athletes and individuals
who aspire to push their limits. The genius of this copy lies in its
ability to be both universally applicable and deeply personal at the
same time.

BDO: We find ways