Hello all

Recently just re-designed and re-launched my design company. I added a few people to my team as well. Coding was done by josh.

Initial thoughts on the layout, JS effects and the rest of the pages.

Looks good, my only complaint is the extra space on the bottom of the home page, larger monitors, you have a lot of unused space. You may want to put something down there

Love it! The transition of portfolio projects is way too bright though. Each time it changes I get a bright white screen flash in my face. Also only thing I’d add is in the upper right hand corner of the header I’d add your contact info. So it’s on every single page for more call to action..

Also is the site flexible for all browser sizes? It’s pretty big.

Should find a way to utilize all that extra space on the initial load. Also, I hate that font for the logo.

Other than that I like. All the actions are quick too.

Komplex — what OS and browser are you in? Screen size?

First time I’m hearing of the white flash. As for the extra space on the homepage, I may add in a blog feed.

Works fine on my screen size, I’m just thinking about how it would show up on other screens.. Looks great on mine, just wondering how it would fit on a smaller screen.. For example: , there’s really not much room to shrink that down a bit smaller.. Does the image resize and adjust to the browser? Nevermind, I see it’s designed to perfectly fit for 1152x, I’m accustomed to designing for 1024x.

Also the white flash.. It’s more of the transition of going from a dark image to the white background then back to a dark image, it makes a photo like flash.. Cloud to Lotus is a good example, it’s just a bright transition.

Its supposed to be a fade, does the image fade in?

^it sorta blinks like a flash

I think you should have the ‘masswerks’ logo ourtside of the white area (above) and abit larger to give it more prominence. At the moment it is sorta hidden IMO…this could probably bump the whole thing down to eliminate some dead space below

Content Width
Main content window is too wide, reaches well beyond 1024 resolutions. Yes, I realize people are getting larger monitors, but a good chunk are still stuck on 1024. Make sure you’re staying around 980px max, 990px is pushing it.

Cliffs: Your breaking the "rules" and exceeding 980px.

Your alignment is jumping around like crazy on the main header. The centered logo is almost lost because it’s centered. You have a larger body of copy (and font size) which is over-powering the logo above it. Yes, I know it’s there, but my brain wants to ignore it. Have you thought about moving the logo somewhere else?

Second, regarding alignment, the action buttons appear… off. Now that you’ve stated what your company is about, you shift over to left alignments. However, after the left shift you go right back to centered, why? My brain goes… Centered logo -> Centered statement -> Ignore left aligned text because it’s not centered -> Centered Buttons

Cliffs: There’s too much hopping around with the alignments and the logo is lost. Quick ideas to play with…

You already have a bit of animation with fades in your site, why not take it a step further? Force the initial content to the center of the screen, once a button is clicked animate the header content upwards and do a quick fade in of the new content. This would help with the negative space issue the others are talking about and add a "cool" factor to your site. You’re already using jQuery, just add a few lines of codes.

Cliffs: Way too much negative space, center, animate up, fade-in content.

This is pretty annoying… I go to view your work, I scroll down the page a little bit to see more then proceed to click another piece of work. Instantly, the browser shoots back up to the top of the page. No transition and I’m at the top, why? I’m viewing the work, I’m not wanting to go back to the header. If you’re going to force the window back up, at least force it up to the main content window at the most (aka the portfolio content for now). And since you’re already using an animation transition with the ribbon, quickly and smoothly scroll the window back up. Again, you’re already using jQuery, just a couple added lines of JS.

Cliffs: Portfolio snaps when viewing more work, animate that shit.

Your main header has a 1px width divider for your 4 main content areas. But on the Services page you go from a 2D-ish divider to a 3D-ish divider, it’s inconsistent and looks somewhat tacky (IMHO).

Your column padding is also inconsistent. Here’s a picture, because describing this would only hurt my brain more.

Please look at the padding between the headers… It’s a perfect 27px on both the left and right for each column (nice). Then your primary row for the services page just butchers it. Alignment, padding, etc.

Aside from the padding for that row in particular, I would like to see a larger line-height. Perhaps 22px? You may be thinking, "But Rebz, you said we need to stay consistent!" Well, when you’re dealing with larger bodies of text, line-height adjustments are usually needed for easier reading and reducing strain on the eyes.

5 columns now…? I… uh… were any other ideas/concepts developed or sought out before going with five columns? There’s got to be a better way of showing that information besides ditching the dividers and creating an extra column. Again, inconsistent.

Cliffs: Inconsistency throughout the page, alignment and padding are fucked. Five columns, really?

The spacing to the right of the ampersand is non-existent and too close to the following text.

.stylishAnd {
    font-family:"Adobe Caslon Pro";    font-style:italic;
    font-size:22px;
    position:relative;
    top:1px;
    left:-1px;
}

Remove the font-weight:bold; as it’s already inherited.

Much better.

Cliffs: You don’t need cliffs for this…

Just take a look at the Twitter feed and look at the padding.

The contact form appears fine at first, very self-explanatory, I type in my first name and tab to the next field… But WAIT! What happened to my first name? It disappeared… Well, no not really. It just reverted back to the default color of when information is not entered. You may see this as "no big deal" but it will make the user second-guess themselves. If they enter information, it needs to be prominent even after they have left that field.

Cliffs: Entered information needs to have a darker color.

Why in the hell is there a crap ton of padding at the bottom of the page? It creates extra scrolling.

Hope this helps out!

Thanks for the tips. I’ve edited some of them. For the portfolio stuff, can you tell me what browser and OS you’re on? So every time you click a new portfolio item the page jumps up?

Also where are you seeing a crap ton of padding at the bottom of the page?

Appreciate the in-depth help

Windows 7 and I checked your site in the following browsers:

IE7
IE8
iE9
Firefox 9
Chrome 16
Safari 5

The added padding "occurs" when jumping between "pages." It’s more noticeable in Firefox and IE than it is in Safari and Chrome (but it’s still there, just a little bit on the Services page). It looks to be an issue with your script for jumping between pages, perhaps something dealing with the height offset? I haven’t looked at your script yet.

Just start on the portfolio page, then go to the services page and scroll down. You should see a difference in padding between the end of the content and the bottom of the page.

Rushing out the door so I can’t throw images up at the moment.