Jump to content

Huge portfolio update, new idea!


Nadril
 Share

Recommended Posts

NEW!

 

[hide=IMAGE]960gridzc.png[/hide]

 

Alright. I think I'm starting to get onto something here. I've made some major changes in the way I'm doing things:

 

1) I'm using the 960 Grid system. I expanded the image it's self to 1680x1050 because I find it easier to visualize it but rest-assured all of the content is fitting within the 960grid template.

2) I've decided to go with a layout I've seen on a lot of portfolios and the like and adding my own thing to it. I'm sticking with the same idea as my last with the "3 thumbnails" deal where I'll allow the viewer to look through my portfolio collection and the like.

3) If I can I'm keeping this a single page website. I just really love the idea to be honest of one.

4) I'm not sure what that gray content box is going to be used for yet. A header type thing maybe or maybe something else. I don't really know yet.

5) I'm not sure if I am keeping the color or not. it's pretty easy to change anyways.

6) Still debating the kind of "style" I want to go with this. Like if I want it to be more sleek and technical looking or what. I love that eurostile font so I'll continue to use it.

7) Not sure if I'm going to use "hard" or "soft" edges. Basically what it is now vs rounded edges.

 

 

So yeah, comments and stuff as always guys! I'm still in the "making it look pretty" phase but I've just about nailed the layout I want.

 

 

[hide]

Hey guys.

 

As you all may know it is summer for a large part of the world. What you may not know is that during the summer I generally have jack-[cabbage]-nothing to do which makes me turn to design and do all the stuff I didn't have time to do during the school year. My focus earlier on was Terragen 2, and I posted a bunch of that and such. My new focus is my portfolio which I, honestly, have never been satisfied with. Hell, I haven't even reupped my domain name because I'm kind of ashamed of the POS that is my current portfolio.

 

For the past week or so I have been going through constant ideas in a (rather large) psd file. They started off rather [cabbage]ty, I really have had a lack of some decent ideas recently. I do feel that, however, they are getting better. Each idea has been in a various states from just a bunch of boxes representing content areas to actually trying some photos in it. I'm making this thread mostly just because I feel like with all this stuff I'm doing I should post it. That way I can at least get some ideas of direction on how I'm doing.

 

 

So! after much thought my goal for this website is as follows:

 

  • I want it to be a single page site. This is mostly just for design purposes, as I dislike people having to look all over to find out what I'm about.
  • I was thinking about having some blog capabilities but I think I will scratch that idea. I suck at blogging anyways.
  • I want it to be interesting to look at but not be cluttered. I don't want it to become another "thumbnails on black BG" site.

 

 

Oh and before I show my latest idea THANKS TO HUMUS FOR THE EXCELLENT TEXTURE PACK. (seriously, it's awesome)

 

[hide]portfolioideas3.png[/hide]

 

The idea is I have 3 main "thumbnails" of sort which are my 3 catagories, 3D, 2D and web. I'll have some sort of "arrows" on it (don't yet) to let you go back and forth between the images in the queue. Maybe I'll just do the pure lightbox support and have it done through that way (which sounds a bit easier on my end).

 

