SlideShare a Scribd company logo
Website Header Design:
What Makes It Good &
Examples
Prepared by Weblium
How does website header look
like?
For example
a unique website header
Key tips to
Experts
say
1024
1920
0
500
1000
1500
2000
2500
1 2
Size of the website header, px
#1. Consider
Navigation
Beforehand
• the most important
buttons to your business
to create conversions
F I N D
and
A D D
#2. Choose a Good
Font
At least two
clear colors for
visual interest
#3. Use High-
resolution Images
brand message your concept
the products or
services
your value
#4. Consider Using
a Shrinking Header
make the header
shrink when
your visitor
scrolls
#5. Express Your
Brand Identity
Harmony in everything
from the logo to the color
pallet
#6. Use Effects to
Engage the Visitors
Listen, dude.
Effects.
More them.
What keys are
required in every
website header?
Logo & Brand
Identity
Navigation
Page Title
Search Bar
Shopping
Cart
User Profile
Link
Login/Logout
Notifications CTA
Contacts
Successful
examples
#1. Draftium
#2. Digital Women 2020
#3. Yuval Rechter
… making mistakes in website header
design
For Product Website
For Nonprofit Community Website
For Portfolio Website

More Related Content

What's hot

Client project presentation
Client project presentationClient project presentation
Client project presentation
JoeHeadford
 
Timeline cover designing
Timeline cover designingTimeline cover designing
Timeline cover designing
clicksbazaar
 
Web design in switzerlandblog
Web design in switzerlandblogWeb design in switzerlandblog
Web design in switzerlandblog
smartbusinesstwv
 
Web design in switzerlandblog
Web design in switzerlandblogWeb design in switzerlandblog
Web design in switzerlandblog
smartbusinesstwv
 
What Makes Good Design and How To Design It? By Charlene Bond
What Makes Good Design and How To Design It? By Charlene BondWhat Makes Good Design and How To Design It? By Charlene Bond
What Makes Good Design and How To Design It? By Charlene Bond
Charlene Bond
 
Creating A Visual Brand Identity For Business
Creating A Visual Brand Identity For BusinessCreating A Visual Brand Identity For Business
Creating A Visual Brand Identity For Business
Marketing Gem Solutions
 

What's hot (6)

Client project presentation
Client project presentationClient project presentation
Client project presentation
 
Timeline cover designing
Timeline cover designingTimeline cover designing
Timeline cover designing
 
Web design in switzerlandblog
Web design in switzerlandblogWeb design in switzerlandblog
Web design in switzerlandblog
 
Web design in switzerlandblog
Web design in switzerlandblogWeb design in switzerlandblog
Web design in switzerlandblog
 
What Makes Good Design and How To Design It? By Charlene Bond
What Makes Good Design and How To Design It? By Charlene BondWhat Makes Good Design and How To Design It? By Charlene Bond
What Makes Good Design and How To Design It? By Charlene Bond
 
Creating A Visual Brand Identity For Business
Creating A Visual Brand Identity For BusinessCreating A Visual Brand Identity For Business
Creating A Visual Brand Identity For Business
 

Similar to Top keys and examples to make the great website header design

Web Design Services
Web Design ServicesWeb Design Services
Web Design Services
Sanjida Afrin
 
Website Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
Website Redesign ROI - 10 Ideas to Make the Most of Your Website InvestmentWebsite Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
Website Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
Skoda Minotti
 
How to Optimize Landing Pages to Generate More Leads
How to Optimize Landing Pages to Generate More LeadsHow to Optimize Landing Pages to Generate More Leads
How to Optimize Landing Pages to Generate More Leads
Evgeny Tsarkov
 
Company Presentation
Company  PresentationCompany  Presentation
Company Presentation
ICreative - Digitally Explored
 
Fort lauderdale custom signs
Fort lauderdale custom signsFort lauderdale custom signs
Fort lauderdale custom signs
KaMal SachDeva
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
rkraina4
 
Crabrill
CrabrillCrabrill
Crabrill
PhoenixFIFI
 
Web Design for Non-Web
Web Design for Non-WebWeb Design for Non-Web
Web Design for Non-WebASI
 
Tabify Graphic Design - Member presentation for East Bay Business Exchange
Tabify Graphic Design - Member presentation for East Bay Business ExchangeTabify Graphic Design - Member presentation for East Bay Business Exchange
Tabify Graphic Design - Member presentation for East Bay Business Exchange
EastBayBusinessExchange
 
