Comic-Con International: San Diego is a comic book convention, hosted in San Diego since 1970. The modest comic book convention, however, has grown tremendously in the past few years, becoming more than just a place to talk about comics. Comic-Con is a cultural icon, a show that is unique to San Diego. It’s a valuable opportunity for people who love and work in independent arts, comics, animation, video games, etc. to experience their virtual/imaginary world in real life.

My first experience with Comic-Con in 2002 was a complete culture shock. I couldn’t believe that people were so proud to dress up as their favorite comic hero and fight for freebies like t-shirts, pins, and rub-on tattoos. These promotional items essentially turn attendees into “walking advertisements”  for TV shows, TV networks, movies, video games, and anything remotely related to the entertainment world – these advertisers have become ingrained in the annual experience that is Comic-Con.

A giant bag was given to all attendees

Non-traditional ads have become a crucial part of the Comic-Con culture — the more swag one accumulates, the better, making this an essential marketing strategy for companies to tap into at the conference.

The most noticeable difference in marketing at Comic-Con this year, was the massive influx in social media promotions at the conference. In the past, companies gave out freebies and didn’t gain much back from the consumer, besides brand awareness. This year, companies took advantage of platforms like Facebook, Twitter, and FourSquare combined with QR Code technology to engage attendees with the brand while also building their networks. I noticed a much stronger attempt to reach attendees through social media in conjunction with non-traditional ads. It’s no surprise that companies would tap into the power of social media to create buzz around a brand at this opportune time, but there were definitely a few key players whose social media strategies stood out to me.

Here are some key examples of companies that were using social media just right at Comic-Con this year:

Warner Bros's Microsoft Tag

Shark Night 3D Photo Booth

Moral of the story, finding ways to market your brand at a huge conference like Comic-Con isn’t just about shamelessly promoting your brand everywhere, but it’s more about offering a special experience or exclusive offer to gain loyalty and support. When advertising is integrated into the overall cultural experience of the event, a company will get more fans who are more likely to act as a brand ambassador.

Did you attend Comic-Con this year? If you did, what did you think about the marketing? If not, what are some of the examples you’ve heard about?

As a web designer with a background in traditional print work, I have had to adapt to the ever changing medium of the web. The field moves quickly, and standards from only a few years ago can quickly become irrelevant. It is my responsibility to stay on top of these trends and technologies, apply it to my work, and help clients achieve the best possible results. This post will address some common myths about web design, and hopefully provide some insight for those involved in the process.

1. Stay Above The Fold

The Fold is typically referenced in print design as “a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.” It is often requested that all page content fit within “the fold.” This request, however, does not translate directly to web design, because computer screens come in a variety of sizes unlike newspapers which have fixed dimensions. Designing for a “fold” of 600 pixels works well if your on a 13″ lap top, but only 0.6% of the population has a screen resolution of 800 x 600. More the 85% of the population has a screen resolution of higher then 1024 x 768. It’s not about fitting all content into a set dimension but it’s about adapting to how people digest information online, scrolling.

Surfing the internet is just as the term implies, you ride from page to page and move up and down the content. This brings us to our next myth…

“Simplicity is the ultimate sophistication.” —Leonardo Da Vinci

HermanMiller.com is an example of a website that uses lots of whitespace to create a classy look and feel

4. Separating design from content

5. The Bigger the Logo the Better

While it is important to highlight a company’s identity, simply making the logo bigger doesn’t mean that the audience will pay attention to it. Chances are your viewers are already familiar with your brand, and are visiting your site to find specific content. Having your logo in the top left corner already guarantees it is one of the first things they will see. It is more effective to have a proportional and relevant logo size, than to distract users with a big logo. For example, websites such as Youtube.com and HomeDepot.com use a proportionally sized logo that balances the layout of the main content area.

HomeDepot.com

When designing for an email marketing campaign, designers should always consider how their designs will translate into an online format to ensure the design looks good once programmed. The way it commonly works is, the designer creates a PSD file and passes to the web developer. The developer then takes the design and properly formats it into an HTML email, using a combination of HTML and CSS. If both designer and web developer have a good understanding of the end goals, their lives should be easy. But then there’s Microsoft who has ensured that their lives will be a living hell.

