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