Learning session 43: Page structure components

Topic

One of the most important aspects of learning how to create effective page structures is understanding how to use headers and footers. Headers and footers can help to organize and present information on a page in a way that is easy for users to digest.

What I learned

There are many different types of page structure components, but some of the most important ones are the header and the footer. These components are important because they help to control the overall layout of the page and the flow of information.

Header

The header is one of the most important elements of a website or app. It’s the first thing users see when they arrive, so it must make a good impression. Headers should be easy to understand and use, so users can quickly find what they’re looking for.

They should be easy to scan, with clear and concise text. The most important information should be placed in the top-left corner, where it’s most visible.

Designers should make sure that the header works well on all devices. With more and more people accessing websites and apps from their smartphones, headers must be responsive on small screens.

Footer

The footer of a website or application is typically the last thing a user sees. So it’s important to make sure that the footer is designed in a way that leaves a positive impression.

A footer usually contains information such as the company name, contact information, and social media links. The footer should be updated regularly to ensure that the information it contains is accurate.

There are three common types of the footer:

• Simple footer
• Rich footer
• Mini footer.

Simple footer

Simple footers are ideal for minimalistic websites since they do not overpower the rest of the design. Single-purpose websites, such as landing pages, are another usage instance.

The basic type of a footer provides information like:

• Contact information
• Customer-service information
• Terms of use
• Privacy policy

Rich footer

Rich footers contain more information or functionality than plain footers. A rich footer can include a variety of elements such as:

• Global navigation
• Secondary tasks like applying for a job, finding company affiliates, etc.
• A site map
• Social media icons
• Testimonials or awards
• Brands within the organization

Mini footer

A mini footer is a smaller version of a website’s footer that is typically used on mobile devices. It is important to allows users to quickly and easily access important information on a website without having to scroll through a lot of content.

Mini footers can also help to improve the overall user experience by making it easier to navigate a website on a smaller screen.

What challenged me

One challenge I faced while learning about headers and footers was understanding how they could help with page structure. I was used to seeing headers and footers as purely design elements, and it wasn’t immediately clear to me how they could be used to help with the overall structure of a page.

Once I realized that headers and footers could be used to create a hierarchy of information on a page, I found it much easier to work with them. Another challenge I faced was understanding how to use white space to my advantage in my product while practicing headers and footers.