I'm debating what to do with some of the empty space. I'm making this with the intention of being left-side adjusted fitting on a 1280x1024 monitor (well it's 1200 pix wide.) while still possibly looking cool enough on a larger resolution. I don't really want to add a ton more content boxes although I could add some small ones with text under the thumbs. I want to be able to have a nice, easy and clear way to contact me (possibly through a form?) and I wouldn't mind having some info about me right on the main page.

 

The black thing at the bottom I think I will have link to my twitter account, dA account and such if anything. I'm debating on how large I want it to be though.

 

So again this is probably one of the best results I've gotten so far. This current design is still very much in it's infancy, I've been working on it for maybe 35-45 minutes and a large part of that was coming up with the idea. I have, however, spent probably an upward of 8 or more hours on "brainstorming" and trying ideas and layouts. I also have probably spent a bunch more time looking up at web design sites (mostly just inspiration type deal, seeing what they do and trying to get ideas).

 

EDIT: this is an idea for the about/contact. Writing is just rough stuff.

 

about me

[hide]portfolioideasabout.png[/hide]

 

contact info

[hide]portfolioideascontact.png[/hide]

(ah [bleep] I didn't put the lighter gray window below the black bar. Disregard it)

 

 

The idea is that you click on it and the window will expand.

[/hide]

Link to comment
Share on other sites

Just seems very bland to me, Zack. It just doesn't appeal to me. I don't mean to sound stingy but I just don't like it.

 

No I agree, there's still a bunch I don't really like about it.

Link to comment
Share on other sites

The typography at the top is great; I'm dying to know what font that is! Unfortunately that's about all I like about this. It's not that it's bad, it's that It's... mediocre.

 

One of your big problems is that the text, as in the case of the thumbnail captions, doesn't have enough "room to breathe", or as in the case of the text at the bottom, isn't really the right size. The problem with that text really is that it's so undefinable. It's obviously not body text or part of the content, but it's not really a heading either. This makes so that it's really hard to decide on a size for the text. One thing my former visual arts teacher taught me is to use the Fibonacci sequence to decide font sizes. (If you don't remember the Fibonacci sequence: Start at one, and add the two previous numbers. 0+1 = 1, 1+1 = 2, 1+2 = 3, 2+3 = 5, 3+5=8, 5+8 = 13, 8+13 = 21...) So if your headers are 21em/pt/px, your content should be 13em/pt/px. Really it's all about geometry and math; I would use the Golden Ratio for the thumbnails (~1.618:1), and possibly center the page, shrink it to 960px wide and divide it into thirds. That is really more practical than artistic design advice.

What you'll have left will, umm, look like one of my sites now that I think of it.

 

But I know how it is to try to be original when it feels like everything has been done design-wise on the Internet. No easy task, and really feels like banging your head against the wall.

C2b6gs7.png

Link to comment
Share on other sites

The typography at the top is great; I'm dying to know what font that is! Unfortunately that's about all I like about this. It's not that it's bad, it's that It's... mediocre.

 

One of your big problems is that the text, as in the case of the thumbnail captions, doesn't have enough "room to breathe", or as in the case of the text at the bottom, isn't really the right size. The problem with that text really is that it's so undefinable. It's obviously not body text or part of the content, but it's not really a heading either. This makes so that it's really hard to decide on a size for the text. One thing my former visual arts teacher taught me is to use the Fibonacci sequence to decide font sizes. (If you don't remember the Fibonacci sequence: Start at one, and add the two previous numbers. 0+1 = 1, 1+1 = 2, 1+2 = 3, 2+3 = 5, 3+5=8, 5+8 = 13, 8+13 = 21...) So if your headers are 21em/pt/px, your content should be 13em/pt/px. Really it's all about geometry and math; I would use the Golden Ratio for the thumbnails (~1.618:1), and possibly center the page, shrink it to 960px wide and divide it into thirds. That is really more practical than artistic design advice.

What you'll have left will, umm, look like one of my sites now that I think of it.

 

But I know how it is to try to be original when it feels like everything has been done design-wise on the Internet. No easy task, and really feels like banging your head against the wall.

 

The font is eurostyle or something along those lines. I can double check later :).

 

Great tip on the text there by the way, it really seems to be my current #1 issue, I'll be sure to give it a try.

 

And yeah I really think that I get so hung up about being original that I hurt the design and the layout in the process. I probably should try and do a somewhat "standard" layout, maybe use the 960 grid system or something like that.

 

edit: it's eurostile.

Link to comment
Share on other sites

NEW!

 

[hide=IMAGE]960gridzc.png[/hide]

 

Alright. I think I'm starting to get onto something here. I've made some major changes in the way I'm doing things:

 

1) I'm using the 960 Grid system. I expanded the image it's self to 1680x1050 because I find it easier to visualize it but rest-assured all of the content is fitting within the 960grid template.

2) I've decided to go with a layout I've seen on a lot of portfolios and the like and adding my own thing to it. I'm sticking with the same idea as my last with the "3 thumbnails" deal where I'll allow the viewer to look through my portfolio collection and the like.

3) If I can I'm keeping this a single page website. I just really love the idea to be honest of one.

4) I'm not sure what that gray content box is going to be used for yet. A header type thing maybe or maybe something else. I don't really know yet.

