Um protótipo que facilita a definição do CSS a partir de um arquivo PSD

Brackets- From Design Comp to Code

Ainda é um protótipo, mas em breve será lançado no Brackets.

Nesse vídeo, Rain Wilson e Mary Lynn Rajsku demonstram as funcionalidades desse editor de HTML que importa arquivos PSD e facilita a visualização das medidas e guias visuais de cada uma das camadas do arquivo. Segundo os criadores, o objetivo é facilitar o processo de interpretação de arquivos PSD quando eles são passados do Designer para o Developer – algo que ainda é feito manualmente em muitos times de desenvolvimento por aí.

Leia também:

A aproximação entre Designers e Desenvolvedores (e alguns links úteis caso você esteja interessado)

Styleguides são o novo Photoshop

Atomic Design: redesenhando os entregáveis de designers e desenvolvedores

Atomic Design

Então Brad Frost foi lá e fez.

Desde que começou-se a falar em Responsive Design, muita gente tem se perguntado (e me perguntado) como fica a documentação e a entrega das telas de determinado produto. Já falamos sobre isso aqui no blog, e também como Designers e Desenvolvedores têm se aproximado cada vez mais para fazer isso acontecer.

Até alguns anos atrás era muito comum que em um projeto fossem desenvolvidos wireframes, layouts e depois mockups clicáveis de uma determinada interface. Um processo de trabalho em cascata, onde cada entrega é validada com o cliente para que a etapa seguinte se inicie. Essa é uma forma segura de garantir que o visual designer só começará a trabalhar quando o wireframe tiver sido aprovado pelo cliente e pelo restante do time, evitando horas desperdiçadas em refação.

Acontece que no exemplo citado acima, o time acaba desenvolvendo 3 protótipos sequenciais. O wireframe nada mais é do que um protótipo, uma simulação de como a interface deve funcionar. O layout em jpg também é um protótipo, uma segunda simulação da mesma interface. E quando o UX utiliza uma ferramenta de criação de layouts clicáveis ou wireframes clicáveis, ele acaba criando um terceiro protótipo da mesma tela.

Daqui

Então Brad Frost foi lá e fez.

E usando uma metáfora bastante conhecida da gente: átomos, moléculas, organismos, templates e páginas.

Continuar lendo

Monday Readings

Monday Readings UX AI

Mais uma edição do Monday Readings: um copo de café + 30 minutos da manhã de segunda-feira + 5 links relacionados a design, tecnologia ou comportamento. Para começarem a semana inspirados :)

Monday, 17.03.13

#1

O Google+ não é para nós, é para o Google
O esforço do Google em atrair os usuários, integrando todos os serviços (Gmail, YouTube, Drive, etc), contatos e atualizações no perfil do Google+ dá a falsa sensação de ser uma rede social, mas na prática, ele acaba sendo mais útil para o próprio Google. Quando perguntado por que os desenvolvedores deveriam usar o serviço, David Glazer, diretor de engenharia do G+, admitiu que é uma maneira do Google conhecer os usuários, com quem eles tem relacionamento e compartilham conteúdos: “Essa camada, essa espinha dorsal, é feita para nos ajudar a fazer o Maps, Youtube, Gmail, etc melhor. Esse é o verdadeiro ponto do G+”

#2

As pessoas mais criativas em mobile
Das 100 pessoas mais criativas, segundo a FastCompany, algumas delas se destacam pelas experiências mobile que tem criado. Entre os listados estão a diretora do Facebook India e fundador do app NowThis News.

Continuar lendo

Como criar uma User Story?

Trello

“Felizmente, user stories são extremamente fáceis de criar depois que você fez o pensamento inicial por trás delas. Dependendo de como você pretende usá-las, tem três métodos diferentes que eu sugiro usar:

  1. Em cartões de papel – útil se você pretende organizar um workshop com outros membros do time ou se pretende agrupar as histórias.
  2. Em uma planilha de excel – útil se você tem um número muito grande de histórias, ou se você quer modificá-las com mais facilidade (por exemplo reorganizá-las por prioridade).
  3. Em uma ferramenta online – como o Trello, que permite criar e organizar suas user stories, para depois distribui-las entre seu time e seus clientes.

Dependendo do nível de detalhes das suas histórias, é interessante chamar um desenvolvedor ou um analista de negócios para te ajudar. Isso porque você pode precisar criar histórias para coisas como requisitos de sistema, que você pode não dominar completamente.”

Link do artigo completo: User Stores – The Beginner’s Guide >