Projetar o futuro: as ferramentas e os produtos que nos aguardam

Ferramentas de Design Emergentes

No verão de 1985, uma empresa de software situada em Seattle lançou um programa de computador inovador que abalou o mundo do design até sua fundação e reconfigurou permanentemente o cenário de três indústrias monolíticas: marketing, publicidade e publicação.


Disquete Aldus PageMaker

A empresa? Aldus. Seu programa de mudança de jogo? PageMaker, a primeira ferramenta de design digital WYSIWYG. Emparelhado com o computador pessoal da Apple Macintosh, o PageMaker iniciou a glória da revolução da editoração eletrônica, impulsionada pelo clipart, e colocou poder criativo sem precedentes nas mãos de qualquer um, designer ou não, disposto a pagar o preço de US $ 495.

Novas ferramentas igualam novas possibilidades.

Avanço rápido para a era moderna. Em poucos dias, meses de especulação terminarão quando designers de todo o mundo colocarem suas mãos no InVision Studio, um programa que está sendo comercializado como “a ferramenta de design de tela mais poderosa do mundo”. O tempo dirá se isso é mais do que um orgulho , mas o potencial é surpreendente.

Com o lançamento do Studio, os designers ganham acesso a uma única plataforma capaz de projetar telas, layout responsivo, prototipagem rápida, animação, sistemas de projetos compartilhados e colaboração entre equipes. Isso é muito para ser animado, mas o que uma ferramenta como o InVision Studio nos diz sobre a trajetória do design? Para onde estamos indo?

Os produtos digitais são totalmente integrados em nossas vidas diárias, e a tecnologia que os impulsiona está melhorando exponencialmente. A complexidade é abundante e, para tornar os produtos simples e intuitivos, os projetistas de todo o mundo estão sendo forçados a repensar e reconstruir as ferramentas que usam.

No espírito dessa reinvenção coletiva, olhamos para o futuro e perguntamos: “Quais são as ferramentas de projeto que nos esperam?”

A ascensão dos sistemas de design

Enquanto nos preparamos para olhar adiante, paramos para avaliar o presente. O mundo do design está repleto de conversas sobre sistemas de design e inteligência artificial emparelhados com aprendizado de máquina. Ambos os campos possuem vastos reservatórios de potencial. Como cavalos indomáveis, vemos o poder e a beleza, mas nos perguntamos em qual horizonte eles correrão.

Os sistemas de design intrigam porque permitem que diversas equipes que trabalham em projetos sofisticados se comuniquem usando uma linguagem visual padronizada. Empresas como MailChimp, IBM e Airbnb disponibilizaram seus sistemas de design na web, permitindo-nos aprender com seus esforços contínuos para alcançar a liberdade criativa por meio de ordem visual, clareza e eficiência.


Sistema de Linguagem de Design da Airbnb

Quando a Airbnb revelou sua identidade de marca atualizada em 2016, ela também introduziu uma nova abordagem de design em toda a empresa, chamada de Design Language System (DLS). O DLS é uma biblioteca de componentes de design (cabeçalhos, blocos de texto, contêineres de imagens, etc.) que “permite uma iteração rápida usando um vocabulário compartilhado entre design, engenharia e outras disciplinas”.

O significado do Design Language System e dos sistemas de design em geral é resumido perfeitamente por Alex Schleifer, chefe de design da Airbnb, “Eis a verdade simples: você não pode inovar em produtos sem primeiro inovar a maneira como os constrói. Em outras palavras, o produto surge do processo e a forma como os projetistas constroem devem ser reconsiderados.

A Inteligência Artificial e a Aprendizagem de Máquina tornarão os Designers Obsoletos?

O tema da inteligência artificial e aprendizagem de máquina (AI + ML) parece suscitar controvérsia e confusão sempre que é mencionado, e sua aplicação ao design não é diferente.


Foto de Andy Kelly

Por exemplo, áreas inteiras de concentração de design, como design de tipos ou animação, serão automatizadas? Será que os esforços criativos acabarão sendo superados pelas máquinas, deixando os designers simplesmente detalhando parâmetros e organizando os resultados? As perguntas são escorregadias e tipicamente apresentadas de uma forma que proíbe nuances.

Mas o design é matizado e os designers também. Resolvemos problemas complexos e temos a tendência de quebrar regras e obter resultados inesperados. As previsões neste artigo dependem da seguinte pergunta: "Como o AI + ML melhora as habilidades criativas inerentes à nossa humanidade?"

Observe que a questão não é: “Como o AI + ML ultrapassa as disciplinas humanas?” Essa é uma questão enraizada no medo. O medo surge da falta de compreensão, então aqui fazemos uma transição da terminologia. AI, no contexto desta discussão, é melhor descrito como inteligência aumentada, não "artificial".

Vamos imaginar ferramentas que ampliem as habilidades de um designer e ofereçam liberdade criativa adicional, automatizando tarefas comuns que roubam tempo e energia.

Com os sistemas de design e AI + ML situados como nossa plataforma de lançamento, agora estamos prontos para ultrapassar o presente e escalar para vislumbres distantes que podemos ver, mas ainda não tocamos.

Sistemas de design evoluirão para uma linguagem de design universal

A oportunidade

Atualmente, o Sistema de Linguagem de Design do Airbnb é usado por suas equipes internas de design e desenvolvimento e, à medida que melhora, ele se torna mais acessível para empresas menores, freelancers e estudantes de design.

Mas o poder desse sistema só é útil para a comunicação dentro das equipes de desenvolvimento de produtos? Não foi possível usar uma linguagem de design universal que classifique os elementos visuais para nos ajudar a entender melhor o design existente nos ambientes naturais e construídos ao nosso redor?

A Ferramenta

Em um futuro próximo, haverá um aplicativo baseado em câmera que observa a composição de uma configuração e traduz sua composição visual em elementos de design referenciáveis, como forma, cor e proporção. Este aplicativo não apenas nos diz o que estamos vendo, como também destaca áreas de impacto estético e harmonia para nos ajudar a entender por que encontramos um ambiente agradável, e organizará essas informações dentro do contexto do Sistema de Linguagem de Design.

O cenário de valor

Imagine-se caminhando lentamente por uma cidade histórica no fim de semana. Você chega a uma bela catedral e entra para dar uma olhada mais de perto em suas características arquitetônicas ornamentadas.


Basílica de São Nicolau, Amsterdã, Holanda

No interior, você é dominado pela majestade ensolarada de um enorme vitral. Inspirado, você tira uma foto e o aplicativo identifica os elementos de design que tornam a janela bem-sucedida e os adiciona à sua biblioteca.

Mais tarde, ao pesquisar seu projeto de design mais recente, abra o aplicativo, analise a análise do vitral e encontre a combinação perfeita de elementos visuais para guiar seus rascunhos conceituais iniciais.

Apresentações de design se farão

A oportunidade

Designers são bons em resolver problemas e se comunicar visualmente, mas muitos lutam quando é hora de explicar as decisões criativas para um cliente. Demasiadas vezes, assumimos que os clientes reconhecerão as áreas de coesão, correlação e ênfase no nosso trabalho. Precisamos de uma maneira melhor de capturar os meandros do nosso ofício e comunicá-los aos nossos clientes.

A ferramenta

Para preencher essa necessidade, um plug-in de apresentação com links para qualquer software de design surgirá e ajudará os designers a preparar rapidamente seus trabalhos para serem compartilhados com os clientes. Essa ferramenta reconhecerá importantes elementos de design (como repetição) e incentivará os designers a destacarem esses componentes de composição como pontos persuasivos. Também ajudará a organizar provas e visuais de projetos em categorias temáticas e solicitará que os projetistas respondam a grandes questões relacionadas a cada fase de um projeto.

Com o poder da inteligência aumentada, essa ferramenta será capaz de analisar milhões de campanhas publicitárias digitais anteriores, destacando projetos que se mostraram eficazes. Esse tipo de dados baseados em analítica ajudará os projetistas a validar propostas em termos de dólares e centavos. Será até capaz de prever tendências de design e alertar contra modas excessivas que os consumidores não estão mais respondendo.

O cenário de valor

Você é um designer trabalhando em uma equipe em uma pequena agência digital. Sua equipe concluiu com sucesso vários pequenos projetos para uma marca reconhecida nacionalmente. Por fim, a grande marca concede à sua agência a oportunidade de trabalhar em uma campanha digital de alta visibilidade.

Reconhecendo este momento decisivo para o que é, sua equipe se une a uma solução ambiciosa e não convencional. A pesquisa, o planejamento e os recursos estão alinhados. Tudo o que resta é lançar o conceito de design para as partes interessadas, para que você execute o plug-in.

Em minutos, todos na equipe estão lembrando conversas importantes e contribuindo com insights sobre decisões importantes que, de outra forma, poderiam ter sido perdidas. À medida que mais informações surgem, o plug-in começa a moldar o feedback em uma narrativa visual convincente que eventualmente persuade as partes interessadas a transformar a visão de sua equipe em realidade.

Hand-sketching acenderá um Design Renaissance


Esboço de wireframe

A oportunidade

O escritor, poeta e cineasta francês Jean Cocteau disse certa vez: “O cinema só se tornará uma arte quando seus materiais forem tão baratos quanto lápis e papel.” Há algo de poderoso no papel para lápis, algo imediato e explosivo sobre a transferência instantânea de ideias. em mente para a ideia na página.

As equipes de design e desenvolvimento da Airbnb reconheceram esse poder e criaram um protótipo que traduz wireframes rudimentares em modelos de alta fidelidade e código pronto para produção.

A ferramenta

Essa tecnologia evoluirá e, ao fazê-lo, varrerá uma ampla gama de disciplinas de design. Por exemplo, os ilustradores criarão esboços conceituais detalhados com alguns movimentos do pulso ligando gestos simples a objetos, animais e partes do corpo desenhadas em seu próprio estilo único. Da mesma forma, os designers de interface do usuário vincularão formas e símbolos rudimentares a bibliotecas extensas de componentes e criarão modelos prontos para apresentação em tempo real. As possibilidades são expansivas.

O cenário de valor

Como um designer de marca jovem e autônomo , você está trabalhando duro para construir uma base de clientes e agendou uma reunião com um proprietário de negócios altamente respeitado em sua comunidade. Ela está procurando mudar de marca e você está planejando impressionar.

Na reunião, você faz perguntas ponderadas e ouve como ela explica suas esperanças e objetivos para o projeto. Quando ela termina, você pergunta se você pode compartilhar algo que você preparou de antemão. Você puxa seu tablet, abre um aplicativo de desenho equipado com o esboço para a tecnologia de simulação e começa a desenhar.

Diante de seus olhos, seus rabiscos rápidos são transformados em formas, padrões, tipos de letra e ícones perfeitos. Você rabisca algumas opções diferentes de cartão de visita, e cada uma delas toma forma instantaneamente. É tudo que ela precisa ver. O trabalho é seu.

