Hey guys,

 

So I only really started web design seriously like a month ago, and have been hard at work building up a layout for my 'to-be' portfolio. I almost finished it, then scrapped it because I didn't like it after looking at it too long (dang). I redesigned it, with a much simpler design, that I think looks alright for my first real design.

 

Just wanna get some feedback from you guys on it. Obviously at the moment I haven't bothered with SEO, catering for disabled visitors etc. but I will get to that soon enough. Also note that I'm in the process of fixing the nav bar (there is only the one index page at the moment anyway), but it's like 6AM and I really need to go to sleep . It will be done in the morning!

 

So yea if you guys could let me know what you think of the design that'd be cool.

 

The site is here: New Pixel Sweet Design

 

P.S. I know it's a very 'Mac-esque' design, but hey, can you blame me, they look nice!

It's nice, clean. simple.

 

The photoshop icon is huge, a bit overpowering. You mention the cs5 suite, why not include icons from the range of products.

 

You're spacing at the sides are inconsistent, the left column has an additional 10px spacing compared with the right side, this puts it out of line with the left side of the #summary text and your logo.

 

Code wise, it's pretty good. Touch of divitus, and what looks like chronic use of id tags (i get really, really anal about this stuff). It's no biggy though.

 

<div id="logoWrapper"> 
<div id="logo"> 
</div> 
</div> 

It's not necissary to have a wrapping div, you could replace both those divs with a header tag.

 

<div id="navbar"> 
	<ul> 
		<li><a class="home" href="#">About Me</a></li> 
		<li><a class="portfolio" href="#">Portfolio</a></li> 
		<li><a class="getintouch" href="#">Get in Touch</a></li> 
	</ul> 
</div> 

 

Again, no need to wrap the list, a list is already a block level element.

 

You're css is neat, stable, and well structured.

 

The drop shadows are a little harsh (subtle detail is always a winner in my books ).

 

I have a niggling feeling that down the line, we're gonna see some real eye candy from you

Thanks for the reply Bocaj. When I get up I'm gonna go through your post again and fix / tidy up the areas you mentioned. I understand it's all pretty rough at the moment.

 

I used wrappers around the divs holding the images because sometimes, margins I apply directly to the divs holding the images don't get applied... but when I wrap another div around it and apply the margin on that instead, it works. I'm obviously doing something wrong, and it's just a quick fix for now.

 

I have a niggling feeling that down the line, we're gonna see some real eye candy from you

Thanks, dude! Really encouraging to hear someone with far more experience than me say that.

nice start

 

A few things that grab me as I see it first time.

 

1. Your logo looks a little lost in all the blue and doesn't hit me. With a large screen my eye is caught by the graphics on the page especially the oversized PS.

2. Your words are a little false? W3C validation doesn't do any checking of whether something is 'guaranteed to work on all browsers and screen sizes'. Strictly they don't have to be well coded to pass either, just valid.

3. The correlation between the latest Adobe products and whether a design is up to date, modern or mighty swish is also not true. And you have a picture of Coda not Dreamweaver?

4. The drop shadows are a bit too plentiful especially the ones dividing the header/footer from the main content.

On the whole it’s ok for a first attempt. Not keen on the logo, it kinda blends in with the background too much and looks like a wordart font. And there’s probably too many drop shadows and gradients. The graphics are ok but the PS logo is definitely too big.

 

Obviously you know about the nav bar so that’s no big deal. The code could be cleaner but for a first attempt its fine, I've certainly seen a lot worse!

 

Personally I have a bit of a pet hate against the inexperienced creating freelance design sites (meant in a polite a way as possible). I realise a portfolio site tends to be a natural choice for beginners to start off with but don't you think it’s a little premature?

 

Chances are you'll not get much traffic but the fact you're offering a service must irritate those who have years of experience and have bills to pay. Would you call yourself a plumber after fitting a new shower head or an electrician after replacing a blown fuse?

 

My advice would be to try and join a design agency where you’ll get loads of experience and be exposed to other designers/developers.

Other than that it’s always a good idea to keep practicing. Pick something that interests you and build a site around it.

Thanks for all the advice guys, will spend the next few hours fixing it, especially the PS logo will post a 'second revision' once I'm done.

 

Personally I have a bit of a pet hate against the inexperienced creating freelance design sites (meant in a polite a way as possible). I realise a portfolio site tends to be a natural choice for beginners to start off with but don't you think it’s a little premature?

 

Chances are you'll not get much traffic but the fact you're offering a service must irritate those who have years of experience and have bills to pay. Would you call yourself a plumber after fitting a new shower head or an electrician after replacing a blown fuse?

Dude, don't worry, I feel exactly the same way. My website isn't gonna go 'live' for a good while yet. I know that at my experience level there's almost no point; I'm not nearly confident enough. I'll be sticking to my call centre job for now .

good job luke, i thought the website was nice

Hi Luke,

 

SEO:

 

