10 Component You Need to Include When Design Website

Rory Florensa
4 min readNov 2, 2023

Hi! Welcome to my medium. Let’s talk here about design.

When designing components for a website, it’s essential to consider both the visual aesthetics and functional aspects. This is components you can include in your web design:

>> Header: The header typically includes the logo or brand name, navigation menu, and possibly a call-to-action button. It should be prominently displayed at the top of the page for easy navigation.

Images by https://pin.it/5vStRqA

>> Hero Section: This is the focal point of the landing page, featuring a compelling headline, sub headline, and a visually appealing image or video that represents the product or service. It should have a clear call-to-action button to encourage user engagement.

Images by https://pin.it/6hB1cnW

>> Features/Benefits Section: Highlight the key features or benefits of your product or service in a visually engaging way. Use cards or columns to showcase each feature, including a concise title, icon or image, and a brief description. Consider incorporating a visual element like an icon or an illustrative image.

Images by https://pin.it/WUTyHvV

>> Testimonials: Display testimonials or customer reviews to build trust and credibility. Use a combination of text, photos, and ratings to showcase authentic feedback from satisfied customers. Consider including a carousel or slider to showcase multiple testimonials.

Images by https://pin.it/2OOXBgf

>> Call-to-Action (CTA): Place a prominent CTA section or button throughout the page to encourage users to take action. Use contrasting colors, clear and concise copy, and a visually appealing design to draw attention to the CTA.

Images by https://pin.it/1V9bqM8

>> Product/Service Showcase: If you have specific products or services to showcase, create a dedicated section to highlight them. Include high-quality images, brief descriptions, pricing information, and any unique selling points. Use a grid or card layout to present them in an organized manner.

Images by https://pin.it/60gqAbU

>> About Us: Provide an overview of your company or project, including its mission, values, and history. Incorporate relevant visuals, such as team photos or an illustration that represents your brand identity. Use a combination of text and images to convey your story effectively.

Images by https://pin.it/5mLvss9

>> FAQ Section: Anticipate common questions or concerns and address them in a Frequently Asked Questions (FAQ) section. Use an accordion-style layout to present questions and answers in a concise and user-friendly manner.

Images by https://pin.it/10D6YSa

>> Contact Information: Make it easy for users to contact you by including your contact details, such as email address, phone number, and social media links. You can also include a contact form for users to submit inquiries directly from the landing page.

Images by https://pin.it/3VMR64O

>> Footer: Design a footer section that includes important links, such as Privacy Policy, Terms of Service, and additional navigation options. Include your copyright information and social media icons for users to connect with you on various platforms.

Images by https://pin.it/1vg5GUW

Note: Maintain visual consistency throughout the components, using a cohesive color scheme, typography, and design elements. Pay attention to spacing, alignment, and responsiveness to ensure a seamless user experience across different devices.

--

--