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.

Web design beginner

Featured Replies

Hi,

 

So I'm starting to get in to a little bit of design as I'm a developer but yeah tried designing a simple website. Just wondering which home page do you prefer? and which one do you think will work?

 

Thanks

 

home_landing_page.jpg

 

home.jpg

I think the second one (with the white background) works the best between the two

 

A few suggestions

 

reduce the amount of text under those images

get rid of the shadows everywhere plus the black box around the menu

reduce the font sizes and do some better font research

check your padding especially above the text in the footer

make sure that green works, I think the tone needs a change, also that hover colour just does not work

if they are home builders, what do they specialise in, I see you have used images of houses but you have also use the inside of a commercial business as an image, quite confusing?

lastly, when I reach the bottom of the page, what do I do next? you need a call to action.

  • Author

I think the second one (with the white background) works the best between the two

 

A few suggestions

 

reduce the amount of text under those images

get rid of the shadows everywhere plus the black box around the menu

reduce the font sizes and do some better font research

check your padding especially above the text in the footer

make sure that green works, I think the tone needs a change, also that hover colour just does not work

if they are home builders, what do they specialise in, I see you have used images of houses but you have also use the inside of a commercial business as an image, quite confusing?

lastly, when I reach the bottom of the page, what do I do next? you need a call to action.

Hi,

 

Thanks for the feed back and yeah will do some more font research but just wanted to layout something for samples. The three images are just placeholders really and it will probably depends what will the client put there. Yeah I was a bit unsure about the hover as well but I thought I'd give it ago and ask people on this forum for critics.

 

I will update my design later today and hopefully I will get it right. As for font types what's the typical font use for web though? I think I used verdana for this layout. Also is there any site for colour matching for website?

Hi,

 

Thanks for the feed back and yeah will do some more font research but just wanted to layout something for samples. The three images are just placeholders really and it will probably depends what will the client put there. Yeah I was a bit unsure about the hover as well but I thought I'd give it ago and ask people on this forum for critics.

 

I will update my design later today and hopefully I will get it right. As for font types what's the typical font use for web though? I think I used verdana for this layout. Also is there any site for colour matching for website?

 

I guess you could use something like the above link, but I prefer kuler https://kuler.adobe.com/create/color-wheel/?base=2&rule=Analogous&selected=4&name=My%20Kuler%20Theme&mode=rgb&rgbvalues=0.518349476079186,1,0.050000000000000044,0.91,0.618931401213279,0.04550000000000004,1,0,0,0.2514001363540234,0.04550000000000004,0.91,0.19648307311898638,1,0.9726952256571331&swatchOrder=0,1,2,3,4

 

I had a thought for your menu, remove the colour completely and just have a hover, what you can then do is surround 'get a quote' with another colour or a box, it will get it to stand out making it more noticeable.

 

As for fonts, there are no real typical ones these days, but you dont want typical anyway, you want it to stand out against the competition, this however should send you on your way http://www.steptoandson.co.uk/services/10-great-web-font-combinations/

Hmm, it was less than 24 hours ago I was pointing out to someone on a forum in the tab to the left that most people never read the last line of a forum post.

 

This line is here to ensure the line above has been read.

I like the white design.

 

I also like that the white one doesn't have the form on it. I think forms on the front page is a bad idea. Having a button that pops out is a better idea.

 

Dale.

I like the white design.

 

I also like that the white one doesn't have the form on it. I think forms on the front page is a bad idea. Having a button that pops out is a better idea.

 

Dale.

I would avoid anything that 'pops' it makes you think of one of those ugly bevel brightly coloured buttons with a silly shadow effect.. Ugh!

  • Author

Thanks for the reply guys,

 

just one question why avoid something that 'pops'? So drop shadow is a no no? I thought it'd give a little dimension to the page with a shadow but hey im no expert in design.

 

Well I did reduce the texts and emphasise the services they offer. I think Rockwell font works for the nav bar though but hey any suggestions are welcome. Also I think this sample is a little cleaner and neater than the white one above.

 

2cnbafo.jpg

  • Author

Don't always have to have the ugly button the button that is already on the page is fine.

 

A bit like this popup dialog is what I mean:

 

http://www.formget.com/tutorial/createpopupform/popupform.html

 

Dale.

Oh that makes more sense, but is that a good idea for mobile users though?

Thanks for the reply guys,

 

just one question why avoid something that 'pops'? So drop shadow is a no no? I thought it'd give a little dimension to the page with a shadow but hey im no expert in design.

 

Well I did reduce the texts and emphasise the services they offer. I think Rockwell font works for the nav bar though but hey any suggestions are welcome. Also I think this sample is a little cleaner and neater than the white one above.

 

2cnbafo.jpg

The idea of a website is not to make things look pretty, the idea is to make the content the most important thing, shadows, bevels, gradients etc all remove attention from the content, making them bad.

  • Author

The idea of a website is not to make things look pretty, the idea is to make the content the most important thing, shadows, bevels, gradients etc all remove attention from the content, making them bad.

Oh right, I will keep that in mind. So I shall remove the shadows in my design.

Don't discount using drop shadows entirely just be sparing and tasteful in the way you use it.

 

When shadows arrived they were hideously overused. However a tiny amount of drop shadow on something like a button can make it seem to stand out and make the user realise it is not only clickable but they desperately want to click it.

 

Never slavishly close your mind and follow trends in design like a sheep. The fact that your site doesn't follow these template designs may make the difference between it standing out or just being one of the rest. Somebody, somewhere must at sometime break the mould and have an original idea with regard to design or we wouldn't progress and there wouldn't be new trends to slavishly follow.

  • Author

