WEB

5/1 Web Designer - Defining the internet through beautiful design

2010-05-01T00:02:00.002-07:00

Please add updates@feedmyinbox.com to your address book to make sure you receive these messages in the future.

Web Designer - Defining the internet through beautiful design

Behind The Scenes with AKQA
April 30, 2010 at 11:20 AM

AKQA IS UNDOUBTEDLY one of the world's leading creative agencies. It employs hundreds of creatives, it has won numerous awards and boasts a portfolio packed with big name brands. The company was formed back in 1995, originally titled Digital Marketing, by current chairman Ajaz Ahmed along with three associates. Only in his early twenties Ajaz Ahmed slowly and meticulously expanded the company's repertoire and reputation. In 2001 the company took its next step into the big time forming an alliance with a leading management consulting firm and merging with a US-based advertising agency and Asian new media agency to form AKQA.

The company has gone from strength to strength over the preceding years and has worked with some of the biggest global brands on the market today. Included in the AKQA list of clients are Coca-Cola, Nike, Virgin, Gap, McDonald's, Visa, Xbox 360, ESPN, Fiat, and Sky to name just a few. Memorable moments include a host of Nike campaigns, 90 Days of Football, Nike Summer Hoops, Ignite, Be Transformed and The Leap, all containing the slick graphics and cutting edge design that has become synonymous with one of the world's largest sportswear companies.

Another huge campaign for AKQA was the Xbox 360 interface. A design that was to shape millions of gamers' lives, and at the same time enhancing the agency's already burgeoning reputation even further on a worldwide scale. Along with recognition comes expansion and AKQA now has offices across multiple locations including London, New York, Amsterdam and Shanghai and the company currently employs around 750 personnel.

So it's busy, busy, busy at AKQA, but fortunately the kind folks there still found the time to talk to us at Web Designer. Here we get the lowdown on what's happening from head of CRD Andy Hood and associate creative director Chris Williams.

Andy Hood | Head of CRD at AKQA

WD: What was the original vision for AKQA's creative development department and how has the agency evolved since the early days?

AH: At the end of the Nineties we saw the earliest signs of the emergence of rich user experiences through Shockwave and, at that time, some Java. It was clear to us that this was going to have a big impact on the future of the industry, but also that it spawned a new discipline. A designer was no longer technically proficient enough to implement his/her designs, and a developer may well not have the depth of understanding of user experience, motion and 'feel' to realise a designer's vision. Ten years ago the Creative Development team was created to bridge this divide between technologists and designers – developers with an appreciation for design and experience, physics and motion, who could at the same time discuss technical issues with software engineers. This connection between design and development has been an important ingredient forever. Few would argue that the explosion in rich user experience has fuelled innovation in recent years, and ! the competition between Adobe Flash and Microsoft Silverlight shows that it is still at the heart of the industry. The foresight ten years ago of the leaders at AKQA has placed the agency in an excellent position to exploit the rapid advances in technology to bring more and more rich and immersive experiences to users and clients.

WD: From a design perspective, how does working with established brands compare with clients who offer more creative freedom?

CW: AKQA always strives to create an innovative experience, and by the nature of our company our client brands give us the ability to do that. With established brands it's incredibly important to have a strong vision, and communicate concepts very clearly and concisely. A good example is eco:Drive, an application we developed for Fiat. They wanted to exploit the potential of Blue&Me, their in-car communication and entertainment system, but weren't sure how to do it. Blue&Me has the ability to collect information about the way people drive, so we suggested using it to help Fiat drivers lower their C02 emissions, and save fuel and money. Our solution was a fun and useful application that displays driving data in an easy-to-use format, helping people improve their fuel efficiency. To date eco:Drive has won a total of 15 industry awards, three of those accolades 'Grand Prix' titles. This project definitely wouldn't have been possible without! the substantial commitment of an established brand.

Chris Williams | Associate creative director at AKQA

WD: AKQA provides a diverse range of services. How many of the agency's employees are directly connected with web design and what are their general roles?

CW: Every employee is connected to web design. Each specialism has a role to play, with leads from each department steering the development of a project. The departments usually involved are client services, creative, copy, film, strategy, business analysis, user experience, creative development, technology and QA. At the start of a project it's important the department leads set a clear vision for the project, following a full briefing from the client. Creative and copy develop the concept, setting initial art direction and tone of voice, while user experience architects map out user journeys and functionality, and business analysts and strategists ensure the concept fits with the brand and client objectives. All the while account management work closely with our clients to ensure that the project is on track to deliver for their brand and business. Once the project is given the go-ahead, teams are put together and sometimes housed in a project room. P! roject rooms work really well for large, timedependent projects that require each specialism to keep a close eye on where the project is going. It's all about working as a team.

WD: Recognition and awards are a regular occurrence for the agency. How does it feel to be recognised for all your hard work?

AH: It is always great to receive recognition whatever form that recognition takes. We never take awards for granted, more often than not they are judged by our peers and it is always an honour to receive them. It also makes for a night to remember for those who actually go to the awards ceremony itself, and can often be a great way to cap a great project experience and celebrate with the team. Moreover, major awards are clearly important for the profile of the agency, our work and our client's work. However, having said all of that, it is internal recognition from team members and co-workers that holds the most value from a purely personal point of view. AKQA standards are extremely high, and it is really only internally that we can see the passion and commitment that goes into a truly great piece of work. You tend to know when you are a part of something really special coming together, and there is a sense of anticipation leading up to its release. Wh! en that release is followed by really positive feedback from people whose opinions we trust and respect, it is the most rewarding feeling.

WD: Social networking tools such as Facebook, Twitter, Flickr, LinkedIn etc are seen as essential tools for today's creatives. Does AKQA as an agency actively encourage use of these tools to promote its product?

AH: Social networking platforms such as Facebook and Twitter are the lifeblood of online conversations and people's sentiment. They offer the ability for brands and marketers to connect with their audience more intimately and to add to the conversations that are taking place online, but it's important that our clients understand how, when, where and why using these platforms makes sense and what impact using them will have on their business. Actively participating in conversations that are taking place online involves time, effort and understanding. There is a level of personalisation required which forces the content that's produced on behalf of a brand to be thoughtful, considered and based on an over-arching strategy focused on ROI. These platforms also have a use for the agency itself, enabling us to have a dialogue with the outside world, express our views and commentate on what we see. This outside world contains people who could become the ne! xt generation of AKQA, and this is an important channel with which to engage them.

WD: AKQA currently operates from multiple locations, from San Francisco to Shanghai? How do the different offices interact? Or do they all operate independently?

AH: The offices are independent, but collaborate frequently. For the most part, each office will have their own projects and clients, but given that many of our clients work in a global capacity there are occasions when our presence in these different locations will enable us to meet a brief in a unique way. There are many people at AKQA who have moved between the locations, and so there is a great deal of familiarity between the teams. Collaboration isn't just a case of sharing resources however; it is also extremely valuable to share knowledge across the offices. It is a constant challenge to keep pace with the rapid advances in the technologies we utilise, and we make full use of the experiences of our colleagues around the world with different projects and technologies in order to make the most of the latest innovations. The rate of change from Adobe, Microsoft et al is high, and as one combined team we are more able to gain, and retain, our experti! se than we are individually.

WD: To keep ahead of competitors, AKQA must have one eye on the future of technology and web design. What has recently caught your attention?

AH: One particular technology which has caught not only our eyes but everybody else's is augmented reality. There are many possible uses for this, but the danger of any new technology lies in using it for the sake of using it, or because it's 'cool'. We need to be looking for ways to use new technological innovations to actually solve a business problem, or provide a real service. We have done just that in our Washington DC office, using augmented reality to enhance the US Postal Service's package offers. Photosynth is a great product from Microsoft, built on their Silverlight technology, but once again it is not enough merely to have 3D images for the sake of it, there needs to be a reason. With 221b, the game to promote the release of the new Holmes movie, we use Photosynth to enable our players' Holmes to investigate rooms and find clues. Facebook Connect is another recent development that has already seen extensive use by clients and agenc! ies to integrate social context into a website or application, as mentioned previously when discussing social network platforms as a whole.

WD: As a recognised leader in your field and prospective employer, what advice can you give to anyone trying to get into the business?

AH: From a creative development perspective, it is always vital for anyone looking for a successful career to stay in touch with the very latest techniques and technologies. There are many people with great strategic and technical insight regularly commentating on their blogs or through the likes of Twitter, presenting at open events put on by the development community and actively promoting best practices – you need to follow those people, dig into the information they provide and develop your own take on it. In the end this will enable you to quickly become a valuable member of any team you are involved with. Curiosity is often what draws gifted technical or design-oriented people into the world of creative development – stay curious.

This email was sent to vitor.pinto.webdesigner@blogger.com. Create an Account
Don't want to receive this feed any longer? Unsubscribe here
This email was carefully delivered by Feed My Inbox. 230 Franklin Road Suite 814 Franklin, TN 37064

5/1 Smashing Magazine Feed

2010-05-01T00:02:00.001-07:00

Please add updates@feedmyinbox.com to your address book to make sure you receive these messages in the future.

Smashing Magazine Feed

Desktop Wallpaper Calendar: May 2010
April 30, 2010 at 9:44 AM

Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That's why we have decided to supply you wit! h smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we've decided to embed calendars for the upcoming month. So if you need to look up some date, isn't it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?

This post features 40 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

Please notice:

all images can be clicked and lead to the preview of the wallpaper;
you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

So what wallpapers have we ! received for May 2010?

[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]

The End of Explorer Calendar

"For friends of MSIE, here is “The End Of Explorer” may 2010 desktop wallaper calendar, in a Variety of resolutions from 320?480 (iPhone) to 2560?1600 ! Hope you’ll find some size here to fit with your desktop ;-)" Designed by Benoit Chartron from France.

preview
with calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1600
without calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1600

A Designer’s Life

"That is what a designer sees on his real desktop, now you can see it on your computer." Designed by Mladen Milinovic from Germany.

preview
with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050! , 1920×1200
without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Focus on work

"This w! allpaper design is supposed not to distract your attention, but to make you focus on work. This might work if you keep your desktop clean enough ;)" Designed by Andrei Verner from Russia.

preview
with calendar: 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1440
without calendar: 1024×768, 1280×800, 1280×960, 1440×900, 1600×1200, 1680×1050, 1920×1440

Play With Me
&quo t;One of my latest photographs taken on a beautiful summery day in the “golden hours” — I was lucky enough to capture our puppy and my sister, Sasha Bell playing on the lawn. I thought this would be a lovely wallpaper with a hint of the lovely summer we all deserver in the UK! No rain! Happy May everybody!" Designed by Olivia Bell from England, UK.
preview
with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600
without calend! ar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600

Moto

preview
with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

May Happen, May Be

"”May Happen, May Be” is all about possibilities… we can all get out of our cages, maybe in may!" Designed by Thais Trizoli from Brazil.

preview
with calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Rapunzel

"A grunge take on Rapunzel!" Designed by Cindy Zhang from USA.

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Birdhouses

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, ! 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

May Flowers

"The flowers are blooming and it’s time to celebrate spring with this whimsical wallpaper!" Designed by thunder::tech from USA.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050

Matilda’s Backyard

"It w! as May day Eve. The clock strikes twelve. The cat was asleep, ! the ladd er cast aside and the book with a giant red apple opens." Designed by April Joy E. Jasmin from Philippines.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

May in Warsaw

preview
with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Bubble Bath Delight

"A little blissful paradise desktop from me this month – bubble bath’s are yummy and I thought I would take this to an entire new level. Happy May!" Designed by Sasha Bell from England, UK.

preview
with calendar: 1024×640, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×640, 1280×800, 1280&tim! es;1024, 1440×900, 1680×1050, 1920×1200

Chocolate Strawberries

"I always see a lot of photography featuring random fruit and lemons (a lot of lemons!) falling/splashing into water, and thought it would be cool to turn a photography “idea” into a vector looking design, but with chocolate and strawberries! Happy May :)" Designed by Rosanna Bell from England, UK.

preview
with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Oasis

"I’m hoping for a bold and beautiful summer." Designed by Marc Allcock from England.

preview
with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Todo Sobre mi Madre

"With Mother’s Day looming in, I decided to make a tribute to a great film “All About my Mother”. For the Spanish version, please visit my DeviantArt." Designed by Ale Ibarra from México.

preview
with calendar: 320×480, 1280×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1280×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Starbucks Coffee

"Everybody I know loves coffee… and for that matter, starbucks! Happy May!" Designed by Sasha Bell from England, UK.

preview
with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

Mamayo

"This is a mother’s wallpaper theme." Designed by from México.

preview
with calendar: 1440&! times;900, 1680×1050, 1920×1200
without calendar: 1440×900, 1680×1050, 1920×1200

Curly Forest

"Catch a firefly in the twisty, curly forest." Designed by Chris Alexander (Yipori) from England.

preview
with calendar: 800×600, 1024×768, 1152×864, 12! 80× ;800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440
without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440

May be something else

"Thinking about May…" Designed by Fabio Toscani from Italy.

preview
with calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200

without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200

Flower Field

"The U.S. National Archives has a photo stream on Flickr of images free for unrestricted use. This wallpaper was made from photographs taken for the Documerica project by the EPA in 1972. The flowers were from a field in Kerr County, Texas and Inks Lake, Texas. I wanted it to look like a painting. Link to original photographs" Designed by Laura Sylvest from Washington, D! .C., USA.

preview
with calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200
without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1920×1200

Thailand Kopipi

"May is when spring usually starts. May is also when we are all starting to think about a summer vacation.I would personally recommend going to Thailand Kopipi, it’s amazing and it’s also where this picture was taken." Designed by Liad Guez from Israel.

preview
with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1600×1200, 1920×1080, 1920×1200
without calendar: 320×480, 1024×768, 1280×800, 1440×900,

Efeitos da internet nas eleições 2010

2010-04-29T16:32:00.001-07:00

Além do especial sobre mídias sociais, também foram destaques da edição de abril da Revista Webdesign os assuntos envolvendo as próximas eleições e o uso de estratégias digitais nas campanhas de políticos brasileiros.

Através da consulta de alguns profissionais da área, procuramos analisar os efeitos do planejamento criado pela equipe web de Barack Obama e o possível surgimento de um fenômeno semelhante no Brasil, além de como as agências digitais podem explorar este segmento.

A discussão foi tão boa que decidimos trazê-la para cá também. A seguir, confira o resultado das entrevistas com os especialistas Fabiano Carnevale, secretário nacional de comunicação do Partido Verde e membro da equipe do Gabeira.com desde 1998, e Moriael Paiva, diretor executivo de criação da Talk Interactive.

WD :: No documentário “Obama Digital”, alunos da Universidade Presbiteriana Mackenzie apresentaram as principais características envolvendo o planejamento de comunicação digital realizado na campanha de Barack Obama. Levando-se em consideração a realidade brasileira, o que podemos esperar para as próximas eleições, em termos de campanhas políticas digitais? Você acredita que haverá um uso massivo das ferramentas digitais por parte dos candidatos brasileiros?

Fabiano :: Primeiramente, é importante ressaltar que o tipo de campanha realizada por Obama é impossível de ser replicada no Brasil. Pelas diferenças entre a forma de utilização da internet nos dois países, de legislação e, principalmente, pelo tempo eleitoral, que no Brasil é limitada em quatro meses, enquanto nos EUA, dura quase dois anos. Isso nos obriga a recolocar a campanha pela internet no Brasil a partir dessas peculiaridades.

Tem muita gente (alguns sérios, outros nem tanto) vendendo a ideia de que, se o Obama fez lá, nós podemos fazer aqui, o que não é verdade. Mas é fato que o papel desempenhado pela internet nas estratégias de comunicação das campanhas será profundamente relevante por aqui nesse ano. Todos os candidatos e partidos estão se preparando para isso, o que difere é a quantidade de recursos alocados para esse tipo de campanha e, principalmente, as estratégias.

Moriael :: Acho que teremos, sim, um uso intenso. Mas também acho que quem tentar simplesmente copiar a fórmula digital do Obama pode se dar mal. Copiar o modelo on-line não é a solução. O sucesso da campanha americana foi uma estratégia inteligente de relacionamento para todos os canais, integrada, alinhada. Sair criando sites, Twitter, redes sociais digitais e não respeitar os princípios da interação e da comunicação de duas vias da internet não adianta.

Wd :: Ainda sobre a campanha de Obama, no livro “Eleições 2.0: a internet e as mídias sociais no processo eleitoral”, Antonio Graeff ressalta que, além de possuir um site de campanha adequado e eficaz, a estratégia digital foi além ao investir cerca de 16 milhões de dólares em publicidade on-line e criar e administrar perfis em mais de 15 redes sociais. Pela sua experiência na área, quais são as ações e as ferramentas mais recomendadas que devam ser utilizadas pelos candidatos brasileiros nas próximas eleições? Que tipo de “e-novidades” poderemos ver para as eleições de 2010?

Fabiano :: Mais uma vez, as diferenças entre a legislação eleitoral brasileira e estadunidenses já demarcam uma fronteira. No Brasil, não poderemos fazer publicidade on-line em sites pagos, nem utilizar, por exemplo, os links patrocinados do Google, que foram fundamentais tanto na campanha do Obama quanto em exemplos recentes, como a eleição do senador republicano Scott Brown, em Massachussets, no fim do ano passado.

Então, não será a quantidade de dinheiro investido que fará a diferença por aqui e sim a capacidade de mobilização dos candidatos. A administração de perfis em diversas redes deve ser uma regra, ainda que no Brasil estejamos falando de cinco ou seis redes relevantes, como Orkut, Twitter, Facebook, YouTube e Flickr.

Não sei se teremos grandes novidades, e mais uma vez, não acredito que serão as novidades que farão a diferença. Uma noção básica na internet é que uma ferramenta só se torna relevante quando está massificada, quando a sua utilização se torna simples para o maior número de usuários.

No Brasil, estamos falando de um período muito curto de campanha. São quatro meses de campanha eleitoral, mas o eleitorado costuma se movimentar quando começa a propaganda na TV e só vira mesmo “papo de botequim” nas últimas semanas. Aí é que a campanha on-line pode fazer a diferença, que é quando os e-militantes começam a colocar em prática suas “estratégias”.

Moriael :: É uma pergunta importante. Cada campanha, político e região têm características em que um ou outro canal pode ter mais peso. A campanha deve se preocupar em atender bem todos os targets nos canais mais adequados, sem se preocupar com a moda do momento. Isso quer dizer que, em muitos casos, uma estratégia usando o bom e velho e-mail pode funcionar tanto quanto o Twitter, a plataforma do momento.

Wd :: Falando em mídias sociais, elas foram ferramentas extremamente eficazes na mobilização e engajamento de eleitores na campanha de Obama. Em sua opinião, quais são as vantagens e os riscos de se investir em meios digitais quando falamos de campanhas políticas no Brasil?

Fabiano :: Existe uma grande excitação por conta dos políticos e marqueteiros em relação a utilização da internet nas campanhas eleitorais. É importante ressaltar que a internet não vai fazer um candidato sem carisma virar um fenômeno eleitoral.

Ao contrário, é somente quando uma campanha vira conversa nas ruas é que ela vai para as redes, pois os eleitores começam a buscar as informações sobre as campanhas e você tem que municiar esse eleitor que vai chegar.

A dinâmica de sucesso é essa, das ruas para as redes, das redes para as ruas. A conversa no bar vai para o diálogo nas redes, e esse volta para o bar, para a universidade etc.

Moriael :: O Brasil é um recordista mundial no uso das mídias sociais. Isso cria um palco excelente para a conversa política, o que já acontece. E, para mim, o maior risco é que políticos não respeitem as características desses espaços. Mídias sociais são canais livres, de conversa e interatividade. Usá-los como canal de propaganda, querendo só falar e não ouvir, pode ser um tiro no pé.

