Web Page design tutorials for Beginners

On a daily basis I view all sorts of websites and all kinds of designs. One thing in common with successful templates on ThemeForest or with websites around the web is strong visual hierarchy. Often times I see templates that have a great concept going but has poor visual hierarchy. I’ll cover what visual hierarchy is and some great examples in this article.

Many rejected templates here on Themeforest suffer from the same few common mistakes: typography (font, line-height, letter-spacing, color), alignment (grid), and spacing (padding). In this tutorial, we are going to take a closer look at how to avoid these common errors.

This one is for those who are hoping to take their first steps into web design. This 70 minute Plus video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you'll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

In this tutorial, we're going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It's a brand new week; maybe it's time to learn a new skill!

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won't benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you're being neglected. This site is for you, so speak up! With that said, today's tutorial is specifically for those who are just diving into web development. If you've one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Without further ado, let's review thirty best practices to observe when creating your markup.

Moving on...

Now that we've a basic understanding of theory, and have learned how to design and code a very basic web page, we are ready to move on a bit further. The following articles and tutorials are here to teach you more about the web design process and best coding practices.

When I put together designs, I usually do so in two phases - Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage - the Polish - I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we'll be looking at the Polish.

The tutorial I've added today is called "How to Design a Family of Website Designs" and is a step-by-step follow-along of a set of WordPress blog designs that I recently did. Because the Photoshop skills involved aren't that advanced, I've spent more time talking about why certain things are done.

Today I'm going to take you through my entire process of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It's a massive tutorial, so if you're going to follow through to the end, make sure you have a few hours to spare!

Last, but Equally Important...

There’s a thin line between inspiration and copying. We are surrounded with objects and art in our every day life. Finding inspiration for a design is an easy task these days. In this article, I will guide you through the design process of a website I recently finished. I will provide images of websites that inspired me to create a new and unique web layout.

A Freebie to get you Started...

When you're designing or building a website, chances are you're going to need various little elements designed. I personally tend to reuse a lot of the same buttons, menus, icons and so on. Since we launched GraphicRiver earlier this year though we've seen a lot of cool little web graphics coming in, in the form of web elements, backgrounds and icons. So I've compiled 30 of the best to give you a flavour of what is available over there. Of course don't forget if you just need a complete PSD design template to build off you can grab those at ThemeForest!

We're not Done Yet...

Take a few minutes and read these great interviews by some of the leading names in web industry. You'll be amazed by how much you can learn from these guys!