blog design

When More is More: 5 Non-Minimal Blog Designs

08/26/2014 by Jennifer 7 Comments

Minimal or “flat” design is a strong, contagious trend in the blog community. I could list a hundred reasons why I think it’s a good idea. A minimal blog design keeps things clean and simple. It lets your content shine. It is easier to navigate. It’s professional. And so forth.

But when something becomes really over-the-top trendy, it causes us to look at opposite trends with new eyes. With the rise of minimal blog designs, colorful and complex layouts are catching my attention more and more. I think it takes a whole lot of talent to create something that is bright and detailed, yet cohesive and well-branded. I decided to round up a few non-minimal blog designs that I think are amazingly well-done.

1. Wish Wish Wish

2. A Beautiful Mess

3. Maiedae

4. Bright.Baazar

5. The Beauty Department

What do you think of these designs? Do you like the addition of crafty touches in websites and blogs, or are you more of a minimalist?

5 Creative Ways to Customize Your Navigation Menu

07/14/2014 by Jennifer 4 Comments

There are so many navigation menus that I absolutely love over here in Blogland. It’s a small part of a blog, but also one of the most important elements. There are a trillion options when it comes to customizing the ol’ navbar. These are a few neat ideas if you feel like fancying up (or fancying down) your navigation menu.

1. Make Your Navigation Menu Stick to the Top
Having sticky blog elements is all the rage right now and I’m all about it. When your navigation menu scrolls with the page, it keeps your readers focused on what categories you have to offer. I love the clean floating navigation bar on Honestly WTF. If you are a WordPress user, there are a several handy plugins that will help you create your sticky navigation bar. I currently use this plugin. If you’re a Blogger user, try following this tutorial.

2. Use Hover Effects
Going overboard on hover effects can be distracting, but I also get distracted when there aren’t any hover effects at all! The hover effect says, “Hey! This is a link. Click it.” I think it’s nice to at least have one tiny effect even if it’s just a slight color change. I’m a big fan of the pretty design over on The Nectar Collective. Learn how to style your links with easy CSS codes here.

3. Add Hand Drawn Elements
Using hand drawn elements in your header and/or navigation bar will give your blog that crafty DIY feel and make it more fitting to your unique style. Madalynne’s blog design is so dang cute. There are just enough doodles to keep the layout clean and the hand drawn elements are entirely relevant to her craft. With a little help from a tablet and some CSS coding, you can easily add crafty handmade drawings to your navigation menu. Alternatively, you can design your blog on Photoshop or a similar program and hand it over to a web developer to add all the magic codes.

4. Include a Drop Down Menu
Drop down menus are perfect for when you have such an abundance of categories, you can’t possibly fit them all neatly into a menu. If you have several topics, a good way to organize them is to choose 4-5 main categories. Then file your smaller categories into the larger ones. For example, on my blog I have many features related to style: dress up, window shopping, fictional style, gift guides, beauty, etc. Rather than listing all of these, I would file them under the broad category “style”. Here is a straightforward guide to drop down menus that even shows you how to customize your menu using CSS.

5. Keep it Simple
Sometimes less is definitely more. Fancy navigation menus are fun, but keeping things minimal creates an completely different vibe on your blog. Bekuh Browning’s site is designed so well. Her navigation bar is simple and to-the-point, yet I still want to click every button and read on forever.

Admiring any navigation bars (or blog designs) these days? I’d love to see them!

Making Product Collages for your Blog

07/11/2014 by Jennifer 20 Comments

Hi there! I’ve created a screencast tutorial to share how I make product collages for my blog posts using Photoshop. I wanted to keep it short and sweet, so it is pretty simple. Enjoy!

Photos Used:
1. Bella Sunglasses – Ruche
2. Just my Cup of Tea Cup – House of Rym
3. Open Heart Ring – Moorea Seal
4. Pineapple Ice Trays – Anthropologie
5. Curve 45oz Teapot – Red Sail
6. Golden Ratios Boxed Candle – LEIF
7. Little Guy Earrings – Kate Spade Saturday
8. Mountain Tote Bag – Nell & Mary
9. Senegalese Knitting Basket – Territory

Sheesh, videos are awkward! But sometimes you’ve gotta have them. Pardon my squeaky voice and the fuzzy quality. Have a fantastic, summery weekend. :)

Intro to CSS + Cheat Sheet

07/08/2014 by Jennifer 8 Comments

