2009 March | the pixel boutique | blog, web & print design

Archive for March 2009

Design Focus: Little Jet Set

By Nicole · Comments (0)

Tuesday, March 31st, 2009

When Little Jet Set wanted to launch a blog to compliment their website, they approached me about creating a design for them. Little Jet Set is the place to go for modern, functional and innovative products to make traveling with your kiddos just a little bit easier. You will find fun and educational toys and games, functional and durable travel clothing and gear and much, much more.

Little Jet Set has been featured in Parents Magazine, Star Magazine and Real Simple: Family and more.

The Little Jet Set Blog keeps you up to date with new product information, travel news and a glimpse into the real lives of co-founders Hana Wolf & Nisha Cordero.

The blog is hosted on Blogger and the main goal was to compliment the website by using the same design and color scheme. Stop by and welcome Little Jet Set to the blogosphere…and check out all the wonderful travel merchandise they have to offer!

Comments (0)

Q & A: Creating Header Links In Blogger

By Nicole · Comments (5)

Thursday, March 26th, 2009

Today I’m tackeling a question from Lissa. She asked:

How do you make target links in the header – an example of what I mean is http://eightcrazy.blogspot.com/

Well Lissa, in the world of web design, there seems to always be 1000 ways to do the same thing. One person will use one method, while another person will use another. There are design standards, but within that, there is some freedom and flexibility.

I think from looking at eightcrazy‘s source code (btw, you know you can peek at someone’s source code by right-clicking on the page and selecting “view page source”, don’t you? Its super handy.) that she did a lot of template customization (and btw again…Shannon of Eight Crazy is a super talented designer and all-around cool gal! Check ‘er out.).

She probably started with a basic Blogger template and went into “Layout” and “Edit HTML” and tweaked to her heart’s content. My other guess is that she did what’s called “slicing” on her header when she created it in Photoshop. She divided her header into four sections, using a very clever design. (sorry Shannon…I hope I’m not giving away all your secrets!). Within Photoshop, there is a “slice” tool that divides your design into smaller pieces and creates images from them. In her HTML code, she arranged her slices, wrapped them in anchor tags ( <a href=”yoururl.html”> ) and thus created a full header.

Eightcrazy is a great example of what you can do with a little creativity and coding. Blogger offers a good starting point for people who just want to set up a basic blog and start writing. But there are also a lot of customization capabilities built in if you dig around a little bit. Here are a few resources I use when working with Blogger:

http://tips-for-new-bloggers.blogspot.com/

http://www.bloggertipsandtricks.com/

http://bloggerfordummies.blogspot.com/

Hope that answers your question, Lissa. Thank you, Shannon for providing today’s visual aid!

Comments (5)

Design Focus: John Maxwell On Leadership

By Nicole · Comments (0)

Tuesday, March 24th, 2009

I had the great privilege of designing a blog for leadership expert, John Maxwell. Dr. Maxwell is an internationally renowned speaker and author who has sold over 16 million books. He is the founder of EQUIP and INJOY Stewardship Services and speaks annually to groups such as Fortune 500 companies, government leaders, and the National Football League.

Dr. Maxwell has entered the blogosphere with his new blog, johnmaxwellonleadership.com. We designed the blog using WordPress. Both the blog and twitter page (@johncmaxwell) coordinate with the design of his website and books.

Head on over and welcome Dr. Maxwell to the blogosphere!

Comments (0)

Q & A: How to Add a Twitter Badge

By Nicole · Comments (7)

Tuesday, March 17th, 2009

Here’s a great question from Sarah from Mom Balance:

“How do I add a Twitter badge/link to my sidebar”.

Its not hard, Sarah…here are the steps:

1. Depending on what platform you are on (Blogger, WordPress, TypePad), you’ll need to create a new sidebar item or widget (or “gadget” in Blogger; “TypeList” in TypePad).

2. Find a graphic you’d like to use as your link badge. There are a whole bunch if you Google “Twitter bird” or “Twitter badge”. Here are a few…

(Also, you can just use a simple “follow me on Twitter” phrase.)

3. If you decide to use a badge, you will need to follow the same process to upload it to your server as you would any other graphic, so we can point to it in the next step. If you use a service like PhotoBucket to upload images to your blog, do that now, and take note of the URL (location) of the image.

4. Now, in your new sidebar widget/gadget/typelist, insert this code, replacing the text in red with your information:

<center>
<a href=”http://www.twitter.com/yourtwittername“>
<img src=”http://www.yourimagelocation“>
<br>
follow me on Twitter
</a>
</center>

5. Close and save the widget and it should show up looking something like this:

follow me on twitter

6. There is also a way to add a feed widget directly from Twitter that displays your most recent tweets. To add that to a sidebar, follow the directions here.

Not so hard, was it? Any questions?

Comments (7)

Q & A: Photo Hosting Options

By Nicole · Comments (1)

Thursday, March 5th, 2009

Thanks to all who entered my Q & A Twitter design giveaway a few weeks ago. You all gave me some great material, and helped me learn what people really want to know when it comes to blogging.

The first question comes from Liz at Goddess In Progress (who has a fabulous blog about raising twins!). Liz asked:

What do you think are the pros and cons to using a photo hosting service like Flickr or Photobucket, versus just uploading them to your hosting provider, be it your own domain or something like Blogger?

Well Liz, that’s a great question and I had to do some Googling because my first thought would be to say there’s no difference. Let me share with you what I found out.

There are several good options for free photo hosting services. PhotoBucket, Flickr, Webshots, SnapFish and ShutterFly are just a few of the many options on the web today. There are several advantages to using a photo sharing service.

1. They’re free. This may be a mute point, because if you have a blog, you already have free hosting or paid hosting. However, if for some reason you had a limited amount of space and a lot of photos, it might be helpful to host them elsewhere.

2. Editing features. A lot of people don’t own the latest, costly, version of PhotoShop. One great feature of these services is the photo editing capabilities that come with them. You are able to make some simple changes to your photos after uploading…for free! You can crop, change contrast/brightness, etc. This is a great option for bloggers.

3. Extra exposure. If your photos are a big part of your blogging practices, its probably beneficial to have them on a photo sharing service that will increase your exposure and traffic. You can add tags to your photos and gain that much more visible for yourself and your blog.

4. Sharing. This is somewhat related to the above point, but its handy to have your photos already hosted on a sharing/hosting site so you can share them with family, order prints or design photo gifts. I’ve used SnapFish for years for this very reason.

Now, two Cons…that aren’t really cons. I initially was going to caution you about the fact that most services are open to anyone and your photos can be copied and used without your permission. But as any blogger knows, you take on this risk the minute you add your first photo to a post. The best bet for protecting yourself and your photos is to add a personal watermark. A great example of this is what Beth at I Should be Folding Laundry does with hers. She has a photography business and obviously doesn’t want her beautiful pictures used without her permission. She adds a tasteful watermark to her photos in a non-distracting way.

Lastly, one may think that there is risk of a photo hosting server going down and your photos not being available when needed. But again, its a mute point. Servers are servers and they all have the potential to go down at some point.

Liz, hope that somewhat answers your question…in a long winded sort of way!

So what are your thought on photo hosting services? Have a favorite? Something to add?

Comments (1)

The Truth About Type

By Nicole · Comments (0)

Tuesday, March 3rd, 2009

Have you ever visited a blog and left early, simply because of the look? As a designer, I try not to be a “design snob” and pass judgement too quickly, but the overall look and readability of your blog is extremely important. Your blog’s first impression will be made (and your blog judged) in the first few seconds of a visit.

There are many factors to getting the best first impression out of your blog, one of which is the use of type.

Way back when in design school, we spent a whole lot of time on typography and the theories of best practices in using type. Tons of research has been done on what font, size, justification should be used when.

Here are a few tips for getting the most out of type on your blog.

1. Don’t center your posts. There is nothing harder to read than a large block of centered text. Small phrases or titles are fine, but not whole paragraphs. You tell me; which is easier on the eyes?

Typography is the art and techniques of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and (kerning) adjusting the space between pairs of letters. ^[1]

So do the blogosphere a favor and left justify your posts.

2. Pick a readable font. There are two types of font for the use of body copy: serif and san-serif. What is a serif, you may ask? Serifs are the little “feet” or extensions on a letter. Here’s an example.

This letter is a serif:

This letter is a sans-serif (“without” a serif):

Your best option for the body of your post is a readable font, either serif or sans-serif, such as Times, Helvetica or Arial. Not only are these readable fonts, they are all very common and probably installed on most computer systems. If you found a font you just loved so much that you had to use it, chances are good that it would be replaced with a default font on your visitor’s computer anyway. So stick with the web-safe, standard fonts and you will be loved. For more on standard web font, go here.

3. Use contrasting colors. Avoid using similar colors for your background and type, like blue on green. Often bloggers will use every color in the rainbow in their blog. Not only is it unappealing, but it is difficult to read. Stick with a light background with dark text or vise versa. You dont want to tire out the visitor’s eyes.

4. Use a readable font size. As I near 30 + 10, my eyes are definitely not what they used to be. I’m finding I squint at a lot of blogs. On whatever blog platform you are on, you control the font size on virtually every section. Choose a font size for your main blocks of text that is no smaller than 11 pts. That way you’ll be sure to not turn off your old mature experienced readers, like me. Trust me. You’ll be here sooner than you think.

5. Be cohesive. There are literally hundres of thousands of fonts out there. And for some, its tempting to use all of them. But please, don’t. Between your titles, sidebar items and posts, try to be cohesive with your font faces. Don’t use too many different fonts on your blog. In this case, less is definitely more.

1. Pipes, Alan. Production For Graphic Designers 2nd Edition, Page 40: Prentice Hall Inc 1997