Dear Marianne // 02 Blog Design Feedback

Dear Marianne: a monthly Blog Design advice column from DesignYourOwnBlog.com. Come and ask me anything about your blog's design every first Friday of the month!

Dear Marianne: a monthly Blog Design advice column from DesignYourOwnBlog.com. Come and ask me anything about your blog's design every first Friday of the month!

“How does my header look?”

“What type of font would you suggest I use for an accent?”

“Do I need more color?”

I know you have questions about your blog. Or maybe you just want me to take a quick look at your design and tell you what I think.

The First Friday of every month is now dedicated to the “Dear Marianne” Blog Advice column.

I’ll give each comment one quick tip. Questions that require longer answers may be saved for a future post.

The advice column is open today from 6am to 9pm MST so if you miss the window, you’ll have to wait til next month, so don’t delay! You may want to sign up below for my email list to get monthly reminders.

Now it’s over to you:

If you’ve got one specific question you’d like to ask me, leave a comment below.
If you just want me to take a look and give you a quick piece of advice about your blog’s design, leave a comment below. (You might consider checking the box “Notify me of follow-up comments by email” so you know when I’ve answered your question).
Don’t forget to leave your URL!

The wonderful thing about public advice is that everyone can learn something from each others’ blogs so be sure to share this as the more questions we get, the more you’ll learn!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

