Design From the Source of Your Inspiration

 
Your web design has to come from
somewhere, quite possibly from
deep inside you. You need to
stay in touch with this source.

One thing I do to get myself in
touch with the source of all life
is that I sing HU. I sing HU as
a love song to God. That is to say,
I sing it to be more aware of my
connection to God.

Here are directions for singing
HU:

HU: A Love Song to God

You have your own way of getting
connected to a higher source. That's
precisely my point. In showing you
how I connect myself to a higher source
of information flow, I'm encouraging you
to do the same. Find your connection.
Find your way of getting connected to a
higher information flow.

For example, some people find a walk on
a beach or watching a sunset connects them
to a higher source. I'm sure you can
think of many many examples of how people
plug into a greater source of inspiration
and a better idea.

Back to web design. As I started to say,
web design needs a source. It needs to
come from someplace.

Ultimately, everything that is creative
within you comes from God. That's one
source.

However, there are also more down-to-earth
sources of inspiration too. One thing that
is helpful is to write the advertising copy
before you do a design. Or at least write
some of it.

It's hard to design something if you have
no idea what you are going to say. Having
a message is essential to a web design that
sings consistently through and through.

Decide what your message is before even
attempting a design. Otherwise, your design
will be an orphan design without a source.

We've all seen that kind of design. It looks
impressive but it doesn't mean anything. It's
just a jumble of impressive things that don't
really go together.

Trying to impress others is a bad starting
place. That's a source, but not a particularly
good one. It's better to start with something
more than just the desire to be impressive.

That's where some kind of pre-written advertising
copy can be so very helpful. If your advertising
copy is going in one direction and your design
is going in another, you will instinctively feel
it.

Good advertising copy will rein you in. It will
help you determine what is in good taste and what
is in bad taste. If the design does not fit hand-
in-glove with the advertising copy, it is in
poor taste. For example, advertising copy that
sells baby shoes will inspire a design that is
vastly different from advertising copy that
sells the services of an auto mechanic.

However, if you have no advertising copy and no
idea what the feelings and values of the website
are, then anything goes. An anything-goes web
design is not a whole lot of fun to look at. It's
all about everything in general but not about
anything in particular.

So start with a source. On the physical level,
start by knowing what you wish to say. On the
spiritual level, make your appeal, your connection,
to that from which all ideas flow.

Oftentimes, our best ideas come to us when we
are in a deep state of relaxation. When we are
relaxed, ideas flow better.

Also, it is easier to have a good idea after a
night's rest. My ideas often come to me upon
awakening.

Whatever your source of inspiration is, recognize
it and respect it and plug into it the next time
you design a website.

Ed Abbott

Web Design Is Light Design

 
When designing a web page,
you are designing in light.
Keep this in mind and you will
have an easier time of it.
Everything you do is light.

Start by deciding what direction
the light is coming from. Often,
light comes from the upper
left-hand corner of a web page
but of course, light can come
from any direction.

For example, if you are doing
something gothic or mysterious,
it may make sense to have the
light come from the bottom of
the page. This is similar to
the lighting you get when, on
a camping trip, you take a flash
light and illuminate a person's
face from below their chin. A
very weird effect indeed.

If the light comes from directly
above the page, it is high noon
and the topic at hand is very
cheerful. Or maybe the light
comes from everywhere. In that
case, it is a very neutral gray
topic and it is a gray overcast
day on your web page.

The kind of light that illuminates
your web page will depend on
the topic at hand. Make sure
that the light you choose for
your page illuminates the topic
rather than confusing it or
obscuring it. That's the key:
The light you choose must make
sense. It must match your message.

To summarize, there are really
just a few steps to getting started
designing a web page:

1. Choose a topic
2. Choose a direction
   that the light is coming
   from to illuminate that
   topic.
3. Make sure that the light
   coming out of the page
   and the topic discussed
   are the same
4. If the light illuminating
   the page and the topic are
   mismatched, try again

It's when everything goes together,
topic and light, that you end up
with a brilliantly illuminated
web page. Make sure everything
goes together.

If everything does not go together,
you will end up with a disjointed
web page. You'll be giving your
web visitors a mixed message, one
that they will be unsure of.

