Website Design Advice

[Remeste]

Hey guys,

This is my first proper website as a freelancer, which will be the first attached to my portfolio. I have done others in the past for friends/family though. I’m looking to become a full-time web designer/developer (whether it be as a freelancer or in a studio) eventually.

I’m looking for ways i can add to the design of the website. Whether it be textures, shadows, typography etc. At the moment i get the feeling it’s too basic? I like to visit sites like awwwards.com to gain inspiration but i never seem to be able to use it. My sites are always quite basic.

When it comes down to it i’d like to become more of a designer than a developer, so it’s a little bit of a problem if my design are all basic, no? I understand there are probably a few other issues with the site which i’ll be working on, but right now i’m looking for some creative advice.

You can visit the site here.

Thanks!

[Bob]

It looks nice! Easy to navigate, nice colors.
The only thing that confused me a little bit is that the actual content is so far down.. The header is quite big, but I guess for the front page that’s no problem – on the other pages though, the big header and the 4 ‘blocks’ (resources, awards, events and help) are causing the content to be far down. At first I thought I was looking at the front page again, because it has the same lay out. Maybe you can keep the header and blocks on the front page but remove them or make them smaller on the other pages, so the content moves up. Other than that, nice job

[Remeste]

@Bob – Thanks for the feedback. Yeah i agree that the content is too far down. I’ll look at removing the blocks from the inner pages. Working on a 27″ is a bit of a problem when it comes to these things!

@Paulie_D – Good point! I’m not really sure why i did it this way. I guess i had seen it done on a few other sites and gave it a go. I might try highlighting the area when the anchor is clicked. If it doesn’t work out though i’ll give it it’s own page.

[Johann]

maybe make those boxes just show their headers, and when hovered over, slightly change color and expand to reveal the full text? I’d also simply make the whole box a link, but I guess others or you might disagree :P I just don’t like “click here” links personally ^^

a must (IMHO) is to mark the box of the page you’re currently on in some way, like you do in the top header…. of course, if you could find a stylish way to get rid of that duplication, that would be a bonus. make the header nav blocks colorful and bigger, expand with the full text – done? at least in my mind, that might work :)

the text in the yellow box is a tiny bit hard to read (on my monitor), a bit more contrast would help. with the blue box too, but to a lesser degree.

maybe the light blue from the header could fade over into the white? or the opposite, a little border/shadow.. dunno if that would improve anything, just something that occured to me. maybe that white background could use some very(!) light texture to it, too.

and consider using web fonts instead of images for headers! even using images instead of CSS backgrounds (and giving those images alt text) would be better, because with a website as this accessibility should be first and foremost. if the design is light, that’s okay… and yours is light in a very stylish way, but it’s not very nice to search engines or screen readers with those headers, so that would be my one real complaint.

well, and maybe that many pages requires a bit much scrolling… I think it might still work with a bit less padding etc. the font could be a tiny bit bigger, too, with less line height? maybe, it’s hard to tell without fiddling with it, so take all of this as just my 2 cents and good luck :)

[Remeste]

@Johann – Thanks for all those tips. I like the idea about expanding the boxes on hover. Good point about the web-fonts also, i really need to focus more on the SEO side of things. Looks like i’ve got some updating to do.

[chrisburton]

@attilahajzer – Use it as a background and position it to the right.

[Johnnyb]

@Remeste – I think the site looks really great, my only critique would be that the top of each page is so tall that I can hardly see the page content when I view each page. I click a new page and then it appears as if nothing has happened, and then I see right at the bottom of the page that the body content has indeed changed to that of the new page. Maybe you could have those colored boxes displayed prominently on the homepage as you do, but then move them to the sidebar for the interior pages so that the body content is moved up. My resolution is 1050px high but your body content doesn’t start until 750px down, so after the browser chrome I see less than 200px of new content every time I go to a new page. Just something to think about I guess.

Love the look, colors, feel of the site. Maybe just separate the third column in the body of each page (twitter feed, nominations etc) with a subtle background color change or a left border or something.

@attilahajzer – The search button should always be inside the search form. If you mean how did he get it inside the input field then he didn’t, he just made it appear that way by putting a border around the entire form and giving the input field no border or background.

[OniLinkCR]

What johnnyb said. A possible solution towards this would be to change the color of the header to be greenish, redish, etc, just as an indicator that I am indeed on a new page of the site.

I think your issue (back to your original question) stems from the fact that you want to squeeze all the bells and whistles in, such as typography, transitions, shadows, etc. Trust me, it happens to all us. The key IMO is to actually limit them and use them sparingly.

Same thing with textures, etc. Your site looks great as is, it doesn’t need any textures IMO.

[Minnow990]

A lot of these are good points and I agree with most of them. I won’t repeat any, but if I do it’s because I was just skimming each of the long comments. :)

1. I would possibly add in some box shadows where appropriate. For example, the footer or header could have an inset box shadow to give it a overlay effect.
2. Padding on the left side of the content. I’m on a small screen: 1024 x 768. It’s not the same as your 27″ monitor, so you gotta keep in mind the people with the old small monitors.
3. I have a horizontal scroll bar at the bottom of my screen because your contact form is too large and goes outside the boundaries of your page on the right side.

If you can, make sure you test different screen sizes and all major browsers as well to make sure you’re cross-browser and cross-platform compatible. A good place to get screenshots of your site for major browsers on OS and Windows would be Adobe Browserlab.

Overall it’s an amazing looking site. Keep it up!

[sliver37]

@attilahajzer Just give the submit button the background of your search icon, then absolutely position it over top of the text input making it appear inside. (position: relative on the form itself)

[chrisburton]

@attilahajzer – you could do something like this: http://jsfiddle.net/6Rntu/

If someone wants to make additions to it, great.

[TheDoc]

@JoshWhite – funny, I hadn’t clicked through the site until you mentioned that, only looked at the home page. The boxes should definitely only be on the home page.

Otherwise, nice looking site!

[ketu]

Hey,

Site looks good.

I have one suggestions for inner pages that, can you use that four boxes(key resource, life awards..etc.) to left site and put all the content on right side? since now when we click on menus then i dont understand page is changed or not.

Again the site is really goods.

[Author]

Posts