35 Comments

  • Nell says:

    I’ve been seeing a lot of sites recently with full width images in the header and a full width menu bar – see http://amandagenther.com/ – and I notice you’e also got a full width header on your site too.

    I was wondering if you could let me know what I’d need to do to make my header, menu bar and footer full width and remove the grey background – before I go out and buy a new theme.

    The site I’m trying to do it for is http://themilliondollardiva.com/
    Nell recently posted…New York for the Budget TravellerMy Profile

    • Marianne says:

      Hi Nell, you could manage it fairly easily by removing some of the max-widths in the CSS, for example in these classes:
      .site-container
      .nav-primary
      .footer-widgets

      Then:
      -Remove the top margin AND the border from .site-container
      -Remove the border from .footer-widgets. You could then add a background color to this if you wished your footer to have a different color background (like mine).

      Btw, the logo image (MDD-logo-360×164.png) has a bit of background showing up on the left side of it, so the image itself would need to be trimmed and re-uploaded.

      Hope this helps!

  • Deborah says:

    Hi Marianne. I have just done some training to be a facilitator for a kids program and I wanted to include a page on my site for this. Is it possible to have a different header and layout for this page?

    Regards
    deborah
    Deborah recently posted…How to solve that problem by getting CreativeMy Profile

  • Ana says:

    I recently started blogging and I’m still looking for something to better represent my blog. What are the two things that you would first do to improve the design of my blog?
    Thank you and have a great day! 🙂
    Ana recently posted…Sometimes You Just Need To Take A BreakMy Profile

    • Marianne says:

      Hi Ana! The first thing I would do is add an image of you to the top of the sidebar with a quick bio below explaining why new visitors should stick around. What is the benefit to them?

      The next thing I would do is remove the borders from the header image except the bottom one. It just looks like a box floating around the way it is. (I understand that’s how the theme was designed and not you) 😉

      Unfortunately I think the only way to do that on WordPress.com is if you enable CSS editing which you have to pay for. OR it could possibly be a setting in your dashboard? Look around your dashboard and see if this is something you can edit. Perhaps under Theme settings?

      If you do find that you are able to edit your CSS, let me know and I’ll be happy to explain what CSS code you need to remove the left, top and right borders.

  • Hi! I am currently working on a complete redesign for my blog. I’m moving from Blogger to Squarespace. I want to have a look that is relaxed, casual, yet still says – I’m here to make you think. I write about living overseas, faith & family. I don’t like really feminine designs, so I’m leaning towards using chevron and other geometric patterns in my design.

    So this is my “mood board” I have worked up so far – http://i948.photobucket.com/albums/ad323/whitconard/JM-mood-board-1-august-2014_zpscd503d8c.jpg

    I’d like to know what you think about the font combinations – are these the right san serifs to use with Jacques & Gille, or are they too boring/”safe”? Should I add a serif font? The capitalized bold will be for titles, nav bar, sidebar titles, etc. while Josefin is for the body and meta text.

    And of course, any suggestions you have for the color scheme as a whole (i.e. what colors to use where in the design) are quite welcome. 🙂 Thank you, Marianne!
    Whitney @ Journey Mercies recently posted…Six Simple Ways to Make Goals That MatterMy Profile

    • Marianne says:

      Hi Whitney. I LOVE the mood board, I really do! I can tell you put a lot of thought into it and I think it conveys EXACTLY what you are trying to do. At first I was at a loss when you said you wanted something that makes you think. I think that chevron pattern does just that. It also reminds me of travel (70’s airlines/tickets, etc) because the spaced chevron look like wings.

      The colors are perfect. I think they are not too feminine yet they are not masculin either, which I think is perfect for you.

      I don’t think the fonts are too safe. Jacques and Gilles is your playful, flamboyant font. The rest are anchors which keeps the script grounded. And good contrast too.

      I wish I had more to say, but I think you did a fantastic job. I can’t wait to see the final product!

      • Marianne says:

        Oh and as for where to use the colors, it’s honestly hard to say without playing around. Try out different things (use PicMonkey or Photoshop) and create a blog page or home page mockup where you place elements in a layout. This will help you decide which variation you like best.

  • Sahana says:

    Hi Maria ! I want you to look over my blog and share your comments and feedback.Thank you very much for your support & time. Not everyone will come front to do a help like you.

    • Marianne says:

      Hi Sahana,
      I’ll be honest, I am not crazy about the header image. The font makes me think of a Catholic church and I don’t think that’s what your blog is about. Also the colored images on the left of it are blurry and it’s difficult to tell what they are of. I’d suggest you look around at other blogs of similar topics and see what they are doing, what type of imagery are they using to portray what the blog is about?

      Also, like I mentioned to Ana above, your short bio blurb below your photo should explain to your readers why they should read your blog. People who come will want to know immediately what is in it for them, don’t make them search around for the why. Make it completely obvious so they don’t click away to the next blog.

      P.s. It’s Marianne, not Maria 😉

      • Sahana says:

        I am so digitally challenged Marianne 😛 that’s why I wanted a suggestion to improve.i love ethnic stuff which ended up in that font …I will work on your points …thank you very much for giving a honest comment.i really appreciate that:) Now let me go try something new or find someone who cam make it for me 🙂

  • Sahana says:

    Oops!! I forgot to add my URL.Here it is http://vikalpah.blogspot.com/ .
    Sahana recently posted…Take your Office supplies to next level using this DIYMy Profile

  • Raspal Seni says:

    Hi Marianne,

    Nothing specific, but it would be great if you could have a look at my blog and let me know anything I should change. I did leave some things as they needed more time including making a better looking header (oh yes, I need to change the e-book cover in the header. Anything other than that?)

    Also, my page load time, without the top bar is less than 1 second and that’s what I wanted – quick loading blog. I may try another top bar – hellobar if it has the same features as manycontacts.

    Also, couldn’t change the colors of the buttons at the bottom of the two testimonials without editing the CSS, so that’s okay for now.
    Raspal Seni recently posted…Five WordPress Theme Mistakes You Want to AvoidMy Profile

    • Marianne says:

      Hi Raspal,
      A few things… having the two Home links in the header is redundant. You could remove the one from the categories navbar. I would also consider switching the two navs – putting the categories below the header and the pages above the header. This is only because, aside from the About page, I reckon people will probably be more interested in the categories. That’s my opinion though, so take it for what it’s worth. 😉

      Another thing i would suggest is to choose some more interesting fonts. Helvetica doesn’t work on PC’s (only Macs) so it shows up as Verdana for me which i personally find a bit boring. The font size makes it a bit too heavy for the body copy in my opinion. I prefer something a little thinner, like Open Sans Light, Lato light, even Century Gothic, etc.

      Also maybe something a bit more interesting for the headings? And you’ll also want to decrease the line-height for the headings, it’s a little high right now.

      Are you sorry you asked? 😉

      • Raspal Seni says:

        Hi Marianne,

        All suggestions taken. Will do the changes tomorrow. As for the font, I dolike Verdana than others, but recently came upon Feed The Bot and loved the font size as well as the thin font.

        I checked the blog’s page source and saw it was using Roboto-Light. I installed and tested this font on one of my test blogs and loved it.

        Will be using the same font with the same size as on Feed The Bot. What do you say? Would it look better than Verdana? BTW, it’s Roboto is the default font on Android Ice-Cream (I don’t have an Android, though, so didn’t know).

        Can youexplain what do you mean by a bit more interesting for the headings? The headline copy of the posts? Will change the line height.

        Thanks for your suggestions. Very valuable and much appreciated. 🙂
        Raspal Seni recently posted…Five WordPress Theme Mistakes You Want to AvoidMy Profile

        • Raspal Seni says:

          Oh, why would I be sorry for asking? I accept all advice and if someone directly tells me my fault on my face, I actually appreciate that.

          This was not even near to that, BTW. 🙂
          Raspal Seni recently posted…Five WordPress Theme Mistakes You Want to AvoidMy Profile

        • Marianne says:

          Roboto is a great font and much more modern. I try to stay away from any fonts that come pre-installed in Windows as they are usually quite old and used way too often. With thousands of wonderful newer fonts available on Google Fonts (and other sites), why stick with the same old same old? 😉

          As for something more interesting for the headings, again just something other than the Windows system fonts. Have a look through Google fonts and find something that strikes your fancy. Take a look at the fonts chapter in my free ebook again for how to look for something that contrasts well with Roboto.

          • Raspal Seni says:

            More than a decade ago, I read in a book on writing better resumes, to use Verdana or Tahoma or Arial as the font. And, have always used one of these three. Verdana the most. Never thought times changed and those fonts are antiques now. 🙂

            Also wanted to use and stick to web safe fonts. Thanks for the advice, again. Haven’t gone through your e-book again. Will do that soon.
            Raspal Seni recently posted…How to Start a Blog/Website on a Shoe-string Budget?My Profile

          • Marianne says:

            That’s understandable Raspal. The rules used to differ between print and web, but now that so many wonderful fonts have been made into web fonts and are usable by almost everyone, it’s ok to use other fonts now and the “web safe” fonts (like web safe colors) notion is obsolete. Thankfully!!

  • Hi Marianne,
    I appreciate your helpful tips! Thanks so much for sharing your time with us. I have been fine tuning my design while also working with an ad network and promoting my own offers–trying to achieve the right balance. I would appreciate your feedback. Thanks so much, Cecilia
    Cecilia MyThriftStoreAddiction recently posted…Friday’s Find: Yard Sale Picnic BasketMy Profile

    • Marianne says:

      Hi Cecliia, you’re very welcome, I think this is a lot of fun actually! 🙂

      Ok so you want to find balance between promoting your stuff and your ads… First thing I would do is make a better image for your book in the sidebar. See how all your sidebar sections have a heading with that pink ribbon? Your book doesn’t. Then the book image itself should be much larger. I could barely read it. You might also consider moving it above “Lets’ Connect.” This would also bring the Follow on Bloglovin next to the social icons since they are all related.

      The Garden Tour in your sidebar…. does it need to be this high or would it be better to switch with your Etsy shop? I don’t get from the sidebar pic what Garden tour is or why I should even click on it, so if it’s that important, then you might add a description or something that tells a reader why they should click on it.

      Hope that helps! Thanks for participating!

  • Hi Marianne,

    Thank you for giving us some of your time!
    I won a premium theme, and I am planning to install it soon. I wish to know what color schemes would fits a beauty blog?
    My blog concentrates on natural ways to stay beautiful. Green, organic, and natural beauty tips are the key words for my blog.
    I love green, and I wish to use 2-3 colors for my new design. What would you suggest?

    Thanks in advance 🙂
    Dima Al Mahsiri recently posted…Giveaway: Win Azure Naturals Vitamin C Skin Repair Serum (Three Winners!)My Profile

    • Marianne says:

      Hi Dima, congrats on winning the new theme!

      As far as colors for a beauty blog, I like the idea of green especially if you are going for the natural, organic beauty angle. Perhaps a tan or light beige and a light aqua blue to keep it fresh?

      I will admit I can’t really say off-hand as I don’t spend much time on beauty blogs so my advice would be to study as many blogs as you can with similar topics and see what speaks to you. You may also want to check out some spa sites as I can see those having a similar feel.

  • Soma Rostam says:

    Hello, Marianne.
    I am a blog blogger, for a LONG while now.
    And currently, I have been trying to improve my blog. Change the header and the sidebar and add new stuff, etc.
    Can you take a look over at my blog and tell me what you think I should improve?
    Thank you SO MUCH
    P.S. I have been trying to learn a bit of HTML and CSS here and there, since I have a lot of free time these days 🙂
    here is my blog:
    http://insomnia-of-books.blogspot.com/
    Soma Rostam recently posted…Stacking the Shelves #1My Profile

    • Marianne says:

      Hi Soma,
      The first thing I looked for was an about page or a sidebar bio/pic and could not find anything. I highly recommend every blogger have this because people always want to know who the person is behind the blog, especially if they are going to ask you for a review.

      The second thing I would change is the font for the blog title. It feels a little too heavy for the softness of the pretty background image/colors. Perhaps removing the heavy dark border around the letters would help, but I would suggest a different font.

      Other than that I think it looks pretty good!

Comments are closed.