dennis_john_chupein_resume_08_2015
dennis_john_chupein_resume_08_2015dennis_john_chupein_resume_08_2015
dennis_john_chupein_resume_08_2015Dennis John Chupein
 
Thd 2010 brand page kick-off generic
Thd   2010 brand page kick-off genericThd   2010 brand page kick-off generic
Thd 2010 brand page kick-off genericStephanie Bergh
 
Is Your Website Embarrassing You? Here’s How to Fix It
Is Your Website Embarrassing You? Here’s How to Fix ItIs Your Website Embarrassing You? Here’s How to Fix It
Is Your Website Embarrassing You? Here’s How to Fix It
Elly and Nora Creative
 
logo design.
logo design.logo design.
logo design.
Webtoniq
 
Id smm
Id smmId smm
Using Generative AI for Content Marketing
Using Generative AI for Content MarketingUsing Generative AI for Content Marketing
Using Generative AI for Content Marketing
Chuck Aikens
 
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
B2B Marketing
 
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaignThe 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
Radix Communications
 
10 Most Common Website & Marketing Mistakes (And How to Fix Them)
10 Most Common Website & Marketing Mistakes (And How to Fix Them)10 Most Common Website & Marketing Mistakes (And How to Fix Them)
10 Most Common Website & Marketing Mistakes (And How to Fix Them)
IMPACT Branding & Design LLC
 

Similar to Top keys and examples to make the great website header design (20)

Web Design Services
Web Design ServicesWeb Design Services
Web Design Services
 
Website Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
Website Redesign ROI - 10 Ideas to Make the Most of Your Website InvestmentWebsite Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
Website Redesign ROI - 10 Ideas to Make the Most of Your Website Investment
 
How to Optimize Landing Pages to Generate More Leads
How to Optimize Landing Pages to Generate More LeadsHow to Optimize Landing Pages to Generate More Leads
How to Optimize Landing Pages to Generate More Leads
 
LCL Profile
LCL ProfileLCL Profile
LCL Profile
 
Company Presentation
Company  PresentationCompany  Presentation
Company Presentation
 
Fort lauderdale custom signs
Fort lauderdale custom signsFort lauderdale custom signs
Fort lauderdale custom signs
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
Crabrill
CrabrillCrabrill
Crabrill
 
Web Design for Non-Web
Web Design for Non-WebWeb Design for Non-Web
Web Design for Non-Web
 
Tabify Graphic Design - Member presentation for East Bay Business Exchange
Tabify Graphic Design - Member presentation for East Bay Business ExchangeTabify Graphic Design - Member presentation for East Bay Business Exchange
Tabify Graphic Design - Member presentation for East Bay Business Exchange
 
dennis_john_chupein_resume_08_2015
dennis_john_chupein_resume_08_2015dennis_john_chupein_resume_08_2015
dennis_john_chupein_resume_08_2015
 
Thd 2010 brand page kick-off generic
Thd   2010 brand page kick-off genericThd   2010 brand page kick-off generic
Thd 2010 brand page kick-off generic
 
Is Your Website Embarrassing You? Here’s How to Fix It
Is Your Website Embarrassing You? Here’s How to Fix ItIs Your Website Embarrassing You? Here’s How to Fix It
Is Your Website Embarrassing You? Here’s How to Fix It
 
logo design.
logo design.logo design.
logo design.
 
Id smm
Id smmId smm
Id smm
 
Using Generative AI for Content Marketing
Using Generative AI for Content MarketingUsing Generative AI for Content Marketing
Using Generative AI for Content Marketing
 
Creating Your Own Website 11-13-2016
Creating Your Own Website 11-13-2016Creating Your Own Website 11-13-2016
Creating Your Own Website 11-13-2016
 
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
BEST PRACTICE: The seven types of B2B copywriter – And how the wrong one can ...
 
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaignThe 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
The 7 Types of B2B Copywriter… and how the wrong one can destroy your campaign
 
10 Most Common Website & Marketing Mistakes (And How to Fix Them)
10 Most Common Website & Marketing Mistakes (And How to Fix Them)10 Most Common Website & Marketing Mistakes (And How to Fix Them)
10 Most Common Website & Marketing Mistakes (And How to Fix Them)
 

Recently uploaded

Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 

Recently uploaded (20)

Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 

Top keys and examples to make the great website header design