Reading about the UI design process of any web site, web application or even a mobile app can be very informative and inspirational for any designer. But nothing would beat experiencing the initial design process, as the original designer did, and getting the chance to view the fruition of a UI concept. The only way you could experience this is by having a look at the designers initial wireframe sketches, and that is exactly what we have for you today in this news round-up – A Selection of Mobile UI Wireframe Sketches.

iPhone Sketches: Paper, Pencils, Wooden Forms, Ink and Brush

iPhone Sketches: Paper, Pencils, Wooden Forms, Ink and Brush

Harvest iPhone App Sketches

Harvest iPhone App Sketches

Early Ember Sketches in Color

Early Ember Sketches in Color

By Paul Andrew (Speckyboyand speckyboy@twitter).

Adobe Photoshop is probably the most popular of image editing and enhancement applications. It not only helps us create quite amazing graphics, but it also lets us design beautiful layouts for our web design projects. If you’re mostly focused on the artistic side of designing a website, then finding comfort and new found ideas in Photoshop tutorials is a great way to get started. These guides will help you enhance your experience and master the art of Photoshoping layouts for web design.

Here is a collection of 35 Premium Photoshop Layout Tutorials for Web that teach you how to create your very own layouts. Enjoy!

Create a Sleek, High-End Web Design from Scratch

This tutorial will enable you with the tools to put together a high-end web design layout using clean and beautiful images, as well as well nested elements.

Photographer Design Layout

A simple Photoshop tutorial on how to create a nicely illustrated professional photographer web layout.

Website Gallery Layout Design

This tutorial will help you learn how to make a layout for a css website gallery utilizing Photoshop.

Design Studio Layout

Here you’ll be showed how to create a simple web design portfolio layout. You can also use this layout to create your very own wordpress theme.

Design a Premium WordPress Blog with Photoshop

In this tutorial you will learn how to create a premium wordpress layout with a special area where you can feature products, apps, or downloads.

Corporate WordPress Style Layout

Create a dark, clean, and usable blog style layout tailored for your corporate needs. Using WordPress, you will also have a section for your blog, which is a great way to reach prospective clients.

Making the “Clean Grunge” Blog Design

With this tutorial you’ll be able to see how to make a clean/grungy layout.

Clean Website Layout

Learn how to create a clean and simple web layout using Photoshop.

Five Looks, One Layout

Learn the swift process of creating a diverse web layout that can embody various design themes.

Watercolored Background Web Portfolio Design

In this step by step tutorial you’ll be explained how to create a Watercolored Background Web Portfolio Design using two brush sets, a icon pack and some basic techniques.

Create a Clean and Colorful Web Layout

This tutorial shows you how to create a clean corporate layout in Photoshop.

Develop a Unique Colorful Site Layout

This tutorial will guide you through the process of designing a professional website with a funky colorful flair. The tutorial features some great colors, effects and layer styles in which you can use over and over for future projects.

Create a Nature Inspired Painted Background in Photoshop

We’ve all seen it, and we’ve dreamed of experiementing with backgrounds featuring nature. This tut lets you do just that, and more.

Design a Beautiful Website From Scratch

Throughout this tutorial, several tiny details and features will be pointed out, they will make your website design look beautiful.

Create a Company/Business Web Layout Using Photoshop

Create a light psd template well fit for a company website layout, business photoshop template, and a portfolio layout.

Create a Clean and Effective Product Layout

This tutorial will show you how to create a clean and effective product design in Photoshop. This template can also be easily converted into a portfolio layout if desired.

Create a Business PSD Layout in Less Than 10 Minutes

Here you’ll develop a crisp business layout in less than 10 minutes.

Create a Green/Eco-Friendly/Environmental Web Layout

You will create a green/eco-friendly/environmental web layout (photoshop template).

Design a Sleek and Modern Hosting Layout

This layout features dark elements with bright text and cool buttons. It’s got a slightly futuristic feeling to it as well.