Wd :: Mensurar e apresentar os resultados de campanhas digitais é o principal argumento para convencer os políticos a investirem em ações on-line. De que maneira um processo de métricas web deve ser aplicado para este segmento?

Fabiano :: A internet para a política é orgânica não métrica. A linha que divide o sucesso e o fracasso de uma campanha on-line é quando os seus e-militantes começam a construir suas próprias estratégias, e isso não é facilmente mensurável.

Não descarto a importância de se mensurar o trabalho nas redes, mas é preciso ter em mente que o campo aberto para fazer alterações (a partir desses dados) é menor do que o que os especialistas em pesquisas qualitativas costumam atuar.

Isso se deve ao fato de que, nas mídias tradicionais, como rádio e TV, você comanda um grande broadcaster que transmite para milhões de pessoas, enquanto nas redes sociais são milhares de broadcasters transmitindo, retransmitindo, transformando e recolocando as estratégias oficiais sob seus próprios pontos de vista. A ideia básica é que, para cada e-militante (o broadcaster das redes), uma estratégia é colocada em prática.

Moriael :: Felizmente, esses canais são ricos em possibilidade de mensuração de resultados. Critérios como credibilidade, participação de apoiadores, engajamento são relativamente fáceis de medir em canais como Twitter e Orkut. Aliás, esses dados são tão importantes quanto número de seguidores, que às vezes parece sinal de sucesso.

Wd :: Como as agências digitais e os profissionais freelancers devem se preparar para atender este nicho de mercado?

Fabiano :: Como não sou do mercado, não me sinto confortável para responder essa pergunta. Mas volto a ressaltar que a capacidade de mobilização das candidaturas é o que vai definir o sucesso da campanha on-line e não a quantidade de dinheiro investido.

Uma das principais vantagens da internet é a possibilidade de redução dos custos da campanha, mas a tendência que tenho acompanhado é que se está criando um novo espaço para o gasto de milhões. As cifras até agora apresentadas são irreais.

Moriael :: Fazer uma campanha digital requer tanto conhecimento político quanto do uso de ferramentas. Estar antenado à realidade política da região onde se quer trabalhar é fundamental. É importante pensar que, no fim das contas, o que importa é o voto no dia da eleição. Compreender que o melhor resultado de uma campanha digital é conseguir converter o chamado engajamento virtual em voto na urna.

Wd :: Para finalizar, vocês poderiam indicar bons exemplos de estratégias no mercado brasileiro?

Fabiano :: A campanha do Gabeira à prefeitura do Rio em 2008 é o principal exemplo nacional de como a mobilização on-line pode potencializar uma campanha, inclusive tendo papel decisivo na virada que quase o levou a vitória no segundo turno.

Citaria também a competente utilização da equipe on-line do Gilberto Kassab à prefeitura de SP, que mesmo com um candidato sem grande apelo para o público que tradicionalmente ocupa as redes, conseguiu construir excelentes formatos de participação dos e-militantes, como a coletiva para blogueiros e as desconferências criativas com os voluntários da campanha.

Moriael :: Poderia citar três exemplos:

1. (Sem puxar sardinha, mas já) Tenho segurança em dizer que o trabalho do nosso time na campanha do Kassab foi bem sólido. Muita participação, autenticidade e cobertura adequada. Kassab ouviu São Paulo pela web, em diversos canais. De site colaborativo, que ajudou no plano de governo, a uma rede social fechada que funcionou como QG para os mais engajados.

2. Beto Richa, no Paraná, usa a rede e as mídias sociais com eficiência há algum tempo. Na campanha para prefeito, o meio foi usado para coletar vídeos que foram ao ar na TV. Com muito sucesso.

3. O governador José Serra usa o Twitter de forma autêntica e eficiente. É um “governador” digital. Não apenas pelo número de seguidores, mas pelo uso que faz da interatividade promovida pelo canal. Ouve e conversa.

Prepare seu roteiro: eventos sobre internet

2010-04-29T16:32:00.000-07:00

Apesar da semana “cortada” pelo feriado de Tiradentes (e pelo de São Jorge também, no RJ), quem busca evoluir seus conhecimentos sobre web e também quer fazer um pouco networking, existem boas opções de palestras e eventos na área.

Para os cariocas, por exemplo, podemos indicar a segunda edição do In Net, que acontece no dia 24/04 (sábado), envolvendo apresentações sobre redes e jogos sociais e podcast. Já na próxima semana, a dica é conferir o Ciclo de Palestras Gratuitas, realizado pelo Instituto Infnet.

Em São Paulo e Curitiba, também não faltam boas opções. A partir do dia 22/04, a ENG realiza uma série de palestras e cursos gratuitos, com destaque para temas como Android, Flex, 3D e Vídeo Digital. Outra boa pedida é a palestra oferecida pela Impacta, em SP, no dia 22/04: “Como alcançar o Sucesso no mercado de TI, Gestão & Design“.

Façam seus roteiros e aproveitem estas oportunidades! Ah, quem souber de eventos realizados em outras regiões do país, pedimos que compartilhe tais informações através dos comentários deste post.

Novidade: coluna com notícias internacionais

2010-04-29T16:31:00.002-07:00

O mês de abril marcou o lançamento da reforma gráfica e editorial da Revista Webdesign. Dentre as novidades, destaque para a criação da coluna Internacional. O objetivo deste novo espaço é apresentar os principais acontecimentos do mercado digital pelo mundo.

Mas o diferencial desta coluna aparece em seu caráter colaborativo: todo mês, profissionais brasileiros, atuantes em grandes agências internacionais, vão enviar suas impressões e compartilhar as novidades do segmento web direto das localidades em que se encontram.

Como pequeno aperitivo desta seção, confira a dica enviada recentemente por Ronaldo Jardim, sênior designer na agência Organic Inc, sediada em Toronto, no Canadá:

“Tem início, no dia 25 de abril, a nona edição do FITC, que reúne alguns dos principais profissionais de criação do mercado internacional e local. Esse ano, o evento conta com palestras de nomes como David Eriksson, da North Kingdom, e representantes de estúdios e agências locais, como a Jam3media e a Tribal DDB Canada.

Ano passado, pude conferir o evento e posso garantir: é sempre bom estar próximo de pessoas criativas, trocar ideias, conhecer gente nova em nosso mercado… Então, fica aí a dica: FITC Toronto.”

Artigo: Navegando no mar da educação

2010-04-29T16:31:00.001-07:00

Artigo: Navegando no mar da educação: "

E-learning, LMS, SCORM, ADL… Estes são termos que têm ganhado grande destaque no meio acadêmico e corporativo, onde cada vez mais cresce a preocupação com a capacitação e compartilhamento de conhecimento.

Isso se confirma com pesquisas como a da Global Industry Analysts (GIA), que indica um investimento no mercado global de cerca de 52 bilhões de dólares até o final de 2010.

Assim, primeiro vamos entender o que é o e-learning. Tudo começou no início da década de 90, quando as mídias eletrônicas começaram a ser utilizadas no auxílio da aprendizagem, alavancado pela criação do CD-Room e softwares para apresentação.

Já na segunda metade da década, com o surgimento do e-mail, browser, HTML, streaming de áudio e vídeo, esses processos foram sendo aperfeiçoados e a utilização de meios eletrônicos (multimídias) para o auxílio da aprendizagem começou a ser vista com outros olhos.

Mas foi a partir de 2000 que o e-learning começou a tomar a forma do que conhecemos hoje. Fatores como o acesso à internet de alta velocidade, as novas tecnologias e o aperfeiçoamento dos designers de web trouxeram uma grande revolução ao mercado do ensino.

No Brasil, a grande maioria do material de e-learning, como CD-Roms e materiais de apoio, vinha de fora e era aplicado sem nenhum tipo de gestão educacional dos profissionais entendidos da área. Seu principal uso era das equipes de vendas, que buscavam informações sobre seus produtos para potencializar seus negócios.

Porém, o grande “boom” se deu com o surgimento dos cursos on-line e a preocupação das empresas em capacitar profissionalmente seus colaboradores, não só de vendas, mas de todas as áreas.

Hoje, não só as empresas, mas também professores e entidades de ensino, utilizam o e-learning como forma de auxílio na aprendizagem, disponibilizando meios on-line como portais, fóruns, cursos e até mesmo avaliações para – ao mesmo tempo – ensinar, compartilhar e analisar o nível de conhecimento e aprendizagem de seus colaboradores ou alunos. Algumas grandes empresas, inclusive, já começaram a integrar estes meios de capacitação com o plano de carreira de seus funcionários.

Existem no mercado softwares específicos para a gestão de capacitação e aprendizagem, chamados de LMS’s (Learning Management System – Sistema de Gestão de Aprendizado), onde por meio de um login e senha, todas as interações que o usuário faz com o portal são registradas, tais como cursos, resposta a enquetes, provas e certificações, e, através da análise desses registros, é possível obter dados efetivos sobre o seu desenvolvimento capacitacional.

Um dos LMS’s mais conhecidos atualmente é o “moodle“, utilizado por universidades como Mackenzie, e que está disponível para qualquer pessoa que queira utilizá-lo.

Estas plataformas (LMS’s) utilizam um padrão chamado SCORM (Shrable Content Object Reference Model – Modelo de referência de objetos de conteúdo compartilhados), que é atualmente o mais usado para normatizar o segmento.

No próximo artigo, irei explicar mais sobre o SCORM e como utilizá-lo para gerar conteúdo para um LMS.

Por André Bonnano

Designer, fotógrafo e apaixonado pelas artes, atuante no mercado desde 1995, entrou para o mundo do e-learning quando ele ainda estava engatinhando e foi quando teve a oportunidade de aplicar seu conhecimento e criatividade a uma área ainda pouco explorada no Brasil. Atualmente, é diretor da empresa Magic Mind, especializada em e-learning (plataformas e conteúdos) e pioneira no que se diz respeito à mobile learning e aplicação de novos conceitos em aprendizagem.

Quem sabe faz a hora – Parte V: conheça o pligus Room

2010-04-29T16:31:00.000-07:00

Quem sabe faz a hora – Parte V: conheça o pligus Room: "

Uma das etapas mais prazerosas no processo de produção da Revista Webdesign envolve a troca de ideias com a nossa comunidade e o envio dos mais diversos tipos de sugestões de pauta.

A mais recente delas apresentava a startup carioca pligus, que desenvolveu um serviço de comunicação e colaboração on-line em tempo real. Batizado de pligus Room, ele roda diretamente no navegador do usuário e já conta com a participação de mais de 900 usuários, espalhados por 60 países.

Diante da indicação, resolvemos conversar com Gustavo Scanferla, fundador da pligus, que conta um pouco da história deste projeto. Além do bate-papo, temos uma boa notícia: quem deixar um comentário neste post, indicando bons exemplos de startups brasileiras, estará concorrendo a convites para testar o pligus Room. Boa leitura e participe!

Wd :: Como surgiu a ideia de criar o pligus e quais são os seus objetivos?

Gustavo :: A idéia surgiu tem quase três anos. Portanto, ela evoluiu bastante nesse tempo. Mas já em 2007, a ideia era criar um site onde um grupo de pessoas pudesse ligar a webcam e o microfone ao mesmo tempo (coisa que praticamente não existia) e aproveitar que as pessoas estivessem reunidas para fazerem outras atividades em tempo real – colaboração remota -, que também não era nada comum.

O objetivo do serviço é facilitar a vida da pessoa que trabalha, de uma forma ou de outra, em equipe. Usar o pligus evita que grande parte das viagens ou locomoções seja feita para tomar decisões ou avançar um projeto, ou seja, é uma boa economia de dinheiro e tempo. Possibilita também que os funcionários trabalhem de onde quer que estejam, a qualquer hora (trabalho remoto, home office, viagem etc.).

Também é uma forma de ganhar dinheiro (diretamente) para pessoas que trabalham com treinamentos, consultorias, palestras ou e-learning, já que facilitaria e expandiria as possibilidades do trabalho delas.

Além disso, pude observar, nesse tempo, pessoas usando o pligus simplesmente para se divertir desenhando junto, conversando, mostrando fotos… E até fiquei sabendo que uma autora de livros se reuniu com os fãs dela para uma conversa no pligus. O mesmo ocorreu com um autor de tirinhas bem popular. Há também possibilidades para mesas-redondas, debates, fora as outras possibilidades que ainda não descobri!

Wd :: Quais recursos/investimentos foram necessários para colocá-lo no ar?

Gustavo :: O maior investimento foi no tempo: tempo para aprender a fazer tudo que precisaria ser feito, do zero. Como aprendi pela web, não gastei dinheiro com isso. Tempo também para o desenvolvimento todo. Investimento também em paciência e determinação já que foi um longo tempo.

Pude contar também com o apoio do meu pai, que me deu de presente (comprou) alguns trechos de código que precisavam de licença comercial, já que obviamente eu não pretendia reinventar a roda!

Tais “presentes” não foram tão caros, mas foram de extrema importância para o pligus. Não pude comprar eu mesmo, pois me dediquei ao pligus desde o início, pegando apenas dois estágios (sou estudante de publicidade) que somaram cinco meses ao todo. Não tinha dinheiro de trabalho antes, pois não havia trabalhado, já que comecei o pligus com 17 anos. De recurso, tem eu (recurso humano) e o escritório aqui da minha casa.

Wd :: Quais foram os conceitos e as tecnologias utilizadas para a criação e o desenvolvimento do pligus?

Gustavo :: O Ruby on Rails facilitou demais o processo de desenvolvimento. Fiquei um bom tempo até escolher qual programação iria usar – e não me arrependi. O Adobe Flex (responsável pela Room em si) é ideal, pois é uma tecnologia feita com os aplicativos on-line em mente.

Wd :: Quais diferenciais você acredita que podem torná-lo reconhecido pelo mercado?

Gustavo :: Essa integração bem feita entre uma comunicação completa: onde todos os presentes podem usar áudio, vídeo e texto. E uma colaboração produtiva com recursos que não se vê por aí e que vão melhorar cada vez mais.

O atendimento aos usuários também é um diferencial importantíssimo. O objetivo é ser o mais rápido, pessoal e esclarecedor possível. O preço também será um bom diferencial, já que as pessoas pagarão menos por um serviço melhor.

Fora o diferencial de ter sido feito apenas por uma pessoa. Quase todos os concorrentes contam com equipes de 60 a 80 pessoas em média (muitas delas PhDs), trabalhando “full time”, com um ótimo salário e investimentos enormes (exemplo: Google, Adobe, Cisco). Ou seja: quando tiverem mais pessoas trabalhando, acredito que o pligus irá se destacar ainda mais. Com investimento então, melhor ainda.

Wd :: Que tipo de retorno você espera ter como este projeto?

Gustavo :: Um retorno que viabilize a consolidação da empresa pligus, possibilitando tanto a melhoria desse serviço atual (Room) como a criação de outros que acredito que possam ter um potencial ainda maior.

Outros destaques desta série:

- Quem sabe faz a hora – Parte IV: tu-dus

- Quem sabe faz a hora – Parte III: Ortografa

- Quem sabe faz a hora – Parte II: Zuinn

- Quem sabe faz a hora – Parte I: Logolícia

Observação:

Lembramos que a proposta desta série é ir além de entrevistas sobre novos projetos na web nacional. Após a publicação de cada uma delas, pedimos que vocês postem seus comentários e suas dúvidas para que este bate-papo virtual continue e assim possamos conhecer mais sobre o que se passa pela cabeça dos empreendedores digitais brasileiros. Além disso, não deixem de enviar sugestões para os próximos projetos que vocês gostariam de ver analisados neste espaço. Participe!

WIN a free copy of Socialite 1.1 For Mac

2010-04-27T09:38:00.000-07:00

All your social networks in one convenient place. You too could become more sociable for free! Here is your chance to get a free copy of the excellent social networking app Socialite. However, you will need to be quick as the winner will be chosen at the end of the day.

This freshly updated app from our friends at Realmac Software allows users to connect to their Facebook and Twitter accounts, read and share from their favourite RSS feeds and even access Digg and Flickr, all from within the beautifully designed app.

Find out more at: www.realmacsoftware.com

How to enter:

1. Make sure your’re following @icreatemagazine on Twitter

2. Tweet @icreatemagazine and tell us (in less than 140 characters) how your Mac keeps you sociable, using the hashtag #icreatesocial

3. We’ll pick one winner later on today and provide their code via Twitter DM

Good luck!

Seven Must-See Web Design Videos and Presentations

2010-04-25T02:45:00.000-07:00

In one of our previous articles, I put together a list of 7 must-see videos related to web design. Since then, I’ve come across a number of other videos from conferences and events, and I thought I would share some of those here.

The list includes a brief description of each video, some notable quotes from the presentations, and related links. So, sit back, take your time and enjoy some great technical insights and design principles from some well-known web designers, developers, and conference speakers.

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

The Influence of Print Design

Speaker: Jason Santa Maria

Part of the MFA in Interaction Design program, this is a candid and personal discussion of how print design and the technique of “storytelling” have affected the designs of the speaker in his professional career as a web designer.

Notable Quote:

“Over time I started looking at the way that publications look, and the way that web designs look, and I didn’t see that same connection, and I wondered why. So I want to go over some of the stuff I’ve discovered, and why web design looks the way that it does.”

Related Link:

MFA in Interaction Design Program Website

Simplicity Sells

Speaker: David Pogue

Although not specifically about web design, this is an enlightening and entertaining TED Talk by New York Times columnist David Pogue. Pogue, who has authored many technology books, takes aim at technology’s worst interface-design offenders, and provides encouraging examples of products that get it right. To keep things interesting, he even occasionally breaks into song.

Notable Quote:

“I know one guy who spent $4,000 just on Photoshop over the years. Software companies make 35% of their revenue from just these software upgrades. I call it the software upgrade paradox, which is, if you improve a piece of software enough times, you eventually ruin it.”

Related Link:

David Pogue’s website

Six Things Every jQuery Developer Must Know

Speaker: Elijah Manor

This somewhat technically-heavy talk from the Mix Conference provides an overview of several in-depth concepts that developers need to learn to bring their jQuery development to the next level. The discussion covers six things: “What Is ‘This’?”, “Am I Referencing the jQuery Object or a DOM Element?”, “Understanding Selectors”, “Combine and Minify Your Scripts”, “Different Ways of Storing Data”, and “The Dos and Don’ts of Events”.

Notable Quote:

“Whether you are a beginner or intermediate jQuery developer, if you don’t have a good understanding of the this statement then you’ll most likely find yourself stumbling along.”

Related Link:

The speaker’s talk summary plus info and downloads

Why Designers Fail and What to do About It

Speaker: Scott Berkun

Taken from the “From Business to Buttons” Conference, Scott Berkun talks about design failure and its causes. Sometimes it’s problems in our design process or how we carry it out that cause failure. But in many cases, it’s the other stuff, the non-design stuff, the business stuff that causes failure. Scott argues the need to consider these other aspects — pitching ideas, learning to talk the language of business, and so on — as design problems too.

Notable Quote:

“Studying the perfect cases doesn’t inform as much as the fail cases do.”

Related Link:

Why Designers Fail: The Report

Great Designers Steal

Speaker: Jeff Veen

A very inspiring and informative talk based on a classic quote from Picasso (which he evidently “stole” from T.S. Eliot), “Good artists copy. Great artists steal”.

Notable Quotes:

“Every so often, there’s a product that works so well, that gets technology so right, that it appears almost to be like magic, and almost immediately, competitors do these superficial… knock-offs of the features that they see, hoping that they too can cash in on that success.”

“The key here is to be intentional with what we steal, to look at what the principles are behind the things that are successful, and steal those, rather than just a superficial copy.”

Related Link:

Jeff Veen’s website