Software de Design Incentivará Acidentes Criativos

A oportunidade

Anteriormente, colocamos uma questão sobre os designers trocarem o papel de criador para se tornarem definidores de parâmetros e curadores da criatividade gerada pela IA. Isso não é sem precedente no mundo real. De TheGrid.io e sua plataforma de web design AI para o Rembrandt gerado por computador, apoiado por ING e Microsoft, já temos exemplos sofisticados de computadores que criam trabalhos originais de arte e design, e a tecnologia só pode melhorar.

No entanto, a idéia de entregar completamente a criação de imagens às máquinas acabará sendo insatisfatória, e os designers procurarão maneiras de mesclar o AI + ML com seu processo criativo.

A Ferramenta

No futuro, softwares de design como o Adobe Illustrator virão equipados com tecnologia que observa e aprende os hábitos de tomada de decisões dos designers - os esquemas de cores que eles preferem, a natureza orgânica ou geométrica de seu trabalho, sua abordagem à tipografia, etc.

À medida que os padrões no trabalho de um designer surgem, a ferramenta sugere outliers pensativos e criativos que normalmente não seriam considerados. Desta forma, o designer aprende com a ferramenta, aumenta o seu repertório criativo e cresce a sincronicidade do homem e da máquina.

O cenário de valor

Durante o período em que você trabalhou como designer de produtos para uma marca de fitness de varejo, você desenvolveu um senso apurado sobre o que vende aos consumidores em seu espaço. Seu trabalho é prático, funcional e esteticamente agradável, mas você acha que confia nas mesmas técnicas visuais e fatores de forma com muita frequência. Felizmente, a sua empresa atualiza seu software de design para incluir uma ferramenta criativa outliers.

Em seu próximo grande projeto, você faz negócios como de costume, mas quando você inicia os refinamentos, a ferramenta sugere um esquema de cores que você nunca considerou. Você experimenta e fica agradavelmente surpreso com a vida e a vibração que acrescenta ao seu design.

Equipes de Design Global se comunicarão enquanto dormem

A Oportunidade

Equipes globais formadas por designers remotos são cada vez mais comuns. Por exemplo, o Blog de Design Toptal é composto por escritores, editores, designers de UI e UX , ilustradores e especialistas em SEO de todo o mundo. Isso não seria possível nem prático sem ferramentas de colaboração incríveis como o Slack, o Zoom e o Google Docs.

No entanto, os fusos horários ainda encontram maneiras de interromper as reuniões e ameaçar os prazos. Trabalhar em uma equipe remota é ótimo, mas pode facilmente se tornar um problema se você não estabelecer limites para descanso, entretenimento e tempo com a família e os amigos.

A Ferramenta

Em breve, as equipes de projeto global transcenderão a barreira de fuso horário / sono, já que a tecnologia de colaboração assistida AI + ML é capaz de aprender o estilo de comunicação e os padrões de tomada de decisão de um usuário.

Essa tecnologia será capaz de sintaxe e tom diferenciados, dependendo do cenário e do parceiro de conversação. Ele será um recurso padrão na maioria das plataformas de mensagens e permitirá que os usuários personalizem a quantidade de poder de tomada de decisão que ele possui.

O cenário de valor

Você é o principal designer de uma equipe de UX remota e a maioria de suas conversas ocorrem no Slack. Sua equipe está funcionando sem problemas e dentro do cronograma, mas você está participando de um novo projetista com uma diferença de fuso horário de dez horas. No final do seu dia de trabalho, você habilita sua ferramenta de colaboração e concede a ela permissão para fornecer respostas básicas e relacionadas à sua nova contratação.

Enquanto você dorme, o novo designer faz uma pergunta sobre as convenções de nomenclatura de arquivos. A ferramenta imediatamente responde e inclui um link para um documento descrevendo os procedimentos da equipe. Ela continua seu dia de trabalho e você dorme pacificamente, sabendo que sua equipe tem tudo de que precisa.

Críticas criativas não serão mais temidas

A Oportunidade

Um dos aspectos mais difíceis de ser designer é receber críticas relacionadas ao design. O feedback do cliente pode ser altamente imprevisível, mas mesmo antes de um conceito ser compartilhado com um cliente, ele deve estar sujeito a algum tipo de crítica criativa.

Atualmente, nossa melhor opção para críticas é pedir a um amigo designer uma contribuição construtiva. Se isso falhar, muitos designers buscam feedback das comunidades criativas em sites de portfólio como o Dribbble e o Behance. Precisamos de uma solução melhor.

A Ferramenta

Muito em breve, o software de design de interface do usuário virá equipado com uma ferramenta que oferece análises em tempo real, críticas e melhorias baseadas em análises para o trabalho de um designer. Ele irá comparar projetos de interface do usuário a uma miríade de heurísticas de usabilidade (regras de ouro) e sinalizar resultados que não são compatíveis.

Esta ferramenta também será vinculada a uma rede de designers . Depois que o software analisar um design, o designer terá a opção de obter mais comentários enviando seu trabalho e um resumo da análise gerada por computador aos designers da rede.

O cenário de valor

Você é um designer de UI auto-didata e conseguiu um projeto para criar um aplicativo da web. O escopo do projeto é maior do que qualquer coisa que você já trabalhou, mas está bem dentro do seu conjunto de habilidades. Ainda assim, você quer ter certeza de que sua solução será de valor para seu cliente.

Ao projetar com sua ferramenta de crítica, ela faz pequenas sugestões de melhoria que você não teria considerado. Você termina suas maquetes com a certeza de que elas estão próximas da conclusão. No entanto, há uma tela específica que precisa de feedback.

Você tentou algo novo, quebrando intencionalmente uma regra de design bem conhecida para criar ênfase. Então, você faz o upload do seu trabalho e um resumo do feedback da ferramenta para a rede de críticas e pede a um grupo de designers de confiança para pesar.

O futuro do design é surpreendente

Temos imaginação suficiente para o futuro? Que tal para amanhã? Nossa exposição contínua a novos conhecimentos, produtos e experiências é surpreendente, mas o design é um processo baseado em habilidades. As habilidades são difíceis de obter e os processos demoram a mudar.


Foto de Alessio Lin

Se somos designers honestos, devemos admitir nossa tendência à miopia profissional. Temos uma estranha obsessão com o agora que carece de visão e agilidade para as descobertas futuras. O que esperamos que aconteça, muitas vezes não acontece.

Ainda assim, o futuro se aproxima. À medida que nossos produtos evoluem, nossas ferramentas e processos de design também devem evoluir. Hoje, aprendemos e dominamos nossas ferramentas ao longo do tempo. Estudamos o processo de design e o adequamos às nossas necessidades de solução de problemas, mas o caminho para uma solução é frequentemente pavimentado com obstáculos enlouquecedores, como gerenciar vários canais de comunicação, suportar uma mudança de equipe para um novo software de design ou perder tempo e orçamento testar adequadamente um produto.

O futuro tem o potencial de um novo paradigma, no qual nossas ferramentas de design aprendem e se adaptam a nós. Achamos um dia em que nossas energias criativas são capturadas em sua plenitude, em vez de restringidas por barreiras de comunicação, um dia em que nossos esforços inspirados são refinados para o máximo impacto, em vez de reduzidos por ferramentas não intuitivas. Com o modo como nossas ferramentas e tecnologia estão evoluindo, esse dia pode estar mais perto do que se pensa.

POR MICAH BOWERS - DESIGNER @ TOPTAL (TRANSLATED BY YESICA DANDERFER)

ARTIGO ORIGINAL - Diseña el Futuro: Las Herramientas y Los Productos que Nos Esperan

Design colaborativo - Um guia para a empresa de sucesso e design de produto

Você provavelmente já ouviu falar do desenvolvimento do software Agile, do gerenciamento de processos Kanban e do Lean UX. O design colaborativo é uma abordagem filosófica e tática diferente para o design de produtos corporativos.

O design colaborativo é o processo de concepção em um ambiente de confiança participativo, envolvente e realista de todas as mãos ou cérebro. NÃO está projetando no vácuo; Em vez disso, como o nome indica, o design colaborativo coloca o designer no centro das várias equipes e departamentos para trabalhar com todos, a fim de construir um produto coeso. Desta forma, ninguém é deixado de fora, e o produto pode ser construído com todas as partes interessadas envolvidas.

Toda organização empresarial é diferente e as partes interessadas em torno de qualquer idéia ou tarefa podem parecer pastorear gatos. Neste guia, revisaremos dicas e truques para trabalhar com os principais jogadores, não só para obter sua contribuição, mas também para trazê-los a bordo com esta nova abordagem centrada no design.



Conheça os jogadores

Os designers são ótimos em muitas coisas, mas seu papel começa com a resolução de problemas. Isso requer saber quem são os especialistas e trabalhar com eles. Todos os membros da equipe de desenvolvimento de produtos têm suas próprias necessidades e responsabilidades, de modo a conhecê-los é tão crítico como realmente completar a atribuição dada.

Então, sem mais delongas, vamos encontrar a equipe:

Os gerentes de produtos definem o escopo, os requisitos e os ciclos de iteração de desenvolvimento para produtos e recursos; eles são muitas vezes os guardiões para os recursos antes de um sim/não final e são praticados na comunicação com toda a organização, incluindo executivos.

Os engenheiros criam o produto, então eles entendem as capacidades e limitações técnicas. Isso os torna um recurso crítico para determinar as principais preocupações, incluindo os cronogramas de desenvolvimento, as tecnologias para usar, o escopo e, muitas vezes, a viabilidade do projeto (se nossos conceitos são mesmo possíveis, dada a tecnologia e as limitações de tempo).

Os arquitetos de banco de dados e sistemas sabem como os dados são integrados e têm uma compreensão profunda do que é necessário para manter o desempenho enquanto continua a construir em cima do produto / plataforma existente.

Os especialistas em assuntos internos (PMEs) estão intimamente familiarizados com os processos de negócios, casos de uso, história e política, bem como expectativas gerais de gerenciamento, clientes e usuários.

A venda concentra-se na apresentação do produto a potenciais clientes. Isso torna as vendas o primeiro ponto de contato, então a compreensão do produto é fundamental para o fechamento (e muitas vezes a criação) de leads.

Os formadores (ou em SaaS, agentes de sucesso de clientes) têm exposição direta à equipe de vendas e usuários novos ou de teste, e podem contribuir com volumes de informações úteis sobre como o produto está atuando in vitro e além.



Quando todas as partes que trabalham no produto estão envolvidas no processo de design (um dos princípios fundamentais da metodologia Agile), o produto resultante tem uma chance significativamente maior de alcançar o sucesso - não porque os designers estejam trabalhando com as partes interessadas, mas porque as partes interessadas, mais frequentemente do que não, entenda necessidades específicas de usuários e negócios de maneira que não possamos. Trabalhar em colaboração sempre parece ser a melhor opção, mas como fazemos isso?

