Pin Me

Great Web Design Tutorials for the Novice Designer

written by: Stephen Newman•edited by: Donna Cosmato•updated: 9/19/2011

As a beginner, you may already know the basics of setting up a website and getting it online, but your websites probably still look amateurish. The more you learn, the more your websites will improve, and these tutorials will help you do just that.

  • slide 1 of 6

    Tutorials Are the Best Way to Quickly Improve Your Skills

    In web design, there are certain skills that are only acquired after years of experience (such as managing clients and developing your own unique style), but many other skills can be picked up in under an hour. Tutorials are the quickest way to learn new skills which you can implement in your future projects.

    The best way to learn from tutorials is not simply to study them, but to actually practice using the methods they teach. The tutorials listed here will help develop your skills as a web designer; master them and you'll be able to design simple but elegant websites.

  • slide 2 of 6

    Master the Basics

    If you don't already have a solid grasp on the basics of web design and development, you'll want to make sure you brush up on them before you try to implement anything too advanced. The basics aren't very flashy, and if you build a website using only the basics, it will look pretty outdated.

    That being said, all of the flashier elements that really make a website shine have a foundation in the basics, and without knowing the basics you can't take advantage of them. Take some time to understand what makes a website tick, learn which elements are common to successful websites, and look at examples to see how other web developers achieve their designs.

  • slide 3 of 6

    Add Some Simple Style

    Some of the easiest things you can to improve your site's design are also the most powerful. Some of the things that will stick out most to your visitors will be the site's color scheme, the font/heading scheme you're using, the site's background, and the manner in which the site's elements are laid out (i.e. is everything placed/spaced in a natural looking manner, or do certain things run too close to others, or even overlap?).

    Some of these simple things will make or break a website. It doesn't matter if your website has extremely useful information - when it's too cluttered or presented in an awkward fashion, visitors will flee. Practice the simple stuff and build your knowledge around it.

  • slide 4 of 6

    Design a Great User Interface

    Almost all modern websites interact with their users to some degree, even if it's nothing more than collecting an email address. A big part of web design is making the user's experience as simple and straightforward as possible. The user interface of your website (or UI for short) involves all elements where interaction occurs between the user and the website. These elements include the website's navigation, web forms and buttons, and any other sort of interactive feature.

    The UI elements of big websites like Wikipedia and Facebook are extremely complex on the back-end, but easy for users to interact with on the front end. While many of the more complicated UI elements require advanced programming knowledge to implement, they still need to be designed in a way that's appealing to users, and a few basic elements help achieve that.

  • slide 5 of 6

    Jazz Up Your Websites With Some Finishing Touches

    In many cases the differences between a good design and a great design are the finishing touches that bring the entire page together. Integrating some intermediate and advanced techniques will help you add these professional touches.

    There are countless javascript, CSS and HTML techniques that you can use to add these touches. These include things like setting your website's favicon.ico, adding simple java features, making your tables look stylish, adding opacity to specific elements, etc. Incorporate these and your clients won't believe the value they're getting.

  • slide 6 of 6

    Design for Optimum Performance

    optimize load time tutorials The way a website is designed has a lot to do with how it performs for the end-user: load times, browser compatibility, page width and height, etc. The larger (in terms of filesize) a webpage and all the images on it are, the longer it takes for them to load. Most of your visitors will have broadband connections and be able to handle your website, but even for them the site should load in under three seconds, with under one second being optimal.

    A lot of beginning web designers will fill their first websites up with lots of high-resolution graphics (which look nice, but that's not the issue) only to find that their website takes too long to load. Not only do large page sizes affect usability, but search engines now take load time into consideration for rankings, and guess which websites are going to get a boost from that? I'll give you a hint, it's not the page with 500kb of images on it. Learn how to optimize your site for your audience.

References