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
As I prepare to write the next post in the “My First Website” series, it dawned on me (after my sixth cup of coffee) that I need to explain some website design jargon — specifically: what is an HTML attribute, element, and tag. I need to explain these terms because I’ll be using them quite often as we work through the series.
Of course, if you are not following along in the series you’ll still need to know what an HTML attribute, an HTML element, and an HTML tag are. Without this knowledge, trying to understand the other lessons and tutorials here on NWD will just make your head spin in a very unpleasant and slightly nauseating way.
Let’s begin:
One 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:
I received quite a few e-mails and even a comment on NWD about some of the “unseen” things I was doing in the very first screencast — namely, some of the keyboard shortcuts in Photoshop, how I could “nudge” things around in the Photoshop layers, how I could quickly create rectangles to be used in a basic website layout, and some basic cut, copy, and paste techniques.
Which reminds me of a Photoshop joke…
Person A:
How do you know when a newbie has been using Photoshop?
Person B:
From the scissors scratches on the monitor when he tried to cut the image.
You:
Uncontrolled laughter.
All dumb jokes aside, in this second screencast I’ll take you through some of those unseen Photoshop keyboard shortcuts as well as the nifty little cut, copy, and paste tricks I was using. (You can put the scissors down now. 
)
Click on the “More…” link below to watch Screencast #2:
To many newbies, the whole process of making a website is drowned out by the confusing enigma that is hosting a website. Most don’t know were to begin. And for those that have a general idea of what website hosting is all about, they are still not quite sure about the “how to” aspect.
In this post, let’s take a look what website hosting entails, why it is better if you have a hosting company do it for you, and even a little bit about how your domain name (a.k.a. URL or website address) fits into the whole equation.
“My First Website” series navigation: first post — whole series
Now it’s time to make our first web page with HTML! This, of course, is going to be a very, very basic web page. But it’s important to understand exactly what the HTML of a basic web page looks like and how each HTML element and tag function.
So let’s dive right in, cut to the chase, get to the point, (and any other expressions that you know of that make good transitions in writing… )
All web pages must contain certain “elements” or “items” that allow browsers to recognize them as being web pages. As you may have experienced, your browser can render (display on your screen) many kinds of files such as single images, .PDF files, audio-only pages, and a multitude of others. So, in order for your browser to know that your web page really IS a web page, it must contain the following:
While taking a much-needed break from my almost nonstop life I came across some great RSS and social bookmarking icons that you can grab absolutely free! Just head on over to Diva Geek Designs to get the goodies.
If you’re using Windows, right-click on the rss or social bookmarking icons you want and choose “Save Image As…” (or something similar depending on your browser).
If you’re using a Mac, you can simply drag and drop the rss or social bookmarking icons you want directly onto your Desktop or into a folder of your creation. (Of course, you can do the Windows way as well.)
Now head on over to Diva Geek Designs and stare in awe at all of the free rss or social bookmarking icons there for the picking!
I can’t believe it — my very first screencast! In this first installment of (what I hope to be many) screencasts, I’m going to show you the basic concepts behind layers in Photoshop and Photoshop Elements (the little brother to Photoshop.)
Just to let you know, this is “Reality Screencasting” — which means it is completely unscripted. You’ll see my little mistakes, my periodic goofs, and hear the word “Ummm…” at least a thousand times. I did this for two reasons: 1) to let you see the real work flow when using Photoshop, and 2) I’m just too lazy to do multiple takes and then edit them together.
You won’t see any award-winning graphic designs in this screencast (I’ll save those for later) but you will learn exactly what you need to get started using Photoshop.
Without further ado, here it is!
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.
“My First Website” series navigation: first post — whole series
Hopefully by now you have followed the instructions in part 1 and got your folders all set up and ready to go. Now it’s time to collect the software that you will need to build your very first website from scratch.
There are only two programs that you must have at the beginning. One of them you already have on your computer. In fact, you are probably using it right now to view this website (provided that you aren’t reading this using an RSS reader.) Unfortunately, that particular piece of software may be old and in disparate need of an update.
The second little software gem is what you will need to actually enter all of the HTML and CSS goodness that you are going to learn. But don’t worry, you already have this software on your computer, too (but you can get something even better on the Internet for free!)
Let’s get going…
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?