Create a Nature Inspired WordPress Layout

In this Photoshop tutorial you will create a nature inspired WordPress layout with a number of features such as Free Social Media Icons, a Function Icon Set, and Nature photos.

Web Site Design Tutorial: Wellknown.as Case

This tutorial shows you how the author created the layout using Fireworks. But of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same.

How to Create a Sleek and Textured Web Layout in Photoshop

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.

How to Create an Illustrative Web Design in Photoshop

In this web design tutorial, you’ll learn how to create a professional web design with an illustrated “vector” header in Photoshop. You’ll see many techniques here including how to draw using the Pen Tool and a excellent type treatment using layer styles.

Design a Clean and Fresh Company Website in Photoshop

You will be shown how to create a clean and sort of serious web design for a company.

Create an Amazing Layout Using Textures

In this tutorial you will be shown how to create an amazing layout using a simple texture, and some layer styles.

Design an Attractive One-Page Portfolio in Photoshop

You will be designing a one-page portfolio in Photoshop. The portfolio will include some brief biographical information, some sample work, brief description of services, your latest tweets, links to social profiles, and a call to action.

Create a Professional Portfolio Design in 17 Easy Steps

This tutorial teaches you how to create a professional looking portfolio design using very basic techniques.

Design a Simple, Modern Web Template

In this tutorial we will create a beautiful modern web page design with great usability.

Create a Gritty Website Layout

In this tutorial you’ll learn how to create a clean website layout with a grunge background. You can use this layout for a WordPress blog as well.

Create a Clean Modern Website Design in Photoshop

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.

Create A Stylish Portfolio Layout

In this tutorial you will be shown how to painlessly create a stylish portfolio layout in Photoshop, and you will also be guided on how to add jQuery functionality.

Create a Web Design Company Layout in Photoshop

Here you will learn how to create a modern looking Photoshop design for your web design company.

Create a Promotional iPhone App Site

In this tutorial you will be creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop.

Shopping Cart Design Mockup

You’ll be mocking up a shopping cart design layout called shop smart with various useful elements and extra functions.

Design a Dark, Contrasted Layout in Photoshop

In this tutorial you will learn how to create a dark, contrasted layout in Photoshop. This technique makes the top of the layout stand out while the bottom has a dark, professional feel.

Converting Your PSD to HTML Resources

This tutorial guides you through the entire process of converting from Photoshop to completed HTML. You’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme.

Tutorial: Coding a Layout

This is a tutorial from Eratic Wisdom, it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.

Build a Sleek Portfolio Site from Scratch

Within this tutorial you will be taking a good look at PSD files and then learning how to build it with some nice clean HTML and CSS.

From PSD to CSS/HTML in Easy Steps

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS.

How to Turn Your Designs Into Usable Web Interfaces

Part Digital Design offers a detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.

Print designers have successfully utilized the grid to create effective design layouts long before the world wide web was even conceived, but the truth is that grids can be just as effective for web page design and ought to be employed by every web designer.

The grid enables designers to create a system of related design elements that interact with each other in a logical, consistent manner. It aids designers in creating a unified page layout and a clear page hierarchy — helping to achieve a visual rhythm that moves the viewer’s eye around the page. Designers experienced with table-based design are more likely comfortable relying on a grid to form the foundation for their designs.

Many website designers today completely ignore (or worse, avoid) the grid. While a vast majority jump right in knowing they want a 2 or 3 column design, never stopping to consider how the choices they make affect the usability, readability, and flow of a site. What if a shift in proportions, a change to the relationships of elements, or an adjustment to type size could make your site more usable and better able to communicate? The grid is the tool that can help you make better choices and therefore have more impact with your design.

However, don’t confuse structure with a lack of visual complexity. It is the very structure of a grid that opens up a multitude of purposeful, rational design decisions.

The Grid Online

