Hey,

Each year I try to redesign my portfolio site so that time has come around again. It is still at a very basic stage but I am going to try to go for the clean minimalistic look. I am going to introduce more red into the site description sections to give it a little bit more colour.

 

Obviously I havent completed the page but you can see where i am going with it. Let me know what you think. All opinions and thoughts are welcome:

 

Site

 

I still think that it could do with something to give it an even slicker finish. any ideas? maybe a bit of interactivity would work. if anyone has any ideas or examples that would enhance it would be great, cheers

Some suggestions:

 

1) Don't use #000. Go with #111 or #222 instead. It'll be softer and therefore kinder on people's eyes.

 

2) Make more of the navigation. Make it slightly bigger / interesting, just... something.

 

3) Include some descriptions with your screenshots, or even a link to see a bigger version. Right now there isn't much content on your home page - it's not that "balanced".

Too minimal in my opinion, a:hover could be a little more obvious as well.

 

"People told me not to bother....so i did!" maybe change that to ...but I did?

Too minimal in my opinion, a:hover could be a little more obvious as well.

 

"People told me not to bother....so i did!" maybe change that to ...but I did?

 

 

'but i did' does sound way better, thanks. I still have to insert all the info i.e site title, description, link etc... about each site so the page will thicken up by the end.

 

I probably will strengthen the nav bar, maybe introduce this idea, i have always wanted to use it but couldnt find the right project.

I probably will strengthen the nav bar, maybe introduce this idea, i have always wanted to use it but couldnt find the right project.

 

I love that - and such a simple idea... can't believe I haven't seen anything like it before

I love that - and such a simple idea... can't believe I haven't seen anything like it before

 

 

