Skip to:

Site-Design / improving Site-Logic by colors ?

  • abcde666


    I am probably too dumb for that, so I thought asking my question here in the forums. This is mainly a question for theme-designers and website-navigation-specialists:


    My target-group of users are people with the age of 50 years and above.

    So I actually do like the layout of the default page very much, as I think people in that age-group will understand the logic of the website.

    The only thing I would like to improve is by using colors, so that people will understand the navigation-logic of the website even better. So I do not want to change the navigation, but just the colors.


    The default BP-design at is using grey-colored-bars as graphic elements, like having 3 different grey-colored bars for each section of the website:




    There are also many other grey-bars, grey backgrounds, etc. at that default-website.


    So my question:

    Is there a chance to make the design not based on left / center / right, but rather based on topic – like Groups, Members, Blogs ? Again, I do not want to change the layout, I just would like to change the colors and by doing so, improve the navigation-logic for the user.


    I was thinking about using 6 different background-colors, lets say a different bg-color for each of the pages of “Home, Blog, Members, Groups, Forums,Blogs”.

    But then I looking at the pages like “My Page” and “My Profile” – so which one of those 6 colors should I use there in order to make it logically for the user ? So that the user will understand at which place of the website he currently is ?

    All I want is to make the navigation and logic for the user as simple as possible, by using colors.

    Probably 6 colors is too much – I read somewhere that you usually should not use more than 3 colors when designing a website.

    Is there any way to improve the simplicity by using colors in the right way ?

    Appreciate your help !


Viewing 4 replies - 1 through 4 (of 4 total)

  • Tore


    It’s not a bad idea even if I’d rather have a more united navigation (and no userpages with lots of options hidden there).

    The things you’re talking about should be easily done with CSS. As long as you’ve got php-files that are specific for the places you intend the color change. You’ll have to put in some new “div id” to make it happen. That means modifying BP-default-files and using them in a child theme, as far as I understand (ie copying the files over to the child).

    I don’t understand question 3.

    While colour is of course a huge aspect of design and can make the difference between a confusing page and a rational page or a readable page and an unreadable page… I’m not convinced that changing background colors or navigation bar colors does much to improve one’s sense of place on a website. It might actually confuse people. You are assuming they will form the connection that green = profile… blue = members… etc. But it may be just as likely that they will say to themselves “What the… why do the background colours keep changing?”.

    Some things people have come to understand and even expect perhaps are left hand navigation bars and breadcrumbs. However, that really only makes sense on a site that’s all about hierarchy. Sites like BuddyPress and Facebook etc. are not organized in that way… they are more about functionality and activity and relationships. There’s no deep hierarchy. Although there could be within your posts and pages (the Blog section).

    Anyway, if you’re concerned about them knowing there they are… perhaps just redesign the main navigation bar to stand out more. Also, instead of two side-by-side bars (like on the Profile) a single bar with break-out navigation would be more conventional. All of the above would require (ideally) good design skills, HTML/CSS, maybe a little PHP… and an understanding of usability.

    John James Jacoby


    It’s my experience that people recognize images and color faster than they recognize words. That doesn’t mean they will naturally gravitate towards those colors however.

    For an audience of 50 and above, it’s probably best to keep the content on the page and the options for them to click on to a minimum, and limit the site to only having 1 sidebar with limited options. Avoid menus that use hovers or suckerfish as they have a tendency to click the top level item to show the menu which basically reloads the page on them. Avoid complex search boxes with drop downs to select what kind of search they want.

    So basically, ditch the buddybar, ditch the search area. Use gentle colors with clear and obvious icons to assist the user.

    If you’re going to use color, use it to break apart areas of the screen instead of areas within the site. By doing this, they can remember to themselves “oh yeah it’s in the orange area, and the search is always blue in the corner” kind of logic.

    How many times have you said to someone ‘Click “Home”‘ and they have no idea where it is on the screen? It’s because at any point the screen has 100 words on it, and recognizing which-one means what-where is hard to do at a glance. Being able to say “go up to the blue area and click the word logout with the icon of the stop sign” gives people natural visual cues to learn how to navigate the website in whatever way they will retain it. That way when you’re not around to help them, they will either remember the color, the icon, the word, or the placement, since everyone learns and remembers differently.

    Hope that helps? :)



    Thank you guys for all your valuable input !!!

    The thin I am afraid of is the BuddyBar and the Dashboard. So I am not sure how to get rid of the Users-Dashboard, but still give them an easy way to post a “Simple” Blog.

    I was thinking about using P2-theme for the Users own Blog, so that users can just make a Blog-Post without choosing their own theme and without all the Dashboard-options.

    I do not want the users to go into the Dashboard at all, but still giving them the option of “having their OWN blog”.

    Is there a way to do this ?

    Thanks again !


Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Site-Design / improving Site-Logic by colors ?’ is closed to new replies.
Skip to toolbar