6.26.2009

Office Signs

Our New Baby (other than the dog)

So many of you now know that The Design Group has been settling into a new downtown Charleston office for about two weeks now. Today I am posting pictures of the screenprinted signs we put up today (courtesy of Digital Printing Solutions of Mount Pleasant) that now light up our door. The trick is that we can see out but no one can now see in! Check them out below, with even more after the jump.

The Design Group office signs - Downtown Charleston The Design Group office signs - Downtown Charleston The Design Group office signs - Downtown Charleston The Design Group office signs - Downtown Charleston The Design Group office signs - Downtown Charleston

Labels: , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

4.18.2009

14 Essential Web Design/Development Tools

The Must-Have Resources

  1. HTML Ipsum. Serves as an advanced website for latin filler text. Provides entire pages of text, various sized paragraphs, sentences, unordered/ordered lists and even navigation.The Webutante - HTMLipsum - A Graphic Design Web Design & Web Development Resource Blog
  2. Adobe Kuler. A vast collection of color schemes with search and rating capabilities. The Webutante - Adobe Kuler - A Graphic Design Web Design & Web Development Resource Blog
  3. BG Patterns. A comprehensive and handy background creator that allows you to modify sizes, colors, patterns and more.
  4. MultiBox. In my opinion, one of the most functional variations of the lightbox. Can display multiple file types and has great transitions and customizability. Freebie from PhatFusion.
  5. Flash Gallery. Probably the simplest gallery feature I have discovered thus far. Allows you to create a slideshow on your website easy and fast from a specified folder or from Flickr photostream. Best Part? It's Free.
  6. PicMarkr. Free tool that allows you to add custom watermark (image or text) to your online images. The Webutante - Pic Markr Image - A Graphic Design Web Design & Web Development Resource Blog
  7. CSS Curved corners. CSS manipulated to provide bullet proof rounded corners, a great way to speed up loading on a website.
  8. Web Developer Firefox Add-On. The most vast system for web developers I have seen thus far. Allows numerous capabilities, including manipulating CSS and CSS Viewing, disabling specific site features and TONS more. The Webutante - Web Developer Toolbar image - A Graphic Design Web Design & Web Development Resource Blog
  9. WuFoo. Free (for the limited version) Form builder application with numerous options for displays and themes, and even the capability to edit the CSS.
  10. Upload Thingy. A file-upload feature that allows for large files to be uploaded on your website. Reasonable pricing, and fairly easy to do. The Webutante - Upload Thingy Image - A Graphic Design Web Design & Web Development Resource Blog
  11. Cushy CMS. An incredibly useful and surprisingly easy CMS system. One of the few free CMS providers.
  12. Browser Testing - IE Net Renderer. A convenient method for testing websites in the Internet Explorer browser, encompassing IE5.5 all the way through IE8. There is no charge for the service and your screenshot shows up fairly rapidly.The Webutante - IE Net Renderer Image - A Graphic Design Web Design & Web Development Resource Blog
  13. Google Analytics. Provides an incredible amount of tools for evaluating your traffic, common visiters, locations, etc. All aspects of SEO are covered.
  14. W3C Validator. Checks your website for alignment with HTML and/or CSS Standards. While it is not always a necessity to maintain 100% compliance, it tends to be important to know the issues that are causing non-compliance which can sometimes be detrimental.The Webutante - W3C Validator Image - A Graphic Design Web Design & Web Development Resource Blog

For more web tools be sure to check out these previous posts:

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

3.20.2009

Creating a Design Concept

Customizing your Project's Design Direction

