First website review please

gnolan

Hi,

I've almost finished creating my first website, which will be my personal web design website. I'd appreciate all comments and criticisms - but try to go easy!

I'd first like to point out some problems that I am already aware of:

• i'm just free hosting at the moment for testing purposes
• although i mention responsive design, my site is in no way responsive
• unsure whether the site looks acceptable in IE 6-8
• don't have enough/any websites online for my 'portfolio' page
• i know none of the social network icons link to any personal page yet

I'm sure there are many other problems but please be kind, this is my first proper attempt. The website can be found here.

Can anyone give me any advice as to what name to domain name to choose for the website? I was initially going to go with www.engine-room.ie, but then i'm thinking about www.engineroomwebdesign.ie but am wondering if that would be a bit too long.

p

Code wise: Good.
General structure: fine.
Design: Not bad, but not professional standard yet. Avoid common style treatments, they're a bit tacky. Need to work on better typography, strong contrast and use of colour. Less explosions!

gnolan

p wrote: »

Code wise: Good.
General structure: fine.
Design: Not bad, but not professional standard yet. Avoid common style treatments, they're a bit tacky. Need to work on better typography, strong contrast and use of colour. Less explosions!

Thanks p. With respect to style treatments, which ones do you mean specifically?

I definitely agree regarding the typography. It's something i'm reading up on at the moment and I haven't quite grasped it yet. A major problem for me is how do i go about looking for a suitable font? I know there is google fonts which is great, but is it a case of trawling through each and every one and compiling a short list of suitable fonts?

I also have trouble when it comes to contrast. It can either be quite dull and uninteresting, or gaudy and rainbow-coloured; i don't seem to be able to tread between the two.

Would the explosions you refer to be the text-shadows on the main navigation menu?!

VMotion

gnolan, this is a fine attempt but it is not of professional style yet. (No offense meant).
1. Your logo. It has to be readable at a glance. Take out the gear from the background of it and remove the red halo. Make it contrast and crisp.
2. Always remember about the most important zone on the page: top left quarter. All user attention goes here at the first glance. You underutilize it. There shouldn't be empty spaces or unreadable words. There should be words of action and assurance: "High-quality", "Order now", "Request a free quote" etc.
3. Add some graphics or anything else, the middle looks empty.

Good attempt but still lots of place for improvement.

gnolan

VMotion wrote: »

gnolan, this is a fine attempt but it is not of professional style yet. (No offense meant).
1. Your logo. It has to be readable at a glance. Take out the gear from the background of it and remove the red halo. Make it contrast and crisp.
2. Always remember about the most important zone on the page: top left quarter. All user attention goes here at the first glance. You underutilize it. There shouldn't be empty spaces or unreadable words. There should be words of action and assurance: "High-quality", "Order now", "Request a free quote" etc.
3. Add some graphics or anything else, the middle looks empty.

Good attempt but still lots of place for improvement.

I've got a mixd reception with regard to the logo. Ill work on the clarity, perhaps a complete redesign.

I'm not sure I want to add in buzzwords like high-quality just because the top-left is a prime piece of screen real estate. If it looks good I'd be quite happy.

I know what you mean about how it looks plain but I don't want to fill space by adding in stock images of things that relate to web design. Do you have any suggestions. I'm looking at redesigning the color scheme which I think will make it look brighter

VMotion

gnolan, Only you have the vision of your website. It could be quite difficult to recommend anything. Try googling "minimalistic design" and study the trends.
You can leave design image-less but then you need to change the layout of text.

Hope this helps.

p

gnolan wrote: »

Thanks p. With respect to style treatments, which ones do you mean specifically?

...

Would the explosions you refer to be the text-shadows on the main navigation menu?!

Yep. You're overusing things like shadows and CSS animations. It's easy to use effects like that as a sort of design 'crutch'.

My main advice is keep learning about visual design, as that's the bit you need to work on. Sketch, do many designs, get critiques, get some graphic design books from the library etc...

Good luck!

gnolan

UPDATE: I have played around with the website a little more and addressed some of the issues mentioned here.

I have changed around the colour scheme to something more high contrast. I have simplified some of the transitions, such as the hover effect on the main menu. I have also altered the typography opting for mostly sans serif type with an exception here and there.

With mentions of the site being a little bare on images i added something extra on the homepage which has added to the contrast. I repeated this same image as a sort of watermark throughout the site.

Can I get some opinions on the changes. I'll post some screens of how the site looked before the alterations.

Link

VMotion

Gnolan, contrast/brightness wise it looks better now.
The top menu though has it's issues. When I move mouse over one menu item others almost disappear.
Three boxes: rounded corners have visible white border.
Green gears are a bit out of style and they look unnatural.
I'd remove the effect from "Who I am" etc.

About me http://gnolan.comxa.com/Engine%20Room%20Web%20Design/about.html
Stroke on the headings doesn't look good.

You are moving in the right direction. Keep going!

gnolan

The top menu though has it's issues. When I move mouse over one menu item others almost disappear.
That was the idea actually. I am just using it as a way of focusing on one menu item.
Three boxes: rounded corners have visible white border.
There's nothing i can really do about that - it's just the way they're rendered in the browser by the looks of it.
Green gears are a bit out of style and they look unnatural.
I know what you mean but i need to add in something contrasting. This is kind of what i was alluding to earlier. According to color scheme designer that green colour complements the red i've been using throughout the site.
I'd remove the effect from "Who I am" etc.
Maybe, i like it though.

About me http://gnolan.comxa.com/Engine%20Room%20Web%20Design/about.html
Stroke on the headings doesn't look good.
I may keep the stoke on the main headings, i think it can look a little blurred on the smaller sub-heads.

Thanks for the input.

p

I see what you're trying to do with the contrast, the idea you're after is right, but the red is just too garish. Red is a harsh colour, to be used with caution. You need to continue to work on your visual design skills and awareness. Especially the details of design and colour schemes.

Check out www.colourlovers.com for good colour schemes while you're learning
Completely agree with VMotion about the fading navigation - I get where you're going with it, but it just doesn't work.
Strokes on the text looks bad.


The "About Me" text is fine for a blog, but not a site that is presenting itself as a web design company. Is the site a portfolio, a personal site, a company or what? Right now, it's all over the place. Read this: http://astheria.com/design/portfolios-that-accomplishgoals

curious18

Hi there,

I think your website looks great and does look professional. The only thing I would change is the size of the font on the menu as it is slightly too big... maybe reduce the font size by 1 or 2.

Cheers.:D

tricky D

Logo is too complicated imo and will not work well in certain formats.

Too much 'I' and 'me' on the homepage on other pages.

Typography and copy not marketing/user oriented.

Background colour not specified.

Social media icons not importing - FF6, wrong slash in use.

Nav menu effects and colour scheme are 'off' as already noted.

hth/gl