There are several stages during the process of a web design project, and every stage is important to achieve a positive end result. In order to proceed to the research phase, you need to gather information and know what the project is about, which technology is required, the target audience, goals, content, etc.

There are great articles out there explaining theory aspects of a web design process, stages, and how you should proceed. Those articles (which I recommend reading) can give you a good understanding of this matter and they are usually very theoretical, which is not the purpose of this article.

Do you ever felt curious about how other designers build their web sites? How do they organize things while working? What tools do they use beside Photoshop?

Every professional designer or developer work in different ways, however, the goal is to give you good insights about how you can prepare and deal with some practical aspects of a web design project.

The points that you will read about are:

• Folder Structure
• Inspiration
• Wireframes/Structure
• PSD
• Layers
• Tools

Folder Structure

So you have 150 projects on your hard drive, and most of them have a folder structure that you decided to use according to your mood, so some have PSD files mixed with AI files, and you have 3 CSS folders named "CSS_old[1]".It will take some time to organize, now that some of those clients are interested in a redesign process.

Having a nice and organized folder structure, and getting used to it in every project can really speed up your work flow, you also receive positive points if you start working with a team, and it keeps your sanity intact.

I like to have my folders named correctly and everything separated.

Site – Everything related to the web site implementation. It contains assets folder described below and HTML/PHP files, or other type of files depending on the language it is being used.

Assets – Contains "css" folder for stylesheets, "js" for JavaScript files, "imgs" for images, "classes" is used usually for PHP classes, “includes” for some other PHP files, and "fonts" are used for @font-face purposes.

PSD – It is pretty self-explanatory. It will contain all PSD files of your project.

AI – Same thing as "PSD" folder but for Illustrator files.

Ref – I always like to have a "Ref" folder, which I use to store Image prints of web sites that will later be used for inspiration and brain storming.

Data – I use this folder to store documents, old logos or other files that will be needed for the project, usually the ones provided by the client.

Inspiration

Inspiration is mandatory and a key factor for every project, no matter of what nature. However, since this is a practical article, the goal is to give you work methods and not theoretical points, so let’s get started.

Now that you know how I organize my folder structure, you can see that I have a folder called “Ref”, which is where I store all the references I like and consider important for the project I’m currently working on. First thing is to open your favourite showcase galleries, and google keywords related to the work you are looking for. Let’s assume you are looking for nice portfolios, in this case I would do a google search with keywords like  ”portfolio web design inspiration“, and if you try it you will see hundreds of expected results showing up. Keeping my folder “Ref” open, I just need to take a screen print or drag (if available) the web site image to my “Ref” folder.

I usually dedicate 30min or more to research and inspiration, no distractions allowed. This is something I always do, even if I already have the design in my mind. Storing your favourite designs on your “Ref” or “inspiration” folders, can also give you a great collection of layouts and ideas for your future projects.

Wireframes/Structure

Most designers care less than they should when it comes to wireframes, which I consider underrated. A wireframe illustrates the layout of a web site, representing its structure in terms of content and usability. If you’re dealing with clients, wireframes can be particularly useful to communicate and define some ideas.

Personally, I love to create wireframes in my Moleskine, however, when needed, I also like to use iPlotz which is a nice and very complete web application, but I am pretty sure that there are dozens of other great tools out there.

Last year, Dainis wrote a very useful article where you can find useful tools for Wireframing – 18 Wireframing, Mockup And Prototyping Tools To Plan Designs

Advantages

1. Save potential time lost

2. Easily revised

3. Fix and study usability flaws

PSD

For the sake of simplicity, let's assume you use Photoshop, as most of us do, if not, the general idea is the same.

When I am designing and creating a project’s layout, one thing I do is having an extra PSD file open. This PSD file is essential in big and small projects, and can increase your work performance tremendously. I usually call it Elements.psd, and it’s where I store common elements of every layout page, like text, colors, buttons, lines, and all the other graphic elements which can be of common use. It becomes easier to edit, especially if you have more than one template color in your project.

When you start designing a sub-page and you have every element organized in your Elements.psd file, than you just need to drag the layer you want to your sub-page, instead of having to open the homepage to look for the file and copy to the new sub-page.

Layers

