Web Design

How do you go about designing your website?

Me? Well, first, I take a moment, and draw a quick layout that I want, then, make a list of links (ie. Archieves, Cast, Extras, etc.).

Then, I mentally design the buttons, which I then try to recreate this image.

Once I got a few buttons and other images done. I open up my PSP program, create a 1024 x 768 (or, 800 x 600, like I did for my English website. Damn, school and their 800 x 600 res computers...) image, and make a digital layout with that, using the images I created earlier.

After everything is placed properly, and everything seems all right, I select the line tool, and make lines, of which will be used to divide the images into "cells", to make the HTML coding easier, as I know how many cells I'll be needing.

I create a skeleton site in my Web Page Construction kit, for the cells. Open up note pad, delete all of the coiding I don't need and modify the ones I need, and type in the codes I need.

After creating the template, I save that as a different file, and then modify it, to include text or images, needed for the pages content, which is also saved as a different file.

And, the result, is my web page.

So, why not reply, and tell me how you go about, and make your website. It doesn't have to be nearly as detailed as mine, but, it would be nice to see the different ways people go about to make a web page.

I just think of all the things I need to put in for the menu, then I just make a site. Whatever looks good, I'll use it.

my website was the first one I had ever done. I had never touched html any further than common tags before it. I decided how i wanted my menu bar laid out. In Photoshop, i created a 1280x1024 blank file, and just winged my menu bar, designing most of it as i went.

it was all one image (well layers, then i flatten it into an image) and then i took the slice tool, and made boxes around everything that had to be a separate image (since i didnt know how to do image maps) i then cut, copied and saved into .gif format all of my images.

i then opened up coffeecup, and i handcoded my pages, swapping back and forth between html and completed views, trying different things until they looked pretty much how i wanted. that was it. =) overall i think it turned out rather well for a first effort.


-Abs

i usually sketch out what i want, go threw a variants in photoshop for my menu, save for web, cut out the blank bits, drop it in dreamweaver, and clean it up.
i try to keep my sites as simple as possible, and make things easy to get at.

as for screen size, i usually design for 800x600 screen, just in case. i know like noby uses it anymore, but there are a few, and i don't want the site to look al fugly for them.

you can look at my comic site, http://dwight.keenspace.com for an idea of what i do, i actually just redid it and am pretty happy with it.

josh.
drawing badly, one day at a time.

It fairly stands out my site layout had no planning whatsoever. I just sorta decided. "Stick all the buttons in a table on the top, and put news blurbs below it." So, I read up on the specifics of table construction in HTML, and made the site in good old Notepad.

Heh, but the site layout was even worse when I first started making the site. :ermm: Infact, my current archive page WAS the original main page. And, rather than the comics in a table along with the title and navigation buttons, it was originally just a link directly to the image.

I use an elaborate system of guess and check. And by elaborate I mean crappy.
My site layout is pretty basic and not very sexy, but then again so am I. So I'm not leading anyone on with a site that looks about the same as the content inside.

my main site design is just something I always wanted to do, and found how to do. It looks very basic, and it's easy to change to. I used php because it's a bitch when you don't have .php and change layouts or add pages alot.(i have quite a few pages, and .php makes so i only need one layout page, and everything else is inserted, but it was about an hour or two i spent deleting my old layout to a simple page, since the layout didn't need to be on every page.)
Once I learn to graphic design, I will be an unstoppable maniac on the Internet. Cause if you can imagine what I can do with HTML, wait to you find out what i can do with graphics!

There's one thing I hate and love sometimes, and that's WYSIWYG editors. They make people lazy, and not learn the code, that's why i use 1st Page 2000(one of the best free editors, but for the more hardcorist, notepad). But whne i'm in a bind and can't figure out what's going wrong with my code or how to improve, i turn to a WYSIWYG editor to help me, then i lock it away, hopeing to never pull it out again. i advise all to take some time out of their "buzy" lives and get to know the code they are using. I taught myself some basic HTML in days, and learned more by asking an experienced community. This "community" can usually be found at your host if your a "free hosts" person, so try hitting the popular spots like "spaceports.com forums", but i advise not to join their hosting, it went from great, to tripod/geocities/angelfire style.(no offense to those using those hosts, i relaize everyone has to start somewhere.)

I just open up Photoshop and play around with a few button designs. Then when I find something I like I open up 1st Page 2000 and build the site around the buttons I made. I came up the current layout of my site in about an hour one day, maybe less. Except the original colors were bright red and mustard yellow instead of blue and orange. It was quite ugly to say the least.

Thumbnails, mock ups, flow chart, outlines, the whole 9 yards. I even make people click through the site, and I watch them, making sure the navigation is natural and easy. Your site can have the best buttons ever, but if someone can't find there way through your site, its worthless. Also I know enough HTML to look at stuff, and kinda figure it out. But other wise screw it, theres enough high end WYSIWYG programs out there It is a waste of time to know all that jibberish. Use graphic design industry standard software. It's all about being professional, right? In my opinion you should never throw something together, there should be thought behind everything.

Towers

Blak's just a project really, and for it I wanted to create as basic and compact (in terms of visual size and kb) a comic/site as possible whilst not making it look like total crap.
I did it on Dreamweaver because of the table stuff, but did all the javascript for the double changing iframes and stuff myself. I actually originally invisaged it as an oval, but that was a bit too difficult and I couldn't be bothered so it just ended up looking like it does.
www.blakcomic.tk

I choose my base res (1024x768 for S&D) and make a blank Photoshop. I then choose a color scheme, and start building up all the images I need for the site, in the basic site layout.

This lets me use slices to cut up all the images from my mockup serves as the template I can use to easily make changes & export all the new graphics instantly without much work!

My website is kind of a crash-course renegade design scheme, forged through the study of other web site designs and tags, and a huge HTML book that I used to make sense of it all.
Because of that, there's a lot of common tags and rules that I don't use. The paragraph tag (or <p>) is one that NEVER appears in any part of my HTML. The common <center> tag is also out.
One thing I try to do is use text instead of graphics when I can. For example, the title banner above my comic is actually a table broken down into three smaller images and text, which makes up th readable portion of it. This makes the graphic appear far more complex than it really is. Or maybe it's the other way around...
A lot of sites use graphics for menu buttons, but I continue to use text. Then I mask these links with a layered font face tag, which ensures that 99% of the people going to my site will see SOMETHING other than Arial when they look at the table of contents or headings.
One thing I try to do is keep everything from jumping around as the page loads. It's for this reason that EVERY IMAGE has height and width attributes. There's nothing more annoying than reading or going to click on something only to have it move because another image just loaded.
Just for fun, almost every image and every link on my site has a comment window that pops up when you wave the cursor over it. The only ones that don't are either JavaScript ads or the links that are automatically generated by my web host. The text links also change color as you pass the cursor over them. I like stuff that reacts with the visitor.
I also figure that if you have both underlines and hover colors, there's no excuse for not knowing which lines of text are links and which aren't. Believe it or not, there are people out there, some of which may or may not be my parents, who haven't fully grasped the concept of links. This is the same reason why my link banners say "CLICK" on them.
One thing a site should do is be inviting and easy to use, without any attribute that could otherwise send people away. This means that splash pages and opening flash animations don't get used. Not only are they annoying, but they act as barriers between the visitor and the actual content they want to see.
I try to make the navigation pamper the visitor the way I would want to be pampered. Every page can go to every other page, and the links that go from one comic to the next are both above and below the comic itself. This saves people from having to look too far for what they want.
And since I spent so much time in making the site inviting, it would be a shame if I made it just as easy to leave. There is no link on my site that takes you away from it. If I link to another site, it opens a new window. No one leaves unless they close the browser or backtrack to the site they were at prior. The only exceptions are, again, JavaScripts, which I can't do anything about.
And FINALLY, as far as screen size goes, my site is taylored for an 800x600 screen size, but most pages are set up to stretch out for a larger screen size, AND if you happen to be on a larger screen size, my site doesn't insist on taking up the whole screen. Either way, it's a convenience.

Ironically, with all of these guidelines and rules for my site, I've never had to actually draw out a design for what I want a page to look like. I usually just think about what I want, then I have a general sense about where everything should go, and I can figure out in my head how I'm going to write the page. It's pretty scary when you can think in HTML, but that's what I do.

I like to think I'm pretty good at web design. However, the point of the page for my comic was that it should look crappy. Hence, I picked a semi-ghetto font, and did everything in black and white with text.

When I'm going for style, though, I usually either lay out what I want in dreamweaver or build a model in photoshop. The current Xwing.Net main page was mostly a photoshop creation, while it's news section was done in dreamweaver first.

I figure if people have to wait for the up-to-200kb image to load, the rest of my page should be as simple and non-image-needing as possible. I'm a minimalist as far as web design goes, anyway.

I generally decide how I'm going to organize and navigate first, and from there develop the layout and look. I also consider the purpose of the page. If it's just a presentation format for a webcomic, I keep it simple and straightforward. for my art site, I went much further toward aesthetics. For my information site, I made a balance between low file and image size, design and look, and navigation.

Generally, I use tables with percentages, to accomodate varying screen sizes. I'll use CSS or java sometimes to spark things up a little, but since Netscape completely craps out on most of that, I keep it minimal and non-vital.

My webcomic html is extremely simple, compared to other types I do. I don't use php, though maybe I ought to learn... it seems pretty versatile.

Minimalist example: http://www.whitestorm.com/rdt
Formatted "look" example: http://www.whitestorm.com/rpg/frames.html
Aesthetic example: http://www.whitestorm.com/art/whitestorm.html

You can see the differnet ways I use tables, css, etc, depending on the site's purpose.

This is a motto for me also. I wanted to make my site as simple, yet appealling as possible. I don' t want to compromise load time for great graphics. I also want my site to be available to even dial up viewers(at the very least the main page).

html is fun, I made my site like 4 years ago with a line or two of text and I used a fortune city template. Then I started to copy and "steal" html from other pages until I learnt how to make stuff on my own and what things did. Now I just put all my html into dreamweaver and type in text. I bassically have three rows and three columns and everything looks nice and neat the way a webpage should. It doesnt look elite, but elite is just a bonus on neatness.