Maquetes: Codificação vs Desenho?

Não se trata de web design, mas de design de interface em geral. É melhor codificar os Mockups de interface ou "desenhá-los" em um programa gráfico, como GIMP, Photoshop, etc.?

Faça a si mesmo estas perguntas:

• Quantos layouts / opções de interface do usuário você pode explorar em 30 minutos codificando? Quantos você pode explorar esboçando?

• Com que frequência você obtém um design de interface do usuário exatamente na primeira tentativa? Se não com muita frequência, com que rapidez / facilidade é alterar um esboço versus uma maquete codificada?

• Você pode identificar instantaneamente uma cor apenas observando seu código hex / rgb (não apenas uma estimativa, mas a tonalidade / cor exata)? Quando você imagina uma cor em sua mente, pode traduzi-la imediatamente para o hex? Quão rápido você pode escolher um esquema de cores digitando códigos hexadecimais e usando um seletor de cores real?

O fato de você estar fazendo essa pergunta me diz que você provavelmente é um programador, não um designer, treinando. Se você fosse um designer, seria tão absurdo quanto desenvolver um aplicativo sem planejar a estrutura da classe, o design do banco de dados, a arquitetura do aplicativo etc. e apenas entrar diretamente na codificação - e se você é um desenvolvedor experiente, sabe que tipo de problemas esse tipo de desenvolvimento de baixo para cima causa.

Da mesma forma, se você pular direto para o código sem realmente projetar sua interface do usuário primeiro, os resultados não serão bonitos, apenas porque é impraticável aperfeiçoar um bom design, codificando cegamente.

Eu votaria no "desenho" primeiro. Na GUI, o layout / apresentação adequado é a chave e exige meios visuais a serem projetados. O design visual da GUI permite alterar rapidamente seu design sem ter que "imaginar" cada alteração, "traduzir para código" e, finalmente, testá-lo. A outra maneira também é possível, mas raramente é melhor (por exemplo, o projeto é extremamente pequeno, como apenas alguns botões e você está familiarizado e costuma trabalhar no nível "código"; durante o design, alguns padrões podem surgir, que podem ser apenas reutilizado com pequenas modificações).

Se você estiver projetando um kit de ferramentas de widget específico, também poderá usar algum aplicativo "GUI designer", se disponível. Ele acelerará ainda mais o processo de design da GUI, porque mostra exatamente como a GUI projetada será exibida no programa em execução e pode exportar a descrição da GUI pronta para usar no nível da apresentação.

Para o design da interface do usuário, tenho três estágios com objetivos diferentes:

1. Desenhando. Primeiro, você deseja ter uma idéia básica de quais elementos existirão e como eles se encaixam. Qualquer detalhe fino ou perfeccionismo estético nesta fase é uma distração. Eu uso um quadro branco e uma caneta apagável e gorda, para que seja impossível se distrair com muitos detalhes e fácil rabiscar um monte de idéias diferentes e começar de novo a qualquer momento. Já ouvi falar de pessoas que só desenham pequenas notas post-it ou usam apenas a mão secundária (por exemplo, mão esquerda, se você é destro) para se forçar a não prestar atenção à estética e se concentrar 100% na idéia e função. (imagem não minha, de Frank Prendegast )

2. (2!) Simulando.Segundo, você deseja analisar e obter feedback, descobrindo o máximo possível sobre quais são as intuições das pessoas e as respostas não solicitadas antes de iniciar o demorado trabalho de implementação. Isso deve estar no que você trabalha com mais eficiência, já que, se estiver fazendo o certo, deve voltar ao papel frequentemente, buscando críticas e buscando identificar o maior número possível de problemas inesperados o mais cedo possível. Se você é uma máquina de codificação louca e é nisso que trabalha mais confortavelmente, então a codificação é boa, mas a maioria das pessoas trabalha mais rapidamente em algo como Fireworks, Photoshop, software de wireframing dedicado ou talvez um construtor de interface orientado à interface do usuário como o Flash Catalyst (se o produto final não for Flash, o objetivo é obter um bom feedback antes de iniciar a implementação).

3. (3!) Implementando. Finalmente, você implementa a coisa e pretende fazê-lo de uma maneira que permita obter mais feedback com antecedência e frequência.

Essas três partes do ciclo do projeto têm objetivos diferentes; portanto, se for um projeto grande, faz sentido usar a ferramenta mais adequada para o trabalho em cada estágio.

Esta pergunta é um pouco vaga e, como tal, como são as respostas.

Além disso, os projetos variam muito, assim como as equipes.

Dito isto, não há 'melhor'. Trata-se de usar todas as ferramentas em um fluxo de trabalho que faça mais sentido para você e sua equipe.

Em termos gerais, eu diria que este é o tipo de fluxo de trabalho que você deve visar:

1. Esboço. Lápis + papel. Quadros brancos. Iterar. Trabalhe com o maior número possível de membros da equipe.
2. modelos de baixa fidelidade. Pode ser PSD, pode ser visio. Pode ser papel. Usuário teste estes.
3. Comece a construir protótipos. É aqui que você deseja começar a fazer o máximo possível no código de trabalho. Entre no Photoshop conforme necessário e coloque tudo no código o mais rápido possível. Continue testando / iterando pelo usuário.

O que funciona para mim é criar modelos usando um programa que enfatiza a não criação de layouts perfeitos para pixels. Para mim, são os Balsamiq Mockups, que você pode conferir em http://www.balsamiq.com/products/mockups