home

blog

blog

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

Por Tio .faso em 16 de setembro de 2010 às 15:59 (4 comentários)

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

Artigos relacionados

Buzinadas (4 comentários)

Eder Modanez / 17 de setembro de 2010, 14:20 / Permalink (topo)

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 / 22 de maio de 2012, 11:51:

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

Mulk 01: o primeiro da fila? » .marcamaria / 24 de setembro de 2010, 12:33 / Permalink (topo)

[...] Respostas de comentários: sempre tive o hábito de responder os comentários, mas infelizmente não estou conseguindo fazer isso direito. Mas existem algumas dúvidas que eu respondia com um novo comentário que ficava junto com os demais, o que obrigava as pessoas a buscarem as perguntas originais para entender o que eu estava dizendo. Para simplificar, agora as minhas respostas aparecem direto com as perguntas. [...]

Madame Trapo / 1 de outubro de 2010, 19:40 / Permalink (topo)

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á

Comente o artigo

olhosmarejados

Divulgue

eu buzino no .marcamaria!

Clique, copie e cole o código aonde que você quiser! X)
+ selos aqui
Projeto Feliz Natal Crafter - crie sorrisos neste natal!

Clique, copie e cole o código aonde que você quiser! X)