When it comes to designing anything from a website to an advertisement, it is pretty easy to lose track of your concept along the way. You can start with a BMW Mini and all the sudden find yourself in the midst of a project resembling more of a Daewoo than the quality German Engineered vehicle you were trying to portray. Often times it can be pretty easy for a designer to lose focus of the foundational elements of a design project, which allows this sort of 'design sidetracking' to happen. If you are a professional/unprofessional designer who often finds themselves in this circumstance, today's post should serve as a constructive tool for you. Today I will be discussing an in-depth design process to assist designers in maintaining a consistent project direction and concept while staying aligned with the goals and substance of the project.

  1. Color Scheme - If you are designing for a company, you will probably want to use the colors the company has already used to brand themselves. If the company does not have distinct colors yet, or their colors are somewhat felxible, I recommend checking out Adobe Kuler, an excellent color scheme resource, to pick your appropriate color scheme.
  2. Typography & Fonts - Usability is often a function of (among other things) legibility - a direct function of typographic styling. The importance of typography simply can not be ignored on a website or advertisement. Several of the most important aspects: Font, size, weight, line spacing, paragraph spacing, color, and hierarchy. These aspects can be varied somewhat throughout a project, but varying too many and/or too much can make the project lose consistency and redundancy - two pretty important design principles. Usually I don't use more than two fonts per project (potentially 3 if the logo is a typographic logo). Also, don't forget to evaluate your content when working with typography for a website or advertisements. If you have a ton of info, stick with a more simplistic, legible font, with fairly consistent styling throughout. If your content is lacking, often times you will want to dress it up a bit- widen your spectrum of fonts, and maybe throw in a few fun fonts and styling. For more information check out the Periodic Table of Fonts, or Six Revision's article on Typography Tools. You can also check out my previous resource post which features several more Typography Resources.
  3. Theme - Whether you realize it or not, pretty much every design project has a overriding theme present in its elements. A popular theme on the web is the Web 2.0 look, which tends to be identified with usability, legibility, icons, gradients, and reflections: see image. Other sample themes include Grunge: see Von Dutch; Retro/rounded: see Moose or Tutorial 9; Authentic: see Glocal Ventures; Class Act: see Live at Sandstone; and Bubbly/Animated: see Brian Handley Design.
  4. Supplements to the theme - Theme upplements include background images, textures, fabrics, patterns, whitespace, etc. Included in this is establishing your primary aesthetic direction: for example, will you be using straight lines with sharp points or circles, bubbles and rounded edges? Will your page feature drop shadows, reflections, gradients, etc? See Digital Web's Principles and Elements of Design for more ideas and suggestions for supplementing your project theme.
  5. Images - Your next step is to choose your image style. Will you be posting photographs on your page? If you are going for a classy portfolio look, photos are often a good way to supplement your theme. If you have a Retro theme, or a bubbly/cartoon theme, you probably will skip the photos and stick with Animations/Cartoons. Another big portion of this step is icons. If you are using a grunge theme, icons can be pretty hard to incorporate (although Smashing Magazine shows us some great grunge icons). If you are using a web 2.0 theme, icons are practically a no-fail.
  6. The Hierarchy - Establishing your hierarchy will not only help you establish your design, but it will also clearly define the most important aspects of the page/ad. Your hierarchy will be used to establish dominance for the most important aspects of your design, and emphasis to the key features. A company logo usually tends to be at the top of any design hierarchy. The logo is often (but not always) followed by the navigation. After the navigation tends to be the purpose. This can seem like it would be at the top of the hierarchy, yet if you are advertising car sales and the consumer can not remember who the company was in the advertisement - instead they simply remember some dealership that sold cars, you are not going to be the dominant thought in their head when they go out car shopping. The hierarchy goes into every detail of the design, and should be aligned with each element. The hierarchy is also very important in establishing a 'Call to Action,' which you can read more about in Boagworld's 10 Techniques for an Effective Call to Action article
  7. One of the most important steps in designing a website (designers can skip this step unless dealing with annual reports or books) is to characterize the navigation. When we characterize the navigation we are evaluating the amount of content we have, the number of sections in each category, and primary versus secondary navigations. At this point the designer needs to begin thinking more about his/her layout. Will there just be one primary navigation? This is good for a company who wants just a simple brochure presence with 'home' 'about' 'portfolio' and 'contact,' but once you step into territory above 5 -8 pages, categorization is pretty much a necessity. Possible navigations scenarios include drop downs, top navigation, side navigation, tabs, subnavs, page specific navs and more.
  8. Design Inspiration Resources - Based on what sorts of details you chose in the last steps, you can use design inspiration resources to see how other people have used these elements successfully in their designs. Remember never to use a resource as a template. To produce quality work, elements of uniqueness are incredibly important. But sometimes the work of others can serve to inspire and guide our design by generating ideas for the use of particular elements. For some great design resources, be sure to visit my post on the Top Design Galleries
  9. Template Resources - If you are still not quite there, template resources may help you better define places for specific elements on a page. Using the information you now know about your navigation, fonts, color scheme, you can begin constructing page layouts, and templates will often offer ideas on how to perfect them. Although I don't recommend you use an exact provided template (that kind of ruins the whole 'custom project' concept), you can use various templates as inspirtation to create your own unique wireframe layout. For CSS based web design templates, be sure to check out 101 Quality CSS & XHTML Free Templates from 1st Web Designer.
  10. Mock Up - Now you are prepared to use all the elements you have so carefully established to create a unified artistic vision for your project.

