Anatomy of a Web Page



Great Web Designs



• Help to solve problems and provide a great User eXperience (UX)
• A web page / landing page consists of 4 main sections
◇ Header
◇ Hero
◇ Body (with different sections)
◇ Footer

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style



• Modern, retro, image based, text based or combination of two
• Preferred colors and fonts
• If no preference, opportunnity to up-sell by providing additional services like branding and logo consultation

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Header



• Consists of logo and the navigation
• Other elments such as brand, access to login, shopping cart, search bar, social media icons as secondary navigation (separated by using different background color)
• Goal: Easy to find what the visitors need
• Avoid having too much info and minimize the heading so it's not too busy

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Hero Section



• Most important section !
• To grab viewers attention and interests and ask them to do something which is know as Call To Action (CTA)
• CTA can be asking the visitors for contact info (email address), purchase something, subscribe to newsletter in the form of a button
• You have to give the visitors something in return (Irresistable Offer)

Irresistable Offer = Successful UX + Happy Clients


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Body



• Goal: Sell the product / service being offered
• Subdivided in different sections
• Include something like:
Testimonials: provide some form of social proof and build trust
◇ Being feature in media
◇ Video promo
• You may want to include a CTA or a new CTA here

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Footer



• Think of it as the last chance to give visitors what they need
• May include copyright notice, links like privacy policy, support link, social media links, site map etc.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Reference



https://www.upwork.com images/190-1.png


Index