Como colaborar com as partes interessadas
Gestores de produtos, Gate and Time-keepers do Produto

Os gerentes de produtos geralmente têm um anexo pessoal ao produto e são mantidos em expectativas muito elevadas dentro da empresa. Eles também precisam responder aos usuários ou clientes de seus produtos quando há problemas, promessas não atendidas ou solicitações para uma nova funcionalidade.

Eles valorizam a comunicação simples altamente e precisam ser atualizados sobre o progresso, problemas e quaisquer mudanças. Eles gostam de ver os rascunhos primeiro e freqüentemente, e porque eles podem trabalhar em várias escalas (vários níveis de desenvolvimento direto do produto para hands-on com mudanças menores mesmo), suas interações com eles podem variar muito.

Como os PM gastam tanto tempo se comunicando com várias partes interessadas (internamente e externamente), é importante mantê-los informados sem esperar que eles façam check-in com você. Configure check-ins regulares com seus PMs para apresentar rascunhos iterativos, ouça seus comentários e termine sempre com uma lista de itens de ação para a próxima reunião.



Não demorará muito para saber quais são seus objetivos para a funcionalidade do produto. Os PM sabem que os designers são solucionadores de problemas, por isso os designers precisam fornecer dados e análises para comprovar seu raciocínio. Se você está certo ou não, não importa. Prove que construir o melhor produto é o objetivo e você ganhará a confiança de um PM!

Engenharia: Responsável por trazer desenhos para a vida

Os engenheiros (também chamados de desenvolvedores) são as pessoas mais próximas do produto; eles o compram! Isso lhes dá uma vantagem porque eles conseguem experimentar e testar diretamente os componentes individuais do produto em ação . Isso é ótimo porque, sem dúvida, eles encontrarão as fraquezas em qualquer design - às vezes antes de construir qualquer coisa - o que é duplamente ótimo porque é uma grande vantagem em tantos níveis para encontrar as falhas antes que o software seja codificado.

A melhor maneira de ganhar a confiança de um grupo de engenharia é produzir especificações completas dos produtos ou envolvê-los no início ... ou ambos.

Quando os desenvolvedores são considerados verdadeiros interessados eles estão mais do que dispostos a discutir casos de uso, cenários, desafios técnicos e as opções para superá-los.

É fácil esquecer que os engenheiros são verdadeiros arquitetos de produtos; eles têm interesse em resolver problemas com o designer, especialmente quando o desafio é difícil ou pode ser tratado de outra maneira.



Arquitetos de banco de dados e sistemas, Guardiões de estruturas de dados

Os arquitetos de banco de dados e sistemas sabem como o produto funciona nos bastidores. Eles sabem tudo sobre como os dados são armazenados e estruturados, o que pode ser integrado e como todos os sistemas falam um com o outro. Eles tendem a estar menos preocupados com a forma como o produto funciona para os usuários do que como ele interage com vários sistemas (o que é o responsável pelo).

Eles podem ser especialmente difíceis de lidar com os designers centrados no usuário. É importante lembrar que, mesmo que um arquiteto de banco de dados / sistema nunca interaja com os usuários finais, seu foco é sempre beneficiar esses usuários, seja por meio da confiabilidade, velocidade ou simplicidade do produto.

O conhecimento deles sobre como as estruturas de dados funcionam - e as ramificações de qualquer alteração na funcionalidade do produto - são muito fáceis de perder sem a entrada de especialistas. É importante convidar e incluir arquitetos de sistemas em reuniões e discussões sobre mudanças de produtos, mesmo que sua posição não pareça se relacionar diretamente.

Uma maneira de colaborar com um arquiteto do sistema é criar uma lista de verificação com as seguintes perguntas:

O recurso X afeta a estrutura de dados atual?
Existe algum trabalho adicional de design / desenvolvimento considerando a arquitetura atual?
O projeto Y entra em conflito com as entradas / saídas de usuários existentes?
Os serviços externos são afetados pelo recurso X?

Esta lista simples irá apontar você na direção certa, mesmo sem uma compreensão clara de como as estruturas de dados pré-existentes (e possivelmente) monolíticas funcionam. Qualquer coisa marcada é uma área que deve ser investigada com uma simples discussão.



Especialistas em assuntos e analistas de negócios, os assistentes de informação

Os especialistas em assuntos são adequadamente chamados; eles são especialistas no assunto e podem ser uma mina de ouro de informações únicas e valiosas. Muitas vezes, eles ganharam graus especializados no campo, ou passaram a maior parte de suas vidas trabalhando em sua indústria. Eles têm uma experiência prática com o funcionamento do negócio, e eles lembram a longa e dolorosa história e política que levou todos a onde estão hoje.

Um analista de negócios conhece os prós e contras de como a organização opera e muitas vezes cumpre a mesma função de uma PME se os dados estiverem disponíveis, mas não há um especialista interno.

Participe com as PME para saber como o gerenciamento é gerido pelo projeto para garantir que as expectativas internas sejam atendidas e que você não esteja pisando em território perigoso. Convide os analistas para as sessões de design, informando-lhes antecipadamente que são especialistas e pedindo-lhes que compartilhem seus conhecimentos de falhas históricas, conflitos políticos e outras questões que podem ser críticas para uma versão de produto bem-sucedida.



Gerentes de sucesso de clientes, o ponto de contato de um novo cliente

Quando os novos clientes são finalmente adquiridos por vendas, treinadores - ou para as empresas SaaS, os gerentes de sucesso de clientes (CSMs) - adquirem para ensinar novos usuários a usar o produto. Portanto, é evidente que os treinadores passam muito tempo conversando com usuários novatos. Um CSM tem uma perspectiva única porque eles interagem com clientes que muitas vezes não estavam envolvidos na decisão de compra de sua empresa.

Com esta perspectiva única, os formadores / CSMs podem fornecer informações valiosas para decisões de design, tanto para o onboarding do cliente quanto para o comportamento dos novos usuários. Muitas organizações empresariais seguem e monitoram como seus novos clientes usam vários produtos e logam tudo, desde chamadas para queixas, mas os treinadores têm a sensação de que os clientes realmente lutam.

Inclua um treinador senior em todas as grandes reuniões de design e pergunte sobre quaisquer decisões com eles. Faça perguntas como "Quais são as três principais reclamações dos clientes mais graves?" E "Os novos clientes estão em média satisfeitos com o produto?" E "Quais mudanças você acha que proporcionará o maior impacto positivo para você e sua equipe?" Desta forma, todos nós aprendemos sobre o que é o caminho feliz; Os instrutores são nossos olhos e ouvidos para todas as maneiras como os clientes realmente usam o produto.



Vendas, o primeiro contato do produto com os clientes

Vendas e design estão muitas vezes em desacordo. Algumas organizações são orientadas para vendas enquanto outras não são, mas não importa o que, há uma clara diferença em metas: a equipe de vendas quer aumentar as vendas enquanto o projeto quer melhorar a experiência do usuário. Eles nem sempre se alinham.

Isso não tem que ser o caso. A maioria dos vendedores tem queixas muito razoáveis ​​para lidar com: Eles têm pouco ou nenhum controle sobre as decisões do produto, são convidados a assumir compromissos que realmente não podem prometer, e são levados a atingir metas de receita específicas, apesar de tudo. Não é surpresa que as equipes de vendas e produtos tenham acalorados argumentos regularmente!

No entanto, como treinadores, a organização de vendas tem uma perspectiva única sobre as necessidades dos clientes e, muitas vezes, essa perspectiva é a diferença entre fazer uma pequena venda e trazer uma baleia! Compreenda as diferentes áreas com as quais a equipe de vendas luta. Tente se sentar em cada tipo de chamada e aprender como essas perspectivas se comunicam.

Isso abrirá a conversa com as vendas. Não se trata apenas de ter suas necessidades ouvidas; trata-se de melhorar a experiência dos potenciais usuários em todas as etapas, desde a primeira comunicação até a onboarding. Descubra o que os vendedores ouvem das perspectivas, quais os desafios que eles têm ao finalizar o acordo e quais são as maiores preocupações depois de fechado.



Design na empresa não precisa ser um pesadelo

Como designer, todas essas peças móveis podem ser muito desafiadoras para gerenciar, especialmente quando você não é considerado um "gerente" no sentido oficial do termo. Como um dos principais interessados ​​na comunicação entre equipes, na coleta de requisitos e no feedback do projeto, você deve ter acesso a todos esses profissionais em algum nível.

A maneira mais crítica, porém mais simples, de fazer isso é ouvir todas as partes e levar seus comentários a sério. Na maioria das organizações, o próximo passo é levar esse feedback e trabalhar com o gerente do produto para organizar os requisitos no trabalho acionável.

A partir daí, dependa das prioridades e preencha as lacunas. Em última análise, o objetivo é projetar o melhor produto, e precisamos da ajuda de todos os funcionários de desenvolvimento de produtos. Reconhecer que cada papel é importante e tornar esses funcionários conscientes do seu valor no ciclo de desenvolvimento do produto os abre para fornecer informações que um designer precisa para tomar melhores decisões de design de produto.

POR ANDI OMTVEDT - DESIGNER @TOPTAL

ARTIGO ORIGINAL - Diseño Colaborativo: Una Guía Para El Diseño Exitoso De Productos Empresariales

Design Web Brutalista, Design Web Minimalista e Futuro da Web UX

Os sites estão se tornando mais caóticos, desordenados e não refinados? As regras do bom design estão sendo quebradas? A web está ficando feia? Esta é uma nova tendência?

Se você é como a maioria dos designers e presta muita atenção ao que está acontecendo, você ouviu a palavra brutalismo sendo jogado por um tempo. Os sites brutalistas estão se afastando das interfaces fáceis de usar que têm sido a melhor prática da indústria e, em vez disso, se concentram em sites HTML imperfeitos e codificados manualmente. Parece que os designers estão eliminando as regras da UX como as conhecemos, deixando tudo se sentindo um pouco caótico.

Os princípios do design elegante e contemporâneo são tão comuns que dificilmente pensamos neles como uma escolha estilística. O "bom" web design geralmente significa um que obedece as regras do minimalismo. Interfaces simples, simples e organizadas - mas isso nem sempre foi o caso. Vamos atrasar o relógio algumas décadas.

O nascimento da Web

O web design percorreu um longo caminho desde 1991, quando o primeiro site foi publicado. A revolução da internet começou com seus primeiros sites sendo exclusivamente baseados em texto usando a primeira geração de HTML.


O primeiro site "design" que foi lançado em 6 de agosto de 1991.

Então veio o Flash com todos esses sites animados loucos que todos certamente se lembram. O desenvolvimento de CSS (Cascading Style Sheets) veio junto, proporcionando web designers com ainda mais controle sobre melhorias como cor de fundo, tamanho de texto e estilos de texto em código. O JavaScript nos deu menus suspensos, navegação avançada e formulários da web com verificação de erros.