Elements to keep in mind:

  • KISS - Keep it Simple, Stupid!
  • Never ignore the concept of Usability
  • DON'T FORGET THE MESSAGE!

Be sure to let me know if you have any additional suggestions by Contacting me.

Labels: , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

3.10.2009

The Latest Design/Developer Resource Collection

March's First Collection of Faves

This week's resources are focused primarily on (although not strictly limited to) web developers and web designers. I decided to go this route due to the struggles I have been facing with some of my latest projects. I wanted to emphasize the details entailed in designing and structuring a website because of the struggle I, myself, have had in the past week working on just that - the details. When I say details, I am referring to icons, typography and layout structure...those little irritating features that can either make the website what it is, or if handled incorrectly, take away from what it is supposed to be. If you have any suggestions or anything you would like to add, please feel free to let me know.

ICON RESOURCES

  • iconPot is an awesome icon resource bank featuring a wide range of icons for web development projects. What I like about iconPot is its no limitations policy - all icons listed are free for BOTH commercial and personal projects without the obligation to provide back-links and/or credit to the author.
  • Always offering impressive resources and helpful file collections, Noupe does it again with their recent collection of the 50 Most Beautiful Icon Sets Created in 2008. What I liked most about this collection? The pragmatic utility of each set. There is sure to be something of use to everyone in this compilation.

NAVIGATION & BUTTONS

  • Da Button Factory is a fun website that allows anyone to make shiny, web 2.0 style buttons online with the click of a button.
  • Smashing Magazine is always coming up with new tips and tricks for their tech-obsessed readers, but with their latest collection of Navigation Menus: Trends and Examples they seem to have outdone themselves. This article is both useful and surprisingly inspirational with their Web 2.0 navigation suggestions for a vast range of websites.

TYPOGRAPHY

  • The Web Designer Depot examines 5 Simple Ways to Improve Web Typography in a recent article. Featuring very useful suggestions for accomplishing better legibility, this article is straightforward and to the point, and useful to anyone who even occasionally struggles with the art of typography.
  • For a great typeface reference guide, be sure to check out the Periodic Table of Typefaces created by the Behance Network. As a ranking system for the 100 most popular, influential and notorious typefaces today, this periodic table is a great tool to reference when deciding on the proper typeface for use in any design.

"NEATNESS" FEATURES

  • James Padolsey familiarizes his audience with the JQuery Auto-Resize capability that adds a touch of class to just about any form. Try it out for yourself to test out the coolness factor.
  • DesignM.ag never fails to offer useful tutorials and tips, and their latest jQuery feature, Easy Display Switch with CSS and jQuery proves to be another of my DesignM.ag faves. This feature doesn't just add to the 'neatness' factor of a website, but also adds an excellent form of customization that many people will appreciate.

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

3.09.2009

The Designer's Dilemma

Redesigning the Stop Sign

This video is absolutely great for any designer who has ever dealt with a demanding client who thinks they know what they need, but really has no idea. This one will bring the LOL's!

I thought that was a pretty funny. I have a great follow up video coming soon so be sure to check it out!

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.22.2009

Free Photoshop Brush Resources

