Hello,

I am working on my second website, which is my first Drupal site. I am not using very advanced techniques because I am self-taught and learning as I go; focusing on building a couple clean, professional, and simple educational sites. I have mastered the "simple" aspect lol, but just cant get the "clean" and "professional" look that I want.

My site is here: www.thefinanceplanner.com

I haven't finished tuning the responsive aspects, so it is best viewed on large screens right now.

What I am trying to achieve is to lay out the steps of finance planning using the both the home page and each top level menu item as a table of contents. These table of contents provide a snippet of information and include links to the detailed articles located lower in the menu order.

The problem I am seeing is that these table of content pages don't present their purpose very obviously. I am hoping that there are some experienced "stylists" here who have some ideas on how to improve usability.

Comments

sp_key’s picture

Hi,

A few comments from myself. (I'm no UI specialist btw but have worked with a few).

  1. Drop down menu is slow. I would optimise this. I think it needs to be almost instant
  2. It's hard to see which submenu I'm selecting given there is no highlighting when I move my mouse
  3. The Begin your Financial Plan header looks like a button. I would remove it
  4. I would add a Search box so that to allow people to find things easier. This is easy in Drupal
  5. I would consider removing ads at this stage. Get the traffic first.
  6. I don't particularly fancy the green you're using as well as your fonts, maybe you can investigate other themes?

Finally, I have not tried this in mobile. If you're asking for feedback on the UI, I would assume your theme is mobile friendly.

Thanks for sharing your site with us.
Good effort.

kloy23’s picture

Hello Kipling79,

It looks like you are missing some a:hover selectors for your submenues in your CSS. That will fix the issue of not being able to tell which submenu is being clicked. Also, your header does not scale on mobile devices (tested with Mozilla Firefox Responsive Design Mode). To fix this you may want to add width: 100%; to your .header__logo-image class.
IE:

.header__logo-image {
    vertical-align: bottom;
    width: 100%;
}

This will scale the image as page size changes, but is still not ideal for responsive design. Ideally you will want to split the logo image and "Your step-by-step guide to financial security" into two separate divs, and use @media queries to properly scale the header conditionally depending on the screen size of the device that is being used to view the site.

One other note:
Your headers (well, h1, and spans in this case) that use the class .page__title do not scale properly either. One quick option that you may want to consider is to use a @media Query to conditionally set the .underline and the .page__title classes to width: 100%, float: left; at the resolution that you notice the headers breaking. This may not be the ideal solution, but might help get you on the right track.

All and all, not a bad job at all.

From one self-taught designer / developer to another,
Good Luck to you, and let me know if you need any further testing.
Kyle

kloy23’s picture

Also, the "About Us" link is taking me to a "sandbox" subdomain. IE: www.sandbox.thefinanceplanner.com