Using jQuery to Extend CSS

Speaker: Chris Coyier

At the 2009 Front-End Design Conference, Chris Coyier of CSS-Tricks fame entertains the audience and discusses the many benefits of using jQuery with CSS development, demonstrating how jQuery resolves many typical CSS issues, and even helps extend CSS in ways that CSS alone probably never will.

Notable Quote:

“[Choosing jQuery] is like choosing the guitar. If you’re going to pick an instrument to play, the guitar’s a cool one to choose, because there’s so much information about it out there. There’s a lot more [Google] results for ‘guitar tabs’ and ‘jQuery tutorials’ than there are for ‘banjo tabs’ and ‘MooTools tutorials’.”

Related Link:

Slides from the talk

Seductive Design

Speaker: Andy Budd

Andy Budd, at Build Conference 2009, thinks looks and first impressions do matter, especially in design, and he shows how such principles can be applied to “seducing” users through design.

Notable Quote:

“Often [seduction] is seen as a negative thing, it’s seen as bad. People think of it as leading people astray. However, I actually think that seduction can be a good thing, it can be a fun thing.”

How to Create a Promotional Snail Mail Campaign

2010-04-21T10:15:00.000-07:00

It’s important to promote your design business. This is especially true when economic times are challenging, you’ve got news to announce, or you’re simply hungry for growth. Many forms of promotion are available to the modern designer – with banner ads and Google AdWords among the most popular. In this digital age, it’s easy for web and graphic designers to overlook one of the most effective and fun forms of promotion: the mail campaign. In an era when people are accustomed to communicating electronically, the value and meaning of something you can hold in your hands is greater than ever before.

The promo mailer is perhaps most popular among illustrators and graphic designers working for editorial clients, which means that it is a powerful, untapped resource for some web designers. Likewise, it was probably a much more common practice ten years ago than it is today due to the rise of online promotion techniques – but those who ignore its potential are missing out on a tool with the power to gain new clients, increase web traffic, and attract publicity for your business and events.

This promotional mailer for Ultra Design Co. includes 3-D posters (complete with 3-D glasses!). Designed by Humberto Howard/UDC

Common types of mailers include postcards and brochures, but designers featured in this article have produced everything from faux newspapers to toys and even promotional eyepatches.

In other words, this can and should be much more than just another opportunity to promote your work. It is also an opportunity to have a heap of fun, think outside the rectangle, and even present former and potential clients with a unique objet d’art. If you give them a piece of art and design that they’re unlikely to forget, then they’ll be unlikely to forget you.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

How to Create a Postcard

Promo postcard by author and designer Dan Redding at Magnetic State

The type of mailer that you send is limited only by your imagination, but the most common form is the postcard (we’ll look at other forms momentarily). Postcards come in a variety of sizes (standard is 4.25” by 6”) and are available on cardstocks in a variety of weights and finishes. There is no right or wrong way to create a postcard design, but one steadfast rule is that your greatest talents and skills should be in the spotlight. You’ll probably only have a moment to connect with the recipient of your card, so be bold and communicative.

Your design work should go on the front – perhaps your strongest portfolio piece, or a small selection of them – along with your name, URL, and a list of services provided: ‘Illustration and Design,’ ‘Graphic Design and Web Design,’ etc. The back of the postcard usually includes a designer’s logo along with contact information. Some designers will print a huge logo or alternate design back here, while others will leave enough space for a personal, handwritten note. No matter what your design, make sure to consult USPS guidelines to ensure that your design is acceptable for mailing (any quality printing company can assist you with this).

Avoid the Trash Can

If your postcard looks like every other advertisement out there, it will probably end up in the recycling bin. In fact, it might not even make it past the intern that sorts the mail at that publication you sent to. Then it will get recycled, and in a week, your beautiful work will be five percent of a toilet paper roll on a shelf in a Wal-Mart in New Jersey. You don’t want that.

This beautiful, hand-silkscreened promo mailer by Jay Vollmar has a personal touch.

If your card makes it past the perils of the wastebasket and reaches the hands of your addressee – perhaps an Art Director at a record label or the CEO of a startup company – then you’ve done well. If he or she reads both sides and likes it enough to tack it onto the bulletin board for future reference, then you’re in great shape. And if you get a phone call the next time that Art Director has a freelance job, then you’re golden.

Your design work is not junk – it’s your passion – so your promo shouldn’t be junk mail. Make your promo memorable and personal. When it lands in the hands of Steven Q. Client, present Mr. Client with a design that is compelling and appropriate to his industry. Write him a note that is friendly and courteous while reminding him that you hope to hear from him the next time an appropriate freelance project arises. An even better way to make a great impression and stay out of the rubbish bin is to make an unusual or useful product instead of a postcard.

Print Your Design

If you’re very industrious (and you’ve got a good printer), you might print your postcard yourself. But for most designers, it makes the most sense to pay a professional printer to print a few hundred copies of your design.

Choose a print company that will provide accurate colors, high-quality printing, and accessible customer service. There are many of these available on the web; one fine example is Modern Postcard (author’s note: I am not affiliated, just a satisfied customer).

Don’t be wasteful. Check your printer’s environmental policy (a responsible printing service will make this available). Investigate their commitment to sustainability, recycling, and environmentally friendly products. Make your mailers count. Send to recipients who will be interested in your services.

Think Outside the Rectangle

Some designers eschew the pedestrian postcard in favor of a more adventurous option. Here are some creative promotional items that defy expectations.

This lovingly crafted mail package from Labzeus/Brian Neumann includes his portfolio on a flash drive. According to Mr. Neumann’s website, “The project involved package design (custom folder with die cuts), letterpress & foil stamping (letterset & folder), giclée printing (fold-out poster, 2-sided), chemical etching (flash drives) and hand embossments (sticker seal and poster front). I also sourced mailer boxes, custom labels and had branded packing tape created to round out the piece.”

Promotional ‘business card’ eyepatch designed by Paul Coors for the now-defunct art gallery Publico

These small buttons are emblazoned the famous logos of design hero Paul Rand. Why not make small gifts or accessories featuring your own work?

Promotional paddleball toy by Jay Vollmar

Philadelphia illustrator Hawk Krall sends out ‘mega-packs’ of colorful food-themed goodies. “I get the best response from these,” says Hawk. “I send out about 150-200 of these to my best/newest contacts, made up of 3 or 4 postcards, stickers, tearsheets, hot dog magnets, etc.”

This newspaper-style promotional brochure from Hugo & Marie garnered the consultancy lots of attention both online and off.

A word of advice: if you design an unusual item, says designer Derek Sussner, “take a mockup to the design consultants at the USPS before you show up with 700 things to mail, especially if they are dimensional, fragile, or out of the ordinary. That early consult can save some time, energy – and often, postage costs.”

All About Mailing Lists

So now you’ve got a few hundred copies of your beautifully designed postcard/portfolio brochure/novelty treasure map. Where do you send them? You need a mailing list. A good mailing list is something that you can purchase or develop on your own.

Your mailing list should consist of both former clients and potential clients. You’re contacting former clients to say hello and to reinforce your presence in their minds. You’re contacting potential clients to introduce your work and convince them to visit your site, call you, and ultimately, hire you. With any luck, some of those potential clients will be transformed into enthusiastic former clients list by next year.

Postcard by Weiman Design LLC

How to Buy a Mailing List

Just like printing companies, a simple web search will turn up many companies that sell mailing lists. In fact, many printing companies are ‘one-stop shops’ that will not only print your mailers, but can also sell you a mailing list and even stamp, address, and send your items for you. If you choose this route, make sure the company you buy from is a reputable one. Get their representative on the phone and ask them what they can offer that’s suitable to your target audience. Make sure their lists were compiled recently and contain accurate information. If the list is over a year old, how many of those contacts have changed employers or positions? If one name is spelled wrong or one office incorrect, your mailer will end up at the bottom of the wastebasket – along with the money you spent developing and printing it.

This postcard by Sam Kuo represents the theme of Halloween in New York City. Mr. Kuo has designed many clever mailers that acknowledge pop-culture phenomena and current events.

How to Build your Own Mailing List

For many designers, D.I.Y. (do it yourself) is an ethos to live by. Researching and compiling your own mailing list can be a highly effective and personal way to customize a list to the specific needs of your business. Sending to former clients and contacts is the easy part. But who else can you send to?

In order to build your own mailing list, you’ll need to identify a target audience. If you’re an editorial illustrator working for magazines, you might go to a bookstore and copy down the names and office addresses of art directors listed in the masthead of magazines you’d like to see your work in. If you’re a web designer, you might identify a target market (perhaps you specialize in promotional websites for filmmakers and videographers). Start Googling relevant companies and checking Contact pages for address listings. Don’t be afraid to get on the phone, introduce yourself, and politely inquire about an appropriate contact person who you might send to.

Postcard by Hawk Krall

High and Low

When selecting targets for your mailing list, choose a wide range of recipients. You should choose people and organizations similar to those you’ve worked with before. These potential clients are likely to be suitable to your size, price range, and services. You should also contact your ideal clients – look for your ‘dream job.’ If there are any companies you’ve always wanted to work with, now’s the time to do some research and get in touch. Be resourceful and be professional.

Snail Mail is Your Friend

Whatever you decide to send, calculate accurate postage for each item and buy correctly valued stamps. When in doubt, take your item to the post office and ask questions.

If you’re sending postcards, buy postcard stamps from the postal service. In the U.S., these stamps are cheaper than standard first class stamps and will save you a good deal of money on a bulk mailing.

Send your mail so that it will arrive on a Tuesday or Wednesday (this rule also applies to your email newsletter). Not only is mail volume lighter after Monday, but work volume is lighter, too. Your recipient is likely to have a smaller amount of mail competing with yours for his or her attention on these days. He or she is also more to have a few more moments of attention to devote to something besides the day’s pressing work tasks.

Examples from Sussner Designer Co.

Sussner Design Company (aka SDCo) is a design firm that’s been doing superb (and award-winning) work in Minneapolis, Minnesota for over ten years. Derek Sussner – the company’s “proud owner guy,” according to their website – was kind enough to answer some questions about SDCo’s inventive promotional materials for this article.

Sussner Design Company Promotional Brochure

“We printed about a 1,000,” Derek says of these newspaper-like brochures of the firm’s design work. “Of those, we mailed out 700. We use the rest as our portfolio when we meet with new clients, or to send to new people we come in contact with. Reflections printed them for us. We have a great, long-standing relationship with them. We create all of Reflections’ promotional materials – so we print our own self-promo materials for trade. These brochures/mailers have been pretty successful for us. And they are a great way to stay in front of people we haven’t talked to in awhile.”

Sussner Design Co. Ten-Year Anniversary Poster

When Derek is asked whether he purchases his mailing lists or generates them in-house, he responds, “Both. The mailing list that works the best is the one we keep in-house. We add people we work with, have worked with in the past, people we’ve met and/or submitted proposals for, colleagues, industry partners, and a few networking friends. We also purchased a list (and we’ve renewed it several times). From what I can tell, we’ve never generated a face to face meeting from the purchased list.”

Sussner Design Company Happy Hour Spinner

The Sussner ‘happy hour spinner’ is a whimsical, functional, and extremely clever item that allows the user to put his or her happy hour destination in the hands of fate. The item was the follow-up to a Lunch Spinner, which Derek hopes to re-create soon. “We’re also looking to create a version the can be customized by the recipient – so they can be used by our out-of-town clients and friends.”

Derek’s says the company’s goal for promo mailers “is always that people keep them – and even better – display them on or around their desk. And the best scenario is that it causes them to write you an email or call you with a new project. I also like it when the leftover promos have a life span so you can continue to use them, hand them out, or send them with other capabilities presentations.”

Moving announcements and event notifications are other common types of promotional mailers.

Derek’s advice on the most important attribute of a successful mailer is simple: “It has to grab someone’s attention. Hopefully, it slows the motion of the arm down – if someone notices it on their way to throwing it in the garbage.” The truth of the matter is that all printed promotional matter – no matter how clever – is ultimately disposable. That’s why promo items need to create a mental and emotional impact on the audience’s mind as quickly and deeply as possible.

In Conclusion

Exceptional design work is promotion in itself. Keep your clients happy and follow your own path as an artist and craftsperson. Word of mouth will keep clients and fans of your work coming back to hire you or check in on the evolution of your creative talent. In fact, a designer at one popular screenprinting and graphic design studio contacted for this article said, “You’ll be interested to discover that we actually do not have any promotional material! Our posters have worked as an effective promotional material for us for years. Don’t ask me how, but they do.” The truth is that this award-winning studio stays on top because its designs are exceptional and original each and every time. It has also been in business for many years – accruing clients, awards, and publication in popular design magazines all the while.

However, for designers that work at new or growing businesses – some of which launched during a daunting economic downturn – promotion is a valuable tool. It can also be a great way to express your personal creative energy between jobs for professional clients.

Besides, Thomas Edison once said “Everything comes to him who hustles while he waits,” and Jay-Z said “You can’t knock the hustle.”

So promote, promote, promote!

Starting Out Organized: Website Content Planning The Right Way

2010-04-21T10:14:00.000-07:00

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

Your New Project: How It Goes All Too Often

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

A TIFF logo (in CMYK) via email;
A set of logo standards that include the RGB values, via email (separately);
A disc full of photos with various names (like “DSC09080978″);
A fax that labels the photos according to their file names;
An email that lays out the top and second-level navigation, as the client sees it;
A phone that makes last-minute changes to the top-level navigation;
An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

Allows you to organize deliverables from various media;
Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
Helps you collaborate with all stakeholders;
Shows how the project is developing and what’s left to do;
Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

What’s it for?
To gather feedback on what pages should go where on your website.
What’s good about it?
It’s a great way to learn the assumptions of multiple users.
What’s bad about it?
The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
In sum
One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

Card Sorting: A Definitive Guide
Card Sorting According to the US Government (official .gov website on usability)
Card Sorting: Mistakes Made and Lessons Learned
Word Matching

Content Inventories

A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

What’s it for?
To understand the context and purpose a website’s pages.
What’s good about it?
Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
What’s bad about it?
Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
In sum
A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

Content Inventories as described on Usability.gov
Content Inventory (Boxes and Arrows)

Paper and Sketchboards

Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

What’s it for?
To quickly and collaboratively sketch out a website architecture.
What’s good about it?
You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
What’s bad about it?
Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
In sum
Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

Sketchboarding (Adaptive Path)
Sketchboards + Prototypes (Slideshare)
More links on Brandon Schauer’s website

Site Map Diagrams

A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

What’s it for?
To visually explain the relationships between pages on your website.
What’s good about it?
Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
What’s bad about it?
The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
In sum
A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

How big is the website?
The sheer size of some websites makes some of these methods cumbersome or impossible.
What type of website is it?
The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
Who is your client?
The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
Consider your workflow.
Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

Organize content according to user needs, not an organizational chart or how the client structures their company.
Give pages clear and succinct names.
Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
If you can’t succinctly explain why a page would be useful to someone, omit it.
Plan the architecture around the content. Don’t write content to fit the architecture.
When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

What’s it for?
HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
What’s good about it?
They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
What’s bad about it?
Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
In sum
HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

What’s it for?
Text editors are a quick and easy way to organize text for a website.
What’s good about it?
They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
What’s bad about it?
The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
In sum
Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

Slides

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

What’s it good for?
Slideshow creators are used to easily sketch the structure and to link pages.
What’s good about it?
They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
What’s bad about it?
Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
In sum
Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

Jumpchart

Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

What’s it good for?
Jumpchart is a natural extension of manual HTML wireframes.
What’s good about it?
It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
What’s bad about it?
Jumpchart requires a paid subscription to plan larger websites.
In sum
Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
Use the permission system to control who can see and who can edit.
For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
Bundle revisions. You’ll kill your budget if you make individual changes as they come.
Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
Keep all deliverables in one place, and put them there as soon as you get them!
Ask for written changes, preferably via email so that they’re time-stamped.
Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

Understand the goals of the website.
Gather resources.
Organize resources at top level and then at page level.
Assess your work based on user profiles.
Demonstrate your plan.
Get approval.
Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

(al)

The Ultimate Guide To Cloning In Photoshop

2010-04-21T10:11:00.000-07:00

Photoshop’s wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

The Clone Stamp Tool

The Clone Stamp tool is the oldest and most widely known of the cloning tools. The basic concept is that you duplicate certain portions of an image using a source, destination and brush.

Use the “Option” key (”Alt”) to set the source.

To clone out the name on the tombstone above, you would select a source that shares the texture of the area you want to replace. In this case, the area around the words provides an ample source of stone texture from which to clone.

To begin, simply click on the preferred source area while holding down the “Option” key (”Alt” on a PC). Then, with no keys held down, begin painting over the area you want to replace. The image area from the source will be transferred to the destination.

To be able to use this tool effectively, let’s look at the relevant settings.

Basic Settings: Brush

Below, you’ll find the default settings when the clone stamp is selected.

The clone stamp’s basic settings.

The first setting you’ll want to familiarize yourself with is for the brush. Photoshop does not restrict cloning to a basic default brush. Instead, it allows you to use any brush you want, allowing you to create an unlimited number of effects. In the example above, and in most cases in fact, a small to medium-sized round soft brush gives the best result.

A hard brush creates noticeable seams.

As you can see, a hard brush often creates visible edges along the path of the clone. The transition is much smoother on the left side, where a soft brush was used. Both sides suffer from noticeable replication, but this was intentional to exaggerate the cloned area. We’ll discuss how to avoid this later.

As stated, while a soft round brush is recommended for basic cloning, a number of interesting effects can be created using alternate brushes. For instance, below I’ve used a scatter brush shaped like a leaf to add some visual interest to the photo.

Use a scatter brush to create interesting particle effects.

Experiment with the opacity, blending mode and brush flow for an even wider variety of results. For more information on using these features, check out the article “Brushing Up on Photoshop’s Brush Tool.”

Basic Settings: Sample

Under the “Sample” menu are three options: Current Layer, Current & Below and All Layers. These options affect the area you are sourcing. Here’s a visual illustration of how each mode works:

The area cloned depends on the selected layer and sample mode.

As you can see, with Current Layer selected, the clone stamp ignores pixel data contained in any other layer. Conversely, All Layers ignores all layer distinction and clones any visible pixels in the document (invisible layers will be ignored). Finally, Current & Below samples pixels from the selected layer and any visible layers behind it.

Basic Settings: Adjustment Layers

The final basic setting (the circle with a diagonal line through it) lets you decide whether the clone stamp tool should sample adjustment layers when cloning. Adjustment layers, such as Hue/Saturation and Levels, are meant to be a non-destructive way to change the appearance of layers. So, you can make drastic changes to a layer or group of layers without destroying the original pixels.

Because of this, turning on Ignore Adjustment Layers When Cloning is almost always a good idea. This allows you to clone the original image, which can then be affected by an ever-changeable adjustment layer. If you do not choose to ignore the adjustment layer, the adjustment becomes permanent in the cloned areas.

In the layer set-up below, turning on Sample All Layers would by default clone pixels from both the background layer and the adjustment layer in the foreground. Turning on Ignore Adjustment Layers prevents this.

You can choose to ignore adjustment layers when cloning.

The Spot Healing Brush

As you can see below, the Spot Healing Brush tool is located under the Eyedropper tool and above the Brush tool, and it can be accessed quickly by hitting J on the keyboard.

Type J to bring up the Spot Healing Brush.

The Spot Healing Brush is by far the simplest cloning tool in Photoshop. With little to no experience, you can repair small areas of an image. The secret to using the tool is in the name: Spot Healing. The tool is intended not for large areas of replacement, but rather to remove little unwanted spots, such as a scratch on an old photograph or a mole on a person’s face.

To use the tool, simply hover over the area you want to replace and click once. Photoshop does all the work by examining the pixel data around the spot and seamlessly integrating the data into the destination.

The Spot Healing Brush is perfect for repairing old photographs.

As you can see above, the tool does a remarkable job of not leaving behind any noticeable artifacts or repeating patterns. The trick is to go slowly and work on very small portions of the image. Select a spot to fix, and use a brush that’s only slightly bigger than the selected imperfection. The larger the brush, the more likely you are to clone unwanted portions of the surrounding area, and the more noticeable the repetition of pixels will be.

Use a brush slightly bigger than the target spot.

The Healing Brush

The Healing Brush tool, located under the Spot Healing Brush tool, is very similar to the Clone Stamp tool. To begin, Option + click (Alt + click on a PC) to select your source, and then carefully paint over the destination to transfer the pixels. The Healing Brush performs this operation with more built-in intelligence than the Clone Stamp.

As with the Spot Healing Brush, the Healing Brush attempts to automatically blend in the cloned pixels with the environment around it.

The Healing Brush tool automatically blends the source with the destination.

As you can see, using the Clone Stamp to clone the puppy’s eye results in a straight copy of the pixels, while the Healing Brush does a much better job of blending with the background.

This built-in intelligence proves extremely helpful when cloning a subject with diverse colors, textures and lighting conditions. Using the Clone Stamp in these situations can leave you with a lot of noticeably patchy spots that really stand out from the surrounding area.

The Healing Brush Tool makes it easy to clone visually complicated areas.

The photograph above is a good example of a subject with a fairly complicated surface. Using the Clone Stamp tool would have made it quite difficult to paint over the cracked areas while retaining the integrity of the stained stone. Much of the discoloration would have been sacrificed as you sourced smoother areas to erase the cracks. However, the Healing Brush was able to effectively replace the cracked areas with smoother areas, while sampling from the surrounding area to replicate the stains.

The Patch Tool

The final healing tool we’ll examine is the Patch tool, which can be found under the Healing Brush tool, as seen below.

Tip: hit Shift + J to cycle between the tools in the fly-out menu.

The cloning tools we’ve examined so far are best when used meticulously on small portions of an image. By contrast, the Patch tool is the best way to clone large, relatively uniform areas. As with the other healing tools, the Patch tool not only performs a straight clone but attempts to blend in the edge of the selected area with the target environment.

To use the Patch tool, either make a selection with any of the selection tools, or simply select an area with the Patch tool’s built-in lasso. There are two modes to choose from for the behavior of the patch: “Source” and “Destination” (found in the menu bar above the document area).

Source Mode

With the source mode selected, first select the area of the image you want to replace, and then drag that selection to the area you want to source. For instance, to eliminate the golf ball in the image below, you would first select the area around the golf ball, and then drag that selection around to find the best source.

In source mode, first select the area you want to replace.

As you drag the selection around to find a suitable source, watch the destination (i.e. your originally selected area) for a preview of what the source pixels will look like in that area. Keep in mind that this preview is a straight clone without any blending (the final image will look much better). Release the selection to see the actual result.

The Patch tool’s result.

As you can see, it does a pretty impressive job of blending the source and destination pixels all on its own. But going over areas that need improvement with the Healing Brush is good practice.

Destination Mode

With “Destination” mode selected, the area you select first will be the area that is replicated elsewhere. For instance, if we start with the same selection as before, dragging the selection this time gives us a preview of copying the ball to a new location.

Patch tool destination mode.

After you release the selection, the golf ball is copied to a new area of the image and blended with the surrounding pixels.

Result of “Destination” mode.

The Clone Source Palette

The Clone Source palette (found under Window → Clone Source) is an invaluable resource for professional-quality cloning. This tool gives you much more control over the results and functionality of the Clone Stamp and Healing Brush.

The Clone Source palette contains three primary sections: cloning source, offset adjustment and overlay options.

The Clone Source palette.

Cloning Sources

In the first section in the Clone Source palette, you can define multiple areas of an image as a source from which to clone and/or heal.

Defining multiple sources.

The image above illustrates an example of when you might want to define multiple sources. To save a source, click on one of the five source buttons, and then Option + click (Alt + click) with either the Clone Stamp or Healing Brush. That location will now be saved to that button. Now, select the next button in line, and do the same in another part of the image. Once your sources are loaded, you can quickly shift between them simply by clicking the related button.

Notice that the file name appears just under the clone source buttons. This is because you can actually select a clone source outside of the image that you’re working on. Simply open a different file and set the clone source. Then, when you go back to the primary file to paint with the Clone Stamp or Healing Brush, the pixels from the other image will function as the source of the clone.

Offset Options

The second section of commands in the Clone Source palette really increase the variety of cloned results available to you. You can set exact coordinates for the source, change the size of the cloned result relative to the original source, tweak the rotation of the result and set a precise offset (again, relative to the original source).

Tweaking the cloned results.

You can see these transformation effects in action in the example above. The two bails of hay are actually one and the same, but they look considerably different because of the offset options. First, I set both the width and height to 90%, so that the cloned bail would appear slightly smaller than the original. Then I changed the width to -90% to flip the clone horizontally (you could change the height to a negative number to flip the image vertically). Finally, I set the rotation to 10° to give the illusion of a small hill.

Overlay Options

The overlay options are among the most helpful features in the Clone Source palette. Years ago, cloning involved a lot of guess work because it was difficult to tell exactly what the selected sample would look like without actually applying it. The guesswork has been eliminated with the “Show Overlay” command. When “Show Overlay” is selected in conjunction with the “Clipped” option, your brush is shown with a preview of the clone source inside. This is extremely helpful when attempting to clone inorganic areas with straight edges, such as a brick wall.

An overlay of the source is displayed within the brush.

Note that if you choose to turn on the overlay but turn off “Clipped,” then your entire clone source layer will be shown surrounding the brush.

An overlay of the source is displayed within the brush.

Working this way is actually quite difficult because the source significantly blocks your view of the destination. But if you prefer it, try reducing the opacity of the overlay so that you can see the image below.

Vanishing Point

Vanishing Point takes cloning to an entirely new dimension, literally. The tool makes it possible to set up primitive planes across your artwork, which a clone then follows to simulate a three-dimensional space. Vanishing Point has a ton of features and potential applications, and it really merits its own entire article, so this will be just a brief introduction.

When you open up the Vanishing Point dialog (found under the “Filter” menu item), you’ll see a large preview of your image, along with a small set of tools on the left side.

The Vanishing Point dialog.

Grab the tool sitting second from the top to set up your initial plane. With this tool, click once on each of the four corners, outlining the desired plane. Once you’ve created an initial plane, you can Command + click (Control + click on a PC) to extend the plane perpendicularly. Some images, though, like this old barn, won’t have perfect angles. In this case, you’ll have to create a second plane, entirely distinct from the original.

Setting up planes.

Once you’re satisfied with the planes, grab the Clone Stamp (fourth from the top), and Option + click the desired source (in our case, the barn door). Then clone the door onto the front-facing wall using the same method you would use with the normal Clone Stamp tool. Turn “Healing” on in the drop-down menu above the image preview to ensure that the source is properly blended into the destination.

Vanishing Point result.

As you can see, Photoshop interpreted the planes fairly well. Some fine-tuning and clean-up are definitely necessary if we want a believable image; but overall, the result is extremely impressive, given the lack of work required.

5 Quick Tips For Better Cloning

Now that we’ve examined each tool in depth, let’s close by recalling a few things to keep in mind if we want to clone with professional results.

Take Your Time

As you undertake a cloning project, the quality of the result is directly proportional to the amount of time you put into it. Cloning photographic details can be incredibly tedious work. The world has become well acquainted with Photoshop magic, so never assume that no one will notice your blunders.

Duplicate the Active Layer

The very first step to take when cloning parts of an image is to duplicate the layer you’ll be working on (or to just work on a new transparent layer). Realizing that you made a mistake so long ago that your “Undos” don’t go back far enough to fix it is beyond frustrating. Keeping the original image on a hidden layer gives you the flexibility to revert any part of an image to its original state.

Be Selective With Your Tools

Each cloning tool has its strengths and weaknesses, as outlined above. Never arbitrarily grab a tool and stick with it for the duration of a project. Consider which tool is best suited to the particular area of the image you’re working on. On large projects, no single tool creates believable results on its own. Use two or more tools in synergy to achieve a realistic result.

Watch for Obvious Duplication

Sloppy cloning results in noticeable patterns.

If you’re not careful, duplicated pixels can become painfully obvious. This is especially true of areas that should look fairly organic, like the grass above. Instead of appearing natural, an obvious pattern emerges when you use the same section of an image over and over. To avoid this, make heavy use of the Clone Source palette. Use multiple sources; and change the size, rotation and orientation of the areas you’re cloning to give the illusion of an unmanipulated image.

Avoid Disasters

When retouching significant parts of an image, overlooking certain areas becomes all too easy.

Where did her leg go!?

If you’re not careful, you could eliminate enough vital body parts to make the image humorous. Your goal is to prevent your work from showing up on Photoshop Disasters, which is where you’ll find the image above.

Conclusion

Cloning in Photoshop is a difficult task that requires significant time, studious attention to detail and an in-depth knowledge of several tools and commands. To improve the quality of your results, invest some time learning Photoshop’s entire cloning arsenal. Experiment with all of the options for each tool to get a better feel for where you can excel.

Additional Resources

Vanishing Point Video Turorial
How to Use the Clone Stamp Tool in Photoshop
Cloning and Healing: Photoshop Tutorial
How to Mirror Your Clone Stamp (video tutorial)
Retouching and Healing Tools, Tutorial9

(al)

Obama e o poder da internet

2010-04-21T10:01:00.000-07:00

Mais de dois milhões de seguidores no Twitter – atualmente, já são mais de três -, postagem de 1.800 vídeos no YouTube, que geraram mais de 20 milhões de visualizações, e mais de 500 grupos de discussão criados no Facebook. Além disso, 67% do montante arrecadado em contribuições vieram através da internet.

Esses são alguns dos principais números registrados pela bem-sucedida campanha de Barack Obama à presidência dos EUA. E comprovam a eficácia no uso da internet como uma ferramenta estratégica de divulgação e de mobilização de eleitores.

A seguir, confira dois excelentes conteúdos que analisam as métricas desta campanha: o primeiro chama-se Obama Digital, um vídeodocumentário preparado por alunos da Universidade Presbiteriana Mackenzie; já o segundo é a apresentação “Barack Obama: Case em mídias sociais”, feita pela equipe de planejamento da agência Riot.

Develop an AIR Contact app in Flex Part 2

2010-04-21T10:00:00.000-07:00

STORE ALL YOUR FRIENDS’ AND FAMILY’S CONTACT INFORMATION IN A USEFUL AIR APPLICATION. LEARN HOW TO ADD, EDIT AND DELETE DATA IN AN SQLITE DATABASE IN PART 2 OF THIS TUTORIAL

In Part 1 we began coding an AIR contact manager with Flex and realised that the sheer amount of code meant we’d have to split it over two parts. So if you’re encountering this from scratch you’ll need to bear a couple of things in mind. Step 1 is in fact Step 16 in the overall tutorial. Find the code for Part 2 here and Part 1 here

Author: Simon Bailey | Originally appeared in Issue 146

1 Instantiate SQLQueries

In ContactManager, navigate to the onOpen() method and enter the text below to create a new instance of the SQLQueries class. Using the instance of the LConnector class, parse the SQLConnection in the SQLQueries constructor and add an OnContacts method to the CONTACTS_ARR event, dispatching the ArrayCollection of contacts.

private function onOpen( e:Event ):void

sqliteQueries = new SQLQueries( sqliteConnector.connection );

sqliteQueries.addEventListener( SQLQueries.CONTACTS_ARR, onContacts );

}

private function onContacts( e:AllContactsEvent ):void

{

}

2 Load contacts into wrapper

We need to parse the ArrayCollection of contacts to the ContactsWrapper. Enter the code below. Assign the contacts as the ContactList data grid’s data provider. In the onContacts() method in ContactManager, parse the contacts to setContacts().

public function setContacts( contacts:ArrayCollection ):void{

c_list.contact_dg.dataProvider = contacts;}

private function onContacts( e:AllContactsEvent ):void{

contactWrapper.setContacts( e.contacts );}

3 Display contact

In ContactWrapper, add a listener to the Select event on the ContactList component, calling a method named displayContact. The Contact variable is populated from the selectedContact reference assigned through mx:Binding in ContactList.

private function displayContact():void{

c_details.add = false;

c_details.edit = false;

c_details.contact = c_list.selectedContact;

}

4 Add, edit, delete

Still in the ContactWrapper class, enter the onClick() method. A switch statement analyses the eventName parsed and acts accordingly. Edit has two modes: edit, which transitions ContactDetails state, and save to retrieve edited contact details and saveContact().

private function onClick( eventName:String ):void

{

switch ( eventName )

{

case ‘edit’:

if( !c_details.edit ){

c_details.edit = true;

}

else

{

var contact:ContactVO = c_details.saveContact();

( contact.firstName != “” ) ? saveContact( contact ) : c_details.clear();

c_details.edit = false;

}

break;

case ‘add’:

c_details.edit = true;

c_details.add = true;

c_details.newContact();

c_list.deSelect();

break;

case ‘delete’:

if( c_list.contact_dg.selectedIndex != -1 ){

c_list.deSelect();

c_details.clear();

}

break;

}}

5 saveContact

If the contact has been edited, saveContact() is fired. This method expects a contact value object as its parameter and uses a custom event to dispatch the contact for storage. Add/edit is determined by the ContactDetails’ add Boolean.

private function saveContact( contact:ContactVO ):void{

if( !c_details.add ){

}

else

{

}

}

6 Creating custom events

We will create transparent background divs, with position: absolute set so they sit behind the content. Create the following class .background in the style sheet:

package events

{

import flash.events.Event;

import vo.ContactVO;

public class ContactEvent extends Event{

public var contact:ContactVO;

public function ContactEvent( _contact:ContactVO, type:String, bubbles:

Boolean=false )

{

super( type, bubbles );

this.contact = _contact;

}

public override function clone():Event

{

return new ContactEvent( contact, type, bubbles );

}}}

7 Overlaying content

Create two new ActionScript classes that extend Event in the events directory named ‘ContactEvent’ and ‘AllContactsEvent’. These custom events will be used to dispatch a contact value object around our application and an ArrayCollection of contacts.

<!– Dispatched Events –>

<mx:Metadata>

[Event(name=”closeWin”, type=”flash.events.Event”)]

[Event(name=”contactDelete”, type=”events.ContactEvent”)]

[Event(name=”contactEdit”, type=”events.ContactEvent”)]

[Event(name=”contactAdd”, type=”events.ContactEvent”)]

</mx:Metadata>

// Dispatched events to add, edit and delete

private static const CONTACT_DELETE:String = ‘contactDelete’;

private static const CONTACT_EDIT:String = ‘contactEdit’;

private static const CONTACT_ADD:String = ‘contactAdd’;

case ‘delete’:

if( c_list.contact_dg.selectedIndex != -1 ){

var e:ContactEvent = new ContactEvent( c_list.selectedContact as ContactVO, CONTACT_

DELETE, true );

dispatchEvent( e );

c_list.deSelect();

c_details.clear();

}

break;

var e:ContactEvent;

if( !c_details.add )

{

e = new ContactEvent( c_details.contact as ContactVO, CONTACT_EDIT, true );

}

else

{

e = new ContactEvent( c_details.contact as ContactVO, CONTACT_ADD, true );

}

dispatchEvent( e );

8 Listen for custom events

Edit the ContactWrapper component to listen for the dispatched custom events for Add,Edit and Delete. Create the three methods to handle the events and call the appropriate method in SQLQueries, parsing the contact value object stored in our custom event.

// Add contact

private function addContact( e:ContactEvent ):void

{

sqliteQueries.addContact( e.contact );

}

// Edit contact

private function editContact( e:ContactEvent ):void

{

sqliteQueries.editContact( e.contact );

}

// Delete contact

private function deleteContact( e:ContactEvent ):void

{

sqliteQueries.deleteContact( e.contact );

}

<!– Contact Manager wrapper –>

<view:ContactWrapper id=”contactWrapper”

width=”100%” height=”100%” x=”0” y=”0”

closeWin=”closeWindow( event )”

contactDelete=”deleteContact( event )”

contactAdd=”addContact( event )”

contactEdit=”editContact( event )” />

9 Modification queries

Add your final three methods to add, edit and delete data from our SQLite database.

// Edit a contact

public function editContact( _contact:ContactVO ):void

{

var _sql:String = “UPDATE records SET firstName=:firstName, “ +

“lastName=:lastName, “ +

“email=:email, “ +

“mobileTel=:mobileTel, “ +

“homeTel=:homeTel, “ +

“address=:address “ +

“WHERE contactID=:contactID”;

execute( _sql, contactResult, _contact, EDIT );

}// Add a contact

public function addContact( _contact:ContactVO ):void

{

var _sql:String = “INSERT INTO records (firstName, lastName, email, mobileTel,

homeTel, address) “ +

“VALUES (:firstName, :lastName, :email, :mobileTel, :homeTel, :address)”;

execute( _sql, contactResult, _contact );

}// Delete a contact

public function deleteContact( _contact:ContactVO ):void{

var _sql:String = “DELETE FROM records WHERE contactID=:contactID”;

execute( _sql, contactResult, _contact, DELETE );}

private function contactResult( e:SQLEvent ):void

{

getContacts();}}}

10 Drag window

Add a mouseDown Event Listener to the ContactWrapper instance, calling an onDrag() method. Within onDrag, call the startMove method on the NativeWindow class.

mouseDown=”onDrag( event )”

// Enable drag of app

private function onDrag(e:MouseEvent):void

{

stage.nativeWindow.startMove();

}

11 XML descriptor file

Here you outline the application identifier, file name, description and window settings for display purposes.

<?xml version=”1.0” encoding=”UTF-8”?>

<application xmlns=”http://ns.adobe.com/air/application/1.0”>

<id>ContactManager</id>

<filename>ContactManager</filename>

<name>Contact Manager</name>

<version>v1</version>

<description>Contact Manager application for managing all your friends and family

contact information.</description>

<initialWindow>

<content>[This value will be overwritten by Flex Builder in the

output app.xml]</content>

<title>Contact Manager</title>

<systemChrome>none</systemChrome>

<transparent>false</transparent>

</initialWindow>

</application>

12 Test your app

Click Run>Run ContactManager, then click Add and add some contact information into the details panel. Click Save, test, edit and delete. Now click Project>Export Release Build. Click Next>Create to build a new digital certificate. Click Next and ensure the XML file, contacts database and SWF file are selected, then click Finish. Finally, double-click your newly created AIR file. Select Install, keep the next window’s defaults and select Continue.

Develop an AIR Contact app in Flex Part 1

2010-04-21T09:59:00.000-07:00

STORE ALL YOUR CONTACTS IN A USEFUL AIR APPLICATION BY LEARNING ADD, EDIT AND DELETE DATA TECHNIQUES WITHIN AN SQLITE DATABASE.

Developers can now take their RIA concepts out of the browser and onto the desktop. There are so many concepts feasible in an AIR application and with the ability to store data in a local database, programs we have long been familiar with can now be rebuilt with your own added flair. This tutorial will show you how to build a simplified version of Apple’s Address Book using SQLite to store contact information. The UI will be created using MXML components with ActionScript classes to control all functionality. We urposely aimed to use a variety of techniques in the code to handle states, communicate data, etc, so we would recommend studying the source for further insight. To complete this tutorial, you will need to use the source files to access all of the code; certain scripts are covered in each step. In addition, the guide is split over two parts with next month’s final text including the PDF pages and final files from here.

01 Download required software

Download the latest AIR runtime from http://get.adobe.com/air/ and follow the installation instructions provided by Adobe. If you do not have Flex Builder 3 installed, visit www.adobe.com/products/flex/ to download the 60-day free trial and install as instructed. Now we are ready to start setting up our project.

02 New Flex project

To fire up Flex, select File>New>Flex Project. Enter ‘ContactManager’ as the project name, check Default Location and check the Desktop application (runs in Adobe AIR). Ensure Application Server Type is set to None and click Next. Keep the default output folder and click Next, once again keeping all the defaults. Click Finish.

03 Construct main component

Within the opening WindowedApplication tag in ContactManager.mxml, enter the code as below. Enter the second set of text above to set some basic styling for the contact manager. Create four new folders in the SRC directory: ‘components’, ‘events’, ‘SQLite’ and ‘VO’. Add the provided contacts database from the CD to the SRC folder.

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute”

width=”450”

height=”360”

showFlexChrome=”false”

verticalScrollPolicy=”off”

horizontalScrollPolicy=”off”>

<mx:Style>

TitleWindow

{

cornerRadius: 0;

roundedBottomCorners: false;

headerColors: #ffffff, #999999;

footerColors: #cccccc, #999999;

borderThicknessLeft: 0;

borderThicknessTop: 0;

borderThicknessBottom: 0;

borderThicknessRight: 0;

headerHeight: 34;

shadowDistance: 0;

dropShadowColor: #333333;

titleStyleName: “contactTitle”;}

.contactTitle

{

color: #333333;

fontFamily: Verdana;

fontSize: 12;

fontWeight: bold;}

</mx:Style>

04 Contact value object

Right-click the VO folder and create a new ActionScript class named ‘ContactVO’ and uncheck Generate constructor from superclass. Enter the code below. This custom value object will ensure correct data typing of contact details is used throughout this. The [Bindable] meta-data tag assigns instances of this class to MXML components.

package vo

{

[Bindable]

public class ContactVO

{

public var contactID:int;

public var firstName:String;

public var lastName:String;

public var email:String;

public var mobileTel:String;

public var homeTel:String;

public var address:String;

public function ContactVO(){}

}

}

05 Build a UI wrapper

Right-click the components folder, select New>MXML Component. Set the file name as ‘ContactWrapper’ and base it on a TitleWindow. Clear width and height values and define layout as absolute. Within the opening TitleWindow tag, ensure the code is as below. Within the opening and closing TitleWindow tags, create a new <mx:Script> tag.

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”

xmlns:view=”components.*”

layout=”absolute”

title=”AIR Contact Manager”

showCloseButton=”true”>

06 Add the wrapper

In ContactManager.mxml, ensure the code now looks like above. The main two changes here are a new XMLNS reference to our component’s directory so we can add the ContactWrapper component, which is near the bottom of the script. Next, we added an onCreationComplete method initApp() that runs when the component is fully created.

<<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml”

xmlns:view=”components.*” layout=”absolute”

width=”450” height=”360”

showFlexChrome=”false” verticalScrollPolicy=”off”

horizontalScrollPolicy=”off”

creationComplete=”initApp()”>

<mx:Script>

<![CDATA[private function initApp():void{}]]>

</mx:Script>

<view:ContactWrapper id=”contactWrapper”

width=”100%” height=”100%” x=”0” y=”0” />

07 Contact list

In the components folder, create a new MXML component extending Canvas named ‘ContactList’, adding the below code. This component will act as a simple list of all the contacts stored in our database. setName() concatenates the first and last name strings for display. <mx:Binding> binds items in the data grid to the variable selectedContact.

<<?xml version=”1.0” encoding=”utf-8”?>

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Metadata>

[Event(name=”select”, type=”flash.events.Event”)]

</mx:Metadata>

<mx:Script>

<![CDATA[

import mx.controls.dataGridClasses.DataGridColumn;

import vo.ContactVO;

public static const SELECT:String = ‘select’;

[Bindable] public var selectedContact:ContactVO;

private function setName( item:Object, column:DataGridColumn ):String

{

return String( item.firstName +” “+ item.lastName );}

public function deSelect():void{

contact_dg.selectedIndex = -1;}]]>

</mx:Script>

<mx:Binding source=”contact_dg.selectedItem as ContactVO” destina

tion=”selectedContact”/>

<mx:DataGrid id=”contact_dg” width=”100%” height=”100%”

click=”if ( contact_dg.selectedIndex != -1) dispatchEvent(

new Event( SELECT, true ) );”>

<mx:columns>

<mx:DataGridColumn labelFunction=”setName” headerText=”Name” />

</mx:columns></mx:DataGrid></mx:Canvas>

08 Contact details

In the components folder, create a new MXML component extending Canvas named ‘ContactDetails’, adding the below code. This displays all the contact data when selected in the ContactList. This component has two visual states, one to view the data and one to edit the data. State change is controlled by the Boolean variable ‘edit’.

i<?xml version=”1.0” encoding=”utf-8”?>

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”

verticalScrollPolicy=”off”

horizontalScrollPolicy=”off”

currentState=”{ ( edit ) ? ‘edit_view’ : ‘’ }”>

<mx:states>

<mx:State name=”edit_view”>

<mx:RemoveChild target=”{ first_txt }” />

<mx:RemoveChild target=”{ last_txt }” />

<mx:RemoveChild target=”{ email_txt }” />

<mx:RemoveChild target=”{ mobile_txt }” />

<mx:RemoveChild target=”{ home_txt }” />

<mx:AddChild position=”lastChild”>

<mx:TextInput id=”first_in” text=”{ contact.firstName }” width=”95”

x=”69” y=”10” />

</mx:AddChild><mx:AddChild position=”lastChild”>

<mx:TextInput id=”last_in” text=”{ contact.lastName }” width=”95”

x=”174” y=”10” />

</mx:AddChild><mx:AddChild position=”lastChild”>

<mx:TextInput id=”email_in” text=”{ contact.email }” width=”200”

x=”69” y=”50” />

</mx:AddChild><mx:AddChild position=”lastChild”>

<mx:TextInput id=”mobile_in” text=”{ contact.mobileTel }” width=”200”

x=”69” y=”90” />

</mx:AddChild><mx:AddChild position=”lastChild”>

<mx:TextInput id=”home_in” text=”{ contact.homeTel }” width=”200”

x=”69” y=”130” />

</mx:AddChild></mx:State></mx:states>

<!– Transition for the screen –>

<mx:transitions>

<mx:Transition id=”fadeTransition” fromState=”*” toState=”*”>

<mx:Parallel target=”{ this }”>

<mx:Dissolve duration=”600”/>

</mx:Parallel></mx:Transition>

</mx:transitions>

<!– First name –>

<mx:Text id=”first_txt”

text=”{ contact.firstName }” fontWeight=”bold”

fontSize=”14” x=”66” y=”10”/>

<!– Last name –>

<mx:Text id=”last_txt”

text=”{ contact.lastName }” fontWeight=”bold”

fontSize=”14” x=”{ first_txt.x + first_txt.width + 3 }”

y=”10”/>

<!– Label = email –>

<mx:Label text=”email”

color=”#666666” fontSize=”12” x=”23” y=”50”/>

<!– Label = mobile –>

<mx:Label text=”mobile”

color=”#666666” fontSize=”12”

x=”15” y=”90”/>

<!– Label = home –>

<mx:Label text=”home”

color=”#666666” fontSize=”12”

x=”21” y=”130”/>

<!– Label = address –>

09 Populating contact details

Still in ContactDetails, enter the below code. Data will be parsed into this component as a custom contact value object, with each visual component referencing the object for data to display. To save the contact-edited information, the entered text in each TextInput component is assigned to its corresponding variable in the value object.

<mx:Script>

<![CDATA[

import vo.ContactVO;

[Bindable] public var contact:ContactVO;

[Bindable] public var edit:Boolean = false;

public var add:Boolean;

public function newContact():void{

contact = new ContactVO();

}

public function saveContact():ContactVO

{

contact.firstName = first_in.text;

contact.lastName = last_in.text;

contact.email = email_in.text;

contact.mobileTel = mobile_in.text;

contact.homeTel = home_in.text;

contact.address = address_txt.text;

return contact;

}

public function clear():void

{

newContact();

edit = false;

}]]></mx:Script>

<mx:Label text=”address”

color=”#666666” fontSize=”12”

x=”5” y=”170”/>

<!– Email –>

<mx:Text id=”email_txt”

text=”{ contact.email }” color=”#000000”

fontSize=”11” x=”66” y=”50”/>

<!– Mobile –>

<mx:Text id=”mobile_txt”

text=”{ contact.mobileTel }”

color=”#000000” fontSize=”11” x=”69” y=”91”/>

<!– Home –>

<mx:Text id=”home_txt”

text=”{ contact.homeTel }” color=”#000000”

fontSize=”11” x=”69” y=”131”/>

<!– Address –>

<mx:TextArea id=”address_txt”

text=”{ contact.address }”

color=”#000000” fontSize=”11” right=”40” left=”69”

height=”90” borderThickness=”{ ( edit ) ? 1 : 0 }”

wordWrap=”true” editable=”{ edit }” y=”171”/>

</mx:Canvas>

10 Add components to wrapper

Return to ContactWrapper and add the code below. Here we use the HDividedBox component to display our list and details custom components. This enables us to mimic Address Book and adjust the width of each component accordingly. A ControlBar is added to hold the buttons controlling the application’s add/edit and delete functionality.

<!– Contact components container –>

<mx:HDividedBox id=”contactContainer” x=”0” y=”0”

width=”100%” height=”100%”>

<view:ContactList id=”c_list” width=”30%” height=”100%” select=”displa

yContact()” />

<view:ContactDetails id=”c_details” width=”70%” height=”100%” />

</mx:HDividedBox>

<mx:ControlBar id=”c_controls” width=”100%” height=”37” y=”229”>

<mx:Button id=”addButton” height=”16” label=”add” click=”onClick(

ADD )” x=”0”/>

<mx:Button id=”deleteButton” height=”16” label=”delete”

click=”onClick( DELETE )”/>

<mx:Spacer width=”{ c_details.width + c_list.width - (

deleteButton.x + deleteButton.width + editButton.width + 20 ) }”/>

<mx:Button id=”editButton” height=”16” label=”{ (c_details.edit ) ?

‘save’ : ‘edit’ }”

enabled=”{ c_details.edit || c_list.contact_dg.selectedIndex != -1

}” click=”onClick( EDIT )”/></mx:ControlBar>

11 Handle window closure

TitleWindow has a close button available if showCloseButton is set as true. Enter the code below into the TitleWindow tag and within the mx:Script tags type: private static const CLOSE_WIN:String = ‘closeWin’. This will dispatch a named constant on clicking the close button. We will pick up this event in the ContactManager.

<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”

xmlns:view=”components.*”

layout=”absolute”

title=”AIR Contact Manager”

showCloseButton=”true”

close=”{ dispatchEvent( new Event ( CLOSE_WIN ) ); }”>

12 Listen for close event

To listen out for the ContactWrapper dispatching our closeWin event modify the ContactWrapper tag as below and enter the closeWindow method within mx:Script tags. When the closeWin event is dispatched, the closeWindow method is fired calling the close() method in the NativeWindow class, and in turn closes the application window.

<view:ContactWrapper id=”contactWrapper”

width=”100%” height=”100%” x=”0” y=”0”

closeWin=”closeWindow( event )” />

private function closeWindow( e:Event ):void{

stage.nativeWindow.close();}

13 Transparent backgrounds

Now we have the basic visual framework in place, let’s build our back-end. In the SQLite

folder, create an ActionScript class to extend EventDispatcher named ‘SQLConnector’.

This class will handle asynchronous connections to our SQLite database and dispatch

SQLConnectionEvents for the application to progress and start querying the database.

Enter the code as listed below:

package sqlite{

import flash.data.SQLConnection;

import flash.events.*;

import flash.filesystem.File;

public class SQLConnector extends EventDispatcher{

public static const OPEN:String = ‘open’;

public static const CLOSE:String = ‘close’;

public static const ERROR:String = ‘error’;

private var _connection:SQLConnection;

private var _dbFileName:String;

private var _dbFile:File;

public function SQLConnector( name:String ){

_dbFileName = name;

_dbFile = File.applicationDirectory.resolvePath( _dbFileName );}

public function connect():void{

_connection = new SQLConnection();

_connection.addEventListener( SQLEvent.OPEN, onOpen );

_connection.addEventListener( SQLEvent.CLOSE, onClose );

_connection.addEventListener( SQLErrorEvent.ERROR, onError );

_connection.openAsync( _dbFile );}

public function disconnect():void{

_connection.close();}

public function get connection():SQLConnection{

return _connection;}

private function onOpen( e:SQLEvent ):void{

dispatchEvent( new Event( OPEN ) );}

private function onClose( e:SQLEvent ):void{

dispatchEvent( new Event( CLOSE ) );}

private function onError( e:SQLErrorEvent ):void{

dispatchEvent( new Event( ERROR ) );

}}}

14 Set up connection

Return to the ContactManager and within the initApp() method, create a new instance of the SQLConnector ensuring that the class is imported. Parse in the constructor the named constant that has the database name as a ‘String’ and call the Connect method. Assign listeners for all class-dispatched events: OPEN, CLOSE and ERROR.

import sqlite.SQLConnector;

private static const DATABASE:String = “contacts”;

private function initApp():void

{

sqliteConnector = new SQLConnector( DATABASE );

sqliteConnector.connect();

sqliteConnector.addEventListener( SQLConnector.OPEN, onOpen );

sqliteConnector.addEventListener( SQLConnector.CLOSE, onClose );

sqliteConnector.addEventListener( SQLConnector.ERROR, onError );}

private function onOpen( e:Event ):void

{

}

private function onClose( e:Event ):void{

trace(“disconnection”);

}

private function onError( e:Event ):void{

trace(“connection error”);

}

15 Start querying

In the SQLite folder, create an ActionScript class to extend EventDispatcher named ‘SQLQueries’. This class will handle all the database queries and dispatch results for each query made. This class needs a reference to the SQLConnection, adds, edits and deletes, and has a method to build the table ‘records’ in the database.

package sqlite

{

import events.AllContactsEvent;

import flash.data.*;

import flash.errors.SQLError;

import flash.events.*;

import mx.collections.ArrayCollection;

import vo.ContactVO;

public class SQLQueries extends EventDispatcher{

public static const CONTACTS_ARR:String = ‘contactsArr’;

private static const EDIT:String = ‘edit’;

private static const DELETE:String = ‘delete’;

private var _connection:SQLConnection;

private var _statement:SQLStatement;

private var _data:ArrayCollection;

public function SQLQueries( conn:SQLConnection ){

_connection = conn;

buildTable();}

private function buildTable():void{

var _sql:String = “CREATE TABLE IF NOT EXISTS records ( contactID

INTEGER PRIMARY KEY AUTOINCREMENT, “ +

“firstName TEXT DEFAULT ‘’, “ +

“lastName TEXT DEFAULT ‘’, “ +

“email TEXT DEFAULT ‘’, “ +

“mobileTel TEXT DEFAULT ‘’, “ +

“homeTel TEXT DEFAULT ‘’, “ +

“address TEXT DEFAULT ‘’)”;

execute( _sql, buildTableResult );}

public function getContacts():void{

var _sql:String = “SELECT * FROM records”;

execute( _sql, getContactsResult );

}

private function execute( sql:String, _handler:

Function, params:ContactVO=null, action:String=”” ):void{

try

{

var handler:Function = _handler;

_statement = new SQLStatement();

_statement.sqlConnection = _connection;

_statement.text = sql;

if( params )

{

_statement.clearParameters();

if( action != “” ){

_statement.parameters[“:contactID”] = params.contactID;}

if( action != DELETE ){

_statement.parameters[“:firstName”] = params.firstName;

_statement.parameters[“:lastName”] = params.lastName;

_statement.parameters[“:email”] = params.email;

_statement.parameters[“:mobileTel”] = params.mobileTel;

_statement.parameters[“:homeTel”] = params.homeTel;

_statement.parameters[“:address”] = params.address;}}

_statement.addEventListener( SQLEvent.RESULT, handler );

_statement.execute();

}

catch ( e:SQLError )

{

trace(“Error with SQLStatement execution”);

}}

private function buildTableResult( e:SQLEvent ):void{

getContacts();}

private function getContactsResult( e:SQLEvent ):void{

var contacts:ArrayCollection = new ArrayCollection();

for each ( var c:Object in _statement.getResult().data ){

var contact:ContactVO = new ContactVO();

contact.contactID = c.contactID;

contact.firstName = c.firstName;

contact.lastName = c.lastName;

contact.email = c.email;

contact.mobileTel = c.mobileTel;

contact.homeTel = c.homeTel;

contact.address = c.address;

contacts.addItem( contact );}

var event:AllContactsEvent = new AllContactsEvent( contacts,

CONTACTS_ARR, true );

dispatchEvent( event );}}}

The code marathon continues in Part 2 - coming soon

Make Flash search engine friendly

2010-04-21T09:58:00.000-07:00

CREATIVE AGENCY VIVID IMAGE EXCLUSIVELY REVEALS SOME OF THE WORK THEY’VE BEEN DOING TO MAKE FLASH CONTENT SEARCH FRIENDLY.

USING JOOMLA AND Flash, Vivid Image has been able to create SEO-friendly Flash websites. Here we’ll explain the technique for dynamically generating Joomla feeds to provide Flash with the content. Vivid Image is working on extending this and implementing direct database connections. Due to the current limitations in Flash 9,0124 (providing socket policy request files on TCP port 843), this is not covered here, but we’ll be working on workarounds for future coverage.

01 Extract the content

management system (Joomla) Unzip the Joomla 1.5.7 package from the CD to your computer. Please check Joomla’s Download page (www.joomla.org/download.html) for the latest

version. Upload all files to your FTP site or copy into your local htdocs folder. The copy of Joomla on the CD is zipped with all the ActionScript classes and folders: SWFAddress JavaScript , SWFObject JavaScript and the Joomla Flash template.

02 Create a MySQL database and install Joomla to your computer

Create a MySQL database. If you are unsure how to do this, contact your hosting provider who can create this for you. Once this is created, navigate to where you extracted Joomla to. This will guide you through the Joomla installation. While installing, please take note of the table prefix and MySQL database details. You will need this to configure the Flash ASQL. By default, the Joomla database table prefix is ‘jos_’.

03 Configure Joomla

Once the installation is complete, you need to remove the ‘installation’ directory. You will not be able to proceed without this. If you have not installed the Joomla CMS from the included tutorial, you will need to copy the ‘asClasses’, ‘caurina’, ‘swfaddress’, ‘swfobject’ folders, ‘main.as’, ‘readXML.as’, ‘SWFAddress.as’, ‘SWFAddressEvent.as’ and ‘index.fla’ files into the root and ‘flashtemplate’ folder into the front-end templates directory of where you installed Joomla.

04 Configure templates

If you did not install Joomla from the CD, you will need to set the default template to Flash SEO Template. To do this, when logged into Joomla go to Extensions from the top menu and click on Template Manager. In the Template Manager, select Flash SEO Template by clicking the radio button next to its name and click Default. Otherwise, everything else is installed and configured in the CMS. If you click on the Preview button in the right-hand corner of the CMS next to Logout, this will show you the front end of the website. As you have not yet exported ‘index.swf’ from index. fla, you will have a blank white output.

05 Create sections and categories

You need to have at least one section and category in Joomla to make the Flash work. To create a category, go to Content and then click Section Manager. Click on New in the top right-hand corner. Complete the form; we named our section ‘Flash Content’ but you can name it differently. Fill in an alias and click Save. Next, from the top menu, hover over

Content and select Category Manager. Click New in the top right and complete the title and Alias. We used ‘Content’ and ‘content’, but again these can be named differently.

06 Create the default content

