In recent weeks we have published a few posts that focused on graphic design basics: Learn Photoshop and Learn Illustrator. Both of those posts generated a lot of interest from readers, so today we’ll continue with a third post in the series, this one focusing on the basics of web design. Here you will find categorized resources and links for learning HTML, CSS, typography, the design process, and more. If you’re just getting started or looking to brush up on your skills, you may want to bookmark many of these resources.

Introductory Information and General Learning Resources

General resources for learning web design

The sites listed below are excellent places to find loads of content aimed at people who are looking to learn more about web design and front end development. Much of the content is free but some of it is available for a membership fee, which may be worth the cost to save yourself some time in tracking down the right resources.

W3Schools

The portfolio websites of designers are often excellent sources of inspiration. Portfolio sites frequently demonstrate exceptional creativity and attention to detail. In this post we’ll feature 25 outstanding portfolio sites that are worth a look. You’ll find designs from a variety of styles here, including minimal, illustrated, nature-inspired, textured, and more.

Andreas Ovefelt

Designers and photographers have a number of options when it comes to photo editing. Of course, Photoshop is the most popular software, but there are a number of websites that allow you to edit photos online. Depending on your needs, the full version of Photoshop may not be necessary. In this post we’ll look at 31 options for editing photos online.

Leading Options for Free Online Photo Editing:

Picnik
With Picnik you can grab photos from your Flickr, Photobucket or Facebook account easily. Picnik includes advanced controls and effects in addition to basic options like cropping and re-sizing. A premium version is also available with more features for a little over $2 per month.

News and magazine-style sites tend to follow some specific trends. In this post we’ll take a detailed look at the design trends of news sites with plenty of examples, and the end of the post includes a showcase of sites.

If you’re working on designing a magazine-style site or blog theme, taking these trends into consideration may help.

White (or Light) Backgrounds

Like most content-heavy sites, news and magazine-style sites tend to have white or light-colored backgrounds, which is generally better for readability. Of course, there are exceptions to this, but especially among the major news sites, white backgrounds rule.

Our friends at IconShock have designed another set of free icons especially for the readers of the Vandelay Design blog. This set includes 6 icons (in PNG format) that can be used for personal or commercial purposes.

Business cards are a necessity for designers who want to market themselves and their services to people that the come across. They also provide an opportunity for the designer to make an impression with a stylish, memorable card. Letterpress business cards are a popular choice for designers, and in this post we’ll showcase 33 high-quality letterpress cards. Hopefully these examples will provide some inspiration if you are considering designing some new business cards.

Jason McGrew

With so many freelancers and design agencies out there, finding work can often be a major struggle, especially for those who are just getting started. A growing number of designers are using social media as a means of marketing their services, in addition to simply using it for interacting with friends. While social media marketing can be extremely effective, it can also be a big waste of time. In this post we’ll look at some tips that should help you to ensure that your time with social media is well spent.

1. Know What You Want to Accomplish

One of the most common mistakes that is made in social media marketing is not having a purpose or a goal. Many businesses and entrepreneurs recognize the power and potential of social media and social networking, so they feel that they need to be involved. However, simply having a Facebook fan page or a Twitter profile is not going to make a real difference.

Developing a social media marketing plan requires having a specific purpose or goal (if you’re using social networking only for fun or personal reasons then, of course, this does not apply). Web designers may want to use social media to find more clients, network with other professionals, or maybe to build links to their blog or portfolio site. The first step to using social media effectively is to have a clear understanding of what you want to accomplish. This will shape the approach that you take and the way you use the social media sites. Without having a goal or something that you want to accomplish, there is really no way to know if it is working for you and your business.

We frequently publish posts on this blog that feature  tutorials for learning how to do various things with Photoshop, but we have rarely focused on just the basics. This post is intended for designers or aspiring designers who either want to get started with Photoshop or have limited experience and are looking to improve.

While there are plenty of great learning resources available online, it’s often difficult for beginners to know where to get started because everything seems to be scattered. With this post you’ll find links to plenty of resources to teach you all the basics and fundamentals of Photoshop.

