When designing a logo for the blogging community it was important to understand that for the most part a blog is content driven. Because of the type based nature of a blog web site it can be very difficult to grab a readers attention and interest. The blogging community has sush as large number of competing writers that having a solid logo can help grab the interest of a potential reader and lead them into the content creating potential blog subscribers.

This particular client runs a blog that publishes blogging tips, technological news, and computer and internet directed content. The client came to us with the hopes of recreating the brand identity for QUICK ONLINE TIPS and help draw in new readers with a fresh, new look. With no specific direction we came up with distinct concepts that fit with the type of look and style that could help bring in readers.

For the first concept we took the theme of “quick” and create a theme based on the concept of time. Using very detailed gradients a realistic pocket watch was created. In order to create the high gloss look of the silver on the watch a high contrast gradient from black to white was utilizsed. To get the beveled look where the glass meets the silver, two gradients moving in opposing directions create a sharp change in form which gives the illusion of an edge. For the glass, the illusion of transparency was created by softening the color of the watch face from black numbers and elements to a light grey. This creates the feeling of a light reflection bluring the image below the glass.

The overall design of the concept follows the horizontal layout of the web site. The high impact image of the watch helps lead the eye up and across to the name. The completed look conveys a very modern and professional look which helps reflect the content in the blog.

For the second concept, the inspiration of time, quickness, motion and energy were utilized in a semi-abstract design which also symbolizes the initial “Q”. Using the initial as the imagery for the design gives the icon element a specific and unique relation to the name. The addition of the sweeping lines and arrow helped to give the inital extra meaning and context. The use of gradients further enhances the image creating a 3D polished look. Using gradient in opposing direction creates a high-gloss beveled effect that adds a nice sharpness to the image.

The clean and modern look of the graphic portion of the design blends nicely with the modern squared text. Placing the text onto 2 lines and bolding the word “QUICK” creates a focus on the idea that this blog is place to come for the most up to date news and tips.

For the last concept, a softer and generally more inviting sample was created. Using a combination of bright high-gloss colors and a friendly bold text, this concept was designed to invoke a sense of warmth and belonging. The image utilized in this design is a combination of standard “pixel” pointer arrow and a glassy button. The imagery is very recoginzable to avid computer users and developers and creates the idea that all of the information, tips, and news they need is just one click away. To achieve the high gloss look and the sense of depth, gradients were placed in a manner that would optimize the sense of light and shadow. This creates a more realistic look for what would normally be a very flat and ordinary computer element.

By creating a design that has an element of fun and whimsy while keeping the overall imagery relevant to the industry, the feeling of excitement and intrest can be utilized to its maximum potential. Bright colors and a high impact design can really help to distinguish a page full of type from its competitors.

This client was a winner of our free logo design offer in August 2007.

Previous articles in this series

How to design a communications Web 2.0 logo design

How to design an advertising logo design

UPDATE: Here is the black and white version of the logo for faxes, photocopying etc.

By Design links to various websites, blogs and resources related to blogging, design, analytics, and infographics. This round covers a domain name brainstormer, video search engine, video display widget, AJAX libraries, and a color tool.

1. Bust a (domain) name.
   

   Still considering a domain name for your website or blog? Not all the good ones are taken, despite what it might seem like. If you’re looking for the availability of the domains using a combination of words, try Bust A Name [via Randa Clay]. Just type in a few words in the “word combiner” and it’ll give you back a list of available domains using combinations of two words from your list. If a domain is available, you’ll get a drop down list that provides links to registrars.

2. Gujam Video Search Engine.
   

   Looking for video content for your website or blog? Gujam searches a number of video sites and returns the results collated for convenience.

3. WeShow video widgets.
   

   WeShow is a video sharing site that also offers a widget for displaying videos on a web page. The blog widget comes in one vertical and four horizontal formats, and each displays a snapshot of multiple videos that react when a mouse cursor hovers over them. You can customize the border color and select multiple content channel categories. Videos for selected channels for the widget appear to all come from YouTube, but I haven’t verified that.

4. MiniAjax.
   

   If you’ve been thinking about adding some Ajaxified dialogs, demo or info windows, draggable content, lightboxes, contact forms and much more, MiniAjax makes it easier. You can easily add a bit of “wow” to your site without having to code from scratch.

   MiniAjax is actually a portal to DHTML and JavaScript code available from several websites. There are snapshots of the use of each piece of code, along with an explanation. As far as I could tell, all of it is free.

5. Name That Color.
   

   Chir.ag offers a neat little color tool that can be used to learn color names. Drag the circle in the colorwheel or in the embedded color square, and the rectangular area to the right fills in with the selected color. Alternately, you can use the drop-down list of over 1500 colors. In addition to the RGB and Hex color values, the closest color name is show. There’s also a downloadable JavaScript library that you can use to embed the tool into your site.

For those of you considering building an online media empire - even a small one - go read Ben Yoskovtiz’s 10 Steps to Building an Online Media Empire. He profiles Wendy Piersall and her mini blog empire relating to stay at home parents. Plus he gives, as his article title suggests, 10 steps that you can follow as well.

Now granted, the steps are a nutshell explanation of what needs to be done, but they’re as good a starting point as any. Here’s the bold text from his article’s steps.

1. Build up a popular blog on a specific niche.
2. Develop a strong brand.
3. Make lots of friends.
4. Master monetization.
5. Learn more about marketing.
6. Find opportunities offline.
7. Get help.
8. Be a teacher.
9. Realize it’s a business.
10. Expand slowly but promote like a crazy.

Blogging is sort of similar to golfing, in the sense that if you want to be good at it - and thus successful - everything has to be aligned. It’s not just about writing, and if you build it, “they” won’t necessarily come. It takes promotion and other efforts in tandem.

I want to particularly emphasize Ben’s points #2-4:

• Strong brands are memorable; they draw people back, whether because of a great logo design, an attractive website design, or a catchy name.
• Making friends online is as important as building relationships with customers for offline businesses. Friends will link to you, watch out for you, vote on social media sites for your articles, and vice versa.
• It’s all for naught if you don’t come up with an effective way to monetize. But online commerce really still is in its infancy, and monetization models might change. Stay on top of them.

Last week we talked about how to go about designing an advertising logo. This week we will look at how to design a web 2.0 style telecommunications logo.

From a design standpoint the style associated with the Web 2.0 style logo designs have received a lot of both positive and negative attention. From the point of view of a logo designer the Web 2.0 can be a very positive design process. This is because generally, the look and style of the logo utilizes the best of classic design, layout and type principals with effects and finishing touches that are relative to the modern digital age.

Recently we were asked by a client to create a set of samples that utilizes the Web 2.0 style for their new company MangoNet. Set in the industry of wireless communications it was important that the brand identity convey a fresh and modern look that was fitting to the high tech field they were in, as well as to their target market.

There are several design characterizations, which can be associated with the Web 2.0 look;

• The first of which is the use the choice of typeface. Generally the style of typeface used
  in the style are classic fonts that are highly legible for maximum visual impact.
• The next quality is the use of color and digital effects such as gradients and reflections to create a modern and polished look. Bold and bright colors as well as gradients create a fresh and modern feeling because the processes, technology and software used to create these effects are relatively new and have the most impact “back-lit” on a computer monitor.

In the first concept we utilized an idea that was provided by the client. A text based logo where the “O” in MANGO was replaced with an image of a brightly colored mango. Gradients were used in combination with simple geometric shapes to create the illusion of form. To achieve the effect the removed core a smaller shape was centered and the gradient from yellow to orange was reversed changing the illusion of light and shadow.

In addition a reflective effect was added to the text giving the design the appearance of sitting on a shiny surface. This effect is used commonly in many Web 2.0 identities and works as an afterthought to give the webpage or printed material a unique and realistic perspective. It brings the logo from an image that is just stamped on the screen to an identity that is placed into the virtual environment.

The overall design for this concept is very simple yet effective. The use of the iconic image replacing a letter helps to separate the two words and also create a bit of context. Although the image doesn’t necessarily convey wireless technology, the fresh and unique name and design will create a buzz of interest, which will let the consumer look further into what products and services the company does offer.

For a second concept a much more abstract logo design was created which was intended to create an emotional connection with the viewer. The fluid lines and organic shapes help to convey a sense of energy which reflects the high-tech industry that the company is in. The central shape still fits the theme of the mango and also helps give the abstract icon some focus. Gradients were utilized to give a polished look and create depth and dimension.

In order to achieve this illusion it is important to have an understanding of both light and shadow and other business logo design essentials but also how gradients work in vector based software. It is important to avoid common design blunders.

Generally, a gradient is simple a blending from one color to another either in a straight line or a circular radiating pattern. There are other ways to create more complex gradients but they can cause printing and compatibility problems for the client after the design is finalized. By utilizing a combination of both a lighter color and white the illusions of form and glass-like highlights can be created.

The overall design of the second concept is a nice combination of an abstract, energy fueled icon with a clean and simple font. The bright colors again convey a very fresh and modern look that is bound to capture the attention of a potential consumer.

For the third concept design the idea utilizing a series of abstract shapes to help convey wireless technology and communications was used. The basic premise was to create an image that related to the industry with a color scheme that related to the name which would help create a complete design.

A radiating pattern of circular dots was created to express waves or bits of information traveling over a distance. To achieve the effect of perspective the circles were stretched into ovals with smaller shapes at the back and larger shapes gradually getting bigger toward the front. The mind will correct the oval shape back into a circle and view the image as if it were stretching off into the the distance.

By placing the dots as a white image onto a block of color, the maximum amount of visual impact could be achieved. The clean square format blends nicely with the text creating a very clean and effective design.

For the final concept we went back to the mango theme and created an icon with the potential to act as a stand-alone image without the name but still represent the company. To do this the image of mango was created in combination with the initial “M” running through it.

Using gradients once again to capture the form and color of a mango, the cut away “M” adds an additional touch helping to create a very fluid image. The stylized scripted letter utilizes various elements to create fun yet elegant icon. The bold look helps draw the eye whiles the flowing lines help create a sense of energy.

The overall design follows a very “traditional” Web 2.0 layout by utilizing the icon at the end of company name and acting almost as a superscript symbol. The end result is a very effective design that creates a sense of impact and interest while following a modern Web 2.0 style.

While designing business card it is very important to take into consideration who is going to look at the card. The look and feel of a business card depends on the industry the company is in and the kind of people to whom the cards are given. Take a look at some of the business card designs we have created for our clients.

For example a very simply and clean looking card would suit a financial consultant where as a real estate agent might benefit from a more “colorful” one. The logo also plays an important role in how you should design a business card.

Seth Godin posted an interesting articles about business cards mistakes today. I will probably eloborate on that and discuss how to go about creating an effective business card design in a future post. But for today we will take a look at how to properly set up a business card design file for printing to achieve the correct printing results.

This post assumes you are creating the business card design in Adobe Illustrator. There are two important reasons why Illustrator is better than Photoshop when creating business cards. First of all Illustrator works in vector mode and the end result could be the EPS file format which most professional printers use for printing business cards. Secondly you could also save the files as PDF with “Printer” settings. PDF files are very popular with online printing websites. Read more about the difference between vector graphics and raster graphics file formats.

Setting up your document in Illustrator

I have provided an Adobe Illustrator business card template* that you can use as the base template or you can create your own. When using the template that I have uploaded please ensure the “guides” layer is turned off. Otherwise you cards will print with the red and blue borders. When creating a base layout for the business card, margins, trim, bleed area and safe areas must be carefully setup to prevent any issues when the design goes to print.

Outer Edge of the card: This is the outline of the document in Illustrator. The standard US business size for this would be 90mm x 52mm.

Bleed Area: The very edges of the document are called the bleed area. If you have any design elements or color that comes close to or touches the outer border, you should extend it to spill over the card outer border. This way when the cards are cut by the printer, there will be no ugly “white edge” effect that would make the cards looks cheap.

Trim Area: The red border you see above shows you where the card will be cut after printing.

Safe Area: The blue border you see above is called the safe area. The safe margins are borders that are definitely inside the place where the cut will take place. Please remember to keep all important information, like names, addresses, phone numbers or logos within the safe margin (at least .137” from the edge) to ensure that they are not cut off when your document is trimmed.

When to create your document at the full bleed size: If you are working in an illustration program (such as Adobe Illustrator or Corel Draw) or a photo editing program (Such as Adobe Photoshop or Corel Photo-Paint), we recommend that you create your document at the full bleed size. This will prevent any white edges from showing at the borders after the final product is trimmed.

When to create your document at the trim size: If you are working in a layout program (such as QuarkXPress or Adobe InDesign) we recommend that you create your document at the trim size and include the specified amount of bleed for your product (.137”). When you export your document as a PDF for upload, make sure to include the bleed in your output settings so that the final upload PDF document is at the full bleed size for your product.

Document Color Settings (CMYK vs. RGB)

CMYK (Cyan, Magenta, Yellow and Black) are the colors used in the printing process, whereas RGB (Red, Green and Blue) are the colors used by screen displays such as your monitor. Please note that JPEG files are almost always in RGB.

Your document should be created in CMYK mode so that the colors that you see on the screen most closely match the final printed product. If you create your document in RGB, the colors in your printed product may vary slightly. Many of the bright values produced by your monitor cannot be reproduced in print.

Print Resolution Settings

To get a high quality print result it is important to set up the resolution of the artwork. Once set up this effects both the EPS file and any other file conversions.

The optimum resolution for high quality printing is 300dpi. Resolution refers to the number of dots per inch (dpi), or the amount of detail the image has. Most documents prepared for commercial printing should be 300 dpi at 100% of the final print size.

You can set up the resolution of the document in the “Document Raster Effects Settings” dialog box. To get to that option Effects > Document Raster Effects Settings

Converting Fonts to outlines

Once the design is completed and you are preparing the file for printing always ensure that you convert all text part to outlines. Normally the text is in font format which means that if some one else wants to open your document they would need the same fonts to be installed on their machine. So by converting the text to outline mode you do not need to send the fonts to your printer.

PDF Document Settings

If you are saving the business card to a PDF file (for use with most online printers and few standard printers), the following setting must be used to achieve correcting printing.

/ASCII85EncodePages false
/AutoPositionEPSFiles true
/AutoRotatePages /None
/Binding /Left
/CalGrayProfile (Dot Gain 20%)
/CalRGBProfile (sRGB IEC61966-2.1)
/CalCMYKProfile (U.S. Web Coated \050SWOP\051 v2)
/sRGBProfile (sRGB IEC61966-2.1)
/CannotEmbedFontPolicy /Error
/CompatibilityLevel 1.3
/CompressPages true
/ConvertImagesToIndexed true
/CreateJobTicket false
/DefaultRenderingIntent /Default
/DetectBlends false
/ColorConversionStrategy /LeaveColorUnchanged
/DoThumbnails false
/EmbedAllFonts true
/EmitDSCWarnings false
/EndPage -1
/ImageMemory 524288
/LockDistillerParams true
/MaxSubsetPct 100
/Optimize false
/OPM 0
/ParseDSCComments false
/ParseDSCCommentsForDocInfo true
/PreserveCopyPage false
/PreserveEPSInfo true
/PreserveHalftoneInfo false
/PreserveOPIComments true
/PreserveOverprintSettings true
/StartPage 1
/SubsetFonts true
/TransferFunctionInfo /Remove
/UCRandBGInfo /Preserve
/UsePrologue false
/ColorSettingsFile ()
/AlwaysEmbed [ true ]
/NeverEmbed [ true ]
/AntiAliasColorImages false
/DownsampleColorImages true

If you find this too tedious to manually set up I have uploaded a Adobe PDF Presets* settings file that you can import into Adobe Illustrator. Simply go to Edit > Adobe PDF Presets and once the dialog box opens up you can do an import of these settings.

* Note: The design and settings template files provided in this article should be used at your own discretion. Logo Design Works can not be held liable for any issues arising from the use of these files.