Title: Change to 'Web Design | Web Development @ Pixel Sweet, Bristol' or something like that.

 

Where's the Meta Description and keywords? !!!!

The Meta Description is more important than keywords, but I still put the keyword meta tag in. The meta description should be around 160 characters and try to write it so the most important keyword/phrase comes first and try not to include stop words (is, and, the etc). Pretty much anything that is not a keyword! You can use | , = . - and so on to break up the phrases cos they don't get read by Goggle (although they do count in the number of characters used.

 

Get an <h1></h1> tag at the beginning of the page.

 

As your logo is a background, you could do something like this:

 

 

html:
<div id="logo">
    <h1>Web Design | Web Development @ Pixel Sweet, Bristol</h1>
</div>

css:
#logo {
background: url(images/logo.png) no-repeat;
width: 268px;
height: 107px;
}
#logo h1{margin-left:10000px;}

 

Nice little trick to throw in an h1 tag which won't get seen unless you switch CSS off which then also improves accessability too! But the only things that will really see it are search engines! This desont breach Google's guideline cos the h1 tag is describing the background.

 

 

Good start mate. Ya should have seen my first attempt! Although in those days you could just about add images and the only styling ya could do was wedgey borders around tables!!! Which I think are due for comeback any time soon...

Hi Luke,

 

SEO:

 

Title: Change to 'Web Design | Web Development @ Pixel Sweet, Bristol' or something like that.

 

Where's the Meta Description and keywords? !!!!

The Meta Description is more important than keywords, but I still put the keyword meta tag in. The meta description should be around 160 characters and try to write it so the most important keyword/phrase comes first and try not to include stop words (is, and, the etc). Pretty much anything that is not a keyword! You can use | , = . - and so on to break up the phrases cos they don't get read by Goggle (although they do count in the number of characters used.

 

Get an <h1></h1> tag at the beginning of the page.

 

As your logo is a background, you could do something like this:

 

 

html:
<div id="logo">
    <h1>Web Design | Web Development @ Pixel Sweet, Bristol</h1>
</div>

css:
#logo {
background: url(images/logo.png) no-repeat;
width: 268px;
height: 107px;
}
#logo h1{margin-left:10000px;}

 

Nice little trick to throw in an h1 tag which won't get seen unless you switch CSS off which then also improves accessability too! But the only things that will really see it are search engines! This desont breach Google's guideline cos the h1 tag is describing the background.

 

 

Good start mate. Ya should have seen my first attempt! Although in those days you could just about add images and the only styling ya could do was wedgey borders around tables!!! Which I think are due for comeback any time soon...

Thanks for all the tips! When I get round to optimising it, after building the other pages, I'll be sure to refer back to this post .

html:
#logo h1{margin-left:10000px;}

 

Woooh, hold-up ... margin to hide it?!

 

#logo h1{text-indent:-1000em}

Its nice dude, clean and simple. I do agree with whats been said above though, the icons are pretty big.

 

Also, you could maybe add a bit of spacing to the text aswell? The rest of the site feels so "open", it would be good if the text had a similar feel too

 

You started appearing on these boards around the same time as me, and I'm pretty new to this myself (been doing it around 4 months here, not actively until just recently, though). I've literally just gotten my portfolio website up and am currently working on that so if you need any help with anything just message me - chances are I have a similar problem or have just solved a similar problem myself and it would be good to discuss things with someone in a similar position to me

 

 

Kyle

Its nice dude, clean and simple. I do agree with whats been said above though, the icons are pretty big.

 

Also, you could maybe add a bit of spacing to the text aswell? The rest of the site feels so "open", it would be good if the text had a similar feel too

 

You started appearing on these boards around the same time as me, and I'm pretty new to this myself (been doing it around 4 months here, not actively until just recently, though). I've literally just gotten my portfolio website up and am currently working on that so if you need any help with anything just message me - chances are I have a similar problem or have just solved a similar problem myself and it would be good to discuss things with someone in a similar position to me

 

 

Kyle

Thanks! Yea, they are starting to look a bit big now! Gonna resize them and add some more soon.

 

That's a good point about the text, gonna have a play around with it. Good to hear you're at the sameish level as me, I'll add you to my friends .

 

html:
<div id="logo">
    <h1>Web Design | Web Development @ Pixel Sweet, Bristol</h1>
</div>

css:
#logo {
background: url(images/logo.png) no-repeat;
width: 268px;
height: 107px;
}
#logo h1{margin-left:10000px;}

 

 

 

Not bad, but there is no reason for the <div> tag. It is also advisable for the logo to be a link to go back to the home page.

For example:

 

HTML:

<h1><a href="/">Web Design | Web Development @ Pixel Sweet, Bristol</a></h1>


CSS:

h1 a {
background: url('images/logo.png') no-repeat;
display: block;
height: 107px;
width: 268px;
text-indent: -9999px;
}

Thanks, I've been meaning to do that but totally forgot about it!