My first website design (comments & suggestions needed)
23 replies, posted
[URL]http://sws.canterbury.ac.uk/ah334/portrait/index.html[/URL]
I'm making a website about someone for a university project, I would just like to get some comments and suggestions for it, obviously nothing works yet, it's not finished. Just on the design aspect how is it looking? You will notice the fonts aren't working on the webpage but they do work in DW, not sure why that is as of yet.
The whole website comes to 285kb so far according to my computer.
HTML:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Memro Profile Website</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="header1"><img src="img/avatar.png" width="218" height="180" /></div>
<div id="header2"></div>
</div>
<div id="main">
<div id="content">NEWS</div>
<div id="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Music</a></li>
<li><a href="#about">About</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html> [/code]CSS:
[code]
body {
margin: 50px;
background-image: url(img/bg.png);
font: "Arial Black", Gadget, sans-serif;
}
#container {
width: 700px;
margin-top: -40px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#header {
background-image: url(img/topbg.png);
height: 180px;
}
#header1 {
float: left;
width: 179px;
}
#header2 {
float: right;
background-image: url(img/memrotext.png);
width: 516px;
height: 179px;
margin-bottom: -10px;
}
#main {
height: 500px;
margin-top:3px;
margin-bottom:3px;
background-color: #999
}
#nav {
font: Arial, Helvetica, sans-serif;
width: 174px;
height: 500px;
margin-top: 3px;
margin-left: 3px;
float:left;
}
ul {
list-style-type: none;
padding:0px;
margin:0px;
}
a:link, a:visited {
display: block;
font-weight:bold;
color: #FFF;
background-color: #4F4F4F;
width:177px;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
text-decoration:none;
text-transform:uppercase;
margin-bottom: 3px;
}
a:hover, a:active {
background-color: #3CF;
text-decoration:underline;
}
#content {
background-color: #CCC;
background-image: url(img/contentbg.png);
background-repeat: repeat-x;
width: 504px;
float: right;
height: 484px;
padding: 5px;
margin: 3px;
}
#footer {
height:170px;
width:700px;
background-image: url(img/bottombg.jpg);[/code]
[IMG]http://sws.canterbury.ac.uk/ah334/portrait/img/avatar.png[/IMG]
Oh god that is awesome.
[IMG]http://photos-g.ak.fbcdn.net/hphotos-ak-snc3/hs043.snc3/13040_1278234035635_1223545882_30842158_7039708_n.jpg[/IMG]
Theres the original, I think it is anyway, it was pretty simple to do.
Nice job on it.
If possible could you make it 80x80?
Thank mate.
Also, the site looks fine but the place where the text will be, looks awfully small.
[QUOTE=Suttles;20523271]Thank mate.
Also, the site looks fine but the place where the text will be, looks awfully small.[/QUOTE]
Yeah I could do with narrowing the buttons down a bit I guess.
Or make them be overhead, that way there is more room
Anymore comments?
It doesn't completly flow to me, other than that, looks good.
Looks good. You're using dreamweaver? Just a quick warning: Dreamweaver's great for the design aspect but it can be a little heavy on code, creates unnessecary tags etc. Meta tags also aren't defined, though they're fairly useless these days.
Perhaps you could also upload a favicon (i'm assuming you have access to the root folder), as little details like that are easy to overlook but are helpful.
Designwise: Looks nice, light. Maybe to help with the 'flow' and also make the site look a little more appealing you could improve it slightly by adding drop shadows or rounding the edges on those pngs in the stylesheet? As for those fonts, which fonts are you trying to use?
[QUOTE=Graviton;20539504]Looks good. You're using dreamweaver? Just a quick warning: Dreamweaver's great for the design aspect but it can be a little heavy on code, creates unnessecary tags etc. Meta tags also aren't defined, though they're fairly useless these days.
Perhaps you could also upload a favicon (i'm assuming you have access to the root folder), as little details like that are easy to overlook but are helpful.
Designwise: Looks nice, light. Maybe to help with the 'flow' and also make the site look a little more appealing you could improve it slightly by adding drop shadows or rounding the edges on those pngs in the stylesheet? As for those fonts, which fonts are you trying to use?[/QUOTE]
Hey a good poster who just joined! Welcome to facepunch.
[QUOTE=Suttles;20539856]Hey a good poster who just joined! Welcome to facepunch.[/QUOTE]
Thanks for the welcome. Been lurking for a while, mostly for garrysmod, but I've been out of the scene for a while and never made an account. Just coming back.
So its not bad for a first, but heres some fundamental pointers for you.
Firstly, the background takes your eye away from the content way too much. Need to darken the lines down more.
Gradient on a backdrop of text really isnt good either, not the way you have used it anyways, it means your page is unable to expand really, I would avoid them if I was you.
Not sure about the footer yet, I would make it smaller.
Define some fonts also, verdana is a nice clean websafe font.
As for the code it seems ok, although you cant really go wrong with HTML/CSS
Try using colours like this for the background (Dont use this image, it wont tile):
[IMG]http://img709.imageshack.us/img709/7053/stripev.png[/IMG]
I dont mean to be negative, I just like to give constructive crit, keep working at it though its a nice start.
Oh and one last thing, if you need some inspiration check out csscreme.com , has some nice sites on there which can help you when designing.
[QUOTE=Sharpshooter;20540391]
Gradient on a backdrop of text really isnt good either, not the way you have used it anyways, it means your page is unable to expand really, I would avoid them if I was you.
Not sure about the footer yet, I would make it smaller.
[/QUOTE]
These are also a couple things that I noticed. The gradient won't work too well unless you want to use some ugly overflow property on your DIV tags, but then I assumed you were going to be using some CMS or another which deals with that for you.
As for the footer, I noticed it was a little large. I tend to use an inobtrusive floating type instead, but there's been a trend lately for large footers, so I don't know what direction you're working towards there.
Thanks guys for all the comments, I'm actually going to bed right now, but I will make sure to read through all of them properly and try out some stuff you suggested.
terrible, actually. fix the header, fix the background fix the buttons, scrap that. fuck that site start a new one
parrrky, don't be so damn harsh.
Website doesn't load :/
I can definitely tell it's your first website. It looks cluttered and messy even though there is no content yet, and that just means it's going to look even worse once there are words on the page.
The font in the header is ugly (especially the stroke around it). The diagonal lines in the background are way too strong, the gradient behind the text is way too strong, the image in the header to the left of the text is way way way too distracting. The blue render-clouds from photoshop in the header and footer are way too distracting with that bright blue in contrast to the rest of the page (and I can see the jpeg compression in them too eww). All the grays you've chosen look very bland, you need to either go lighter or go darker, super mid-tone gray like that does not work as the primary colors for a website like this.
Nothing ties in with anything else at all, it all just looks like a bunch of blocks thrown together. You're not attempting to lead the viewer's eye at all and there's no flow to it (you need content to fully see what I'm talking about but I can already tell it will be a problem once it's put in)
I could go on for hours but that should give you a good starting point.
On the bright side, your HTML is nice and clean, CSS could be better though.
[QUOTE=Suttles;20522649][IMG]http://sws.canterbury.ac.uk/ah334/portrait/img/avatar.png[/IMG]
Oh god that is awesome.[/QUOTE]
This is the epitome of "look i just installed photoshop and found the filters and smudge tool".
[QUOTE=Sharpshooter;20540391]Gradient on a backdrop of text really isnt good either, not the way you have used it anyways, it means your page is unable to expand really, I would avoid them if I was you.[/QUOTE]
[QUOTE=Graviton;20540551]These are also a couple things that I noticed. The gradient won't work too well unless you want to use some ugly overflow property on your DIV tags, but then I assumed you were going to be using some CMS or another which deals with that for you.[/QUOTE]
What are you two on about? If you're using overflow at all to do gradients behind text you are doing it completely wrong.
[code]
background: url('link/to/gradient') top left repeat-x #xxxxxx
[/code]
x being the color of the bottom of the gradient. You can stick the gradient at the bottom and use the color from the top too. Although the gradient he is using is way too strong to look good in the first place.
[QUOTE=Sharpshooter;20540391]Not sure about the footer yet, I would make it smaller.[/QUOTE]
Or get rid of it because it has nothing in it.
[QUOTE=Sharpshooter;20540391]Define some fonts also, verdana is a nice clean websafe font.[/QUOTE]
This please. Also, change the font in the header, grunge fonts are terrible. At the very least grunge it up yourself so that you can't see the exact same wear and tear on duplicated letters (the capital Ms for instance)
[QUOTE=Sharpshooter;20540391]As for the code it seems ok, although you cant really go wrong with HTML/CSS[/QUOTE]
I don't think you understand how wrong the second part of that statement is.
[QUOTE=Graviton;20540551]As for the footer, I noticed it was a little large. I tend to use an inobtrusive floating type instead, but there's been a trend lately for large footers, so I don't know what direction you're working towards there.[/QUOTE]
The size of the footer should be determined by the content that is going in to it not because you want a trendy large footer anyways (you'll notice all the well executed large footers are fairly content rich)
[QUOTE=Suttles;20561584]parrrky, don't be so damn harsh.[/QUOTE]
He's actually pretty on the money. I'd scrap it and start over if I were the one working on it. It doesn't really have any redeeming qualities to it and everything needs to be fixed anyways.
I like it.
Everything's nice and all, but the awful filterrape of yourself ruins the mood and the buttons are too flat and the text on them is horrible. Add some gradients to the button and give them glass-y look.
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#[B]contact[/B]">Music</a></li>
<li><a href="#about">About</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#[B]contact[/B]">Contact</a></li>
Is this a negligent or..? Just saying
[QUOTE=Smilecythe;20588968]<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#[B]contact[/B]">Music</a></li>
<li><a href="#about">About</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#[B]contact[/B]">Contact</a></li>
Is this a negligent or..? Just saying[/QUOTE]
I just copy and pasted the code one after the other, I just forgot to change the music one. The links don't work yet anyway.
Sorry, you need to Log In to post a reply to this thread.