Don't discount using drop shadows entirely just be sparing and tasteful in the way you use it.

 

When shadows arrived they were hideously overused. However a tiny amount of drop shadow on something like a button can make it seem to stand out and make the user realise it is not only clickable but they desperately want to click it.

 

Never slavishly close your mind and follow trends in design like a sheep. The fact that your site doesn't follow these template designs may make the difference between it standing out or just being one of the rest. Somebody, somewhere must at sometime break the mould and have an original idea with regard to design or we wouldn't progress and there wouldn't be new trends to slavishly follow.

Thanks for the reply, yeah I wouldn't overuse drop shadows will only going to use it when I think its nice to have it.

 

Anyway moving away from shadows, mind criticising my follow up template not a big change but yeah just would like to know your opinion and suggestions to improve it.

Edited by _webbie00_

bit of a generalisation :)

"The idea of a website is not to make things look pretty, the idea is to make the content the most important thing, shadows, bevels, gradients etc all remove attention from the content, making them bad."

 

the use of shadows, bevels and gradients subtly when they support the message and branding are perfectly legitimate

  • Author

bit of a generalisation :)

"The idea of a website is not to make things look pretty, the idea is to make the content the most important thing, shadows, bevels, gradients etc all remove attention from the content, making them bad."

 

the use of shadows, bevels and gradients subtly when they support the message and branding are perfectly legitimate

Okay, the thread seems to be stuck whether to use blending option in photoshop or not to make things pop. I will keep in mind or at least the way I'd design my website is only use shadows, bevel and etc is when its necessary or to emphasise a certain part of the design to guide the visit or whatever.

Edited by _webbie00_

And I bet if I spent 30mins searching around I could find a couple of articles espousing the continued use of them.

 

I wouldn't stop using something simply because some blogger thinks it's 'uncool'. I dare say within 12 months the same ****wits will be chortling at and deriding the trendy 'Flat' designs they are currently praising.

 

Ultimately the site is designed to capture the user, not please the client or for the designer to win the plaudits of their peers.

And I bet if I spent 30mins searching around I could find a couple of articles espousing the continued use of them.

 

I wouldn't stop using something simply because some blogger thinks it's 'uncool'. I dare say within 12 months the same ****wits will be chortling at and deriding the trendy 'Flat' designs they are currently praising.

 

Ultimately the site is designed to capture the user, not please the client or for the designer to win the plaudits of their peers.

 

You are referring to flat design but it has not been shown or as yet had enough time that its not simply a 'trend' it could be a movement, in fact flat design has been around long before the web, it was created by the Swiss in the 1950's so I would class it as a movement if you look at it like that

 

Yes, you could find an article "espousing the continued use of them", then again I could find an article on UFO's, Big Foot and the Loch Ness Monster, it does not make them any more factual, but when it comes to good design it has been shown in a factual way, using theories and truths as to how and why it works. Try and find an article with any decent weight that tells you to use it within design, one where they have a proper reputation as designers and I will rescind my remarks.

 

you obviously dont understand design as lets take flat design as an example, its not about appeasing the designer, its less about the design and more about the content, its putting your eyes where they need to be, on the content, removing all the extra junk does that straight away.

 

quite simply, everything I know as fact tells me you are wrong.

  • Author

Alright then people lets put the shadows, gradients and bevels aside. Really, we can discuss that in another thread I'm willing to open one if you'd like. I'm no expert in design that's why im here asking for suggestions and opinions regarding my initial drafts.

 

If you have good video tutorials about design then that'd be great. But before that is the 2nd attempt looks okay than the first ones?

Both layouts are very old trends. there are alot of margin padding errors that can be improved. layout with white is better then other.

  • Author

Both layouts are very old trends. there are alot of margin padding errors that can be improved. layout with white is better then other.

Thanks for you feedback. So I tried another attempt to improve a simple web design for a builder site and I came up with this. I left the red grid in the background so I can or people can see the padding too.

 

I used Museo & Lao UI Fonts.

 

ibh17b.jpg

Thanks for you feedback. So I tried another attempt to improve a simple web design for a builder site and I came up with this. I left the red grid in the background so I can or people can see the padding too.

 

I used Museo & Lao UI Fonts.

 

ibh17b.jpg

It's looking so much better, great font combination, a little classic, would make the circles smaller though and check the padding above and below each bit of content, seems to me as if you need to spread it a little.. Same in the footer.. Other than that it's a 200% improvement.

  • Author

It's looking so much better, great font combination, a little classic, would make the circles smaller though and check the padding above and below each bit of content, seems to me as if you need to spread it a little.. Same in the footer.. Other than that it's a 200% improvement.

Thanks for your feedback. Aha glad im slowly improving. I will check the padding in a bit but I think each content's padding is about 20px well except the content where the address and etc are.

 

Did you mean increase the padding a little bit more to spread the contents?

think about it in the terms of making the content more defined, not spreading it, make it simpler to read and look at so it also offers a little breathing space for your eyes.

  • 3 weeks later...

Hi,

 

So I'm starting to get in to a little bit of design as I'm a developer but yeah tried designing a simple website. Just wondering which home page do you prefer? and which one do you think will work?

 

Thanks

 

home_landing_page.jpg

 

home.jpg

I choose the 2nd Design, You by no means get a second opportunity to make a first impression. That’s why your homepage is unquestionably one of the most essential pages on your website.

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.