No começo, ninguém sabia o que o "design web" realmente significava, e os pioneiros dos padrões de design estabelecidos na web por tentativa e erro. A era inicial do design web usava layouts que pouparam pouca atenção à semântica formal e à acessibilidade, optando pela estética sobre a estrutura.


Site do Google - 1998

Para construir e estruturar seus projetos, os designers dependeram fortemente de elementos HTML, como tabelas, tabelas aninhadas e arquivos invisíveis de espaçadores de 1 pixel, proporcionando-lhes a capacidade de criar layouts de várias colunas mais complicados. Isso foi feito para algumas interfaces bastante aborrecidas.


Site da CNN - 2000


Site da Enron - 2004

Em meados dos anos 2000, os sites nasceram com um pensamento mais cuidadoso por trás de sua estrutura. A navegação estava no topo do seu navegador e as categorias foram colocadas na barra esquerda. As páginas da Web foram mantidas curtas e estreitas, com conteúdo espalhado em muitas páginas para não forçar os usuários a percorrer. Os designers aprenderam o que funcionou e começaram a construir melhores sites, estabelecendo padrões e melhores práticas ao longo do caminho.

Com mais e mais opções de layout veio uma mistura de UIs barulhentas repletas de imagens e texto em todos os lugares. Alguns designers disciplinados, no entanto, ainda optaram pelo minimalismo.

A Estética Minimalista

Tendências de design ir e vir; no entanto, o minimalismo é uma linguagem de design que esteve presente no tempo. É uma filosofia de design que se concentra na simplificação da forma, obtida usando os elementos mais simples e essenciais em um projeto.

O minimalismo não é exclusivo do web design. Pense em todos os elementos ao seu redor que englobam esse design ideal; é fácil conectar projetos minimalistas com Nest, Apple, Herman Miller e muitos outros que inspiraram muitos designers minimalistas .


Swaats do ninho sob medida, design de produto simples


O escritório eterno, insubstituível, cadeira clássica Eames


Um estilo elegante e minimalista é o cartão de visita da Apple

O que torna o design da Herman Miller ainda ótimo hoje? Eles são simplesmente objetos bem projetados com um olhar atemporal. Seus projetos se sentam muito bem em casas e interiores contemporâneos - eles ainda se sentem frescos e modernos hoje. Muitas de suas peças são projetadas com um visual minimalista e realmente não podem estar ligadas a uma moda específica. Eles ainda aguardam a prova do tempo.

Os projetos minimalistas de um dos designers gráficos mais renomados de sua época, Josef Müller-Brockmann, são muito semelhantes aos de Herman Miller: atemporal . Müller-Brockmann abraçou e dominou o minimalismo durante as décadas de 1940 e 1950 sob a forma de estilo suíço de design.

Qualquer decoração estranha ou supérflua foi despojada de seu design gráfico; Cada elemento em seus layouts teve um propósito. O pensamento de design por trás dessa abordagem é o que faz com que projetos digitais minimalistas funcionem muito bem hoje.


Tipografia limpa e moderna e design de cartaz de Josef Muller Brockmann

Como o minimalismo se estabeleceu na era digital

A história sempre encontra uma maneira de nos alcançar. Como fez no design impresso, o minimalismo e a filosofia por trás dele alcançaram o design web e outros artefatos digitais. Pense em como os sites pareciam há apenas alguns anos com seus botões brilhantes, linhas e parágrafos de texto, tudo gritando por atenção.

Então veio a tendência skeuomorphic onde designers projetaram elementos que imitavam objetos da vida real no espaço digital. Lembra-se do estofamento de couro no iCal da Apple?

Os projetos mínimos são realmente intencionais. É uma abordagem de design que tira todo o que é desnecessário e se concentra em elementos que devem chamar a máxima atenção, colocando ênfase no conteúdo.


Concentrando-se na força central de uma agência digital usando três palavras simples - Convoy


Este design minimalista eCommerce coloca ênfase na peça, removendo todas as distrações desnecessárias. - Roupa Chylak


Sem confusão extra, os usuários se focam em elementos chave de UI com o design de aplicativos minimalista da Investr .

Os Benefícios do Design Minimalista

A abordagem de design minimalista pegou por muitos outros motivos do que simplesmente sua aparência. Nossa maior compreensão dos comportamentos dos usuários, dos processos de pensamento de design e do aumento dos processos de design de conteúdo primeiro ajudaram a avançar esse pensamento. O recente crescimento maciço de usuários móveis tem sido um forte ponto de aceleração para o minimalismo, com maior foco em UX e usabilidade.

Com os usuários que agora acessam a internet em qualquer momento, os designers de produtos devem se concentrar em fornecer o que é absolutamente essencial no contexto do momento: as coisas certas do jeito certo e no momento certo, onde o design é despojado para ter características mais fundamentais.

O uso de celular agora representa mais de metade de todas as visitas na web, e essa taxa só aumentará. O design responsivo tem sido um trocador de jogos e forçou os designers a "pensarem diferente". Hoje, mais do que nunca, o design responsivo ou adaptável é uma necessidade no mundo móvel, onde uma abordagem de design minimalista é de importância crucial.

Para o usuário médio, o minimalismo provavelmente parece ser a coisa mais fácil de projetar. Conseguir um equilíbrio perfeito usando a menor quantidade de conteúdo visual e concentrando-se apenas nos elementos fundamentais com maior elegancia é realmente muito, muito difícil.

O Futuro do Minimalismo

Devemos pensar no minimalismo como um conceito atemporal, irradiando elegância e sofisticação, em vez de uma tendência real ou uma fase de passagem simples. Embora atemporal e clássico, ele evoluirá e melhorará, como já vimos desde a sua implementação no início do século XX.

Por exemplo, o Material Design do Google foi uma das primeiras evoluções importantes na abordagem de design "plana" inspirada no minimalismo. Os designers do Google mantinham as coisas simples e minimalistas, mas melhoravam suas linguagens de design com o uso de efeitos de sombra e os conceitos de movimento e profundidade. O material envolve o design plano com um toque específico: imitando materiais do mundo real.


Site de diretrizes de design de materiais do Google

A Desvantagem do Minimalismo

Tal como acontece com outros elementos da vida, sempre temos que olhar para os profissionais, bem como para os contras. Muitos argumentam que os sites hoje não têm sabor e são principalmente todos iguais. Você sabe - uma grande imagem de herói, ou vídeo com texto sobreposto, uma linha de ícones com texto e assim por diante. Qualquer um pode demorar alguns minutos do seu tempo e chegar a 10 sites que se parecem muito parecidos um com o outro. Este é o reflexo do nosso comportamento e preferências online em constante mudança?

A consistência do projeto e o design para o comportamento comum dos usuários são extremamente importantes em todos os projetos, mas não podemos esquecer o valor de ser único. Nós ficamos preguiçosos ou é que mudamos nossos pensamentos para longe da singularidade e para uma estratégia de experiência do usuário mais eficaz?


Bem executado, mas sem originalidade. Imagem de grande herói do produto, algum texto e miniaturas com texto.

Brutalismo no design da Web

"Em sua robustez e falta de preocupação para se parecer confortável ou fácil, o brutalismo pode ser visto como uma reação de uma geração mais jovem à leveza, otimismo e frivolidade do onipresente web design minimalista de hoje".

Alguns adoram, alguns odeiam e muitos outros simplesmente não entendem: sites brutalistas.

Tome Craigslist como um exemplo. O Craigslist deve ser considerado o "avô" de sites brutalistas. Não é esteticamente agradável e nunca será apresentado em www.awwwards.com. Texto preto, links azuis, fundo branco. Não é bonito. Não precisa ser porque funciona - e isso funciona muito bem. Você encontra o que você precisa para comprar ou vender sem problemas e sem partes móveis.


Craigslist é uma massa de links azuis. Uma UI funcional, funcional e barebones.

Desde a sua fundação em 1996, a Craigslist manteve a sua popularidade por causa do seu design extremamente utilitário. O design não mudou de maneira significativa nos últimos 20 anos.

Talvez inspirado pelo exemplo de Craigslist, o estilo brutalista está fazendo um retorno. Os seguintes são ótimos exemplos de projetos bem executados usando o estilo brutalista.


Purchase Design School mostra uma galeria de trabalho como uma pilha de cartas desordenada em um fundo granulado e degradado.


Konsept83 inspirou-se nos primeiros dias da internet por inspiração.


Show-off criativo O Utrecht usa cores em negrito com um estilo de design brutalista.


Layout de design não convencional e brutalista no site Slugz

Esses sites brutalistas estão se abrindo de uma maneira ampla. Por que esses sites são repentinamente tão populares? É porque alguns designers acabaram de se cansar da homogeneização da web?

Nos dias em que o design UX é de primordial importância, onde o comportamento do usuário e uma abordagem de conteúdo inicial é rei, o UX nesses sites é ruim (intencionalmente). Contrariamente aos princípios do minimalismo, esses projetos estão em seu rosto com colagens de texto e imagens onde o layout está em todo o lugar (novamente, intencionalmente).

Uma Breve História do Brutalismo

O estilo de design brutalista não é novo. Uma pesquisa rápida na Wikipedia irá dizer-lhe que o estilo realmente vem da arquitetura brutalista da década de 1950 até meados da década de 1970. Engraçado, esse brutalismo foi seguido pelo movimento arquitetônico modernista, onde o minimalismo era fundamental.

Le Corbusier foi um dos maiores pioneiros desse movimento. Sua carreira abrangeu cinco décadas com edifícios projetados na Europa, Japão, Índia e América do Norte e do Sul.

O termo se origina da palavra francesa "brut" para "cru", como Le Corbusier descreveu sua escolha de material "béton brut", concreto cru. O design hiper-funcionalista parecia projetado apenas para fornecer utilidade - não para agradar - como se fosse dar o dedo ao modernismo.

"O brutalismo tenta enfrentar uma sociedade de produção em massa e arrastar uma poesia rude das forças confusas e poderosas que estão no trabalho. Até agora, o brutalismo foi discutido estilisticamente, enquanto a essência é ética. "- Alison & Peter Smithson, "O Novo Brutalismo", Design Arquitetônico (abril de 1957)

Os projetos brutalistas rejeitam a aparência, optando pela função sobre a forma. Os designers brutais se orgulham de executar projetos com o mínimo esforço e os materiais mais baratos disponíveis, para alcançar um resultado mais antiquo e anti-burguês.


Em 27 de abril de 1967, o complexo de habitação urbana da Safdie, denominado Habitat 67, foi inaugurado na Expo 67, a feira mundial em Montreal.

Brutalismo na era digital

A Bloomberg adotou o estilo à sua maneira para seu site de notícias. O design é quase chato e foca claramente a funcionalidade bruta.


Página inicial de Bloomberg

O brutalismo está fazendo um retorno sólido. Feio, cru, livre de design convencional, efeitos de flutuadores loucos e ornamentos superficiais estão em toda parte. Muitos puristas consideram essa tendência áspera, acidentada, desconfortável, confrontativa e cínica. Isto é, de propósito.


The Outline, uma revista on-line, opta por um estilo brutal e brilhante que desmente seu estilo editorial nervoso.

O brutalismo tem uma abordagem mais primitiva para o design e coloca o foco de volta no núcleo do design web: seu código. O brutalismo é muitas vezes representado como uma tendência de design "feio", mas temos que olhar para além disso. A filosofia por trás do movimento brutalista não é tornar as coisas "feias", mas cruas e sem adornos.

Poderíamos dizer que os sites brutalistas de hoje são baseados na web DIY dos anos 90, focada em uma abordagem interna, em vez de ocultar a funcionalidade por trás de uma bela fachada.

O design da interface do usuário para o popular site de compartilhamento social Reddit é sem remédio e sem dinheiro, repleto de tipografia na web dos finais dos anos 90, controles pesados ​​não refinados e quase nenhuma sala de respiração vertical.


Reddit vai para a funcionalidade, abraçando os links azuis brilhantes da web adiantada.
Reddit vai para a funcionalidade, abraçando os links azuis brilhantes da web adiantada.

O designer Pierre Buttin levou o brutalismo a um novo extremo com uma série de aplicativos móveis redesenhados. Em seu último projeto, intitulado Redesign Brutalistas, Buttin torna Facebook, Instagram, Twitter e outras aplicações populares em um estilo brutalista, com layouts de texto pesado e projetos achatados.


O aplicativo móvel do Facebook foi redesenhado no estilo brutalista.


O estilo de design limpo e leve do Twitter, uma reformulação brutalista.

Brutalismo vs. Minimalismo

O brutalismo e o minimalismo não devem ser vistos comparativamente, mas como uma nova maneira de ver as coisas e outra abordagem para projetar. O brutalismo é um impulso contra a homogeneização dos sites e aplicativos atuais, mas antes que os designers possam começar a projetar um site usando a abordagem brutalista, eles devem saber primeiro quais regras vão quebrar.

O design convencional e minimalista não será substituído pelo brutalismo. Devemos olhar para o brutalismo como uma cultura de design que desafia o status quo - uma cultura que está cansada de ser dito o que é "melhor".

Não há certo ou errado ao escolher entre esses estilos para o próximo projeto. No entanto, antes de acabar e projetar seu próximo site ou aplicativo em um estilo de design brutalista, certifique-se de conhecer seu público. Assuma o risco se você acha que a empresa e seu público irão apreciá-lo.

O design web brutalista atrai atenção e a consciência da marca está crescendo tremendamente rápido. Regras são feitas para serem quebradas. Atreva-se a deixar a web ser a web. Atreva-se a se destacar e ser um pouco ousado, mesmo que um pouco estranho.

POR PASCAL POTVIN - DESIGNER @TOPTAL

ARTIGO ORIGINAL: Diseño Web Brutalista, Diseño Web Minimalista y el Futuro del Web UX

Torne-se um designer de classe mundial fazendo do mundo seu escritório

O design excelente nos guia com perfeição para um resultado encantador. Abrange toda uma experiência à medida que interagimos com um produto ou serviço. O design excelente parece simples, mas é somente através de uma compreensão profunda das pessoas e da decisão de desafiar a complexidade que o grande design é alcançado.



A viagem nos ajuda a desvendar essa complexidade ao dar novas perspectivas às ideias, além de nos ajudar a experimentar problemas que afetam o mundo em uma escala global - ou mesmo aqueles pequenos detalhes que podemos perder enquanto estamos sentados em um escritório. Um voo atrasado ou como o seu cacau é polvilhado no seu café naquela nova cidade revela muito sobre a grande experiência do usuário e sobre como projetar a emoção. A viagem ajuda a compreender os ecossistemas inteiros e oferece uma visão abrangente sobre como esses toques muitas vezes esquecidos podem mudar completamente o humor, criar um sorriso e construir uma marca. As melhores marcas são as marcas que têm empatia e sabem exatamente para quem eles existem e como entregar algo que essas pessoas se preocupam.

Tome Airbnb, por exemplo. Eles criaram todo um ecossistema de experiência para atender a alegria ao entender a jornada do usuário em todas as perspectivas, superando as expectativas desde o início, adicionando esses detalhes, como a fotografia profissional gratuita; e durante os primeiros dias, literalmente, mergulharam na experiência do usuário dormindo nos pisos de seus primeiros adotadores para entender o problema que eles estavam apaixonados por resolver de todos os ângulos. Os designers precisam experimentar pontos de dor, bem como o encanto da solução final para realmente oferecer trabalho de classe mundial, e é isso que a viagem faz por você.

Experimentando o mundo e aplicando novas idéias

Ver o mundo pode nos tornar designers mais produtivos. Estar na estrada significa que nem sempre podemos estar online. Esta interrupção periódica forçada ajuda a manter o foco, porque simplesmente não há tempo para distrações online quando cada segundo conta. Pensando em tempos em que a produtividade aumentou, eu fui levado aos momentos intermediários quando, de repente, me senti intusiasmado para tirar meu caderno no ar, por causa do modo como o sol atingiu o monitor na minha frente durante o meu vôo e me lembrou desse otimismo futurista que se emprestou perfeitamente à rebrand que eu estava trabalhando. Com maior produtividade, chegamos a soluções mais rápidas e com menos estresse. Usando nossas próprias ideias estamos fazendo um favor aos nossos clientes, bem como aos seus produtos. Além disso, descobriu-se que a viagem pode realmente nos fazer mais feliz e saudável.

As soluções de design melhoram quando entendemos mais sobre pessoas, o mundo e como interagimos com a tecnologia. Às vezes, são as coisas pequenas nas cidades que nos dão grandes idéias e novas abordagens para a resolução de problemas. Geralmente, quanto mais obscuro o desafio, mais emocionante é a aprendizagem e a aplicação da percepção. Estar em novas cidades e ver como as pessoas usam a tecnologia para facilitar suas vidas nos ajuda a projetar soluções de design culturalmente e contextualmente relevantes. Foi só depois de viver em Berlim por um tempo que nossa equipe entendeu como os habitantes locais usavam a tecnologia, bem como sua atitude em relação a ela. Na época, estávamos projetando um alarme interativo que o despertava com conteúdo de áudio de notícias ao vivo e tocava sua música favorita.



Após extensas pesquisas e testes de usuários, descobrimos que as pessoas tinham tendência a desligar seus smartphones e seu wifi durante a noite, o que, obviamente, significava que nossa abordagem ao desafio mudou significativamente. Começamos a construir uma experiência que já não dependia de uma conexão com a internet. Em São Francisco, é fácil esquecer que nem todos têm o mais atual smartphone nos bolsos e que apenas 42,3% do mundo está online. Porém, também em São Francisco ou em Seul vislumbraremos um futuro perfeitamente conectado, onde o conteúdo é contextual e relevante e até mesmo desbloquear um novo espaço de escritório será apenas com um toque a distância. É tão importante mergulhar-nos nas últimas tendências de design e interação, tão como experimentar sistemas completamente off-line. Tome como exemplo a mPesa que permite que os africanos enviem e recebam dinheiro com nada além de um telefone celular básico. Não é necessária nenhuma conta bancária, conexão ou transações em papel.

É uma perspectiva global que nos dá uma visão local.

Melhorando a experiência global do usuário com sua perspectiva pessoal

Uma experiência interessante é sentar-se no metrô em Melbourne. É o oposto do sistema de transporte bem embalado e altamente eficiente em Taipei, onde tudo se parece automatizado e puntual. Em Melbourne, com a grande infraestrutura da cidade, as jornadas são longas e, além disso, o estilo de vida relaxado faz do metrô uma experiência social. Não é incomum começar uma conversa com a pessoa sentada ao seu lado.

Em cidades rápidas como Taipei, Londres e Nova York, a socialização parece invasiva. Os passageiros são absorvidos em seus fones de ouvido e interfaces e usam sua tecnologia para criar sua própria barreira pessoal. Compreender as diferenças regionais melhora nosso processo de design, ajudando-nos a entender o que a tecnologia usa e nos conscientiza dos comportamentos existentes. Um aplicativo que oferece comida sob demanda funcionará perfeitamente em um local onde conveniência, saúde e eficiência são importantes, como em Palo Alto ou São Francisco. No entanto, pode ser um fracasso completo em cidades como Taipei, onde comer é uma experiência social e comunitária, impulsionada pelo alimento de rua e disponibilidade local.



Paul Graham articula a maneira mágica que as cidades afetam a cada momento:

"Uma cidade fala com você principalmente por acidente - nas coisas que você vê através das janelas, em conversas você ouve demais. Não é algo que você precisa procurar, mas algo que você não pode desligar."

É a maneira permeável que as novas experiências moldam quem somos como seres humanos e designers nestas viagens. A viagem oferece um rico intercâmbio cultural e uma contaminação cruzada de idéias para nos conectar com a diversidade. Estar em um novo lugar é como ser uma tela em branco para a experiência - e ter uma mente aberta geralmente leva a gerar as melhores idéias e executar os projetos mais frescos. Pensar em nossos pés levando-nos para fora de nossas zonas de conforto nos dá novos conhecimentos.

Um designer pode aprender muito com a publicidade

Uma vez, uma perspectiva completamente nova foi encontrada aparentemente fora do alcance. Eu tinha acordado especialmente cedo uma manhã para pegar um vôo de Santiago para Atlanta, e me encontrei no aeroporto muito antes do voo ter partido. Com tempo para matar, terminei conversando com uma mulher gentil que estava em uma viagem pelo mundo. Ela me contou sobre o seu fascínio pela publicidade que estava nos metros em cada cidade que visitou. Ela havia dito que ela aprendeu mais sobre as cidades através da forma como os produtos foram anunciados.

"Há muito a ser descoberto sobre os papéis de gênero, aspirações e sonhos, apenas olhando os anúncios no metrô. Em Santiago, por exemplo, há anúncios de lingerie de deusas latinas escassamente vestidas ao lado de anúncios de dicas de dieta".

Ela continuou a dizer como isso afeta essa voz silenciosa das cidades e nos ajuda a entender o que motiva as pessoas.

Na verdade, a publicidade pode fornecer pistas culturais que ajudem os designers a manterem-se atualizadas com as últimas tendências, além de fornecer informações sobre o que motiva uma cidade. Sentei-me na parte de trás de um Uber e contei os outdoors que ficavam em destaque ao longo da rodovia desolada durante a viagem do Vale a San Francisco. Visualmente esparso, notei uma campanha de outdoor que tinha apenas uma única linha: "pergunte ao seu desenvolvedor", com um pequeno logotipo vermelho Twillio na parte inferior. A implicação foi clara. Os não desenvolvedores teriam que pedir a alguém mais "experiente" do que eles para entender o outdoor.



