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.
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
@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.
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 :)
@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.
I have to say I love the colors! Just to build on everyone else, there are a few things I would change. As I sit with a lot of light around me it's hard to read the grey text and there is not enough contrast. Just like Johann said, it's hard to read the white text in the yellow box. Since the yellow box is part of the favicon I would just change the color of the font to the boxes or add some shadow effect so it's readable.
When hovering over the buttons I felt the colors were a bit off. Why not just change the actual gradient, the orange color looks more red then anything. Also the yellow and the orange just does not look good. I would also make the text a bit darker.
Also the search field seemed a bit out of place, most of the time a search field is in the top right. However i just stumbled across it when I was reviewing through it. I'm sure it was put there to even out the other side, however I don't the average user is going see that, they are going to first look for it at the top right hand side. One thing to ask is, is a search function needed in your site?
I'm not sure if this is just for demo purposes, but each page felt the same, there were no differences and I had to look if I had actually changed the page or not. I would remove the four blocks at the top of the page out on every other page.
Lastly, is the contact form. When someone clicks on it you say please confirm the fields. Why not specifically say what fields and highlight the fields?
Other then those critiques, I would say your colors are cheerful and tie in perfectly with what the organization is trying to convey.
@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.
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.
Wow buddy, this is great site! I love the menu, very soft, very subtle, great look! The buttons are fantastic, I love what you did with the "read more" buttons. The color is great. Overall I come to the site and I think "wow, this is bright and beautiful" this guy's pretty good! I think this is a freaking GREAT SITE!
All that being said here are my (very few) critiques:
1. The "Make a difference today" is a little too white on that cloud background. I would ad maybe a little bit of subtle shadow to add a little depth to it.
2. The search field is obviously a search field, but I don't know if you'd come upon it in any way other than "Oh, look at that. That's a search field, neato." -- if I was visiting the site with the intent to search right away, I might miss it.
3. The fact that clicking "Contact Us" zips the user down to the footer MIGHT confuse some people ... and I'm guessing that the demographic for this site is pretty broad. I imagine a lot of people might be like "The fuck? I didn't go anywhere!" Not to mention that after you are brought to the bottom of the page your eye goes IMMEDIATELY to the bottom of the contact details box and not to the form. They'd figure it out eventually I'm sure, but I'd create a contact form on a dedicated contact page.
4. I don't like that there are no other variations of a page. I really like those colorful read more blocks on the front page, but I think it would add more delineation to the pages if they weren't there on inner pages.
Other than those things, this site is really great man. For your first proper site I'd say you hit it out of the park.
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. :)
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.
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.
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.
@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)
Does anyone feel like the 4 boxes begin to get really redundant after a minute or so? I was scanning up the thread to see if someone else had brought it up, so hopefully I'm not just saying the same thing :) Possibly consider keeping those boxes on the homepage because they are highly appealing and give someone more info and the additional pages have some kind of truncated header to bring the content up because those boxes are the same as their top level menu counterparts.
Definitely agree that the contact top level link should go to a dedicated page and also leave it in the footer also.
Very cool site all around. It feels really fresh and inspired.
@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.
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.
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!
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
I'd make it a dedicated page rather than an anchor on each page.
@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.
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 :)
I have to say I love the colors! Just to build on everyone else, there are a few things I would change. As I sit with a lot of light around me it's hard to read the grey text and there is not enough contrast. Just like Johann said, it's hard to read the white text in the yellow box. Since the yellow box is part of the favicon I would just change the color of the font to the boxes or add some shadow effect so it's readable.
When hovering over the buttons I felt the colors were a bit off. Why not just change the actual gradient, the orange color looks more red then anything. Also the yellow and the orange just does not look good. I would also make the text a bit darker.
Also the search field seemed a bit out of place, most of the time a search field is in the top right. However i just stumbled across it when I was reviewing through it. I'm sure it was put there to even out the other side, however I don't the average user is going see that, they are going to first look for it at the top right hand side. One thing to ask is, is a search function needed in your site?
I'm not sure if this is just for demo purposes, but each page felt the same, there were no differences and I had to look if I had actually changed the page or not. I would remove the four blocks at the top of the page out on every other page.
Lastly, is the contact form. When someone clicks on it you say please confirm the fields. Why not specifically say what fields and highlight the fields?
Other then those critiques, I would say your colors are cheerful and tie in perfectly with what the organization is trying to convey.
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.
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.
Wow buddy, this is great site! I love the menu, very soft, very subtle, great look! The buttons are fantastic, I love what you did with the "read more" buttons. The color is great. Overall I come to the site and I think "wow, this is bright and beautiful" this guy's pretty good! I think this is a freaking GREAT SITE!
All that being said here are my (very few) critiques:
1. The "Make a difference today" is a little too white on that cloud background. I would ad maybe a little bit of subtle shadow to add a little depth to it.
2. The search field is obviously a search field, but I don't know if you'd come upon it in any way other than "Oh, look at that. That's a search field, neato." -- if I was visiting the site with the intent to search right away, I might miss it.
3. The fact that clicking "Contact Us" zips the user down to the footer MIGHT confuse some people ... and I'm guessing that the demographic for this site is pretty broad. I imagine a lot of people might be like "The fuck? I didn't go anywhere!" Not to mention that after you are brought to the bottom of the page your eye goes IMMEDIATELY to the bottom of the contact details box and not to the form. They'd figure it out eventually I'm sure, but I'd create a contact form on a dedicated contact page.
4. I don't like that there are no other variations of a page. I really like those colorful read more blocks on the front page, but I think it would add more delineation to the pages if they weren't there on inner pages.
Other than those things, this site is really great man. For your first proper site I'd say you hit it out of the park.
-Tanner
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!
If someone wants to make additions to it, great.
Definitely agree that the contact top level link should go to a dedicated page and also leave it in the footer also.
Very cool site all around. It feels really fresh and inspired.
Otherwise, nice looking site!
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.