Most of the resources and tutorials listed in this post will focus on teaching one particular aspect of Photoshop, such as how to use a specific tool. Everything is broken down into sections so you can find exactly what you are looking for.

Intro to Photoshop’s Tools and UI:

The resources in this section will serve as an introduction for those who are new to Photoshop. They will help you to learn your way around the interface and with some of the basics of Photoshop.

Getting Started with Photoshop

It’s been a while since we did our last blog design showcase, so this post is a collection of 30 beautiful blogs for your design inspiration. You’ll see some that use a minimalist design approach, others that use a grunge-style design, some that are magazine-style, and more. For more blog design inspiration, please see our gallery site Blog Design Heroes.

Internet Gentleman

Earlier today a new membership-based site, MediaLoot was launched. It is an online toolbox of premium design resources, and they have kindly offered to give five readers of the Vandelay Design blog a one-year membership to the site for free!

Minimalism a popular style of design because it keeps things simple and user-friendly. In this post we’ll look at more than 20 websites, blogs and books dedicated to minimalism. Not all of them are related to web design – minimalism can also be applied to other aspects of business and life.

Minimal Design Showcases:

If you want to find great and inspiring examples of minimalist design, these sites will be excellent sources.

Minimal Exhibit

A few weeks ago we published a showcase of one-page portfolios and pointed out some trends among them. Many of those sites are using jQuery to accomplish specific things. In this post we’ll feature some plugins and tutorials that are ideal for one-page portfolios. Of course, they can be used on other types of sites as well, but they are well-suited to match up with the trends among one-page portfolios.

Contact Forms:

All portfolio sites need to allow visitors to contact the designer, whether it is through an email address or a contact form. One-page sites face the challenge of including a usable contact form without using a separate page for it. These two resources can help for creating contact forms that will not take up too much space on the page.

Using Form Labels as Text Fields
CSS Globe provides a tutorial that is ideal for contact forms in limited spaces, which is often the case with one-page portfolios. The script can also be downloaded for use in your own work.

Texture is obviously a common design element that is being used on a lot of modern websites. However, texture doesn’t always have to be a part of the design that stands out immediately to visitors. Light textures can also be used to subtly improve the design of the site. In this post we’ll feature 25 sites that use texture without it dominating the design.

Odosketch

Designer portfolio sites often showcase creativity and the skills of the designer. If you browse around at current portfolio sites you’ll see a lot of illustration being used in the design. In this post we’ll feature 25 portfolios that use illustration. To see more portfolios please visit our gallery site Folio Focus.

Rype Arts

TemplateWire has offered to give free templates to three Vandelay Design readers. If you’re not familiar with TemplateWire they are a leading marketplace of CSS templates, Flash templates, and logo templates. For $49 you can get 12 months of unlimited access to all of their premium templates. Or you can get 3 months of access for $29. You can use the templates on an unlimited number of websites for you or your clients.

Transparency is being used in an increasing number of websites. In some cases transparency subtly adds to the quality and character of the design, and in other cases it can be a major design element. In this post we’ll feature 35 websites that are making excellent use of transparency.

2am

Non profit organizations tend to have limited budgets and limited involvement from members for planning, designing and maintaining websites. This often results in a site that doesn’t really achieve everything that it could for the organization and the people involved. In recent years there has been an increasing number of organizations that are doing great things with their websites and truly making them valuable and effective.

In this article we’ll look at the keys to an effective non-profit organization website, while showcasing some examples from specific sites.

1. Clear Description of the Organization’s Mission/Purpose

Many of the visitors that will be arriving at the website will not be familiar with the organization. Upon arriving, they should be able to quickly get an idea of why the organization exists and a basic picture of what they do.

The full mission statement or purpose statement is sometimes part of an About Us page, but first time visitors to the home page should have an idea of why the organization exists without even visiting another page. The About Us page can of course provide more details, but visitors should not need to navigate through the site in order to understand the basic purpose of the organization.

There are a number of different ways to help convey a message of mission or purpose on a home page. In some cases there will be a brief one or two sentence statement that is located in a prominent position. Photos and images can also help to communicate purpose.