My Compilation of the Most Useful Resources for Photoshop Brushes

For designers using Photoshop, brushes are a hot necessity that simply can not be ignored. Because of their great utility, I gathered a few excellent resources websites that feature great Photoshop Brushes for you to download and use. Be sure to post a comment or Contact Me if you have any additions.

  1. As a full-on PS Brush resource website, PS Brushes is a useful tool for finding a wide variety of Photoshop brushes. With its frequently updated and carefully categorized brushes, PS Brushes offers everything from grunge brushes to around the house brushes.
  2. One of my favorite resource blogs, Noupe has pleased me again with their brush compilation 1000+ Free High Resolution Photoshop Brush Sets. Although the list is almost too lengthy to sift through (!), the distinct collections and high quality is enough to make any designer swoon.
  3. My Photoshop Brushes has a large selection of PS brushes that everyone will love. I personally had quite a bit of fun sifting through this brush repository - you can even follow their website on Twitter!
  4. Brusheezy is an excellent tool for locating the PS brushes you want or need. The clean and pure website displays brushes visually quite well, and makes it easy to determine whether the brush is what you are looking for. Their stock photo-esque website offers filters including category, PS version and sorting preferences, and even features a convenient 'Search' feature that sets this website apart from its competition.
  5. Photoshop Roadmap brings some great tools to the table in their collection of 100 Awesome High Resolution Photoshop Brushes. With just 100 to sift through, we are quickly directed to the best brush options which are displayed visually (similar to Brusheezy) allowing for easy browsing.
  6. Abiding by it's mantra of Free Quality Brushes for Photoshop, QBrushes is an excellent PS Brush resource. It's clean site design and variety of searching methods allow for a positive and beneficial user experience.
  7. Brush King is another great PS Brush resource website that I simply could not leave out of this post. While it's website is slightly busier than some, it still offers an aesthetic display of a wide range of brushes. It even features categorization and a search tool.
  8. Get Brushes offers a great collection of free Photoshop brushes for all to enjoy. What I liked about this website was the in-depth description details that include ratings, the number of brushes, and even the download size. It also features categorization labels for easier searching.
  9. For lighter brush versions (you may actually be on a strict time schedule), be sure to check out 50 Free Photoshop Brush Sets for Modern Design Trends by Six Revisions. Also, Techzilla's Free 40+ Photoshop brushes sets offers a couple great brushes I did not see anywhere else. For Gimp users: Techzilla also gathered Over 1400 Brushes for you!

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.21.2009

Latest Design/Development Resources

Top Notch Picks for Quality Production

I have been severely slacking on my posts this week, so in order to make it up to my readers, I opted to scan for some new excellent resources on the web. This time I will be breaking it up into 3 categories: 1.) Web Development; 2.) Design Oriented; 3.) Inspiration/Humor. Enjoy.

Category 1: Web Development.

  1. The curious blog, Noupe, featured an incredibly resourceful article recently entitled 40+ Useful & Handy Web Designer's Web Services & Tools. I found a few things in there I have used recently as well as a couple of items both designers and developers can use (I loved #2, Wordle, and I found #19 really useful for businesses and freelancers).
  2. Compiling browser safe resources can be quite an un-fun task, but, no need to worry, DesignM.ag has done it for you in their latest article 10 Helpful Resources for Cross Browser Testing. The free tools, like IE NetRendering, are my personal faves - I don't really like to pay to please Bill Gates and his Windows Posse ;).
  3. One of my own favorite web logs, Smashing Magazine, has compiled a list of 50 Beautiful And User-Friendly Navigation Menus. Featured are CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. This is a great compilation resource for anyone who appreciates the importance of website navigation.

