Adobe Photoshop CS5 – Criação de Interface para Flex 4

Colocado por DClick Team na(s) categoria(s): 1, 4, 6, Adobe, app, AR, arte, bar, BI, blog, Botões, busca, Catalyst, class, cliente, Curso, demo, Design, designer, Destaque, Flex, Flex 4, Flex4, for, Formação, git, ide, IE, image, imagens, int, interface, lógica, menu, mg, O, on, padrão, photoshop, processo, produto, pt, RIA, Ria’s Geral, screen, Screencast, screencasts, site, TAT, Tecnologia, Tutorial, Twitter, UI, user experience, UX, Vídeo, web, XP em 03 10th, 2011 | Sem comentários

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.

AULA 1

Vamos aprender como criar uma interface completa no Adobe Photoshop CS5, nosso foco é criar uma interface para Flex 4.

AULA 2

Criando o menu Bar com buttons e técnica para visualização do Wireframe diretamente na interface.

AULA 3

Trabalhando com os estados dos botões, up, over, down, técnicas para criar facilmente essa skin.

AULA 4

Aprendendendo a tabalhar com Layer Comps

AULA 5

Finalização da parte mais básica da interface, aplicação das imagens no ambiente com a mask.

AULA 6

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

Veja o post original no blog do autor aqui!