Make My Logo BIGGER Cream!

June 22nd, 2009

Is a bigger logo better?Sometimes the best way to learn about design is to see what not to do. And an even better way is to do so through the use of a little tongue-in-cheek comedy. The website “Make My Logo BIGGER Cream” does just that with a short video that spoofs silly TV ads.

As you watch the video, you’ll easily see the what not to do parts. If you’re not quite sure which is which, here’s a hint: the ‘before’ versions of the designs are better than the ‘after’ versions.

View the video here: Make My Logo BIGGER Cream!

What can we learn about design from this video?

Read on…

Getting Started – My First Website (MFW#1)

June 21st, 2009

My First WebsiteI realize that in the previous post I sort of bad-mouthed WYSIWYG visual editors and atop my soapbox I preached the virtues of hand-coding websites.

Well, that’s all fine and dandy if you already know how to hand-code a website. But for those of you who have no idea what HTML is and think that CSS is just another version of the popular TV show Crime Scene Investigation, hand-coding a website can seem as simple as learning Chinese.

Newbie Website Design wouldn’t be much of a blog if I never actually helped newbies. Since I aim to please, I’d like to introduce to you a new series of articles dedicated to teaching you how to build a website from scratch. You’ll learn everything you need to master the very important fundamentals and transform good techniques into solid habits.

Without further ado, let’s get your folder system prepared for the good stuff to follow:
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 Internet Marketing?

June 2nd, 2009

Make money online with Internet marketingIn these bad economic times, many people are looking into making money online in an attempt to earn a little extra cash to pay the bills, replace a lost job, or become an instant millionaire (like so many info products claim their system will enable you to do.) Yet, when one finally decides to dive into the Internet marketing arena, many questions arise:

  • What are the different ways I can make money online?
  • Is it easy to make money online?
  • What does real Internet marketing entail?
  • Do I have to be adept at making websites?
  • Must I make my own product?

And the most important:

  • Where do I begin?

If you have been asking yourself any of the above questions, then your prayers have been heard — for, here are answers:

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…

Become better at design

May 20th, 2009

Become better at designProbably one of the most often-asked questions I receive is “how do I become better at designing?” This question speaks deeply to my own heart because during my early years in this profession I asked it repeatedly. I asked other website and blog owners — and even more importantly — I asked myself.

Now, many years later, the answer to that question has become crystal-clear. But, the answer is usually the one that most people don’t like to hear. If you really want to know what it takes to become better at design and website design then read on…
Read on…

Cascading Style Sheets – CSS

May 6th, 2009

CSS-cascading style sheetsIn the previous post, you learned what is HTML and XHTML and a few of the most commonly used tags. If you simply added a few more tags to your HTML vocabulary you could make some decent websites. But why would you want to stop there when there is the wide and wonderful world of Cascading Style Sheets (CSS) just over the horizon…

Pre-CSS: the dark age of website design

Before Cascading Style Sheets came into being in the world of website design, designers had to put detailed HTML tags into every web page. These tags controlled things like font size, font color, background color, line height, lists, etc. etc. etc. This was all fine and dandy if your website only had a few pages.

As the web grew so did the size of websites. Gone were the days of sites that had a dozen or two pages only. The next generation of websites grew to hundreds and hundreds of pages. News sites are a prime example.

Now imagine this:
Read on…

What is HTML and XHTML?

May 2nd, 2009

What is HTML and XHTML?To the newbie website designer, acronyms like HTML and XHTML can seem like strange and wild foreign languages that only people with the “tech” gene turned on can fathom. But they are not that hard to understand at all. And you certainly don’t need to undergo gene therapy to master them.

HTML stands for “HyperText Markup Language”. XHTML stands for “Extensible HyperText Markup Language”.

Yada. Yada. Yada.

Let’s find out what those actually mean.
Read on…