Take a look at the design of my online portfolio & blog

[jayuk666]

Now it is time for my third site and third assignment in Web Design. I will be using this once completed and will be live online.

Here is my Portfolio / Blog (or as I like to call it... a BlortFolio)...

I went for a very personal, home-made look which seems to be very 'in' at the moment when it comes to portfolios. It's not to everyone's taste but I like it.

All critical views welcome :-D

Let me know any changes or improvement you think I should consider.

Thanks, Jamie.

 

[leafypiggy]

I swear to Jesus I've seen that design before, either on someone's site, or as a tutorial on good-tutorials.

Did you REALLY make it?

 

[jayuk666]

Yes mate. Like all sites I look at designing I get inspirations from others. I have seen a site with a phone and photos flat on the desk with pinned notes on. So i simply recreated what is actually on my desk today.

I was going to use tabbed links at the top but decided to use the links and relate them to the items on my desk as you can see. I think this has a good effect.

All layers in my PDF file I created except some Stock (royalty free) photos like the mouse, phone, paper clip and two sticky notes. (didn't know how to create the fold so used a stock photo).

This is my first photoshop draft.

The Real image canvas is 1024 x 768 (up to the edges of the lined paper).

It took me a while finding the right high resi desk texture!

 

[vperlin]

Looks neat!
I've been digging the desk layouts lately, I've even done one for myself(kinda similar, minus desk texture)
Take a gander(Still in test phase, as I've only been able to work on it for a little while)
http://vpstest.x10hosting.com/portfolio

I am excited to see yours as a web version. So far, so good my friend. Keep up the good work.

 

[farscapeone]

Generally it's not good to copy an idea for portfolio site. You can get inspired from looking at other peoples design but don't copy them. Main thing about portfolios is that they have to be original.

Now to the layout.

• You table texture is simply bad. It's too big. Try making your own texture to be repeatable.
  
• Using stock images for site graphics for portfolio site (where you have to convince somebody to hire you) :nuts:
  
• I don't like the font you used.

Why am I so hard on you? If I tell you my reasons people would think I'm flaming so I'll try to be good. BE ORIGINAL!

 

[idfizbo]

It's one thing to blatantly copy somebody else, but it's another thing to take inspiration from another place. Just look at artists throughout history; they've all been inspired by their predecessors, and the memorable ones turn that inspiration into something fresh.

Put simply, I like it. Yes, I've seen the same concept before, but not quite in the way you're doing it. Some people apparently have a different definition of "originality," but seriously, it's great.

 

[Zdroyd]

I swear to Jesus I've seen that design before, either on someone's site, or as a tutorial on good-tutorials.

Did you REALLY make it?

Many sites, and shows (can I say the Office) have used the office/desk design like that, so yes it looks familiar.

Not very original, but still nice:

4/5 - For being creative and out of the box.

 

[vperlin]

Generally it's not good to copy an idea for portfolio site. You can get inspired from looking at other peoples design but don't copy them. Main thing about portfolios is that they have to be original.

Now to the layout.

• You table texture is simply bad. It's too big. Try making your own texture to be repeatable.
• Using stock images for site graphics for portfolio site (where you have to convince somebody to hire you) :nuts:
• I don't like the font you used.

Why am I so hard on you? If I tell you my reasons people would think I'm flaming so I'll try to be good. BE ORIGINAL!

I agree with you, that copying directly is unoriginal, but there's nothing wrong in attempting to interpret a theme slightly differently, or add your own flair to it.
I also agree with your points, but...

"Be original" is a bit of a stretch because there's everything that has been done. I would say, instead of original, BE CREATIVE! Take an idea, make it your own. That's how progress works. Build on something that is pre-existing, help it evolve and grow. That's how music goes, and just about everything else on earth.

I will agree that all of these concepts are strikingly similar, including my own, but I don't exactly see a huge problem with it, unless if everything were laid out the exact same way, with the exact same formatting. 80% of web design is recycled (link positions, layout formatting, heading and footing) webpages and the fact that he created the whole thing himself(with exception of the stock images) is a plus. If I were gonna hire someone, I wouldn't look at the design and say, "Looks just like everything else out there"(TOTALLY depending, of course), instead rather ask "I wonder did he create this all himself?" like, design, interface, backend (html/css/java/flash etc or serverside, whatever). This is only a design thus far, making lots of room for change/improvment! And, a simple image is different then seeing how something works once coded/scripted/optimized for web.

Also,
Why would it be flaming, if you're taking a very direct approach to criticism?
People should be open to criticism in this line of profession, unless what you have to say isn't constructive, which most times, I see people consistently slagging on each others work because this line of work has a very one-up/elite feel to it, and it's starts to get away from the work, and more on the people.

So, constructively offer ways they can change/improve and offer some tips/tricks/tutorials that will aesthetically/functionally improve on their work.

If someone can't handle constructive criticism, maybe they shouldn't be in a line of work where opinion is different for every client you have!

 

[jayuk666]

Hi guys. Thanks for the comments.

I got inspired from web design mag saying about new trends and what is 'in' at the moment. I like the idea of a very personal portfolio rather than the modern, sleek standard and simple one I was going to create.

This might be similar to other sites but most sites look a like in some sort of way. I got the idea from someone else and expanded on it in my own way. These ARE the items on my desk and I DID create all the layers myself. I do not intend to copy other sites but get ideas.

Looks neat!
I've been digging the desk layouts lately, I've even done one for myself(kinda similar, minus desk texture)
Take a gander(Still in test phase, as I've only been able to work on it for a little while)
http://vpstest.x10hosting.com/portfolio

I am excited to see yours as a web version. So far, so good my friend. Keep up the good work.

I like your site. Looks good. I have not seen many 'desk' styles online so that is why people might think I am copying. But the way I see it is just like yourself, Zdroyd and idfizbo said, I get ideas and inspiration, and create something myself that relates to me.

You table texture is simply bad. It's too big. Try making your own texture to be repeatable.
Using stock images for site graphics for portfolio site (where you have to convince somebody to hire you)
I don't like the font you used.

The final optimised site will have a changed texture background. This is just a first draft.

I prefer creating my own stock images but as long as they are royalty free, why not? I know loads of graphic and web designers who use stock photos. They are there to be used!

The font (I take it you are referring to the handwriting font) is not to everyone's taste. I always stick to default fonts for the main bulk and content. But when it comes to banners, logos and links/buttons, it can be nice to use a different font. This is a personal design so a handwriting font is key in my opinion. Perhaps the HOME text needs to be clearer.

Thanks for all feedback. More welcome and advice always wanted

I am currently now going to start my second draft.

Not to sure on the background. Whether to have it like it is with the desk texture as the whole background OR have the desk background but faded into black or white and use a plain black/white background colour.

Not too sure yet.

Anyway thanks for feedback. I am new to web design so please all feedback and advice is great! :-D
Edit:
Okay here we have Draft 2:

I have added a pencil, some headphones, some coins, two upside down badges to help viewers identify that they are actually badges, an 'up' sticker, showed the 'Home' text more clearly and I have slightly changed all the items size in proportion with each other and thus had to slightly change position.

I have also darkened the desk wood texture.

Here is also Draft 2.5 that I am working on:

Here I have added a spot light effect which I think looks pretty good, highlighting the content rather than everything else. Then as you roll over the links the items become brighter.

What would the best method be of splicing this all up and being able to do roll overs with the overlaps etc. Also taking into consideration that the notepad paper will need to be fluid and stretch down dependant on amount of content (BLOG).

 

[leafypiggy]

I want a timestamped photo of your desk.

The spot light throws the whole design off. It's a nice idea, but will be extremely hard to implement without using flash. It doesn't really make it look "professional"

 

[jayuk666]

I want a timestamped photo of your desk.

The spot light throws the whole design off. It's a nice idea, but will be extremely hard to implement without using flash. It doesn't really make it look "professional"

yeah that is what I thought. I do not want to go into flash yet so will stick with draft 2!

 

[Zdroyd]

I want a timestamped photo of your desk.

The spot light throws the whole design off. It's a nice idea, but will be extremely hard to implement without using flash. It doesn't really make it look "professional"

I do not like the spot light ether. I suggest you just stay with Draft 2.

What editor are you using to make this? And what screen size are you using for a reference point?(seeing that you are using a Mac.)

 

[jayuk666]

I use Photoshop & Dreamweaver CS3 and I have a 19" screen.

I actually have a PC just while searching for a mouse I preferred the look of the apple ones lol.

I work on Macs everyday at college.


Can anyone help me with regards to splicing this up. I am unsure how to be able to separate the background with the over lapping items (which will be link roll overs) and also to be able to stretch the content box (where the text is) without creating gaps as it is going to be a Blog.

I hope you understand how I tries to explain this >.<

 

[vperlin]

I would say, so there are no gaps, do not slice it up with the slice tools and save as html document straight from Photoshop. Familiarize yourself with css formatting and the possibilities are pretty grand. You can pretty much save the images from your design individually, and then just use css to format the placement with div tags. Now, with the many different browsers out there, it's not going to look 100% the same in every browser depending on what you have going on with the css because there are inheritance issues involved. But, you can make it look pretty damn good!

You could try using z-indexing and floats with css to separate and layer the links.

Hard to exactly give you all the details, so I would just say, as I did earlier in the post, familiarize with css. It's amazing the things you can do, sometimes.

Just search up some tutorials on google or whatever, and go from there. Take a look around at other websites, get an idea of how some things are structured.

P.S : Mac is overrated! Take care dude!

 

[jayuk666]

Thanks vperlin. Yeah I really need to go into CSS and Div Tags more now.

I managed to split it up as individual layers in a PNG format at high quality with transparent backgrounds. I also fitted into dreamweaver and it looks good. Just sorting out some rollovers and I will upload the site so people can see what they think.

Do not know about lightening up the background wood texture as I did darken it.
Dunno whether to have it light or dark wood!

 

[hezuo]

I like the idea of the desk, but the header is too populated, but the sticky notes at the footer are cool. I think I'm gonna use that idea in my next project XD

 

[jayuk666]

yeah it a good look depending on how you use it.

I have paused the making of this site for now. Im getting too far ahead in Web Lessons!

 

[zafersh]

how will you convert this into html!!!:nuts:
you did it with photoshop right?

 

[slivester]

Assumably, you're looking at exporting the theme for wordpress? Draft 2.5 sure looked tediously difficult to replicate on a wordpress theme haha.

Perhaps you're going for the cluttered look, though I feel that the bkg image used is rather off. Just my opinion.

 

[turtlerage]

I like it, nice job.