Home page

Source: Wikipedia, the free encyclopedia.

A home page (or homepage) is the main web page of a website. The term may also refer to the start page shown in a web browser when the application first opens.

Website home page

A home page is generally the primary web page which a visitor navigating to a website from a search engine will see, and it may also serve as a landing page to attract visitors.[1][2] Thus good home page design is usually a high priority for a website.[3] For example, a news website may present headlines and first paragraphs of top stories, with links to full articles.[4] Usually, the home page is located at the root of the website's domain or subdomain. For example, if the domain is example.com, the home page is likely located at www.example.com/.

In some cases, the home page is a site directory, particularly when a website has multiple home pages. Wikipedia, for example, has a site directory at wikipedia.org that links to every language-specific home page, including en.wikipedia.org.

Structure

A homepage is oftentimes designed to catch attention, and as such, important elements are positioned at the top in a strict hierarchy of importance.[5]

Hero image

One of the commonly found aspects of a homepage is a hero image, a large eye-catching banner image often containing a photograph or drawing depicting the webpage owner's values, services, etc. as a message.[6][7] Hero images are immediately visible above the fold, without scrolling the page down.[8]

A hero image may have several complementary elements as an overlay, such as the website's logo, a call to action, and a brief description.

  • A website with a wide hero image.

    A website with a wide hero image.

  • Homepage featuring a prominent hero image with logo and description overlaid.

    Homepage featuring a prominent hero image with logo and description overlaid.

  • A biographical website with a full-sized image.

    A biographical website with a full-sized image.

  • A homepage used to bring attention to a mobile app.

    A homepage used to bring attention to a mobile app.

Carousel

A descendant of the hero image is a carousel, also known as a slider. It is a slideshow-like element of the homepage with multiple images rotating every few seconds.[9] Carousels are frequently accompanied by dots and buttons in order to select different images.[10]

Carousels are generally made using JavaScript, but can also be made through CSS animations.[11][12]

In 2013, carousels were a popular element of a homepage, with 52% of top e-commerce websites using the design feature. However, in 2016 only 32% of websites used one.[13]

See also

References

  1. ^ "Home Page as Landing Page examples - Smart Insights Digital Marketing Advice". 2014-05-23. Retrieved 2016-07-01.
  2. ^ Campbell, Jennifer (2014). Web Design: Introductory. Cengage Learning. p. 76. ISBN 978-1-305-17627-0.
  3. ^ Jakob Nielsen (12 May 2002). "Top 10 Guidelines for Homepage Usability". nngroup.com. Retrieved 4 September 2014.
  4. ^ Kalbach, James (2007). Designing Web Navigation. O'Reilly Media. p. 106. ISBN 978-0-596-55378-4.
  5. ^ "How to structure your content for a better homepage". 99designs.
  6. ^ "Hero Images in Web Design: When, Why, and How to Use".
  7. ^ "Ultimate Guide to Hero Images [Best Practices + Examples]".
  8. ^ "Hero Image: What it is, why you need one & how to create it".
  9. ^ "Everything You Need to Know About Website Carousels". The Creative Momentum.
  10. ^ "Designing a User-Friendly Homepage Carousel". Medium.
  11. ^ "CSS Carousels Examples 2022". Avada Blog.
  12. ^ "CSS-Only Carousel". CSS-Tricks.
  13. ^ "9 UX Requirements for a User-Friendly Homepage Carousel Design".
This page is based on the copyrighted Wikipedia article: Home page. Articles is available under the CC BY-SA 3.0 license; additional terms may apply.