When you first think about using a grid as the foundation for your website, you might have the tendency to feel boxed-in. In fact, you may have noticed a trend in web design where the grid is used as a design element. And for some purposes, that’s a good choice. On the other hand, with so many boxy designs there are a lot of sites that are starting to look like each other. Not so good if you’re trying to stand out in a crowd.

But just because you use a grid does not mean your design has to look like a grid. Effective designers can use a grid to achieve all sorts of unique layouts. A grid is a starting point, a skeleton, a frame to hang your design on. Grids help you achieve consistency and cohesion, make better positioning decisions, create pleasing proportions, develop visual symmetry (balance) and rhythm.

Using a grid offers designers a lot of flexibility withing a structured framework. But one of the best methods of achieving maximum impact using a grid is by breaking it. Going off the grid is a sure-fire way to call attention to a key piece of content — an effective device for making an element pop off the page. Used sparingly and intentionally, breaking the grid can help you achieve unexpected and interesting results.

Grid Frameworks

Take a look at the Wikipedia description of CSS Frameworks.

For web designers who want to build on a grid, a CSS framework can provide the underlying structure for a designer to build their web pages around. A CSS framework offers designers flexibility, browser compatibility, adherence to web standards, reduced coding errors, and possibly best of all saves time. There are a number of different frameworks, some simply provide the bare minimum others offer a grid system in addition to style resets, print styles, styles for other common elements, and templates for popular design software.

Two of the more robust CSS Frameworks are the 960 Grid System and Blueprint. There are many others, but these are some of the more popular solutions.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels, with 12-column and 16-column variants. There are printable sketch sheets, design layouts (for popular design programs), and a CSS file that have identical measurements. This framework uses classes to allow designers to rearrange elements independent of the order in which they appear in the markup so you can keep more pertinent info higher in the HTML, without sacrificing precision in your page layout. (excerpted and paraphrased from 960.gs)

Blueprint

This framework offers a CSS reset that eliminates the discrepancies across browsers, a solid grid that can support the most complex of layouts, typography based on expert principles that predate the web, form styles for great looking user interfaces, print styles for making any webpage ready for paper, plugins for buttons, tabs and sprites and tools, editors, and templates for every step in your workflow. (excerpted from www.blueprintcss.org)

Some simple frameworks that provide only the grid with no additional code or styles are CSS-Boilerplate and the 1KB CSS Grid. Both provide lightweight, simple solutions for starting your grid-based web design projects.

