The best fonts for websites (web safe fonts)

The best fonts for websitesBeginners to website design often scratch their heads in confusion and ask themselves “What are the best fonts for web design?” The answer to this question is both easy and a little complicated. You see, while there are some good fonts for websites, there are also the highly necessary standard fonts for websites as well. Throw into the mix the fact that you can have any font on your website using images and you’ll undoubtedly scratch the hair right off your head.

In this post, I’d like to clear up the confusion and offer some solid “web font” advice to help make choosing your website fonts easier (and to prevent premature balding as well.)

Let’s begin with a little background information:

Read on…

What’s the difference between vector and bitmap (rasterized) images?

Difference between vector and bitmap imagesThere are two types of images that you’ll need to understand as you get deeper into website design and graphic design: vector images and bitmap (rasterized) images.

Under normal conditions, one usually cannot tell the difference between a vector and a bitmap image. It’s only upon closer inspection that you can actually see those differences. But more importantly, it’s what vector images and bitmap (rasterized) images are that will allow you to use them correctly in graphic design.

Read on…

Video: Painting on the iPhone

I came across this video on YouTube and just had to share it. It’s about using an application called “Brushes” on Apple’s iPhone to create some truly wonderful artwork. One of the pieces was recently featured on the cover of The New Yorker magazine.

I realize that it has nothing to do with website design directly, but still I found it inspirational. Makes me want to finally break open my piggy bank and buy an iPhone!

Web design techniques: Tables vs. CSS Boxes

A table of boxesBeginners to website design are faced with a big choice before laying out their first website: should I build my website using tables or should I go the CSS “box model” route? Many years ago when I was just a beginner to website design and was searching high and low for information on how to design websites, I often read posts by designers touting the benefits of either one web design technique or the other. Quite baffling to say the least, especially since I had absolutely no clue what these people were arguing about!

If you really are a beginner, have no idea what I’m talking about, or are contemplating which of the two to use, then this post is for you.

Read on…

Creative use of negative space in logos

Negative space - white space in logosNegative space or white space are the areas in a design that have no actual objects or images. But don’t think that negative space or white space isn’t important. They can help focus a reader’s eyes exactly where you want them to go, give some “breathing room” to a design, and when used creatively can produce some truly memorable logos.

In this post, I’ll be presenting some very cool logos that use negative space to their advantage. As you study the images, take note how your eyes seem to fill in the white space with the missing content. These logos were created with that firmly in mind.

Read on…

WordPress smilies or emoticons (BB#4)

Whether you call them smilies or emoticons one thing is for sure: they are everywhere! Some blogs and forums use one system while different blogs and forums use slightly altered systems. Newbie Website Design is a WordPress based blog. That being so, you can use the WordPress smilies (a.k.a. emoticons) when you comment on any of the posts here.

Instead of making you search the Internet to find out how to write WordPress smilies (emoticons), you can now find them right here:

Wordpress smilies and emoticons

Filling out our webpage with HTML (MFW#4)

“My First Website” series navigation: first postwhole series

HTML headings and paragraphsIn this installment of My First Website, we’ll build upon the simple web page we created in the previous post in the series. You’ll learn about headings and how to create them as well as dividing up your content into paragraphs. Yes, slowly but surely we are getting into more of the “meat and potatoes” of HTML!

But before we can tuck in our napkin and dine on some HTML goodness, let’s get your web page ready to be viewed on your own browser. And it’s very easy to do.

Let’s begin…

Read on…

Screencast #3: Make a fake tag in Photoshop

ScreencastI received a few e-mails about a photo I used in the “What is an HTML attribute, tag, & element?” post from a few days ago. Some wanted to know where they could buy that sort of dog tag / keychain in the photo. Unfortunately for them, it isn’t real — just a figment of my creation.

In this screencast, you’ll learn the steps I took to make that fake tag. Since the screencast is small and a little hard to see, I’ve included the larger, final image.

Click the “More…” link below to see the screencast:

Read on…

Learning from “Your Logo Makes Me Barf”

logosIt’s pretty much common knowledge that if you want to become better at design then you should spend time studying the works made by professionals. But in addition to that, studying the truly amazing, jaw-dropping and head-scratching design flops can offer just as much insight (as well as possibly boosting your own ego: “My designs aren’t THAT bad!”)

The blog Your Logo Makes Me Barf is a wonderful place to gander at some of the world’s worst logo designs. I came across this the other day and decided to pull some valuable design lessons out of the garbage heap of logos.

Let’s begin today’s “what not to do” lesson:

Read on…

In Photoshop, go from big to small

Small to bigPhotoshop is, without question, one of the most powerful applications in the world of graphic design. And yet, this behemoth of image manipulation can’t perform miracles. One of those magical feats of digital wonder that is out of Photoshop’s reach is accurately increasing the size of an image.

What does that mean?

Take an image. Any image. And ask Photoshop to increase the image’s size by say, 200%. This is what you’ll get:

Read on…

Behold! Some creative navigation!

From time to time during my web-surfing excursions I come across some really creative website navigation. The website for the dConstruct 2009 convention is a prime example of such navigation:


To really appreciate this website’s navigation, head on over and click on some of the links in the main navigation (located at the top in the green bar.)

Check it out here: dConstruct 2009