Over the last few days I have been thinking about all the design aspects I want to use for Imantu version 2. At some point I starting thinking about when I first got started and thought 'I was an idiot back then' then immediately afterwards 'I'm probably still an idiot now'. In any case my memories of my first site design are not good. I was ignorant and didn't have a clue as to what I was doing and on top of it all I didn't really have any help. Eventually when I was done I was thinking "This is awesome! Everyone will think it is great! They won't believe this is my first design!". I was very proud of my first design and I will never forget the very first comment: "To be blunt, it sucks".

I have come a long way and in my opinion, I am still not very good at it but I am always trying to improve. In that time I have found a basic layout of what should be done to have a successful design and I want to show it to you so you won't get slapped in the face (as hard) as I did.

1) Make a Plan
What a surprise! We have to make a plan. This is where you think about what you want to do with your site in general and think about all of the features you need/want in the site. Paper and a writing utensil come in handy here. Once you have figured out everything that you want on the site, a very basic layout needs to be made. I usually pull out my graph paper and start making blocks and placing things here and there and messing around until I find something that I like. Typically this is the time, in the back of my mind, that I use to think about what I want the theme of the site to be and what colors I am going to use and so on. As a little something to try to make my designs better I like asking myself "What is wrong with this and how can I make it better?".

2) Start Designing
After getting your plans all done and written out, you can open up Photoshop and start putting it together. This is where you take the layout you made in the planning stage and try to put your theme on the top of it. Usually this will take a decent amount of tweaking. Also, you want to stick to your plan, but do not restrict yourself to it. If you come up with a great idea that you really want to use and you need to change some things around, then do it. Sadly I cannot give you any help in making the perfect web design in terms of colors and whatnot. Everyone has their own style and the only way to find your way to it is to keep working at your designs. I think the best way to figure out how to get better at it is to just try not to make the same mistakes you made last time and to experiment with new ideas all of the time.

3) Code It Up
There is not a whole lot to tell at this point. You just need to take the images you made in Photoshop and start typing up the HTML and CSS needed to get your design working in the browser. If this is your first time coding a website, I highly suggest making it work in only one browser. Stressing yourself out about making it work in all browsers is not going to help any. Just focus on getting it to work, then tweak things around a bit as you see fit. Even at this point, you can change things around as much as you like.

4) Be Open to Criticism
When I got my first comment for my first design I was angry. Not only did he burst my happy little ignorant bubble, but he never gave me any reason as to why it 'sucks'. In light of that, there are some comments you cannot take too seriously. They are the ones that don't give you any suggestions - this includes the ones that say "That looks great". That is not to say they are not valid, it's just that they are not going to help you get better at designing. The comments you want to look out for are the ones that tell you what they think and then tell you how they think that the design could be better. When those ones come up, whether they are bad or good, you need to look at you site and determine if their suggestion is valid or not. Try not to think emotionally, but qualitatively. Thinking emotionally will only make things worse, I found that out the hard way.

5) Keep working on it
Just because you have gone through the last four steps does not mean the site is done. I think that sites are never done. You should always be looking for ways to improve the site. This reminds me of sites that pull down their whole site to leave one page saying 'Under Construction'. Well, yeah, everyone's site should always be under construction. However, you shouldn't be telling that to everyone, you can still work on it even after you have it running on a server without disrupting any of the users.

There you have it! If you follow those steps, you should at least be able to avoid complete embarassment with your first web design. Comments and thoughts about this process is appreciated.

Category: web design Tags: layout, photoshop, design, web

Comments

Tell me what you think...

Name:

Website:

1 + 4 =

Comment: