Olá, Habr.

Nos últimos 3 meses, cerca de 40% do meu tempo de trabalho está se comunicando com designers. Obrigado, mas sem arrependimentos. Só brincando. Necessário. Designers.

Eles já me mostraram que o design não é sobre desenho, mas sobre design. E sobre o porquê disso, encontrei uma explicação acessível de Kostya Gorsky , ex-diretora de arte da Yandex. O vídeo está disponível aqui .

Ilustração por Tanya Zadorozhnyaya .

Alguns slides da apresentação são adaptados / recriados para melhorar a qualidade da imagem.

Design para gerentes

Olá a todos. Meu nome é Kostya, estou fazendo um pouco de design e vou falar um pouco sobre ele. Não vou ter uma palestra, vou contar 7 histórias. Eles não estão relacionados um com o outro.

Você não pode fazer uma apresentação sobre design sem Steve Jobs, então eu tive que colocar um slide:

eu costumava iniciar qualquer apresentação dizendo por que eu deveria pensar nisso, que o design é muito importante, certifique-se de fazer o design e tudo mais. Parece que é hora de parar de provar isso, acreditamos que todo mundo acredita em design como nós, para que possamos ir direto ao ponto.

Muitos de meus amigos pensam que o design é como na foto. Algo como " WOW " , BRILHANTE , EXTRAORDINÁRIO , algum tipo de talento, criatividade.

Todas as minhas histórias serão sobre o fato de que não é assim. Esta atividade é bastante simples, compreensível, absolutamente acessível a qualquer um de vocês.

Assim como quaisquer mitos e lendas desenvolvem o próprio design, muitas pessoas pensam que os designers são pessoas especialmente criativas, que é preciso ter talento, que não se pode aprender isso ou vice-versa, que é preciso aprender por anos e, de preferência, em algum lugar de Londres.

Claro que não. De fato, qualquer pessoa pode se tornar um designer, e parece-me que alguém deveria ser, em um grau ou outro.

Aqui estão as histórias sobre as quais falaremos:

Os dois primeiros são longos, o resto é mais curto. Eles não estão conectados, estão em ordem aleatória, têm cabeçalhos aleatórios.

1. O projeto possui um processo

Tudo começa com uma folha de papel branca. Suponha que você tenha uma tarefa, por exemplo, de criar a interface de um novo e-mail do futuro ou de um navegador do futuro. Eu tenho trabalhado em um navegador recentemente, então a maioria dos exemplos sobre mim será sobre mim. Como lidar com essa tarefa? Chegamos ao trabalho às 9 da manhã, colocamos uma folha branca à nossa frente em cima da mesa, sentamos e começamos a desenhar o navegador do futuro ...

Mas se você fizer isso, é claro que precisa de talento, e tudo o que estava nos primeiros slides não funcionará.

De fato, se você começa com um lençol branco, já está fazendo algo errado. O design é um processo muito simples que consiste em várias etapas.

O número exato deles é desenhado de maneira diferente em todos os lugares; existem 4-3 etapas ou 5-6, não importa. Tudo se resume a 5 etapas básicas e eles têm nomes diferentes. Isso não é importante. Eu escolhi médias.

Começa sempre com a pesquisa. Seu significado é simplesmente descobrir o máximo de informações sobre um objeto que já existe. O que quer que façamos, alguém antes de nós já fez algo semelhante. A humanidade sempre se comunica de alguma forma, se fizermos um novo serviço sobre comunicação ou correio, então podemos estudar como as pessoas se comunicavam antes, como se comunicam agora e o que as pessoas conseguiram descobrir sobre isso.

Em seguida, interpretamos o que coletamos. Ou seja, estamos simplesmente tentando obter algumas coisas interessantes de toda essa massa de dados, nos apegando a algo e definindo a tarefa com precisão.

Então geramos idéias. Este é todo um processo separado, durante o qual criamos muitas coisas.

Em seguida, desenvolvemos algumas idéias de que gostamos mais detalhadamente,
coletamos protótipos, testamos algumas, selecionamos e melhoramos no decorrer de um número infinito de iterações. Portanto, esse processo leva à solução do problema.

1. Pesquisa

Existem muitos, como eu disse, o significado disso é entender o que a humanidade conseguiu criar.

Na Rússia, por algum motivo, é costume pular esta etapa. Acredita-se que isso seja chato ou desnecessário e "... em geral, criaremos algo agora, já sabemos tudo".

No Ocidente, eles abordam isso formalmente o suficiente, e uma pessoa simplesmente não está autorizada a realizar a tarefa se não tiver apresentado anteriormente uma grande pilha de relatórios sobre o quanto analisou. De fato, quando você olha em volta, depois de fazer a pesquisa, geralmente os pensamentos realmente aparecem em sua mente, algumas idéias, sobre como resolver o problema ainda mais.

Deixe-me mostrar alguns exemplos de pesquisa no navegador. Agora você sabe algo sobre navegadores. Vamos ver o que acontece se examinarmos brevemente o histórico dos navegadores. Como o seu entendimento sobre esse assunto mudará e você desejará criar imediatamente algo sobre o navegador do futuro.

Por exemplo, os navegadores em massa começaram em 1993 com o navegador Mosaic.

Como você vê, já é semelhante ao que é agora: já possui botões voltar / avançar, possui um endereço de página e uma barra de endereços e um campo grande para exibir a página. 20 anos se passaram, os navegadores são os mesmos até hoje, exceto pelos detalhes.

Depois Opera em 1994.

Esta é a empresa que apresentou mais inovações em navegadores. É verdade que essas inovações geralmente desaparecem ou aparecem nos produtos dos concorrentes e depois se tornam populares.

Em 1994, eles tiveram a ideia de que era possível exibir várias páginas em uma janela ao mesmo tempo, semelhante à que era no ambiente de desenvolvimento para programadores.

Essa ideia não se enraizou, mas no futuro levou a abas. Ainda existem botões engraçados para criar essas janelas de maneiras diferentes.

Então, em 1995, houve o Netscape Navigator 2, que já é um navegador quase moderno.

Tem uma barra de ferramentas inteira com botões. O engraçado aqui é o ícone à direita. A animação estava girando aqui. Não sei se você lembra ou não, mas costumava ser que a página estava carregando por um longo tempo, você tinha que entreter a pessoa de alguma forma enquanto ela estava carregando.
Alguma animação curta foi mostrada nesta janela , sempre a mesma, naturalmente.

Em seguida, o Internet Explorer 3, no qual o CSS apareceu.

Seus visuais mudaram um pouco, por exemplo, os botões do Netscape eram convexos, mas aqui eles se transformaram em uma barra de ferramentas plana, na qual a textura já estava desenhada contra o fundo - estava na moda naquele momento. Aqui também há um ícone à direita, que girava animadamente enquanto a página estava sendo carregada.

Em seguida, o Internet Explorer 5, que pouco difere na aparência do anterior. Há mudanças tecnológicas, agora não é tão importante para nós (XMLHttpRequest → AJAX).

E bang, Opera 5 em 2000, em que três mega-inovações acontecem imediatamente.

Em primeiro lugar, um banner. Eles o colocaram diretamente no navegador, é claro, isso não criou raízes. Quase ninguém o viu em nosso país, porque todo mundo baixou imediatamente a versão pirata com o banner cortado. Mas usuários ocidentais honestos, se baixavam o Opera gratuitamente, assistiam a um banner que sempre mostrava anúncios e, se você pagava dinheiro, o banner desaparecia.

Abas também apareceram aqui. Eles estão lá embaixo. Os caras do Opera apenas observaram que no Windows há um painel na parte inferior, que mostra as janelas abertas no momento - a barra de tarefas. Eles pegaram todas as janelas relacionadas ao Opera, mostradas dentro de suas janelas, simplesmente as agruparam dessa maneira.

Essa coisa simples acabou sendo muito conveniente, os botões para alternar entre as janelas foram ligeiramente redesenhados, colocados por cima e, portanto, havia guias, sem as quais agora é difícil imaginar o navegador.

Outra mega coisa - aqui, pela primeira vez, um campo de pesquisa apareceu para pesquisar pelo Google sem acessar a página do Google e imediatamente a partir do navegador.

Em 2007, o Opera 9.2 já possuía um recurso chamado discagem rápida quando capturas de tela das páginas para as quais vou com mais freqüência aparecem na nova página da guia.

No caso deles, foi possível me configurar manualmente para várias dessas páginas, o que eu quero ver aqui, para que você possa acessar a página em alguns cliques sem inserir o endereço.

E o Chrome em 2008 fez a última revolução poderosa até hoje.

Se antes o número de barras de ferramentas estava se espalhando nos navegadores, havia uma barra Yandex, alguma outra barra, uma barra com marcadores, muitas barras diferentes, em geral, o navegador se tornava espesso.
O Chrome varre tudo com uma vassoura de ferro, cria uma interface minimalista muito fina, combina o endereço e a barra de pesquisa em um e o coloca no centro.

Qual será a próxima revolução interessante que descobriremos em breve. Aqui está um
estudo tão simples.

Depois de vermos as fotos do que era, entendemos melhor por que os navegadores são o que são e para onde tudo isso pode ir.

Pesquisa etnográfica

Pegamos uma pessoa, sentamos ao lado dela e apenas espiamos como ela funciona. Fizemos isso muito barato. Dentro da empresa, escrevi uma carta para a lista de discussão sobre questões não relacionadas ao trabalho, havia um texto como "se você não é programador, tem 5 minutos de tempo livre e não se importa de espiarmos você e depois escrever".

Algumas pessoas responderam, nos sentamos e vimos como eles usam navegadores. Programadores não podem ser considerados usuários normais. Eles têm hábitos, configurações completamente diferentes, podem ter um monte de plug-ins por lá, usam teclas de atalho e todo tipo de coisa que não é característica de uma pessoa comum. Portanto, este não é um público relevante para nós.

Nesta fase, espionando uma pessoa, tentamos entender algumas coisas interessantes que uma pessoa não nota para si mesma. Ninguém pode dizer o que ele precisa, mas podemos espiar.

Por exemplo, uma pessoa entra no facebook a cada cinco minutos e cada vez que realiza uma cadeia complexa de ações: clique no sinal de mais, clique no link de favoritos, abra a pasta de redes sociais, clique no link do facebook e o facebook será carregado. Seria possível para ele colocar esse link em algum lugar imediatamente no topo. Este é um exemplo exagerado, mas o ponto principal é que, enquanto olha para as pessoas, você pode ver alguns caminhos difíceis por eles percorridos e pensar em como corrigi-las mais tarde.

E mais sobre o estudo de concorrentes. Quando criamos os ícones, criamos uma matriz, colocamos todos os ícones nas barras de ferramentas dos navegadores e começamos a desenhar os nossos.

Aqui estão algumas das nossas tentativas de cima e de baixo. A final é a mais alta. Há detalhes engraçados que estudamos quando pensamos em como desenhar ícones.

Aqui está um exemplo de uma lupa. Todo mundo entende que uma lupa é um círculo e uma varinha. Mas, a propósito, é interessante que algumas novas gerações de crianças que nunca viram loops físicos pensem que este é um símbolo de busca - um círculo com uma varinha, e dificilmente imaginam que por trás disso, existe algum tipo de objeto mundo real.

Mas ainda estamos imaginando como desenhar uma lupa corretamente. Todo mundo tem um círculo no topo, mas para alguns a alça é virada para a esquerda, para alguns, para a direita. Como desenhamos? Sim, à direita, segure com a mão direita.

Sobre a opção, quando a varinha está à esquerda, há outra consideração interessante: no mundo do design, acredita-se que o canto superior direito seja a direção mais positiva. E a lupa que olha para o canto superior direito, é muito positiva, é muito melhor do que a lupa que é virada para a esquerda. Mas ainda escolhemos a lente de aumento que você segura com a mão direita.

Com os ícones "atualizar página", ficou mais fácil, em primeiro lugar, ver que para todos esse ícone é um anel aberto com uma seta, exceto o IE, que tem algo diferente lá.

A questão é: em que direção a flecha deve estar? No início, gostamos da opção quando ela olhou para o ângulo mais positivo, mas essa opção foi rapidamente rejeitada, porque se você imaginar esse ícone moldado em metal e colocado sobre a mesa, com um centro de gravidade tão grande, ele não poderá rolar desta situação, ela já está bem, pode até recorrer ao contrário.

Portanto, não fizemos isso, mas escolhemos uma que olha em uma direção positiva, para a direita, pode não estar muito em andamento, mas é fácil para ela virar. Basta empurrá-la um pouco, ela irá rolar imediatamente.

2. Interpretação

Quando a pesquisa é concluída, começamos a interpretar os resultados e estabelecer metas

Recontagem de histórias
Encomenda
Análise
Conclusões e Conclusões
Formulação do problema
Designação do quadro

Esta será uma história separada, então agora não vou parar por aí.

3. Formação de uma ideia

Mas a formação de uma ideia é uma coisa interessante.

Debate
Técnicas criativas
Melhoria

Vamos tentar um exercício. Agora você precisa pegar um pedaço de papel e torná-lo assim:

Você sabe como um garoto estilista difere de uma garota estilista? Se você executar uma tarefa um pouco diferente, não apenas desenhe círculos, mas peça apenas finamente, finamente, finamente para sombrear toda a folha A4, então as meninas podem fazer isso e os meninos não. Segundo estudos, a mulher média tolera o trabalho monótono melhor do que o homem médio.

Agora vou detectar um minuto e, durante esse período, você precisa tentar transformar o maior número possível de círculos em objetos diferentes, pintando algo simples neles.

Por exemplo, se desenharmos dois olhos e uma boca, obteremos uma carinha sorridente, se desenharmos um galho e uma folha, obteremos uma maçã, se desenharmos raios, obteremos o sol. Você pode usar mais de um círculo para um item, ou seja, faça uma coisa a partir de dois círculos, mas a tarefa é obter o maior número possível de objetos. Bastam alguns golpes, mas para que, sem a sua ajuda, eu entenda o que foi desenhado.

Um minuto é dado e ela foi: por

favor, deixe de lado as canetas. Quase todo mundo conseguiu desenhar 5 idéias e mais, mas mais de 9 opções atraíram apenas 3 pessoas da classe. Uau.

Poderia acontecer algo assim, certamente foi desenhado em mais de um minuto.

Como está o sentimento geral? O que você sentiu agora? Estresse? Data limite? É interessante que cada um de nós conheça dezenas de milhares de objetos redondos, para onde eles vão no momento em que você precisa desenhá-los? Temos muitos bloqueios e complexos mentais em mente que impedem que essas idéias sejam divulgadas quando necessárias.

Em primeiro lugar, a situação está me dando nos nervos, o tempo está se esgotando, a sensação de que não tenho tempo agora.

Em segundo lugar, as pessoas geralmente são tímidas. Quando entregam essa tarefa a crianças pequenas, elas têm muito mais ideias. Apesar de um diretor de arte experiente ter tempo para desenhar de 15 a 20 idéias, para um designer 10 ser um bom resultado, uma pessoa genial pode conseguir preencher todos os círculos, acho que essas pessoas existem.

Mas as crianças, especialmente se você levar crianças pequenas, com mais ou menos a idade de uma creche, quase todas as crianças preenchem todos os círculos. É claro que eles podem ficar presos ao fato de desenhar algo por um longo tempo, mas se a tarefa for ligeiramente modificada, por exemplo, você não precisa desenhar, mas simplesmente listar idéias, elas obterão um número muito grande de idéias. Com a idade, essa habilidade se perde; quanto mais velha a criança, mais difícil é para ela rapidamente ter essas idéias.

Devido ao grande número de complexos diferentes que temos, por exemplo, as pessoas ficam envergonhadas: "Droga, bem, parece que não sei desenhar, parece que um cachorro pode ser desenhado lá, mas não é bem redondo e não sou muito Eu posso desenhar cães, provavelmente não vale a pena, seria possível ter um boneco de neve, mas ele deveria ter canecas de tamanhos diferentes, estou sozinho aqui, bem, então eles não vão me entender ...

Em princípio, a humanidade apresentou várias maneiras de remover esses bloqueios, por exemplo, o uso de certas substâncias. Mas, é claro, esse método não pode ser aplicado industrialmente. Você pode se enfiar uma vez e inventar alguma coisa, e isso pode resultar em algum tipo de estupidez, não no fato de que o pensamento irá aonde deveria. Todas as pessoas que tentavam brincar com isso de alguma forma seriamente seriamente terminavam mal.

A maioria dos métodos para gerar idéias e técnicas criativas se baseia na remoção de blocos que interferem. Por exemplo, a coisa mais simples é excluir críticas.

Todas as sessões de brainstorming são baseadas no princípio de que não temos o direito de discutir e criticar idéias. Exatamente para que ninguém se envergonhasse, ninguém tivesse medo, e qualquer uma das idéias mais estúpidas pudesse ser adicionada à lista geral, e isso levaria alguém a outro pensamento, a idéia começou a se apegar uns aos outros e um grande número apareceu. E então você pode sentar e discutir tudo separadamente.

