First Web Site - Opinions Please

Nulty · 26-03-2010 3:52pm #1

Hey folks,

I'm edging closer to finishing my first web site and I'd very much appreciate you opinions on the design and Information/Navigation architecture. It's not too bad for a first web site but it's a long way off looking professional.

I'm no designer and I know that so any tips would be really helpful. Also beware that as its my first web site, I'm still feeling my way around the process and it's been really hard designing, developing, content writing etc. all on my own while trying to learn the bloody stuff too!

The content hasn't been written for most/all of the site so don't wrry about that

Anyway, be brutal because it's the only way I'll learn and as far as the design thing goes...well I'll probably never get to a professional level.

Thanks a mil

http://www.fingerstyle-ireland.com

26-03-2010 4:07pm

For a first website, it's very good. You've avoided many of the common pitfalls!

Few suggestions

- Get rid of the gradients. I see what you're trying to do but they look ugly. Either soften them down so they're much more subtle, or get rid of them.
- The background colour of the navigation areas blends in with the colours around it. It would be a good idea to give it a little more contrast by changing shade or colour.
- Capitalise the navigation items - they look odd lower case
- Increase the line spacing a little bit. It's more readable than the default line spacing.
- Give a bit more spacing to everything inside boxes. All your graphics are bunched up against the borders (the harp in the header for example) just something about 5/10pixels spacing would be good so there's some breathing room in there.
- Finally, the harp in the header looks distorted. One of the primary rules of design is never to squash or stretch a graphic or image. You should always keep it's proportions the same.

Hope that helps, good luck with it.

Nulty · 26-03-2010 4:13pm

When you say capitalise, do you mean all-caps? Are the ones on the left ok?

strandroad · 26-03-2010 4:16pm

It's certainly not a bad first effort. It's legible and clear. With just a bit of work you can improve your website in no time.

Some things that jumped at me:
- The green gradient under the left menu hurts my eyes, it literally seems to move! It needs to be more smooth and it feels too steep too. Play with optimisation settings for smoothness but first I'd take the green down a notch or two. Or three.
- Menus are confusing - the left one mirrors the top one but it has subcategories and the top one has not. Leave just one and make sure it has subcategories.
- Too many lines and borders around the content boxes on the right. They all have borders (and their headers have borders) then they are surrounded by yet another border which touches main content border. Scrap some of them and make the rest less obtrusive. I think you can get rid of the content box/header borders, just leave the one surrounding them to group them together.
- Think about the fonts a little, you're using a serif font for box headers but then you're using both Arial and Trebuchet for sans-serif texts. There's too much going on.
ETA: actually you're using Georgia, Verdana, Trebuchet and Arial (did I miss anything?). That's way too much for this type of layout. Be more consistent

- I'd make the logo font larger and break it in two lines:
FINGERSTYLE
IRELAND
As it is now it looks too weak next to the strong harp.
- More space around the text in the footer.
- Consider changing the layout to something more flexible so that you have more screen space for the middle pane (if you want to keep the font this size).

Hope this helps.

nellyshark · 26-03-2010 4:17pm

My two cents, get rid of the gmail address :P there is a whole thread raging atm on this topic.

Also agree with space inside boxes

Eoin · 26-03-2010 4:18pm

I think the top nav looks fine in lowercase, but I'd be consistent with the side menu.

There's no need for the top nav to be images though, they should be CSS-styled text.

Nulty · 26-03-2010 4:25pm

nellyshark wrote: »

My two cents, get rid of the gmail address :P there is a whole thread raging atm on this topic.

Also agree with space inside boxes

Yeah I was just reading about the. I'm going to change it to the server mail. No worries:)

Also the footer is a pain in the arse, the text just won't sit where I want it too. Thats not where its going to be obviously

Nulty · 26-03-2010 4:45pm

eoin wrote: »

I think the top nav looks fine in lowercase, but I'd be consistent with the side menu.

There's no need for the top nav to be images though, they should be CSS-styled text.

They were going to be images until I changed the colour scheme, now the image and bg colour are the same so gonna change that alright.

Ta

Nulty · 26-03-2010 5:02pm

mhge wrote: »

It's certainly not a bad first effort. It's legible and clear. With just a bit of work you can improve your website in no time.

Some things that jumped at me:
- The green gradient under the left menu hurts my eyes, it literally seems to move! It needs to be more smooth and it feels too steep too. Play with optimisation settings for smoothness but first I'd take the green down a notch or two. Or three.
- Menus are confusing - the left one mirrors the top one but it has subcategories and the top one has not. Leave just one and make sure it has subcategories.
- Too many lines and borders around the content boxes on the right. They all have borders (and their headers have borders) then they are surrounded by yet another border which touches main content border. Scrap some of them and make the rest less obtrusive. I think you can get rid of the content box/header borders, just leave the one surrounding them to group them together.
- Think about the fonts a little, you're using a serif font for box headers but then you're using both Arial and Trebuchet for sans-serif texts. There's too much going on.
ETA: actually you're using Georgia, Verdana, Trebuchet and Arial (did I miss anything?). That's way too much for this type of layout. Be more consistent
- I'd make the logo font larger and break it in two lines:
FINGERSTYLE
IRELAND
As it is now it looks too weak next to the strong harp.
- More space around the text in the footer.
- Consider changing the layout to something more flexible so that you have more screen space for the middle pane (if you want to keep the font this size).

Hope this helps.

I'd rather just make the harp smaller, I don't like any of the other configurations. It seems to work.

Thanks everybody for your help, you've given plenty to think about.

The part about the fonts is very important. thanks. the bottome block (under the tabbed panels) wasn't supposed to be like that. cheers all the same

Sheeps · 26-03-2010 5:44pm

When you click on a category in the sidebar and you get a sub menu, when ever you click on one of the sub menu items the sub menu disappears. It would look and feel a lot better if the sub menu remained expanded after clicking on one of the menu items.

tricky D · 26-03-2010 6:25pm

Logo should link to homepage.

Area to right of logo is unused, could put subtle graphic element there e.g. a plucking finger with strings in perspective and going out of focus there. Not a big graphic, perhaps from events to contact (280/300 pixels).

You might also consider rearranging the logo by moving the Fingerstyle Ireland text up and then putting a tagline below where Fingerstyle Ireland is now. The tagline could help unfamiliar users get a better handle on what fingerstyle is. You could have a risque/cheeky tagline using plucking or pluckers. Or something else like 'discover the style'. It's an awkward one as plucking describes the technique best but it is hard to avoid the obvious and slightly inappropriate innuendos.

You're repeating the navigation. While the lhs is expandable, its implementation is a bit anti-intuitive as when I click on it, I expect to go to a page as opposed to have the menu expand. Other problems have already been noted. Besides, you only really need to use one within such close proximity. Use dropdowns for the top and remove the side one and repeat the unexpanded top nav as text links at the bottom above the footer. You also free up some space for some other better use.

Your maincontent h1 area is about 540 x 200 pixels or more depending on how you define it. This prime real estate, so you need to use it well. In general you're using too much vertical space here which is pushing good content down or below the fold on every page. On the homepage 'Welcome' is a waste as it has no SEO value and is fluff that people skip past as it doesn't provide any good information. (Same for words like Introduction in genres) 'The Fingerstyle Guitar Resource' on the homepage would give much better bang for buck SEO-wise and for informativeness(?). The repeated harp background image seems a bit unnecessary.

The homepage also begins with 3 blocks of text with over 50 words each which is a bit long. Better to have snappier, scanable content here which addresses your main markets. At a quick guess, you're looking at established artists, people starting off, people looking for gigs and people looking to hire - so address them. E.g. 'Already an established artist, why not (link to form)send us your details and we'll list you(/link)', 'Just discovered fingerstyle and want learn more, (link)find out more here(/link)', 'Want to check out a fingerstyle event in your area, (link)check our gig listings(/link)' and 'Looking to hire an artist, (link)check out artists to make a booking(/link).

Genres
Make the pix links and try to get the text links at the bottom of the text blocks. They're more logical/intuitive positioned there.

Media
I'd remove the extra empty paragraphs after the h2's. Whitespace isn't a bad thing but here it should be above the h2 if anywhere.

Reviews and Events area unformed so little so say about them at the moment.

Try to get a bit more typographical treatment than just black text in the maincontent text. I'd suggest something like your brown colour instead of the grey for all your headings. Also, the graphics on the genre and review pages make reading more pleasant so maybe try a bit more of that stuff on other pages. At least use the standard PDF graphic in Media.

Stick a rel="nofollow" attribute on the links page into the external links (a href="stuff" rel="nofollow")

As ever, proofread your content properly for grammar and puncuation and use a spellchecker. There's spelling mistakes in each of the first 3 paras on the homepage and web site/website inconsistency. Don't use light grey text on a grey background (rhs links).

gl and hth

Nulty · 26-03-2010 6:42pm

tricky D wrote: »

Logo should link to homepage.

Area to right of logo is unused, could put subtle graphic element there e.g. a plucking finger with strings in perspective and going out of focus there. Not a big graphic, perhaps from events to contact (280/300 pixels).

You might also consider rearranging the logo by moving the Fingerstyle Ireland text up and then putting a tagline below where Fingerstyle Ireland is now. The tagline could help unfamiliar users get a better handle on what fingerstyle is. You could have a risque/cheeky tagline using plucking or pluckers. Or something else like 'discover the style'. It's an awkward one as plucking describes the technique best but it is hard to avoid the obvious and slightly inappropriate innuendos.

You're repeating the navigation. While the lhs is expandable, its implementation is a bit anti-intuitive as when I click on it, I expect to go to a page as opposed to have the menu expand. Other problems have already been noted. Besides, you only really need to use one within such close proximity. Use dropdowns for the top and remove the side one and repeat the unexpanded top nav as text links at the bottom above the footer. You also free up some space for some other better use.

Your maincontent h1 area is about 540 x 200 pixels or more depending on how you define it. This prime real estate, so you need to use it well. In general you're using too much vertical space here which is pushing good content down or below the fold on every page. On the homepage 'Welcome' is a waste as it has no SEO value and is fluff that people skip past as it doesn't provide any good information. (Same for words like Introduction in genres) 'The Fingerstyle Guitar Resource' on the homepage would give much better bang for buck SEO-wise and for informativeness(?). The repeated harp background image seems a bit unnecessary.

The homepage also begins with 3 blocks of text with over 50 words each which is a bit long. Better to have snappier, scanable content here which addresses your main markets. At a quick guess, you're looking at established artists, people starting off, people looking for gigs and people looking to hire - so address them. E.g. 'Already an established artist, why not (link to form)send us your details and we'll list you(/link)', 'Just discovered fingerstyle and want learn more, (link)find out more here(/link)', 'Want to check out a fingerstyle event in your area, (link)check our gig listings(/link)' and 'Looking to hire an artist, (link)check out artists to make a booking(/link).

Genres
Make the pix links and try to get the text links at the bottom of the text blocks. They're more logical/intuitive positioned there.

Media
I'd remove the extra empty paragraphs after the h2's. Whitespace isn't a bad thing but here it should be above the h2 if anywhere.

Reviews and Events area unformed so little so say about them at the moment.

Try to get a bit more typographical treatment than just black text in the maincontent text. I'd suggest something like your brown colour instead of the grey for all your headings. Also, the graphics on the genre and review pages make reading more pleasant so maybe try a bit more of that stuff on other pages. At least use the standard PDF graphic in Media.

Stick a rel="nofollow" attribute on the links page into the external links (a href="stuff" rel="nofollow")

