UI Prototyping | User Interface Design

Rach n' Roll

Rach n' Roll

Power Member
Ora bem, algum tempo após ter criado este tópico, relativamente a um software específico de prototipagem, e sem qualquer participação por parte dos users, venho agora criar um novo tópico, mais abrangente ao tema (definições, software, etc...) no qual espero poder contribuir com alguns dos meus conhecimentos e experiência, assim como promover uma troca de ideias e conhecimentos com todos os users deste fórum...

O Design não são os "bonequinhos" que se faz no Paint ou até mesmo no Photoshop, nem somente a destreza com o software de Design existente no mercado.

Na Web (principalmente) o trabalho deve ser muito bem pensado e estruturado. Nomeadamente a criação de um Workflow das páginas, interacções e decisões nas páginas da aplicação / site. Alguns exemplos: aqui e aqui.

Deve ser criada,também, uma estrutura para a interface, que servirá de guia para o design: a estrutura wireframe (exemplos e samples).

Outro passo igualmente importante será uma overview às 10 usability heuristics (Jakob Nielsen) e aos First Principles of Interaction Design (Bruce "Tog" Tognazzini). São sempre óptimas guidelines para quem pretende uma aplicação (ou até mesmo produto) que funcione.

Prototipagem

Um protótipo não é mais do que um Frankenstein da aplicação: muitas partes ligadas umas às outras, feio, mas que deve representar em termos de interacção o que se pretende com a aplicação: navegação, decisões do utilizador (aka registos, logins, upload de ficheiros, downloads...):

Prototipagem de Software
Protótipo Navegável feito com o Software Axure ***** ( mesmo software do tópico que abri há uns tempos e ficou às moscas).

Outro software para prototipagem (o que tenho vindo a utilizar) é o Microsoft Sketchflow. Desde a criação de páginas e interacções, decisões, e organização das páginas. Depois é possível exportar um .exe da aplicação, bastante útil para defender o vosso trabalho ao cliente, e até mesmo para proceder às alterações necessárias na interacção e arquitectura da aplicação antes de ir para produção final.

Na minha opinião (e sem querer parecer arrogante) o verdadeiro trabalho do designer está aqui: o design torna a aplicação funcional e a estética torna a aplicação bonita e agradável.

Espero que este meu texto seja, também, uma achega a todos os users que gostariam de seguir a carreira em Webdesign...e a ver se terminamos de uma vez por todas com a ideia de que os designers apenas combinam cores e fazem coisas giras.

Espero pela vossa contribuição relativamente a este tema :D
 
Axo que seria interressante de partilhares algo que ja fizeste com o Axure, digo este pois foi o que falas-te no outro tópico, pois para alguns pode ser confuso, e com um exemplo talvez se veja o concreto daquilo ques estás a falar
 
Pedro_dias disse:
Axo que seria interressante de partilhares algo que ja fizeste com o Axure, digo este pois foi o que falas-te no outro tópico, pois para alguns pode ser confuso, e com um exemplo talvez se veja o concreto daquilo ques estás a falar
Clicar para expandir...

Não cheguei a fazer nada em especial com o Axure, a empresa acabou por comprar o pacote da Microsoft (incluindo o Sketchflow que é o que estou a trabalhar). Mas deixei um link no primeiro post de um exemplo feito em Axure, o Protótipo Navegável.
 
Cartman disse:
Rach n' Roll, os teus posts são bastantes interessantes, mas como eu só trabalho na área das Artes Gráficas, não pesco nada desse tipo de programas. :)
Clicar para expandir...

Obrigada :)
Bem quanto muito ficas a saber que existem e a funcionalidade, o que já não é mau...saber não ocupa lugar ;)

Já agora desafio-te a criares um post interessante relacionado com Artes Gráficas, mais concretamente Pré-Impressão e Arte Final (usei bem o termo?), acho que é o calcanhar de aquiles para alguns designers e vinha mesmo a calhar para este fórum do Design...que achas?
 
Como tu dizes, o saber não ocupa lugar e quanto mais programas uma pessoa souber trabalhar, melhor.

Trabalho há pouco tempo na área (4 anos, 2 deles em gráficas), mas posso tentar.

Que tipo de coisas é que queres saber?
Como preparar um ficheiro?
O que são determinados termos?
 
Rach n' Roll disse:
Não cheguei a fazer nada em especial com o Axure, a empresa acabou por comprar o pacote da Microsoft (incluindo o Sketchflow que é o que estou a trabalhar). Mas deixei um link no primeiro post de um exemplo feito em Axure, o Protótipo Navegável.
Clicar para expandir...

Eu tinha visto isso, mas pensei que era um site que esplicava ... Isso eu faço com o flash, talvez esses sejam mais faceis de usar, mas é a mesma coisa, no meu curso ja demos mesmo um modulo de como aprensentar um projector ao cliente e foi em flash.
Só mais um programa, e deves conhecer.
 
Cartman disse:
Que tipo de coisas é que queres saber?
Como preparar um ficheiro?
O que são determinados termos?
Clicar para expandir...