CSS-Boilerplate

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important. (excerpted from http://code.google.com/p/css-boilerplate/)

1KB CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid. (excerpted from www.1kbgrid.com)

Fluidity

The main problem with most CSS frameworks is that they are based on a fixed-width solution. Designers who embrace website flexibility and accessibility are likely going to need a fluid grid. Enter the Fluid 960 Grid System created by Stephen Bau which is a derivative of the 960 Grid System by Nathan Smith.

The nice thing about this fluid grid system is that it provides designers with all the benefits of using a fixed grid while allowing us to create something infinitely more usable for multiple audiences. For those of us who are comfortable giving up the control that a fixed width layout provides, the Fluid 960 Grid System is a great solution offering the ability to use a grid while saving the time of building a custom framework.

Designing on the Grid

Using a framework allows designers to get back to the creative part of our work. Having the underlying structure already built allows us to focus on creative design solutions. Of course, you’ll still need to manipulate your code, but working on top of a pre-built framework really gives us a big head start.

Start your design by mapping out the key content areas. I used the original 960 Grid System template for Photoshop which you can download directly from 960.gs.

Once you’ve got the sections where you want them, you can start to integrate the design elements.

Once you learn to appreciate the grid and its impact on your design, you are ready to break it. When done intentionally, breaking the grid can be a very effective tool for drawing attention to a particular piece of content. Think about where you might break the grid for a bit of visual impact.

The thing about using a grid is that you can achieve a consistent look and feel across a variety of pages. Using a grid, you’re homepage design layout will work with alternate sub page layouts, providing the user with a familiar look across your site while giving you the ability to create page designs that can accommodate different types of content.

Additional Resources

If you weren’t using grids as part of your web designer toolkit, I hope that by now you are intrigued by the possibilities that employing a grid can provide. Web designers need to invest in the grid, and too investigate further check out the following articles, websites, and tools that offer even more on designing with grids.

Grid Tutorials and Articles

• A Detailed Look at the 960 Grid System
• Prototyping with the 960 Grid Framework
• 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know (article)

Websites Dedicated to the Grid

• The Grid System
• Design by Grid

Grid Toolbox

• GridFox
• Grid System Generator
• Grid Designer 2.6b

Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content. Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design. A simple wireframe displays the location of a header, main content, footer, sidebars, ad placement, and navigation.

Coming to Terms with Wireframes

Wireframes are usually created using a variety of software applications geared towards design. Most developers find good use of Photoshop and Visio stencils because they allow you to save layers and libraries of commonly used shapes and elements. Once you’re able to develop your wireframe prototype, this will allow you to interact with your client in a variety of ways such as getting an up-front view of their sites design or redesign. This also means that the developer has a clear understanding of what technologies (i.e. JQuery, Ajax, etc..) need to be used for specific elements on the site.

A large portion of these common elements are absolute needs, and if not included then this can cause your visitors to experience, leave, and express a great deal of frustration towards your site. No one wants to visit a site that offers an unclear purpose, seems way to crowded, and neglects the need for vital elements such as navigation to be labeled and easy to find.

Vital Steps to Effective Wireframing

One of the biggest mistakes you can make as a designer on a development project is failing to plan. When you wireframe this is one of the very few vital steps you need to take v.s. the other 100 or so. This is where the conceptualization of an idea starts to take shape and form to allow interaction between the sites design and back end development. Below you will find a few tips that will enable you to make not only effective but better wireframes.

Functionality Contra Superficial

Many times the way you design your wireframe depends on the tools readily available. However, it should always be more about function rather than form at some point. Once you focus on function, form will start to take place. In other words, this means that you not need to create the best looking wireframe, just one that has promising function and form. A good wireframe would include the most important of elements such as boxes, buttons, dropdowns and more.

Spending Too Much Time on Wireframes

Your wireframe has nothing to do with design. Therefore try to avoid spending large amounts of time on making your wireframe “pretty”. If you add too much design then you will end up shifting your client’s focus onto un-important aspects.Wireframe is part of the development process, just remember that design should be left to designers.

Organizing Your Wireframe

As obvious as it is, sometimes it’s easy to forget how important it is to have a well organized wireframe. You can start organizing by splitting the sections that need to be separated such as news, products and user account/registration. Once you’re able to break up your wireframe correctly, then this will bring you one step closer to a more attractive and usable design.

Choosing the Right Tools

For most designers, the pen and paper is utilized as the canvas unto which creativity is transferred on. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept becomes much more then that. As successful designers it’s important that you use tools that you’re most comfortable with. This would increase the chances of raising the quality of work. A few tools used besides Adobe Photoshop and Microsoft Visio would be PM PowerPoint, and Designers Adobe Fireworks.

Color a Plus or Negative?

There are a few things one should avoid when designing a wireframe, one of those things would be to use too much color in your design. Our human eyes are captivated by components that posses any sort of color. We naturally begin to analyze the color scheme behind most of the things we see on a daily basis. Simply put, a wireframe with an exaggerated amount of color will more than likely distract you (or the client) from chief elements.

Although, greyscale is the standard for wireframing, it’s not always a horrid idea to use a VERY light touch of darker colors (black, navy blue, etc..) to separate your sections. However, if you utilize any form of color, it’s possible that your client could have a mal-reaction, i.e. questioning the actual colors of the site. This could easily become a set-back, or it can all together end the clients interest in using you for their sites design. Most designers limit the use of colors to links or elements that may not be included on every page. If you feel the “need” to use color, this wouldn’t be a bad idea.

Clean Examples of Wireframes