Archive | Site Design

Yes, your logo matters

Yes, your logo matters

With all of the the hullaballo surrounding the recent MySpace and Gap logo redesign (and de-design, in the case of Gap), two things are clear:
1. People don’t like change
2. Your logo matters

A logo is a visual representation of your brand. It can be simple, it can be intricate, it can be clever, it can be witty, it can be anything you want it to be, as long as it’s clear and it’s you.

Consistency is key

Whether you’re a blogger, designer, writer, or an individual establishing your personal brand, it’s important to develop a mark that you can use consistently. It can be confusing to your audience if your site bears one logo, your cards bear another, and your products yet another! Imagine if one of your favorite brands did that: they’d look disorganized and unprofessional, even if their product was still great.

Please take heed: your site, your business cards, your labels, and your products should all bear the mark that represents your brand.

Simple is good

A logo doesn’t have to have a lot of bells and whistles to be great–as a matter of fact, simpler is often better. Think about your favorite international fashion brands!

If you don’t have design experience, a simple text logo will more than suffice. Creating a logo can be as simple as choosing an appropriate font, using a vector graphics program to create the image, and saving the file. You can follow these step-by-step instructions on how to design a simple text logo.

Looks are important

Fashion lovers know that aesthetics matter. And while substance is important–great content, incredible products, beautiful photos, etc.–how you present your brand is the first step to getting noticed.

Posted in Featured, How-to, Site Design, Tips & Advice8 Comments

2 tips to make your Blogger blog prettier

2 tips to make your Blogger blog prettier

Lots of people use Blogger because it’s simple and easy. There are plenty of built-in features that make it a cinch to set up a blog in minutes, but some of those features aren’t needed–or wanted–if you want your site to look more professional.

Two not-so-pretty things seen often:

  1. The Blogger navbar, which resides at the top of the page and can get in the way. It takes away from the blog design, a definite no-no for people who love style!
  2. The double-line border that encloses header text and images in the default Minima template–which often winds up off-center or with the photo overlapping if the header isn’t the right size.

Here’s how to do away with both:

Hide the Blogger navbar:

1.Go to Design>Edit HTML

2. Search (control + F) for the following line of code:

]]></b:skin>

3. Right before that line, paste the following:

#navbar-iframe {display:none !important;}

Ta-da!

Remove the header border

There are two ways to do this:

  1. Change the border color to transparent, or
  2. Edit the HTML code and change the border size to zero so it “disappears”.

To change the border color, go to Blogger Template Designer > Advanced > Border color. Click the arrow on the dropdown menu, then click “Transparent” (the gray and white checked box) at the bottom.

To edit the HTML, go to Design > Edit HTML
Search (CTRL+F) for #header-wrapper in the HTML code.

Change the border size to 0px under #header-wrapper and #header

Et voila!

Posted in Featured, How-to, Site Design, Tips & Advice0 Comments

13 tips for keeping your blogging resolutions

13 tips for keeping your blogging resolutions

It’s a new year, a new decade, and a fresh start.  So, you make a few blog resolutions: Post more often! Attract more readers! Make some money!
As always, it’s easier said than done, but here are some tips to keep you on the right path:

Set specific goals

Everyone wants to attract more readers, get more comments, post more regularly, etc.

1. The trick is to set SMART goals (Specific, Measurable, Attainable, Realistic, Time-based):  How many readers do you want to attract?  How many comments would you like to see on each post? What’s the deadline for all this to happen?

Post more often

It happens to the best of us: life gets a little out of control and we don’t have time to write/take pictures/cruise the web, let alone set up an entire blog post. To prevent these lapses:

2. Designate blocks of time for writing, research, and taking pictures and develop a schedule. Set a time (like Sunday afternoon) to schedule posts in advance.

3. Create an editorial calendar and make sure you have a place (a notepad, Google doc, whatever works for you) to jot down ideas as they come.

4. Write about two weeks worth of “evergreen” posts and save the drafts to your blogging platform. When you’re crunched for time, all you have to do is hit post and you’re done!

Attract more readers

5. Promote your blog by commenting on other blogs, joining topically related social networks, and participating in events with your target audience.

6. Set up multiple outposts and use social networks to spread your content. Don’t be scared to re-post your articles and images elsewhere; it will attract new readers to your blog.

7. Add Google alerts and Twitter searches for the types of content you post to your RSS feed, and participate in the discussions taking place around those topics.

Earn money

We’d all like to be compensated for our time and effort. There are a number of options here, the most prominent being:

8. Advertising from a direct contact or through an ad network. If you have a large enough readership, you may want to contact companies that are interested in reaching your target audience.