Most email programs use a browser based rendering engine to display HTML content. Apple Mail uses WebKit, the same engine used by Safari and Chrome. Thunderbird shares the Gecko engine with Firefox. Even Windows Mail, which ships with Vista and Windows7, uses Internet Explorer (IE) to render HTML emails. In the past, Outlook, which ships with Microsoft Office, used the IE engine as well. Life for web developers was, for the most part, good.

Everything changed in 2007. Microsoft shipped the latest version of its Office Suite, which contained numerous improvements to the applications, to millions of home and business users who rely on it daily. Indeed, all programs showed significant advances in usability — except for one: Outlook. Microsoft made the decision to replace IE with Word as Outlook’s rendering engine. Yes — Microsoft replaced an engine designed to display web content with a word processor.

Below is a comparison provided by fixoutlook.org, that shows an email design displayed in Outlook 2000 (IE rendering engine), and Outlook 2010. Pretty different.

Photo by Fixoutlook.org

There isn’t much that we as designers can do about this situation right now but I do encourage all developers to voice their opinion to Microsoft. Let’s hope Office 2012 shows some forward progress.

This past weekend I attended the Y-Conference at University of San Diego. This annual conference is a great place to meet designers and other people involved in the design industry from all over the world.

In addition to all the great networking, the event had many strong speakers, including Brigid McCarren, Art Director of HOW Magazine. This is possibly the number one design related magazine in existence and they are known for identifying and displaying the best work from all over the country. I found her presentation on design trends of 2011 to be particularly interesting and wanted to share with you some of the key takeaways. The top 6 design trends she shared with us were:

• Lighter color palette: For years we saw the use of bright color palette in all design materials, but this year we will see more use of pastel colors in collateral, packaging and web design.
• Light texture: This means we will see print designers using paper with light texture to enhance the textile quality of their work. For web designers, we will see more light texture (aka noise background) applied to designs in order to create an interesting look and feel for site visitors. This texture also helps create depth and field to the flat dimension of an on-screen design.
• Patterns: The use of patterns creates an intricate look to a design piece. Most luxury brands use patterns in their packaging or collateral materials to make their products feel even more exclusive.
• Recycled: Designers are doing a good job of promoting sustainability by using more FSC certified paper and post-consumer materials to execute design works. And the idea of recycling doesn’t only apply to print. Take the new Nike commercial where they recycled clips from their old commercials over the years to create the most recent spot.
• Infographics: In 2010, the use of infographics (the visual representation of stats) exploded exponentially and they don’t appear to be getting any less popular. With so much information out there, both online and off, people rely on infographics to present them with the information they need in an easy to consume manner. To see examples of quality infographics, check out Nicholas Felton’s work. He has done some amazing infographics and the ones that inspire me the most are his Annual Reports which he has been publishing since 2006.
• Nature inspired: The use of nature inspired line art on collateral materials creates a design that is an intricate and interesting visual. Many web designers are also turning an eye to nature. We will continue to see many websites with nature backgrounds or that display nature inspiration with nature textures. This design aesthetic creates a friendly and fresh look for the work.

Lighter color palette	Light texture	Patterns
Recycled	Infographics	Nature Inspired

In addition to sharing her picks for 2011 graphic design trends, Brigid also shared the thought process behind the 5-column grid that HOW Magazine uses. For those of you who aren’t graphic designers, the grid system helps designers make better decisions on where things should be positioned. It can be an extremely beneficial tool for any designer, especially designers for magazine layouts or websites. There are many variations of grids that vary by the number of columns in the grid structure. For a simple design, a designer could use a 2-column grid or they can choose a grid structure with a larger number of columns to expand their layout choices.

Brigid shared that she uses the 5- column grid because she believes that constraint is freedom. I couldn’t agree more on this. That being said, I will never choose an odd number for my layout. Why? I just love even numbers too much and then you can divide it by 2.

Brigid touched on one last point about color trends, which was interesting for me. She told us how fashion has influenced color trends in graphic design for many years and Brigid suggested that graphic designers should also follow fashion trends because they change frequently. You can check out this year’s color trend here.

