Hi all,

 

I picked up a nice little project recently to design, develop and maintain a website for my sister-in-law's new company. As it stands now, she's loving the look of the site, and I'm quite pleased with it myself, but it feel like there's something missing.. I just can't figure out what it is.

 

Before you type me an essay on "things I've done wrong", here are a few points to keep in mind:

 

• She wants the mission statement on the 'About' page, not the home page...
  
• No links (other than internal ones) or forms work yet, they are just styled placeholders in preparation for a CMS theme.
  
• The logo was already designed for her, and she wants to keep it. So that won't be changing.
  
• The images haven't been finalised, so they're still stock for now. As the company grows, these will all be replaced with actual photos from the services provided.
  
• Pages will be added later as required for whatever else is needed, such as talent profiles (models), photo gallery, application forms, etc.
  
• Contact form uses HTML5 'placeholder' property, but I did create labels for each field as well (they're just hidden). I still need to set up the rules properly, but if a browser that doesn't support 'placeholder' loads the page, I need to set the labels to visible (work in progress).
  

 

So, let's get on with the fun part.. The site as I have it so far can be seen here. Any constructive criticism to throw my way? I'm all ears.

I think you need to make it more obvious that you can click on the services to reveal more information. I know you've stated to do so at the top, but I didn't read that to begin with (I don't need a sentence to tell me what a service is, right?). So I only notice they were clickable because I happened to be checking the source.

 

The design is quite nice over all. It seems a little plain though. Not sure what I'd add but I try to separate the header from the rest of the content a little more.

 

Plus I don't like the gradient on the navigation bar, nor the solid light blue background (although I'm assuming you used that because of the logo). You should see if there are any nice textures you can add.

 

Meh. These are just my thoughts.

 

If the client likes the design then I wouldn't recommend doing anything unless she tells you to

Edited August 22, 201115 yr by John Fotios

I think it's quite solid really. Couple of issues i think need pointing out...

 

• Services page - This is really hard to read with the staggered alignments. Although i don't have a possible solution for you as i know from experience how hard it can be to do this type of page .
  
• Services page - Make it more obvious that you can click the header links for more information. Currently i almost overlooked that completely.
  
• Footer - The alignment of the footer headers looks slightly off with the alignment of the footer lists. Maybe try removing the bullet points.
  

I think you need to make it more obvious that you can click on the services to reveal more information.

Yeah, honestly I was expecting a few comments about this page.. This is the fourth of five ideas for the layout, and this one worked about the best. I know I can improve it though.

 

The design is quite nice over all. It seems a little plain though. Not sure what I'd add but I try to separate the header from the rest of the content a little more.

 

Plus I don't like the gradient on the navigation bar, nor the solid light blue background (although I'm assuming you used that because of the logo). You should see if there are any nice textures you can add.

I was trying to go for a 'calm, peaceful, harmonious' feel to the site, especially considering the definition of 'amity'. The content background does have a very light gradient on it, but I think I can definitely make that more visible.

 

What is it about the navigation bar that you don't like though? I thought something like that would work pretty well considering there won't ever be a lot of top level navigation links, probably 5 or 6 at most, each with relatively short names.

 

As for textures, I'm not so sure about that... Perhaps a light texture on the html background (so it only shows on each side of the content) would work though. I'll try it out and see.

 

I think it's quite solid really. Couple of issues i think need pointing out...

 

• Services page - This is really hard to read with the staggered alignments. Although i don't have a possible solution for you as i know from experience how hard it can be to do this type of page .
  
• Services page - Make it more obvious that you can click the header links for more information. Currently i almost overlooked that completely.
  
• Footer - The alignment of the footer headers looks slightly off with the alignment of the footer lists. Maybe try removing the bullet points.
  

Thanks Mike.. One of the ideas I had for the 'Services' page was to use illustrations of some sort (in place of the thumbnails I have now), but I had two major problems with that: I can't seem to find a single style with illustrations to depict each of these services, and I do unfortunately have a somewhat tight budget so hiring a illustrator to create some isn't an option. I don't suppose you have any magic links in your bookmarks that might help me out in that department...?

 

I definitely need to put some more TLC into the footer, I just didn't want it to stand out too much though.. I guess I missed my goal of a "useful afterthought" section though... Perhaps without bullets and centre-aligned? At least center the lists in each third, the list themselves could still be left aligned for readability.

Edited August 22, 201115 yr by ZaLiTH

I've updated the test site (link in first post), changed a few things based on the comments / suggestions above... Certain things (like colours) can't be changed too much, but the layout for the 'Services' page is definitely better than it was.

 

Also, the lack of 'placeholder' support on IE shouldn't be a problem now, and the contact form has a fall back for browsers with JS disabled. IE9 isn't too much of a problem, but IE8 and earlier still give me headaches.

 

I'd really appreciate it if a few people could test it in their browsers and let me know how it displays, so far I've only bee able to test Chrome 11, Chrome 13, IE8, IE9, Firefox 5 and Firefox 6.. I'm still working my way through the idea of cross-browser compatibility, so any feedback in this department would be really helpful.

 

So.. I'm still open to any other feedback if anybody is interested, otherwise I'm moving on to converting this to a CMS theme now.

IE8 -press F12 then select Browser mode and see what IE7 sees

IE8 -press F12 then select Browser mode and see what IE7 sees

Ouch... That just hurt my eyes. I definitely have some fixing up to do there. Thanks for the tip though, never knew IE even had developer tools until now... Never really been a big fan of MS to be honest, it's more of a necessity than anything else.

Pressing the "click here for more info" should also be the button to minimize the extra content. Feels much more natural.

 

I think you should make this into a column site as well.

 

I'd go for something like this: http://static.livedemo00.template-help.com/wt_34746/

Pressing the "click here for more info" should also be the button to minimize the extra content. Feels much more natural.

I definitely agree with you there.. I'm at work at the moment (which as you've probably guessed, is not as a web designer or developer.....), so when I added that just now it was just a 'quick test to see the idea'. When I get home later I'll crack open a beer, crank up the music and work some jQuery magic in there.

 

I think you should make this into a column site as well.

 

I'd go for something like this: http://static.livedemo00.template-help.com/wt_34746/

Actually I really like that idea. But the client in question really likes the staggered look, so I may need to stock with that. I'll put it up for discussion and see though. Thanks..

 

Edit: If you think about it, I actually started heading down the 'column effect' path with the 'About Us' page. It would actually help bring all the pages together more if they all followed suite. But as I said, it's not my choice in the end, so we'll see what happens..

Edited August 22, 201115 yr by ZaLiTH

I really dislike the colour scheme. Turquoise is a very strong colour...

I definitely agree with you there.. I'm at work at the moment (which as you've probably guessed, is not as a web designer or developer.....), so when I added that just now it was just a 'quick test to see the idea'. When I get home later I'll crack open a beer, crank up the music and work some jQuery magic in there.

 

 

Actually I really like that idea. But the client in question really likes the staggered look, so I may need to stock with that. I'll put it up for discussion and see though. Thanks..

 

Edit: If you think about it, I actually started heading down the 'column effect' path with the 'About Us' page. It would actually help bring all the pages together more if they all followed suite. But as I said, it's not my choice in the end, so we'll see what happens..

In fairness, I wouldn't do anything else to the design if the client is happy with it. Obviously if you don't mind doing extra work you can suggest a different theme. Where I work, once the client okays a design, we move away from the drawing board as soon as possible and concentrate on the content.

 

Every site is a column (imo ), hence you can see it on the about us page, even if there isn't a graphical outline or whatever to display it.

 

How much are you getting for this site, anyway? Or is it a favor?

I really dislike the colour scheme. Turquoise is a very strong colour...

Those are pretty much the colours the client specified. I can 'tweak' them a bit, like change brightness, saturation, etc, but I can't do much more than that.

...I can 'tweak' them a bit, like change brightness, saturation, etc, but I can't do much more than that.

 

I wouldn't bother. It doesn't look bad and if that's what the client wants...

Every site is a column (imo ), hence you can see it on the about us page, even if there isn't a graphical outline or whatever to display it.

 

How much are you getting for this site, anyway? Or is it a favor?

Yeah, too true.. There are two columns on that page though, which is why that came to mind.

 

It's a favour that I'm being paid for, if that makes sense.. It's for my sister-in-law (as mentioned in the OP), so the general idea is that I get paid a fixed monthly amount for a minimum of 6 months to design/develop/support the site while her new business gets off the ground. I'm in it for the knowledge and experience, but I need to invoice her for it to be a legitimate business expense.

Ah fair enough.

 

Well, having some work in your portfolio that's actually been done for a client is always good

 

I think your design is pretty nice overall (especially seeing as you have the colour restrictions etc). Do you work as a web developer?

Ah fair enough.

 

Well, having some work in your portfolio that's actually been done for a client is always good

 

I think your design is pretty nice overall (especially seeing as you have the colour restrictions etc). Do you work as a web developer?

Thanks.. Me? Web developer...? I could only dream of that, there's no way I can afford the proper training courses for this stuff... It's just a hobby really (heck, I code in Notepad++ ). I just love creating things, and I grew up around computers, so it's logical. One day it may become a career, but if it does it'll be a long way down the road..

 

 

For everyone who posted here:

I've started moving things over to a WP theme already. Thanks to all for your suggestions / feedback, you've been a great help. I won't be updating the static test pages any more, I've made my changes in the WP theme (specifically the close/open button suggestion for the services list).

I like the look of your site. It seems to fit the criteria the client has given you.

 

One thing I don't understand is the "Search" button to the far right of your navigation bar. Is there going to be an area to insert characters to use in your search?

One thing I don't understand is the "Search" button to the far right of your navigation bar. Is there going to be an area to insert characters to use in your search?

I'm not really too sure about having the search field there... Right now I'm busy fighting a losing battle with PHP (which, by the way, is something I know next to nothing about), so I'm a bit distracted at the moment, I can't seem to find a good place or style for it.

 

I don't really understand your question though; area to insert characters? It's not a button, it's a search field... All I did was make it smaller and use a bit of jQuery to expand it when focused. The idea is the user clicks there, types their desired search keywords, and presses enter to search. Did test it in a couple different browsers, so it should be working properly.

I think MG1878 assumed it was a button (as did I until I clicked it and realised is opened out). Perhaps style it like Apple's search bar (in the top right also).

 

ZaLiTH, with a bit more practice I think you could definitely be a web developer. Take me, I work in an office 9-5 all week doing web, I'm only 21 and didn't know what a div was until last year.

 

You've just got to pick it up fast

I think MG1878 assumed it was a button (as did I until I clicked it and realised is opened out). Perhaps style it like Apple's search bar (in the top right also).

I've seen quite a few sites with expanding search fields, and I think it's a really neat way to do it. Unfortunately though, I think I need to change the way I do the background for the navigation bar to fit it in properly... The way it is right now simply doesn't feel right.

I feel a "starting again" coming on

Edited August 23, 201115 yr by John Fotios

I feel a "starting again" coming on

Hmmm, let's hope not hey... That would just be painful at the moment.

 

Well anyway, just fixed the problem I was having with my custom page template, so let's see what I can do about this search field now.

I wouldn't start again, as I said, the design is good.

 

John Fotios was correct, I didn't realise the search bar would appear when you clicked "Search", it didn't appear to be doing anything last night but seems fine this morning. Now I see it, it looks good.