Template : Rise

[Breäkdown]

This is the forth template ive ever made, its not the best and i REALLY need the feedback so let me have it.



Still looking for someone to do HTML, im learning it but i hate coding cause im afraid of messing up.

[Chris]

Coding it wouldn't be a problem. But here are some suggestions, to help you work on your layouts. It may get length so bear with me.

I was responding to a thread that asked "What is your design process", and I spent quite a bit of time on it. Unfortunately, when I finished I realized it was about 3x too long for the thread, or it wouldn't let me post it because of the length. So I saved it in notepad. Luckily, I think it would suit this thread perfectly. The reason I say this, is because quite honestly, I can tell that you're not very familiar with using a process to develop your layouts. This can be a good and a bad thing. It's bad because you don't have any control over your work, and often will have a very difficult time designing something you are truly happy with. On the other hand, it's a good thing because you aren't biased, which could potentially open the door to a handful of possibilities.

In either case, here is what I came up with, as far as the design process:

Definitely a complex process.

1. What's your raison d'etre? In other words, why are you making a website. I was once reading a blog article about a designer who was sitting in a conference with a multi-million dollar CEO who wanted to make a website about his cars. The author was one of the more novice designers and simply looked on as the other newbies were busy sketching out what the site might look like. The CEO asked why he was so quiet, and to the dismay of the budding dollar-signed designers, he asked, "But why do you want to make a site about cars?" So it's a good idea to be sure why it is you are designing a website, and if it even warrants such a movement.

2. Get motivated. When I do client work, part of the hourly charge is inspiration. I'm looking for inspiration to create a client's website, so I consider that to be part of the process, therefore it is integral. You wouldn't start on a huge project without some sort of motivation, why would you work on a paid project without knowing what you want? Inspiration plays a huge role in the design process.

3. Pencil and paper. Nothing worthwhile should go straight to photoshop. Using your natural appendages, you should come up with your design on paper. That way you have something tangible, something hard and materialized. I have a scrapbook full of work that I've collected, and it's a great way to keep track of past work, and help inspire future work. Paper also allows you to get down all the nitty gritty details, including placement of particular elements, and the size of those elements.

4. Mock. Never code before you design. In that aspect, go into photoshop with the premise of coming out with a somewhat perfected layout. Consider your mock the direct representation of what you aim to create. There are firefox addons that allow you to take your mock and overlay it to your finished product, so your mockup should be every bit as complete as the end result. So take your time, and work neatly. There's nothing I hate more than a messy source file.

5. Block it. Since most of my work is driven with XHTML and CSS, I always create a block layout to represent my divs. This is useful because not only do you know where your content will go, you also know how much space it will take up. For dynamic content that may change (longer or shorter) you can approximate the divs accordingly, but for content that is restricted to a certain length (ie. a blog excerpt), you can go ahead and block those out as they are. Once you have a nice block layout, you can overlay that and start coding your divs as a base.

6. Design it. Now comes the fun part. Taking all that information and condensing it down into one big lump layout. Since this step is just so...broad, I can't tell you exactly how to go about doing it. But if you've follow the process correctly, you should have a good idea of where you want to go, and what you want to get done. This is sort of like putting 2 and 2 together to get 4 (your finished design). Just take your time, and don't rush. Inspiration should still be a part of the design process, and will help you keep your creative juices flowing. So don't be afraid to take a breather and go play some ping pong or something.

7. Code. This should be the the shortest step, depending on experience. Since you already know exactly what the layout will look like, and you know where the elements are going and how big they will be, you don't need to spend any time guessing. Your work has been done, if you've follow the process. This should be all about pixel perfection.

8. Quality assurance. Nothing hurts worse than a misspelled word on a devastatingly awesome layout. The same goes for validated backend. If you strive to maintain a standard and it shows, it can all go to shambles if this step is missed. Always make sure your work is up to standard, and that everything is in order. Validate your work, and ensure cross-browser compatibility. Depending on the target audience, this may take a while. But the more time you spend on QA, the more satisfied your client will be with the finished product.

The process itself is methodical, and one I take into great consideration. I advocate the use of this process wholeheartedly, because it's a broad approach and leaves room for embellishment. Having a process, in itself, is a good idea.

Taking all these points into consideration, there's a few techniques you may need to master before you can actually apply the process to your work. After all, you could follow the process outlined above precisely, and end up with a pile of crap.

The most important thing you may need to develop is your style. I see alot of convergence with this work, and its main downfall is consistency. Nothing seems to match, or fall into place with the other elements. You've got a basic idea of how a layout should look, but it's very generic and should be thought out a bit more.

Not trying to mold the mona lisa from a pile of clay, here are some resources to get you started:

In a nutshell, this guide gives you a glimpse into some basic design principles. It won't go into extreme detail, but it has alot of useful information:

http://justcreativedesign.com/2008/0...rn-the-basics/


The next thing you need to do is learn how others do it. Find out all the different styles that are out there, and then see if you can incorporate what you see into something unique and relative to you. The perfect place to do that is http://www.designmeltdown.com

Once you've gone through that massive compilation of resources, check out http://www.smashingmagazine.com for the finishing touch on your design-etiquette. I know from experience that you won't improve dramatically overnight. But I've given you a wealth of resources that were extremely helpful to me and still are. And just an FYI, you could be a graphic design for years and never code a thing, and still be successful. Just find out what you enjoy, and what you're interested in. Once you do that, dive in headfirst.

Good luck!

[Chris]

I'm gonna be ticked if this dude doesn't come back to read my critique... lol

[cC.Midway]

Wow, that doesnt matter i readed it and i made a template and WOW those site helped me alot thanks man o.o

[pastortroy1]

move the login system...

here is what i sugguest, learn a little html php and javascript, then use dreamweaver or frontpage to put it together..

[Chris]

Wow, that doesnt matter i readed it and i made a template and WOW those site helped me alot thanks man o.o

Glad I could help someone :P

[cC.Midway]

but wait let me ask something does a site has a special size ???

[Chris]

http://www.hobo-web.co.uk/tips/25.htm

[cC.Midway]

Thanks helped alot

[cC.Midway]

Thanks that site helped me alot