Question
I was planning to do this as an entry in the "Writing a Website" thread here:
but I decided it needed it's own thread.
Disclaimer: This doesn't apply to ebay pages, which are layout-restricted by design.
When a beginner writes a web page, the layout usually looks like this:
http://216.92.199.248/layouts/simple.html
Something akin to a Word document, right?
After they get a little smarter or braver or learn more, it might evolve to this:
http://216.92.199.248/layouts/more.html
Then it will eventually evolve to something like this:
http://216.92.199.248/layouts/evenmore.html
We are accustomed to reading top-to-bottom, left-to-right. That's the way books and letters are written. That's what we see most of the time. When inexperienced people write web pages, that's what they write. If you want to make a killer web page, you have to lose that conditioned impulse.
Try this: Take a plain 8.5x11 piece of paper. Bet you're holding it the way you would read it, right? Put it up in front of your monitor. Lots of monitor showing on the sides, isn't there? Now turn the paper sideways. Just about covers the screen now. This is the area you need to fill. It doesn't go top to bottom. There's a lot of side-to-side in there.
"But, but, but.....you can scroll!" you say. Well, no. People don't. The majority of the people that look at your page will not scroll. Therefore, you can't design a page that needs to be scrolled.
I'm about to tell you how I lay out a web page. (This is where you get to laugh. Goofy, silly...yeah, it's all that.) This is what works for me. It may not work for you at all. If it doesn't, find something that does.
Start by gathering up all your work-related paper. Brochures, invoices, etc. Print out a copy of your current web page, if you have one. Get a copy of your best auction template. Print out copies of all your standard emails. Get copies of all your photos (or two or three representational ones) and logos.
Spread it all out on a table. Grab a highlighter pen. Start circling all the things you like. This photo. That webding. Your best logo. Circle the text you like best. The witty, the wise...stuff you sweated over and have just the way you want it.
Now, grab that 8.5x11 sheet of paper. (Side note here: I always start with a 17x22 sheet, and quarter it with a black marker to make four 8.5x11 spaces, cause I know I'm gonna do this at least 3-4 times before I'm happy. That way I have all the versions in front of me. I...ummm...."borrow" the paper from the engineering dept at work. ) Turn the paper sideways. Think about where you would put all those circled items. Logo in the center? Top left corner?
After you've looked for a bit, chances are you will realize you have waaaaay too much stuff to fit. Start eliminating. You don't have to throw it out. Save it to use on a linked page. Right now, just focus on the front page. That is 90% of your webiste. Keep in mind that it doesn't literally have to fit on the paper. You can always resize.
Remember, too, that you don't need to stick to 2 dimensions. Web pages are 3-dimensional things. You can layer. You can make things transparent. For instance, if you have a graphic that's closely associated with your company, it can become a transparent watermark behind the content. You can float a menu across the bottom corner. You can advertise sales in a popup. You can put your newsletter/email link in a popup, too.
When you think the content is close, it's time to forget the technical stuff. Put on your Marketing Wizard hat. Focus on your audience and what you need to say to them and what they want to see. Make sure everything you need to say is there. If it's not, write up a list or paragraph or add another pic. Whatever it takes. Then grab a pair of scissors and cut out all the things you want to keep.
Now put on your Artist Beret. Start arranging your stuff on the blank sheet of paper. Tape it down or use a glue stick. Focus on color and design and how things flow on the page. Move things around until they are pleasing to the eye. Get your markers out and add lines, blocks of color, designs or borders. While you're doing this, keep in mind that you want the viewer's eye to see everything. Start with something colorful at the top or left of the page. Draw the eye down and/or across the page.
After you've played with it for a day...or two...or a week...take a step back. Look at it again from a technical perspective. Think about tables and boxes and layers. You may have to tweak a bit to make it functionally possible. You may have to stretch your skills to try something you've never done before...or break out the books to find out if you can do this or that.
When you've got it in your mind's eye, and you have a general idea of how you're gonna make it happen, you are finally ready to start resizing pics, making page graphics, and writing code.
Answer
Interesting process ~
I always sketch all my ideas out in notebooks (I have A-L-O-T of notebooks....) but never really took the time to gather it all together and plot and plan to come up with one cohesive, final idea. I like that!
Will definitely have to try it, if I can make my brain stop with the IDEAS for two minutes so I can focus ... I'm getting a ton of really great info to use in this new redesign I'm working on - and I SO appreciate it!
Oh and speaking of scroll, gimme a sec to find the link, then
I'll show you something pretty unusual in that 'area' of webdesign.
~ gem ~
I'm SUPPOSED to be getting ready for the postoffice
Answer
Very cool perspective.
I put it to good use (cause I am at work today and so far I have had a whoppping ZERO customers)
I hope to take this weekend and get my website up and revamped.
time will tell if it actually happens. LOL