Grow your CSS skills. Land your dream job.

Portfolio Site too Gimmicky?

  • # March 20, 2013 at 5:25 pm

    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!

    # March 20, 2013 at 9:12 pm

    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.

    # March 20, 2013 at 10:10 pm

    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.

    # March 20, 2013 at 10:11 pm

    @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!

    # March 20, 2013 at 10:14 pm

    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!

    # March 20, 2013 at 10:29 pm

    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.

    # March 20, 2013 at 10:54 pm

    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

    # March 20, 2013 at 11:00 pm

    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 :-)

    # March 20, 2013 at 11:09 pm

    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?

    # March 20, 2013 at 11:16 pm

    macbook/chrome 25

    # March 21, 2013 at 5:05 am

    I kind of like the feel of it (I’m a sucker for neat effects), but it’s very, very busy. It strained my eyes some with all the movement, which is a shame, and I’ll have to echo the concern about “what does gears have to do with webdesign?” Show what gears have to do with webdesign/your web design, and you’re a step further towards it not being too gimmicky.

    The title being visible when you’re hovering over the menu is neat, but it’s also a bit distracting. I ended up trying to mouse over it, figuring it was a submenu of sorts.

    I think that a few things might detract from the message in your “design” section, namely the following:

    - The images have some artefacts from compressing or something, making them look very blurry. Not a good thing when you’re mentioning images in what needs to be considered
    - I would also move away from Trebuchet MS. This is probably me being a snob, but that is a bit too… 90s ;)
    - Spellcheck! *assessment, *through
    - Rework some of the copy for a more natural flow in the language. For instance “What’s my starting point in building a site: Content, Content, Content.” would probably read better as either “What’s my starting point in building a site? Content, Content, Content!” (notice the rhetorical question followed by the answer), or “My starting point in building a site is always Content, Content, Content.”

    The gears should be clickable! =) If you have them, one should be able to also navigate using them, because the correlation between the menu and the gears is a bit unclear.

    So, after some jumbled thoughts: Neat idea, needs to be polished to sell it in properly, I think. Gears could be neat, it just needs to clearer tie into who you/your company is. First impressions are most important, after all. Good luck!

    # March 21, 2013 at 6:58 am

    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.

    # March 21, 2013 at 6:58 am

    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…

    # March 21, 2013 at 11:03 am

    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!

    # March 21, 2013 at 12:11 pm

    The first thing I did upon visiting the site was to try and click the gears in hope of navigating through them. The top and bottom bars are unnecessary, I’d of thought your footer content would go here.

    In all honesty, I’m not much of one to come to when it comes directly down to criticism, but I’ll try!

    UI Design in this age is becoming exceedingly demanding yet it is also becoming a lot “less” if you like. Everyone has seen the whole Metro UI thing going on and believe me, as much as many people hate it, just as many people adapted to it in their websites and general design structures. Being straight to the point is hard to come by, as many designers want to dive in and go crazy. But development on the other hand… It’s always good practice to design and develop with the visitors/clients/users in mind. You need to think ahead of how your users will interact with your site. Do this by planning your designs and development processes before you actually start.

    For example:

    Will my users be able to easily navigate through the content?

    Is my design “overdone” and not getting my actual message across?

    Is my content first priority or is the design?

    What would make people return to my site?

    As a web designer, am I displaying the best of my design skills or coding skills, maybe both?

    Interactive or content straight up?

    If you go to Awwwards.com, you’ll soon see why heavy interactivity yet beautiful design interfaces go so well. I like the whole “cog” idea, but I think the color and layout in general is hard on the eyes and restricted, especially if you wanted to add more content in the future. The black bar at the bottom with the top orange border doesn’t quite fit with your current design too.

    Don’t forget about how concise the mobile and tablet market is today. Pretty dominating at the moment to provide web content. It would be good for your clients to be able to see that you care about cross-platform technology, should they ever visit your site with a mobile device. Though responsive design isn’t a need, it is at its peak of popularity. Upon visiting your site on an iPhone and Android, the content was awfully small and black bar at the bottom took up at least 1/5th of the screen space vertically. 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?).

    Either way, I like the whole idea. It’s a pretty nifty feature you don’t see a lot. But, the color choice didn’t do it for me. It felt dark and crowded. The dropdowns on the menu weren’t really needed as I thought these were additional navigation levels, whereas in fact they were like “tooltips”. Plus, proof-reading your site might be a good idea before publishing it live. I noticed spelling mistakes and grammar errors frequently such as “thru” for through and “lets” for let’s. Not being picky, but just so you know, your online identity and how you preserve yourself online should be treated like a profession. Common mistakes could well turn the user away. Little things like this just need putting in to perspective and you’ll be fine.

    I know I haven’t gone in to great detail (much, lol!), but hopefully you get a grasp for your next project and ideas!

    Regards,
    James

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".