Category 2: Design Oriented.

  1. PSD Tuts+ posted a fun resource for Photoshop Users called 50 Insanely Weird but Awesome Photoshop Brushes. Not all of these brushes may be useful for you, but you are sure to find at least several brushes that you have been dying for. My faves are the grunge, smudges, sparkly and lace brushes.
  2. Best Photoshop Tutorials Blog posted a fun article recently compiling the The Coolest Text Effects on the planet. This collection truly does not let down; the 'Fire' effect and 'Funky' effect are both killer looks that are hard to find.
  3. Smashing magazine just can not do wrong. Case in point, their recent post The Ultimate Collection Of Useful Photoshop Actions. While some are a little cliche (the comic book look is slightly overrated), this article is a real treat for people like me who like to conserve time with Photoshop.

Category 3: Humor & Inspiration.

  1. I could not stop laughing when looking at Urlesque's collection of the Top 10 Moments Caught on Google Maps Street View... At least until I saw a kid pointing a gun at an even smaller kid!
  2. Even I have been guilty of posting one of the Top 20 Male Poses of Facebook. 2Birds1Blog did a great job with this piece.
  3. Nearly everyone has written a Passive Aggressive Note at some point in our lives. However when they are posted together on a website online, hilarity ensues.

If you found this information useful, be sure to check out some of my related posts:

Thank me later.

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 1 Comments

2.16.2009

Developing a Development Plan

The Essential Steps for Designers & Developers to evaluate projects

Often the most difficult aspects that businesses offering development and design services tend to face involves the planning stages. Because I, myself, have noticed the all too often occurrence of problems as a result of poor planning, I thought it was important to outline and discuss important planning steps for design & development projects in today's post.

  1. Step 1: Client Questionnaire. The client questionnaire is a multi-page document with in-depth questions covering all sides of the development process. This document will determine the rough scope of work and relevant information to that as well as the website budget and timeline. Aesthetics, purposes, goals, points of contact, and add-ons need to be encompassed in the client questionnaire. For assistance creating a client questionnaire, see Big Slick Design's article 46 Questions for a web design project. Also be sure to use your own personal experiences when developing a questionnaire. For example: I have encountered many people who simply did not feel capable of creating their own website or brochure content. Because of this, I included a question in my client questionnaire about whether they would be capable of creating their own content. I also gave them brief information about the fees associated with content assistance below the question so they could make an informed decision. Click on the image below to view The Design Group's client questionnaire for web development clients. The Design Group's Client Questionnaire for Web Development Projects
  2. Step 2: Brainstorming. Following the receipt of the completed client questionnaire, the onset of the brainstorming stage begins. This step involves individual brainstorming sessions. One of the most efficient ways to go about this step is to make copies of the completed client questionnaire for each person to separately read over and take notes on any questions, concerns or ideas that arise while doing so. This course of action prevents groupthink which can be detrimental to the development process.
  3. Step 3: Group Discussion. After each individual team member has gone over the questionnaire thoroughly, a group discussion should ensue. This allows for all concerns to get out in the open and tentative planning stages begin to form. No one's ideas or concerns are to be ignored or brushed off, and no one should be left out of the conversation. It is important that any foreseen issues are reconciled at this stage and all potential problems are troubleshooted. This prevents potential issues from squeezing through the cracks and prepares the team for the requirements meeting.
  4. Step 4: Requirements Meeting. The requirements meeting is a meeting where the team sits down with the client and discusses a plan of action. Each side clarifies any ongoing concerns and the design/development team begins to get more of a first-hand feel for what the client is looking for. While some discussion during the requirements meeting will come from the answers found in the client questionnaire, some discussion should be unique to develop project clarity and a common ground for the project scope.
  5. Step 5: Statement of Work (SOW). Before any actual design or development work begins, a bulletproof contract outlining the basic information about the project ought to be created. This contract should be signed by the client and kept in your files for legal purposes. The Statement of Work ought to cover the project scope, special features, basic design elements (colors, etc.), browser testing or printing specifications, schedule, hours and fees. The Statement of Work also serves as the foundational element of the Project Outline.
  6. Step 6: Sitemap. This step can be skipped in design projects that do not require any website development work. The Sitemap is simply a diagram of all website pages and a guideline for site navigation. Sitemaps can be color coded and quite detailed (which often brings the need for a key), or they can be simple representations sketched out on paper. I find that to help everyone on the development team throughout the project, a detailed sitemap is the way to go. You may review the sample sitemap below (which happens to be a sitemap I used for a client) for basic guidelines and ideas. The Design Group's sample sitemap
  7. Step 7: Design Wireframe. The project wireframe will outline the design of the project and is important for conceptual purposes in regards to both the design/development team as well as the client.The Design Group's Sample Wireframe The wireframe supplements the sitemap to create an informative bundle that allows the team and the client to visualize the website on the whole. It also brings to light those potential issues that have somehow squeezed by in the last six planning steps. This wireframe will additionally be serving as the premise for the mock-up design.
  8. Step 8: Project Outline. The project outline is based on the foundation set by the Statement of Work, but emphasizes more of the aesthetics and specific functionality of the project. It can be divided into sections, some of which ought to be included: project goals, timeline, colors, typefaces, logos, features, pages, user testing, and programming. This not only specs out this distinct areas of the project, but it also builds your SOW into a detailed project plan for the design/development team to reference.
  9. Step 9: Team Approval. Perhaps one of the most important steps in the process, the Team Approval Phase involves members of the team evaluating the sitemap, wireframe and project outline for its accuracy and documenting any issues that remain items of concern. It may seem repetitive to do this at this point, but this allows for everyone to approve all aspects of the project one final time, and identify any growing concerns before they get out of hand. This stage also presents the team with a more vivid picture of where the project is heading.
  10. Step 10: Mock-Up Design. The final preparatory stage in the design/development process involves the translation of the wireframe into a clean and accurate mock-up design. This stage is the culmination of the planning process and should accurately depict the design and functionality proposed in the last nine steps.

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.07.2009

