Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Huge portfolio update, new idea!

Featured Replies

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]

My one complaint is the sickly background yellow. Immediately turned me off. The splatter is all well and good, but doesn't look top notch quality.

lampost_sig_stark.png

How do you turn a psd into a working site? :mellow:

Dart.jpg

Maaaaagiiiiicccccc.

10postchm2105.png

8,180

WONGTONG IS THE BEST AND IS MORE SUPERIOR THAN ME

#1 Wongtong stalker.

Im looking for some No Limit soldiers!

  • Author

How do you turn a psd into a working site? :mellow:

 

Cut the pieces into separate png's and then code. :)

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.

2257AD.TUMBLR.COM

  • Author

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.

I really don't understand much about web design, but once again as I said in your Terragen thread your text always appeals to me, no matter how simple it is. :mellow:

skyrim_by_katri_n-d3hewko.png

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

  • Author

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.

  • Author

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.

I think the blue text for your first name is a bit too saturated, stands out too much.

skyrim_by_katri_n-d3hewko.png

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
  • Author

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.

Ftp?

Dart.jpg
  • Author

Ftp?

 

Pretty much just uploading it onto the server.

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
  • Author

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.

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.

  • Author

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.

  • Author

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...

Hug SLIDESHOW.

 

In that center, light gradient bit?

lampost_sig_stark.png
  • Author

oooh...

 

So pretty much just making it so that the middle thumbnail is what shows up on the slideshow?

Create an account or sign in to comment

Important Information

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

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.