Category: Design and Layout

Different types of fonts

July 6th, 2009

Different types of fontsOne of the most challenging aspects of designing a new website, logo, pamphlet, etc., is deciding which font or fonts you are going to use. But with so many different types of fonts to choose from, how can one narrow down the choices to the perfect font or fonts for the project? Well, the first step in making that difficult “font choice” is knowing the difference between the different types of fonts.

In this post, you’ll learn exactly how to classify each type of font into the 7 common font categories. Without this knowledge you’ll not only have difficulty mixing and matching the different types of fonts into your website or other design projects, but also will create designs that are almost painful to the eyes (and we don’t want that!)

Here are the 7 common font categories:

Read on…

4 Classic Navigation Positions

June 25th, 2009

What website navigation should you use?It doesn’t matter if you hand-code your websites or use a WYSIWYG visual editor, when you first decide to make a new website you have to think about its layout. Pretty much the standard on the Internet is to put the header (containing your company logo or website name) at the very top — so this decision is a no-brainer. The challenge is figuring out where the navigation will go.

In this post you’ll learn about the 4 “classic” navigation positions. But more than just seeing an example of each, you’ll learn about the pros and cons of each as well as how to match the navigation to your future website’s content.

Read on…

WYSIWYG or not to WYSIWYG?

June 18th, 2009

wysiwygTo many newbie website designers, WYSIWYG (What You See Is What You Get) editors seem like a dream come true. And why not? With a WYSIWYG editor, the designer never has to deal with the HTML markup language or CSS — the editor creates it all for you. You just sit back and visually create the website. What could be easier?

In my early days at website design I used such software. Programs like Adobe GoLive and Dreamweaver were two of my main tools as I began learning the ropes. But I can tell you from experience that I wish I had learned how to write the HTML and CSS from day one. Why is that?

Read on…

Cleaning up an all-centered website

June 14th, 2009

One of the most annoying kind of design flaw is the “all-centered” website layout. You may have seen this before: everything runs centered down the page, no clear distinction between sections, and, in some cases, text in all caps.

Yuck!

In this post, I’ll talk you through the steps to clean up this weak design. To begin, first view the “what not to do” example. (Note: this example uses the Lorem Ipsum text – so don’t try to read it.) Here’s the image:

1

Now let’s clean this mess up!
Read on…

Boxes – the building blocks of websites

June 11th, 2009

All websites are built out of boxes (square and rectangle shapes to be precise.) Some of them are easy to see while some of them are not. But once you get used to the concept, you’ll be able to quickly spot them. In this post, I’d like to introduce you to this box model using a website that clearly shows you these boxes.

The website is called Trent Cruising. But before reading too deep into this post, I encourage you to first try to spot as many different boxed areas as you can. Here’s the image: (click to enlarge)

Image 1

Could you find all of the boxes? If not, don’t worry. I’ll now show you exactly where they are…
Read on…

Good design is CRAP

June 6th, 2009

It's all about C.R.A.P.When I first began to study the fundamentals of design I ran across a very interesting acronym the gives one the deepest insights into good design: CRAP. An acronym such as this certainly is easy to remember. And indeed to this day, it influences every stage of my design process.

Once you learn exactly why good design is CRAP, then you, too, will see vast improvements in your designs as well.

“CRAP” stands for: Contrast, Repetition, Alignment, and Proximity. And as my chemistry teacher in high school once said, “Etch these onto your forehead so you’ll never forget.”

Here’s an overview of each:
Read on…

What is Lorem Ipsum? Why use it?

May 25th, 2009

What is Lorem Ipsum?Can you read this:

“Lorem ipsum dolor sit amet, neque velit suspendisse nunc mattis, eu duis vel viverra tortor, a massa feugiat, felis volutpat ut ultrices sit ante tincidunt. Amet fermentum, etiam lacus neque nonummy est mauris, urna nunc sagittis.”

You can’t? Good! Neither can I. And neither can 99.999% (approximately) of the people on this planet.

That’s the whole point of Lorem Ipsum — meaningless, jibberish text that can’t be read or understood and yet can flow naturally in a design layout. It’s actually one of those little-known design tools that is very important to the design process.

Let’s learn more about Lorem Ipsum and how to use it.
Read on…