Este é apenas um exemplo do que uma tal campanha revela sobre o que impulsiona San Francisco. Desenvolvedores são claramente respeitados e em uma posição de influência, e a colocação e o conteúdo do outdoor mostram que há uma população demográfica clara que habita a cidade, que consiste em negócios e tecnologia. Eu certamente nunca vi um outdoor que anunciava qualquer coisa iniciada ou relacionada à tecnologia em Santiago, onde o conteúdo era conduzido por aspirações bastante diferentes. Muitas vezes eu via anúncios de Becks ou Corona que representavam jovens, homens de cintura com uma garrafa na mão e algumas mulheres bonitas ao fundo, desfrutando de uma cerveja na "Playa". Foi a atitude despreocupada que revelou muito sobre as aspirações de estilo de vida da cultura, colocando ênfase na amizade, beleza e qualidade de vida. A direção da arte do anúncio mostrou um alargamento de lente ensolarado, uma tendência atualmente evidente na publicidade e no cinema.

Ficar no topo das tendências de design atuais

O design plano foi outra tendência de longo prazo no design da interface, ultrapassando o skeuomorfismo (como popularizado pela Apple) e lentamente se aproximou da publicidade clássica de maneiras interessantes. Especialmente em cidades como Londres, Paris e Nova York, onde estratégias de campanhas digitais integradas são primordiais para o sucesso de uma campanha.

Na verdade esta campanha para o McDonalds mostra efeitos de design plano e alargado da lente. Um anúncio de impressão simples não o corta, e a ideia de campanha criativa é agora chamada de "#hashtagfinking" , onde as estratégias completas e offline precisam ser consideradas. São essas cidades onde as tendências criativas são muitas vezes definidas, inspirando-se na arte, moda e cultura. Estas tendências criativas atingem a popularidade dominante, geralmente provocadas por serem trazidas para a casa graças às indústrias de publicidade e cinema, que contam uma história visual sobre o que é importante para uma cultura.

Permanecer em contato com as tendências publicitárias nos torna melhores designers porque:
Podemos identificar tendências em projetos e produtos
Podemos entender melhor o que motiva uma cultura
Podemos aprender com a clareza da voz nas campanhas efetivas
Podemos entender estratégias claras em comunicação

Esteticamente falando, há um monte de valor que uma viagem pode adicionar ao seu trabalho de design simplesmente experimentando novos lugares. Eu acredito que estar em uma nova localização pode ajudar a acabar com a estagnação que até mesmo os melhores designers enfrentam ocasionalmente. Estando familiarizado com novos pontos turísticos, sons, sabores e cheiros, nos tornamos mais receptivos ao mundo que nos rodeia - vamos ligar e perceber as coisas com novos olhos e mentes. Ao usar novas partes do nosso cérebro e ao fato de que estamos tocando isso, também somos mais propensos a abordar os problemas de forma diferente ou a chegar a conclusões alternativas simplesmente porque estamos mais conectados ao mundo naquele momento. As vezes está nos detalhes do nosso novo ambiente - a forma como a arquitetura em Melbourne faz você sonhar com geometria e encoraja você a repensar a grade do último design do site, ou a maneira como os cabelos pretos da menina brilhavam ao sol com tons azulados, lembrando que você adicionasse profundidade ao seu trabalho.

Explorar é uma grande parte do design e nos ajuda a chegar a resultados que são inovadores e breves. Da mesma forma, explorar o mundo significa que, ao entender as questões globais, as culturas e estar inspirado em novos locais, podemos traduzir efetivamente essas novas idéias em um design que encanta os clientes e as pessoas que usam sua solução.

BY DANIELLE REID - FREELANCE DESIGNER @ TOPTAL (TRANSLATED BY YESICA DANDERFER)

ARTIGO ORIGINAL: Conviértete en un Diseñador de Clase Mundial al Hacer del Mundo tu Oficina

Um guia de instrução para animação SVG

Qualquer engenheiro de ponta que valha o seu sal é consciente dos desafios que o ecossistema fragmentado de dispositivos traz. Diferentes tamanhos de tela, resoluções e proporções de aspecto dificultam a entrega de uma experiência consistente. Mais ainda, para aqueles que querem oferecer uma experiência perfeita para pixel.

Gráficos vetoriais escaláveis ​​(SVGs) ajudam a resolver uma parte desse problema e a fazê-lo muito bem. Embora eles tenham suas limitações, os SVGs podem ser muito úteis para certas ocasiões e, se você tiver uma boa equipe de design, você também pode criar uma experiência mais visualmente deslumbrante sem colocar carga indevida no navegador ou prejudicar os tempos de carregamento.



Durante os últimos meses, trabalhei em um projeto que faz uso extensivo do SVG e suas capacidades de animação e efeito. Neste artigo, vou compartilhar como você pode usar o SVG e suas técnicas de animação para trazer uma nova vida ao seu trabalho de front-end na web.

Gráficos vetoriais escaláveis

O SVG é um formato de imagem baseado em XML, bem como o funcionamento do HTML. Ele define diferentes elementos para uma série de formas geométricas familiares que podem ser combinadas na marcação para produzir gráficos bidimensionais.

A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium (W3C) em 1999.

Todos os principais navegadores da web tiveram apoio de renderização SVG.

Uma vez que os gráficos SVG são documentos XML, os navegadores da Web fornecem APIs baseadas em nós DOM que podem ser usadas para interagir com as imagens. Fale sobre trazer fotos para a vida!

Caminhos SVG

Se houver um elemento superado em SVG, esse seria o elemento [path].

O elemento do caminho é uma forma básica que pode ser usada para criar quase qualquer formato 2D avançado que você possa imaginar.

O elemento funciona tomando uma seqüência de comandos de desenho. É muito parecido com a linguagem de programação do logotipo de 1967, apenas modernizada e projetada para gráficos sofisticados. O elemento leva essa seqüência de comandos de desenho através do atributo d.

<!-- A right-angled triangle -->
<path d="M10 10 L75 10 L75 75 Z" />

Você pode pensar em uma caneta virtual que desenha na tela, e os comentários de desenho no elemento de caminho apenas controlam a caneta. No exemplo acima, a caneta está sendo instruída para mover para a posição (10, 10)(M10 10), para desenhar uma linha para (75, 10)( L75 10), para desenhar uma linha (75, 75) L75 75 e fechar o caminho retornando ao ponto de partida (Z).

Usando outros comandos de desenho, como arcos (A), curvas de bezier quadrático (Q), curvas de bezier cúbicas (C), etc, você pode criar formas e gráficos muito mais complexos em SVG.

Você pode aprender muito mais sobre o elemento do caminho aqui.

Caminhos SVG e CSS

"Ok, Juan, entendi. Os caminhos são poderosos, mas como eu os animo? ", Você diz.

Para a nossa primeira técnica, vamos aproveitar dois atributos SVG: stroke-dasharray e stroke-dashoffset.



O atributo stroke-dasharray controla o padrão de traços e intervalos usados ​​para traçar o caminho. Se você quisesse desenhar suas linhas como um grupo de traços e lacunas em vez de um golpe contínuo de tinta, esse é o atributo que você usaria.

Com as imagens SVG sendo parte do DOM do navegador web e stroke-dasharray sendo um elemento de apresentação, o atributo também pode ser configurado usando CSS.

Da mesma forma, o atributo stroke-dashoffset (que especifica o quão longe no padrão de traço para iniciar o traço) também pode ser controlado usando CSS.

Esses dois atributos SVG, juntos, podem ser usados ​​para animar caminhos SVG, dando ao espectador a ilusão de que os caminhos estão sendo desenhados de forma gradual.

Tome esta curva de bezier quadrático, por exemplo:

<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Para animar esse caminho como se estivesse sendo desenhado de forma gradual e sem problemas na tela, teremos que definir os comprimentos do tabuleiro (e intervalo), usando o atributo stroke-dasharray, igual ao comprimento do caminho. Isto é para que o comprimento de cada traço e intervalo na curva tracejada seja igual ao comprimento de todo o caminho.

Em seguida, definiremos o deslocamento do traço, usando o atributo stroke-dashoffset, para 0. Isso fará com que o caminho apareça na tela como uma curva sólida (estamos essencialmente olhando o primeiro dash, e já fizemos cada intervalo de traço o todo comprimento da curva). Ao definir o deslocamento de traço igual ao comprimento da curva, acabaremos com uma curva invisível (agora estamos olhando a curva sendo renderizada como uma lacuna inteira - a parte que segue imediatamente um traço).

Agora, ao animar a propriedade stroke-dashoffset, você pode fazer a curva aparecer na tela gradualmente.

Como você pode ver, a curva está sempre lá. Estamos apenas alterando o deslocamento do painel para que a parte tracejada apareça um bit a bit.

Você pode dar um passo adiante usando o mesmo princípio, mas com mais caminhos:

Aqui você tem uma curva preta que é fixa, uma vermelha que se move ao longo do caminho, e outra preta que segue o vermelho, mas 40px atrás.

Stroke-dasharray e stroke-dashoffset são dois atributos muito poderosos que podem ser usados ​​para aplicar uma infinidade de animações e efeitos aos seus caminhos SVG. Você pode tentar esta ferramenta acessível que você pode usar para experimentar os dois atributos.

Animando objetos ao longo de caminhos SVG

Com SVG e CSS, outra coisa legal que você pode fazer é animar objetos ou elementos seguindo um caminho.

Existem 2 atributos SVG que vamos usar para a animação:
- offset-path: A propriedade CSS do caminho do deslocamento especifica o caminho do deslocamento onde o elemento é posicionado.
- Distância de deslocamento: a propriedade de CSS de distância especifica uma posição ao longo de um caminho de deslocamento.

Ao combinar essas duas propriedades, você pode criar animações assim facilmente:

Como você pode ver, temos um novo elemento div.ball.

Este elemento pode ser qualquer coisa, uma div, uma imagem, texto, seja o que for. A idéia neste exemplo é que, com o uso do caminho de deslocamento e distância de deslocamento, você pode dar ao elemento um caminho a seguir e animar a distância e o elemento se moverá através do caminho.

Animações SVG usando JavaScript

Se tudo isso não é bastante sofisticado, você sempre pode recorrer ao JavaScript.

Animar elementos SVG com JavaScript pode ser como animar os elementos DOM. No entanto, com o JavaScript, você pode alcançar as técnicas de animação que fizemos anteriormente, mas com mais facilidade.

Anteriormente, tivemos que codificar os comprimentos do caminho em nosso CSS. Com a ajuda da função JavaScript path.getTotalLength(), é possível calcular o comprimento do caminho on-the-fly e usá-lo conforme necessário. Você pode aprender mais sobre isso aqui.

Além disso, várias bibliotecas já estão à sua disposição, o que pode tornar as animações SVG muito mais fáceis do que já são.

Snap.svg não só facilita a criação de imagens SVG usando o JavaScript, mas as anima tão simples como chamar .animate({}).

Outra biblioteca, anime.js, permite que você faça um elemento div seguir um caminho SVG com apenas algumas linhas de código.

Se você está procurando uma biblioteca que faz mais por conta própria, mas faz com que os resultados ainda parecem deslumbrantes, então Vivus é o que você está procurando. É preciso uma abordagem diferente, mais orientada a configuração, para a animação do caminho do SVG. Com esta biblioteca, você só precisa adicionar uma ID ao elemento SVG que deseja desenhar e definir um objeto Vivus com essa ID. Vivus cuidará do resto.

Leitura adicional

Abaixo estão uma lista de recursos que você pode achar útil ao lidar com imagens SVG e animá-las:

Para aprofundar a animação SVG, você pode ler este breve artigo sobre as três formas de animar imagens SVG e assistir o screencast de vídeo por CSS Tricks.

Uma coisa que este artigo não abrange é a animação de imagens SVG com linguagem sincronizada de integração multimídia (SMIL). Ao usar CSV para SVG dá-lhe a vantagem de trabalhar com algo que você já conhece, o SMIL leva as coisas ao próximo nível.

Com o SMIL, você pode implementar efeitos de animação avançados, como o morphing de forma usando o SVG sozinho. Um guia curto e eficaz para usar o SMIL para tais efeitos está disponível aqui.

Embora o suporte para SMIL seja um pouco nervoso neste momento (sem trocadilhos).

Animações sem compromissos para a Web

Neste artigo, você passou por várias maneiras de animar elementos SVG usando CSS ou elemento HTML em caminhos SVG.

SVG é leve e pode ser usado para produzir gráficos nítidos, independentemente do tamanho da tela, nível de zoom e resolução da tela. Com o SVG, oferecer uma experiência moderna e vívida agora é mais fácil do que nunca, ao mesmo tempo em que colhe os benefícios do uso de tecnologias web padrão.

E é isso! Espero que você tenha encontrado este tutorial de animação SVG útil e gostou de lê-lo.

BY JUAN CALOU - FREELANCE SOFTWARE ENGINEER @ TOPTAL

ARTIGO ORIGINAL: Guía: Cómo Animar con SVG

Introdução ao PHP 7 - O que há de novo e o que se foi

Um dos eventos mais emocionantes em 2015 no mundo do PHP foi o lançamento do PHP 7, 10 anos a partir do lançamento da última versão principal, o PHP 5. Com um grande passo em frente, o PHP 7 apresenta muitos novos recursos e atualizações de desempenho.

No entanto, ele também remove a funcionalidade antiga e obsoleta, que introduz algumas quebras de compatibilidade, dificultando a migração de aplicativos mais antigos para a nova versão. Este guia deve servir como um passeio rápido sobre o que esperar se você planeja mover suas aplicações existentes, ou criar novas, em cima do PHP 7.

Mas espere, para onde foi o PHP 6?

Se você não trabalhou com PHP ultimamente, você pode se perguntar o que aconteceu com o PHP 6, por que o salto do PHP 5 para o PHP 7? Bem, para ser breve, o PHP 6 foi uma falha. A principal característica da versão 6 foi o suporte nativo para caracteres Unicode, pois o PHP é usado principalmente no desenvolvimento web e a web precisa do Unicode, então o movimento para trazer Unicode para PHP fazia sentido.

A idéia era oferecer suporte completo para o Unicode ao próprio núcleo. Isso teria trazido capacidades extensas para o idioma, desde a capacidade de usar emojis tolos como nomes de funções e variáveis, até uma poderosa funcionalidade de string internacional. Por exemplo, quando outro idioma usa maiúsculas e minúsculas de forma diferente do inglês, ou quando um nome em caracteres chineses precisa ser convertido em inglês.


PHP 6 era ambicioso, porém sem valor. Desta forma surgiu o PHP 7, ignorando a versão 6 no processo.

Infelizmente esse plano ambicioso revelou-se um problema maior do que o esperado. Grande parte da base do código teve que ser alterada para suportar o Unicode para ambas as extensões principais e importantes, o que se mostrou tedioso e complicado. Isso desacelerou o desenvolvimento de outros recursos no idioma, frustrando muitos desenvolvedores do PHP no processo. Ocorreram obstáculos adicionais, o que resultou em menos interesse em desenvolver um suporte Unicode nativo, levando finalmente o projeto a ser abandonado.

Uma vez que os recursos, como livros e artigos, foram escritos para o PHP 6 e seu suporte Unicode, a nova versão seria renomeada PHP 7 para evitar confusão.

De qualquer forma, deixando o passado triste para trás, vamos ver o que o PHP 7 traz para a festa.

Batalha de Desempenho, PHP 7 vs. PHP 5

Como praticamente todas as atualizações, esperam-se pequenas atualizações de desempenho. No entanto, desta vez o PHP traz uma melhoria significativa em relação às versões anteriores, tornando o desempenho puro um dos recursos mais atraentes do PHP 7. Isso vem como parte do projeto "PHPNG", que aborda o core do próprio mecanismo Zend.

Ao refatorar estruturas internas de dados e adicionar uma etapa intermediária para compilação de código na forma de uma Árvore de sintaxe abstrata (AST), o resultado é um desempenho superior e uma alocação de memória mais eficiente. Os próprios números parecem muito promissores; os benchmarks feitos em aplicativos do mundo real mostram que o PHP 7 é duas vezes mais rápido do que o PHP 5.6 em média e resulta em 50 por cento menos consumo de memória durante os pedidos, tornando o PHP 7 um rival forte para o compilador JH HHVM do Facebook. Dê uma olhada nesta infografia do Zend que descreve o desempenho de alguns CMS e Frameworks comuns.


O PHP 7 parece familiar, mas está atento ao desempenho. O refinado Zend Engine e os ganhos de desempenho resultantes fazem uma enorme diferença.

A diminuição do consumo de memória também permite que as máquinas menores atendam melhor os pedidos, além da oportunidade de construir serviços micro em torno do PHP. As mudanças internas, em particular a implementação AST, também abre possibilidades para otimizações futuras que poderiam impulsionar o desempenho ainda mais. Uma nova implementação interna de um compilador JIT está sendo considerada para futuras versões.

PHP 7 Syntactic Sugar

O PHP 7 vem com novos recursos de sintaxe. Embora não estenda os recursos do próprio idioma, eles fornecem uma maneira melhor ou mais fácil de tornar seu código mais agradável para escrever e agradar aos olhos.

Declarações de importação de grupo

Agora podemos agrupar declarações de importação para classes provenientes do mesmo espaço de nomes em uma única linha [use]. Isso deve ajudar a alinhar declarações de forma significativa ou simplesmente salvar alguns bytes em seus arquivos.

use Framework\Module\Foo;
use Framework\Module\Bar;
use Framework\Module\Baz;

Com o PHP 7 podemos usar:

use Framework\Module\{Foo, Bar, Baz};

Ou, se você preferir um estilo multi-line:

use Framework\Module{
    Foo,
    Bar,
    Baz
};

Operador de Coalescente Nulo

Isso resolve um problema comum na programação do PHP, onde queremos atribuir um valor a uma variável de outra variável, se esta última estiver realmente configurada, ou de outra forma fornecer um valor diferente para ela. É comumente usado quando trabalhamos com a entrada fornecida pelo usuário.

Pre-PHP 7:

if (isset($foo)) {
    $bar = $foo;
} else {
    $bar = 'default'; // we would give $bar the value 'default' if $foo is NULL
}

Depois do PHP 7:

$bar = $foo ?? 'default';

Isso também pode ser alinhado com várias variáveis:

$bar = $foo ?? $baz ?? 'default';

Operador spaceship

O operador spaceship (<=>) permite uma comparação de três vias entre dois valores, não apenas indicando se eles são iguais, mas também qual é maior, na desigualdade retornando 1,0 ou -1.

Aqui podemos tomar diferentes ações, dependendo de como os valores diferem:

switch ($bar <=> $foo) {
    case 0:
        echo '$bar and $foo are equal';
    case -1:
        echo '$foo is bigger';
    case 1:
        echo '$bar is bigger';
}