Você pode fazer isso mesmo dentro de si mesmo, quando sozinho decide conscientemente que agora simplesmente oferece qualquer bobagem, e então separadamente se senta para descobrir o que é bobagem e o que não é bobagem. Não vou insistir nisso por muito tempo, há um grande número de livros diferentes, artigos sobre o tópico de métodos criativos e, com certeza, muitos de vocês sabem, eu só queria mostrar o princípio geral.

4. Experiência

Depois que geramos muitas e diferentes idéias e escolhemos ideias sólidas, com as quais podemos ir além, começa a fase de experimentos e prototipagem.

Prototipagem
Prototipagem
Avaliação
Testes de usabilidade

Toda a prototipagem é mostrada graficamente aqui. O significado dessa imagem: criamos algo, desenhamos e jogamos fora. Toda a prototipagem se resume a isso.

Criamos um grupo de prototipagem em um navegador de vários programadores que fizeram protótipos rápidos. Eu disse a eles qual seria o trabalho deles e devo dizer que nem todas as pessoas concordaram com isso. Eu disse que tudo que você fizer será jogado fora, 100% do seu trabalho irá para a cesta. Nem todas as pessoas estão prontas para aceitar isso.

Por um lado, parece ruim, por outro lado, é claro que isso é prototipagem. Assim como ao projetar um edifício, a princípio o arquiteto cola seu layout de papelão, esse é exatamente um layout de papelão. Ou, quando um carro é criado, eles fazem um modelo em uma escala de um a um de plasticina, sopram em um túnel de vento e, em seguida, o modelo de plasticina não entra em produção. Aqui está a mesma história.

Mas as pessoas estão no topo da onda, em termos de novidade, e podem experimentar coisas loucas. 90% dessas coisas não levam a nada, porque vamos tentar e dizer: besteira / não funciona / não gosta, mas 10% podem ver através de alguns projetos reais.

É imperativo que tudo isso seja feito muito rapidamente. A criação de protótipos é inútil se a criação de um layout demorar muito tempo. Você precisa fazer o mais barato e da maneira mais simples possível. Por ser descartado, não faz sentido colocar muito esforço, energia e atenção.

Exemplo. Protótipos são diferentes. Você pode apenas fazer um protótipo de papel. Quando criamos o navegador, em algum momento decidimos sua aparência. Uma imagem foi desenhada no Photoshop, que mostra aproximadamente a aparência do navegador e, em seguida, determinamos, entre outras coisas, a forma das guias e estudamos cuidadosamente as nuances, como a sombra das sombras. Aqui é desenhado que a aba que é mais alta lança uma sombra sobre a que é mais baixa, mas como tudo isso será vida? O que acontecerá quando você mudar? Como serão projetadas suas sombras? Decidimos tentar fazer um protótipo mínimo para sentir de alguma forma.

Eu desenhei uma segunda imagem no Photoshop, na qual a guia vizinha foi aberta, e uma terceira imagem, na qual a terceira guia foi aberta. Apenas três fotos, se você as reunir em uma apresentação, poderá clicar entre elas, já veremos o que acontece ao alternar as guias, como fica a aparência de uma pessoa. Alguma sensação de vida já aparece.

Mas a coisa mais interessante aconteceu a seguir. Em qualquer programa para trabalhar com uma apresentação, você pode colocar links. Você pode colocar um retângulo transparente na guia e colocar um link para o próximo slide, e então eu posso mover o mouse para a imagem e alternar a guia.

Isso é uma coisa simples, produz um efeito completamente mágico. Parece que isso não vai muito além de apenas três fotos, mas o efeito é 10.000.000 vezes maior. Acabei de abordar os programadores, coloquei um laptop na mesa com esta apresentação, mostrei como ele muda e eles perguntaram: "Uau, ele está programado no Firefox ou no Chrome?" Nunca lhes ocorreu que isso era apenas uma imagem.

Em geral, o significado do protótipo é criar sensações de algum tipo fraudulento, geralmente barato e simples, de maneira muito rápida e tentar interagir com elas. Além disso, de maneira evolutiva, o protótipo é concluído. Naturalmente, no começo é muito difícil e áspero, gradualmente vemos que não gostamos do que gostamos. O que gostamos é bombeado, o que não gostamos é polido, e ele chega ao produto real.

Qualquer que seja o problema que resolvemos, temos um processo simples que nos permite chegar a uma boa solução. E como você pode ver, esse processo é bastante formal, você pode segui-lo sem nenhuma inspiração, não precisa esperar por um impulso criativo, apenas sente-se, faça-o e tudo ficará bem, tudo é muito simples.

2. Quando o design terminar

Está intimamente ligado à primeira história, e também é traçado algum processo nela. Houve algum tipo de processo de trabalho de designer.

Todos nós fizemos o que acontecerá a seguir com as idéias e imagens que desenhamos? É interessante que novos inimigos apareçam.

De repente, surge um gerente de projeto, que diz: "É claro que isso é legal, mas, na verdade, não, não faremos isso". Ou os programadores vêm e dizem: "É ótimo, mas levaremos 10 anos para programar isso, então vamos simplificar um pouco". Um grande número de inimigos ataca o designer.

Sim, ainda é interessante que os designers sejam inimigos um do outro. Isso é uma coisa separada que eu quero explorar, mas se você tirar uma foto, mostrar ao designer e se oferecer para redesenhar, ele primeiro repreende tudo o que foi desenhado, depois desenha algo novo e, se pegarmos o próximo designer, ele também repreende o que os anteriores pintaram desenhará de uma nova maneira, e esse é sempre o caso. Parece-me até que, se o designer não repreendeu o anterior, algo está errado com ele e é melhor não mexer com ele.

O que fazer nessa situação? Um designer experiente aprende a entrar no mundo exterior. Eu realmente gosto de como esta imagem antiga ilustra essa idéia:

Havia um mundo aconchegante e legal em que era quente, bom, você podia desenhar, inventar, ninguém se incomodava, e então você invadiu esse mundo estranho com outras pessoas que não querem fazer nada assim, mas você também pode concordar com elas, nós tudo em uma empresa, não competimos entre si, queremos criar um produto e, portanto, precisamos concordar. Acontece que não é tão assustador, e tudo acaba.

Agora, o designer já está analisando o ciclo de vida de todo o produto. Eu sempre estava me perguntando onde é o local do design, em que ponto o design deve começar, o que deve terminar.

A princípio, parecia que o design era sobre design. Todos os freelancers trabalham nesse modelo. O gerente redigiu a declaração de trabalho, entregou ao designer, desenhou os layouts, entregou-os e, em seguida, os desenvolvedores pegaram esses layouts, e o produto foi entregue. Em princípio, é possível existir dessa maneira, mas geralmente nada de bom acontece.

Se você conectar o designer mais cedo, a situação será melhor. Agora, desde o início, ele participa da invenção, depois da realização de pesquisas, da escrita desse mesmo TK. Acontece muito melhor, a pessoa já está lá, entende todos os detalhes, está envolvida, inventa alguma coisa.

Além disso, se depois que a imagem é desenhada, o designer não é excluído do projeto, mas continua a funcionar, fica ainda melhor, porque quando os desenvolvedores começam a perceber as fotos, acontece que muito de tudo foi esquecido e não levado em consideração; caso contrário, os desenvolvedores precisamos descobrir como a página deve se comportar, o que deve acontecer e essas são decisões de design.

Acontece que o processo está espalhado por uma fina camada. Isso não quer dizer que o design é um estágio, o design é apenas um estado, é um papel que faz parte de uma equipe que está presente desde o início do projeto até o fim.

Mais usuários, mais precisamente pessoas. Nós nos proibimos de usar a palavra "usuário" porque é um pouco depreciativa ou algo assim. Se uma pessoa usa a palavra juzvere, ela não deve ter permissão para projetar interfaces.

As pessoas que vivem de verdade começam a usar o produto. Acontece que tudo o que você inventou não é exatamente o que pretendíamos, que as pessoas não veem isso, não gostam do que queríamos e, em geral, tudo está errado.

Aí vem novamente o momento em que você precisa sair do seu aconchegante mundo fechado para o mundo exterior e começar a conversar com essas pessoas, descobrir com elas, ler o que elas escrevem em suporte, se comunicar em blogs e fóruns, assistir o que as pessoas escrevem sobre o produto .

Há dois momentos em que o designer explode o próximo grande de um mundo pequeno. Eu queria pensar, mas e se algum outro mundo? Ainda mais em que você pode avançar depois que acabou por estar nisso.

Eu acho que sim. Você pode ver como esse produto geralmente afeta a sociedade, a história do desenvolvimento de tecnologia, outros produtos e tudo ao seu redor.

Eu me pergunto o que vem a seguir? Existe algum outro mundo externo? Não sei como pensar sobre isso. E é isso que acontece se os designers simplesmente desenham um ícone, então você precisa entender que esse ícone, não apenas algum tipo de ícone no vácuo, faz parte da interface, e essa interface faz parte do produto, pessoas reais usam o produto para resolver alguns de seus problemas reais. tarefas, e tudo isso acontece na vida real e de alguma forma afeta.

Foi quando o designer pensou sobre isso com todo mundo, você pode voltar e desenhar um ícone e tudo ficará bem

3. Medo, conteúdo e forma

Eu peguei essa história da palestra de John Maeda sobre o TED e recomendo fortemente que você olhe para essa palestra, é mega legal . Em geral, existem várias palestras, você pode ver tudo.

Vou mostrar um conto que se encaixa muito bem no que estamos falando.

Pegue a palavra "medo", por exemplo, e veja como sua percepção muda, dependendo da forma em que colocamos esse conteúdo.

A palavra medo está escrita em sutís helvéticas. Medo? Não parece muito assustador, uma palavra tão pequena.

Você pode usar uma fonte ultrafina e agora não é nada assustadora. Algo como algum tipo de mosquito, pode ser um pouco desagradável, mas definitivamente não é assustador.

E se? Bem, definitivamente pior do que os anteriores. pelo menos aqui você está esperando alguma coisa.

Mas assim?

Isso não é assustador, é ridículo, é algum tipo de pirata, talvez um circo, mas não o medo no sentido direto. Este é um medo "engraçado", ou performance teatral.

E então esta é uma boate:

Talvez vamos sair com medo? Lugar elegante.

E aqui parece uma revista:

Pode-se ver que as letras estão muito cheias, sentimos diretamente como estão apertando-as, como querem lidar com elas, se arrastam para longe, mas estão espremidas, e isso nos deixa um pouco assustados.

E pode ser um restaurante muito caro, onde você precisa reservar uma mesa em duas semanas para obter:

O significado é completamente alterado, apesar do fato de a palavra ser a mesma. Dependendo da forma e da forma como mostramos, o significado é completamente diferente.

Vamos mudar um pouco as letras, temos outra palavra, agora essa palavra é livre - liberdade. E, novamente, o significado da mensagem que o slide transmite muda completamente, dependendo da fonte a ser usada.

Por exemplo, aqui está esta poderosa declaração gorda “Viva, liberdade”, o lançamento de todos ou alguns associados a “Livre! Freebie! Vamos! Mega ação, tudo está à venda. ”

Aqui está apenas um estilo diferente da mesma fonte e aqui está um efeito completamente diferente. Isso é espaço livre, é fácil respirar um pouco de ar:

Você pode aprimorar esse efeito espalhando as letras:

Agora, em geral, tudo está cheio de ar, as cartas praticamente decolam, parece-nos que essa é uma peça tão mega-mega-livre.

Dependendo de como alteramos a forma, nossa percepção muda e o design sempre consiste em conteúdo sobre o qual havia histórias anteriores, mas ainda existe uma forma, e isso também é parte integrante do design.

Geralmente trabalhamos no conteúdo como uma equipe inteira; juntos, todos criam o que o produto faz e, em seguida, o formulário já é o domínio do designer.

Os designers conhecem segredos diferentes, e um bom designer sabe como usar os meios de expressividade que ele tem para transmitir a mensagem certa, transmitir a cor certa, para o conteúdo que temos.

4. é lindo

Todas as conversas sobre lindamente feias, no final, se resumem ao conceito de "gosto". Esta é uma definição da grande enciclopédia soviética:

Gosto estético - a capacidade de uma pessoa de distinguir, entender e apreciar o belo e o feio nos fenômenos da realidade e nas obras de arte.

Os designers podem dizer sobre uma pessoa que ele tem um gosto ou não, ou que ele tem um gosto ruim ou bom. Mas poucos podem dizer o que fazer se o sabor é ruim? Por exemplo, como educá-lo? De onde vem o bom gosto? De onde vem o mal?

Há uma resposta geral de que o gosto foi adquirido há muito tempo, se você observar muitas coisas boas. Quanto mais uma pessoa assiste ao trabalho, que é considerado um modelo de bom gosto universalmente reconhecido, mais seu gosto se forma nele, com o tempo ele aprende a distinguir melhor o belo do feio. Se essa habilidade não for suficiente ou não houver tempo, as pessoas recorrem a diferentes regras e leis. Não posso dizer que é bom, vou falar mais sobre as regras.

O gosto é frequentemente associado ao tato e ao desejo de dizer muito ou pouco. Nas figuras abaixo, dois notebooks de dois sistemas operacionais diferentes.

A imagem acima mostra que os designers do bloco de notas tentaram muito, há reflexos, gradientes, luz de fundo azul neon, nitidamente destacados sob o título da janela para que possam ser vistos com clareza. Muito trabalho foi feito.

No mesmo tipo de hack. Apenas um quadrado branco. Onde está o design?

Quando você olha para um notebook simplesmente como um slide de apresentação - essa é uma história, quando você começa a trabalhar com uma interface o tempo todo, então muito brilho é bastante cansativo. Pode ser interessante olhar para eles uma vez, mas quando você os encontra todos os dias, 8 horas por dia, em algum momento você está inclinado a acreditar que um simples bloco de notas pode desempenhar melhor sua função. Isso se deve em parte ao fato de que no Mac o menu é "pregado" na parte superior da janela. Um momento complicado que facilita a vida dos designers de aplicativos para mac.

Mais sobre beleza. Eu tenho uma pergunta para você agora. Aqui está um retângulo, você acha bonito?

Para a maioria das pessoas, esse retângulo parece bonito porque tem proporções. Nesse caso, nem importa quais, pode ser a proporção áurea, número Pi, número Fibonacci ou apenas uma proporção de números inteiros.

É importante que, quando apenas olhamos para a foto, não a notemos, mas subconscientemente nosso cérebro sente que há algo que não existe apenas, que não é um retângulo aleatório:

Você pode até testar, desenhar 100 retângulos diferentes e entrevistar milhares de pessoas, mas não precisamos nos preocupar com isso agora, é apenas um dos exemplos que os designers usam para criar algo mais bonito do ponto de vista das pessoas.

O próximo truque. Pegue esse retângulo e multiplique-o pelo plano da folha. Nós temos uma grade.

A grade pode ser usada para organizar objetos em um plano. Combinamos várias células e as preenchemos com conteúdo.

Por exemplo, podemos colocar a linha superior de células no cabeçalho, preencher o texto em 9 células, colocar uma foto em quatro células:

Cada um desses blocos agora herda a proporção que o módulo original tinha, ou seja, a fotografia agora também tem as proporções que o retângulo original tinha.

A grade é um elemento secreto, não está mais no layout final e a composição é harmoniosa e bonita, as pessoas aplaudem o designer e se perguntam como isso aconteceu com tanta facilidade.

Na mesma grade, organizamos os objetos de maneira diferente; novamente, simplesmente colocamos o conteúdo nas células, ocultamos a grade, obtemos uma bela composição:

Designers conhecem diferentes regras desse tipo. Os designers iniciantes lutam por essas regras, argumentam, cumprem-nas, expõem colegas que não seguem as regras.

Os designers experientes quebram as regras famosamente e obtêm resultados ainda melhores do que observá-las, porque entendem bem de onde vêm essas regras e, nesse caso, uma violação pode levar a algum benefício.

Não vou entrar nisso agora, mas estou lhe dizendo para que você entenda que há coisas que devem ser deixadas para o designer, pelas quais ele é responsável e ele pode fazê-lo bem.

5. Como definir uma tarefa para um designer

Vou mostrar como definir a tarefa usando o exemplo da página de autorização. Essa foi a página de autorização no correio Yandex há algum tempo, agora não é mais assim. Percebemos que 80% das pessoas que a procuram aparentemente não têm e-mail e saem desta página sem fazer nada. Foi incrível e estranho, por que eles foram lá incompreensivelmente e quem são essas pessoas?

Mas uma vez que eles estivessem lá, seria legal atraí-los para que eles recebessem nossos e-mails. Agora, existe apenas um pequeno link azul para isso, e decidimos fazer algo para obter mais mensagens.

Como definir uma tarefa para o designer neste caso? Como você definiria a tarefa? Tornar o link dolorosamente atraente?

Aqui estão as perguntas que você precisa responder ao definir a tarefa:

Por que precisamos deste projeto
Como entendemos que o objetivo é alcançado
,

Primeiro de tudo, você precisa responder à pergunta "por que estamos fazendo isso?" Não apenas devemos entender isso, é importante transmitir ao designer. O designer, como membro pleno da equipe, deve entender completamente todas as premissas iniciais.

Portanto, a opção de "criar um botão verde" como uma tarefa para o designer não é legal, porque o botão já é uma solução. Qual é a tarefa? Aumentar o número de registros no correio.

====================================
Por que precisamos deste projeto?

Descobrimos que nesta página 80% dos visitantes não têm correio no Yandex, mas, por algum motivo, chegaram a ele. Não conhecemos essas pessoas de forma alguma. Portanto, queremos tornar possível tornar o correio mais visível.

A página de login agora está um pouco antiga. Não mudou desde o início de 2000.

====================================
Como podemos entender que o objetivo é alcançado?

Vamos medir o número de registros. Esperamos que a alteração da página de autorização leve a um aumento no número de registros de novos usuários. Vamos considerar essa quantidade.

Gostaremos da nova página.
Vamos colocar um experimento.
Caras sabem.

====================================
O que resta fazer?

Vamos redesenhar a página atual do zero. Precisamos de um novo design e um novo layout.

Coloque um grande botão verde.
Refaça tudo.
=======================================

Em relação à página re-página. Se você de alguma forma destacar esse elemento, nada de bom resultará dele, porque o elemento preenche o formulário de registro no correio. Se você colocar um botão visível aqui, as pessoas matarão a senha de login clicando nela. Nada de bom vai acontecer.

Talvez não seja necessário que o designer diga que tudo precisa ser refeito. Podemos dizer que queremos aumentar o número de registros e convidá-lo a decidir se mudaremos a página atual ou desenharemos algo completamente novo.

Não sei por que me apeguei à nova página. Você pode simplesmente sugerir que a tarefa não se limitará à alteração de um elemento, pois isso pode interromper o comportamento atual. Portanto, é preciso repensar radicalmente esse elemento ou geralmente repensar tudo.

A questão importante é: "Vamos quebrar o comportamento atual?" Ele também precisa ser levado em consideração, e o comportamento atual é que muitas pessoas usam este formulário para entrar no correio, como foi originalmente planejado. Esta parte deve ser cuidadosamente preservada, é impossível remover esse formulário com um clique ou reduzi-lo, deve ser perceptível, mas ao mesmo tempo deve haver um elemento que atraia a atenção, o que incentivaria as pessoas a começarem a enviar e-mails.

"Por que fazer isso?" Porque um grande número de pessoas acessa a página e não leva a lugar algum. Essas perguntas são especialmente relevantes para os gerentes da Yandex.

Quase sempre, se houver alguma melhoria em sua mente, pode ser que a equipe de serviço já tenha pensado nisso. Foi uma descoberta para mim, mas é verdade.

Se você tem alguma idéia, por exemplo, sobre correio Yandex, com uma probabilidade de 99%, os caras do correio já estão cientes, mesmo que não tenham sido informados sobre isso. Só porque eles pensam nisso continuamente, monitoram um grande número de fontes diferentes, e talvez a sua ideia esteja no trabalho deles. Ou talvez eles possam explicar razoavelmente por que isso não é legal, talvez eles já tenham tentado fazer isso, e aconteceu que algo estava errado. E talvez eles não tivessem tempo, não puderam ou esqueceram, então isso precisa ser levantado e feito.

Iremos pular perguntas esclarecedoras da lista agora.

Quando o designer recebeu uma tarefa tão detalhada, ele decidiu criar um grande botão verde, mas em algum outro lugar da página. Aqui está o que ele fez:

Estávamos prontos para fazer as pazes. O designer disse esperar, não há design suficiente, é melhor fazer isso:

Achamos que, por um lado, tudo é igual, nos mesmos lugares o botão verde é grande, por outro lado, está de alguma forma recebendo mail.ru, e não no Yandex. No Yandex - esta é uma fonte preta sobre fundo branco.

O designer diz que você está cansado, não posso desenhar páginas brancas com letras pretas a vida toda, quero beleza. Argumentamos, discutimos, decidimos que deveríamos tentar executar as duas opções.
Ok, se você não encontrar a verdade em uma disputa, vamos testar as duas opções. Para uma pessoa que visita a página, durante as duas semanas do experimento, uma página branca ou azul é mostrada aleatoriamente com uma probabilidade de 50%. Páginas penduradas com balcões. Analisamos cuidadosamente o que acontecerá na conversão de todas as pessoas que entrarem nas páginas.

Qual página você acha que ganhou? Cerca de 40% para o branco, cerca de 40% para o azul, o restante acredita que não há diferença.

De fato, não há diferença. Ambas as páginas funcionaram da mesma forma, com precisão e precisão. Parece que o grande botão verde superou o resto.

Até hoje, as duas páginas estão ativas, há uma pequena lâmpada que, no canto, se você clicar nela, a página muda, um hack tão secreto.

6. O que fazer com o prazo

Uma história muito curta. Está tudo bem, mas precisamos ter tempo para fazer o design em um determinado período, nem sempre podemos dar ao luxo de trabalhar sem parar. Um relógio como uma espada de Dâmocles sempre paira sobre nós, e não está claro como ser.

Minha resposta geral é esta: de fato, o prazo não existe. Mais precisamente, todo o processo de trabalho pode ser empurrado para a quantidade de tempo que é. De fato, o problema é resolvido imediatamente quando temos apenas uma idéia geral para uma solução. Dependendo de quanto tempo temos, apenas aumentamos os detalhes.

Por exemplo, se tivermos um mês, podemos passar a primeira semana em pesquisa, na próxima semana em dois dias para fazer uma declaração exata do problema, e passar mais três dias, digamos, em brainstorming e outros métodos para gerar muitas e diferentes soluções. Ainda teremos duas semanas
para fazer alguns protótipos, testá-los e escolher algo bom.