As a designer, it’s important to keep up with the trends and evolve along with them. Knowing the design trends helps us make better design choices and, more importantly, when you watch trend cycles for long enough, you are able to spot potential trends before they happen, execute them, and then become a design trendsetter.

In techy speak, WordPress is an open source content management system that many web developers use as a foundation for a website or a blog. It allows the end user to make updates without having any programming knowledge. And as part of the goal to make website updates easier on the “laymen,” WordPress also offers plugins that enhance functionality such as search engine optimization, video playback capability, etc.

Here is a list of the plugins that I have found are important to have and/or useful for anyone with a company blog:

Top 6 WordPress plugins

Security/SEO

• Akismet: A spam-fighting service that checks the content of the comment anonymously with an online server to determine whether it is spam or not.
• WP Super Cache: A static caching plugin for WordPress. It generates html files that are served directly by Apache without processing comparatively heavy PHP scripts. In short, using this plugin you will speed up your WordPress blog significantly.
• Google XML Sitemaps: Generates a special XML sitemap which will help search engines to better index your blog (And thus improve SEO rankings).
• Google Analytics for WordPress: Tracks your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

• All-in-one SEO Pack: Automatically optimizes your WordPress blog for Search Engines (Search Engine Optimization).

Social Sharing/Engagement

• Share and follow: Add Share Icons, Follow Links, Facebook Like, Tweet and other buttons on your site in the way you want.

It is important to remember that while plugins can be useful, the core functionality of your site should not rely on them. Plugins can potentially break with every WordPress update.

Choosing which plugins to recommend to the clients can be challenging, and it is best to do research and look at the latest update, ratings, and reviews from other related sites. If you’ve found other plugins that have been useful for your sites, feel free to leave leave them in the comment.

Last month I came across Behind the Curtain written by Austin Seraphin, a born-blind blogger. Two of his most interesting posts cover his first week with the iPhone and his iMac purchase. In both articles he explains how VoiceOver, a feature of OS X,  helps him control his computer and browse the internet. This got me thinking about the importance of universal web accessibility. It’s not all about a good looking website or which user agent your end users use. Not anymore. Designers should have a good understanding of their target audience and how the end user will view the site—through screen reader? with graphics enabled? or a braille reader?

VoiceOver Utility on Mac OS X

Small things to keep in mind when designing for universal accessibility:

• Grid – Organizing information using grid will helps users browse through your site easily. Using grid also helps define hierarchy within the webpage. For example, the navigation bar is often the most important tool for users to browse through your webpage. Since automatic screen readers reads from left-to-right and top-to-bottom, having a top navigation bar is better than a sidebar navigation.

• alt tag- Screen Reader ignores images with no alt tags. Don’t forget to specify alt tags before you pass your design to the programmer.

• Execution- If you want your voice to be heard, stick with live text and validated code. A Flash based site with no live text and images without an alt tag is not a good idea. Even with just a Flash based gallery/movie, a screen reader will read “___” (Nothing).

Today’s devices that comes with built-in screen readers open doors for more internet users and more universal access. Smart web developers should be user agent agnostic. Understanding your target audience and their needs will help you deliver the information effectively. And, knowing the possibilities of the world wide web will make you and your work go a long long way.

Back in the 19th century, I used Notepad to hand code web pages. Then in early 20th century, I used Filezilla to upload web contents to the hosting. It’s now 2010, and I have found my two favorite tools in coding web pages.

• Coda: One window web development software developed by Panic. It has great design interface and is user friendly.  Coda is both a text editor and file transfer along with helpful desk reference on CSS, PHP, JavaScript and HTML. Along with Coda, Panic just released a Safari Extension called Coda Notes, a tool which offers clients the ability to give notes and ideas on web development process to the developer easily.
• Firebug: A FireFox integration, this is a web development tool that allows you to inspect and modify a website layout in real-time. Firebug lets developer precisely see how each modification reacts to the layout without messing with the actual web content files online.

Not only do these tools help me write valid code cleanly and efficiently, they also allow me to accurately translate my design to an interactive web format. The most important feature both Coda and Firebug offer is error indicator. This error indicator helps you get your code validated. With validated code, you know your website design will view properly across various browsers.

