Thoughts on design and copy

[CrocoDillon]

http://www.crocodillon.com/

*primary navigation doesn’t work yet*

I’ve finally uploaded the home page of my website last night, and would be interested in your opinions. Little bit of background, I will be blogging about anything development related I’m interested in (html, css, js, jQuery, php, zend framework 2, but also game development related etc.), will be posting about snippets, plugins, modules, templates, games etc. I’ve created and make myself available for hire as freelancer. That said selling myself as developer isn’t the primary goal of the website, but it is a major one. I do intend to make my living out of this (until now I have been making money but not enough to pay the bills).

As I’m not really a designer, a copywriter nor a typographist I would like your opinion about the design, the copy and the type used. In particular I’m not sure if I’m too happy about the main heading / logo, just colorized text doesn’t seem like good branding to me. And not sure if I should leave the footer dashed bottom border in there.

A minor issue I’m having is when you hover over one of the 3 sections, while the icon expands the main heading and the other icons get pixelated. Any way to prevent that? Wufoo’s home page is using the same effect without any problems.

I’m aware that I need to fix the lack of MQ support in IE < 9 :P

[Anonymous]

I think the logo looks pretty good, especially with those colors. It’s overall a good and simple design. I think that every freelancer must include a portfolio of their past work and past clients. Also the dashed borders gives it at good look, but try making it smaller and see how that looks. You should also try making the green area when hovering over the nav buttons darker but relating to the header background, Like #3f474f it gives it a better 3d effect if that’s what your trying to achieve. I would also recommend to give the site a background. white makes sites look plain and antique.

[CrocoDillon]

Thanks @Jarolin :) Portfolio is coming, just not on the home page. I want the home page to be a quick load and read and put any additional features on the webdesign page.

Smaller border actually does look pretty good (2+ px), I have it 0.5em because I have this in a lot of places (hover in the nav and borders). Will think about something like 2px or 4px.

Yes, the header should have some 3d effect because otherwise everything would be flat :) I like the the dark grey instead of the green, but I like the green too. Any other opinions on this specific?

I’ve tried some subtle patterns as background but nothing I tried really went with the simplicity and flatness of the rest of the design. And I don’t want a boxed layout so the text should be well readable on the background too. I’m open to suggestions but I don’t think it looks that antique :P Maybe not a pattern but some smooth subtle gradients?

[Anonymous]

A slightly darker background could work. maybe something like this #a7b2ba. and adding some text-shadow would make it more visible.

[theacefes]

I like it :) Love the subtle animations and transitions especially. Very clean. Also, cool croc story. :)

[croydon86]

Nice site, a few suggestions…

1) I see you are using a 3-column grid, maybe bring the header into this grid, reducing the logo and bring the nav in a little? The logo is quite large in my opinion and detracts from the copy.

2) I would make the width of the header inline with the grid (I see why you have done it the way you have, so the text in the header lines up) or make the header full-width across the screen, it doesn’t seem to sit well where it is currently. I would also have it flush to the top of the screen

> I’m not sure if I’m too happy about the main heading / logo, just colorized text doesn’t seem like good branding to me.

Is this a logo you designed while creating the site, or did the logo already exist? If the former, branding should always be done prior to building a site. Anything can be good branding, as long as it is followed through, remains consistent and if it can be justified. (Why that font? Colour?)

3) The main copy on the left gets lost due to the logo and spacing, I would introduce some more whitespace around this so your eyes see this without clutter. Maybe introduce a call-to-action button for a portfolio page, contact or something. What do you want users to do after reading this message?

4) There seems to be a disconnect between the header and footer, completely different styling. (dashed border, flat vs drop shadow) – Try and establish some design patterns and stick to those throughout the site.

I think the white background is fine. Main thing is consistency and white-space.

[croydon86]

Also I like the effect on the nav buttons, but from a usability perspective, it feels really weird the buttons being raised on hover, as opposed to pressed down. This is a quite a detailed transition, which I feel deserves a push state, and not sure what you would do here for a push state. I would personally have it light up on hover, and pushed down when pressed, same effect you have just reversed on click so you still see the green.

You could also introduce a double border on each side of the buttons (light grey/dark grey) to give the illusion of indented buttons, so when pressed, the user will expect the interaction they get. Just a thought

[pixelgrid]

I like the clean design.Nice touch with the scaling icons and the menu hover state

[CrocoDillon]

Thanks all for the great suggestions so far, I’m gonna work on the site tomorrow because it’s already past midnight here.

@Jarolin, I might add text shadow on the main copy but I don’t want it everywhere. I think it looks awesome but easily overdone.

@theacefes, thanks :) If anyone ever asks himself where my name comes from ( [like here](https://css-tricks.com/forums/discussion/comment/98052/#Comment_98052) ), it’s influenced by the crocodile hunter and crocodile dundee too :P

@croydon86, thanks :)

1) I can make the logo a bit smaller to make it appear in a 3rd. About the nav do you mean remove the extra top padding?

2) Not sure what you mean. The main header? Than it’s the same as suggestion 1. Not sure what you mean by flushing it to the top either, sorry.

I’m not a designer and I can’t justify anything to be honest. I just looked trough fonts till I found one that looked like something I had in mind, and played with the colors in CSS till I liked it. The green could be considered ‘croc’ like (even though most are actually brown), and the blue is just a color I like a lot. I don’t have any branding besides what you see on that page, and I’m very flexible at this point if changes are needed. I would love to get a designer to work with, but that takes either time (or rather, friends that can design and have time), or money.

3) I can center align that copy vertically with the image, would that be enough whitespace? I can maybe center or right align the text if that would be an improvement too. I like the call-to-action button, I will add it when I have the contact page ready and maybe add another when I have the webdesign page ready, with more info, pricing estimates, portfolio etc. I do want the users to keep reading or to contact me :)

4) I’ve tried the border (at 4px wide) in the header but it didn’t look that good. To be honest I see your point but I’m lost at how to fix it. I like the dashed border because it separates content from the fat footer, and shadow on the footer doesn’t look good because it’s attached to the sides and bottom of the window. I did bring the same colors as used in the header to the footer though. Any specific suggestions to improve connectivity here?

I’ll look at the nav tomorrow, and see what I come up with. Definitely needs a push state. By the way I have an active state too for the current page, it’s just the green border, but on top. I’ll show that tomorrow.

@srig99, I could probably center the nav on small screens, if that’s what you mean :)

@pixelgrid, thanks! :)

[CrocoDillon]

Okay made some of the proposed changes :) Thanks for the feedback so far!

Made the main heading smaller to appear inside the ‘grid’ and less distracting. Since I’m using a real font and not an image I’ve introduced 9 MQs to do this (2px font-size increments)… maybe I should be less stubborn and go with an image? It would fix the pixelating issues, saves a 40kB web font download and 9 MQs and easier to change should I ever go with a more well-thought logo. On the other hand I don’t like images for text.

Centered the nav for <30em viewports, I don't really like it. Maybe I'll go with a collapsing menu for small viewports instead. I'll make other changes to the nav when I get some more answers as it's complex and I'm not really sure where to go with it.

Tried shadow on the main copy on the left, didn’t like it. But I did vertical align it to the middle of the image next to it.

Footer border 8px -> 4px.

[jainteq]

Hi crocoDillon, hope your website is perfect now. Good luck :)

[CrocoDillon]

Hey @jainteq, thanks. You tell me if it’s perfect now ;)

[Alen]

@CrocoDillon

IMO, design is very “common”, for me there’s nothing unique or interesting about it. From the limited time I’ve been on this forum, I’ve noticed you’re quite good with JavaScript. I would suggest showcasing your strengths, so create minimal design with lots of interactivity.

[CrocoDillon]

@cwork, haha, thanks! I’ve made the site using Zend Framework 2, surely not the easiest way to get a site and blog up but I have my reasons. I need the experience (mainly in PHP but I like to learn ZF2 more too), I can make it exactly how I want it and I will upload the blog module to github when it’s finished to get the publicity (there is no blog module for ZF2 yet, it will be listed [here](http://modules.zendframework.com/) and [here](https://packagist.org/)). The copyright looks indeed off, I will take a look at it, thanks again!

@AlenAbdula, ouch! But thanks :P The thing is I need to impress potential clients, not (other) designers and developers. Designers are not that easy to impress.

You say minimal design with lots of interactivity. Does that mean you’d say the design is okay as it is now if I add more interactivity and JS awesomeness? Only thing I can think of right now is to make that static image some kind of parallax slider. I’ll try to think of more, as long as it’s subtle. I don’t want my website to be a circus ;)

[Alen]

@CrocoDillon, I’m genuinely giving feedback. I hate all the ego-stroking that happens on many forums. So, I try to tell it the way it is (or at least how I see it). I strongly suggest you focus on your strengths and slowly build up your design skills. Especially if you plan on getting paid for your work. When you are trying to book a client you can’t sit there and be uncomfortable about your design skills, but at the same time try to convince the client to hand over thousands of dollars. You need to communicate your value to the client, and your values are your strengths not weaknesses. Hope that helps.

When I say minimal design, this comes to mind:

http://www.eduardonunes.me

http://studionudge.com/

http://www.sennep.com

[Author]

Posts