Internet Marketing for Architects – Course Outline
Level 2 Part C – Web Page Layout for Visual Appeal and Maximum Effect

Web Page Layout for Visual Appeal and Maximum Effect

Copyright 2014 – Eric Bobrow
All rights reserved – do not reproduce or distribute

Thank you for visiting the Internet Marketing for Architects Course website.

The video lessons and certain other materials are available for members only. If you would like to watch the training video on this page, please login to the website.

If you are not already a member, please visit the following page for more information and to sign up for the Internet Marketing for Architects Course

Eric Bobrow, Creator of the Internet Marketing for Architects Course


Click here to see a preview of the lesson transcript...



Introduction and Overview

What makes a website attractive?
What makes it effective?
How can you reconcile these two sometimes conflicting goals?


Clean layout, balanced
Color palette, typography
Pictures, sliders, graphic ornaments
Animated transitions can delight the eye


Clear message – what is this about, who is it for, what will I get
Easy to understand and navigate
Offers value to visitor – information, stories, resources
Presents offer, encourages interaction and opt-in
Fast loading (optimized code)


Header – use this for logo / identification, branding / tagline, contact info / offer
Navigation – above header, under header, sidebar and/or footer – clear path to useful information
Body – information – each page has a task or function – what is “most desirable result”?
Sidebar – constant or variable depending on context; related info, offers, contact, testimonials, news
(related info can also be below main body content)
Footer – two main options:
Prominent footer: similar to sidebar – offers, news, testimonials, featured pages
Minimal footer: contact info, social media, basic navigation plus links to less prominent pages (e.g. Privacy Policy, Terms of Service)

Background & Typography

Simple white background is often best, with accent colors or bands to separate sections
Type style (font, size, color) should be easy to read, with enough white space to balance
Headlines can be more stylish / distinctive than body copy
Dark backgrounds with light text are OK for smaller sections of text, not good for long copy
Textured backgrounds and gradients can add spice – use carefully
Boxes can separate and highlight content – use contrasting background and/or outline border

Images and Sliders

Prominent image with text
Images sprinkled into a page to break up long body copy, illustrate specific ideas or points
Grid of images – can be good for navigation; useful to have captions/info and/or hover/animated info
Slider – autoplay or manual play, navigation controls at sides or underneath, icons (dots) or thumbnails
Transitions – fade, slide, or fancy animations
Multi-layer sliders – can convey more info, have a call to action, links to site pages or offer

Opt-in and Contact Forms

Embed on page or in sidebar
Provide benefits (reason to fill in) and clear call to action
Tell them what to expect (you’ll get a PDF to read, or access to a video, or regular emails with info)
Optional: simple button or link with popup lightbox to fill in form – increases opt-ins



What’s great about the website – what works, what makes them look good
What could be improved, what’s missing



  • Google Fonts – free fonts that you can use for your website
  • Easy Google Fonts – free plugin for WordPress sites to give easy access to Google Fonts –
  • Shortcodes Ultimate – free plugin for WordPress with many web page graphic formatting tools


Let us know how you feel! (No comments so far)

You must be logged in to post a comment.

No comments yet