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


Web Page Layout for Visual Appeal and Maximum Effect

© Copyright 2014 by Eric Bobrow, all rights reserved
For more information about the Internet Marketing for Architects Course, visit:


ERIC:                      Okay.  Alright, so let’s get started.  So I’m just going to ask a question.   What makes a website attractive?  And I don’t have one answer, I mean, certainly there isn’t one answer.  But if we think about that and what makes it effective, these are sometimes conflicting goals.  [0:09:02]

Now, when you talk about attractiveness, it’s in the eye of the beholder.  So for you as an architect or a building designer, you have certain esthetics about what makes something attractive.   Now your clients may have similar esthetics and ideally you are going to be making something that represents your soul, your essence, and represents your brand and the people who are attracted to your brand and who you are, are going to find your website attractive.  But sometimes there’s a little bit of a disconnect.  In other words, architects may admire other architect’s websites because they’re cool.  Because they’re designed in a really special way but a visitor to that website may not actually find it so attractive.  They may find it more mysterious or “I’m not quite sure where to click,” you know, things like that.  [0:09:56]

So obviously effectiveness is also part of that.  In other words, you may feel that something’s effective because it has beautiful images that convey the architecture.  In other words, high-quality images or photographs of the buildings are an important part of it, but as we talked many times through the course, to make it effective from a visitor’s point of view, there are two things we can think about.  Are they getting what they need?  In other words, what are they looking for and are they finding what they need?  And then secondly, are you effective in treating them or inviting them to interact and develop a relationship?  Are you offering them something that encourages them to click, to opt-in, etcetera?

Click Here For Access To The Full Course



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