Preparing For a Web Design Project

Posted in Tips, Web Design3 years ago • Written by 18 Comments

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.

Folder Structure

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.

Inspiration

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.

Wireframes and Structure

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.

PSD

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.

Layers

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.

Layer Colors

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

Adobe Suite

Coda (Mac Only)

URL: Coda

Top Web development application for Mac OS X.

Coda

jCodeCollector

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

URL: jCodeCollector

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

EasyPHP

Adobe Kuler

Web-hosted application for generating color themes.

URL: Adobe Kuler

Adobe Kuler

Typekit

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

URL: Typekit

Typekit

iPlotz

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

URL: iPlotz

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

jQuery

18 Written ArticlesWebsite

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

18 Comments Best Comments First
  • Lian

    Wednesday, May 4th, 2011 07:33

    12

    You article is excellent and quite in derived oriented for everybody in web designing field. Fantastic article with great information.

    +3
  • Ruben D'Oliveira

    Tuesday, May 3rd, 2011 14:03

    8

    Thank you guys. It’s great that you like the article and find it useful.

    Shishir, more tips and methods are always welcome :)

    +1
  • Kenneth

    Saturday, November 19th, 2011 04:30

    18

    Thanks for this great post.. plesae check out my project work

    +1
  • Shishir

    Tuesday, May 3rd, 2011 11:34

    6

    If you give me the opportunity then I can add some extra information here.

    0
  • Lincoln Solicitors

    Tuesday, May 3rd, 2011 18:57

    7

    Very useful, thanks.

    I find the most useful part to be the initial planning on paper. If that goes wrong you’re in trouble.

    0
  • Patryk Cichocki

    Tuesday, May 3rd, 2011 09:52

    5

    Nice reminder :)

    0
  • Ahmed Bolica

    Tuesday, May 3rd, 2011 10:25

    4

    I Like This Post Thanks Bro

    0
  • Kian Ann

    Tuesday, May 3rd, 2011 05:51

    2

    Cool list of things to take note. I use a different folder structure – but ultimately it is important to stick to one that you are familiar with. I also prefer to just buy a domain or set up a subdomain to publish the staging site, instead of doing it on localhost. :)

    0
  • Dann

    Tuesday, May 3rd, 2011 01:14

    3

    nice round up for starting your web design project. Always good to see how ‘others’ are doing it. reg. inspiration.

    0
  • Renato Alves

    Wednesday, May 4th, 2011 01:51

    9

    Very interesting article. Maybe in another article you could talk abit more about the Adobe.Kuler website and how we can improve our web pages with it. Thanks! Cya!

    0
  • Marcone

    Tuesday, May 3rd, 2011 03:53

    1

    Great article. Thank you very much for all tips. It’s not easy at all to find high quality informations like yours, and it’s for free!

    0
  • Harris

    Monday, August 8th, 2011 00:08

    16

    Great Post for setup for any website project. I use a similar setup but was not breaking down the File structure as deep as you go but I can see how can be very beneficial

    0
  • Mike Nielson

    Thursday, October 20th, 2011 05:50

    17

    Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for and I am glad to come here! Thanks for sharing such a valuable information with us

    0
  • Hassan Hibbert

    Monday, August 8th, 2011 01:27

    15

    Great post! I found this very helpful trying new things, and keeping my self organized on new projects.

    0
  • Alpesh Prajapati

    Tuesday, May 10th, 2011 13:20

    14

    hi,, nice post.. some of the information i already followed but thanks for posting.. now i am being much sure that i am on right track. :) thanks

    0
  • Chris

    Tuesday, May 3rd, 2011 20:14

    10

    Nice, workflow organization. I think I’ll be taking some notes from this.

    0
  • Ahsan Idrisi

    Wednesday, May 4th, 2011 07:28

    11

    Lovely work, i like it very much

    0
  • Bruno

    Thursday, May 5th, 2011 13:41

    13

    Great article!
    Good approach on starting and developing a Project!

    0
  • Kenneth

    Saturday, November 19th, 2011 04:30

    18

    Thanks for this great post.. plesae check out my project work

    +1
  • Mike Nielson

    Thursday, October 20th, 2011 05:50

    17

    Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for and I am glad to come here! Thanks for sharing such a valuable information with us

    0
  • Harris

    Monday, August 8th, 2011 00:08

    16

    Great Post for setup for any website project. I use a similar setup but was not breaking down the File structure as deep as you go but I can see how can be very beneficial

    0
  • Hassan Hibbert

    Monday, August 8th, 2011 01:27

    15

    Great post! I found this very helpful trying new things, and keeping my self organized on new projects.

    0
  • Alpesh Prajapati

    Tuesday, May 10th, 2011 13:20

    14

    hi,, nice post.. some of the information i already followed but thanks for posting.. now i am being much sure that i am on right track. :) thanks

    0
  • Bruno

    Thursday, May 5th, 2011 13:41

    13

    Great article!
    Good approach on starting and developing a Project!

    0
  • Lian

    Wednesday, May 4th, 2011 07:33

    12

    You article is excellent and quite in derived oriented for everybody in web designing field. Fantastic article with great information.

    +3
  • Ahsan Idrisi

    Wednesday, May 4th, 2011 07:28

    11

    Lovely work, i like it very much

    0
  • Chris

    Tuesday, May 3rd, 2011 20:14

    10

    Nice, workflow organization. I think I’ll be taking some notes from this.

    0
  • Renato Alves

    Wednesday, May 4th, 2011 01:51

    9

    Very interesting article. Maybe in another article you could talk abit more about the Adobe.Kuler website and how we can improve our web pages with it. Thanks! Cya!

    0
  • Ruben D'Oliveira

    Tuesday, May 3rd, 2011 14:03

    8

    Thank you guys. It’s great that you like the article and find it useful.

    Shishir, more tips and methods are always welcome :)

    +1
  • Lincoln Solicitors

    Tuesday, May 3rd, 2011 18:57

    7

    Very useful, thanks.

    I find the most useful part to be the initial planning on paper. If that goes wrong you’re in trouble.

    0
  • Shishir

    Tuesday, May 3rd, 2011 11:34

    6

    If you give me the opportunity then I can add some extra information here.

    0
  • Patryk Cichocki

    Tuesday, May 3rd, 2011 09:52

    5

    Nice reminder :)

    0
  • Ahmed Bolica

    Tuesday, May 3rd, 2011 10:25

    4

    I Like This Post Thanks Bro

    0
  • Dann

    Tuesday, May 3rd, 2011 01:14

    3

    nice round up for starting your web design project. Always good to see how ‘others’ are doing it. reg. inspiration.

    0
  • Kian Ann

    Tuesday, May 3rd, 2011 05:51

    2

    Cool list of things to take note. I use a different folder structure – but ultimately it is important to stick to one that you are familiar with. I also prefer to just buy a domain or set up a subdomain to publish the staging site, instead of doing it on localhost. :)

    0
  • Marcone

    Tuesday, May 3rd, 2011 03:53

    1

    Great article. Thank you very much for all tips. It’s not easy at all to find high quality informations like yours, and it’s for free!

    0

Comments are closed.

54.242.18.232 - unknown - unknown - US