Portfolio Site too Gimmicky?

[rrwebdesign]

I’ve been working with jQuery and might have gotten carried away.

I converted my simple WordPress portfolio site to this:

[My Site…](http://ronrichardsonwebdesign.com)

I’m concerned that this may not present a professional site but a gimmicky site.

Any thoughts would be welcomed. Thanks in advance!

[lurekn]

I like the way that it works, although I think it detracts from the purpose of the site.

If I was looking to hire someone for web design, I think people might get lost with the presentation.

I am working on redesigning my site also to display on the home page a more thorough rundown of what I do and what I can offer. Your site does look nice, it just requires I click around to find out what you do.

Even if I didnt intend on finding you, and just happened across your page, I may not stick around to long because it doesnt present me with an idea that this is a site for a web designer, from the get – and I think the first impression is huge in our world.

my 2 cents.

[CoryB]

I like the effect, Maybe tone it down a bit. I would focus on making your navigation very easy to find ( sub nav on one of the pages could be on the main nav maybe? ) , the navigation is kind of jumpy if you have a small res monitor ( laptop it jumps down every click ) I do like the bounce effect, pretty cool.

[JohnMotylJr]

@rrwebdesign First off, i think what you did with the gears is pretty cool, would i do that, no, but i think it looks nice. Second, i would recommend getting rid of your mailto: link and having a contact form that sends directly to you.

The only other thing i would add is that your site has a very predominant color scheme with sharp edges. As far as gimmicky, not so much. I’ve always been told that subtly is the best so maybe shorten your animations a little or your beizer curves so its not so crazy. Good luck man!

[CrocoDillon]

He has a contact form, it’s just hard to find (hint)

Also, you broke the back button :( And I don’t like the cut off image when going to ‘about’. But overall it looks cool!

[howlermiller]

Honestly Ron, it does feel awfully gimmicky to me. I hate to tell you that, after the time you put into it, but you asked for help, so I’ll try to give it.

It doesn’t really showcase web design to me. I don’t understand what the rusty gears have to do with your work, to me it seems more like a website for an antique-car restorer. And the background looks like dragon scales, which is just weird.

The screenshots I see in your portfolio look pretty good, but surrounded by that harsh orangy-red they don’t look so great. And they don’t stick out, which they should, since they *are* what you’re selling.

[rrwebdesign]

Thanks for the inputs – this is a great forum!

howlermiller: the screen shots are clickable and bring up a lightbox

CrocoDillon: yep, no back button. It’s all one page with lots of z-indexed div overlays

JohnMotylJr: agree on the animations, they can be smoothed some.

lurekn: I created the gears moving at load time to create some interest and curiousity as to what’s behind all these gears. I had another designer tell me that he really wanted to see what was behind all the doors. I added drop down tooltips to the main navigation.

Thanks again!

Ron

[budha210]

Not so much gimmicky as too busy. It has too much action for a portfolio site. The copy is also hard to read. It needs some hierarchy and clear distinction.

Also noticed the anchor tags push the nav up and out of view. Will get annoying if I have to keep scrolling up to see your nav. :-/

It def has a unique style. Make that work for you. Any plans to make it flexy?

Gimmicky or not you learned some good stuff. Thats pretty darn valuable in itself :-)

[rrwebdesign]

budha210: my plans was to make it totally flexy but then I found how hard it was just to get the view window centered and to make each div overlay slide under the left side. I’ve testing on iPads and seems to work ok as is and not too bad on an iPhone. If you don’t mind, what device/browser did you see problems with navigation being pushed up?

[budha210]

macbook/chrome 25

[rpotterjr]

Well, it seems that most of the advice that I could give you has already been said. However, I do still have some things to add. I love giving critiques just as much as I love receiving them, and no that’s not sarcasm. lol Without helpful and constructive criticism, we would never evolve into professional designers.

So, now I will give you my assessment and hopefully you take in everything that everyone has to say, whether you view it as good or bad, the intent is not to diminish your work, it is to help you improve it. So with that said, here we go…

Home Page:

I like the creative thinking behind the “What’s behind the gears?” The fact that they animate upon loading the page gives a sense that something is there, but I need to uncover the mystery.

However, I am not too keen on the idea of the font choice. I agree with Melindrea, the Trebuchet MS is way too 90s! Aside from the choice of font, the text itself is not uniform, meaning that I believe that it would look better properly aligned to the left and possibly something like:

Line 1: Ron, Line 2: Richardson, Line 3: Website Design

No need for a fourth line.

Also, I would suggest the use of web-fonts, instead of using the text in the graphic for SEO purposes primarily.

Again, I have to agree with Melindrea, the fact that the gears animate at the beginning give me the impression that I can actually click on them (navigate) through the site’s content to see what in fact is behind the red curtain, or in this case the gears.

Design Page:

“Besides the content, other areas to consider:”? Okay, I just want to clarify… Images, Typography, Information, and Calls-To-Action are the content! Also, I don’t mean to poke fun or anything or seem belittling, but a “Call-to-Action” is something like a home feature banner, a sidebar banner, a category heading image, or something displaying a subject matter with a High Level of Importance, something “calling-out” for the end-user to focus their attention on something specific. A newsletter or contact form are features within a website.

Portfolio Page:

I see thumbnails, but not information, well, until I hover over each one. This is where we can see the caption for each thumbnail, which gives some insight to what they are, but simply stating “Custom Website”, to me, is very generic. I want to see more information as a potential consumer. Telling me that these sites are custom means a great deal to me as a designer, but means nearly nothing to the average potential consumer/end-user. People are going to continue seeking designers with the expectation that they are building custom websites. People who use templates, don’t typically look for a designer, unless they bought a template and need a designer to complete it with their content.

Also, the bottom left thumbnail tells me that the website was built with Dreamweaver. As a potential consumer/end-user, I don’t need to know what tools you used to create the website. As a designer, I don’t need to know what tool you used either. Dreamweaver is a WYSIWYG Editor. No matter if you code in Notepad or Dreamweaver it all comes down to HTML, CSS, jQuery, etc…

Each thumbnail should be accompanied by solid necessary information such as:

1. Client/Company Name

2. Month/Year Completed and Launched

3. Types of coding used: HTML, CSS, jQuery, Flash, XML, etc…

4. A brief description of the project (optional).

This information is best, in this case displayed on a separate page, once the thumbnail is clicked on, rather than a light-box.

I like the full list because it shows me that there is more to your portfolio, but it took me a bit to notice that “View Full List” was there. It blends in too much with the background. I’m not saying that no one will see it, but some people may actually overlook it. It would be best to either create a noticeable button, or even better use some pagination.

About Page:

I am going to now dive into your content a bit…

“I am skilled in WordPress, Gravity Forms, WPMU, HTML, CSS, PHP, jQuery, and with a toolbox consisting of Adobe CS5 with Photoshop, Dreamweaver, inDesign, and Illustrator. I run a local WAMP server and provide internet hosting services. I work mainly in WordPress but have experience with pure HTML, some Joomla and Dolphin, and these combined experiences makes for very flexible and robust website designs.”

Gravity Forms, is really irrelevant to the end-user. It’s nice for me to know as a designer, but an end-user that has seen forms on websites, in today’s modern society, expect that forms are something constructed by the designer/developer and knowing any different doesn’t really need to be displayed. However, WPMU, I know what this is as does many designers/developers out there, but the end-user typically does not. WordPress Multiple User, should be used instead. With that said, it would be better to say WordPress and WordPress MU. I personally feel that stating what type of server you are running is irrelevant as well, rather than saying WAMP, say something like Windows Based Server.

Another thing I would like to point out is that stating “Also, ask me about custom Google Analytics tracking and reporting…” on the about page is more of a service thing.

In conclusion with the ‘About Page’. As the end user I would like to know more about the Website Designer, rather than the services you offer. This would be better suited for a ‘Services’ page, which I would show all the services that you offer and I would do so with some brief detail to what each service entails.

[rpotterjr]

Now, I would like to get to the real nuts and guts of the website, the layout, color scheme, etc…

Layout & Color Scheme

I understand your reason for having the captions on hover of each navigational item, but please, for your sake, remove the captions.

When first visiting your website, I am stunned to see no clear “up-front” way of contacting you, other than the email address provided at the bottom, but in today’s modern society it is typically expected to see a ‘Contact’ link in the main navigation or somewhere noticeable on the page, which in turn takes me to a contact form. This is something that needs some care and attention, not just for new visitors, but especially returning visitors.

The “vision :: clarity :: execution” wording on the top right is confusing!!! Since it resembles the navigation to the left, it leads me to think that it is meant to navigate somewhere on the website. Since it doesn’t I almost think that it is broken. Of Coarse, I know what it is as a designer, but your website is not meant to attract designers, rather potential consumers.

Why the 10 pixel tan bar at the top? I don’t really see a reason for this. I would personally ditch that from the background graphic. Also the “Snake Skin” pattern in the background image should be an offset color from the rusty gears. It’s kind of hard on the eyes, honestly. Finally, for the background image, why is there a black footing on the page? This is where I would expect some sort of content, even if it were just a footer displaying the copyright and email link you have, which again I would not use, instead I would suggest a contact form that is easily accessible. Maybe the Sate and Country could go in the footer (black footing) as well.

When I navigate to your ‘Design’ page I see a secondary navigation?? That’s a good idea, since your website has static restrains on the height of the content area. However, this is where I finally see the contact form. That really does not belong in there and you would be a lot better off utilizing it in the way as I suggested earlier on.

When I am on your ‘Portfolio’ page and I click the thumbnails, the thumbnail caption remains as displayed, as it also remains stuck in limbo on the screen once I clock the light-box image. You may want to look into this.

Your Facebook and Twitter icons that are positioned as ‘fixed’ or ‘absolute’ need to be possible placed into the footer as well rather than where they are. The reason I say this is because when the window is re-sized it overlaps your content. Not good if someone is trying to read something that they can not scroll due to the static width and height of the website content.

When I am on the ‘About’ page I see this small text in the top right corner that says ‘About This Site’, when I hover over this it displays a caption stating “This site makes extensive use of jQuery animations and Z-indexing.”. This may be relevant to you, but most of your potential consumers/ end-users are not going to have a clue to as of what you are talking about.

The last thing I would suggest is going back through your website and proof-reading, because there are a number of spelling errors.

Finally, I will conclude with this. I like the idea of the gears as I said before. It does have that unique feature to it. I don’t know if I would have went with rusty gears, but gears are cool. The color scheme doesn’t bother me so much, but it will many of your end-users. I do appreciate the level of work you put into the jQuery on the site. A few other pointers I would suggest is to clean up your source code before moving any further, so that you can modify things easier, really try to open yourself up to not just mine, but all of our suggestions, and try to think a little more from an end-user perspective rather than as a designer…

[rrwebdesign]

Wow! These comments are amazing. Thank you all for taking the time to write!

My biggest take-a-way… Think in terms of the prospective client and imagine what they’re thinking when visiting my site. To get out of the code and look at the overall impression…

Thanks!

[Paulie_D]

>The first thing I did upon visiting the site was to try and click the gears in hope of navigating through them.

Me too!

>”thru” for through

Damned Yankees! When will they learn the Queen’s English as she is spoke. :)

[Paulie_D]

>The copyright information and your email appear inside the footer, but on desktop computers, this information appears above it and not inside it (absolute/fixed positioning?)

Actually, they are inside the footer…it’s just that the footer isn’t where you think it is..

The layout is a bit odd…

I mean what the heck is this:

`

`

Just chuck a centered wrapper in there if that’s what’s needed

[Author]

Posts