Thoughts on design and copy

[CrocoDillon]

Now you’re making my head hurt! I can’t redesign the whole thing, I need to get it finished. I’ll keep what you said in mind and appreciate any feedback :)

I can add some interactivity though. Just need to figure out where it’s appropriate and not overdone. There will be more opportunities to do so on larger pages.

@ChrisP, thanks :) I’ll work on the interactivity.

[Jeager]

Didn’t read through all the comments but heres my input as a designer and dev:

You are going for a flat look, so why the drop shadows? If you want them, just use them as hover states. But the first rule of flat design is designing flat. Shadows are adding dimension, so pick one or the other.

The logo is -alright- but could use kerning help. I honestly don’t really like it, but try to make a monogram or icon to add something to it. I can in vision a circle with a croc head in it or something. I’d suggest looking more professional though and use your real name.

The header is weird. You have the footer expanding the entire width, i’d suggest doing the same with the header.

Hover states with the nav are fine. But for the flat look, I’d suggest removing the shadows again. Keep them moving and changing colors though. Also maybe have the typeface be the same green on hover and current page.

Footer stitched look is a bit out of date imo. Also the class on the html element has a border-bottom. Remove it. It just looks like a mistake. Or make it larger.

Edit: In chrome when I hover over one of the three hover state icon areas, the logo jitters for the duration of the transition.

[chrisburton]

@Jeager makes some really great points. Especially on the kerning issue. Unfortunately, this isn’t one you can fix via negative letter-spacing. And I would honestly not waste time using a JS script to force it.

Edit: Also, the line-height on the paragraph text under the 3 tech sections (Modern, Compatible, Mobile) is a bit too much.

Click to see large version

Above, I removed the gray backgrounds on the site. I think it significantly improves it overall. In fact, this sort of makes me want to procrastinate on my own and help you with yours. Ha. But to make it work, you still need to do some work.

[Alen]

I like @chrisburton’s approach, I would make the menu on the same line, as the logo menu feels out of place right above the graphic. You might also consider re-doing the mobile,tablet and desktop graphic and replacing them with more realistic representation. Now it just draws too much attention but visually it’s nothing polished.

[CrocoDillon]

@JoshWhite, I’ve started thinking about v2 before I had started on v1 ;)

As for javascript voodoo for the middle area, I’m thinking of an JS animated slider, where each ‘slide’ is related to the sections below and each animation ends in where the next starts… to get some kind of looping animation. I’m not sure if I can pull that off but it would be a nice challenge.

I’ll change the word Gravatar, thank you for your comments!

@Jeager, thanks! I have seen semiflat designs before so thought that was okay. I can completely change the logo, that’s not a problem. Can make it an image too, and fix kerning in PS. I do like the idea of an icon but not sure what fits. Can’t change the name, it’s registered like this and I like it :P I knew from the start it would look less professional though.

Can make some changes to header and footer and remove html bottom border, if I don’t go with the changes Chris proposed.

I’m aware of the pixelation problems when hovering the 3 sections… I’m not sure how to fix that. It happens during the transition on the transform I use to make the icon a background. Thanks for pointing that out though :)

@chrisburton, what’s your opinion on having a ‘vertical rhythm’? A lot of the choices on line-heights, and top and bottom paddings, borders and margins, came from having a vertical rhythm of 1.5em. That said I can reduce the line-height of the 3 sections, breaking the rhythm. Thanks for the screenshot with backgrounds removed. I like it, but there is no clear separation of the footer anymore. With a fat footer, won’t I need separation of content and footer? I liked my outdated stitches for that.

Anyway, I wouldn’t mind more help from you Chris :)

@AlenAbdula, they are just enlarged icons from the icomoon :P I’m working on polished versions, but I like them to be flat instead of too realistic. I don’t want another Apple product lineup, you can find plenty of those already.

[ajnoguerra]

Cool! You did a great job! :)

[Alen]

@CrocoDillon, as you build these graphics remember that your goal is to make sure potential client can envision his/her website in these devices. So if your target market is photographers/designers you might think about using apple looking products… it all depends. The fun of it is you get to make that decision :) .

[CrocoDillon]

@ajnoguerra, thanks :)

@AlenAbdula, that’s a fair point, something to think about, thanks!

[CarraraWebsiteSolutions]

Nice and clean style website

[CodeGraphics]

Cool. The logo looks unprofessional. I can do a professional logo for u.

[Paulie_D]

>The logo looks unprofessional. I can do a professional logo for u.

Wow….just wow!

[pixelgrid]

spamming has gone to another level around here

[Alen]

Can we all stay on topic please. @CrocoDillon, has helped so many on these forums lets be little bit more respectful.

[CrocoDillon]

@AlenAbdula, thank you! :)

@mwbcomputers, thanks!

I’ll post back when I have updates, working on it!

[CodeGraphics]

Maybe a logo like [this](https://www.dropbox.com/s/ba5auxixv9zg6b9/logo.jpg “”).

[Author]

Posts