Click images for links
Before you get to work on designing your site, you will want to develop a cohesive "brand kit" or identiity for your site using graphic design tools like Adobe Express or Canva.
To keep your "assets" organized, you will want to create a project folder in that design software for your website.
Keep your color palette consistent across designs using no more than 2-3 primary colors and 1-2 accent colors.
Square 1:1
or Instagram Square post 1080px by 1080 px works well
This will provide the base identity for your site.
Try to choose fonts that are also available on Google.
Use it for the Favicon and Logo in the Settings.
You can also choose to let the Logo determine the color scheme for your site.
Square 1:1
Instagram Square Post 1080px by 1080px can also be used
or any other shape/size of your choice.
It's good to include a "Click Here" prompt on the button to aid in navigation.
You will hyperlink these images to different pages of your site.
I recommend custom size 1366 x 768 px
1600 x 400 px suggested by others.
This size will allow you to create a clean cover photo, but also size down
Tips:
Use only graphics and images/colors in your banner
Avoid text as it doesn't always size correctly for dynamic viewing
Be patient and test the design in different formats - cover, large banner and banner
Use gifs as banners to create movement
Tool: Canva
Upload or select stock video from Elements.
Insert the video onto your canva screen and resize so it takes up the entire screen.
Recolor or touch up the video. Darker videos/colors work better for viewing the title, I often add a rectangle shape that is black with transparency lowered to make it darker.
Download the single slide as a GIF
Reduce the quality/size to under 800px.
If it doesn't upload to your Banner in Google, size down further.
Consider creating a custom theme to complete your brand.
Add custom colors from your logo and header by grabbing the codes.
Use the fonts you used in your logo to create consistency.
From the Theme, you can edit more including navigation, components like buttons, dividers and links, and spacing
Click the settings wheel - top right
Top - use when you can organize pages into 3-4 sections wth subpages
Side - use when you have more sections that have equal importance
Upload your logo and favicon if you didn't create a Custom Theme.
The Favicon is what appears on the page tab - if your logo has a lot of detail, create a second "logo" that is very simple and readable in design
Select a brand color to add to your theme, if this was not set up with a theme.
Keep important content "above the scroll"
Use your footer to add update info and additional navigation tools
Embedded websites - sometimes the image link will break, it's often a good idea to take the extra step to link it to an image
Use no more than 2 fonts across your site
Collapsible text can help to save space and draw attention to big headings
Use Section colors to more clearly distinguish content visually