Lilliput: quem disse que fazer interface é fácil?

Protótipo de papel para o editor de mini-mi "Lilliput"

Durante a faculdade de design, aprendemos alguns truques para facilitar o processo de criação dos projetos. Uma delas é modelar fisicamente nossas idéias, mas conhecidas como mock-ups. Até hoje eu não havia feito isso para interfaces digitais, mas também eu nunca havia tido tanta dificuldade em projetar uma tela como estou tendo com o Lilliput.

Esquematização da página do editor de mini-mi Lilliput

Esquematização da página do editor de mini-mi Lilliput

O mock-up da imagem de abertura é a minha tentativa de achar um bom design para o editor. Levei uma semana para chegar nisso, pois não basta funcionar no papel, eu preciso saber como fazer isso funcionar.

Você pode observar que eu coloquei pequenos recortes de papel sobre um fundo branco; antes eu estava desenhando diretamente sobre a folha, mas toda vez que eu pensava em uma nova forma, precisava redesenhar tudo novamente. Para melhorar o processo e me preocupar com o que é realmente importante (a idéia e não o desenho), colei pedacinhos de fita crepe nos versos, assim eu posso modificar a imagem a vontade.

Das várias formas que eu testei, a que fica visualmente mais limpa e ordenada e ao mesmo tempo com boa usabilidade é esta do lado (clique na imagem que ela amplia). Há alguns problemas que eu ainda não consigo resolver, pois talvez sejam problemas de código.

O manequim e o armário ficam nas mesmas posições da amostra do Lilliput, mas as roupas rolam na horizontal (como se estivesse passando pelas araras de uma loja). O que há de novo é que para cada roupinha clicada, abaixo aparecem elas em separado, junto com as amostras de tecido e -se necesário- uma caixa de texto para deixar algum comentário e/ou pedido.

A caixa do preço vai ser rebaixada, pois ela está ocupando o espaço do que eu expliquei anteriormente. Agora para onde ela irá eu ainda não faço a menor idéia. Outra coisa que ainda está solta é a forma de colocar links para outras partes do armário, pois tem acessórios para cabeça, roupas especiais, etc. .

Bem, vamos ver como ele ficará. Estou tendo pesadelos com editores, clientes, mini-mis e tudo que envolve isso. #desabafo

Um super abraço,

tio .faso

4 comentários sobre “Lilliput: quem disse que fazer interface é fácil?

  1. Eder Modanez disse:

    Hey .faso

    Parabéns pela grande evolução! Sem dúvidas você terá sua recompensa por tamanha dedicação, pois o site já está atraente e fácil de usar.

    Acho que o valor final deve estar no canto superior/inferior direito, ou ainda ser mostrado numa próxima página… se bem que se a pessoa não gostar do valor pode alterar alguma coisa durante o processo
    (bem q eu queria isso no processo do SUBWAY, já pensou uma caixinha flutuante enquanto vc faz seu lanche?! hehehe)

    Não desanime…
    Abraços!

    • Tio .faso disse:

      Eder – bom ler que mesmo na fase de mock-up ele está fácil de usar. Vamos ver se na implementação eu não detono essa parte.

      Baixei aqui o preço e ficou mais limpo o visual, liberando espaço para exibir os ítens escolhidos. A idéia de mostrar o valor na página de edição é justamente para isso: saber quanto fica o mini-mi, pois o preço varia de acordo com os itens escolhidos.

      Um super abraço,

      tio .faso

  2. Madame Trapo disse:

    ufa! eu sei bem como dá trabalho.
    interface é puro planejamento/usabilidade, arquitetura e design.

    no trabalho uso um programa chamado axure, não sei se vc conhece, mas talvez ajude.

    pra mockup mesmo gosto do balsamiq que tem cara de feito a mão, tem tbm o mockflow (versao online)
    ;)

    bjo
    glá

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *