Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Piano Website

Featured Replies

I'm designing a website for a piano teacher, and I've hit a bit of a wall. I've come up with the following design,

and I'm reasonably happy with it but something just doesn't seem 'right'.

 

I'd appreciate some feedback on what you think, be brutal. :D

 

By the way, this is a print screen from Photoshop and the black bar at the bottom of the background won't be there on the final design.

 

post-23747-0-65994400-1297613790_thumb.png

Hi tomsel,

 

The first thing I'd say is that the design is too dark. Its hard to decipher the text and the logo is just lost in a sea of black.

 

Secondly the layout needs some work. Maybe swap the two elements in the header around to give it a little more balance. You would then have a more defined two column layout. I'd tone down the drop shadows too.

 

On the whole, it's looking really dated at the moment. I suggest taking a look at some CSS gallery sites for some modern inspiration.

 

Hope this helps.

I agree with Jay. In addition, I can't really imagine the aesthetics and the visuals of this site working well with a piano bar. I'd put in some colours and spice up with a more apparent menu, pictures and a better layout.

maybe put a white/black keyboard effect at the top of the white section?

No more than a small portion of food for thought.

  • Author

Hi guys, thanks for all the feedback. I've re-done the design again, but to be honest I'm not sure it's a step in the right direction or not.

 

It's still quite dark, but not as much as before. I'm not quite convinced about the piano keys for the side bar... I wanted to avoid using piano keys as I think they can look quite tacky, that and they're used on practically every piano website. What do you think, keep them or lose them? Is it even obvious that they are actually piano keys?

 

This is hardly a finished, polished design by the way. There are errors in the background, margins might not quite be right, and as you can probably tell by the masterpiece in the top section, I didn't have a suitable photo to hand of my client. :pp

 

I'd just rather get some opinions back on this before I put any more work into it.

 

So, opinions? Better, worse?

post-23747-0-83877500-1297985541_thumb.png

  • Author

Hi again,

 

I've moved the design on slightly from the last post, was just wondering what you think, how it could be further improved, etc?

 

The main content area (light grey background) will probably end up being split into two columns for most pages, however on the home page this won't be needed so I've left it as a single column for this screenshot.

 

The only thing I may change looking at it now is on the home page and other pages where only one column is needed for the main page content, is to change the black top bar (mp3 player / link to piano lessons) to a side-nav bar. Moving it to a two column layout would move the main content toward the top. At the moment it feels like you have to look down relatively far to find it.

 

So... opinions?

 

Thanks,

 

Tom

post-23747-0-05978800-1298718322_thumb.png

its nice, i like the theming, i still think there is something wrong with it though, maybe the bevel on the white part of the piano is a little too much. might just be me but that photo in the header is a little creepy :)

I like the last design you posted.. one thing that I think is that the menu needs to pop a tiny bit more.. maybe make the font 1 or 2 pt bigger or something.. also have you thought about their hover state?

 

one final thing is i would make the gradient that is going around the white area a bit sharper.

 

hope it helps

  • 2 weeks later...

Fair enough a bit of inspiration but at least work with the colours you already had instead of literally eye dropping everything on the site you like.

 

Wah, why do i care.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.