New Design & Development Resources

This Week's Top Picks

Listed below are some of the best design & Development Resources I have Discovered this Week. Check them out, and be sure to leave a comment or Contact Me if you have found any awesome resources this week that you would like to share.

  1. For all you Mac junkies out there (like me), Noupe recently posted an article called Readers Pick: 30+ Incredibly Useful Mac Apps for Web Design. With a wide variety of applications for the Mac interface, there is something for everyone in this collection even if you are not a developer or designer.
  2. The web design blogRedswish created a list of 10 SEO elements all websites should have. From the basics to the more advanced, this article will help you ensure you are covering the SEO basics with each website you develop.
  3. Vandelay Design recently posted an incredibly useful article featuring 77 Resources to simplify your life as a Web Designer. This article covers a wide-range of issues, from colors to favicons, most of which are pretty useful for web developers.
  4. You've got to love CSS Trick's awesome tutorial about Setting Font Size Based on Word Count. It may not be a feature you want to use for every website, but it is a great tool to use in some instances, and it is a pretty cool typography effect.
  5. Sebastian de With hearts making icons and interfaces. So his latest project, the Icon Designer definitely is fitting for Sebastian. His beautiful and clean website design is only amplified by the tools it provides to developers and designers all over.
  6. Smashing Magazine makes this weeks cut for design resources with their resource-filled article 100 Beautiful Free Textures. Nearly everyone needs random textures from time to time, and this inventory will come in handy for those people time and time again.
  7. Along the same lines as the previous resource, Dzine Blog shares another group of useful resources, this time in the form of Photoshop files, in their article 30+ Free Quality PSD Files to Download. Featuring tech resources, design templates and more, this article is equipped with an awesome selection of Photoshop files that many people (such as myself) have found themselves in need of in the past.

I hope you find these websites and articles both beneficial and useful. If you feel like I am leaving any out feel free to share with a comment. Be sure to check back again soon for more for resources!

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.05.2009

Establishing Brand Identity

Essential TOMA Examples

There are certain companies that dramatically overshadow their competition when it comes to branding. A couple days ago, my partner, Brent, explained something to me about branding I sort of knew in the back of my mind, but never really had articulated into so many words. Yet after he said it out loud, I began to realize its vast importance. Brent told me about something called TOMA, a.k.a. top of the mind association.