Os valores comparados podem ser inteiros, flutuadores, strings ou mesmo arrays. Verifique a documentação para ter uma idéia de como diferentes valores são comparados entre si. [https://wiki.php.net/rfc/combined-comparison-operator]

Novos recursos no PHP 7

Mas, claro, o PHP 7 também traz funcionalidade nova e emocionante.

Tipos de Parâmetros Escalares e Dicas de Tipo de Retorno

O PHP 7 estende as declarações de parâmetros anteriores dos parâmetros em métodos (classes, interfaces e arrays), adicionando os quatro tipos escalares; Inteiros ( int), flutuadores ( float), booleanos ( bool) e strings como possíveis tipos de parâmetro.

Além disso, podemos opcionalmente especificar quais tipos de métodos e funções retornam. Os tipos suportados são bool, int, float, string, array, callable, nome da classe ou interface, auto e pai (para métodos de classe)

class Calculator
{
    // We declare that the parameters provided are of type integer
    public function addTwoInts(int $x, int $y): int {
        return $x + $y; // We also explicitly say that this method will return an integer
    }
}

As declarações de tipo permitem a construção de aplicativos mais robustos e evitam passar e retornar valores incorretos das funções. Outros benefícios incluem analisadores de código estático e IDEs, que fornecem uma melhor visão sobre a base de código se faltar DocBlocks.

Uma vez que o PHP é uma linguagem de tipagem fraca, certos valores para os tipos de parâmetros e de retorno serão lançados com base no contexto. Se nós passamos o valor "3" em uma função que tenha um parâmetro de tipo declarado int, o intérprete o aceitará como um número inteiro e não lançará nenhum erro. Se você não quiser isso, você pode ativar strict mode, adicionando uma diretiva [declare].

declare(strict_types=1);

Isso é definido em uma base por arquivo, como uma opção global seria dividir repositórios de código para aqueles que são construídos com rigor mundial em e aqueles que não são, resultando em um comportamento inesperado quando combinamos o código de ambos.

Exceções do motor

Com a adição de exceções do mecanismo, erros fatais que resultariam na rescisão do script podem ser capturados e tratados com facilidade.

Erros como chamar um método inexistente, não encerrará o script, em vez disso, eles lançam uma exceção que pode ser tratada por um bloco try catch, que melhora o tratamento de erros para seus aplicativos. Isso é importante para certos tipos de aplicativos, servidores e daemons porque erros fatais exigiriam que eles reiniciassem. Os testes em PHPUnit também devem se tornar mais utilizáveis ​​à medida que erros fatais deixam cair o conjunto completo de testes. As exceções, em vez de erros, seriam tratadas em cada caso de teste.


O PHP 7 parece familiar, mas está atento ao desempenho. O refinado Zend Engine e os ganhos de desempenho resultantes fazem uma enorme diferença.

O PHP 7 adiciona várias novas classes de exceções com base no tipo de erros que podem ser encontrados. Para manter a compatibilidade entre versões, Throwable foi adicionada uma nova interface que pode ser implementada a partir de exceções de motor e exceções de usuário. Isso foi necessário para evitar exceções do motor para estender a classe de exceção base, resultando em antigas exceções de captura de código que não existiam antes.

Antes do PHP 7 isso teria encerrado o script com um erro fatal:

try {
    thisFunctionDoesNotEvenExist();
} catch (\EngineException $e) {
    // Clean things up and log error
    echo $e->getMessage();
}

Classes Anônimas

As classes anônimas são primas de funções anônimas que você pode usar em uma simples instância de curto prazo. As classes anônimas são facilmente criadas e usadas como um objeto comum.

Pre-PHP 7

class MyLogger {
  public function log($msg) {
    print_r($msg . "\n");
  }
}

$pusher->setLogger( new MyLogger() );

Com a classe anônima:

$pusher->setLogger(new class {
  public function log($msg) {
    print_r($msg . "\n");
  }
});

As classes anônimas são úteis no teste de unidades, particularmente em objetos e serviços de mocking tests. Isso nos ajuda a evitar pesadas bibliotecas e estruturas de simulação criando um objeto simples que fornece a interface que queremos fingir.

Funções CSPRNG

Foram adicionadas duas novas funções para gerar strings e números inteiros criptograficamente seguros.

random_bytes(int $len);

Retorna uma string aleatória com comprimento $len.

random_int(int $min, int $max);

Retorna um número entre $min e $max.

Unicode Codepoint Escape Syntax

Ao contrário de muitos outros idiomas, antes do PHP 7, o PHP não tinha uma maneira de escape de um codigo Unicode em literais de strings. Essa funcionalidade adiciona a seqüência de escape "\u" para produzir esses caracteres usando seu código UTF-8. Isso é melhor do que inserir os caracteres diretamente, permitindo um melhor tratamento de caracteres invisíveis, bem como caracteres que possuem a mesma representação gráfica, mas diferem em significado.

echo "\u{1F602}"; // outputs 😂

Observe que isso interrompe o código existente com a seqüência \u porque altera o comportamento.

Geradores são atualizados

Os geradores em PHP também possuem alguns recursos adicionais agradáveis. Agora, os geradores têm uma declaração de retorno que pode ser usada para permitir a saída de um valor final após a iteração. Isso pode ser usado para verificar se o gerador foi executado sem erros e permite que o código que chamou o gerador para lidar com vários cenários adequadamente.

Além disso, os geradores podem retornar e produzir expressões de outros geradores. Isso permite que eles dividam operações complexas em unidades mais simples e modulares.

function genA() {
    yield 2;
    yield 3;
    yield 4;
}

function genB() {
    yield 1;
    yield from genA(); // 'genA' gets called here and iterated over
    yield 5;
    return 'success'; // This is a final result we can check later
}

foreach (genB() as $val) {
    echo "\n $val"; // This will output values 1 to 5 in order
}

$genB()->getReturn(); // This should return 'success' when there are no errors.

Expectativas

As expectativas são um aprimoramento da função assert(), mantendo a compatibilidade com versões anteriores. Eles permitem asserções de custo zero no código de produção e fornecem a capacidade de lançar exceções personalizadas quando a afirmação falhar, o que pode ser útil durante o desenvolvimento.

assert() torna-se uma construção de linguagem em PHP 7. As afirmações devem ser usadas apenas para fins de depuração no desenvolvimento e testes de ambientes. Para configurar o seu comportamento, recebemos duas novas diretivas.

zend.assertions
1: gerar e executar o código (modo de desenvolvimento) (valor padrão)
0: gera o código, mas salta em torno dele em tempo de execução
-1: não gera código tornando zero-custo (modo de produção)


assert.exception
1: lance quando a afirmação falhar, seja jogando o objeto fornecido como a exceção ou jogando um novo objeto AssertionError se a exceção não for fornecida
0: use ou gere um Throwable como descrito acima, mas apenas gere um aviso com base nesse objeto ao invés de jogá-lo (compatível com o comportamento do PHP 5)

Preparando para mover do PHP 5 para o PHP 7

A introdução de um lançamento importante traz a oportunidade de alterar/atualizar funcionalidades mais antigas ou até mesmo removê-las se elas forem consideradas antigas demais ou tenham sido obsoletas há algum tempo. Tais mudanças podem introduzir quebras na compatibilidade em aplicativos mais antigos.

Outra questão que surge de saltos dessa versão é que bibliotecas e frameworks importantes de que você depende podem ainda não terem sido atualizados para suportar a versão mais recente. A equipe do PHP tentou tornar as novas mudanças compatíveis com versões anteriores e permitir que a migração para a nova versão seja tão indolor quanto possível. Aplicativos mais recentes e atualizados devem achar mais fácil mudar para a nova versão, enquanto aplicativos mais antigos podem ter que decidir se os benefícios superam o custo, possivelmente escolhendo não atualizar.

A maioria das quebras são menores e podem ser mitigadas facilmente, enquanto outras podem exigir mais esforço e tempo. Basicamente, se você tivesse avisos de desaprovação em seu aplicativo antes de instalar o PHP 7, você provavelmente receberá erros que quebrarão o aplicativo até serem corrigidos. Você foi avisado, certo?

SAPIs e extensões antigas

Mais importante ainda, os SAPIs antigos e obsoletos foram removidos como a extensão mysql (mas você não deveria usar isso em primeiro lugar, certo?). Para obter uma lista completa de extensões, você pode verificar estas RFCs aqui e aqui.

Além disso, outros SAPIs estão sendo portados para o PHP 7.


Um monte de SAPIs e extensões antigas foram retirados do PHP 7. Estamos achando que não serão perdidas.

Sintaxe Variável Uniforme

Esta atualização fez algumas mudanças a favor da consistência para construções ​​variáveis. Isso permite expressões mais avançadas com variáveis, mas introduz mudanças no comportamento em alguns outros casos, como mostrado abaixo.

                        // old meaning            // new meaning
$$foo['bar']['baz']     ${$foo['bar']['baz']}     ($$foo)['bar']['baz']
$foo->$bar['baz']       $foo->{$bar['baz']}       ($foo->$bar)['baz']
$foo->$bar['baz']()     $foo->{$bar['baz']}()     ($foo->$bar)['baz']()
Foo::$bar['baz']()      Foo::{$bar['baz']}()      (Foo::$bar)['baz']()

Isso quebraria o comportamento de aplicativos que acessassem valores como este. Por outro lado, você pode fazer algumas coisas como esta:

// Nested ()
foo()(); // Calls the return of foo()
$foo->bar()();

// IIFE syntax like JavaScript
(function() {
    // Function body
})();

// Nested ::
$foo::$bar::$baz

Etiquetas de estilo antigo removidas

A abertura/fechamento de tags <% ... %>, <%= ... %>, são removidos e não mais válidos.

Nomes inválidos para Classes, Interfaces e Traits

Como resultado de adições como classes de parâmetros e tipos de retorno, as interfaces e os traits não podem mais ter os seguintes nomes:

bool
int
float
string
null
true
false

Estes causam quebras em aplicativos e bibliotecas existentes que os usam, mas devem ser fáceis de corrigir. Além disso, embora não provoquem nenhum erro e sejam válidos, o seguinte não deve ser usado porque eles são reservados para uso futuro:

resource
object
mixed
numeric

Para obter uma lista completa de alterações que quebrariam a compatibilidade, verifique este documento.

Você também pode usar o php7cc, que verifica seu código e pode detectar possíveis problemas que podem surgir se você mudar para o PHP 7. Mas, claro, não há melhor maneira do que instalar o PHP 7 e ver por si mesmo.

Possíveis problemas de compatibilidade do PHP 7

Compatibilidade de infraestrutura do PHP 7

Muitos serviços de hospedagem começaram a adicionar suporte para o PHP 7. Esta é uma boa notícia para os provedores de hospedagem compartilhada, pois os ganhos de desempenho permitirão aumentar o número de sites de clientes em seu hardware, reduzindo suas despesas operacionais e aumentando suas margens. Quanto aos próprios clientes, eles não devem esperar muito de um impulso nestas condições, mas para ser justo, a hospedagem compartilhada não é uma escolha orientada para o desempenho de qualquer maneira.

Por outro lado, os serviços que oferecem servidores privados virtuais ou servidores dedicados obterão os benefícios completos dessa colisão de desempenho. Alguns serviços PaaS, como o Heroku, apoiaram o PHP 7 no início, mas outros serviços, como a AWS Beanstalk e o OpenShift da Oracle, estão atrasados. Verifique o site do seu fornecedor PaaS para ver se o PHP 7 já é suportado, ou se o suporte virá no futuro próximo.

Claro, os provedores de IaaS permitem que você controle o hardware e instale o PHP 7 (ou compile se isso é mais do seu agrado). Os pacotes PHP 7 já estão disponíveis para os principais ambientes IaaS.

Compatibilidade de software PHP 7

Além da compatibilidade de infra-estrutura, você também precisa estar atento aos possíveis problemas de compatibilidade de software. Sistemas de gerenciamento de conteúdo populares como o WordPress, o Joomla e o Drupal adicionaram suporte para o PHP 7 com seus últimos lançamentos. Marcos importantes como Symfony e Laravel também gozam de suporte total.

No entanto, é hora de uma palavra de cautela. Este suporte não se estende ao código de terceiros na forma de complementos, plugins, pacotes ou o que seu CMS ou framework os chama. Eles podem sofrer problemas de compatibilidade e é sua responsabilidade garantir que tudo esteja pronto para o PHP 7.

Para repositórios ativos e mantidos, isso não deve ser um problema. No entanto, os repositórios mais antigos e não mantidos que não possuem suporte ao PHP 7 podem tornar sua aplicação inteira inutilizável.

O futuro do PHP

O lançamento do PHP 7 removeu o código antigo e obsoleto e preparou o caminho para novos recursos e atualizações de desempenho no futuro. Além disso, o PHP deverá obter otimizações de desempenho adicionais em breve. Apesar de ter algumas quebras de compatibilidade com lançamentos anteriores, a maioria dos problemas é fácil de resolver.

Bibliotecas e frameworks agora estão migrando seu código para o PHP 7, disponibilizando as versões mais recentes. Eu encorajo você a experimentá-lo e ver os resultados para você. Talvez o seu aplicativo já seja compatível e esteja à espera de usar, e se beneficiar do PHP 7.

POR VILSON DUKA - FREELANCE SOFTWARE ENGINEER @TOPTAL

ARTIGO ORIGINAL: Introducción A PHP 7: Qué Hay De Nuevo Y Qué Se Ha Ido