Pinceladas da Web

Se você irá mostrar a um cliente o desenho do site em um papel, sabe o valor de apresentá-lo em uma versão interativa com links. Os usuários do Visio sabem que é muito simples criar protótipos interativos em HTML a partir de um set de Wireframes (Arquivo > Salvar como página Web). Mas dessa forma ocorre uma desvantagem se você precisar enviar esses arquivos por e-mail, pois dependendo da complexidade do projeto, serão criados muitos arquivos HTML e várias imagens.

Os PDF’s são ideais para serem enviados por e-mail, mas leva-se tempo para criar protótipos interativos em PDF com o Visio. Abaixo você verá um tutorial de como fazer isso:

Continuar lendo »

O Software Adobe Fireworks CS3 atualmente tem se tornado uma das ferramentas favoritas de Designers de Interação para o desenvolvimento de protótipos. Com a versão CS3, a Adobe adicionou novas funcionalidades que facilitam a criação de protótipos:

• Você pode criar páginas ao invés de criar várias camadas.
• Você pode criar uma página mestre com os elementos comuns em todas as páginas.
• Vem com uma Biblioteca de elementos (widgets) de interface que pode ser utilizado com um simples arrastar e soltar.
• Você pode criar seus próprios elementos (widgets).
• Pode programar cliques a qualquer elemento e assim linkar outras páginas.
• Pode exportar como uma página web e assim criar protótipos navegáveis.
• Pode trabalhar desde rascunhos até desenhos complexos.

A seguir você pode ver um vídeo e alguns tutoriais sobre como fazer protótipos no Fireworks:

• Video of a web page made with Fireworks
• Tutorial: Rapid prototyping in Fireworks CS3
• Tutorial: Wireframing with Fireworks CS3
• Tutorial: Using Fireworks CS3 to design effective, interactive website presentations

Quando se apresentam idéias que fazem referência a dados, pode ser de grande ajuda utilizar algum gráfico ou uma tabela. Isso nos permite comunicar de uma forma mais clara e efetiva uma informação relacionada a dados, ou também pode arruinar toda uma apresentação se não escolhermos o gráfico correto. No momento de escolher o gráfico correto, pode ser muito útil utilizar a tabela de decisões de Andrew Abela:

Continuar lendo »

Blueprint nada mais é do que o esquema do website sobre o qual todos os outros aspectos são construídos: forma, função, metáfora, navegação, interface, interação e design visual. Blueprints também são utilizados na Construção Civil. Abaixo você pode ver um vídeo que mostra o processo de Blueprint na Arquitetura de Informação:

Referências

• elrodriWEB – Video sobre Blueprint en la Arquitectura de Información

O que é um Wireframe?

É uma representação esquemática de uma página web sem elementos gráficos que mostram o conteúdo e o comportamento das páginas. Servem como ferramenta de comunicação e discussão entre arquitetos de informação, programadores, desenvolvedores e clientes.

Quando utilizar? Quais as vantagens? Que tipo de informação deve conter? Como fazer? Todas essas e outras várias perguntas são respondidas no ótimo Guia sobre Wireframes desenvolvido por Olga Carreras. Leitura obrigatória para Arquitetos de Informação e para aqueles que querem se aventurar nesse mundo.

Via: estándares y accesibilidad.