Please excuse what the banner looks like now (got a cheeky hour doin behind my boss's back ;-) ) i will try fix it up later. Yeah, its a cool effect thats very simple to do but to be honest i have tried it in a few different sites and it just didnt look right. i think it works perfectly for the nav bar in the example though

Ok, i have fixed it up a bit. What do u think now.

SITE

How many sites do u think i shouhld show. I have about 12 sites but the further i go back the worse the quality of the sites are so how many sites should i show?????

cheers

Alan

It's coming along nicely - it's simple, clean and highlights your portfolio, but it's lacking a bit of depth - something to get my teeth into.

 

First things first...

"People told me not to bother....but i did!"

Should be:

"People told me not to bother... but I did!"

That's a capital 'I' and only 3 full-stops which is an ellipsis ( 8230; - without the space!)

 

Then I think the text area is too wide, making it harder to read and less appealing. And there could do with some more text around to engage and explain.

As for how many screenshots to include? Have you considered only displaying one or two at a time and letting the user cycle through them - you know one of those flashy gallery doo-dahs!

I like it, let us know when it's finished!

yeap, i can see it taking me ages to finish it as work is more important at the minute (so my boss says anyways) but i will let u know as i go!

My opinions:

 

I don't like the default state of the navbar being the same as the hover state, it makes the nav a bit twitchy to look at when you first contact it. Like the blurred sample you linked to, but it still has the same effect - which may or may not be problematic depending on your preference.

 

Font usage for headers is a bit bland, it would be nice to see a more graphically rich front page - perhaps using image subs or SiFR for the titles.

 

High contrast between black banner and white is a bit harsh. In addition, using such pure values detracts from the impact of any colour values that are sitting on them. I would add a border of some description round your image samples to isolate their colours, or lower the value of the background to allow the thumbs to stand out more.

 

Layout's nice and simple, although the numerals for each sample appear superfluous (and slightly too close to white to be legible), it would be better to have the project title in their place.

Agree with sunwukung. On Safari the nav links are flashing away far too much. Other than that, like the simplicity of the page. Good stuff!

Agree with sunwukung. On Safari the nav links are flashing away far too much. Other than that, like the simplicity of the page. Good stuff!

 

Thanks, i will see what i can do about the nav bar. I will try to get some of the other pages sorted too. To be honest im kinda struggling to think of an idea for the other pages due to the simplicity of it all but im sure it will come to me when i actually sit down and think about it properly.

Cheers

Hi,

 

Maybe you can use some softer colors for your background and brighter colors to highlights the important elements.

 

Thanks

Asif

Eegads what is this code?

 

 <div><img src="images/1.gif" /></div><div class="web"><div style="float:left"><img src="images/web/ukmotors.jpg" width="240" height="130" /></div>
<div style="float:left; padding-left:20px; font-family:Arial, Helvetica, sans-serif; color:#FF0000; font-weight:bold; width:50%; font-size:12px;">Title: <span style="color:#000000; font-weight:normal;">Irish Car Offers</span></div>
<br /> <div style="float:left; padding-left:20px; font-family:Arial, Helvetica, sans-serif; color:#FF0000; font-weight:bold; width:50%; font-size:12px;">Site: <span style="color:#000000; font-weight:normal;"><a href="www.irishcaroffers.com" target="_blank">www.irishcaroffers.com</a></span></div>
 <br /> <div style="float:left; padding-left:20px; font-family:Arial, Helvetica, sans-serif; color:#FF0000; font-weight:bold; width:65%; font-size:12px;">Description: <span style="color:#000000; font-weight:normal;">Irish Car Offers is an exciting new competition based  service that offers users the chance to win a brand new car every 4  months. With over 1000 subscribers Irish Car Offers already has a huge following.</span><br /><br />

<a href="http://www.irishcaroffers.com" target="_blank" onmouseover="MM_swapImage('View Site','','images/view2.gif',0)" onmouseout="MM_swapImgRestore()"><a href="http://www.irishcaroffers.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('View Car Site','','images/view2.gif',0)"><img src="images/view1.gif" name="View Car Site" width="65" height="13" border="0" id="View Car Site" /></a></div>
</div>

 

There is so much wrong here. Too many divs, unnecessary images, you're not using <p> tags, inline styles you're using a javascript image loader... c'mon. I think you need to learn HTML + CSS designs the right way.

 

Here's how I would do it:

 

HTML:

<div class="number"><p>1</p></div>
<div class="web"><img class="floatleft" src="images/web/ukmotors.jpg" width="240" height="130" />
<p><span class="red">Title:</span> Irish Car Offers</p>
<p><span class="red">Site:</span> <a href="www.irishcaroffers.com" target="_blank">www.irishcaroffers.com</a></p>
<p><span class="red">Description:</span> Irish Car Offers is an exciting new competition based service that offers users the chance to win a brand new car every 4 months. With over 1000 subscribers Irish Car Offers already has a huge following.</p>
<a class="viewsite" href="http://www.irishcaroffers.com"></a>
</div>

 

CSS:

 

.red { color: #FF0000; font-weight: bold; }
.floatleft { float: left; }
.viewsite a { height: 20px; width: 80px; background: url(images/view1.gif) 0px 0px; }
.viewsite a:hover { height: 20px; width: 80px;  background: url(images/view1.gif) 0px -20px; }
p { font-size:12px; padding-left:20px; font-family:Arial, Helvetica, sans-serif; }
.number { width: 600px; border-bottom: 1px solid #cccccc; }
.number p { color: gray; font-size: 24px; padding: 5px; }

 

Note: this code probably won't work if you just put it in. It'll probably take some tweaking.

 

I hope I won't have too much to explain here, as the code is much more understandable. Instead of having inline styles, I put the styles into the external sheet, and gave them classes. I used <p> tags instead of divs, and styled them accordingly.

 

I replaced the image of the number and the line with a separate div and just some plain text number, with a border on the bottom of that div. I don't know how wide your site is, so I just gave it a random width. This should make a decent replication of the image, and will cut down on the images loading on your site and make it easier so you don't have to make new images for every new website. You just replace the number.

 

Now for the rollover images I did something nifty. Instead of having that bulky javascript rollover stuff, I did it all in CSS. For this to work you have to make those two separate images into one, an image with twice the height, and have them stacked on each other. I gave the <a> tag a height (whatever it is for the image), and a background of that image. Since the image is a certain height, it will only display the the part of the image that fits in the height. Then when you hover over it (a:hover), it will shift the background image up 20 pixels, but since the height is still only 20 pixels high, it will only show that part of the image. This is how you do rollover images all in css. This will help because its less code, and you don't have to wait for the image to load.. the two images are actually one, so once it loads the image the loading is done.

 

If you have any questions, feel free to ask. But if you want to be doing web design you have to be able to produce clean and quality code.