Se não temos um mês, temos apenas uma semana, então, na segunda-feira, realizamos todos os tipos de estudos que podem ser feitos na segunda-feira, na terça-feira formulamos a tarefa, após o almoço, realizamos uma série de sessões de brainstorming, na quarta-feira fazemos um protótipo, na quinta-feira testamos, refazer na sexta-feira e ainda temos uma solução pronta para a semana.

Quanto mais tempo, melhor o resultado, mas você pode chegar a algum resultado quando quase não há tempo.

Exemplo do YouTube:
a decisão de design chave mais importante que garantiu o sucesso do serviço, sabia? O bloco de vídeos relacionados, no qual você pode assistir outros vídeos relacionados a este. Este bloco que fornece aderência.

(esta é uma versão muito antiga)

Você assiste a algum tipo de vídeo, depois assiste o próximo, depois o próximo, e já está amanhecendo do lado de fora da janela. O YouTube te chupou.

De fato, todo o design do youtube se resume ao fato de que precisamos mostrar vídeos relacionados ao que estamos assistindo, todo o resto é secundário.

Eles fizeram um redesenho. Como vemos, as principais coisas ocupam um lugar ainda mais importante aqui. O vídeo ficou ainda maior, o bloco com dicas foi aumentado ainda mais, mas eles são a essência da solução.

Em princípio, se surgirmos com isso e o desenharmos simplesmente no papel ou no quadro-negro, e não houver absolutamente tempo, você poderá entregá-lo imediatamente ao desenvolvedor, o resultado será algum tipo de opção de trabalho. Se você tiver tempo, pode desenhar botões bonitos.

7. Open

Eu acredito que o design é um processo aberto. O designer deve mostrar os resultados de seu trabalho em todas as etapas, até mesmo alguns rascunhos, para o maior número possível de pessoas e envolver um grande número de pessoas no processo.

Voltando a esse ciclo aqui, em cada estágio é útil a participação de diferentes pessoas.

Quando fizemos a pesquisa, muitas vezes convidávamos gerentes e desenvolvedores a participar: se vamos estudar a história do navegador, quem se importa - siga em frente, faça o download de versões antigas, instale, experimente e extraia capturas de tela. As pessoas estão interessadas em conversar, todos se lembram de suas histórias sobre navegadores antigos.

O brainstorming é geralmente o solo mais favorável. para chamar o maior número possível de participantes diferentes no processo, não apenas designers, não apenas gerentes, mas geralmente todos que podem lançar suas idéias no cofrinho comum.

Você pode mostrar a toda a empresa o que acontece. Este é um efeito interessante: as pessoas realmente olham. Geralmente, postamos alguns layouts iniciais em blogs internos no Yandex. As pessoas assistem, as pessoas começam a fazer perguntas, discutir.

Existem vários pontos positivos. Em primeiro lugar, todo mundo está prestes a entender o que está sendo feito. Isso é muito importante para a equipe de serviço, porque quando você descreve em palavras, imagina tudo um pouco diferente, quando vê maquetes ou até rascunhos, todos de repente começam a entender no que está sendo trabalhado. É igualmente importante para equipes adjacentes ou apenas para espectadores e observadores externos.

Obviamente, esse é um grande fluxo de críticas, os desenvolvedores percebem que algo não pode ser feito, alguém se apega a algumas coisas, as pessoas encontram significados nos quais não conseguimos pensar, e esse é o primeiro teste.

Como o designer organizou todo esse processo de comunicação, ele, a seu critério, pode ignorar alguns comentários e levar alguns para trabalhar.

Ainda há um grande número de pessoas com a psicologia "elas não me pediram", elas aparecem nesta fase, o que é muito bom, porque se você não perguntar a essas pessoas imediatamente, elas se aproximam mais do lançamento do serviço e interferem. E assim eles terão tempo para falar, teremos tempo para discutir com eles, podemos ignorar o que eles pediram, mas então, eles já se sentem como alguns participantes do processo e se acalmam. É importante.

Obviamente, para que o designer organize esse processo de comunicação, é preciso ter um certo vigor moral, pois as pessoas na Internet, tendo visto o suficiente de como discutir o design, começam a discuti-lo da maneira que o viam.

A propósito, isso é uma citação real. Gastei muito tempo para encontrar uma cotação que pudesse ser inserida em uma apresentação que seria real.

Um designer experiente entende que não há muito sentido por trás de tal frase. Você pode perguntar a uma pessoa, descobrir o que exatamente ela não gosta. Muitas vezes, não é isso que ele diz no começo.

Se você precisar transmitir ao designer que algo está errado com o design, tentarei explicar com o exemplo desse layout.

Digamos que o designer diga: acho que o e-mail deve ser assim.

Você pode ter queda de cabelo devido ao horror / o que é pintado lá, mas precisa se conter e contar a ele da seguinte maneira. Primeiro liste os fatos que você está observando. Você pode descrevê-lo como se estivesse dizendo isso para uma pessoa de outra sala que não vê a foto.

Por exemplo, há um fundo rosa, as letras são mal lidas. Então, se desejar, adicione os sentimentos que você tem ao listar esses fatos, por exemplo, acho difícil acreditar que muitos gostem do fundo rosa. E então começar a discutir esses fatos.

Você não pode dizer ao designer "bem, você é um otário" ou qualquer outra "porcaria completa / ninguém gosta" e outras expressões sem sentido.

Vimos sete histórias curtas sobre coisas relacionadas ao design que parecem importantes para mim.

Uma citação que conclui esta apresentação:

A simplicidade é uma condição necessária para o belo. L.N. Tolstoi

Não decida para o designer a tarefa do designer