Como agir como designer: trabalhando com desenvolvedores

1. Introdução: Olá, sou o Vincent. Sou designer e desenvolvedor. Como designer, eu entendo a frustração que surge em alguns projetos de web design, onde talvez você recupere seu design do seu desenvolvedor e parece ruim. Mas como desenvolvedor, posso entender a frustração de expectativas não comunicadas ou impossível de cumprir prazos. A boa notícia é que ambos são problemas solucionáveis. Ao nos comunicarmos de forma mais eficaz, podemos colaborar de forma mais eficaz. Nós nos tornamos colaboradores e não adversários, e isso é o que às vezes se sente. Esta aula é para você se você é um designer que está assumindo seus primeiros projetos de web design e você está curioso sobre como o processo moderno funciona. Ou se você é um designer que nunca trabalhou com um desenvolvedor e você não sabe por onde começar, talvez você tenha um pouco de medo de perguntar. Mas também é para você se você é um web designer, você está insatisfeito com a forma como seus projetos foram no passado. Para o nosso projeto de classe, vamos pegar um projeto existente e transformá-lo em um sistema de design dividindo-o em componentes. No processo, você aprenderá algumas novas maneiras de pensar sobre design e aprenderá algumas novas maneiras de se comunicar com seu desenvolvedor também. Em última análise, você terá algumas ferramentas para colaborar melhor, e parecerá um pouco menos como se você estivesse falando duas línguas diferentes. Estou animada para começar. Vamos lá. 2. Qual aconteceu o jeito que fazemos as coisas agora?: O que há de errado com a forma como fazemos as coisas agora? Se você está nesta indústria por um tempo, você sabe, relações de designer e desenvolvedor podem se deteriorar com o tempo. Por exemplo, diga-me se já se sentiu assim. Talvez você envie seu designer, seu design para seu desenvolvedor, e você recuperá-lo e é como completamente errado e você é como se meu design fosse ótimo até o desenvolvedor chegar a ele. Ou talvez digam que poderiam construí-lo em três semanas e já se passaram seis, tipo, qual é o negócio? Por que não conseguem acertar o posicionamento? Este é um problema com todos os desenvolvedores, como todos esses problemas continuam chegando. O que mantém, por que eles não podem simplesmente ficar em branco? Estas são todas questões de comunicação. Como exemplo, pense no seu restaurante favorito. A maioria dos restaurantes são divididos na frente da casa e na parte de trás da casa, a frente da casa é a garçonete, anfitriã, etc parte de trás da casa é o pessoal da cozinha. Agora em um restaurante ruim. Essas duas partes da casa não se comunicam, e como resultado você tem garçons grosseiros. Você não quer enviar seu hambúrguer de volta porque ele pode voltar com algo extra nele, mas em um bom restaurante em seu restaurante favorito, essas duas metades na casa se comunicam livremente. Eles podem até saber algo sobre o trabalho um do outro como talvez o pessoal da cozinha às vezes traz uma refeição para um cliente, ou a garçonete monta uma salada. Mesmo que pareçam que deveriam estar falando duas línguas diferentes, eles se comunicam e colaboram de forma eficaz. Como podemos fazer mais do que isso na indústria de design e desenvolvimento? Bem, primeiro vamos dar uma olhada em como ele se quebra. Vamos ver isso na próxima lição. 3. Como parece o processo típico de web design para web agora?: Como é o processo típico de web design? Ok. Hora da história. Digamos que você é um designer freelance, se você ainda não é, e você acabou de conseguir um novo cliente, vamos começar a partir daí. O que isso parece? Devo notar que isso se aplica com a maior precisão às equipas ou agências internas. Também se aplica ao desenvolvimento de aplicativos. Eu só falo sobre desenvolvimento web porque isso é o que eu sei, mas este é provavelmente um processo semelhante ao longo de todo. Foram semanas de reuniões. Você concordou na direção. Você está animado para começar, o cliente está animado para começar, e você está tipo, vamos indo. Você trabalha sozinho por um tempo. Você desenha sua página inicial, suas páginas internas, etc Você as envia para o cliente. O cliente finalmente aprova. Foram quatro meses de revisões e finalmente você está lá. Está quase na hora do lançamento e você tem um prazo de seis meses para este projeto, então você tem dois meses restantes. Você está quase lá. Você envia para o desenvolvedor e o desenvolvedor diz: “Não posso fazer isso em dois meses.” Pior ainda, dizem : “Não posso fazer isso em quatro meses. Preciso de pelo menos mais seis meses para construir isso como foi projetado.” Que notícia terrível. Você não pode voltar para o cliente com isso. O que você faz? Você diz, “Tudo bem, desenvolvedor, apenas tente o seu melhor e nós revisitaremos em algumas semanas.” Eles começam, e enviam seus protótipos, e adivinha? É uma lixeira em chamas. Há manchetes no lugar errado, coisas na cor errada, nada funciona corretamente. É tudo buggy. É como, o que eles fizeram esse tempo todo? Eles nem se importam? O que dá? Há mais um mês no processo e o cliente percebe de repente que esqueceu a página super importante. Precisa estar lá para um lançamento. Você projetou furiosamente uma nova página, e você envia isso para o seu desenvolvedor, mesmo que seja provavelmente um pouco áspero em torno das bordas. O desenvolvedor desenvolve-o furiosamente e ele volta, e novamente, é tudo de buggy, está tudo errado. Qual é o negócio deles? Finalmente, é a semana de lançamento, os sites de buggy, ninguém está feliz, está estressado todas as noites, o cliente não está feliz, e o site está atrasado. Este é um cenário exagerado, mas talvez pareça um pouco familiar para você. Talvez você tenha passado por algo semelhante. Onde é que este processo corre mal? Bem, eu diria, bem aqui, no início. O que poderíamos ter feito de forma diferente no início para começar a resolver esses problemas? 4. Envolva os desenvolvedores: Espero que você não tenha experimentado um projeto como o que acabamos de falar na última lição. Mas é provável que tenha soado um pouco familiar. Realmente por que não deveria? Quero dizer, esse é um processo bastante comum. Você desenha, você envia para o desenvolvedor, eles desenvolvem e você continua chutando de volta para eles até que eles acertem e, eventualmente, eles o iniciam. O que há de errado com isso? Bem, o problema é que um bom design leva muito tempo, leva um tempo. Ao encravar o desenvolvimento no último minuto possível assim, os desenvolvedores acabam correndo e fazendo trabalho de má qualidade. Outro problema com isso é que os desenvolvedores não têm contextos, como por que estou construindo o que estou construindo? Quando essa decisão foi tomada e por quê? No projeto de exemplo, o designer foi embora por meses. O problema com isso é que quanto mais tempo você gasta projetando sem qualquer entrada do desenvolvedor, mais longe seu design tende a se afastar da realidade. Porque isso pode acontecer meses depois você projetou algo que nem é possível implementar no tempo que você reservou para o projeto. Talvez você esteja pensando, que tal design por comitê? Corro o risco de arruinar meus projetos deixando um desenvolvedor entrar no processo. O design mudará. Mas isso não é uma coisa ruim. Por exemplo, um desenvolvedor pode ajudá-lo a entender o que é possível implementar no tempo e no orçamento alocados. Eles também podem encontrar outros problemas, como problemas de acessibilidade em um design. Talvez seu design seja bonito, mas não leva em conta os usuários de baixa visão e um desenvolvedor pode ajudar a identificar isso. Eles podem até conhecer algumas novas tecnologias ou técnicas que podem melhorar o design. Estas são todas mudanças, mas são todas boas mudanças. É importante que eles sejam descobertos antes que você passe quatro a seis meses apenas tornando-o pixel design perfeito. Como envolvemos desenvolvedores cedo? Vamos falar sobre isso na próxima lição. 5. Como eu me programando envolto: Como faço para envolver os desenvolvedores, cedo? O que isso significa? Quando devo envolvê-los? Bem, quando você tem um novo projeto, qual é a primeira coisa que você faz? Você tem uma reunião inicial? Você tem uma reunião com o cliente, para descobrir exatamente o que eles precisam. Algum tipo de reunião? Realmente, a qualquer momento muito cedo no processo, é um bom momento para envolver desenvolvedores. Quanto mais cedo melhor. Muitas equipes envolveram desenvolvedores, aqui, quando eles realmente deveriam estar envolvidos, aqui, muito cedo. Isso significa que nenhum grande design revela, especialmente não para o desenvolvedor. Por exemplo, para muitas pessoas, o processo de design, começa com uma reunião como esta, onde talvez o entregável seja um fluxograma. Você está tentando mapear, como o cliente do site, vai do ponto A ao ponto B. É onde o desenvolvedor deve estar envolvido. Muitas agências de design, pensam que isso, se parece com isso, mas deve realmente parecer com isso, onde qualquer um que está tocando o projeto está incluído lá no início, no processo. Você o faz esboçar em um quadro branco, se é isso que é preciso. Em seguida, durante todo o processo, mantenha-os envolvidos. Fazer muitas perguntas. Resistir à tentação de ir, e projetar sozinho por meses e meses. Se você não tem certeza do que eles precisam, ou se você não tem certeza do que é tecnicamente possível, pergunte mesmo se isso significa que você está enviando projetos inacabados ou ativos brutos, como wire-frames. Isso está tudo bem. Qualquer informação pode nos ajudar. Agora, em última análise, seus processos são com você. Eu não vou te dizer como trabalhar, mas, se você pode envolver seus desenvolvedores mais cedo, faça isso. O resultado é, o desenvolvedor está envolvido no sucesso do projeto. A relação, é mais colaborativa, mais interativa, menos adversária e, finalmente, leva a usuários mais felizes e clientes mais felizes, o que é importante. 6. Melhorar o processo de handoff do design: A segunda coisa que podemos fazer para melhorar nossas relações com nossos desenvolvedores e nossas colaborações é melhorar nosso processo de entrega de design. Agora, a entrega de design é o processo que você usa para levar seus projetos para seus desenvolvedores para que eles possam começar a fazer seu trabalho, e isso é um problema difícil. Na verdade, você vai se lembrar que é onde o processo da perspectiva do designer em nosso projeto imaginário, que é onde parecia dar errado. O desenvolvedor discordou sobre o escopo. Eles não conseguiram fazê-lo a tempo e quando eles fizeram foi buggy e ruim. Parecia que não se importavam. Mas como nosso processo de design pode tornar isso melhor? Bem, eu acho que para entender isso é útil pensar sobre o que um desenvolvedor realmente precisa de um design. O que passa pela cabeça deles quando recebem um design de um designer e começam a se desenvolver? Para te dar uma ideia clara disso, vamos ver um arquivo de design que acabei de receber. Digamos que eu seja o desenvolvedor desse projeto imaginário terrível e veja meu processo de pensamento lá. Quando eu recebo um design, uma das primeiras coisas que eu começo a construir é o que eu penso como o quadro do site. Estamos falando de qualquer coisa que aparece em todas as páginas, como seu cabeçalho, seu rodapé aqui embaixo, e qualquer outra coisa que possa aparecer em todos os lugares do site. Então eu vou me mudar para outras seções principais como esta imagem de herói aqui. Qualquer chamada de marketing comum, coisas assim, e eu vou ficar cada vez mais granular ao longo do tempo ao ponto eu estar construindo qualquer pequeno módulo individual como este. Meu objetivo é, o mais fielmente possível, recriar esse design, mas fazê-lo em código. Às vezes, o arquivo de design, como você verá, torna essa tarefa difícil ou mesmo em alguns casos, impossível. Em um processo mais colaborativo eu teria estado lá para todas as reuniões de design que levaram a este design final aqui que eu acabei de receber. Mas digamos que, por uma questão de argumento, eu não tenho contexto, acabei de receber esse design do designer com a expectativa de que em algumas semanas eles tenham um site de trabalho. Vamos falar sobre algumas das coisas sobre este design que tornam isso difícil e, por sua vez, você aprenderá algumas das coisas que seus desenvolvedores precisarão de você quando receberem um arquivo de design [inaudível] você. Logo após isso, uma das primeiras coisas que eu olho é a estrutura de camadas. Você pode ver em nosso painel de camadas, há alguns nomes de camada que são úteis como eu tenho um logotipo aqui. Além disso, cada grupo de camada única está aberto, o que é realmente agravante para trabalhar com. Mas nós temos alguns nomes de camadas aqui, mas as camadas principais, os grupos, são todos número um, número dois. Você tem uma aparência aleatória, deixe-me encontrar um exemplo, formas aqui. Não sei qual é a forma dois, forma quatro, a forma três. Que diabos é tudo isso? As camadas são muito desorganizadas, o que torna este um arquivo muito lento e difícil para mim trabalhar com apenas para a direita fora do [inaudível]. Eu tenho que ir manualmente e selecionar coisas e mexer em torno até eu obter a parte certa. A segunda coisa que eu noto aqui é que na navegação lá. 7. Introdução sistemas de design: Você pode estar acostumado a pensar em seu web design como páginas e layouts. Talvez seja isso que você está acostumado a entregar para o seu desenvolvedor, você está acostumado a enviar-lhes um grande PSD cheio de desenhos de páginas inteiras. Mas se você pensar sobre isso, você realmente não está projetando uma página inteira, está? Você está projetando um sistema, um sistema pelo qual outras pessoas criam páginas. Talvez seu desenvolvedor crie essas páginas. É um sistema que é composto por componentes modulares e reutilizáveis. Estamos falando de manchetes, vídeos e controles deslizantes e qualquer outra coisa que deve ser reutilizada no site e no design. Pense em termos de LEGO, não layout. Então você ainda tem que fazer seus layouts de página inteira, mas uma vez lá, uma vez que você está feliz com eles, talvez você comece a dividir as coisas em componentes pequenos e reutilizáveis. Você também pode pensar em termos de diretrizes para seu uso. Por exemplo, quantos pixels vão entre este módulo e este módulo, este componente e este componente. Pode este componente aparecer ao lado deste outro componente, coisas assim. Agora, isso não é para ser uma classe de sistemas de design. Há classes muito melhores para isso, algumas das quais temos aqui no Skillshare. Então eu vou ligar a alguns deles. É só para você pensar em quebrar seus projetos e podemos falar sobre o “porquê” no próximo vídeo. 8. Mas, mas, mas...: Ao pensar em sistemas de design, você pode ter algumas objeções em mente. Talvez você esteja pensando, que tal layout e composição? Se eu dividir meu design em partes e peças individuais que um desenvolvedor pode montar de qualquer maneira, isso não vai arruinar meu design? Bem, antes de tudo, pensamos assim mesmo quando estamos nos desenvolvendo. Quando eu tenho um novo projeto, uma das primeiras coisas que eu faço é começar a dividir as coisas em pequenos pedaços reutilizáveis para que eu possa construir as coisas mais tarde na estrada. Funciona assim de qualquer maneira, quer o design seja ou não responsável por isso. Mas, em segundo lugar, você ainda pode projetar no navegador. Pense no navegador como outra ferramenta de design. Só porque o design não está acontecendo no Photoshop, Sketch, ou seja qual for a sua ferramenta, não significa que não esteja acontecendo. Você ainda pode projetar diretamente. Você ainda pode nos dizer desenvolvedores como montar as coisas para que ele fique ótimo. Você também pode estar pensando, componentes não me limitam, quão criativo e bonito meus projetos podem ser? Bem, não. Esses componentes, lembre-se, podem ser colocados juntos. Juntos como tijolos de Lego. Vejam este elefante. É um elefante gigante feito de pequenos pedaços de Lego. Seus componentes não o limitam. Além disso, é importante notar que seus próprios componentes podem ser mais elaborados. Você não está limitado em termos de design. Você também pode estar pensando, mas isso não faz sentido para meus clientes. Como se existissem pequenas empresas e não tivessem orçamento para algo assim. Eu argumentaria que o sistema de design não precisa ser super grande, detalhado e elaborado. Na verdade, mesmo um simples pode entregar muito valor. Por exemplo, se você dividiu seu design em partes individuais, você pode entregar uma nova página rapidamente. Isso teria ajudado muito em nosso projeto de exemplo, onde o cliente tinha aquela solicitação de última hora para uma página, e o desenvolvedor não poderia entregá-la a tempo. Se ele pudesse apenas ter entrado em seu caixote de pequenos pedaços e peças para juntá-la, o designer nem teria que saltar para a ferramenta de design. Os sistemas de design permitem uma entrega suave para os desenvolvedores. Eles não têm que adivinhar tanto. Uma vez que o sistema é projetado, você pode montar novos recursos e novas páginas sem muito incômodo. Em última análise, é menos frustração para todos os envolvidos no processo. 9. Exemplo do sistema de design: Vamos revisitar aquele PSD de mais cedo. Aquele que o designer centrou o desenvolvedor e nós passamos por isso e todas as perguntas que eles tinham. Lembre-se de todas essas perguntas. Vejamos o que esse processo poderia parecer se o designer tivesse projetado com componentes em mente. O que parece ter um arquivo de design que leva componentes e sistemas de design em consideração como parte do processo de design Vamos olhar para este arquivo. Este é um kit de interface de um designer chamado Meagan Fishers, ela é uma web designer. Isso está no Adobe XD. Se você não está familiarizado, é o programa de design de interface do usuário da Adobe. É excelente se você não estiver familiarizado com ele, vá em frente e baixe-o. É grátis, é muito bom. Eles têm muitos kits de amostras. Chamam-lhes kits de interface do usuário, mas é a mesma coisa que um sistema de design. Aqui mesmo sob o arquivo, Obter kits de interface do usuário. Você pode obter o que eu estou trabalhando aqui sob mais kits de interface do usuário. Vamos olhar para isso e ver o que torna isso diferente do PSD. À primeira vista, isso parece muito parecido. Há uma seção de marketing aqui. Mais seções de marketing. Elementos básicos do site como seu nervo, seu logotipo e, eventualmente, seu rodapé. Eu tenho um bom ponto de partida aqui. Mas o que torna isso diferente do PSD? Logo de cara, se diminuirmos um pouco, você pode ver como ela tem essas configurações de papelão. Você tem a principal página de marketing com todas as informações de marketing. Então ela leva você com quadros de arte através de um fluxo de inscrição. Você pode ver todas as etapas do processo de inscrição para esta aplicação imaginária que ela projetou. Em seguida, você tem suas telas de painel; Dashboard 1, Dashboard 2, Dashboard 3, etc todo o caminho até o serviço de reservas. Todas essas coisas já me dão um contexto mais amplo de como todas essas coisas se encaixam. Você vai notar que não há estados Hover ou algo assim. Onde está o sistema de design, onde estão os componentes? Se reduzirmos um pouco mais, você pode ver que temos várias placas de arte aqui para considerar. Agora, vamos ampliar este aqui. Ela chama isso de kit de interface aqui, mas é um sistema de design. Você pode usar essas palavras de forma intercambiável. Agora, já temos exemplos de estilos tipográficos de linha de base. Temos o nosso cabeçalho é 1-4. Parece que temos algum corpo de texto e rótulos de formulário e outros elementos menores. Se você ampliar um pouco mais, você pode ver que ela tem estilos de fonte e nomes de fontes e exatamente onde eles são usados. Manchete e textos corporais. São coisas descritivas que nos dizem quando usar o quê. Também temos amostras de cores, cada uma com o número hexadecimal da cor. O próximo quadro de arte é chamado de Chamadas para Ação e Ícones. Já você tem uma idéia do que cada um desses elementos deve ser usado. Ela está usando os nomes dos quadros de arte, como você pode ver, nomes de camadas no Photoshop. Eles são um pouco mais úteis porque dentro deste quadro de arte, você pode ver com base nessas manchetes, qual é a intenção de cada um deles. Esta é uma chamada à ação no escuro ou no marketing chamada to action. Podemos voltar ao nosso quadro de arte de marketing aqui. Você pode ver que temos, chamada de marketing para ação no escuro e, em seguida, no marketing call to action on light. Correspondem perfeitamente com o que ela desenhou. Ela também tem estados Hover. Você pode ver o estado Hover ilustrado com o pequeno ícone do mouse. Em seguida, você verá um produto CTA principal. O que é o produto primário? Vamos diminuir o zoom. Isso corresponde ao produto real que o usuário usará. Você pode ver o botão correspondente aqui, Reserve um serviço. Isso já me dá muitas informações apenas baseado em como ela nomeou coisas sobre quais situações exigem o uso de quais desses botões. Além disso, ela incluiu estados Hover, o que é ótimo. Temos os estilos alternativos na luz e então ele ou ela incluiu um estilo deficiente. Esse é um estado de que não falamos quando estávamos olhando para o PSD mais cedo. Estilos desativados acontecem se você não quiser que o usuário possa clicar em um botão em uma determinada circunstância. Talvez eles tenham inserido informações inválidas e você não queira que elas avancem até que elas as tenham corrigido. O estado de deficientes precisa de um design. Também temos um estilo CTA secundário aqui com o pequeno ícone à esquerda. Você vê isso repetido aqui. Aqui temos ícones, que todos eles são coletados aqui em um só lugar, o que é incrível. Eu não posso dizer quantos arquivos de design eu tenho onde os ativos estavam espalhados pelo disco rígido dos designers. Eu tive que ir atrás deles e descobrir exatamente quais os bens que eu precisava. Também não só o que eu precisava, mas as colheitas que eu precisava. Às vezes, o recurso não estava preparado no PSD de uma forma que eu poderia usar no site. Estes estão todos prontos para ir, prontos para exportar aqui. Que estamos falando de ativos, vamos diminuir o zoom e olhar para isso. Ela tem todas as imagens dela aqui. Tudo pronto cortado e pronto para ir. Estes são todos os lados, parece que todas as imagens da barra lateral. Posso ver exatamente onde cada um é usado e quando. Já é simples para mim exportar e soltá-lo no meu código. Torna o meu trabalho muito, muito mais fácil. Se olharmos para o próximo quadro de arte, temos campos de formulário. Parece que todos os principais elementos de forma são contabilizados por isso. Temos nossas entradas de texto aqui. Se aumentarmos o zoom, você pode ver que temos colocado um texto de espaço reservado de amostra. Temos o estado ativo onde o texto do espaço reservado desaparece. Temos um ativo com o usuário ter colocado em texto e, em seguida, temos um estado de erro, o que é incrível. É ótimo ter tudo isso aqui pronto para eu começar a transformar isso em código. Ela também projetou algumas alternâncias personalizadas e elementos de seleção múltipla. Estes são elementos de forma mais especializados que você verá. Se você clicar em um outro desativará e se você clicar no outro, o anterior será desativado. Temos todos os nossos estados Hover, todos os nossos estados ativos presentes e contabilizados. Então, seguindo em frente, temos “drop-downs”. Qual é a aparência quando a lista suspensa é fechada? O que parece quando está aberto? O que parece quando um dos elementos da lista suspensa é é pairado sobre. Então, qual é a aparência da lista suspensa selecionada? Esse é outro estado do qual não falamos uma vez que o elemento está em seu estado final. O que é que isso parece? Eu tenho alguns mais personalizado selecionar aqui com algumas imagens e algum texto opcional aqui Então temos caixas de seleção, que novamente temos um estado de erro áreas de texto. Esse é um que muitas vezes fica sem estilo. Estes pequenos componentes de serviço que descrevem um serviço e talvez estes são estados diferentes. Parece que ela esqueceu de atualizar a etiqueta aqui, mas tudo bem. Eu geralmente posso ter uma idéia do que ela pretende aqui a partir do design e de vê-lo fora de contexto. Como o que parece por si só? Mas também no contexto do design acabado. A próxima coisa que podemos olhar são os nossos elementos da barra lateral. Você pode se lembrar da barra lateral que está sendo usada. Aqui temos não apenas uma barra lateral, mas também uma segunda barra lateral que acontece mais tarde à medida que o usuário vai mais fundo no aplicativo. Temos exemplos de como eles se parecem, como cada elemento se parece em Hover, e quando você clicou nele, mesmo aqui, e então há outra pequena barra de progresso aqui que ela foi projetada. Cada estado obtém seu próprio design para que não haja dúvida sobre o que ele se parece. Quando estes são iniciados, o que parece quando eles terminaram? Está tudo bem aí. Temos todos os estados com essa barra lateral preenchida para nós. Agora temos componentes de marketing novamente, com base no nome do quadro de arte. Posso adivinhar que isso só é usado na seção de marketing do site, então temos essa chamada à ação com a navegação no topo, outra chamada à ação e apenas mais componentes. Uma coisa a prestar atenção aqui é como, se voltarmos para a esquerda, começamos com algo simples como tipografia, cores, botões e seus estados. Nós ficamos cada vez mais complexos gradualmente à medida que vamos para a direita, e você pode ver que, no momento em que chegamos aos componentes de serviço, estamos falando de elementos do site que são bastante complicados, feitos de elementos menores de etapas anteriores. Você pode ver um exemplo de nossos botões de serviço aqui, um pequeno componente de mapa aqui com todos os nossos ícones. Estes são todos exemplos de componentes que foram extraídos e são repetíveis. Em seguida, você pode vê-los mais tarde usados no aplicativo real, no contexto do aplicativo onde o usuário vai passar para reservar um serviço para o seu padrão. Talvez isso pareça complicado e é apenas um monte de trabalho, e é. Mas quais são as vantagens? Por que faria assim? Bem, em primeiro lugar, há poucas perguntas enquanto eu estou trabalhando sobre onde as coisas vão e o que elas fazem. Então, mesmo que talvez algo não seja contabilizado, como um estado de flutuação de um determinado elemento, baseado em todas essas informações adicionais, eu posso fazer um palpite mais preciso se for preciso. Reduz significativamente para frente e para trás e para trás, e quaisquer lacunas que este arquivo de design deixa em meu conhecimento, podem ser preenchidas pela comunicação. Posso fazer perguntas, mas menos, então é menos agravante para você e leva menos tempo para nós dois. O arquivo parece estar faltando estilos móveis, mas tudo bem. Vamos supor que eu fui incluído aqui no processo de design até este ponto, e nós decidimos mutuamente que o cliente não precisa de estilos móveis. Talvez o cliente explicitamente não queira estilos móveis e porque seus clientes não o usam. Isso está tudo bem. Mas se descobrisse que o designer tinha esquecido completamente celular e há uma confusão para fazê-lo, não há muitas coisas aqui que eu não consigo descobrir sozinho. Há certas partes dele que eu definitivamente teria perguntas sobre o que eles podem parecer no celular. Como se este fosse um elemento bastante amplo. O que é que isso parece? Como é que isso avaria? O que isso parece no celular? Isso pode ser difícil para mim adivinhar. Mas, na maior parte, já que estamos trabalhando com componentes, posso basicamente descobrir como isso será no celular e posso ajudar o designer e suavizar o processo para eles. Tudo o que eles precisam fazer é me fornecer básico e certos elementos que simplesmente não são responsáveis por isso. Então, quais são algumas vantagens do Adobe XD ou algo parecido, como o Sketch sobre algo como o Photoshop? Bem, se você trabalha com o Photoshop há algum tempo e é aí que você está confortável, tudo bem. Mas essas ferramentas oferecem algumas vantagens bastante significativas. Por exemplo, quando estamos falando de componentes, vamos dar uma olhada em um exemplo. Digamos que o cliente decida essa cor aqui, que podemos ver em uso no site de marketing. Isso é bem aqui, eu acho. Digamos que eles decidam que é muito grande e que precisamos mudar isso. Bem, vamos abrir a barra lateral, porque o XD já tem o conceito de componentes embutidos, podemos mudar isso uma vez. Digamos que queremos reduzir esse chamado e queremos tornar isso mais estreito também. Agora esta é obviamente uma mudança feia, mas desde que mudamos uma vez lá, a mudança se propaga para qualquer outro componente que é baseado no qual é mais próximo de como as coisas funcionam quando estamos escrevendo código. Você muda as coisas uma vez e ele se repete em todos os outros lugares. Outro exemplo. Digamos que o cliente diz que só preciso que todas essas imagens sejam redondas. Normalmente, no Photoshop você teria que sair, ok, eu tenho que mudar tudo isso individualmente e leva uma eternidade, e então se o cliente quer que ele mude novamente, então você tem que mudar tudo novamente. Demora um tempo. Mas aqui você muda qualquer um deles porque eles são todos relacionados, porque eles são todos baseados um no outro, todos eles mudam ao mesmo tempo, o que torna as coisas muito mais fáceis para você. Outra coisa interessante que o XD faz por nós é, digamos que o cliente decidiu que queria celular. Normalmente, no Photoshop você teria que entrar e posicionar manualmente todas essas coisas como você teria que descobrir que este pássaro vai para baixo aqui e, em seguida, qual a ordem que essas coisas invadem? Porque eles vão se mover em uma ordem específica na web. Você tem que descobrir tudo isso em seu arquivo e fazê-lo um por um, mas o XD nos permite, se você pegar essa alça, ele sabe que esses são elementos individuais lá, e você pode ver que ele os divide em sua próprias colunas. Então temos uma versão móvel deste módulo que requer muito pouco trabalho extra de nossa parte. Você pode se lembrar quando eu estava olhando para o PSD que eu tive que puxar para fora a pequena ferramenta de medição, eu por hábito usei a ferramenta de captura de tela no Mac, e eu uso isso para medir pixels entre elementos. Mas no XD e em outras ferramentas como o Sketch e outra chamada Figma, você pode pressionar a tecla Alt e mostrará a distância até a borda do quadro de arte de tudo o que o mouse está sobre. Se você segurar a tecla Alt, se você tem um elemento selecionado, então você segura a tecla Alt e move o mouse sobre qualquer que seja o próximo elemento que você está medindo a distância, você pode ver que ele me diz exatamente a distância do pixel a partir do próximo elemento. Isto é 32 pixels. Esta coluna tem 32 pixels de largura, e esta calha aqui tem 34 pixels de largura, o que é realmente conveniente para mim. Quando estou trabalhando, não tenho que voltar e perguntar várias vezes. Eu não tenho que abrir minha ferramenta de medição repetidamente. Eu só pressiono Alt e eu posso ver bem ali qual é a distância exata. Vou abordar brevemente os recursos de prototipagem do XD, e existem outras ferramentas lá fora que fazem isso. Mas se eu pressionar o botão play aqui, eu recebo uma visualização do aplicativo. Você pode realmente vincular os quadros de arte juntos de tal forma que quando você bate play, você obtém um protótipo do site e ele é realmente interactable. Você pode usar isso para criar marcações bem detalhadas, incluindo animações e coisas assim. Então é rolável. Eu posso interagir com ele de uma forma que eu possa interagir com um site real. Veja o que acontece quando eu clico aqui. Sim, isso me leva para a próxima página desse fluxo. Então você pode fazer isso indo para a guia protótipo, e você pode realmente criar links entre quadros de arte e também entre elementos de quadros de arte, componentes individuais nas placas de arte para que quando você aperta o botão de reprodução, você pode clicar nessa coisa e ele leva você para a próxima tela, então nós podemos ligar. Se quiséssemos ir para um mais completo, podemos ligar isso para lá e vamos ver o que acontece quando eu apertar play e clique nisso e isso me leva para a próxima tela. Então você tem uma idéia aqui de que isso é realmente mais propósitos construídos para a web e para interfaces de uma maneira que o Photoshop simplesmente não consegue acompanhá-lo. Só não faz a maioria das coisas. Isso torna seu trabalho mais fácil como designer, mas também como desenvolvedor, torna meu trabalho muito mais fácil. Há muito menos escavação e muito menos frustração com o uso desses programas em comparação com algo como Photoshop. Para o seu projeto de classe, eu gostaria que você projetasse um sistema. Então pegue um design antigo ou comece de novo e divida-o em componentes. Seu sistema de design deve incluir um guia de estilo para tipografia. Então títulos níveis de um a três, parágrafo, estilos de lista, ambos são ordenados e não ordenados. Elementos de formulário como botões e entradas de texto, e links. Inclua estados também como Hover e onclick nos estados para os botões e links. Inclua algumas amostras de cores, algumas guias de cores para que o desenvolvedor saiba o que usar. Inclua pelo menos três exemplos de componentes distintos. Isso pode parecer muito, mas temos uma lista para você nos recursos da classe, então você não está voando às cegas. Quando terminar, por favor, compartilhe. Eu adoraria ver o que você vem acima com e se você tiver alguma dúvida, não hesite em perguntar. Tenho certeza que eu ou outras pessoas da comunidade de compartilhamento de habilidades podem ajudá-lo. 10. Dicas de sistema de design: Aqui estão algumas dicas para criar seus primeiros sistemas de design. Uma das primeiras coisas que você pode fazer é evitar fazer mudanças arbitrárias. Então, por exemplo, se você ver que uma manchete e você realmente gostaria que fosse maiúsculas pequenas, ficaria muito melhor. É importante perguntar a si mesmo, esse estilo é reutilizável? Se eu mudar isso, todas as outras manchetes devem mudar? Além disso, como isso afeta os elementos ao seu redor? Eles terão que mudar porque se este design mudar? estou dizendo para não fazer a coisa pequenas tampas, basta considerar todo o sistema antes de fazê-lo. Outra coisa que você pode fazer para tornar a vida do seu desenvolvedor mais fácil é ser o mais detalhado possível. Inclua itens como valores de cor hexadecimal para seu esquema de cores, distâncias de pixels entre elementos, coisas assim. Como exemplo, aqui está uma captura de tela do Polaris. É o sistema de design da Shopify. Você pode ver não só eles incluem as cores principais da marca, eles também incluem vários tons das cores, bem como, tudo em hexadecimal. Eles incluem algumas informações detalhadas de espaçamento, mas não apenas o próprio espaço, como escolher espaçamento, seu guia de estilo ensina. Se você ainda não pensou em detalhes como esses, seu desenvolvedor terá uma tonelada de perguntas. Vai deixar as coisas um pouco irritantes para você, ou pior do que isso, eles vão começar a se projetar e todos nós sabemos como isso pode acabar. Eles também podem adivinhar errado e dar a impressão de que eles não se importam com o seu design e eles não se importam se ele parece ruim. Então seja detalhado. Se você não sabe do que eles precisam, então pergunte. Outra coisa que você pode fazer é apenas explorar além do photoshop. Photoshop é uma ferramenta antiga e faz muito disso do que estamos falando, muito difícil e lento. Ele realmente não foi construído para projetar interfaces, mas existem ferramentas construídas para fins que foram, por exemplo, um dos mais populares é chamado esboço. Ele é usado em todo o setor, mas a Adobe tem uma ferramenta gratuita chamada XD. Ele vai recurso para recurso com esboçado realmente bom. Figma é outro que é excelente. Todas as três ferramentas valem a pena tentar, vale a pena dar o seu tempo se você tiver. Aqui está um exemplo do que pode parecer um XD. Este é novamente Meghan Fishers design. Você pode ver aqui o que ela inclui em seu arquivo XD. Ferramentas Handoff também são super úteis. Há outra ferramenta construída para fins específicos que estão lá apenas para a entrega do desenvolvedor do designer. XD tem esse recurso integrado, você pode clicar em compartilhar e compartilhar seu design com seu desenvolvedor, mas também há algumas outras ferramentas criadas para isso. O mais popular é chamado Zeplin. É incrível. Se você carregar arquivo de design muito bem estruturado, ele realmente pode escrever código para o seu desenvolvedor e obter algumas das tarefas de trabalho ocupadas irritantes fora do caminho para eles, o que é incrível. Avocode é outro que faz algo semelhante. Em última análise, essas ferramentas de design tornam a colaboração melhor. Eles facilitam o design, facilitam a construção. As ferramentas de entrega facilitarão a sua vida e a vida do seu desenvolvedor. Novamente, isso só leva a relacionamentos mais colaborativos, menos adversários, o que é ótimo. Por isso, experimente as novas ferramentas e, se ainda não o fez, tenho a certeza que o seu programador irá agradecer-lhe por isso. 11. Crie confiança com seus Devs: O último e provavelmente o maior problema que esse processo de design imaginário teve foi a relação adversária entre o designer e o desenvolvedor. Você deve se lembrar do designer dizendo: “ Por que eles não conseguem acertar isso? Este é um problema difícil de resolver, mas também é muito importante. Como começamos? Uma das primeiras coisas que nós designers podemos fazer é assumir uma intenção positiva. Eu sei o quão frustrante pode ser trabalhar tanto em um projeto, enviá-lo para o desenvolvedor, e ele volta e é tudo viciado e confuso. Muito disso pode ser ajudado pelas coisas que falamos anteriormente, os exercícios colaborativos e design e sistema. Mas ainda assim, invariavelmente, haverá inconsistências, haverá insetos, não há como contornar isso. Mantenha a cabeça fria, evite culpar. Há qualquer coisa que possa ter feito o projeto voltar de uma forma inesperada. Não o menos importante é, às vezes, como desenvolvedor, é tudo o que posso fazer para fazer a coisa funcionar. Claro, parte do design vai estragar tudo. É claro que as coisas vão passar pelas rachaduras. A questão é que ninguém quer fazer coisas feias. É um trabalho difícil e muitas vezes estressante. Assumir intenção positiva e ser paciente. Se o desenvolvedor tiver perguntas, responda prontamente e se você tiver perguntas, pergunte por favor. Outra coisa que você pode fazer é abandonar o controle. Tenho um segredo para ti. É algo que nem todos os designers querem ouvir, mas seu design está terminado no navegador. Não está terminado no Photoshop, não está terminado no esboço. Nós, desenvolvedores, estamos tomando decisões de design o tempo todo. Não pode ser ajudado. Há sempre algo que o design não conta e temos que tomar uma decisão. Você pode pensar assim. Se você contratar um arquiteto e um construtor para construir sua casa, não importa quão detalhado esse arquiteto estava em seus projetos, os construtores vão ter que mudar o design mesmo que seja apenas um pouco, eles fazem isso para explicar ou terreno inesperado ou qualquer outra coisa, apenas é impossível para o arquiteto responder por tudo, e tudo bem. Outra coisa a ter em mente é que os dispositivos têm limitações. Você pode ver sites em relógios e refrigeradores agora, telas estreitas, widescreen, computadores lentos, rápidas e lentas, conexões rápidas. Há um número infinito de variáveis que podem afetar o produto final, e o desenvolvedor muitas vezes tem tomar decisões de design para acomodar aqueles e isso é realmente uma coisa boa, porque essas são decisões de design que você não precisa fazer. Se tomarem a decisão errada, tudo bem. É só hora de repetir. Torná-lo melhor. Fazer muitas perguntas. Se você vir algo estranho ou se você não tem certeza onde a coisa vai ser usada. Se você não tiver certeza se você está projetando algo possível, faça perguntas com antecedência. Mas trabalhando de forma colaborativa e iterativa assim, podemos fazer coisas que funcionem para a maioria das pessoas na maior parte do tempo. Lamento dizê-lo. Mas não vai parecer ótimo para 100 por cento das pessoas, cem por cento do tempo, então você tem que renunciar um pouco desse controle. A terceira coisa que você pode fazer é aprender um pouco sobre o que nós, desenvolvedores, fazemos. Não te vou dizer para aprenderes a programar, é a tua vida. Faça o que quiser. Mas eu vou dizer, é muito útil. Pode tornar as coisas mais fáceis. Vai ajudá-lo a tomar decisões de design mais informadas. Por exemplo, e você não vai mais se sentir como você e seu desenvolvedor falando dois idiomas diferentes. Não estou dizendo que você teria que ser um desenvolvedor profissional. Só pode ser útil começar com alguns HTML e CSS como alguns conceitos básicos. Skillshare é um ótimo recurso para isso. Pense em código é apenas mais uma ferramenta de design e seu cinto de utilidade. Essas são algumas boas maneiras de começar a confiar um pouco mais no seu desenvolvedor. 12. Como juntar tudo: Certo, vamos dar outra olhada no processo de design que passamos mais cedo, aquele projeto muito ruim. Como isso poderia parecer com essas novas técnicas e idéias no lugar? Bem, novamente, você é um designer freelance, acabou de conseguir um novo cliente. Você está tendo sua reunião inicial, mas porque os desenvolvedores na sala, enquanto você está falando através dela, eles percebem que trabalharam em um projeto muito semelhante no passado, e eles oferecem uma sugestão de como isso pode funcionar. O cliente adora, então é aí que você começa. Vocês dois começam a prototipar ideias e eventualmente, depois de prototipar e jogar fora ideias e manter as boas, você pousa em uma direção realmente sólida e começa a projetar. Finalmente está na hora das composições de alta fidelidade. Você fala com os desenvolvedores sobre o que eles podem precisar, para que você está projetando? Quais dispositivos são seus dispositivos de destino, e você trabalhou juntos uma vez que as composições são feitas para dividi-los em outros componentes. Com os componentes e os guias de estilo, seu desenvolvedor pode se desenvolver mais rapidamente do que poderia ter de outra forma. O cliente pode de repente ter uma página super importante mais uma vez, mas o desenvolvedor pode simplesmente construí-la, porque eles têm esta caixa de peças de Lego para desenhar. Você nem precisa abrir sua ferramenta de design. Ninguém tinha que ficar acordado até tarde antes do lançamento e o lançamento acontecer a tempo. Talvez você detecte alguns bugs, mas tudo bem porque seu processo é iterativo e você pode tirá-los rapidamente do caminho. Você pode mesmo após o lançamento, continuar adicionando e melhorando no site. Talvez o cliente tenha outro pedido para um recurso. Você pode adicioná-lo muito facilmente porque você está apenas adicionando um componente, você não está projetando um layout completo. Obviamente, este é um processo idealizado, assim como o exemplo anterior foi idealizado na direção oposta. Sempre haverá solavancos na estrada, mas com a comunicação e algumas boas ferramentas, você lançará projetos melhores. Agora que você sabe como isso pode funcionar, seu processo irá melhorar. 13. Conclusão: Isto é realmente para ser apenas uma cartilha, apenas para você começar a pensar sobre essas coisas. Realmente, é uma prática de longa carreira trabalhar em seus relacionamentos com seus colaboradores e melhorar seu processo. A melhor coisa que você pode fazer é continuar lendo e tentar coisas novas. Mas, em resumo, falamos sobre três coisas que podem realmente melhorar, melhorar drasticamente seu relacionamento com seus desenvolvedores. A primeira coisa: envolvê-los cedo e, em seguida, mantê-los envolvidos durante todo o processo. Isso significa que não há mais design no vácuo. Faça muitas perguntas sobre o que eles precisam de você para executar o design corretamente. Não há mais grande design revela, porque às vezes eles podem descarrilar um projeto. Sistemas de design, não páginas. Quebrar as coisas. Inclua regras de topografia e cores e coisas assim, mas também divida as coisas em componentes. Pense nisso como peças de Lego que se encaixam. Estes são mais rápidos e fáceis de construir, que realmente imitam como nós construímos na web de qualquer maneira. A terceira coisa que falamos é confiar no seu desenvolvedor. Você não pode controlar 100% o resultado do seu projeto nesta mídia. Há muitas variáveis. Quando sair do Sketch ou Photoshop, está fora de suas mãos. Além disso, os desenvolvedores tendem a tomar decisões de design, então eles vão cometer erros. A chave é ser paciente e ajudá-los. Agora, este processo não funciona para todos. Você provavelmente terá que adaptá-lo ao seu próprio processo, em sua própria equipe, sua própria maneira de trabalhar. Mas, novamente, isso é apenas para você começar a pensar sobre esses conceitos e melhorá-lo, melhorar seu processo ao longo do tempo. O resultado é melhor, relações mais colaborativas com seus desenvolvedores e, em última análise, projetos melhores e cliente mais feliz. Espero que isto te ajude. Saia e construa algo incrível.