Go to Content and click Article Manager. Click New in the top right corner. Here, you need to complete Title (the title of the HTML page and the title in Flash), Alias (explained in

Step eight; for the default pages, the aliases need to be ‘home’, ‘aboutus’ and ‘contactus’), Section and Category (select from the drop-downs). Then complete your page text in the

WYSIWYG, and click Save. On the overview page, Article Manager, you can select your homepage content by clicking on the red cross icon of the corresponding article.

07 Set up a Joomla menu

Next, we need to create the Joomla menu. To do this, go to the Menus drop-down on the top menu then click on Main Menu. You will see that Home is already created. Now we

need to create items for the other two default content pages, About Us and Contact Us. To do this, click New, select Articles and then Article Layout under the Article heading.

Complete the name of the hyperlink in Title, and add the same alias into the Alias box as you typed in the Article Manager. Using Select Article on the right-hand side, select the

corresponding article. The menu should automatically position into the template.

08 The missing link

The Joomla article alias is used to link the SWFAddress and the Joomla database. If you go into main.as between lines 117 to 142, this is where the SWFAddress is set. The value within

the function setValue should be the alias for the corresponding article. The method of adding additional pages to Joomla and Flash will be described on page 56, in Step 11 and Step 14 respectively.

09 Enable SEO -friendly UR Ls in Joomla

Next up, from the main menu, go to Site then click Global Configuration. Under the SEO Settings on the right-hand side, check the radio box for Search Engine Friendly URLs as well as Use Apache mod_rewrite, and then click Save in the top right-hand corner. Once this has been done, navigate to the root of your Joomla installation and check that .htaccess exists. If it does not, open ‘htaccess.txt’ with your preferred text editor and save

it as ‘.htaccess’.

10 Test the SWF for the first time

Open the index.fla in the root of your Joomla installation. You now need to export the SWF. In CS3, go to File>Publish, or the shortcut Ctrl+Enter (PC) or Cmd+Return (Mac). Now

navigate to your Joomla installation.

11 Understanding the index.php template