Eu já vou sabendo algumas coisas, mas como és o profissional das artes gráficas acho que era útil a toda a comunidade aprender mais sobre, por exemplo:

- preparar um ficheiro
- conhecimento de determinados termos
- tamanhos e resoluções
- tipos de impressão (offset, jacto...essas coisas)

Por acaso daqui a uns 2 meses vou fazer uma formação relacionada com isto, chama-se SO e Sistemas de Impressão (não faço ideia do que o SO significa...)

Pedro_dias disse:
Eu tinha visto isso, mas pensei que era um site que esplicava ... Isso eu faço com o flash, talvez esses sejam mais faceis de usar, mas é a mesma coisa, no meu curso ja demos mesmo um modulo de como aprensentar um projector ao cliente e foi em flash.
Só mais um programa, e deves conhecer.
Clicar para expandir...

Por acaso é um protótipo feito em Axure e que explica ao mesmo tempo.
Também já fiz um protótipo em Flash na faculdade. Acho que esteticamente falando estava mais bonito do que qualquer um protótipo feito com Axure e Sketchflow.
De qualquer forma, os softwares próprios para protótipos são mais rápidos de utilizar, principalmente quando se vai mostrar o protótipo ao cliente e ele pede 1001 alterações na navegação e afins...
 
Bran_McNobre disse:
Rach n' Roll

Muito obrigado por iniciares esta thread. São conteúdos assim que me fazem consultar esta área do fórum.
Clicar para expandir...

De nada ;) ainda bem que gostaste!

broculo disse:
Deixo AQUI um pequeno contributo com alguns esboços para apresentações de projectos em diversas àreas.

Espero que seja útil.
Clicar para expandir...

Obrigada pelo contributo, por acaso deu-me jeito ali os esquemas para PDA!
 
Última edição:
Devido à minha formação (e não só...) o desenvolvimento com base em soluções padronizadas é me bastante familiar, por isso deixo aqui um site que considero bastante interessante, porque interfaces não é só design, a usabilidade deve estar em primeiro, certo?
Designing interfaces

Cumps
 
paulojreis disse:
Porque raio haverão de estar separados? Um bom design é usável, senão não é um bom design. Form follows function.
Clicar para expandir...

Quando digo design, digo em termos gráficos, não estou a dizer que devem estar separados. Acho que em cima de um interface bem feito, deve estar uma camada bem bonita! Neste caso o inverso, por baixo de algo bonito e que siga princípios de usabilidade devem estar padrões consolidados.
 
rmscouto disse:
Quando digo design, digo em termos gráficos, não estou a dizer que devem estar separados. Acho que em cima de um interface bem feito, deve estar uma camada bem bonita! Neste caso o inverso, por baixo de algo bonito e que siga princípios de usabilidade devem estar padrões consolidados.
Clicar para expandir...

Eu compreendi onde querias chegar, só estava a "alertar" porque acho q o disseste de forma errada: disseste "design", mas creio q estavas a referir-te apenas à função "estética" do design, tal como a maioria das pessoas quando dizem q preferem algo funcional a algo com bom design. Isto é um bocado paradoxal, porque fazer algo "funcional" é - essencialmente - definição de design. A função "estética" é só uma parte do "bolo"!..
 
paulojreis disse:
Eu compreendi onde querias chegar, só estava a "alertar" porque acho q o disseste de forma errada: disseste "design", mas creio q estavas a referir-te apenas à função "estética" do design, tal como a maioria das pessoas quando dizem q preferem algo funcional a algo com bom design. Isto é um bocado paradoxal, porque fazer algo "funcional" é - essencialmente - definição de design. A função "estética" é só uma parte do "bolo"!..
Clicar para expandir...

Exactamente, estava-me a referir à estética, não à funcionalidade. Talvez por já ter visto tantas vezes a palavra design associada apenas à parte estética acabe por cometer o mesmo erro. O site que referi é "designing interfaces", e no entanto não refere a parte estética (erro meu... :P, não levem a mal, mas design não é a minha area). Cumps
 
Deixo aqui um pequeno contributo em relação à prototipagem, eu uso muito o Fireworks e também já brinquei um bocadito com o Flash Catalyst, também dá para fazer uns bons testes em relação a aplicações Flash.

Em relação a guidelines também recomendo a leitura do "Don't make me think"- Steve Kruger se não estou em erro.

Cumps
 
Aproveito para deixar alguns links interessantes para quem anda envolvido em webdesign, wireframes, protótipos, UX e afins =)

"No Tears" Method for User Centered Design (e Wireframing with OmniGraffle)

http://urlgreyhot.com/personal/publications/no_tears_method_user_centered_design


Wireframes

http://blogs.mediazone.co.nz/2009-dmdn206/files/2009/08/wireframe_callouts.jpg
http://www.akendi.com/software-ria-...diagram-design-development-canada-toronto.php


30 HTML Best Practices for Beginners

http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
 
Inicie sessão ou registe-se para poder participar.
Back
Topo