MXStudio » danieldepaola

Processo Criativo – Parte 2

danieldepaola — Wed, 25 Oct 2006 00:00:00 +0000

Processo criativo – parte 2

Introdução

Como eu falei no artigo anterior, vou mostrar exemplos de wireframes, exemplos de organogramas de navegação e dizer como e quando eles devem ser aplicados.

Conteúdo

Wireframes

Um exemplo clássico de wireframe é esse abaixo.

Ao elaborar um projeto de um site, antes de mostrar qualquer arte para o cliente é necessário que ele aprove o wireframe para que tudo fique acertado, evitando trabalhos futuros. Nessa hora, é possível fazer qualquer mudança no posicionamento e diagramação do conteúdo.

Em alguns casos, é possível criar um wireframe um pouco mais detalhado após a aprovação do wireframe bruto (este acima). Para aqueles clientes mais exigentes, que gostam de acompanhar de perto cada etapa do projeto, pode elaborar um pouco mais colocando os botões, ícones, tipo de font que será usada e etc, mas nada com cores ou efeitos. Veja o exemplo do livro Experiência Perfeita do Felipe Memória http://www.flickr.com/photos/fmemoria/91940215/in/set-72057594054908097/

Organogra de Navegação

O objetivo de se criar um organograma de navegação é simplesmente para poder exemplificar e mostrar como será feita a navegação entre as páginas e facilita, também, na hora de saber os links e conteúdo que entrará em cada sessão do site.

Veja um exemplo:

Neste exemplo, fiz um fluxo da home onde teríamos os links de quem somos, produtos e serviços, clientes e contato. Explorando um pouco mais o organograma:

Nesse exemplo vemos o conteúdo de quem somos e os links internos desta sessão, são eles: equipe, projetos sociais e artigos. Ao entrar em quem somos, apareceria o texto introdutório.

Considerações finais

Essas duas etapas são feitas na mesma etapa: criação e arquitetura de informação. Algumas empresas ou pessoas fazem em separado, o que não impede em nada suas aplicações. O importante é fazê-las, pois assim você está menos suscetível ao erro e a ter que ficar fazendo ajustes e modificações depois do layout pronto.

Espero ter ajudado mais um pouco nesta etapa. No próximo veremos como aplicar a identidade visual em um layout. Abraços.

Autor: Daniel de Paola – colunista de design e usabilidade

Qualquer dúvida entre em contato por dpaola@gmail.com ou no fórum.

Processo criativo

danieldepaola — Sat, 23 Sep 2006 00:00:00 +0000

Processo criativo

Fala galera, tudo certo? Muuuuuuito tempo que não escrevo por aqui né? Pois é, um dos e principal motivo é que eu agora sou empresário, estou abrindo minha empresa juntamente com 2 amigos da faculdade e 1 amiga de Aracajú. Quem quiser ver é só acessar www.agenciajungle.com.br. Mas vamos ao que interessa?

Introdução

Vou falar sobre uma etapa do desenvolvimento de projetos que eu adoro e é uma das minhas funções dentro da Jungle. Processo criativo.

Conteúdo

Antes de se começar a criar, pelo menos duas etapas importantes: o briefing inicial, que é um questionário criado pela agência ou pelo profissional que deverá ser respondido pelo cliente e as reuniões com o cliente após a entrega do briefing preenchido para que toda e qualquer dúvida inicial seja esclarecida.

A partir daí é que começar toda a “brincadeira”!! A equipe de criação junta-se para o chamado brainstorm. Nessa hora começamos a juntar as informações passadas pelo cliente e vamos montando rascunhos para chegarmos a um design final.

Depois disso, começam a ser feitos wireframes, esboços dos layouts onde é desenhado apenas o necessário para que o cliente entenda o posicionamento das imagens e diagramação de textos e ícones. Nessa fase o cliente irá ver apenas as linhas de como será o layout ou no máximo o próprio layout sem cores, trabalhos com efeitos, tipo de fonts e etc.

Após a aprovação desta etapa, é que passamos para a fase, digamos, da “arte final”. É nesta etapa que trabalhamos a identidade visual do cliente no layout, aplicamos as cores da logo, cores complementares, fonts e etc. Tudo que foi acertado no brainstorm, todas as referências pesquisadas, todos ícones criados, vinhetas, enfim, tudo.

Novamente o cliente precisa aprovar e é normalmente nesse momento que ele argumenta que não gostou de alguma coisa, pois, ainda está para nascer o cliente que aprova tudo de cara. Normalmente são feitos mais de um layout baseado no wireframe aprovado para que o cliente tenha opção de escolha, e é aí que mora o perigo.

Pode acontecer do cliente chegar e falar: “Não teria como pegar o topo do layout 1, com o menu do layout3 e misturar com os ícones do layout 6?”. Pois é. Isso acontece e, podem ter certeza, muito.

Após a aprovação do cliente, passa-se para o responsável pelo html, css que pode ser ou o designer mesmo que criou o layout ou o desenvolvedor que irá programá-lo. Mas isso é papo para um outro artigo.

Considerações finais

No próximo, mostrarei exemplos de wireframes e explicarei como são e podem ser montados. Mas é claro que agora não vou demorar a escrever novamente.

Autor: Daniel de Paola – colunista de design e usabilidade

Qualquer dúvida entre em contato por dpaola@gmail.com ou no fórum.

Breadcrumbs Trails

danieldepaola — Wed, 22 Mar 2006 00:00:00 +0000

Coluna Usabilidade – Breadcrumbs Trails

// -->

E ai galera, beleza? Espero que tenham curtido o meu primeiro artigo. Continuando os artigos sobre usabilidade, vou falar hoje de um tema que eu mesmo já havia esquecido, mas que num evento de desenvolvedores aqui no Rio foi lembrado em uma das palestras. BANDA LARGA X CONEXÃO DISCADA!!

É verdade que o crescimento da banda larga no Brasil está cada vez maior e que com o aumento da concorrência entres as prestadoras desse serviço, o preço está ficando acessível para muita gente. Mas mesmo assim ainda é grande o número de usuários da conexão discada, aquela em que o cabo o telefone é conecta ao modem 56k do micro e faz aquele efeito sonoro lindo ao se conectar.

Pois é, esse também é um caso de usabilidade, pois, é necessário pesquisar o público alvo do seu projeto, para saber que tecnologia usar no desenvolvimento do mesmo. Vejo muitas vezes sites de grandes empresas, totalmente em html “puro”, pois o objetivo é atender a toda a população. Mas também vejo sites totalmente em flash, com efeitos absurdos, com um tamanho de mais de 200Kb. Ou seja, o objetivo é atingir um público mais “seleto” da sociedade, empresas de grande porte.

As conexões discadas, se me lembro bem, fazem uma transferência de dados em torno de 12 a 18kbps. Imaginem o tempo que um usuário com um micro, algo do tipo PIII com 64Mb de RAM e win98, usando sua conexão via modem 56k, acessar um site do porte do www.2advanced.com ?

Em pesquisas feitas com diferentes tipos de usuários, o tempo máximo esperado para o carregamento de um site, é no máximo dez segundos! Isso mesmo, 10s.

Por isso a pesquisa antes do desenvolvimento é importante. Não adianta partir para uma solução em flash, com imagens bem trabalhadas no photoshop, efeitos em 3d, se o público final do site é de pessoas acima de 50 anos ou pessoas que ainda não usufruem de banda larga. Isso causará um efeito negativo para o cliente ou para você no caso de um site pessoal. Ao mesmo tempo, um site puramente html não agrada o publico de grandes empresas, sites voltados para a juventude ou para aqueles que estão começando a navegar na WWW, pois estes, em sua maioria, estão tendo acesso já com a banda larga e gostam cada vez mais de sites com sons, efeitos visuais de cinema, imagens circulando em todo canto do monitor e outras coisas que existem por ai.

Pesquisando e sabendo qual o público alvo, tipo de conexão desse público e fazendo a escolha tecnológica certa para o desenvolvimento, o feedback positivo para o projeto será grande.

Pensar sempre no usuário final do site é sempre o melhor ponto de partida para a escolha certa de como será o website. Nem sempre flash é a melhor solução como nem sempre apenas html não atinge a pessoa como deveria.

Abraços a todos.

Daniel de Paola

danieldpaola@mxstudio.com.br