9.  Affiliate programs let you earn commission on sales you make of someone else’s products. You can find more information about affiliate sales here.

10. Direct sales mean you make money by selling something you create. You can sell your artwork, your writing, vintage clothing, or crafts you make to name a few.

Add some glamour

Fashion bloggers like pretty things (duh!), so use your skills to help you spruce up your blog.

11. Learn HTML and CSS so you can edit your blog template to add a column, expand your header, or insert a signature image. Check out some design galleries for inspiration.

12. Find a favorite font or image and create a new header.

13. Learn to use a graphics program (like Photoshop or The Gimp) to create colorful and enticing graphics for your sidebar and posts.

If you have a blog you’re already ahead of the game, so if you put your mind to it, you can stick to your blogging resolutions!

Image by Katerha

Posted in Featured, Monetization, Site Design, Tips & Advice5 Comments

Free Blog Templates and Themes

In fashion, aesthetics matter. Blog readers want to see the pretty. PR agencies look for well-designed sites to partner with. Fashion bloggers, by definition, like to dress up and accessorize. In short, your blog should look good.

In Style Sample Magazine issue #3, Michelle of Decline Designs gave us step-by-step instructions for designing blog themes. If you don’t have the time or energy to create your own design, there are plenty of pre-designed templates and themes available online. We’ve done the research and developed a listing of the most helpful places to find templates, themes, and tips for the three most popular blogging platforms:

Blogger Templates

BTemplates is a good old classic offering up options and style.

BlogSpotTemplates provides a nice variety of fun and artistic templates with a clean, easy on the eye layout.

Pyzam has options, options, options! With several categories to choose from, Pyzam helps to point you in the right direction, and where you go with it is up to you!

QuiteRandom offers a mix of some free templates in combination with blogger tutorials.

Blogger Styles definitely scores in terms of variety.  From technical specifics to theme composition, this site is worth taking a glance.

Final Sense is another good site for theme variety and a few extra freebies.

WordPress Themes
ThemeSplice contains hundreds of user-submitted themes sorted by category. The “Fashion” and “Magazine-style” and “Photo Blog” templates work well for fashion blogs.

Top WP Themes has over 100 free professional designs as well as installation instructions and live previews of each theme.

SkinPress has a selection of beautifully designed free themes as well as premium templates. Many come ad-ready and all have demos available.

Smashing Magazine put together a tightly edited list of well-designed free WordPress themes for 2009. The list includes screenshots of each theme as well as a convenient download link.

Free Theme Layouts calls itself the largest collection of free premium WordPress themes, and it aims to deliver. Rollover each screenshot to see a larger version, or click on the demo to explore each theme in full-screen mode.

Typepad Themes
Typepad users might need some extra luck to find templates–there doesn’t seem to be much out there, and those that are out there are very basic. You could try:

UK Blogger’s Guide has a lot of general information about Typepad thoughout their blog.  A lot have to do with modifications but no so much on free templates.

Save a Few Bucks has a bit information about templates in general and points out to a few spots where you get them.

Typepad also offers over 100 basic designs that are customizable if you’re comfortable with CSS.

How did you create your blog? Share your favorite design resources in the comments!

Posted in Blogging Tools, Site Design2 Comments

How-To: Create a badge for your blog

A badge is like a mini-advertisement for your blog. It’s usually an image link, and can be posted in the sidebar or post of another site to drive traffic your blog. Fashion bloggers exchange links all the time, and badges are just another (prettier!) way to do this.

Creating a badge
1. In an image editing program, create a new document 210 pixels wide by 100 pixels high (Note: your badge can be whatever size you like). You can use a program like Photoshop, The Gimp, or PhotoFiltre, or a browser-based application.

2. Add the desired text and images to your document. You can create something as simple as text on a colored background, or dress it up with pictures. It’s best to include the name of your blog in a prominent position.

3. Save the document as a JPEG, GIF, or PNG and upload it to your favorite image hosting service– try TinyPic, ImageShack or PhotoBucket.

Adding the badge to your blog
The HTML code for your link will be as follows:

<a href=”http://YOURBLOG.com”><img border=”0″ src=”http://THELOCATIONOFYOURBADGE.jpg”></a>

If you’d like to add a textbox with the code so visitors can easily grab it for their own sites, you’ll also need to include the following:

<form><textarea rows=”7″ cols=”20″ readonly=”readonly”><a href=”http://YOURBLOG.com” target=”_blank”><img src=”THELOCATIONOFYOURBADGE.jpg”/></a></textarea></form>

The number of rows and columns (cols) can be changed to fit your blog’s sidebar as needed. You may have to experiment with that a bit!

Adding your badge to this site!
Once you’ve added your badge to your blog, post the image’s address and your blog’s URL (the complete address with the http:// included) in the comments here and I’ll add it to the sidebar on this site! *Please note that we’re only posting links to fashion & style blogs at this time.

To grab someone else’s badge, simply copy the code from their textbox and paste it into an HTML widget on your blog! Speaking of that, go on and grab my badge…you know you want to.

Update 11/09: We’re no longer able to add the badges that were created based on these original instructions to the site as they’re too wide for the double sidebar. We’ll figure something else out!

Posted in How-to, Site Design25 Comments

The Top 3 (free!) Online Image Editors

As fashion bloggers, photos are often the main (sometimes only) feature of our posts. While a simple picture may suffice most of the time, sometimes it’s more fun to dress it up!

Photo editors like the ubiquitous industry standard Photoshop and its open source cousin The Gimp definitely have a place when it comes to creating sophisticated layouts, but browser-based image editors make it fast and easy to create and upload customized pictures at any computer, no downloads or installation necessary.

Here are three that get the job done:

Picnik

Picnik has a simple interface and should be easy to use for inexperienced folks. Even so, I was impressed with the neat fonts and shapes (called stickers). Your images are easily retrieved from and saved to your flickr, Photobucket, Facebook, or MySpace account, making it convenient for sharing. On the downside, the neat “premium” effects are only available for a fee, and there’s no way to combine images.

FotoFlexer

With FotoFlexer, you can edit photos from and save to almost any online photo storage account (flickr, photobucket, FB, myspace, etc.) out there, which makes it very easy to share finished creations. In addition, it is available in seven different languages! Some of the more useful options include layers, “smart” scissor and cutout functions, and the ability to apply simple effects with one click. Make sure you have a fast connection, though–it took a while to load.

pixlr

If you’re familiar with Photoshop and it’s ilk, pixlr will seem very familiar. It has a similar interface and many of the same shortcuts and layer styles. There is also a convenient Firefox add-on that will allow you to quickly open images from your computer or online. Most impressively, the application imports fonts from your computer, so you have access to all of your favorite typefaces! Less impressively, your finished image has to be saved to your computer, which means you’ll have to manually upload it for online use.

Note: all of these applications are Flash-based and are best for editing images that will be viewed online, not in print.

What’s your favorite?

Posted in Blogging Tools, Site Design2 Comments

Tools for Fashion Bloggers: ScreenCap Software

When you’re creating photo collages, sometimes it’s handy to have screen capture software to create screen shots–plus, it’s useful for copying Flash-based zoom images on shopping websites that won’t let you copy by right-clicking.

A favorite tool is FastStone Capture, which will allow you to crop, resize, add text, create basic special effects, watermarks and more directly from the image editor! You can download the latest freeware version here, or download a 30-day trial of the updated shareware here.

If you have any other favorites, share them in the comments!

Posted in Blogging Tools, Site Design4 Comments

Free Stock Photos for Fashion Blogs

We all know about the requisite style.com, elle.com, firstview, etc. for fashion images, but sometimes you need stock photos for inspiration boards, fashion collages, or even your blog’s background.

Here are some great resources for free stock images for fashion blogs:

Flickr Creative Commons: All images contained here can be used for free as long as the photographer is attributed with a link. It’s extremely easy to search by color, location, event, etc. in order to create your mood.

StockXchng: You’ll need to register, but once that’s done you can download images and save the ones you love to your very own lightbox. You can search for images and illustrations, and browse user-generated blogs and tutorials.

PhotoXpress: The newest of the bunch, you’ll find photography and vector images sorted by category or tag.

All of these resources allow credited use of their images, so have fun searching!

Image: david.nikonvscanon

Posted in Site Design1 Comment

Design Tips: Fun Blog Header Fonts

I admit to being a bit of a font nerd. I can spend hours browsing sites like I Love Typography and Typographica, and am especially enamored with display type–you know, the weird, kooky, over-the-top fonts.

Recently, I came across some fun fonts that would make great blog headers, so I decided to play around a little and thought I’d share:

Ginga Script, 1001 Fonts:

Deko, dafont.com:


Monbijoux,
fontspace.com:
AdamGorry, dafont.com:

See? An interesting font makes the header design process really easy!

Related Posts with Thumbnails

Posted in Site Design4 Comments


Advert

Let’s Get Social

Subscribe to RSS feed Follow on Twitter Add to Technorati favorites Stumble it!