5) I'm not sure if I am keeping the color or not. it's pretty easy to change anyways.

6) Still debating the kind of "style" I want to go with this. Like if I want it to be more sleek and technical looking or what. I love that eurostile font so I'll continue to use it.

7) Not sure if I'm going to use "hard" or "soft" edges. Basically what it is now vs rounded edges.

 

 

So yeah, comments and stuff as always guys! I'm still in the "making it look pretty" phase but I've just about nailed the layout I want.

Link to comment
Share on other sites

I like the new one because the old one looked like it was made by a newbie of website design (sorry).

Btw, if I understand correctly, coding it slicing a psd with the slice tool, saving as a html thing, import it into dreamweaver or joomla or whatever, linking the pictures with other links, then uploading it to a domain thing?

 

>_>

Dart.jpg
Link to comment
Share on other sites

I like the new one because the old one looked like it was made by a newbie of website design (sorry).

Btw, if I understand correctly, coding it slicing a psd with the slice tool, saving as a html thing, import it into dreamweaver or joomla or whatever, linking the pictures with other links, then uploading it to a domain thing?

 

>_>

 

I don't use the slice tool, I just do it manually. I save each piece as a PNG and then code by hand in dreamweaver (joomla is a CMS not a program). After all of the coding I upload it to my ftp server.

Link to comment
Share on other sites

Lol @ all my questions. I got the Ps > Dreamweaver down path now that I researched it, all I need to know is how to register(?) for a domain site thing or whatever.

Dart.jpg
Link to comment
Share on other sites

Lol @ all my questions. I got the Ps > Dreamweaver down path now that I researched it, all I need to know is how to register(?) for a domain site thing or whatever.

 

https://www.nearlyfreespeech.net/

 

Is the hosting site I use. You can register a domain for like $10 a year or something like that. As far as hosting goes NFS pretty much charges you based off of the bandwith you spend. So for a huge ass web site it wouldn't be a good idea but for something like a portfolio it's just flat out awesome. I went like a year of hosting on maybe $5 or so.

 

The ftp thing, by the way, is just the way you put the files on your server. Use something like Filezilla to transfer them :thumbup:

 

 

Also I'll say I use dreamweaver really just for the colored code and the preview, I don't use any of the automated functions.

Link to comment
Share on other sites

Also I'll say I use dreamweaver really just for the colored code and the preview, I don't use any of the automated functions.

Don't ask how I found my way into the gallery of all places, but I had to reply to this. If you're coding by hand and just want syntax highlighting, use Notepad++ or EditPlus. Just set up Filezilla to allow you to edit directly on the server (it will watch for changes and upload on save) so you don't need Dreamweaver's preview. I'm fairly sure it has that ability anyway, I know WinSCP does. Then you can test compatibility in FireFox/Opera/IE directly.

Link to comment
Share on other sites

Cruiser! Go back to your hole nao!

 

 

I'm liking the new image much better than the first one :P

Posted Image

 

- 99 fletching | 99 thieving | 99 construction | 99 herblore | 99 smithing | 99 woodcutting -

- 99 runecrafting - 99 prayer - 125 combat - 95 farming -

- Blog - DeviantART - Book Reviews & Blog

Link to comment
Share on other sites

Also I'll say I use dreamweaver really just for the colored code and the preview, I don't use any of the automated functions.

Don't ask how I found my way into the gallery of all places, but I had to reply to this. If you're coding by hand and just want syntax highlighting, use Notepad++ or EditPlus. Just set up Filezilla to allow you to edit directly on the server (it will watch for changes and upload on save) so you don't need Dreamweaver's preview. I'm fairly sure it has that ability anyway, I know WinSCP does. Then you can test compatibility in FireFox/Opera/IE directly.

 

I've used notepad++ in the past but I figured after "acquiring" dreamweaver that I may as well use it, haha.

 

I'm liking the new image much better than the first one

 

Thanks. I'm still debating what I want to do exactly though.

Link to comment
Share on other sites

Man I am at a loss what to do with that center bit. Any ideas?

 

[hide]960gridzc2.png[/hide]

 

Just changed up font sizes a bit (using the Fibonacci sequence) and added some links. I'm just trying to debate what to do with that big gaping empty space...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.