O ROI, Retorno de Investimento, do termo inglês Return on Investiment, ou ainda, ROR, Rate of Return, mede obviamente o ganho ou a perda em pequeno, médio ou longo prazo dentro de um projeto, em relação ao que foi investido. Resolvi dar o título desse artigo de UROI, para não atrair a ele investidores de…
Se tem um tema dentro da estrutura de Arquitetura de Informação que eu gosto, esse tema é sem dúvida o Sketching, quer seja pelo meu passado desenhista, quer seja pela sua praticidade. O Processo de arquitetura de informação de forma simplista consiste na propotipagem, é o desenvolvimento de protótipos que se tornam o que chamamos…
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