The index.php template in Templates>Flash Template is where the front end of the CMS is created. The loadSWF() function dynamically inserts the SWF into the template in an element with the ID of ‘flashContent’. Two variables are also parsed into the Flash here: ‘baseURL’, the root of the Joomla installation; and ‘joomlaCategoryID’ (which category Joomla should automatically generate the XML document from). The If statement is processing which page should be loaded initially. Also in the template, you will see <jdoc: include type=”modules” name=”left” />. This is where Joomla will insert any modules with the position left (in this case, the menu and <jdoc:include type=”component” />. This is where the article content or any page content will be placed.

12 The .htaccess file

The .htaccess files work on Linuxbased servers and MAMPP (Macs) XAMPP (Windows) servers. Because the pages that we create in Joomla do not exist, the .htaccess is used to process the error and redirect it to the Joomla page instead of showing an error. More uses of the .htaccess file are explained at www.javascriptkit.com/howto/htaccess.shtml.

13 Adding additional buttons

Buttons are adding to the Flash file dynamically using a button class. To add additional buttons to the stage, open the index.fla and open the Library tab (Window>Library from the top menu). Drag ‘stdBtn’ onto the stage where you wish it to be placed. Click on the instance you placed on the stage and open the Properties tab (Window>Properties from the top menu). In the instance name field, name your button and take a note of this as you will need to use this in main.as.

14 Initialising buttons in ActionScript

Open main.as and go to lines 69 to 77. This is where the buttons are initialised. To initialise the button, write ‘instance_name’ in it (‘Button Text’). Then add the function ‘addButtons’

(btnSet.addButtons([btn_home,btn_about,btn_contact]);) and your new instance name like this: btnSet.addButtons([btn_home,btn_about,btn_contact, instance_name]);. You

need to add an Event Listener to do this, so add the following line of code: instance_name. addEventListener(MouseEvent.CLICK, handleClick);.

15 Linking button to the content

Now we need to update the handleClick function by adding another case in the switch statement (around line 119). The new case needs to be written before the default case. An example of a new case statement is written like this:

case “(Button Text)”:

SWFAddress.setValue(“(Joomla Alias)”);

break;

16 The SWFHandler function

This Event Listener is called each time SWFAddress.setValue is called. Once the event is triggered, our custom function switchContentToDisplay is called. This function loops through the array of Joomla content, and once it finds an alias match based on the setValue() Joomla alias, it will display that content.

Brief History of Western Typography

2010-04-21T09:57:00.000-07:00

Guest Post by Fonts2U

Being a specific form of art, typography has always been coherent with the general progress of art and cultural growth of humanity. This is why the history of western typography reflects the development of art in Europe to a considerable degree. The epoch of Roman Empire, Renaissance, Baroque, and the art of Industrialization period – we can track the traces of each stage of art development in the design of particular typefaces, born during a respective period of time. In fact, the whole history of western typography has always been about the development of new trends, and the revival of ancient techniques of writing and lettering designs.

HTML Tutorial 1 - Designing A Website In Notepad - Basics and Beginnings

2010-04-15T10:21:00.000-07:00

In this HTML website design tutorial I will teach you how to write and format your very first web page using HTML.

Web Design basics for Website Designers

2010-04-15T10:16:00.000-07:00

A 9 step tutorial on website design. How to register your website domain name, website hosting, website design and layout, number of web pages on a website, relevant website content, publishing to the web and internet marketing for websites.

Web Design Mistakes

2010-04-15T10:13:00.000-07:00

http://e-consultancy.com/publications/
Dr Dave Chaffey, author of E-consultancy's Best Practice Guides, offers useful web design tips and discusses some common pitfalls to avoid.

Beautiful Photoshop Illustrations By Artists Around The World

2010-04-15T08:05:00.000-07:00

Photoshop is a magical tool for digital artists and photographers, and it rules the digital imaging world. It is not just a tool, though; Photoshop is a blank canvas that invites you to perform magic with your creativity. It gives you room to creatively manipulate photos and explore the artist in yourself.

To celebrate the upcoming holidays, in today’s post we decided to step away from technical design/coding-related topics and showcase some beautiful digital illustrations and their creators. Hopefully, the artwork will inspire you and stir your imagination.

As you know, so many more brilliant illustrations have been done by digital artists doing great work, but we cannot cover them all in a single post, so we will try to showcase them in our future posts (if you want to). If we forgot to mention the work of your favorite artist, please do share it with the other readers and let us know their name.

Shadow Chen

Born in China, Shadow Chen did post-graduate work in product design. Upon graduating, he worked as a graphic designer in fashion and freelanced as an illustrator and graphic designer, doing packaging, branding, poster design, website design, fashion and more. He is working on his own brand and paints quite a lot in his spare time.

His work has been featured in websites, blogs, e-magazines and galleries in Europe.

Igor Scekic

Igor Scekic is 23-year-old graphic designer and digital artist who lives in Zagreb, Croatia. He is interested in digital art, graphic design, photography and other traditional art techniques. Art is his medium of choice for expressing his thoughts and feelings.

Tiago Hoisel

Tiago Hoisel is a young and talented artist from Brazil. He has his own brand of Photoshop manipulation and has created s lot of great artwork so far.

Tiago Hoisel from Brazil

Pavarotti

Bee

Axl

David Fuhrer

Self-taught artist David Fuhrer was born in 1985 in the capital of Switzerland, Bern. Focusing on illustration and specifically on intricate detailing, David has produced some of the most inspiring and exciting work in the digital art community.

Fuhrer’s work is a treat for the eyes and mind. The depth of his work is as mesmerizing as the emotions his pieces elicit.

Drugg Free Zone

Air

Apace

Joshua M. Smith

“Hydro74″ is the Orlando-based designer otherwise known as Joshua M. Smith. “The sole purpose of my career,” he says, “is to push the boundaries in doing what I feel is relevant to the market as well as extract various elements and trends to be able to offer them up in my own personal work. But let’s be honest. I do what I love because I love it. Not because I have to do it, nor am forced to do it, but rather passionate about doing what I do. I firmly believe in having set style tones, yet a sense of diversity to make any various project unique to the demands that are set forth.”

Lucas Films / Indiana Jones

Black in Black

Myspace Secret Shows

Bobby Chiu

Bobby currently lives and works in Toronto, Canada. Bobby Chiu’s art career started at the age of two, with a box of crayons and his family’s white living room walls. He got his first professional art job at 17, designing for Disney, Warner Bros and Star Wars toys at Thinkway Toys in Toronto. Bobby has since won a number of awards for his independent work. He presently works as an illustrator for film and television, teaches digital painting online at Schoolism.com, publishes art books and works on some top-secret projects.

Sea Life

Twins – Totoro Forest Project

3 Samurai On Horseback

Sea Dragon

Jeff Huang

Jeff Huang is a graphic artist and illustrator residing in New York City. He specializes in digital illustration and photo manipulation and has knowledge of 3-D modeling and animation as well as motion graphics and compositing. Jeff has been freelancing professionally for almost five years now and has been featured in many publications such as Adobe’s Design Center, Digital Arts Magazine, Computer Arts Magazine and Advanced Photoshop Magazine. He is currently represented by Debut Art.

Fun in Park

Memoir

Erik Jonsson

Erik Jonsson, of Brooklyn, New York, freelances and studies digital media. He has a lot of mind-blowing artwork to his credit.

Hamlett

Festival Mantarraya

Data Airline

Maciej Hajnrich

Maciej was born in 1981 and works in Katowice, Poland. Self-taught, he is an established full-time freelance artist with five years of experience in print and Web design. In the last two years, his work has been commissioned by Back Row Productions, Platige Image, Weinsten Company, Warner Music Poland and Armada Skis, to name a few. He has designed illustrations for the musical “Pricilla, Queen of the Desert,” and he was a judge for iStockphoto’s Battle Royale, Widely published, Maciej is a member of the Keystone Design Union and Depthcore digital arts community.

Tri’angel

Winter Espionage

PURE eNERGY

QUESTLOVE from The Roots

James White

James White is a digital artist and graphic designer living in Halifax, Nova Scotia, Canada. With 10 years of experience, James has worked on an array of personal art projects and clients, including Toyota, VH1, Armada Skis, Red Bulletin and Wired Magazine. He has been featured in Computer Arts, Computer Arts Projects and Advanced Photoshop magazines.

Curvature

Boing Boing Gadgets

Jericó Santander

Jericó Santander was born in 1985 in the Canary Islands, Spain. His passion for art began as a child. He graduated with a BA in art and moved to Madrid. During his two years in Madrid, he studied at an illustration academy, while working as a full-time graphic designer at a small creative agency.

The idea of mixing digital painting, photography and 3-D in one work excites him and helps him to develop his ideas. Jericó recently moved back to the Canary Islands, working as a freelance illustrator, but always finding time for his personal art.

Own World

Nereid

We all Fall

Marco Escobedo

Ever since he was very small, Marco Escobedo, who hails from Lima, Peru, has been interested in anything to do with drawing and painting. More than a hobby, drawing became a passion for him, as he observed the work of other artists and realized that illustrations should be his career. His study of it in several workshops helped him penetrate the depths of the field.

Women

Color explosión

Mistico

One hundred years of solitude

Centauro

Suliman Almawash

Based in Kuwait, Suliman Almawash is a dynamic digital artist and master of surreal and conceptual art. He has created a lot of amazingly creative digital artwork.

The weakness of silence

Linking Meditation

AROUND THE WORLD

Kerem Beyit

Kerem was born in Ankara, Turkey, and started drawing from early childhood through the influence of comic books. At Gazi University, he studied graphic design for four years. He subsequently worked in various places doing graphic and illustration studies, book covers, local comics, as well as magazines and books for children. He has been working in the digital space for four years now and has honored with awards from CGSociety, CgChannel, Gfxartist, Cggallery, 3DTotal and CGArena. His work has been published in several magazines and selected for inclusion in Ballistic Publishing albums, Expose and Exotique.

Battle Dragon by Kerem Beyit

The Dragons of Ordinary Farm Cover

LEGENDS OF NORRATH (SONY ONLINE ENT.)

Kode Logic

Kode Logic is a graphic designer from Melbourne, Australia. He first started drawing when he was six years old and still hasn’t let the pen out of his hand. He transferred to the digital platform and has been working on it for the past four years. He is continually learning new skills and different styles along the way. He has been striving to create his own style, and his thirst for knowledge is never quenched.

Let Her Go

Closed its Doors

First Wave

Justin Maller

Justin Maller is a freelance illustrator and art director based in Melbourne, Australia. He has been creating digital art for over eight years and has worked professionally in a studio and privately for the last three. He is represented by Jeremy Wortsman of the Jacky Winter Group.

Hair Culture

X&HELL

FAST & FURIOUS

THE ELDER PRIESTESS – WITH HOLLY BYNOE

Archan Nair

Archann.net is the creative showcase of 26-year-old self-taught artist, multi-disciplinary designer and illustrator Archan Nair. Based out of New Delhi, India, Archan is co-founder and creative head of the design and art agency Cropped Circles.

Specializing in art direction, illustration and digital art, he has produced quality illustrations and design projects for many brands, including Pepsi, Tiger Beer and GQ. He has been featured in publications such as Advanced Photoshop, Flair, Vanity Fair and Juxtapoz and has been featured by music artists such as Kanye West.

Gaia

Sweet Sensations

Illusory

Jason Engle

Jason has been creating art for the publishing and entertainment markets for the past 10 years. His work has been featured on some of the most prominent websites devoted to science fiction and fantasy art, and he has been included in several notable books of collected art, including both the Spectrum and Expose series, as well as his own book, titled “Infernum: The Art of Jason Engle,” which showcases the first five years of his career. He has had hundreds of clients over the years, including Sony Online Entertainment, World of Warcraft, Dungeons and Dragons and Vampire: The Masquerade.

Maciej Mizer

Maciej Mizer is a graphic designer based in Lodz, Poland, and specializing in illustration, 3-D graphics, Web design and photography. His work has been featured in loads of major publications, including HIRO Magazine, Computer Arts Magazine, Web Design Index 8.

Can You Dig It

VII / XIII

Whisper

Rado Javor

Rado Javor is a digital painter from Slovakia. He has his own style of digital art and has done a lot of great work so far.

La Rochelle

Ambush

David Waters

David is a freelance illustrator based out of Moscow, Idaho, USA. He is currently in his senior year at the University of Idaho studying graphic design. You have probably seen the work of this very creative artist a number of times without knowing it. David loves swimming and finding new movies and music to occupy his time.

Photomanipulation

U.N.I.T.Y

Mario Wibisono

This dark-luminous guy offers some of the brightest eye candy around. He focuses on drawing girls and women, “a most wonderful subject that everyone (but mostly boys) loves to discuss (and fantasize about).” Whether it’s a hyper-realistic portrait or a fantasy-realism style, he is sure to dedicate all his expertise to producing the finest work.

Shiba Tsukimi

Hida Eijiko

Purgatory

Andreas Fernhede Dagman

The Super Awesome is the online portfolio of 25-year-old aspiring graphic designer and illustrator Andreas Fernhede Dagman. A student in his second year of digital media studies at Hyper Island in Karlskrona, Sweden, he recently completed a seven-month internship as an interactive designer at Sid Lee in Montreal, Canada.

Omega Coded

Cynthia Sheppardt

Cynthia is 25-year-old digital illustrator with a extensive background in traditional art media and a passion for the fantastic. She hails from Fairfax, USA.

Half Her Heart’s Duet

Cruciata Navaar

Wonderland Deconstructed

Queen of Thorns 2

Alex Ruiz

The visions of Alex Ruiz range from dark and disturbing to vomit-inducing cuteness and hilarity. In his paintings, the creatures of his mind crawl off the page and transplant themselves into the unsuspecting viewer’s brain, even taking up residence there. Alex is a freelance concept artist and illustrator living in Los Angeles, California. He lends his talents to the film, television and interactive games industries.

Elephas Maximus

Industrial Beach

Mech-Dragon Battle

Sakke Soini

Right now, Sakke freelances and balances his time between Web design, illustration, event management and promotion, DJ’ing and VJ’ing. He has worked with international acts such as Fred Falke, Busy P, The Toxic Avenger, Kris Menace and Anoraak (all from France); The Big Pink (UK), The Proxy (Russia), Handsome Furs (Canada) and Moulinex (Poland).

EVOLUTION, Los Angeles

Music with Colors

Pete Harrison

Ever since he was young, Pete was creative and wanted to pursue this creativity in life, By the age of 10, he knew he wanted to be a graphic designer and so tailored his education around this goal. At school and in his A-levels, he studied art and design. He went on to university and studied MediaLab Arts. These four years of his life can be best described as a metaphor.

Aaron Sikstrom

Aaron Sikstrom is a traditional artist whose work is quite modern. Influenced by pop art and surrealism, he has developed a style that blends fantasy and pop surrealism. Each image tells a story and shows his dedication to the craft.

Aaron’s work have been exhibited in publications such as “Ballistic Digital Painting 2″ and galleries such as Compound Gallery (USA). He is confident that his art will continue to attract new fans and bring him closer to a professional career in the arts.

Goro Fujita

Goro was born in Japan and moved with his family to Germany when he was two years old. He have been fascinated by drawing ever since he was a child.

He graduated from German Film School in 2005 and then specialized on 3-D character animation. Since then, he has worked as a freelance character animator and visual development artist on feature films and TV commercials in Germany. He currently works as a visual development artist at PDI/DreamWorks in Redwood City, California.

The Hunt

Hidden Nature

Juji & Ophelia

Print Magazines for Web Designers, Digital Artists, and Photographers

2010-04-15T07:59:00.000-07:00

Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and high-quality print publications.

Print magazines, more often than not, are well-researched and are headed by top-notch editorial staff, usually containing information and resources on the cutting edge of their respective industries’ trends and happenings.

To that end, to help you fulfill part of your offline research needs, I’ve compiled a list of print magazines that are of interest to professionals in three different categories: Web Designers, Digital Artists, and Photographers. And be sure to comment so you can tell us your personal favourite print magazine, if you don’t see it listed here.

You may be interested in the following related posts:

By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.

Magazines for Web Designers

.net Magazine / Practical Web Design

.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today. If you’re serious about web design, then .net is the magazine for you. This is easily the best and most important magazine for web professionals, and it should be noted that .net is sold as Practical Web Design overseas.

Visit the .Net Magazine / Practical Web Design official website

Web Designer

Web Designer will help you design and develop stunning websites, providing exclusive interviews, professional advice, behind-the-scenes features with top developers and agencies, site showcases, plus how-to articles and tips for a variety of design and development software.

Visit the Web Designer Magazine official website

Magazines for Digital Artists

Computer Arts

The world’s best-selling creative magazine will inspire you, bring you the inside track on the creative industry, and reveal cutting edge skills and techniques. Every issue showcases the best illustrators, graphic designers and web designers from around the world. The tutorials section is the envy of the industry, giving you the skills and inspiration you need to be a better artist.

Visit the Computer Arts official website

Photoshop User

Photoshop User is more than just an amazing Photoshop resource, it’s also the official publication of the National Association of Photoshop Professionals (NAAPP). Each issue includes behind-the-scenes features, how-to articles, help desk Q&A, step-by-step tutorials, and down & dirty tricks. Photoshop User is widely recognized as the most trusted resource for Adobe Photoshop and Lightroom training, advice, and how-to information for the graphic design, photography, and digital arts worlds.

Visit the Photoshop User official website

Photoshop Creative

Photoshop Creative provides Photoshop users with lashings of practical advice and inspiration. Whether you’re brand new to the program or simply looking to improve your existing skills, this is the magazine for you. We don’t like to leave anyone out, so we want to make sure there’s something for everyone – from the Adobe Photoshop Elements user right through to those lucky enough to own Photoshop CS3.

Visit the Photoshop Creative official website

Digital Artist

Digital Artist is the perfect magazine for anyone who uses their computer as a canvas. It is the only community-focused magazine to cover all art styles and all art software, making each issue a medley of breathtaking images to inspire you to create your own. The magazine includes tutorials and guides, an extensive Q&A section, reports on new artists and their current projects, plus interviews, features, and galleries.

Visit the Digital Artist official website

Corel Painter

The official Corel Magazine, offering professional tips and techniques, digital art concepts and theory, special effects, and more.

Visit the Corel Painter official website

3D Artist

3D Artist is dedicated to bringing you interviews with leading lights in the 3D industry, fascinating features on development and technologies that are shaping what you see on TV and in film, in advertising and architecture and in good old art. The magazine showcases the best and most exciting 3D images every month with a monster 11-page gallery.

Visit the 3D Artist official website

3D World

3D World is a high-quality magazine crammed full of news, inspiration and practical advice about 3D graphics. Includes news and analysis of all the latest trends in the 3D industry, in-depth reports on the hottest new 3D projects, detailed, step-by-step technical walkthroughs, artistic and creative advice from professionals at leading international studios, and impartial reviews of the latest creative hardware and software.

Visit the 3D World official website

Layers

Layers is the only magazine that covers everything Adobe Creative Suite 4 has to offer. Each issue is filled with top-notch tips and techniques for Adobe Illustrator, InDesign, Photoshop, Flash, Acrobat, Lightroom, After Effects, Dreamweaver, and more.

Visit the Layers official website

Magazines for Photographers

Practical Photography

Practical Photography delivers a diverse range of content that teaches photo enthusiasts to take better photos and how to creatively enhance them in Photoshop.

Visit the Practical Photography official website

Photo Technique

Photo Technique philosophy is that the photographic medium has never existed on the basis of unrelated techniques or unskilled aesthetics. For that reason, they incorporate the technology and methodology used in creating photographs into two categories. The first is a series of portfolio/article combinations that demonstrate both the means and the end result. The second is expanded technical articles intended to completely follow a process in detail, rather than offer short snip-its or tips. The magazine will never address the interest of a point-and-shoot mentality; the intent is to elevate the magazine to a more professional level.

Visit the Photo Technique official website

Photo Pro

If you’re a working photographer or have dreams of setting up your own photographic business, this is the magazine for you. Every issue of Photo Pro is packed with inspirational images, expert advice and reviews of the kit that you need to get ahead. There’s also must-read business guidance from successful working photographers. It’s the ultimate manual for modern pros.

Visit the Photo Pro official website

Popular Photography

Popular Photography is the world’s largest photography magazine and the leading technical authority, buyers guide and how-to resource for the photo enthusiast. Geared toward those who are passionate about photography, each monthly issue presents unmatched technical expertise and a wide range of articles on the technique, craft and equipment used in making outstanding images.

Photography Monthly

Photography Monthly is the UK’s most interactive photography magazine, featuring expert advice, product reviews, tips and techniques, and more.

Visit the Photography Monthly official website

Digital Photo

Online and on newsstands, Digital Photo (formerly PC Photo) is the top digital photography magazine. Get the latest news, equipment reviews and previews, photography tips and more.

Visit the Digital Photo official website

Photo Life

For over 30 years, Canadian photography amateurs and professionals have turned to Photo Life as a partner in furthering their photographic skills. The magazine covers all aspects of photography, including industry news, photographic techniques and tips, field tests, travel, digital, secrets of the trade, and much more. Photo Life has something for everyone, plus it’s supplemented with images from some of the country’s best photographers, including those of our readers.

Visit the Photo Life official website

Photo District News (PDN)

Photo District News (PDN), the award-winning monthly magazine for the professional photographer, has been covering the professional photographic industry for over two decades. Every month, PDN delivers unbiased news and analysis, interviews, and portfolios of the latest photographic work. PDN delivers the information photographers need to survive in a competitive business – from marketing and business advice to legal issues, photographic techniques, new technologies, and more.

Visit the PDN official website

Showcase Of Web Design In China: From Imitation To Innovation

2010-04-15T07:54:00.000-07:00

China is a country with five thousand years of civilization. It is a multi-national entity extending over a large area of East Asia. China’s cultural influence extends across the continent, with customs and writing systems adopted by neighboring countries including Japan, Korea and Vietnam.

China has gone through numerous ups and downs and twists and turns, from wealthy and prosperous (as during the Tang Dynasty back in 618–907 AD) to powerless and colonized (as during the Qing Dynasty, just around 100 years ago). Now China is reopening its door to the world again, embracing the latest trends, concepts and technologies, the World Wide Web being one of them.

In our interviews with six well-known designers in China, each of whom wears different hats, the recurring theme was that China’s Web design industry is rising like a spiral from imitation to innovation and user-centered design.

Chinese Web Design: Dongpai

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

State Of Affairs

The designers we interviewed had much to say about the direction of Web design in China, the status quo and trends. The individuals are spread out across four major cities in China, and they are:

Yu Guo
Former chief designer at Baidu, China’s largest search engine.
Current city: Beijing.
Whitecrow Zhu
Co-founder of UCDChina, and principal product experience designer at Alipay, a subsidiary of Alibaba.
Current city: Hangzhou.
Junchen Wu
Co-founder of UCDChina, and director of products at Tuniu Travel.
Current city: Nanjing.
Lytous Zhou
Visual designer, UI lead at CK Telecom and author of the book UI Evolutionism.
Current city: Shenzhen.
John Woo
Lead of the user-experience team at Google China.
Current city: Beijing.
Rex Song
Freelance information architect; co-founder of UCDChina.
Current city: Beijing.

The interviews were conducted via phone, Skype and Google Talk. Questions were sent to the designers before the interviews to give them context, but the actual interviews were semi-structured. Being interested in the scope of their thoughts, we asked them not to limit their answers to just “Web design.” The designers were told that Web design here refers not only to visuals, CSS and the front end, but also the back end, infrastructure, design rationale, cultural elements, user-experience design and research and so on. We wanted the designers to express their thoughts as openly and as creatively as they wanted to.

MFM Moliyo, a game website.

Question: How do you see the status quo of Web design in China?

Yu Guo: Almost 70% of Chinese Internet users are under 30 years of age. They are young, open, and they adapt to new things quickly. They like to play games online and enjoy looking for ways to entertain themselves online. So, you may see visually attractive elements on many Chinese websites, the purpose of which is to cater to this group of users.

Whitecrow Zhu: About two years ago, we witnessed a huge trend where designers in China were imitating Korean websites in their use of Flash. Flashy and colorful design was once the trend. However, with the introduction of Web 2.0, websites in China are improving. Users are exploring the content as opposed to exploring solely the visuals. Visuals alone do not satisfy Chinese users any more. They are looking for useful and helpful content, and they want to contribute to the websites as well.

Junchen Wu: It’s on an upward trend, getting better and better, but like a spiral. In terms of Web knowledge and techniques, Chinese designers are on par with designers in Western countries, but they have not reached the point of fully utilizing that body of knowledge. An excellent example of this is user research. Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.

Lytous Zhou: Well, two points. One, limited budgets are very common in China’s Web design market. As a result, Web design ends up with overwhelming visuals to attract attention. It might be flashy and pretty at first sight, but the information architecture might not be well planned, and usability can be poor. Regarding the second point, Chinese Web design tends to be very localized, as it should be.

Chinese web design: Midea Microwave Oven

For example, Alipay, a byproduct of Taobao, became a successful standalone product because it took into consideration the purchasing behavior and psychology of Chinese users. China is a big country, and some websites are successful because they cater to particular geographical locations. The other side of the coin is that Chinese Web design is not quite international yet. It’s such a huge market and can sustain itself without even reaching out to the international market. You will see that UCDChina.com and a lot of other Chinese websites don’t have English versions, even in their navigation.

John Woo: China has not formed one distinctive Web design style yet, because the country is big, and Chinese users are complicated in many ways. The impression of foreigners of Chinese Web design might be that it is busy and flashy, but I take it as practical. When Flash design was the fashion, many designers (or their bosses) wanted to use Flash to make their Web pages attractive. When SNS was booming in the US, it was soon introduced in China, together with the Facebook and Twitter design styles. When it’s practical and useful, many Chinese people will just borrow the concept and develop it further. Baidu, QQ and Taobao won business and respect this way.

Rex Song: China has a large population, and the saying “the more, the merrier” applies to its Web design. You will see some Web pages that are busy and cluttered, with designers or stakeholders trying to put everything on the page. The other thing is that, currently, the primary motivation to go online for the average web surfer in China is entertainment. So, Web designers in China tend to make their websites play-ish, SNS-ish and visually attractive, as we saw with the popular trend back in 2004 to imitate Korean Flash websites.

Shoebox

Chinese Web Design In A Nutshell

So, do you now have a rough idea of the status quo in Chinese Web design? Although our interviewees tended not to reduce Web design in China to certain patterns, we summarized a few bullet points based on the topics most frequently mentioned in our interviews.

1. Flash-Heaviness: Born of Imitation

Flash design has been a source of constant debates for years. The fact that optimizing Flash objects for search engines can be difficult is a major turn-off for some designers.

However, Flash was called out, and it’s the most frequently mentioned keyword in our interviews. Back in 2004, when Korean websites were all in Flash, Chinese designers and business owners considered Flash the “fashion.” Rex Song mentioned that when this trend was extremely popular a few years ago, you could even download ready-made Korean-style Flash ZIP files from online stores for little money, so that you could do it quick without spending a lot of effort.

Google is renowned for its focus on simplicity. But take a peek at the nuances that distinguish Google China and Google US:

The design of Google China is a bit more vivid than that of Google US, with a hint of animation added to the former to enhance the richness of Google search. By the way, this concept was first implemented on Google Korea and Japan, although both of them have since reverted to a more static interface.

Although Flash implementation began as imitation, it is now increasingly featured in the portfolios of design studios and freelancers, on websites to launch new products and for products geared to the younger generation.

Shanghai Vive is an old Shanghai cosmetics company that is trying to rebrand and attract high-end consumers. Its branding uses Flash heavily, depicting an elegant and high-class life.

Cool Bear Hi, one of the product lines of Great Wall Motor, has a Flash website to promote its new car release.

To accommodate low-speed Internet connections, Cool Bear Hi does a good job of showing the progress of the loading Flash.

The text below the car on Cool Bear Hi changes as more Flash loads. With the chipper text there to assuage visitors, the loading Flash doesn’t seem that boring to watch. Above are a few screenshots we took, and below is what it says at various points in the loading process:

At 4%: “Choose Cool Bear Hi. Share your happiness.”
At 22%: “Wear a smiling face every day, and say Hi to everybody.”
At 41%: “Cool Bear is impatient, ‘Why hasn’t anybody taken me home!’”
At 70%: “Book a test-drive appoint. Get your special gift and reward points.”

Mian Dian Fang, a ready-to-serve breakfast company, also uses heavily Flash on its corporate website. The animation gives the steam bread and “baozi” a human touch, having them do morning exercises and other activities. The metaphor persuades customers that the company serves a healthy breakfast.

Let’s look at how Mian Dian Fang shows its loading progress:

The loading animation parodies the yeast process: the flour gets bigger and bigger, until you can see a full-blown website.

Shoebox, a shoe brand for the younger generation in China, uses Flash across the whole website to show its grasp of fashion. In addition, the sketched art on the home page and old brown newspaper color for the background set up Shoebox’s philosophy: taste is an attitude of life; start with the simple; fashion is a kind of sport; start with Shoebox.

Lenovo Mobile O1 takes advantage of personalities and embeds their stories in Flash to present the features, functionality and usefulness of its new product, Lenovo O1.

Artlans, an interactive design studio, also uses Flash, especially for its menu buttons, the call to action and the language switcher. Design studios may not want to use Flash all over their portfolios, but rather in a few key places to show their skill at using Flash for clients.

Idea Design, a design studio that uses Flash in full swing.

2. Designing for Entertainment

We really liked our one-on-one interviews because not only did we hear different stories from different people, but we also heard certain other stories from everyone. For example, Whitecrow, Lytous, Yu, and Rex all talked about the “entertainmentalization” of Chinese Web design. “When a social networking website comes to China, it must become a game website,” said Whitecrow.

A case in point is a feature provided by Kaixin.com (Kaixin means “happy”), which recently spurred a social phenomenon in China: “Stealing vegetables.” Kaixin pretty much copied Facebook’s navigation and user interaction. But it’s different in what it allows you to do: set up your “Happy Farm,” build your house, grow your own vegetables and then steal your friends’ vegetables when they are ready to be harvested. Some dedicated players even made Excel spreadsheets to track their friends’ harvest season in order to expedite stealing. It’s like any other video game but embedded on a social networking website, allowing you to play with a wider variety of users. “Stealing vegetables” became so popular that it drew the attention of censors from China’s Ministry of Culture. Under pressure from the Ministry, the game is now called “Picking vegetables,” a less offensive euphemism for mainstream Chinese culture. Online players still prefer the more accurate name.

Happy Farm

Happy Ranch

Happy Orchard

The application was recently added to Facebook, but it is only for Chinese-speaking users at this time.

Lipton Milk Tea features a “Hug Relay” game that you can play right on the website. Hug your friends by validating your account on Renren, another social networking website in China, and gain hug points.

Once you accumulate enough hug points, you can shop on the online store and purchase gifts, an incentive to maintain momentum in the game:

Like Lipton, M&M China also uses an online “relay” game to engage visitors to its website.

I Love G3, a website from China Mobile to promote the 3G network and 3G cell phones, presents an animated Flash questionnaire for users to play around with.

After you have answered a series of questions such as, “How would you kill time on a train?” and “How would you cross the ocean?” the system analyzes your personality and recommends 3G cell phones to match you:

3. Designing for Clicks

Unlike Latin and Germanic languages, Chinese is rooted in hieroglyphic characters. Typing in Chinese on an alphabet-based keyboard can be slow, especially for middle-aged and older users. So, you will see that some website user interfaces are extremely busy: text and image links everywhere—”the more, the merrier,” as Rex Song points out. These websites are designed for clicking, as opposed to searching (although keyword search is an essential component of any information-rich website).

Yoho, an online shopping platform for the younger generation, takes advantage of every sliver of real estate on the page to promote its products. Yes, a search box is in the top-right for you to search, but with all of these images and hyperlinks, it’s more enticing to just click, click, click.

It’s the same with China Visual, a visual design resource portal. The home page presents all sections of the website as text and image links, giving you a quick peek of the content.

NetEase (aka 163.com), one of the largest news portals in China, takes full advantage of the Web reading pattern of Chinese users: i.e. clicking.

Above is a screenshot of NetEase’s home page. The Chinese lunar New Year was approaching when we were writing this article, and you can see that this website uses red, a color symbolic of festivals, for the background. The page is filled with headlines of news and featured articles as well as ad spots. You can perform a search at the top of the page, but by scanning the entire page, you get a sense of what’s happening today. And if you’re interested in any of the headlines, just click—that easy.

All that said, many websites are working to unclutter their UI, increase the font size and line spacing and enhance readability. “Sina.com, if you have been paying attention to its redesigns all the way back to the late 1990s, is doing better and better at information design,” said John Woo, lead of the Google China UX team.

4. Designing for Culture

When asked, “Can the world learn anything from Chinese web design?” Lytous Zhou answered without hesitation: “Culture. The Chinese respect Dao, and we have our own set of values and mores. Websites targeted to the Chinese market should follow the online habits and aesthetics of Chinese users. For example, cultural symbols, calligraphic elements and festivities: all of these could be integrated into a Web design if applicable. A lake may just be a lake, but associating a fairy tale with a lake makes it prettier.”

True, if you add a fairy tale and human touch to a lake, the user’s perception of it would change.

Pizza Hut China, which is an example I like to use every time I explain cultural differences, uses Chinese elements heavily all over its website: in the color scheme and family theme. Warm reds and yellows are colors symbolic of festivity in China, and the family dinner is highly regarded in Chinese society.

By comparison, Pizza Hut US highlights fast food and online ordering on its home page. Red is also Pizza Hut US’ theme color, but it’s more solid, darker and cooler than the warm red on the Chinese website.

Same with McDonald’s China website, where one main menu is dedicated to the “Happy Family Party.”

Tong2 Studio has a unique look and feel with this traditional Chinese floral pattern on its background.

Six Station, whose home page is a Chinese ink and watercolor painting in Flash, opens its creative and innovative mind to clients.

Dongpai Design, an interactive design studio, has an interesting mini-website that borrows from the “Three Kingdom” story (a period of Chinese history) to communicate its design philosophy and values.

While John Woo points out that incorporating national and cultural elements into design is not limited to the Web, he acknowledges the practicality of Chinese Web design—that designers will borrow anything that might be useful to them or their users.

Want An Even Bigger Showcase?

Not enough visuals for you? Here is a whole bunch of more websites to give you a better sense of design in China.

UI Seven
A design studio.

IDT
A personal showcase that records the designer’s 12-year love affair with his girlfriend (now wife) and his own professional growth as the Web evolved during those years.

Youguan Cookies
Also uses Flash animation to promote its product line.

Xin Hongru
An interactive design agency that uses both Chinese elements and Flash to showcase its work.

Thinkpad Edge
A new product line of the Thinkpad laptop.

Moliyo MFM
An online video game website, designed for clicks.

361 Sports
Borrows the theme of the 2010 Guangzhou Asian Games for its home page.

Dove Chocolate China
Uses Chinese elements and the lunar New Year to decorate its home page.

BangbangWa
A snack company whose website is rich in games and Flash.

Brain Town
A personal portfolio website.

ShuXia
A platform to showcase the creations of members.

Jossy Jo
A clothing brand.

Apsou
An interactive consulting agency.

Mole Lele
A cartoonist’s personal website.

WEBE7 Enterprise Network Interactive
A portfolio website.

Sanshen Toscana
A real-estate website that relies heavily on Flash.

Wotoon Design
A design agency.

Shaopan Film Studio

X’mas Tree Workshop
A mini games website where you can create your own Christmas tree and send it as an e-card to your friends.

The GF Space
A design agency.

HAHA DIY
A neat website for DIY home ornaments.

Yimei Cross Stitch

Happy Basket
Designed for clicks.

WuHansoufang
A pretty cool Flash website.

Chateau Junding
A domestic wine brand.

TIIDA
Incorporates a family theme into its Flash design.

Magic Workshop
A kids clothing company, using Flash-animated cartoons to capture the company’s culture.

JJ Ying
A neat personal portfolio website.

Beijing Orange Advertising
A creative showcase website.

Nescafe
Another website rich in both games and Flash.

Yee Chino
A restaurant.

Gold Chino
The sister restaurant of Yee Chino.

Guoguo Diary
A fairly simple but creative personal website.

Rancho Santa Fe
A real-estate developer in Shanghai.

Challenges, Opportunities, Trends

Challenges

When it comes to challenges in the Internet industry, one of the frustrations mentioned by Whitecrow, Junchen, Rex and Lytous is government censorship. YouTube, Twitter, Facebook, and Flickr are all blocked in China because some of their content is considered “inappropriate.” And for compliance purposes, “Sina Microblogging has a team of humans whose job is to censor content, in addition to machine filtering,” says Whitecrow.

The international debate on how free and open the Internet should be is ongoing (see Nussbaum, 2010), and there is still no universal “policy” for the Internet. But without an open environment, China could be impeded from learning from and catching up to other countries.

Still, every coin has two sides. “It limits your freedom,” says Whitecrow Zhu, “but meanwhile, it has a positive effect on UI design and content presentation. There is less room for gimmicks. It forces you to concentrate on useful content and how to present your content.”

The other challenge mentioned by Junchen Wu and Rex Song was the lack of quality educational programs: “Vocational schools might teach you how to use Photoshop and Dreamweaver and how to code in HTML, CSS and JavaScript, but they may not teach you design thinking and the logic behind design. The World Wide Web is still young, and at higher-education institutions we have not seen any Information Architecture or User Experience Design degrees yet.”

Our interviews did point to the fact that designers in China have not yet taken full advantage of rigorous research methodologies. Take what Junchen Wu said about the status quo of Chinese Web design: “Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.”

And in response to the question, “How do you convince stakeholders that a design is right?” Rex Song brought up the notion of “guanxi” and trust, and he thought the concept A/B and multivariate testing was “Western” and might yield a “low ROI.”

This is understandable on the one hand, because China has a long history of interpretive reasoning, be it Confucianism or Daoism. On the other hand, Chinese Web designers in general have a long way to go in using hard data to back up their design choices.

One might argue that the designer’s job is simply to design, the fact is that you need reasons to support your decisions that affect layout, color scheme, positioning of elements, user interaction and so on. Only “25% of the designers who relied on their personal opinion were right. A research study conducted by the Neilsen Norman Group (2009) concluded that “you’d be better off tossing a coin than asking advice of these people.” This cannot, of course, be said of everyone, but it speaks to the importance of data.

Opportunities and Trends

We were inspired in all six interviews by the discussion of the opportunities and trends in Chinese Web design.

Question: What trends do you foresee in Chinese Web design?

Yu Guo: E-commerce, I would say. Do you know Taobao? Some of my female colleagues have bought soy sauce, pickles and snacks that I’ve never heard of at Taobao. They love it. This is the market in China, and there is demand. I think every company should take advantage of it.

[Authors' note: Taobao is one of the largest shopping platforms in China to connect buyers and sellers of 'baobei' (treasures). Out of curiosity, we searched for chocolate on Taobao and found those seasonal truffles that are sold around Thanksgiving and Christmas exclusively at Costco, the largest warehouse membership club in the US.]

Whitecrow Zhu: I think Web design in China is moving towards integrating more and more user-generated content. Douban, an online book and movie club, is a good example. Like YouTube, the majority of the website’s content is user-generated, and it has been pretty successful. Douban existed before YouTube, by the way.

Several years down the line, e-commerce in China will be in full bloom. E-commerce is not tied to any ideology other than simple economics and consumer interest. It has less of a chance of being censored, and people demand it.

Junchen Wu: Creating more value for customers. Listen to what they say, look at what they do, do what they do and think what they think. My belief is that Chinese Web design is getting better and better, in an upward-spiral trend.

Lytous Zhou: Focus on users and your service. I don’t think we’ll see anything unnecessarily extravagant, like crammed content and excessive visuals. Features, functionality, industry standards and meeting customer needs are the trends, I believe. And you’ve got to think outside of the box.

John Woo: Functional, useful and usable. Making websites flashy, with lots of reds and greens, is absolutely unnecessary. Focus on user essentials and user needs. Though not a website, the Tianyu (KTouch) cell phone is very popular in China these days, and I bought six for my family: four with big font display and handwriting input for my parents and parents-in-law, one with 3x optical zoom and an 800 MP camera, and one that looks like lady’s powder case (see picture below). Tianyu was a “Shanzhai” manufacturer but is now a registered company with a pretty good share of China’s cell phone market. Why? It focuses on user essentials and basic needs. Websites are no different.

[Authors' note: 'Shanzhai' literally means 'villages in the mountain with stockade houses.' The use of shanzhai became popular with the outstanding sales of shanzhai cell phones. Although shanzhai companies do not use branding as a marketing strategy, they are known for their flexibility in design to meet specific market needs. Shanzhai cell phones can be sold at prices much lower than normal cell phones. (Wikipedia, 2010)]

Rex Song: In terms of online trends, we will develop our own Web design style using the backdrop of Chinese culture. Formatting-wise, we will be in line with the mainstream world, creating more user-centered designs and offering a better user experience.

Wrapping Up

The Web in China is young, and Chinese designers are playing catch-up. Despite the challenges, we see even more opportunities: smart people, a big market, increasing demand, flexibility and innovative and user-centered design thinking.

On many Chinese websites, we’ve already seen the “upward-spiral trend from imitation to innovation and user-centered design”. Innovation in China is a constant goal. It is being pushed in President Hu Jingtao’s State speech all the way down to classroom curricula. Says Bruce Nussbaum (2009), “To its credit, China has made design a national priority and is pouring billions of yuan into design education.”

Through our interviews, we also collected some resources that our designers would like to share with Smashing Magazine readers (including those in languages other than Chinese).

Events

UCDChina Book Club Meetups
These monthly meet-ups occur on the third Sunday of every month in China’s eight major cities: Beijing, Shanghai, Nanjing, Shenzhen, Guangzhou, Hangzhou, Xiamen and Chengdu. They set a topic for each month, and club members can borrow the books from UCDChina library and return them at the next meet-up.
UCDChina Annual Conference
The first conference was held in Guangzhou in 2009. It’s free to attend.
UPA China Annual Conference
The UPA China Chapter conference, different from UPA International. The conference is usually held on “Usability Day” every year.
Designer and Developer Front End Technology Forum
A biannual forum for designers and front-end developers in China.

Books, Blogs and Online Resources

UI Evolutionism
About HCI design on mobile devices, written by local designer Lytous Zhou.
Emotional Design: Why We Love (or Hate) Everyday Things
A classic must-read about design and emotion.
Designing Web Interfaces: Principles and Patterns for Rich Interactions
A book about design patterns for building Web interfaces with rich interaction.
Yahoo! Design Pattern Library
This website was credited by our interviewees as “one of Yahoo’s most important contributions to the design industry.”
Douban
An online book and movie club, mostly user-generated comments and criticism.
iFeng
Phoenix News Media, a new portal.
Since 1984
About design and beautiful things in the world.
Metroer
About reading, including “design reading.”
Mooogu
About industrial and interior design. A good website to find inspiration.
Apple4us
Community blog for tech demos, reviews and ideas.
Ffffound!
An image bookmarking website.
Notcot
For your ideas, aesthetics and amusement.
We Heart It
A website that lets you create an online album from your favorite images and videos.
Core77
Design magazine and resource.
Engadget
A Web magazine with obsessive daily coverage of everything new in gadgets and consumer electronics.
The Design Inspiration
Like its name suggests…
Dbcut
A Korean design community portal.

Your Voice Is Important to Us

What do you think about the Web design in China? We couldn’t cover everything in one post, and we are sure we have missed some perspectives. We look forward to hearing your feedback!

You may be interested in the following related posts:

About the Authors

This guest post was written by Kejun Xu and Hendry Lee.

Kejun Xu, an information architect devoted to user experience research; a user researcher dedicated to user-centered design; a usability engineer engaged in making the Web easier to use; and a translator and interpreter who loves inter-cultural communication and bridging people together. She designs for her users, making their lives easier and hassle-free. She blogs once a while, about UXRnD, to record the auto parts and loose diamonds, in case she forgets.

Henry Lee helps people overcome strategic and technical challenges in starting and growing their blogs. Read more of his blog tips, including website building with blog software, strategies, hosting, social media, Web writing, design and more. You can also hire his team at Marketing Loop to build a Web presence for your business or personal website. Stay in touch with Hendry by following him on Twitter.

(al)

What If Oscars Were Given To Movie Websites?

2010-04-15T07:47:00.000-07:00

Many of us today probably use the Web to book tickets and find information about movies. By selling tickets and entertaining visitors, websites help movies succeed at the box office and earn public approval. And yet, website developers don’t get any public recognition for the success of movies. Isn’t it a bit unfair in the Internet era not to bestow a single bit of appreciation for the presentation of movies online?

Most modern movie websites are built in Flash, even when it’s totally unjustified. The websites often lack usability standards and require users to click through splash pages and introductions in order to access content. They have the luxury of being able to neglect common principles and standards because they garner attention merely by their association with the movies they promote. Let’s suppose, though, that these developers got their own Palmes d’Ors, Oscars and Bears. Wouldn’t this be strong motivation to create outstanding and usable websites?

In this post, we imagine Oscars being given to both movies and their websites. This is, of course, not a new award from Smashing Magazine and far less an attempt to assume the right and honor of the Academy of Motion Picture Arts and Sciences. It’s just a fun way to observe the latest trends in movie website design and to showcase the best websites of the 2009 blockbusters, as well as recent and upcoming movies.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Nomination: Graphics

This is perhaps the most prestigious category in our virtual ceremony. It refers to the way a design uses photos, illustrations and graphic elements to create a pleasing and memorable visual experience.

The Nominees Are…

Law Abiding Citizen
For its use of bold and expressive photos.

Transformers
For the Transformers models (of course).

Ice Age 3: Dawn of the Dinosaurs (UK official website)
For the icy illustrations.

Alice in Wonderland
For achieving wonders with illustration and photo manipulation.

Cloudy With a Chance of Meatballs
For the tasty illustrations and delicious little elements in the design.

How to Train Your Dragon
For some red-hot graphics.

A Town Called Panic
For the funky plasticine illustrations.

And the Winner Is…

The attention to detail on the Alice in Wonderland website is impressive. A seamless combination of digital illustrations and photographs and plenty of small Wonderland-style graphic elements makes this design eye candy.

Nomination: Interactivity

Many movie websites, especially ones for animated movies and action blockbusters, rely on interactive elements to engage visitors. The following websites of popular movies from 2009 deliver a solid interactive experience and are deserving nominees.

The Nominees Are…

Broken Embraces
For the beautifully executed stack of torn photos, which serves as the navigation menu.

Halloween 2
For the terrific (and terrifying) 3-D elements.

District 9
For the interactive panoramic views of District 9.

Cloudy With a Chance of Meatballs
For the customizable food rain and lively characters.

Harry Potter and the Half-Blood Prince
For the magical image gallery.

And the Winner Is…

The website for Cloudy With a Chance of Meatballs is a joy to explore, mainly because of its interactive features.

Nomination: Dynamic Effects

Movie websites have invariably included at least one trailer on the home page or on a splash page. The trailer usually plays automatically. But a growing trend is to use clips from the movie as a pre-loader or background. In doing so, film websites typically employ Flash animation and motion graphics for maximum visual impact. The following websites feature some excellent dynamic effects of various types.

The Nominees Are…

Halloween 2
For the spooky and shimmering video clips.

Where the Wild Things Are
For the beautiful and organically integrated video.

Transformers
For the animated Transformers (showing actual transformations would have been better, though).

Watchmen
For the incredible dynamic effects.

Terminator Salvation
For the well-styled video stream.

Lovely Bones
For the seamless combination of video fragments and images.

Star Trek
For the fantastic transition effects.

And the Winner Is…

The navigation on Star Trek’s official website simulates the experience of walking around the spaceship. This effect is excellently implemented and takes the visitor deep into the movie’s atmosphere.

Nomination: Harmony With Movie

Movie websites are of course all about the movies they promote. But screenshots, trailers, photos and images alone may be not enough to convey the atmosphere of a film. A lot more can by done by weaving the story and concept in with the design elements. Each website showcased below does a great job of recreating its movie’s feel and drawing visitors in.

The Nominees Are…

Alice in Wonderland
For the gallymogger details throughout the design.

Star Trek
For the great use of space-themed material, which everyone loves.

Drag Me to Hell
For the shiver-inducing fly animation.

Surrogates
For the futuristic robot features.

Up in the Air
For the nifty airplane-style elements and icons.

District 9
For the great use of alien-themed material.

And the Winner Is…

Our virtual Oscar goes to District 9. The movie’s dismal atmosphere is communicated well on all of the website’s pages. In fact, District 9 offers six distinct “experiences” apart from the official website. Features include interactive panoramic images, stylized graphics and video clips, as well as separate pages for humans and aliens (being faithful to the movie’s spirit).

Nomination: Best Exclusive Content

Thousands of online resources and databases are available where users can find out information about past, current and upcoming movies, watch trailers and book tickets. So, exclusive content is a kind of trump card for official movie websites. Without it, the websites are almost useless. Still, many studios continue to offer a minimum of content, such as trailer, screenshots, synopsis and a couple of posters for downloading. By contrast, all of the nominees for our Best Exclusive Content award offer treats for even the most fastidious of movie fans.

The Nominees Are…

Alice in Wonderland
For the fun facts about the movie.

Nine
For the screenplay, which is available in PDF format.

An Education
For the extensive information about the film.

Up in the Air
For the precise “departure” and “landing” info.

Watchmen
For the incredible character profiles.

The Wolfman
For the fascinating insight into werewolf legends and mystery.

And the Winner Is…

Besides its comprehensive overview of the movie and a number of videos and photos, The Wolfman website offers a good amount of information in the Features section about the mysterious events depicted in the movie and the horror legacy of Universal Studios. Both the content and presentation are wonderful.

Nomination: Typography

Typography greatly affects the user experience. Everyone loves beautiful typography, and we just couldn’t leave this element out of our categories. In most cases, a movie website’s attention to typography amounts to choosing an appropriate font family. On some websites, though, you’ll find some really nice work with styling and arranging.

The Nominees Are…

Halloween 2

Watchmen

Nine

How to Train Your Dragon

Inglourious Basterds

Where the Wild Things Are

Broken Embraces

And the Winner Is…

The Inglourious Basterds website is practically the only design here that expands the work of the film’s art through typography. Both the selection and arrangement of type here evoke the spirit of the film and make the website easy and enjoyable to read.

Nomination: Fun Games

Games, fan kits and other activities of the sort can be found on movie websites from various genres, from family comedy to horror. This entertainment engages visitors, in turn further promoting the film. Truly unique and engaging activities have made it into this category.

The Nominees Are…

Cloudy With a Chance of Meatballs
For its five ways to play with food, one of which is in 3-D!

Fantastic Mr. Fox
For the lovely game interface design.

Transformers
For the fan kit and fan art sections.

Sherlock Holmes
For the clever test of deduction.

Surrogates
For the virtual surrogate creator.

District 9
For the “non-human” support.

How to Train Your Dragon
For its wide range of craft activities.

Avatar
For letting you create your own avatar (not as beautiful as the movie’s, though).

And the Winner Is…

The website for How To Train Your Dragon offers seven online games and fifteen activities to print out and play. Good enjoyment for the whole family.

Nomination: Cross-Media Interaction

The increasingly popular mobile Web and social networks just can’t be ignored by movie companies. Many movies are represented on Twitter, Facebook and other social networks and bookmarking services. Many movie websites have social media panels and widgets that let users get updates and share information about the movies on their own websites and social network pages.

iPhone and iPod apps have become common promotional tools as well. Some movies even have community websites that bring people together around certain topics discussed in a film. The deepest and most versatile social media integration is exemplified by the following websites.

The Nominees Are…

Alice in Wonderland
For the wonderful mobile applications.

Star Trek
For the complete collection of social network links.

Pandorum
For the deep media interaction (widget, social networks, iPhone game, etc.).

District 9
For the earthling and non-human communities.

Avatar
For providing numerous ways to spread word about the movie.

The Twilight Saga: New Moon
For attending to all kinds of Twilight fans (take the TwilightMOMs community for instance!).

And the Winner Is…

With 5 official streams on major social networks, over 15 community websites and 4 items in the App Store, The Twilight Saga: New Moon is the clear winner in this category.

Nomination: Best HTML Website

Many movie websites use Flash when HTML, CSS and a couple of good JavaScript effects would do. The four websites below break from this convention and prove that good movie website design does not necessarily have to include Flash.

And the Winner Is…

The website for Music By Prudence fully deserves this award. The website was created by New-York based design duet Bartlett de Boer, which explains the idea for this design this way: “Together with our client, we decided on a Flash-like site, to be supported by WordPress’ content management system. We combined bold typography, huge background images and a smart jQuery application that creates a dynamic effect, presenting all the info in semi-transparent sections. This was one of the most exciting projects we’ve worked on so far.” No doubt, the Music By Prudence website is a credit to Matt Mulleneweg’s brainchild, WordPress, too.

Nomination: Best Flash Website

Movie websites usually contain a massive amount of media content, which is why Flash is the most popular platform on which to build them. While many websites either overuse animations and dynamic effects or don’t justify their use of Flash at all, some Flash movie websites deliver attractive, entertaining and informative experiences quite well. Below are six movie websites that are worthy of our imaginary Best Flash Website Oscar.

The Nominees Are…

Alice in Wonderland

How to Train Your Dragon

And the Winner Is…

Inglourious Basterds! An attention to detail at all levels of the website, nifty yet unobtrusive effects and plenty of information make this Flash movie website stand out gloriously from the others.

Red Carpet Stars

Some movie websites that did not win our imaginary Oscars are still worth being showcased. Most of these, though not all, are done in a minimalist style, containing some basic information and a minimum of Flash effects. They are quite easy to navigate and their interfaces are visually appealing. Despite not being nominated here, they deserve some serious Hollywood buzz.

City Island
A lovely combination of photographs and sketches makes the website for City Island special.

Mid-August Lunch
This is more an interactive movie poster than a website. The page contains practically no information about the film itself, referring visitors instead to the studio website. Still, it features an original theme that we just couldn’t pass up.

Invictus
Like the films of maestro Clint Eastwood’s oeuvre, the website for Invictus tries to show the present through the prism of timeless values. How else to explain the use of Flash for this elegant and contemporary design, which could have been done with plain HTML and jQuery?

The Hurt Locker
Grungy typeface, sandy colors and good still images make this website a worthy online counterpart to the movie.

Green Zone
Some really great styling in the navigation menu.

Diary of a Wimpy Kid
Funny cartoons and a graph paper texture contribute to the theme for this movie website.

The Square
The content here is contained in a stylized grid, which doesn’t in the least impair readability and usability. Dark colors and bold grungy textures make for a true “website noir.”

Kick-Ass
Plenty of games are integrated smoothly in the content here, resulting in a kick-ass movie website!

Shutter Island
The website for this brilliant movie is another black pearl in our collection. The focus here is on the dark island landscape, complemented by little polished details.

Brooklyn’s Finest
This is one of the few websites that have a good splash page. Overall, the website for Brooklyn’s Finest has some great photos and unobtrusive Flash effects. The city line shown as a film negative is the cherry on top.

The Road
The website for this impressive film, based on the Pulitzer prize-winning novel by Cormac McCarthy, is lean as can be. The minimalist design builds mainly on still images from the movie. The quotes from the novel that appear while the page loads (an feature also seen on the Inglourious Basterds website) contributes to this information-rich website.

Hot Tub Time Machine
The headshots that appear when you mouse over the menu items would make anyone smile. The short introduction is a nice touch, too. The Hot Tub Time Machine website certainly won’t leave you cold.

Moon
This website is notable for its atmospheric, pseudo-3D background images. The graphics are enriched by transparent elements with frames that mimic a plating effect.

Lbs.
This website has what you could call a camouflage design: it looks like pure HTML but is fully Flash. But don’t let that annoy you. The website loads relatively quickly and is easy to use. Also, the panorama on the main page is adorable.

The Secret in Their Eyes
When the subject matter is secrets, a dark laconic design is the way to go.

Precious
The website for the Oscar-winning film (really!) Precious shows great use of video to get visitors involved in the story.

Valentine’s Day
The website for Valentine’s Day has a social network-ish look and feel, mainly because the background photos look like the profile pictures on a social network.

Please Give
Although this is only a “Coming soon” page, showing a trailer, press notes and a Facebook link, the typography merits its inclusion on this list.

(al)

Free Social Media Icons for Web 2.0 Sites Like Twitter, Facebook, More

2010-04-15T07:40:00.000-07:00

WebDesign.com offers these social media icons for use on your personal blogs and websites to show off your social profiles elsewhere. We commissioned the creation of these icons for the most popular web 2.0 social networking sites out there, including: Facebook, Twitter, YouTube, MySpace, LinkedIn, Digg, Delicious, and Flickr. There are also Feed and Email icons included.

Download the Social Media Icons here