This is probably the most time-consuming mistake that beginners, and some advanced designers, still do. The reason is because designers immediately start creating their concepts keeping their focus on the design, and nothing else. Believe me when I say that having three layers named “Layer 1 copy” among ten other layers named “layer 2 copy”, isn’t very helpful for future edits.

Before start designing the layout, I like to organize my layers by folders and colors.

I do not use colors on all projects, however, it only takes a few seconds to make and can be useful later on. Every designer have different uses for colors, so if you are going to use colors, be sure you find a good use for them or don’t use them at all.

Let’s say you have colors for different sections of your Content like I have on the image above, if I drag by mistake a layer from “Image slider” inside “Top bar”, I will have a yellow layer between orange layers. This is particularly useful for big projects where you need to have your layers in order.

Tools

This is one of those topics that could generate a new article. I will tell some tools, web applications, and frameworks that most designers and developers (including me) use for their projects. If you any have suggestions, feel free to comment.

Adobe Suite

No need for introductions.

URL: Adobe

Coda (Mac Only)

URL: Coda

Top Web development application for Mac OS X.

jCodeCollector

jCodeCollector is a multi-platform application that helps you to manage your code snippets.

URL: jCodeCollector

EasyPHP

EasyPHP is a WAMP package including the scripting language PHP, the web server Apache, the SQL server MySQL, as well as easy development tools such as the database manager PhpMyAdmin and the debugger Xdebug.

URL: EasyPHP

Adobe Kuler

Web-hosted application for generating color themes.

URL: Adobe Kuler

Typekit

Gives designers and developers a subscription-based library of hosted, high-quality fonts to use on their websites.

URL: Typekit

iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application.

URL: iPlotz

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

URL: jQuery

WordPress is surely the most used CMS in the world. Here we will talk a little about it’s incredibly easy multisite install (a.k.a. Network install). With multisite you can set up multiple blogs that share the same WordPress files, DB, plugins, themes, so you can do some cool things with it. We will see how to get posts from another blog in the network, as it was yours, create users, dynamically create a blog, how to create multiple blogs in different domains, and much more.

So, let's rock.

What is Multisite? Why it is so good? Why should I care?

With Multisite install you can create (and remove!) multiple blogs that can work together. They share the same DB, WP files and domain (but you can use it in multiple domains, see below).

It gives you a lot of power to build complex networks with a few clicks.

For example, let's say that as a really good freelancer you have a lot of good customers (I hope so! :D). If you use WordPress as your CMS, you have to install one blog for each one of them, right? No. If you set up a network, you just have to upload a new theme and create a new sub-blog for each one of them. Actually, you can have the same text, menus, and categories for all of them.

Advantages

Share info

You have some info that is easily shared between all blogs, so you don't have to worry about:

• Common user data – Users who are added to your network will have subscriber access to all sites on your network. People don’t need to have an account for each blog in the same network.
• Posts – You can easily get posts (categories, meta-fields…) from any blog in your network and post it as if it were your own content.
• Themes & Plugins – Any theme or plugin set available to the super admin (network administrator) can be used for any blog. So you don't have to install the same plugin in 300 blogs

Separate some info

As each blog has to be different from its sister blogs, you have some info that is still separated, like blog configurations, selected theme, and separate site administrators.

Examples

We have a lot of applications for it:

• User created blogs - WordPress.com
• Multi-Themed blogs – If you want to create a network like Tutsplus.com
• Groupon-like sites – So you can have one blog for each city, which has its own administrator.
• Freelancers – So you can have one blog for each customer, and can easily setup a preview for them.

How to activate multisite?

Since Worpdress's Codex has a really well explained tutorial of How to Create a Network, we won't cover this.

How to use your new admin panel

As any WordPress admin panel, the network admin panel is really easy to use. But it isn’t so easy to find. Here is where you can access it (after your network is created, of course):

From here you can do almost anything you need.

So if you want to create a new blog, just go to Sites > New site. Once created you have a lot of options for each site, use it carefully (don’t go just changing the permalink structure for each blog, for example, it may cause some errors).

If you want to set which plugin / theme will be available for each sub-blog, use this option:

Useful snippets

Talking about code, there is a few things you must pay attention to. When you activate your network, you change some functionality of wordpress, so some functions will not work as they used to (or as you thought they should). And you have some new functions that makes your work easier.

Here is a list with much more functions for your entertainment.

Switching between blogs – switch_to_blog() function

Let’s say, for example, you own wpmultisite.com and you have WordPress (Network install) there. Inside wpmultisite.com you have /phpblog and /cssblog. Your wordpress’s structure is:

• wpmultisite.com/ – The main site, because it was installed first. Its ID is always 1
• wpmultisite.com/phpblog – The second blog installed, so its ID is 2
• wpmultisite.com/cssblog – The third blog installed, so its ID is 3

When a page is requested in any of these blogs, your server executes it as if it was a single wordpress install, the only difference is that it will only get data from the current blog ID.

But you can change it when you use the switch_to_blog() function. It makes your blog get data as if it were other blog in your network. So if you want to make phpblog get cssblog’s data, you just have to set switch_to_blog(3). Note that it won’t work for plugins, which is only called when you really access a blog.

You must have been asking yourself now, “how can I make this STOP?“. Well, once you’ve finished you just have to call restore_current_blog() and make things go back to normal. If you called switch_to_blog() twice, each restore_current_blog() will just bring you to previous active blog. For example, if you have switch_to_blog(2) and INSIDE of it you do switch_to_blog(3) when you call restore_current_blog() it will bring you back to blog 2, and if you call restore_current_blog() again then you will be in your original blog.

Other important thing to notice is the $blog_id global variable, that stores the current rendering blog. It is useful, for example, if you have the same theme for multiple blogs inside your network.

A little example, how to get posts from phpblog if you are in root, from cssblog if you are in phpblog and from root if you are in cssblog

 //gets active blog 	global $blog_id;  	switch($blog_id) { 		case 1: 			//we are in root, so we want to go to phpblog 			$goto = 2; 			break; 		case 2 : 			//we are in phpblog, so we want to go to cssblog 			$goto = 3; 			break; 		case 3 : 			//we are in cssblog, so we want to go to root 			$goto = 1; 			break; 	}  	switch_to_blog($goto); //magic! 		//I always indent code inside a switched block, it is easier to read after a few days (or months) 		$lastposts = get_posts('numberposts=-1'); 		if (!empty($lastposts)) { 			foreach($lastposts as $post) : 				setup_postdata($post); 				//do some cool stuff in here 			endforeach; 		} 	restore_current_blog(); ?> 

Get posts from all blogs – get_last_updated()

What if you want to get some recent posts from last updated blogs, not only one blog? Then get_last_updated() is the function that will save your life!

It returns the last updated blogs as an array, so all you have to do is a foreach and you are done!

Let’s see a simple example that shows last post from last updated blogs:

 $blogs = get_last_updated(); echo ' <h1>Last posts in network</h1> '; foreach ($blogs AS $blog) { 	echo " <h2>".$blog["domain"].$blog["path"]."</h2> "; 	switch_to_blog($blog["blog_id"]); 		$lastposts = get_posts('numberposts=1'); 		foreach($lastposts as $post) : 			setup_postdata($post); 			the_title(); 		endforeach; 	restore_current_blog(); } 

Dynamically created blogs – wpmu_create_blog()

This is definitely my favorite. With wpmu_create_blog() you can do something similar to wordpress.com itself, where each user can create his own blog.

But before creating a blog you must create / choose the admin user. So, after you have user_id it is just call wpmu_create_blog() with its parameters. Pay attention in the “path” parameter, it must have “/” before it, or you blog will be created in an address that can’t be accessed (in our example, without “/” it would be wpmultisite.com1wd).

 	$user_id = wp_create_user( $user, $pass, $mail ); 	//params: wpmu_create_blog($domain, $path, $title, $user_id, $meta, $site_id) 	$id = wpmu_create_blog("www.wpmultisite.com";, "/1wd", "1WD inside wpmultisite", $user_id); 	echo $id; ?> 

Are you hungry yet?

I hope you’re still hungry to learn more about creating a multisite blog. I’m sure you will use it for some great projects, you can read more about it  here:

• http://codex.wordpress.org/Category:WPMU_Functions
• http://codex.wordpress.org/Function_Reference#Multisite_functions