There are some brand identities that have mastered the TOMA concept, and subsequently have become the reigning providers in their field. They have done so by creating a dominating force in the heads of potential clients. For instance, when preparing to mail presents for Christmas or sending important documents to a distant location, many people will walk into a shipping spot and tell the owner they need to 'Fed-Ex' something. Now, whether they actually want to send a package using Fed-Ex varies; Other companies often have better prices and faster shipping times than the Fed-Ex ground service. But that shipping store owner is probably going to send their package using Fed-Ex regardless, making Fed-Ex more money as a direct result of successfully establishing TOMA.

Another example can be seen with the Kleenex brand. How many of you when you come down with a runny nose, go to get a 'Kleenex?' Why not just a tissue? The answer is because Kleenex has established top of the mind association with a large audience that you are part of. There are a select few brands that have actually been introduced into the Oxford dictionary because of their exceptional TOMA. Some of these include, Hoover, Xerox, Band-Aid, Jello & Viagra. You get the idea.

Although TOMA is not the single most important aspect of marketing and branding, it seems to provide more dramatic success rates than a lot of the others. While simplistic but defining logos, like the WalMart Smiley or the Target bulls eye, are useful for brand recognition, TOMA seems to provide a brand domination factor that most other elements of branding simply can not offer. Because of the brilliance behind TOMA, I thought it would be a good idea to point out some brand identities that have found a lot of their success by creating top of the mind association for their particular products. Here are a few of my faves, but be sure to let me know if you have any other examples, I would love to hear your thoughts and opinions.

    Google Logo- Successful example of marketing
  • When we talk about a brand having TOMA, there is no way we can leave out the obvious; Google is notorious for their top of the mind associations. In 2006 it was even rewarded with a spot in English language dictionaries:
    Google: (verb) Pronunciation: \ˈgü-gəl\; Definition: to use the Google search engine to obtain information about (as a person) on the World Wide Web. Inflected Form(s): goo·gled; goo·gling.
  • Facebook Logo- Example of marketing success in online social networks
  • Facebook has established TOMA in a variety of age groups since it opened up its website beyond just the college crowd. I, personally, can not tell you how many times I have requested that my pals photographs be 'Facebooked.' I have also 'Facebooked' many people, by finding and friending them on the social networking site. My own mother recently became a 'facebooker!'
  • iPod Logo- Example of Apple's marketing success in mp3 players
  • Apple's well known and widely utilized iPods brought brand recognition to a new market product. The association iPod developed with mp3's is now parallel in ways to what the Walkman did to cassettes. It's questionable whether other mp3 players will ever get to bear the iGenious name.
  • TiVo Logo- Example of marketing successes with DVR'sAs one of the first DVR's on the market TiVo allowed us to cross boundaries with our TV we had been unable to do so before without the old VCR and cassettes. Since its launch, we have 'TiVo'd' every possible program we, for some reason or other, couldn't watch on TV. Even with the wide assortment of DVR's now on the market, 'TiVoing' is a trend that won't quickly die.
  • Coca-Cola Logo- Example of TOMA marketing
  • Coke has become a soft drink classic all over the world. In the South especially, it is very common to hear the word 'coke' being used as a replacement for 'pop' and 'soda.' Coke gains money and popularity from this slang that it successfully implemented so long ago.
  • Lego Logo- Example of TOMA marketing
  • The Lego brand is another example of a brand achieving top of the mind association with an audience. As one of the earlier TOMA trendsetters, Lego was able to draw an impressive following and successfully dominate a market.