As ever, proofread your content properly for grammar and puncuation and use a spellchecker. There's spelling mistakes in each of the first 3 paras on the homepage and web site/website inconsistency. Don't use light grey text on a grey background (rhs links).

gl and hth

Wow, Thanks so much for all your input. I feel like I owe you a beer at the very least:p.

the subtext on the logo - I'm stuck for words but intend on adding
I'm beginning to give up on the sidenav, it does make more sense for it to be on top
Snappier - good idea
I plan on using the PDF sign but am still trying to find the method for "install suggestion" if the user doesn't have a reader
I don't know what a nofollow link is:o

Thanks again

cormee · 27-03-2010 2:46pm

Remove about 7/8 of your content from the homepage. No one is ever going to read it. Buy a book called 'Letting go of the words' it's about writing for the web and worth the investment.

27-03-2010 2:58pm

Nulty wrote: »

When you say capitalise, do you mean all-caps? Are the ones on the left ok?

No, just make the first letter a capital.

e.g. About, not about.

Trojan · 27-03-2010 5:16pm

Really super job if that's your first site, so good I find it hard to believe that

I agree with the "get rid of the words" comment above. Especially "Welcome to", unnecessary. Tell the visitor what they can do on the site, don't welcome them.

Nulty · 28-03-2010 2:48pm

Trojan wrote: »

Really super job if that's your first site, so good I find it hard to believe that

I agree with the "get rid of the words" comment above. Especially "Welcome to", unnecessary. Tell the visitor what they can do on the site, don't welcome them.

Thanks, thats really encouraging:D

It is my first website but I've spent an awful lot of time on it:) It's certainly the first I've out on the net. You know when you can see somethings 'just not right' but you can't think of what you need to do to make it right?

I'm really stuck for layout/content ideas but got some good ideas from this thread. I may be trying too hard but I'm hoping to make a career out of it!

Nulty · 01-04-2010 1:04pm

Ok, I've made design changes.

The content will come after but just wondering if you think its better than it was before.

Anyone who looked at it the first time ought to remember but if anyone want to see the original, I could post a screen grab

Thanks

www.fingerstyle-ireland.com

Nulty · 01-04-2010 1:38pm

Heres the old one

cormee · 01-04-2010 1:43pm

Nulty wrote: »

Ok, I've made design changes.

The content will come after but just wondering if you think its better than it was before.

Anyone who looked at it the first time ought to remember but if anyone want to see the original, I could post a screen grab

Thanks

www.fingerstyle-ireland.com

Why do you have the same paragraph three times on the homepage?

"As of the launch, FSI will be a site offering media such as articles, videos, and listings. The content of the site is going to rely on the visitors to submit much of the media but we will gather much of the content from similar web sites around the world wide web. YouTube is a fantastic medium for musicians to publish their performances and makes it incredibly easy for talented musicians to get an audience. By harnessing the power and reach of YouTube and other video posting sites, Fingerstyle Ireland can easily be a one stop shop for fingerstyle artists and llisteners alike. By submitting your videos from YouTube etc., you will enrich the site and make it worth coming back to."

Eoin · 01-04-2010 1:53pm

Nulty - I would make the top nav stand out more. Bold text and different background colour to the rest of the header perhaps.

cormee wrote: »

Why do you have the same paragraph three times on the homepage?

The post you quoted says "the content will come after"

cormee · 01-04-2010 2:09pm

eoin wrote: »

Nulty - I would make the top nav stand out more. Bold text and different background colour to the rest of the header perhaps.

The post you quoted says "the content will come after"

Apologies OP. Didn't read your post fully.

Nulty · 01-04-2010 2:26pm

cormee wrote: »

Apologies OP. Didn't read your post fully.

No problem.

Nulty · 01-04-2010 2:42pm

I updated the navbar.

I'm pretty much done with the overall look of the site I reckon. Unless someone can point out a devastating error on my part

flanree · 03-04-2010 9:37pm

JIMI not Jimmy (Hendrix).

First Web Site - Opinions Please

Comments