Graphic Design Portfolio Site

Spritanium

New Member
Graphic Design Portfolio Site (Reviews please)

I've been working on this site for a few days, and it's my first serious attempt at a website to show off my graphic design. I joined this board because I literally googled "web design forum" and it was the first thing I saw, but I can definitely see myself sticking around. I've never gotten a lot of critique, and I'd like that to change.

Here's a work-in-progress version of the site: http://keithpickering.zxq.net/index.php

The homepage and portfolio pages are more-or-less done, and I'm working on getting wordpress configured for the blog page (I'm actually considering converting all 4 pages to wordpress to make everything easier to manage, after which I might add more dynamic content)

The site was designed in Photoshop. It was also coded in notepad, because that's how I roll I guess.

I'd like any kind of criticism, because I want this to look as good as it possibly can. I'll even take minor nitpicks.
 
Last edited:

annemarie

New Member
I like it! But I would use a larger font for the 'about me' section on your portfolio page.
And I noticed that some images are over 3000px! That's really not necessary, I believe most people won't be watching your site on a screen larger than 1280, so it would really improve loading time if you make them smaller
 

Spritanium

New Member
I like it! But I would use a larger font for the 'about me' section on your portfolio page.
And I noticed that some images are over 3000px! That's really not necessary, I believe most people won't be watching your site on a screen larger than 1280, so it would really improve loading time if you make them smaller

Thanks! Using a larger font makes the justification of the text have huge gaps in it, but I'll see what I can do.

That sidebar is actually going to be on every page except the index. I just wanted to keep the homepage as clean as possible. The header, sidebar, and footer are handled by php includes to simplify this.

And the portfolio images are huge because I uploaded the full-sized, uncompressed versions. They'll probably be downsized in the future to save space and loading time, but I definitely want to keep the wallpaper-sized ones at 1920x1080 so anyone will be free to use them (since there's nothing more annoying than finding a wallpaper you want to use, only to find that it's undersized)

EDIT: The most offending pictures have been downsized

So you don't have any other layout suggestions?
 
Last edited:

Spritanium

New Member
Aright, I need some opinions:

After thinking for awhile, I'm wondering whether I should make the portfolio a little more complex.

What I'm thinking is having the thumbnails on the portfolio page look exactly the same, but instead of a simple FancyBox window, a window would pop up with a title, longer description, and a script that cycles through a few different images of the same project.

Pretty much exactly like this: http://www.category4.com/portfolio/

I feel like this would let me give a lot more info about a project, rather than just an image or short description.

So I need a script that would achieve this, unless there's a way to continue using FancyBox.

I'm also planning on using FancyBox for simple images in blog posts, but I don't know if I should switch to whatever script I decide to use for the portfolio, for consistency. Basically, what I want to achieve is this: click an image thumbnail, and a window pops up with the 'swing' transition showing a larger image and/or more info. There should be no difference in transitions, overlays, etc between the portfolio entries and standalone images, which is why I'm thinking I should use the same script.

FancyBox can display iFrames, so that's one option. Seems a little messy though.

Also, I've been working on converting my existing HTML and CSS into a WordPress theme so I can use WordPress as a CMS. So another thing I need is a method to easily upload portfolio entries to the portfolio page using WordPress. Right now, the portfolio page is entirely static, and I'm editing the HTML directly, creating each portfolio entry with an <a> tag with the "fancybox" class. Functional, but if I'm going to implement the idea I mentioned above, I'd like to have a much cleaner and easier way to add new portfolio entries. Ideally, I'd like to make a post to a "portfolio" category with a title and description, and then attach several different images of the project to the post. Then, after I post it, I'd like it to automatically appear on the portfolio page. Is something like this doable?

Right now each entry has its own folder in portfolio/images. Each entry's folder has a full.jpg and a thumb.jpg. To have multiple images in each entry, I'd probably like all the images to be stored in this folder for the sake of organization.

