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.

Bold sidebar colour ideas, please.

Featured Replies

Today's the last day of my New Year's holiday and I've enjoyed tinkering with my site, and stopping by this forum.

 

Truth be told, I worry about being a bit of a joke on this forum sometimes - especially when it comes to the design of my own site, colours, etc. I still have a lot to update, change, and learn.

 

I wonder if you could offer any colour ideas for my sidebar, please?

 

I appreciate that sidebars are not absolutely necessary nowadays, but I'd like to keep mine for now.

 

At the moment, it's a bland grey color which I feel really doesn't inspire or complement the site at all, but it felt safe as a design decision, for some amateur reason, I expect. (#FCFCFC)

 

I've put up 2 images. One of the grey #FCFCFC, and another of a quick bold vivid example color #DE5929.

 

A bold, vivid, stronger color will hopefully make the site pop a little, and give it some solidness and personality, I'm not sure.

 

When I research color for websites, people gravitate to blues and greens, etc. maybe. I have liked a couple of almost golden brown color tries before, but I'm ultimately not sure what the right idea is to fit in with everything else.

 

Is the #DE5929 better than the #FCFCFC?

 

Is a more vivid colour the way to go? How do you feel about the DE5929, for example?

 

If you can recommend any bold colours, could you please suggest I try them?

 

It would be an interesting idea if we could voluntarily pay this forum via PayPal, so that members could somehow benefit from making a group decision on certain topics. Like a poll you pay for. (Only a little money, though. I'm not rich. This hobby is my only vice.)

 

  • Author

Definitely #FCFCFC , the orange sidebar is too dominant.

 

Hmm. Really? Thanks. I worry that it's dark and not ambitious enough. Thanks for the vote.

 

Unfortunately it also depends on one's monitor, eye sight, taste. I liked a couple of other greys or off whites in the past, until I noticed that they came off as pinkish on other monitors. Nothing wrong with pink for other things, it just wasn't the expected outcome, so I'm interested in choosing carefully with this issue. Thanks.

the lighter version. maybe if it was on the left the heaviness would anchor the page but on the right at ifrst glance it looks like an ad! you could just make the seach section at the top of that column that colour so it stands out (if that's necessary) but otherwise just leave it as the first lighter version

 

hybrid.fw.png

Edited by dap

I agree, the grey (whilst looking ad-like) is less obtrusive than the orange version. That wouldn't be hard though.

 

But, that being said, I understand your particular concerns, Grant. I do not believe it needs jazzing up as it is a reference for anyone looking to find something once on the site - but that is not your primary content (which you want the visitor to look at) on the page.

 

If you wanted to add some colour, why not highlight your headings such as "COMPUTERS" and "WINDOWS" in the orange that you have used?

I would say it depends on what your intentions are, if you want the first thing people to notice to be the sidebar and not the content, go with the orange, otherwise I would suggest the grey, you don't have any type of description or bulletin describing the site, so you don't want people being distracted away from your content, that would be a huge mistake.

  • Author

the lighter version. maybe if it was on the left the heaviness would anchor the page but on the right at ifrst glance it looks like an ad! you could just make the seach section at the top of that column that colour so it stands out (if that's necessary) but otherwise just leave it as the first lighter version

 

hybrid.fw.png

 

Thanks dap. I think I'll just leave it then. It's nice to hear from fresh pairs of eyes. When you've been looking at the same thing for ages, I suppose we become immune to different perspective and ways of thinking. Thanks

  • Author

 

I would choose the grey over the orange, not by personal taste but simply because of the hierarchy, this may help: https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/

 

Thanks robbydesigns. I just got back from work and I'm reading that link right now, about dominant elements and ways of communicating. Thank you.

  • Author

I agree, the grey (whilst looking ad-like) is less obtrusive than the orange version. That wouldn't be hard though.

 

But, that being said, I understand your particular concerns, Grant. I do not believe it needs jazzing up as it is a reference for anyone looking to find something once on the site - but that is not your primary content (which you want the visitor to look at) on the page.

 

If you wanted to add some colour, why not highlight your headings such as "COMPUTERS" and "WINDOWS" in the orange that you have used?

 

Thanks MG1878. I'll try highlighting the headings tonight and see how it looks. (I'm usually always tinkering with something, just in case it suddenly turns into a viral masterpiece!)

Edited by Grant Barker

  • Author

I would say it depends on what your intentions are, if you want the first thing people to notice to be the sidebar and not the content, go with the orange, otherwise I would suggest the grey, you don't have any type of description or bulletin describing the site, so you don't want people being distracted away from your content, that would be a huge mistake.

 

Thanks Fuzzy Logic. I wonder if there might be a better grey out there. I recently tried some subtle patterns (backgrounds) via this post in the Useful links for designers/developers thread. Some seemed like potential candidates. I liked this one (for about a day), but wasn't so sure after that. It becomes like an addiction and each subtle change seems like a daily fix. Anyway, thank you for your advice.

Thanks Fuzzy Logic. I wonder if there might be a better grey out there. I recently tried some subtle patterns (backgrounds) via this post in the Useful links for designers/developers thread. Some seemed like potential candidates. I liked this one (for about a day), but wasn't so sure after that. It becomes like an addiction and each subtle change seems like a daily fix. Anyway, thank you for your advice.

Can I be really honest, just to help you understand why you are having so many issues

 

The biggest problem yoy have is the imagery you are using, it is soooo 2002, when the world was using these ugly stock images or icons, large, very colourful and complex.. I know you have put in a lot of work, this is the reason I have not mentioned it up until now, but in all honesty, you need to simplify your images to simple icons OR change them to photos, here is an example of how the type of information you provide could be structured (although the information on this site is different) http://travisneilson.com, he does video tutorials etc, but the imagery and the structure etc just add to the interest which would keep people on the site.

  • Author

Can I be really honest, just to help you understand why you are having so many issues

 

The biggest problem yoy have is the imagery you are using, it is soooo 2002, when the world was using these ugly stock images or icons, large, very colourful and complex.. I know you have put in a lot of work, this is the reason I have not mentioned it up until now, but in all honesty, you need to simplify your images to simple icons OR change them to photos, here is an example of how the type of information you provide could be structured (although the information on this site is different) http://travisneilson.com, he does video tutorials etc, but the imagery and the structure etc just add to the interest which would keep people on the site.

 

Thanks for that. Actually, I do like your honest approach, and I do know exactly what you mean. That's a great example, too. I prefer to go with photos more than icons. In fact, every site I regularly visit (mostly computer/tech related) have all been using stock photos for years.

 

I know that there are some great stock photos available (Adobe Stock for example), although I can't justify paying for any at this time.

 

As a quick test, I can see that the site would look very different, and require a fair bit of redesigning, (especially that busy sidebar now).

 

http://travisneilson.com has a popular YouTube channel, and it looks like there are many things to learn.

 

Thank you for your time.

Edited by Grant Barker

 

Thanks for that. Actually, I do like your honest approach, and I do know exactly what you mean. That's a great example, too. I prefer to go with photos more than icons. In fact, every site I regularly visit (mostly computer/tech related) have all been using stock photos for years.

 

I know that there are some great stock photos available (Adobe Stock for example), although I can't justify paying for any at this time.

 

As a quick test, I can see that the site would look very different, and require a fair bit of redesigning, (especially that busy sidebar now).

 

http://travisneilson.com has a popular YouTube channel, and it looks like there are many things to learn.

 

Thank you for your time.

 

That would be a huge improvement.. Hmm ;-)

  • 2 weeks later...
  • Author

Did you try a color test for both of the colours?

 

Text color test

http://colorpicker.cc/Test-Text-Color/DE5929

Background color test

http://colorpicker.cc/Test-Background-Color/DE5929

 

Text color test

http://colorpicker.cc/Test-Text-Color/FCFCFC

Background color test

http://colorpicker.cc/Test-Background-Color/FCFCFC

 

Thanks shengguow for the suggestion and those useful links.

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.