Creativebits.org

an All Creative World site
tripdragon's picture
416 pencils

Really burned out on Web design , helps ?

So,, lets see. i have projects and work to do but right now I am really burned out on designing the stuff to well.

The basic question hits.. What do you do to get back into it ?
Old tutorials and standards are so weak now to try and follow. I follow all teh standards of css transitional and all that. But I still see my self coding a page and really get pissed when I see new code software come out but not really give visual css.. (not cssedit [program])

One thing I always envied of designers of pure photoshop websites was the power to just make a design and put it up with slices and what not..

But standards get it teh way. You constantly have to think how this graphic is going to fit in as a header to a text box, or teh margin padding this element will work... No way to see who teh page will react with liquid layouts, or how and where to cut it and keep it's mask layer for the re-selection... And then glue all of teh peices back together..

Then theres the whole , Make sure an 800 x whatever screen can kin da see it.. And then useing such a high res screen really disorts the way you see and build a site..
AAAAAAAAAAARRRRRRRRggggggggg

Help...

workys --->> http://filmsandwich.com/

Commenting on this Forum topic is closed.

Flub-Dub's picture

here is a way, its a long read, hope its worth it.

0. turn off your monitor

1. take a paper, write a list of elements for your homepage (login box, news-date-author-comments, poll, top downloads box etc). make sure you are not missing anything for the homepage. you will take care of the rest of the pages later.

2. draw a sketch of a rectangled homepage. include sized banners in the sketch too. try to imagine it... 2 columns, 3 columns, left menu, right menu.
small visual, big visual, etc. it all depends on the look and feel. what are you aiming for, whats the purpose. think about it. sketch more.

3. turn on your monitor, close IM, mail, RSS feeds, all potential distractions.
then start PSP.

4. draw guides depending on your sketch. measure width, height, padding for modules, whatever, measure for your targeted screen size. imagine that maybe if the content is 450wide, you'd better make it for 468 to accommodate a standard banner. things like that. there are trade offs. its a battle of pushing numbers.

5. dont hustle with color yet, put down the logo, see it has decent space around it. check for an optimal size, not too big, not too small. if the logo is ugly, just write there with a font that you like, anything to make you forget about their ugly logo.

6. put down the menu, see what fits, where fits.
see what char type fits the logo. see is readable. wanna go crazy? go crazy.
regardless the type of menu (horiz, vert) make sure you have the menu items
in the same text layer, so you can toy with the line height and spacing between chars faster. space the menu items with spaces rather than tabs. dont ask why.

7. what else do you want in the header? complete the header. dont insist so much on details, but rather on the flow of the things that it requires.
stuff like horizontal login box vs. vertical. dont squeeze or go too small. there is a way these elements flow the best, that is what you have to find.

8. you have a good header. if you wanna improve it, add some color, bgr to it.
some bells and whistles, but keep in mind it starts to get a personality. maybe if you want something clean and clear you should move on and forget about bells and whistles.

9. move to the content. start with the most important element: the visual, or the main article or item. find a good picture. it doesnt matter its stolen. it is a draft after all. but find something that looks very good on the given theme.
find a font, that fits that visual, construct the visual box. go natural here, what looks best, where looks best.

10. zoom-out to 25% take a look at your piece. adjust if necessary. some elements might overwhelm each other. take care of that.

11. you need some good, readable text for content but also web friendly. depending on the amount of text you will decide about size and lineheight. Use a lorem ipsum and toy with Arial, Verdana, Tahoma, Lucida Grande, Georgia, Courier, Times, at different sizes. without antialiasing. line spacing and character spacing are very important so try to read the lorem ipsum from head to tail with different font settings, see what if feels more natural to your eyes.
this is also a good moment to briefly check other sites with content that just looks good to you. analyse their type, size and spacing.

12. you decided upon the content text but there are tons of other elements for content. like links, titles, subtitles, author, dates, see what you can do about them. see in what way you can divide and brake the articles so they dont melt into each other.

13. at this moment, you should have a good header, and some content. at least main content. now take a look back at your sketch. pick a rectangle, read again the elements it has to contain. build that block. you will decide here about certain buttons, certain fields... color, borders, background, size, relation with other elements. thats why i say, build the easiest straight-trough block.

14. periodically zoom to 25% and check the overall feel. thats too big, thats too small, that is totally different or too similar with another.

15. do not neglect the spacing of the elements. use paddings like 12-16-20-30px between elements rather than 2-3-5-8px. empty space is the anti-matter ingredient in your layout. you cant have the matter without it.

16. you should now have a header and a content. its too late to go back to basics. fix what you can fix. if you need to go a different way, make sure you compare the layouts at small sizes. like what thumbnail looks better? its easier that way.

17. its time for the footer. footers are ugly. footers are bad. i hate footers.
include the copyright note, include the text menu, you can just throw things there. you dont have patience anymore. you are working for at least 4 hours now. pop a beer, turn loud the music, the layout is looking better and you got the idea. on second thought steal the footer. copy it shamelessly. your part of creativity is done.

18. save, export a png (not jpeg, nor gif), dont ask why, send it for review to friends. but here is a tricky part, only send it to ppl who deserve it and have good taste and know their web part. dont show it to your mom or GF unless they have their skills or taste.

18a. if you are a professional designer with over 5 years of exp, you can just send it to the client.

19. put some illegal downloads in the list. close down the monitor. go out drinking. for 2 days you dont read, do not look at the layout again. do not think about the devil.

20. get your sh*t back together. read the reviews. talk to your friends. here is another tricky part: let them speak, even if you know they are right or wrong. so its like dont explain unless they are done. gather everything up, analyze it, go back to PSP and adjust it.

21. if you aren't a pro designer, now its a good time to send it to the client.
explain the best parts of your layout in the mail, but dont over do it.
underline the best parts and explain some decisions you made. keep it short.

this is the first chapter, want some more?
or should i just close my account...
--------------------------------------------------
always outnumbered, never outgunned

tripdragon's picture
416 pencils

AWESOME..! I was losing hop anyone was going to help out. 

Lots'O reading but very nice ideas. Printing now. Thankyou, i'll take more if you have it. Somethings I totally disagree with but thats a healty disagree, like footers.. 

:D

workys --->> http://filmsandwich.com/

Flub-Dub's picture

the footer was meant as a joke.
:) you if you do a huge layout, like a portal or smthng
then the footer is the least of your worriers, and usually by the time
i get there, i lost all my patience.
ofc, i return over it, the next day.

--------------------------------------------------
always outnumbered, never outgunned

natobasso's picture
3953 pencils

Bad Design Kills

Always brings me out of my funk. :)

Natobasso
Web Master/Project Manager
Bass Player

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace