Jump to content

Web Design Discussion


Recommended Posts

Welcome to the Web Design Discussion Thread!

If you somehow landed up on this page, you are probably here to discuss the interesting world of web design. If you this is not what you were expecting, please, navigate to the top-left of your browser and click the arrow pointing leftwards. Web design is basically the world of creating websites, which, if you are reading this, is what you are looking at right now.

What to Do.

Talk about web design. Share ideas, techniques, submit work in progresses and finished pieces for critique and review, share mockups and funny stories. Sit back, relax, and have a mocha. Example:

chaimaster9: Hey, I just made a new website in Flash, CSS, and HTML. May I have some constructive criticism on it, especially the [...etc...]

randomforumer1342: Whoa, that's stinkin' awesome! I love the [...] but in my opinion, the [...] could use just a pinch of work. Maybe you should [...]

chaimaster9: Thanks, I will look into it. ;)

What not to Do.

This is not a tech support forum; This is not a place to ask "what does chmod mean?" or "how do you install apache?". Here is an example of what not to do:

BillyBob1337: heya guys. i was reading this tutorial, php101, and it said if i wanted to try out php on my computer instead of having to upload it to my host everytime, i shuld dload apache and php. so how do u install apache.

Potatoequeen772: oh you just [...etc...]

BillyBob1337: thx!!!

So all that in mind, happy web design discussing!

Off-topic: This is my 2000th post.

tagflowsig.png

+_+_+_+_+_+_+_+_+_+_+_+

I am a disco dancer. +_+_+_+_+_+_+_+_+_+_+_+

Link to comment
Share on other sites

Yes, the graphical designing of websites could be allowed; a graphic-based topic wouldn't hurt the Overflow.

However, for coding the website, this is teetering a little 'on the line' of tech-support. As I said in my PM, I will discuss this with the other mods and Rick to find their view.

Link to comment
Share on other sites

notebooknd5.jpg

I will start off by asking for views relating to what should be placed on a website's main page. Is placing a registration page as part of the main design a good idea? Should the common practice of placing a basic introduction to the site on that page be used? Should the same links on the navigation bar be placed on the main page in more detail?

What are your thoughts on this issue?

KaHuc.png
Link to comment
Share on other sites

This thread isn't complete without both sides. I probably won't participate if we can't discuss xhtml/css etc.

I agree, but it's the Mod team's decision.

In other news, I just made my first template (it's a WIP):

http://ncfan51.deviantart.com/art/Web-T ... P-85946906

If you don't want to download the .zip, here is an online preview:

http://dbahn.zxq.net/

I know I made a few mistakes in the coding (such as forgetting the charset and a few improperly nested tags), but I'll try and fix those tomorrow. Then it should validate.

I just went to browsershots.org, and it seems that the page is best viewed at resolutions of 800x600 and higher, and in Firefox, Opera, IE 7, and Safari. The page is messed up in IE 6 and below because of improper support for ' margin: 0 auto; ' but that can easily be fixed with the text-align hack.

By the way, D. Bahn is my internet pseudonym.

tagflowsig.png

+_+_+_+_+_+_+_+_+_+_+_+

I am a disco dancer. +_+_+_+_+_+_+_+_+_+_+_+

Link to comment
Share on other sites

This thread isn't complete without both sides. I probably won't participate if we can't discuss xhtml/css etc.

I dunno. If talk of XHTML and CSS isn't allowed, then I've broken the rules quite a few times. ;)

I will start off by asking for views relating to what should be placed on a website's main page.

...

What are your thoughts on this issue?

Personally, I see the main page as the user's introduction to the site. It should cover the basic premise of why the site exists and highlight the important bits of the site with descriptive sections and/or graphical buttons. You don't need to have every link from the main navigation spelled out on the main page, but I could see highlighting the two or three most important ones with graphics and text and bigger links.

Songbirdnest.com is an example of an excellently designed front page. They really need to fix the vertical spacing issues of the main menu on the interior pages, as it totally breaks continuity, but the front page is perfect - a bar highlighting the blog at the top, a brief description and a dynamically framed screenshot below, followed by graphical buttons for downloading and subscribing to the newsletter and a grid of screenshots to familiarize the user with the program. Another example of a great site is Feedicons.com. It doesn't have a lot of content - just download links for a few packages of RSS icons - but it organizes it well and emphasizes the important bits with colorful, attractive icons and visually comfortable framing.

...I just made my first template (it's a WIP): ...

http://dbahn.zxq.net/

I assume you're asking for comments and critique? ;)

Overall, I think it's a good start. I like the general organization style - you know me, I like my menus on the right. I think the body header font could be a little smaller, and both the body header and copyright statement area could use a little more left padding to bring them away from the edge. Also, since the brightest background gray used is #636363, I think the white border and body header color look rather out of place. Also, since all other borders are 1px, the 4px border under the body header stands out a really lot - if you gave the H1 some side margin to bring the borders away from each other, it could stand better on its own, but since it abuts two other 1px borders (the body on the left and the navigation on the right), it definitely looks too big.

I used Firebug to hack your CSS and saved a screenshot to demonstrate a few things. I don't intend to offend, I'm just trying to offer some (hopefully helpful) criticism. (click below for full-size)

O r i g i n a l :

--------------------------------------------------------------------------------

th_urbana1.png

R e w o r k :

--------------------------------------------------------------------------------

th_urbana2.png

I went with thinning-up the border under the H1, because I'm a 1px kind of guy. I also changed the font to Arial because I don't like Verdana's square serifs on the 'I'.

One thing I didn't change is the header, because I don't have the source file. I think it would look more uniform if the city were grayscale and the "urbana" text were the orange - nothing else on the page has an orange background, so the image looks like it doesn't belong. If the background were gray and the text orange, I think it would both match the rest of the site better and bring out the title more.

As I mentioned, it is a very good structure - when I taught myself CSS, I learned the way of creating very float-heavy structures, so I'm currently learning how to design sites the way you did this one myself - but from a graphics and colors standpoint, I think it could use a little more subtlety. A few of the elements draw a little too much attention to themselves

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Well, I guess I'll take a shot at this. I could probably use some constructive critique.

This was my first experiment with web design, a personal portfolio site for myself. However, it is just a mock-up, since I have no coding skills whatsoever.

Well, here it is:

th_PDNWebsiteTemplate.png

Call me expired. Please.

th_Energyv2.png

Don't go counting your chickens before the pack of rabid ravaging foxes attacks. -Sozo
Link to comment
Share on other sites

Well, I guess I'll take a shot at this. I could probably use some constructive critique.

Very good stuff. :)

Personally, I would use an anti-aliased font for the main navigation links, unless your plan was to make them textual, under which circumstances you're at the mercy of the users' browsers. I'd also shrink the body image a few pixels in width so the margin between the left edge of the body fill and the image matched the margin between body and sidebar fills on the right. And lastly, the highlight on the footer block looks a little odd. I believe it's intended to look as if a light source is coming from the upper left, but the lack of any outline on the right edge makes it look lopsided. I think it would look better with a uniform border of about 2px around the left, top, and right edges.

The good: everything else. The colors match well, the page flows nicely, and I love that the page fill continues only partway down the skinnier footer, giving it a stepped-edge.

I know I've mentioned this before, but I'll say it again, I really like your style. I remember you posted this image way back when, and I always intended to ask you if I could use it and make a CMDSketchpad skin [ concept image ] from it. Then I got busy, and then I decided I had to rewrite the code behind the site first, and then I got busy again, and now here we are, aren't we? ;)

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

I think what is meant by no tech support topics is things like people making topics asking how to install Windows or Printers. I remember when there were like 10 topics a day like that here. The mods were non-stop with trying to tell people that this is not a tech support forum for computers. However I can't see any mod having a problem with a discussion topic posted in off-topic. Unless it like (Post your tech problems and we can discuss how to fix them).

Link to comment
Share on other sites

Very good stuff. :)

Personally, I would use an anti-aliased font for the main navigation links, unless your plan was to make them textual, under which circumstances you're at the mercy of the users' browsers. I'd also shrink the body image a few pixels in width so the margin between the left edge of the body fill and the image matched the margin between body and sidebar fills on the right. And lastly, the highlight on the footer block looks a little odd. I believe it's intended to look as if a light source is coming from the upper left, but the lack of any outline on the right edge makes it look lopsided. I think it would look better with a uniform border of about 2px around the left, top, and right edges.

The good: everything else. The colors match well, the page flows nicely, and I love that the page fill continues only partway down the skinnier footer, giving it a stepped-edge.

Thanks CMD! :D

I get what you mean by shrinking the body image, now that I look at it, it does seem kind of strange.

As with the footer, you are correct, I noticed that when I finished, but by then was too lazy to change it. :P

I know I've mentioned this before, but I'll say it again, I really like your style. I remember you posted this image way back when, and I always intended to ask you if I could use it and make a CMDSketchpad skin [ concept image ] from it. Then I got busy, and then I decided I had to rewrite the code behind the site first, and then I got busy again, and now here we are, aren't we? ;)

Once again, thank you. :)

I love what you've done with that banner, it looks very tech-y. I would have never thought of doing something like that. :) I guess that's why you're the professional web designer, and I'm the amateur mock-up maker. Besides the fact that I can't code, of course. :wink:

Call me expired. Please.

th_Energyv2.png

Don't go counting your chickens before the pack of rabid ravaging foxes attacks. -Sozo
Link to comment
Share on other sites

well vista I think it looks great but on the right hand side it shows half of the white box like a side show but other then that looks great

Sorry to annoy you but can you take a screenshot as I don't actually know what you mean.

Thanks.

Link to comment
Share on other sites

The blank, white, rounded rectangular container repeats itself to the right.

As well, the text and images are centered across the browser, not the container.

Call me expired. Please.

th_Energyv2.png

Don't go counting your chickens before the pack of rabid ravaging foxes attacks. -Sozo
Link to comment
Share on other sites

@ Vista, the site for me displayed pretty much the same as it does in D@lton's screenshot. hope that helps :)

dA

Son, someday you will make a girl happy for a short period of time. Then she'll leave you & be with men that are ten times

better than you can imagine. These men are called musicians. :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...