How do you lay out your websites?
What basic method do you use to sketch out a website? I’m trying to design a website, and have begun by sketching it out on paper, and transferring it to Photoshop. It’s going over a lot of revisions in Photoshop, though. Is there a better / alternative way to do this process?
Observing members:
0
Composing members:
0
8 Answers
Like I am serving up sushi in a restaurant.
Yep, I sketch the general idea out on paper and do that several times to finalize the concept. I then move over to Photoshop and lay it all out. After that, I code that puppy up using the slices from the PS file for my background images and whatnot. I code it all in XHTML and CSS (I am a bit of a standards freak!).
Sometime start with paper, but usually start with Photoshop. Some use Fireworks.
i start with drawing on tissues, then on graph paper. eventually it gets ported to fireworks (since my psd trial ended). the sliced pieces are then used to make a css layout using InType and finally evverything gets coded in xHTML Transitional using Dreamweaver 2004
I use flash actually, I know it’s kinda odd, but I’m illustrator illiterate, so it’s the next best vector program I own. Anyhow, I like being able to cut stuff in half at will and whatnot.
Mostly I start in the Gimp, I have started with sketching once though, but that doesn’t really fit my style since it’s mostly tight graphics with gradients and such. I suppose for a grudgy layout it’d work very well.
I also slice it in the Gimp and the code it in (yes, again) XHTML 1.0 and CSS.
I have tried to use Inkscape since I figured my designs would work just as well as vector, however, I didn’t yet find the time to fully learn that application.
Depending on the graphics/illustrative style, I often insert a stage after sketching but before Photoshop, where I mock up objects in Illustrator. Especially if I don’t have a super-solid vision coming out of sketches, Illustrator is more conducive to quickly changing and experimenting with overall dimensions of areas, graphics and text than Photoshop.
In either case, if you are planning on slicing/cropping artwork yourself, be extra-detail oriented as both Photoshop and Illustrator are less-than pixel accurate in snapping to guides etc. when you are zoomed out.
I like to start by sketching a big grid on a piece of paper and try to stick to the rule of thirds, since I find it gives me the best starting point. After several iterations I transfer my sketch over to Fireworks so that I can manipulate my design in a vector-based environment. I find non-vector applications (such as Photoshop) just way too time consuming to start the initial process. If you really want to use it, I’d still recommend doing a vectored version of the design, and then transfer that to Photoshop after the fact. It’s just more efficient in my opinion.
I’ve heard of people actually designing different sizes of web components in a graphics program, printing them out, and then cutting the shapes out of the paper so they can arrange them on their desk rather than in the computer. Whatever helps you see your design come to fruition I guess…
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.