In this video we’ll cover some standard practices for designing the website header including the logo and main navigation, and how to create compelling calls to action in the first section of the site, known as the ‘hero unit’, as well as some other important tips about visual indicators. In this example we’re creating a site for a business that offers social media marketing services.
We’ll create a layout that’s clean with a clear way for people to navigate and easy to use incorporating text and images that help tell a company or organization’s story.
Possible Software Choices:
My tool of choice is Adobe Illustrator, but you should use what you’re most comfortable with.
Free stock photography:
In these tutorials I’m using pic jumbo. Using stock photography is a great way to get either professional placeholder images, or the actual images the site will use when it’s live.
be careful of usage rights when choosing images that are going to be used for the final site design.
Begin with a Grid:
I recommend starting off with a grid. The grid is intended to create a balanced visual design. It’s helpful for making easy and accurate decisions for alignment of different objects on the page.
Create a Header & Hero Unit:
To create a header & ‘hero unit’, start by blocking a section of the page out, to get the feeling of where content will be in the design.
Next add a logo area and navigation links in the header. Typically sites will have the logo on the top left and navigation spanning across the top right.
Choose an image for the hero, and then play with filters/appearance so that when text is overlayed on top of it, it will be readable.
For this example I’ve chosen a headline font ‘Geo Grotesque Bold’ for a headline font.
Following the headline, add some brief text about the company, or information that will be displayed in the hero unit.
To achieve readability, experiment with color and contrast, try adding a filter on the image to lighten or darken it, and play with color of your text until you feel like you’ve achieved the correct visual balance.
Clear Call to Action:
Create a call to action in the navigation to add visual interest to the primary action you want a user to take who is interested in your company.
In this example we’ll highlight contact with blue. Blue is common and ‘trustworthy’, but choose a color that works for the brand.
In the hero unit you’ll commonly see two calls to action, one being more prominent and important than the other.
- Make whatever you want visually in your tool of choice, but take note of what’s common in web design to use as guidelines and best practices.
- First is to learn what’s commonplace, and understand why it’s done that way. Then once you’ve got that down start to break rules and try to push boundaries.