Again, I'm just starting to learn WordPress, so I'm not gonna be able to do something like this without some help.

Also, I apologize if none of that made any sense; I'm just blurting out ideas
 

leroy30

New Member
Good job on the style of your website!

Have a look into url rewriting. index.php everywhere isn't very user-friendly :)

Also when you hover the mouse over the menu if you put it in just the right spot on the edge of the menu item then it jumps like mad all over the place. I suspect it is because you have a hover effect thats physically moving the menu item up and so the mouse is no longer hovered. When you hover the mouse add some extra bottom padding so the bottom edge of the menu item always stays the same.

Look forward to seeing progress on your portfolio.
 

che09

New Member
Using a larger font makes the justification of the text have huge gaps in it, but I'll see what I can do.

First, I would say that I like your site. I also believe on what you said about using large font makes the justification of the text. It is good to justify by making it usually larger than the others. Especially in the part of 'about ME' where readers get the time to know you better! ;)
 

anna

New Member
Great job on the site! I like the style of your work, as well.

Overall, I think your site looks rad. I like the idea of the box with a few thumbnails and a longer description, BUT, I like how your portfolio is now, because the images are large enough to really see the scope of your work. I don't think your images necessarily need a long description; I was able to get an idea from the sentence you used on each image. And with the example you posted, I don't like how you can't see the images bigger than what's in the box. Does that make sense?

Your social media buttons at the bottom have a weird hover effect the first time my mouse rolls over them- they disappear. They work just fine every time after the first roll over.

The portfolio caption background image transparency works well for every image but the David Gray tour poster. The caption gets lost in front of the text on the tour poster itself; keep that in mind as you add captions for new portfolio pieces.

Other than that, as I said before, great job! Now get busy so we can see the updates.
 

Spritanium

New Member
Thank you!

I'm starting to think the portfolio layout is fine the way it is; it might be just simple enough to work. If I wanted to include more information about a project, I suppose I could just make a blog post with a "making of" sort of thing, then link to it in the description.

I think that's happening with the icons because the "hover" image isn't being loaded until you actually hover over it.

There are a few other title formats included in FancyBox; I'm pretty sure the others are 'inside' and 'outside'. I'll play around with these and see if they work better.

Thanks again for the reply---it's stuff like this that makes me want to keep at it.
 

shovenose

Banned
I like it... but find a different font for the navigation menu. FontSquirrel.com, for example, has a large selection of fonts you can use for free.
FancyBox is awesome like usual :D
 

Spritanium

New Member
So I decided to implement the more detailed description thing after all.

http://keithpickering.zxq.net/portfolio/index.php Click the first image to see what I mean.

The problem is that I don't know how to make it so I can upload a directory for each project, and have it automatically added. I don't know much php.

What I have right now is a projects directory, then under that I have a mh_s2_dvd directory with a file called variables.php. It has variables for the title, client, and description. What I want to do is have an images directory inside each project's directory, and have the thumbnail and slideshow images added automatically from that.
 

Spritanium

New Member
http://keithpickering.zxq.net/portfolio/info.php

Here is the info.php page.

Then I just have this on index.php:

<a class="fancybox fancybox.ajax" href="info.php"><img src="(wherever the thumbnail is)" /></a>

Really simple.

The not-so-simple part is having different variables from different folders called to info.php. Because I don't want a different version of info.php for every new gallery item---too much work, and pretty messy.

Ideally I'd like to have something like info.php?id=mh_s2_dvd

Then it would automatically take all the variables and images from the directory with that name.

I really have no idea what I'm talking about though.
 

Spritanium

New Member
Oh man, I figured it out. I love php.

http://keithpickering.zxq.net/portfolio/index.php

Now all I have to do is upload a directory with the project name, description, and images, and the thumbnail and slideshow popup are created automatically.

Note that I just implemented this, so a majority of the entries have only one image that's stretched down. This will be fixed. I also need to figure out how to make the fancybox window smaller.
 
Top