Over the past couple of years, I have grown to love CSS so much. It’s a very exciting feeling to completely style a website or blog only using codes. It’s like learning another language. A really nerdy (but fun) language. If you’re not too familiar with CSS yet, read on!

CSS? It’s like HTML right?
CSS and HTML are not the same thing, but they are definitely besties. HTML (Hyper-text Markup Language) is what creates the structure of a website while CSS is how we style the website. CSS stands for Cascading Style Sheet. The “cascading” part comes from the fact that you can build on your stylesheet and override old codes. HTML knowledge is valuable but isn’t enough when it comes to really customizing your blog or website. Adding CSS is wonderful because you can just add little codes to a stylesheet without messing up the framework of the site.

How do I add CSS to my blog?
CSS can be added to a blog a couple different ways. On Blogger, the “Add CSS” option is in the Template Designer under the Advanced tab. Many WordPress themes come with a Style Editor that lets you add CSS, or you can install Jetpack which gives you the option to add to the stylesheet. If you’re dealing with plain old HTML files, you have a few options. I recommend having an external style sheet because it keeps your codes more organized. You can learn more about that here.

What are selectors and how do I use them?
A selector refers to the element you are stylizing. Maybe it’s your entire header or just your navigation bar. A selector can be an id, a class, or a whole section of your page. An id always begins with a hashtag and a class begins with a period. The class selector styles many elements within that class while the id selector only styles one main element.

The cheat sheet above shows some properties you can use in your CSS to style your blog or website. Every property must be followed by a colon, a value, a semi-colon, and a closing bracket at the end of the last property. Here’s an example of what my CSS might look like if I were styling my navigation bar:

A few trickier properties defined + examples
Display – how the element is placed on the page (display:block; display:none;)
Float – allows elements to be placed side by side (float:left; float:right;)
Clear – decides where the element on the next row will be in relation to the previous row (clear:both; clear:left;)
Z-index – sets the order in which elements are layered/stacked (z-index:1; z-index:9999;)
Overflow – decides what will happen if the content overflows the element’s box (overflow:hidden; overflow:scroll;)
List-style-type – sets the marker at the front of each list item (list-style-type:none;)

There are so many more CSS properties that you can add to your stylesheet. These are just the ones I happen to use most often. Specific definitions of each CSS property can be found here.

Thank you for letting me be nerdy today. Happy coding!

Redesign

04/09/2013 by Jennifer 11 Comments

For the past week, I have been working on a little redesign for this blog. I am really happy with it! I wanted more color and more simplicity, which can sometimes be an oxymoron. As you can see, I didn’t flip the whole page upside down. Just changed some fonts and graphics. It is still a work in progress, but I’m almost there.

Right now, I’m working on making new sponsor buttons (like the one above) to match!

Hope you like it. :)

New Blog Design

09/27/2012 by Jennifer 10 Comments

Well, if it isn’t another post about my dissatisfaction with my blog layout… oh I change my mind a lot. I wanted to turn this into something simple, plain and easy to read, but also exciting! I changed it a bunch of times (you may have realized. sorry about that.) and I never truly loved it.

When I put too much detail into my blog or make it “theme-y”, I end up getting tired of it quickly. This is why I wanted to go with a simple, minimalist theme. But…I couldn’t resist some color and (okay, fine) flower clipart too. The Ink Nest keeps coming out with amazing new clipart and I keep buying it. I am addicted to well-designed floral clipart. Seriously.

I’m also addicted to e-courses. On Monday night, I came across a CSS workshop by Katrina at Pugly Pixel. I spent the whole night and the whole next day being overjoyed about CSS and HTML, probably annoying my roommates so much. Last night, I began implementing certain features into my own blog, but it didn’t go as smoothly as I hoped it would. I know it’s always a good idea to try things out on a test blog before changing codes on your public blog, but I couldn’t help it haha. I’m sorry if you saw my blog while it was all weird looking.

Here are the new features:

I’m embarrassed to tell you just how many hours I’ve been sitting on this couch having CSS fun, but I’m finished!! Yay! I’m really happy with the new design. It’s simple. There are pops of color. I think I will be happy with it for a while. I might tweak it a little here and there but I’m digging the two-column thing. Less to worry about. :)

Now it’s time to really prioritze. I have so many pictures to edit, but I also need to catch up on some sleep. Hmmm… I’ll choose sleep for now.

ps. I’m still accepting sponsor swaps for October! There are currently 8 spots left :) Click here for details.