On the other hand, if everything
goes together, your web visitors
receive your message on many many
different levels. All levels the
message is given on go together and
give your visitor a reinforcing
experience that can only go in one
direction.

Ed Abbott

How to Create a Web DesignTemplate

 
Here are some thoughts on how to
design a web template and how to
get an artistic result.

First, you want to be a minimalist.
Don't add something to your template
unless it is absolutely necessary.
Too many web pages and too many
web templates out there are
way too busy.

Here's are some steps to creating a
minimalist web design template:

1. Only add one thing at a
   time to your web design template
2. Only add it if it is absolutely
   necessary
3. Make sure that what you've
   added actually means something;
   otherwise, you should immediately
   remove it

Perhaps the hardest part to creating
a web template is making it look good.
Yet, a good looking web design template
is more a by-product than something you
aim for directly. A good looking web
design is one that looks good because it
makes sense to the heart, the mind, and
the emotions.

Here are some steps to a good-looking
web design template:

1. Pay attention to shape and proportion
2. Pay attention to color and mood
3. Pay attention to perspective and
   point-of view
4. Pay attention to harmony

Of all of the things you need to pay attention
to, harmony is the most important. Harmony
makes for a web design template that is going
all in the same direction.

What direction do you want your web design
template going in? You want it to go in
the same direction as your advertising copy.
Whatever mood or attitude your advertising
copy creates when visitors read your web
page, your web design template should
reinforce. Both your web design and your
advertising copy need to be going in the
same direction.

The same direction. This is important!
The shapes and proportions you choose
should reinforce what you are trying to
say. The color scheme you choose should
help you say what you are trying to say.
The point of view from which the template
has the viewer view the template should
be one that directly relates to the message
you are delivering. All of this needs to
go in the same direction and that direction
is the direction the viewer is taken in when
your message is delivered.

Your web design template is a message-delivery
mechanism. If everything you do lines up and
goes in the same direction, your web visitors
are given a harmonizing and reinforcing message
and they receive your message on many different
levels.

It all starts with minimalism. Add nothing to
your web design template unless it makes total
sense and adds to what you want to say.

Ed Abbott

How Many ColumnsShould a Web Template Have?

Web templates typically have
one, two or three columns.

That's typical. A large website
such as Google, might resort to
four columns.

In general, though, you are better
off with less columns. Less columns
is better.

Why? Because too many columns causes
your web visitors to pan and scan.

Panning and scanning is scanning sideways.
People lose focus when they scan sideways.

In general, you want people scanning up
and down.

When people scan up and down, they are
reading. When they scan sideways, across
columns, they are deciding what to read.

I suggest you have as few as one or
two columns on your website to get
started.

Here's a one-column website I did
some years ago:

www.Poepauv.com

See how simple it is? A one-column
website is very easy to understand.

Why? Because as soon as you've figured
out that the site consists of no
more than one column, there's nothing
left to do but to read that column.

That's what you want people to do.
You want them reading what you've
written.

Too many columns means panning and
scanning. When people pan and scan,
they are deciding what to read, not
reading.

You want people reading.

OK. I think you've got the idea.
When people are reading what you've
written on your website, it is good.

When people spend too much time trying
to figure out what you have on your
website that is worth their time, it
is bad.

Quick decisions are good. Delayed
decisions are bad.

Try to get your web visitors to read
what you've written right away.

A good way to do this is to limit
the number of columns offered to
the reader.

More later.

Ed Abbott

Framing Your Web Template

Every web template has a certain
amount of structure. I call
this structure framing.

If you've recently seen a wood
house under construction, you
may have noticed that one of the
first stages of construction is
framing the house.

Carpenters that frame houses are
called framers.

Basically, they put a lot of 2 X 4
lumber pieces together to form a
frame. That's primarily what they
do.

The whole house hangs off of the
frame. Without the frame, the house
would collapse

Web templates also have frames.

Without a frame, a web template will
collapse mostly because you have no
place to hang things.

The frame of your web template provides
you a place to put things.

Here I may be confusing you. There's
something in HTML called frames.

Frames is a specific feature of HTML.
I'm not talking about frames in the
sense of HTML frames.

Rather, I'm talking about the boxes
that make up your web template.

A synonymous term for frame structure
might be box structure.

The frame structure of your template is
really the box structure of your
template.

