With hundreds of million web sites online today it is nearly impossible to create a 100% unique design. And why even struggle to do it? Visitors fell welcome and comfortable if the design is familiar, if basic navigation and how to find content is similar to something they have seen before. This is also, why so many websites today run on the same simple WordPress themes with minimal adjustments compared to the original. Trends come and go but the fundamental structure of a website is still more or less the same except for a minority of websites that intentionally have challenged the ground rules. Getting familiar with the basic techniques of how to design a website from ground up is key and then you will be able to apply trends as they come. Lately we have seen trends like use of Light Effects, Grunge, Textures, Bokeh Effects and they all fit into old design patterns and can be applied to to your designs if you want to follow the trends. This article provides a list of 40 excellent web design tutorials and can be used as inspiration to speed up designer’s creative process and for boosting technical skills.
In this web design tutorial, we will be creating a minimalist, dark-themed web layout that’s perfect for a portfolio site. We’ll only cover the creation of the basic parts of the layout and leave it up to you to apply your own finishing touches.
In this Photoshop web design tutorial, we’re going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template. You should also check out some of the awesome HTML5 website templates available today.
In this step-by-step web design layout tutorial, you will discover a method for designing a clean blog design with stunning gradient and lighting effects using Adobe Photoshop. This tutorial is geared for beginner to intermediate Photoshop users.
Produce a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop. You’ll learn popular design techniques such as creating a 3D ribbon and professional-looking color gradient effects.
In this tutorial I am going to show you how to create a clean corporate layout in Photoshop.
In this tutorial you will learn how to make a clean photo gallery website layout.
In this web design tutorial, you will discover a way to create a sleek and professional web page layout that incorporates the 3D Ribbon design trend, as well as some other captivating 3D elements, using Photoshop.
This tutorial i will show you how to create another web 2.0 layout for your creative portfolio.
This tutorial will show you how to create an efficient wordpress mockup layout in photoshop.
In this tutorial you will learn how to make a simple and clean wordpress style theme called GreenPress.
This tutorial will show you how to create a simple mockup version of a wordpress template.
This tutorial will show you how to create a clean layout with a 3D look and you can use this layout for your design portfolio, or you can create also a nice looking wordpress portfolio theme.
Tutorial on how to realize a nice Web Portfolio Design with a Watercolored Background using two brush sets, a icon pack and some basic techniques.
In this tutorial you will learn how to make a sleek, and professional tutorial blog.
In this tutorial you will learn how to make a layout for a css website gallery using Photoshop.
This tutorial will show you how to create a clean looking web layout for your portfolio.
You can use this tutorial to create also a professionally blog layout.
Whether you are a single entrepreneur involved in financing and accounting or a member of school of business, you will definitely love the following layout.
This tutorial will show you how to create a complete grunge home page design.
You can use this layout also a personal portfolio layout, a photography layout, or even if you have a design agency.
With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.
In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.
This tutorial will show you how to create an amazing layout using a simple texture, and some layer styles.
This tutorial will cover the steps of designing the Clean Grunge blog design from scratch. It also discusses the techniques and styles of this kind of web design.
In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop.
In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.
Grunge Vector Layout
This tutorial will show you how to create a vector style layout with a nice grunge effect.
In this web design tutorial, you’ll see a method for creating a professional web design mockup that’s perfect for a modern business or e-commerce website. This tutorial assumes that you know the basics of Photoshop.
In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.
In this tutorial you will learn how to create a corporate wordpress styled layout.
Make a clean corporate style layout for your business.