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.

Need critique of beauty therapy website mockup

Featured Replies

Hi guys.

 

I have started mocking up a web design for a friend for her mobile beauty therapy business. I was thinking of the following layout but am not sure about the colors I have used. Please note the text will change as this is just placeholder text at the minute. Also the photos are not my own so I would obviously have to buy suitable ones but they would be in the same positions.

 

The navigation icons at the top were created by myself and will have over states applied to them. This is the first time I have used Photoshop, the site will be exported as photoshop slices and applyed to html.

 

Any criticism of my design style or layout gladly appreciated.

post-13435-045414100 1289323093_thumb.jpg

  • Author

Your uncertainty about color seems well founded. I'm not sure red/orange are right for health and beauty. Perhaps blues and greens or softer brown tones.

 

As you move forward, the shadow behind the icons seem incongruous since nothing else on the page has a drop shadow. You may also want to scale them down a bit in the final design. Last, not sure Trajan is the best font for health and beauty: it seems a little militaristic for a soft industry.

 

I totally agree with all you have said. I do think soft brown tones may work better. You are probably right about Trajan not being suitable. What fonts do you think would work better instead? I really am lost when it comes to colour and fonts.

  • Author

Does anyone think this design looks better. I have changed the color scheme to incorporate brown tones, have changed the fonts, and have padded the text a little more. I have also changed the scale of the navigation icons and omitted their drop shadow effect.

 

Any suggestions greatly appreciated.

post-13435-037772400 1289328969_thumb.jpg

Does anyone think this design looks better. I have changed the color scheme to incorporate brown tones, have changed the fonts, and have padded the text a little more. I have also changed the scale of the navigation icons and omitted their drop shadow effect.

 

Any suggestions greatly appreciated.

 

Looks pretty cool to me :)

Hello,

 

Here is a rough color palette, that imho could be matching for such site

 

kaczan.png

 

wow +1 on that bro...

 

You must have time on your hands. Nice Job.

  • Author

Hello,

 

Here is a rough color palette, that imho could be matching for such site

 

kaczan.png

 

Thank you web guru for taking the time to provide this color scheme example. I will try implementing it and post back the results.

Glad to be of help.

  • Author

I have changed my color scheme according to your suggestions web guru. I am quite happy with the page now. Not i have changed the color of the main body text for a darker brown. Do you think the design is now befitting of a beauty therapy inspired theme?

post-13435-038355300 1289421193_thumb.jpg

  • Author

Hi guys.

 

Here is my completed beauty therapy website. This is the first site I have designed with Photoshop and developed with Dreamweaver. I am happy with the results. I would like to center the whole page in the browser but I cant work out how to do this? Can anyone help?

 

I have exported all artwork for web and devices in Photoshop, so hopefully this means the site loads at an acceptable speed in peoples browsers. Any comments on this would also be helpful.

 

Can anyone see any obvious areas where I could improve this design?

 

Thanks guys, and thanks to web guru, for his help with the color scheme.

 

http://www.jordanmcquade.com/Web_Kaczan/index.htm

1st off: center it and put a slight grey background. havent looked at it other than for 3 seconds

Hi,

 

I would center the whole page (CSS -> width:x px; margin-left:auto; margin-right:auto)

and also make sure that the margins and paddings are the same on the left and right side.

Maybe increase margin between header (with navigation) and the page content.

 

I'm not sure about the image borders........for me they are a bit too thick.

 

Apart from that looks ok.

 

Greetings

Sebastian S.

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.