2.25.2009

The Best Mac vs PC ads

Geek perfection at its Best

While I was scanning for my next blog post, I came across a Mac vs PC ad from a while ago. That inspired me to look at a few more, and soon enough I had spent a solid hour on YouTube viewing 30 second ad after 30 second ad of Mac vs PC. I think this experience qualifies me to make a solid judgment for the top 10 Mac vs PC commercials... and I even threw a spoof in there for your entertainment.

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.10.2009

10 Client-Side Editability Options

Offering Clients Hands-On Updating Options without Hiring a Programmer

Not all web developers are PHP or JavaScript wiz kids. In fact, a lot of us draw the line after complex CSS... maybe even after cut'n'paste JavaScript. So when it comes to offering clients the opportunity to edit the content of their web page, it can often be a struggle for web businesses to figure out the best way to go about doing so.

To help those businesses, and myself, I decided to do some research on the subject. Based on my own experience in addition to other reviews and information, I gathered the top 10 most useful applications and software that allow for clients to edit portions of their website without paying a web developer to do it for them. These will come in handy under many circumstances, but especially when you are working with a client on a budget that does not necessarily need a custom back-end system that a programmer can build.

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

The Top 10:

  1. Cushy CMS is a straightforward method for offering client editability without sacrificing time, money or design. With Cushy CMS your editable regions are pointed out via CSS classes, allowing for clean-cut code and purity in CSS. Vandalay Design offers an excellent Cushy CMS Explanation and tutorial to help you get started.
  2. Adobe Contribute is a handy way to offer clients a simple content management system for under $200. With an interface similar to MS Word, Contribute allows for rich-media files, in-browser editing capabilities, and Adobe Dreamweaver compatibility.
  3. Tiny MCE is a WYSIWYG web based Javascript HTML editor control to help assist your clients with content management. Released as Open Source under LGPL by Moxiecode Systems AB, it has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is also has the ability to integrate into other Content Management Systems. Drawback: You have to use file/image managers to relay the information.
  4. For those clients who only need to provide clients with the ability to edit their website's gallery, Zen Photo is for you. With a wide variety of gallery features, customizable CSS-based templates, comment capabilities, support for Flash Video, MPEG4, Quicktime, and 3GP (.3gp), ZenPhoto is the way to go for anyone seeking an all-around gallery solution.
  5. Using an interface similar to that of the popular project management application, grouphub, WidgetFinger is free with limited use. However, unlimited use of the application can be bought for the low price of just $10/month. The Widgetfinger editor will enable your clients to edit a live web site in real time, while also helping to maintain standards compliant XHTML and CSS code by separating the content from design.
  6. With features including WYSIWYG editing, video compatibility, photo galleries and blogs, Light CMS is free to start (pricing begins with increased users and pages) and offers a clean, hassle-free CMS experience with web 2.0 functionality. Featured on the website are useful video tutorials (which helps with client training). The drawbacks with this system is the hosting requirements (hosting with them) and the graduated pricing.
  7. Available in ASP, ASP.net, or PHP, Content Seed allows your client to visit a page that you've "seeded", hit control-y on their keyboard and log in, at which point they can change the text, upload images, add links, and anything else they want to do within the area of the page you've given them editing privileges over. It's customizable toolbar (to control the editing capabilities of the client) is what distinguishes this content system. Pricing runs from $150-$300 for unlimited deployments.
  8. The award-winning Joomla is a content management system (CMS) that enables you to build Web sites and powerful online applications. Its ease-of-use and extensibility have made the open source, freely available Joomla a popular choice among developers. Websites presently using Joomla include the United Nations, Ihop, and LA Weekly.
  9. Drupal may be a little more challenging at first compared to some of the other applications/software I have posted here, however for anyone willing to invest some time, Drupal is a great open source CMS software to learn. The primary drawback: Time is money.
  10. Finally, there's always the blog option. Although this option will only allow for editability on the actual blog page, itself, sometimes that is all a client really needs. Some reliable blogging websites you can use to create client blogs: Blogger, BlogSpot, and Word Press

If you have any suggestions for additions to this post, be sure to Contact me or post a comment with any helpful information.


Labels: , , , , ,


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

The Funniest Thing...Ever.

Sony's Latest Piece

This has to be one of the funniest things I've seen in a while - no matter who you are. I found it on The Onion. Be sure to check it out - but a warning: the foul language in this piece probably makes it NSFW...Unless your boss has a sense of humor.


Sony Releases New Stupid Piece Of Shit That Doesn't Fucking Work

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

A February Featured Website

I am Studios

I've been a fan of i am studios website for quite a while now, but since I have not yet shared it with you, I felt I needed to do just that. Check it out for yourself.

Labels: , , ,


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

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