Thoughts on design and copy
# April 15, 2013 at 6:44 am
*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 :PAnonymous# April 15, 2013 at 7:12 am
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.# April 15, 2013 at 8:03 am
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# April 15, 2013 at 3:17 pm
A slightly darker background could work. maybe something like this #a7b2ba. and adding some text-shadow would make it more visible.# April 15, 2013 at 3:52 pm
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.# April 15, 2013 at 4:01 pm
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# April 15, 2013 at 6:54 pm
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](http://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! :)# April 16, 2013 at 7:38 am
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.# April 16, 2013 at 10:18 am
This reply has been reported for inappropriate content.
Did you design this site?
You say you are not a designer, but this is awesome, imo.
I love how the icons turn into background images. Very cool !
is this a pure html site, or a CMS? Just curious how you will be adding blog posts. Looking forward to reading your blog.
my only critique’ish opinion would be the Copyright info looks off. I am not personally a fan of alignment that has some left, and some center. I would probably keep the copyright aligned to the left. Also would probably lighten the font color or do a subtle change to make it distinct from the block of text above it.# April 16, 2013 at 11:26 am
You must be logged in to reply to this topic.