Ainda continua o assunto sobre Visualização de Dados voltado a User Interface que comecei aqui, vamos agora abordar o tema de uma maneira mais simplificada e interessante. É muito comum algumas pessoas ficarem perdidas nesse assunto e ainda por cima não conseguirem avançar no tema sem pensar nos gráficos tradicionais, pizza e bastões. Quero lembrar…
Recentemente percebi que muitos profissionais ainda possuem uma certa dificuldade em entender as tais nomenclaturas do ramo… como UX / UI / IxD / Guideline etc. Mas o que tenho visto de mais comum é o uso do termo Guideline para referenciar a User Interface, UI. É fato que a diferença entre ambos na idéia…
Recentemente um amigo e ex aluno Rafael Daron? me pediu indicações de User Interfaces para inspirá-lo em seu novo projeto para a nuvem, citou-me que estava observando o Windows 8 e aplicações como Prezi para ter referências. E a pergunta dele me chamou bastante atenção, e a resposta me inspirou esse post. O motivo é bem…
Tiago Marciano curtiu este postA visualização de dados é um tema que gosto muito, na verdade, sou apaixonado por ele. Posso dizer que você leitor encontrará facilmente um material vasto na ? internet sobre o assunto, mas, aqui quero trazer a minha visão sobre o tema e claro, o material que selecionei ao longo do tempo….
Tiago Marciano curtiu este postÉ verdade que eu posso falar sobre a usabilidade dos dispositivos móveis, mas… é sempre importante respeitarmos a bagagem daqueles vieram antes de nós, e certamente Nielsen é um deles. É muito difícil para mim pensar em Usabilidade sem lembrar de Jakob Nielsen e do Nielsen Norman Group. Antes de comentar…
Ícones de exibição de lista se parecem muito com os ícones de diálogo, mas eles usam um efeito de sombra interna, onde a fonte de luz está acima do objeto. Eles também são projetados para serem usados somente em um ListView.
Conforme já visto várias vezes na grade de resolução dos ícones, você deve criar conjuntos de ícones separados em baixa resolução, média e alta. Isso garante que seus ícones serão exibidos corretamente em toda a gama de dispositivos em que o aplicativo pode ser instalado. Ver Tabela 1 para a lista de tamanhos de ícones recomendado para cada resolução.
A Tabela 1, é a referência que você deve ter para a criação de todos os ícones para Android, ela é a base das resoluções de cada tipo de ícone nas 3 medidas já apresentadas, baixa, média e alta.
Repetindo o óbvio, você deve exportar esses ícones em PNG com transparência.
As diretrizes a? seguir? descrevem? como criar? ícones? de diálogo? para? todas as versões? da plataforma? Android.
• Um? ícone de? exibição de lista, normalmente? tem? um? safeframe (área de resguardo, ou área de proteção) de 1px,? mas não há problema em? usar a? área? safeframe? para? a borda do? anti-alias? de uma? forma arredondada, um canvaz arredondado por exemplo, que fica com alguns detalhes “embaçados”.
•? Todas as? dimensões? especificadas? são baseados? em? um? tamanho de 32?32? pixels? baseado em um Stage do ? Photoshop.? Mantenha 1 pixel? de? preenchimento ao redor da? caixa? delimitadora.
Ícones de exibição de uma Lista são 2D, ou seja, planos e com visualização frontal, possuem uma sombra interna (inner Shadow), Feita através de um gradiente de luzes e sombras internas, destacando-os quando sobre um fundo escuro.
1. Adicionar os efeitos observados na Figura 2 com o filtro adequado.
2. Exportar o ícone de 32?32 px como um arquivo PNG com transparência habilitado.
3. Criar as formas básicas usando uma ferramenta como o Adobe Illustrator ou Photoshop (com ferramenta para vetor).
4. Importar a forma em uma ferramenta como o Adobe Photoshop (caso tenha feito o vetor no Illustrator ou Fireworks) e dimensionar a imagem para 32?32 px em um fundo transparente.
Bom, estamos chegando quase lá, quase no final dessa série de screencasts que mostra a rotina, a forma de pensar de um designer de interface com foco em UX, é um curso diferenciado já que, eu procuro conversar a respeito do processo, mostrar as falhas, aprimorar detalhes, etc.
Eu realmente estou feliz que houve um feedback positivo, o pessoal anda assistindo e gostaram mesmo das aulas.
Agradeço a cada um que postou no Blog, que enviou email, que me adicionou no Twitter etc, este último inclusive é bem útil @eduardohorvath uma vez que eu não fico falando sobre a minha vida pessoal no mesmo, apenas posto sobre assuntos relacionados a User Experience e pode ser bem interessante para aqueles que se interessam pelo tema.
As aulas abaixo mais uma vez abordam refinamento, layers comps, smart object, filters, etc, que são a rotina para quem trabalha com design de interface. Porém, explico mais detalhes a respeito de como perceber o que deve ser melhorado na sua interface e dou detalhes a respeito de outros assuntos coligados.
Obrigado e boa aula.
Abaixo segue layouts atualizados com 20% reduzido seu tamanho do original.
Tela com destaque do menu.
.
São 02:32hs de Screencasts 
.
.
25:13
Nessa aula eu mostro as janelas mais utilizadas pelo designer de interface, um efeito novo para aplicar sobre a foto, e regras de diagramação.
.
.
.
36:08
Detalhes de Produtos, aula que ensino conceitos sobre design e explico como reutilizar componentes (no caso do Photoshop pode ser chamado de objetos).
.
.
.
25:35
Regra do agrupamento de elementos por conta da proximidade de proporção.
.
.
.
12:35
Continuação do término da tela Detalhes de Produtos
.
.
.
29:59
Criação da estrutura do menu.
.
.
.
14:40
Término da subcategoria do menu, nova interação.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
É até engraçado chamar de parte 2, mas é de fato a parte 2 dos screencasts.
Eu pensei em realmente continuar no mesmo post, mas fiquei na dúvida se os leitores perceberiam que houve atualização, portanto estou criando esse novo post com os novos screencasts.
De lá pra cá (e foi apenas 1 dia) recebi um bom feedback do pessoal, a galera realmente gostou e percebi que foram os Devs quem agradeceram, pelo visto querem se aprofundar mais para criarem suas próprias interfaces. É possível? Sim é possível, estou passando técnicas interessantes que poderá ajudar e muito na construção de novas interfaces, mais harmônicas e visualmente mais bonitas, porém, é evidente que esse trabalho não está totalmente refinado, há muito mais, muito mesmo que pode ser feito.
Belíssimas interfaces requerem tempo e muito estudo, acertos, testes, etc.. mas estamos mostrando o caminho das pedras, e futuramente espero poder publicar também sobre Interface iOS e Android, outro mistério aí pra galera que será desvendado.
Dúvidas, Críticas, Sugestões? A vontade… tem o meu email, o meu Twitter ou mesmo os comentários aí abaixo no post.
Segue o resultado do nosso trabalho até esse momento… reduzido em 20% do tamanho original
Com o filtro aberto
.
.
Continuando com o SmartObject, trabalhando dentro dele e vendo a alteração diretamente no Stage Principal.
.
.
.
Dicas de Teoria da Cor
.
.
.
Trabalhando com gradiente e vetor, início da criação da Interface de Filtro.
.
.
.
Criação da Interface do Filtro, seguindo o Wireframe e alterando detalhes.
.
.
.
Refinamento de Interface e Ferramenta Notes
.
.
.
Refinamento de Layout, Efeitos.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Essa é uma aula a tempos pedida pela galera que assiste as aulas de Catalyst. Acontece que não dá para dar aula sobre tudo, vamos aos poucos dando ênfase naquilo que é mais pertinente a essa atividade que se chama Design de Interface, que é o que faço na DClick, juntamente com a parte de User Experience.
Com base nisso, pedi ao nosso Arquiteto de Informação que criasse alguns wireframes de algo bem genérico, optamos por um ShowRoom Virtual feito em Flex, desses que não podemos chamar de mero website, e sim uma aplicação inteligente para mostrar aos clientes alguns produtos, apesar de web, eu não considero como site e sim como uma webapp.
Enviei algumas premissas ao nosso Arquiteto que foram:
Criar um showroom virtual que pode na verdade ser qualquer coisa.
Ele será feito em flex4.
Não quero utilizar combo, quero uma navegação tranquila e mais fácil, porém tudo será dinâmico, ou seja, por um admin poderá ser alterado o menu, o que terá na vitrine etc. Isso na nossa lógica. Nós mesmos iremos até a parte da Skin.
1. Terá uma vitrine com uns 6 produtos em destaque.
2. Cada produto tem suas 3 ou mais fotos, e poderá ter até 1 vídeo.
3. A visualização desses produtos em destaque se dará por pageflip.
4. O menu será horizontal
5. Terá busca.
6. Menu por categoria e subcategoria.
7. Utilizará o tamanho padrão, não pode ter barra de rolagem.
8. Deverá ter o mínimo de coisa no menor espaço possível.
9. Vamos explorar mesmo a navegação do flex como se fosse um iOS (um iPad) etc..
Baseada nessas premissas nosso Arquiteto criou os wireframes, o mesmo ficou de criar alguns screencasts mostrando como funciona esse processo.
.
.
Vamos aprender como criar uma interface completa no Adobe Photoshop CS5, nosso foco é criar uma interface para Flex 4.
.
.
.
Criando o menu Bar com buttons e técnica para visualização do Wireframe diretamente na interface.
.
.
.
Trabalhando com os estados dos botões, up, over, down, técnicas para criar facilmente essa skin.
.
.
.
Aprendendendo a tabalhar com Layer Comps
.
.
.
Finalização da parte mais básica da interface, aplicação das imagens no ambiente com a mask.
.
.
.
Trabalhando bastante com SmartObject
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
EU VOU!!!
Em abril teremos a segunda versão do Flash Camp Brasil, com certeza é o maior evento sobre a plataforma Flash ocorrido no Brasil, reunindo os maiores profissionais e especialistas do Brasil e do mundo especialmente para mostrar ao publico brasileiro as ultimas novidades da plataforma Flash, é um evento obrigatorio tanto para designers quanto desenvolvedores além de uma otima oportunidade de aumentar seu networking.
O evento acontecerá em macéio, e contaremos com palestrantes nacionais e internacionais, e muitos workshops para que voce possa aproveitar o maximo o que o evento tem para oferecer.
Entre os temas discutidos teremos:
Não perca tempo e faça já sua inscrição para o Flash Camp Brasil 
http://www.flashcampbrasil.com.br
Veja minha experiencia no primeiro Flash Camp Brasil