On the other hand, some people might say their favorite web development tools are Adobe Dreamweaver, Adobe Fireworks, or Flash Catalyst. Those are not bad tools but they often create sloppy code. I found these tools to be difficult to use when programming for Wordpress sites or a site with a CMS tool.

Note: If you are a programmer then you can probably use any tools you want. Any other tools for web development that you love?

Postcards from Dwell on Design conference

In November 2009, AOL rebranded itself as “Aol.” The new logo is no longer in all caps and instead sets in sans serif typeface, colorless, with initial cap and an Aol dot.

To launch this new brand, they came up with a branding strategy of placing their white logo on ever-changing images for the backgrounds. The idea is that AOL’s brand is too deep and complex to be tied to a single image.

It seemed to be a fun idea until the Aol Artists campaign launched, and the internet exploded with criticism. The campaign aims to be a collaboration where Aol takes artists’ work and places their logo on it in exchange for helping the artist promote the work. Frankly, the idea of “give me your artwork and I will promote your work by putting my logo on it” seems odd to me. And I am not alone. Designers have been quite vocal in their dislike of the campaign).

Aol. has since applied this ad campaign to its TV ad, Wild-posting posters, and its sites. However, despite mass distribution, many feel that the campaign fails to inform anyone on what the voice of the brand is. There’s no brand. You can put it on cars, rainbow, and everything—no restrictions.

From Underconsideration

There are many thoughts on this new campaign posted on the internet by designers, brand consultant, and ordinary people. People obviously knows Aol because the company has been in the internet business for ages. But, do people really know what Aol. does anymore? Do they know what is new and relevant? If they don’t, this campaign does not seem to help communicate  that.

In my opinion, the campaign says Aol. owns everything including things that are not its own work.

What are your thoughts on this?

Viral advertising is when a company creates something that gets shared again and again across different social networks. Making something “viral” is the holy grail of all online marketing because of the potential it has to increase a brand’s awareness exponentially. It is also relatively inexpensive when you consider the number of eyeballs a viral piece of creative can get without having to pay for expensive media buys. In short,  Viral Marketing is extremely powerful and has the potential to create a greater impact to the public.

This being the case, every marketer wants to make their advertisement viral. However, there is no secret formula, no perfect strategy and no way to guarantee that this will happen. One thing you can do to start, is take a look at what other videos have gone viral and see what they have in common. To get you thinking creatively, we’ve listed  ten highly successful example of viral video marketing:

• Sony BRAVIA: Color Balls
• Samsung: Card Throwing
• NFL Fantasy Files
• Adidas: Starwars
• Nissan: Drive on Chairs
• Rayban: Catch
• Levis: Guys Backflip into Jeans
• TheFunTheory.com: Piano stairs
• Pixar: Toy Story 3
• Olympus

Any other favorites that we’ve missed?

Building an effective website required a good deal of planing and preparation.
Previously, web developers relied on Flash to deliver highly dynamic content over the web. With the rapid evolution of browser technology, feature-rich sites can now be built using a combination of HTML, Javascript and CSS. By using these browser-native scripting languages, developers can create captivating sites while avoiding the following common problems with Flash:

• SEO: The problem with Flash is that it can’t be fully indexed by the search engines. So, stay away from it if your website strategy has any SEO expectations.

• Browsing on mobile devices: Majority of mobile devices don’t support Flash—including the highly sought after iPhone and a new web browsing device, iPad.

• Text selection: Flash is good for enhancing a story but not telling it. If your site offers information that people would want to select, copy and paste text, then using Flash is inadvisable.

• Web browser functionally: With a full Flash sites, users won’t be able to use back and forward button and browser search function (Command + F)

• Flash is currently not a W3 standard and elements simply do not exist for the data centers to evaluate what a site is about. -Flash SEO

Some people argue that they build flash sites simply to maximize the web experience.
However there are options. Here are some example of non-flash sites that deliver a comparable experience to Flash-based sites:

TavernBowl.com: Dynamic background and interactive location map.
Panic.com: Highly interactive feature map.
YouTube and Vimeo both offer HTML5 player—Flash isn’t required to view videos.

Web developers should carefully consider the needs of their clients and target audience before building a website. Since Flash is supported on a limited number of mobile devices, and isn’t SEO-friendly, it may limit the number of visitors to the site.