Other notable examples:

  • Redbull. Like anyone actually cops to drinking NOS or RockStar.
  • Tobasco. Is there any other kind? Sure there is but we can't remember the name. Chaa...lluuuu.aah?
  • Post-Its. Reminiscent of Romy & Michelle's High School Reunion.
  • Windex. Way too easy.
  • Q-Tips. This goes in the Band-Aid Category.
  • Scotch Tape. The key to every Christmas present and science fair project.
  • Sharpie. The knock-off brands never seem to cut it.
  • Roladex. How did they even come up with the name?
  • Jeep. Every truck/SUV seems to earn this title. (Check out the website- It's pretty intense).
  • Amex. You just don't usually put it on the Discover card.

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.03.2009

Top Design Galleries

Design/Development Resources

So I'm finally back from my fun-filled Atlanta vaca, and it's time for blog updates! Due to my lack of posts during vacation, I thought I'd throw a couple of good resources your way to make up for my absence. Today's resources are for both designers and developers, and coverage will focus on the best design galleries (primarily web, but a few cover a more expansive range of design). If you would like to add any websites you think are notable, feel free to post comments and I will update the info asap.

  • The Best Designs recognizes the best CSS and Flash websites from around the world. This website is reliably updated (every weekday) and uses keywords to categorize the website type, offering excellent utility when you need style-specific design inspiration or motivation.
  • With nearly 13,000 websites to sift through, CSS Mania is an excellent resource for web designers and CSS enthusiasts, and is probably one of the best web 2.0 resource out of all of the websites I post (excluding the fifth post). Although it does lack thorough descriptions, it's images reveal the style and type of the website on their own which allows readers to click only on relevant sites.
  • Best Web Gallery is an inspirational gallery website featuring a wide range of quality design websites (Flash & CSS). A notable feature is its istockphoto-esque hover viewing appeal.
  • One of my personal faves, Faveup provides a simplistic but useful gallery of inspirational designs. What I like about Faveup is it's variety, featuring business cards along with Flash/CSS designs, and it's permalinks are a gift any designer can appreciate.
  • The CSS Zen Garden aims to inspire, excite, and encourage participation in pure CSS-driven designs. Offering impressive designer CSS showcases, CSS Zen Garden appeals to the beauty of standards based, clean coded websites.
  • Tag Society is a criterion-based network of quality websites organized by their respective tags. The impressive aspect of tag society is its vast collection of websites in addition to the ease of searching for type/style specific sites.
  • Website Design Awards is a clean-cut Flash/CSS design showcase with a ratings system that makes this site especially fun. One drawback: it's difficult to figure out what website style/type you are clicking on as there is no description and the preview contains such a small portion of the design.
  • Design Licks boasts a neat collection of top web design picks displayed in a flashy (but still subtle) manner. The 'Site of the Day' feature is the aspect that truly sets this website apart from its competition.
  • Finally, Type Sites is a website showcase updated weekly that emphasizes the beauty of typographic design. In addition to its narrowed focus on typography, Type Sites is also set apart by its informative commentary that guides readers through the art of typography and how it is successfully used on various sites.

Other notables:



Labels: , , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

1.24.2009

Development/Design Resources

My Latest Faves

Lately, in an effort to develop my blog audience by offering helpful tips and information, I have spent quite a bit of my free time scanning the internet. In doing so I have compiled several valuable websites that offer useful resources for individuals in the tech industry. These are some of the latest to be added to my collection of bookmarks.

  1. As a repository of Sifr fonts, sIFR Vault offers quite a selection of sIFR fonts and font inspiration. The 'Resources' page will also familiarize you with sIFR if you have not yet had experience using it.
  2. With information on the latest calendars/date picker features, resources for the cleanest sliders, and the most beautiful web UI galleries, Italian blog woork has helpful resources that every web developer could appreciate.
  3. Designer Folio (a helpful website all around) recently posted an excellent Free Flash Gallery with cool effects and great versatility features web developers will love to toy with.
  4. For those people who desire to be known as one of the CSS Elite, web developer Adam Oliver compiled a few Useful CSS Tips that are sure to come in handy.
  5. From SEO, to PHP, Devlisting links to an expansive collection of web resources for web developers to utilize. While some are better than others, the large variety makes the website useful for a broad spectrum of beginners and professionals.
  6. Delicious is a great tool to discover the latest hot topics spanning the entire web. It also serves as a handy organizational tool for bookmarks.
  7. Finally, for website form advocates, Feckless Mind shares Purified Form Mark-Up for anyone to use on the web.

I will try to post a few more of these beneficial websites and articles each week, so be sure to check back again soon for updates.

UPDATE: I discovered this late, but just could not leave it out: 30 Useful Open Source Apps for Web Designers

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments