Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

How To Do For Your First Visual Design for Web Design

Updated March 31, 2017
No Comments


Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

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:
GIMP (free)
Adobe Photoshop
Adobe Illustrator

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.

Hook better leads with hard-working digital marketing

We help small businesses get more traffic and leads with Professional Visibility™ through web design & SEO

Free Marketing PlanGet a Free Demo
Ready to hook better leads and save time with hard-working digital marketing? Start the Conversation

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.

Download Grid:


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.


Watch this quick video to see how savvy businesses save time and hook better leads:

Initial takeaways:

  • 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.

Related Posts

Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of

Want to hook better leads with hard-working digital marketing?

Get a free consultation now