Interfaces pobres nunca mais > 66 exemplos de pura criatividade

Publicado por Carlos | Publicado em Arquitetura de informação, Inspiração, Usabilidade | 22-06-2010

feocspwd-04Olá pessoal, depois de dividir com vocês o post: Rodapé simples! Nunca mais! > 60 exemplos bem criativos! Fiquei empolgado para mostrar a interface de web sites dos designers do mundo a fora, pois eles realmente colocam a cabeça para pensar e aplicar os recursos tecnológicos a disposição dos front-end.

Nós precisamos sair desta mesmice de todo dia e ultrapassar a fronteira do tudo igual, isso se dar pelo fato de ficar sempre na zona de conforto e não querer ousar! 66 Fresh Examples Of Creative Single Page Website Designs trazem interfaces minimalistas com um extremo bom gosto e pura criatividade, use sem moderação!

É isso!
feocspwd-07feocspwd-12feocspwd-15feocspwd-24feocspwd-38

Rodapé simples! Nunca mais! > 60 exemplos bem criativos!

Publicado por Carlos | Publicado em Inspiração | 09-06-2010

cfdee-26Olá pessoal, há algum tempo venho prestando bastante atenção como o rodapé dos sites tem tido um papel não de figurante, mais de coadjuvante pelos webdesigns do mundo.
Lembro-me quando comecei a trabalhar com webdesign no início de 2000, o rodapé era apenas um lugar para dispor dos direitos autorais quem produziu. Muita coisa mudou e mudou para melhor.

Associo esta mudança devido às novas tecnologias e possibilidades que hoje temos a nossa disposição e claro aos criativos webdesigns que não param de pensar, criar, reinventar e melhorar o que já existe.

Fazendo as minhas pesquisas para eventuais trabalhos futuros, encontrei este excelente post do Dkumar M designer Asiático criador do site instantShift uma verdadeira fonte de conhecimento e inspiração, por isso  Creative Footer Design: 60+ Excellent Examples é um post que você não pode deixar de ler e pensar, criar, reinventar e melhorar o que já existe.

É isso!

cfdee-51 cfdee-58cfdee-59

Wireframe no Firefox

Publicado por Carlos | Publicado em Wireframe | 20-05-2010

wireframe_tools_2Olá pessoal, estava pesquisando outra ferramenta para a construção de Wireframe para mostrar para meus alunos, e tive esta grata descoberta do Sketching and Prototyping with Firefox Pencil Project.

Que o Firefox é o melhor todo mundo sabe, o Pencil Project é um complemente free, mas que merece a nossa doação por este excelente trabalho. A doação mínima é de apenas 5 dolares.

Faça o download da versão 1.1 para seu computador e depois abra o arquivo Pencil-1.1-1-fx.xpi com o Firefox. Após a instalação o Pencil Sketching fica localizado na barra de menu > sub opção de Ferramentas > Pencil Sketching…
Principais características:

  • Stencils de terceiros para diagramação e prototipagem
  • Documento de várias páginas
  • Ligações entre páginas
  • Edição de texto na tela com suporte de rich-text
  • Exportando para HTML, PNG, Openoffice.org documento, documento do Word e PDF.
  • Suporta desfazer/refazer
  • Suporta alinhamento, ordenação, escala, girar …

A interface é muito simples e muito fácil de utilizar, eu particularmente recomendo a utilização do Pencil Sketching.

É isso!

Image-0005Property-DialogPage-PropertiesWeb-MockupExport-PNGs

Inspiração: Erro 404

Publicado por Carlos | Publicado em Arquitetura de informação, Inspiração | 25-08-2009

404-11Olá pessoal, este erro acontece quando um visitante digita uma url que não existe em um web-site, não confunda com o erro de pesquisa na web.  Só que esta página tem uma mensagem padrão utilizada pela empresa que esta hospedando o site, que deve ser substituída por uma personalizada. O que parece óbvio é que no projeto de um web-site esta página não recebe uma atenção especial, pois só entrará em ação quando uma url que não existe em seu web-site não for encontrada!

Quando estamos aplicando arquitetura da informação nos projetos de web-site esta página está lá no fluxograma, perfeito! Só que alguns designers pensaram a frente e fizeram do erro 404 motivo de muita criatividade. Encontrei uma lista com 50 exemplos que deve servir de inspiração para que você possa repensar a construção desta página nos novos projetos, porque esta página é tão importante quanto às demais.

O site webbdesigner depot traz 50 Creative and Inspiring 404 Pages, vale apena conferir! Cada uma melhor que a outra tratando erro 404 de forma alegre e bem humorada em alguns casos.

É isso!

30 exemplos de Web Design minimalistas ao extremo

Publicado por Carlos | Publicado em Arquitetura de informação, Inspiração, Usabilidade | 30-07-2009

hakki.comOlá pessoal, fazendo as minhas pesquisas diárias me deparei com esse caso extremo de simplicidade. Em sala de aula sempre deixo bem claro que um designer cheio de flu flu e muito poluído é muito fácil de ser feito, o difícil é fazer o simples.

Estes sites exploram com muita propriedade e criatividade a simplicidade e objetividade, por exemplo, o designer da página inicial do Google é minimalista e objetiva, o que você quer fazer? Pesquisas! Comparando com a do Yahoo poderíamos afirmar que a do Google seria minimalista ao extremo, cada um tem a sua proposta e forma de oferecer seus serviços.

É exatamente o que estes 30 sites têm como proposta, uma forma diferente de pensar o design em como projetar uma interface simples e objetiva e ao mesmo tempo intrigante e agradável de ver.

Aproveitem para visitar cada um e se surpreender, pois por traz de cada idéia tem uma carga grandiosa de projeto e muita codificação dentro dos padrões web. Clique aqui e confira.

É isso!

Wireframe: Muito além do código e do design

Publicado por Carlos | Publicado em Arquitetura de informação, Wireframe | 24-07-2009

Olá pessoal, estou estreando esta nova e importante categoria para poder compartilhar uma parte do planejamento de um site.

Em sala de aula sempre falo para meus alunos a importância do planejamento como um todo e especificamente o planejamento do layout do site. Não existe a combinação de teclas CTRL+ALT+ALELUIA e pronto tudo acontece, antes de colocar a mão na massa faz-se necessário planejar.

O wireframe é uma parte do planejamento, com ele é possível informar aspectos puramente estéticos. Se você fosse construir uma casa quem você chamaria primeiro o mestre de obras ou o arquiteto? Você não começaria construindo alguma coisa e iria ao longo da construção mudando as coisas ou fazendo ajustes para chegar ao que você deseja!

Os wireframes podem ser construídos no papel ou no computador através de softwares ou plugins para softwares conhecidos.

Este artigo tem como finalidade despertar a sua curiosidade sobre o assunto, ainda vou falar muito sobre wireframe. Abaixo segue o meu primeiro wireframe feito em 2004 para um site fictício que uso em sala de aula.

wfr2n

É isso!

Usabilidade: Ergodesign e arquitetura de informação

Publicado por Carlos | Publicado em Arquitetura de informação, Ergodesign, Usabilidade | 21-01-2009



1631793.jpgOlá pessoal, estamos aqui para passar uma dica de um livro muito bom para quem quer se entender os aspectos no processo de criação de interfaces como foi discutido no artigo anterior: Oportunidades: Tv Digital com Adobe Flash Player, que abre as portas para um futuro próximo na criação de interfaces mais amojadas.

Quando escrevi o artigo mencionei a importância de estudar mais sobre interface homem máquina e usabilidade na criação de interfaces, então resolvi ir atrás de um livro que pudesse dar um norte neste assunto.

Ergodesign e arquitetura de informação – trabalhando com o usuário do autor Luiz Agner que tem pós-graduação em usabilidade de interfaces, nos mostra neste livro a importância de organizar as informações para que os usuários a possam encontrar.

O Ergodesign e arquitetura de informação trabalham com os processos mentais humanos – os chamados processos cognitivos.

Este livro não esta cheio de “figurinhas”, são 20 capítulos cheios de muito conhecimento para ajudar os designs iniciantes a entender a importância da harmonia da informação com uma interface. Para saber mais sobre este livro clique aqui.

É isso!

Planejamento, a solução!

Publicado por Carlos | Publicado em Geral | 07-11-2008



Olá pessoal, estou para falar de um assunto importante e necessário no dia-a-dia de um profissional de Designer. Não quero fechar esta semana falando das novidades e recursos mirabolantes de A ou B.

Falando um pouco da minha experiência como Designer gráfico/web, o planejamento é algo que aprendi desde quando tinha 17 anos quando comecei a trabalhar em uma gráfica e que consolidou estes fundamentos quando fiz faculdade pagando cadeiras de voltadas para análise e planejamento.

As fases em que um projeto gráfico passa até o material final chegar às mãos do cliente. Vou aqui dar as minhas dicas pessoais.

Primeiro: o contato inicial com o cliente na hora da exposição das idéias deixe o cliente a falar, entenda o que ele quer, procure pegar a essência do que vai ser produzido. Faça as intervenções necessárias para ajustar as idéias do cliente.
Segundo: após a exposição das idéias, tire todas as suas dúvidas e se possível com suas próprias palavras repita para o que foi exposto para receber a confirmação do cliente de que realmente está tudo certo.
Terceiro: se no projeto em questão faz-se necessário uma pesquisa para aplicação do conceito do designer, faça!
Quarto: se você tem facilidade de desenhar a mão livre, faça um esboço do projeto no papel use lápis de cor, com isso a idéia vai sendo amadurecida.
Quinto: só agora vamos para o computador usar os devidos softwares para dar vida ao projeto.

Só um instante! Às vezes não da para fazer nada disso na prática, pois existe uma urgência naquele projeto. Eu disse às vezes, porque normalmente os meus projetos passam por estas etapas.

Atualmente estou trabalhando em seis projetos mistos designer gráfico e web, todos estão acontecendo “ao mesmo tempo”, eu não poderia dar conta destes trabalhos se não tive planejado cada um deles.

É isso!