Web templates, no matter how successfully
you disguise the fact, consist of a
series of boxes stacked on top of each
other.

That is to say, HTML-based templates are
nothing but boxes.

There's no getting around it. If you are
going to make an HTML-based template, you
are going to be creating a lot of boxes.

You can resist this but you can never get
around it.

It's true that there are techniques for
softening the hard lines of boxes and
there are techniques for making one box
intrude into another visually.

Yet, you never get away from boxes in
HTML. Never. It is always part of the
underlying structure.

OK. Back to framing. The box structure
of your template is what I call the
framing of your template.

Here's how I suggest you choose a frame.

Visit websites and look at their
navigation. See where the navigation
is and then study the frame of the website.

Generally speaking, framing is, in
large part, determined by navigation.

The navigation of a website is,
quite simply, the main links for
that website. Navigation is important.

Without good navigation, your website
will be a nightmare to understand.
Without good navigation, your web
visitors will never make it beyond
the first page they visit on your site.

So much of the framing of a website is
determined by the navigation.

Is the navigation on the left? Then you
are likely to have a long vertical box on
the left with the navigation going from
top to bottom on the left.

Is the navigation on top? Then you will
likely have a box on top with links that
go from left to right.

For lack of a better way to express myself,
I'll call one vertical navigation and the
other horizontal navigation.

Horizontal navigation has the advantage
that it is so easy to find. It's right
on top.

I'd say more often than not, most websites
utilize horizontal navigation.

However, there is one severe disadvantage
to horizontal navigation and that is it
doesn't allow for expansion.

With horizontal navigation, you are pretty
much stuck when you run out of horizontal
space.

Vertical navigation solves this problem.
With vertical navigation, you can expand
at will.

In some ways, the limitations of horizontal
navigation are also its advantage. Since
horizontal navigation only allows you so
many links, it forces you to think very
carefully about what you consider to be
the major links on your site.

OK. Back to framing.

The frame of a website is largely
determined by the navigation for
that website.

This is to say, the box structure of the
website is largely built around the
navigation for the website.

What kind of box does the navigation
fit into? What does the box surrounding
the navigation look like?

You should ask yourself these questions
when studying the framing of a website.

More later.

Ed Abbott

How to Design a Web Template

OK. This is a new blog.

In this blog I will be discussing
designing web templates.

How do you design your own web
template?

My first suggestion is that you
pick a width for your template.

I'd say, in general, narrow is
better than wide.

Why? Because narrow templates
tend to create newspaper columns
whereas wide templates tend to
create billboards that have to
be scanned.

You don't want your web visitors
scanning too much just to read
an article you wrote.

Readability is important! A wide
template may seem like a good idea
because you can fit so much into
it.

That's the point. You don't want
to fit a whole lot of stuff in your
template. If you do, you just end
up distracting your web visitors.

Try not to distract and confuse your
web visitors. This is paramount!

Most people would be surprised to
learn how much faster and further
they can go if they will keep things
simple. You get there faster and
better when you keep it simple.

A narrow template is also helpful
in that it is likely to have better
proportions.

There's this thing called divine
proportion and things that are narrow
and tall lend themselves better to
divine proportion than do things that
are short and squat.

Would you rather own a horse with short
legs or long legs?

Do short squat dogs look better or do
dogs with dramatically long legs look
better?

A narrow width web template already looks
better before you've gotten started.

So go as narrow as you can without going
too narrow.

Narrow enough is just right.

Also keep in mind that narrow templates
are more accessible to people with old
computers and old computer monitors.

So, you get a larger audience with a
narrow template.

In today's environment, I'd say a 800
pixel template is typical.

That's typical.

The template for my own website is
610 pixels.

That's narrow. 610 pixels is narrow.

Here's my website which currently is
610 pixels wide:

www.WebSiteRepairGuy.com

This template is narrow but not
too narrow in my view. It is
narrow but leaves a little bit of
waste space on the sides.

Why the waste space? Well, you
want your web visitors very
focused when they visit your
site. Therefore, you do not
want to present them with too
much visually.

By the way. In all likelihood, a narrow
template will more likely fit on a
handheld device screen in the future.

Maybe not now. But maybe sometime in the
future.

Handheld device technology is developing
very quickly. Someday, 610 pixels
could be just the ticket.

Ed Abbott