Posted on Deixe um comentário

20 tendências de web design para 2019

20 tendências de web design para 2019
Descubra as tendências, técnicas e ferramentas de design da Web que definirão o design do site e do produto digital em 2019 – e além.

Os designers têm uma… ansiosa… relação com a ideia de tendências. Por um lado, seguir a multidão se sente mal – afinal, a criatividade não está fazendo nada além do que todo mundo está fazendo? Para esta linha de pensamento, o único valor em saber o que está na moda é saber contra o que você está lutando. Você não pode simplesmente fazer o oposto de uma tendência, é claro. Mas saber quais são as tendências torna mais fácil comentá-las e / ou criticá-las sutilmente.

Por outro lado, há a ideia de que “a criatividade é saber como esconder suas fontes” – uma citação muitas vezes atribuída a Albert Einstein, embora mais provavelmente cunhada pelo humorista CEM Joad. (Apropriado, não?)

De qualquer forma, não é difícil saber o que é moda. Basta levantar os olhos do seu smartphone e dar uma olhada – ou não!

O que importa é entender o como e o surgimento e a adoção das tendências. Porque no final das contas, as tendências têm muito a nos dizer sobre o nosso momento cultural: o que amamos, o que odiamos, o que queremos mudar. Quanto mais nos aproximamos da compreensão dessas coisas, mais nos aproximamos de entrar na cabeça dos outros – para nos empatizarmos com eles. E, realmente, para nos entendermos.

Afinal, quando os historiadores da arte, os críticos de moda e os web designers do futuro relembram nossa era atual, o que eles verão e comentarão serão as principais tendências de nossos dias. Quando eles discutem a estética do 20teens, eles realmente estarão discutindo o que estava na moda – e o que resistiu às tendências.

Tendências, então, são história em formação. 

Com tudo isso em mente, vamos ver o que futuros historiadores dirão hoje. Com uma pequena ajuda de alguns formadores de opinião modernos.

Nosso primeiro colaborador é Zack Onisko , CEO da @dribbble , pai legal e guitarrista.

1. ilustração tridimensional


Homepage do passo usando a tendência da ilustração 3D para mostrar 4 figuras dos desenhos animados que rearranjam virtualmente elementos da interface.
Fonte


Justo quando você achava que o futuro era plano, marcas como Pitch e Stripe estavam jogando o peso de sua marca por trás de uma nova forma antiquada de ilustração: 3D. 

Não contentes com o estilo de ilustração recortada popularizado pelo Slack, os designers estão procurando adicionar profundidade e realismo aos gráficos projetados para confundir as fronteiras entre os mundos digital e físico. 

Em certo sentido, isso aguça o contraste entre produtos digitais e seres humanos, ao mesmo tempo em que os reúne em espaços imaginários onde as pessoas podem apreender e manipular elementos digitais (como os gráficos e ícones na seção de heróis de Pitch). Você não pode deixar de pensar na afirmação popular de que a verdadeira ruptura do Facebook é o modo como isso faz de nós, seus usuários, o produto – e nos perguntamos se os designers não estão subconscientemente se opondo a essa ideia.

Claro, se esse é o caso, isso parece uma evolução meramente incremental. Esses projetos não concedem tanto às pessoas sua humanidade como as transformam de ilustrações planas em desenhos animados.

Com isso em mente, talvez a animação de cartão de crédito muito mais realista de Stripe ofereça um vislumbre de um futuro em que o físico e o digital podem ser apresentados como tal. 

2. Da marca lúdica para o logotipo sério – também conhecido como Helveticização da identidade da marca 

Em 2018, vimos várias marcas altamente visíveis passarem de identidades de marca deliciosamente excêntricas para mais… ahem … esperado… sans serifs.

Ou, como gosto de dizer: todas as identidades de marcas acabam resultando em uma versão Helvetica. 

O ex-logotipo do Marketo à esquerda apresenta uma fonte mais "peculiar" e uma atualização mais séria à direita.
Logotipo antigo do Marketo à esquerda, novo à direita. Fonte .
O antigo MailChimp log in cursivo, caso de camelo à esquerda e novo logotipo de sans-serif em letras minúsculas à direita.
Indiscutivelmente a rebrand mais adequada: MailChimp classic à esquerda, Mailchimp 2.0 à direita. Observe a mudança no revestimento também! Fonte .
O antigo logotipo tipográfico hiper-masculino da Uber em allcaps à esquerda e novo tipo de letra personalizado, sem serifa em titlecase à direita.
Uber a marca que amamos odiar à esquerda, Uber tentando lançar seu passado feio à direita. Fonte .

Concedido, nenhuma das três marcas que temos em mente foi direto para a velha espera. E um – Mailchimp – evoluiu em uma direção que honestamente se sente mais adequada para uma marca que faz da voz distinta e dos ativos da marca uma pedra angular de seu marketing.

Ainda assim, para cada uma dessas empresas, as marcas podem se parecer um pouco com uma evolução muito familiar em direção ao que você não poderia chamar injustamente de corporativismo chato e chato. 

Dito isso, você tem que se perguntar se essa mudança de reconhecidamente peculiar para onipresente abertamente tem a ver com a noção de fluência cognitiva: a ideia de que estamos mais confortáveis com o que já experimentamos antes. 

Com as maiores e mais conhecidas marcas do mundo, todas ostentando logotipos sem serifa, não é de admirar que um passo nessa direção seja visto como a marca registrada de uma empresa atingir a maturidade. Nesse sentido, esse é um tipo de meta tendência que esperamos ver repetidas vezes, e é improvável que 2019 seja uma exceção.

3. tipo esboçado

Como qualquer marca voltada para design, somos grandes fãs da tipografia aqui no Webflow, por isso estamos sempre atentos a novas tendências no texto (procure mais abaixo!). 

Então, quando Zack chamou a tendência emergente no tipo delineado, pulamos para ver o que a novidade nas formas de letras mantinha para nós. Acontece que estava vazio.

Columbia sportswear co.  logo usa o tipo esboçado para "Columbia
Fonte
A atualização de fontes de face da Silver Island aumenta a tendência do tipo descrito.
fonte

Há algo indescritível nesse tipo de meio meio de texto que imediatamente atrai o olhar, exigindo que você siga as letras até a conclusão natural. O que torna uma técnica bastante útil para uma marca memorável.

Em um mundo onde sans serifs robustas dominam a marca, uma forma de letra visualmente mais leve certamente captura uma sensação de tradicional – mas diferente. O que, no final, é o que qualquer nova marca precisa: uma sensação de que é revolucionária e confiável.

4. O contínuo aumento do brutalismo

Nós dissemos isso no ano passado , e estamos dizendo isso de novo este ano:

O futuro será brutal. 

(Demasiado real? Eu sei. Desculpe.) 

Parece haver algo particularmente atraente sobre a estética do brutalismo na sua cara hoje em dia. Seja como um pêndulo natural longe do estilo “limpo” e “minimalista” que recentemente dominou a web – uma rejeição da simpatia cordial da voz e das ilustrações de um milhão de marcas, um dedo médio em face do chamado “ uma teia homogênea ”, ou um ato de resistência à mistura cada vez mais surreal de fato e ficção que a web nos expõe diariamente – não há como negar que o brutalismo saiu da subcultura do design para o centro das atenções.

Precisa de exemplos? Nós pegamos você:

Conceitos de cartaz usando a tendência do brutalismo com negrito, letras maiúsculas, preto-e-branco, letras inversas.
Conceitos de pôster para um “Design Spike” no Asana .

E vai muito além de cartazes de reuniões internas e conceitos iterativos. O recente rebrand da Squarespace abraça o brutalismo por meio da personalidade estética e impetuosa da New York City:

Texto branco em um baground preto que repita "ligeiramente à esquerda do centro" para criar a ilusão de caixas empilhadas.
Ainda de brand.squarespace.com .

O poder de permanência do brutalismo sugere uma faceta interessante do surgimento e adoção de tendências de design que me lembra o fenômeno pop punk do final dos anos 90 (aqui está o meu namoro!): Seja qual for a tendência, não importa quão rebelde ou “na sua cara” ”Pode parecer à primeira vista, pode e será cooptado para o mercado popular. E que esse crescimento da tendência “subcultural” para o mainstream principal pode se estender por vários anos.

Por mais que me tornei um fã do brutalismo pioneiro e ousado que tenta avançar, eu perguntaria aos designers uma coisa: 

Lembre-se, por favor , que existem pessoas por aí que encontram animações frenéticas cheias de tipo fragmentado e estonteante, e cores piscantes extremamente desorientadoras .

O design, como qualquer outra atividade criativa, não precisa ser para todos o tempo todo – mas lembre-se de que, se você optar por incluir essas coisas em seu trabalho de design, estará decidindo que seu trabalho não é para quem quer Acho vertiginoso, nauseante e avassalador.

Mas essas coisas não são necessárias para um design brutalista. Se você está procurando criar uma visão acessível da estética brutalista, confira as Diretrizes para o Design Brutalista de David Copeland , que nos lembra:

Por padrão, um site que usa HTML como pretendido e não possui um estilo personalizado será legível em todas as telas e dispositivos. Somente o ato de projetar pode tornar o conteúdo menos legível, embora certamente possa torná-lo mais.
Diretrizes para Brutalista Web Design com seta rosa apontando para copiar que lê, "Raw conteúdo fiel à sua construção"
Mina de seta rosa grande. 

5. Estilos de ilustração mais diversificados e iconoclastas

Em seu estudo de caso incrivelmente detalhado e completamente fascinante de seu trabalho para o Slack , a ilustradora Alice Lee nos lembra:

Coisas realmente impressionantes acontecem quando olhamos além de nossos colegas imediatos, concorrentes e indústria para fontes de inspiração de ilustração.

E enquanto isso é fácil de ver o trabalho de Alice dando início a um estilo ilustrativo cada vez mais homogênea entre as empresas de produtos SaaS e outras startups, não é preciso uma tonelada de olhar ao redor para encontrar outros designers que Alice mineração das ricas veias de trabalho em outros campos.

Tal como o estilo de fotocolagem a ser explorado em Medium e Intercom.

A página de login do Medium apresenta seu estilo de ilustração editorial exclusivo. 
Observe a incorporação da repetição brutalista no conteúdo textual.

Mas também estamos vendo pessoas inspiradas pela fisicalidade das embarcações de papel: 

Ilustração de uma pessoa em uma escada que prende uma cubeta, moldada por camadas curvy de blobs papel-cut-out-like nos azuis e no branco.
Espaço do papel por Outcrowd

A tridimensionalização assume o estilo de corte mais plano de Alice: 

Ilustração do estilo do entalhe de uma figura genderless que ajoelha-se ao lado de uma lagoa aonde um veleiro de papel flutua.
Barco de papel por Gal Shir

E em paisagens físicas / digitais descontroladamente coloridas, como a que aparece na página inicial atual do CrowdRise: 

Página de aterrissagem de Crowdrise que caracteriza uma ilustração colorida, do estilo do entalhe dos povos e dos seus cães em um dogpark.


Não é difícil ver os ecos do trabalho de Alice Lee para o Slack em todos eles – sua voz tornou-se parte do zeitgeist do design moderno. Mas cada uma delas estende sua voz de maneiras intrigantes, mostrando o potencial criativo inerente à busca de olhares externos ao que todo mundo está fazendo e arrasando, ainda que experimentalmente, sua própria trilha.

Estamos até mesmo vendo designers adotando abordagens mais abstratas e surreais para ilustrar ideias menos concretas, como ficar desarrumado: 

Ilustração animada de pessoas em um carro alegórico em várias poses agitando bandeiras.
” How to stay scrappy “, de Justin Tran .

Ou “marketing de ciclo de vida”: 

Postagem de blog de interfone com uma imagem de herói que faz uso de e abstrato recorte, tendência de ilustração de colagem-estilo.


Como um fã de arte abstrata, estou ansioso para ver peças mais expressivas e alusivas como essas que surgem em toda a web. 

6. tipo mais aventureiro e vintage

Enquanto o trabalho de design de logo pode continuar em direção à homogeneidade, nós e Zack estamos vendo algumas escolhas mais excêntricas surgindo também, como a adoção da Mailchimp do famoso tipo de letra Cooper Black (da Tootsie Roll fama!) Pela sua fonte da marca. :

Mailchimp landing page com um fundo amarelo, texto preto em Cooper Black e uma ilustração animada à direita.


Resumo balançando o Vesterbro Black (e Regular e Heavy) deliciosamente grosso em combinação com America Mono do Grilli Type: 


E o deliciosamente gordinho Recoleta em recente biblioteca ilustração de Pablo Stanley (que é cheia de ecos de Alice Lee!), Humaaans .


Nós anunciamos o renascimento das fontes com serifa em 2018, mas parece que 2019 pode estar colocando seu pé mais esquisito, mais nostálgico – pelo menos nas manchetes. Cada uma das faces retrô acima apresenta faixas de peso total, tornando-as perfeitas para a flexibilidade exigida pelo trabalho editorial.

Obrigado pelo trendpotting, Zack! 

Nosso próximo colaborador é Sacha Grief , um designer, desenvolvedor e empresário que vive em Kyoto, no Japão. Você pode conhecê-lo em seu fantástico (e mínimo) site e boletim informativo, Sidebar ou Vulcan.js .

Ele teve a gentileza de fazer seus próprios resumos, então aqui está a lista de tendências de Sacha, em suas próprias palavras:

7. Design inclusivo

Seção do herói de um ensaio intitulado "5 maneiras de inclusão alimenta a inovação"


Muitas linhas já foram escritas sobre a importância da acessibilidade, mas são renomeadas como ” Design Inclusivo ” e você tem toda uma nova palavra de ordem não reclamada para escrever livros e ensaios sobre!

Brincadeiras à parte, pensar nas necessidades de um grupo diversificado de usuários nunca é uma coisa ruim , e se é preciso um conceito moderno para nos ajudar, eu aceito.

Nota do editor: Como você pode ver na imagem acima, os defensores do design inclusivo geralmente apelam para a forma como o design inclusivo / acessível pode ajudar as marcas a atingir as metas de negócios. A lógica é boa, mas eles não precisam.

É um simples ato de humanidade dar espaço e acomodar os outros, e se você criar um pensamento inclusivo em seu processo de design, os custos não serão mais do que incrementais e, em última análise, poderão melhorar sua experiência de usuário para todos. 

Afinal de contas: estamos todos desabilitados às vezes. 

Gráfico ilustrado com títulos de colunas, deficiências físicas, temporárias e situacionais e linhas intituladas tocar, ver, ouvir e falar.

 

8. Design + código

Enquanto estávamos todos agonizando sobre se os projetistas deveriam aprender a codificar, alguns de nós fizeram exatamente isso – e usaram nosso novo conhecimento para desenvolver melhores ferramentas de design. Estamos vendo uma nova safra de ferramentas de design como o Figma ou o Framer X, que permitem maior integração com codificação por meio de APIs e sistemas de plug-in.

Nota do editor: Sem falar em ferramentas como o Webflow, que pulam direto sobre APIs e plugins para permitir que você crie códigos . Ah, e se você é fã do Figma, você deve conferir o vídeo da designer Charli Marie sobre a tradução de designs do Figma em sites funcionais do Webflow: 


9. Tipografia arrojada

Por alguma razão, qualquer lista de tendências de design sempre tem que incluir “tipografia em negrito”. Visto que a tipografia existe desde 1439, você não pode realmente dar errado com isso. (Bem, exceto por esse breve período em 2013, quando a Apple decidiu que tudo deveria estar agora em Helvetica Neue Ultra Light).

Nota do editor: Culpado como acusado , Sacha. Mais sobre isso abaixo.

Nosso próximo colaborador é o inimitável Pablo Stanley . Quando Pablo não está projetando grandes coisas para a InVision, ou encantando o mundo do design com suas ilustrações perspicazes e cheias de personalidade, ele parece gostar muito de entrar no Webflow.

Especialmente desde que lançamos… 

10. Grade CSS

Página de destino do LAYOUT LAND de Jen Simmons.


Toupeira sagrada! Eu amo Grid, cara !!!

–Pablo Stanley 

Para muitos web designers e desenvolvedores, o flexbox forneceu uma espécie de santo graal. Ele responde à antiga questão de como centrar corretamente as coisas, tanto vertical como horizontalmente. Torna os layouts anteriormente complexos relativamente fáceis de implementar. Ele até (literalmente) permite o legado do “ santo graal ”.

A coisa é, não dá controle sobre as posições horizontal e vertical dos elementos simultaneamente. Isto é, é uma ferramenta isto ou aquilo.

Insira a grade CSS: que permite colocar um item exatamente onde você quer, vertical e horizontalmente. Parece simples, mas a realidade é que ela libera um nível de liberdade e controle expressivos que anteriormente apenas a impressão poderia nos dar.

E ainda: ninguém está usando. 

Bem, quase ninguém. Especialmente quando você olha em relação ao flexbox.

De acordo com o status da plataforma do Chrome, cerca de 83% das exibições de página incluem o flexbox . Grade CSS? Apenas 1,5% , aproximadamente.

Porque você pergunta? Bem, a resposta, como muitas vezes é com ferramentas de layout da web, é o suporte desigual.

De acordo com Can I Use, a grade CSS é suportada pelas versões mais recentes de todos os navegadores, exceto o Opera Mini e o Blackberry Browser.


Ou, mais especificamente, a ausência nunca inesperada de suporte (de suporte duvidoso) oferecido pelo Internet Explorer (IE), que apesar de ser depreciado pela Microsoft, ainda é desproporcionalmente invocada por muitas empresas.

Ainda assim, o uso do IE provavelmente não é significativo o suficiente para explicar completamente a falta de adoção da grade. Portanto, considere que as estatísticas citadas acima se concentram em visualizações de página , não em páginas . Isso significa que é a falta de adoção da grade pelos principais sites que provavelmente explica o desempenho aparentemente insatisfatório da grade até o momento.

O que faz sentido Estas grandes plataformas provavelmente só foram all-in no flexbox recentemente. E rejiggering os layouts de sites que atraem bilhões de usuários não é tarefa pequena.

Felizmente, você provavelmente não enfrenta os mesmos problemas na maior parte do seu trabalho. E com o Webflow, você nem precisa gastar horas dominando a sintaxe da grade. Você pode apenas usá-lo. Hoje. Visualmente. 

Comece com a grade no Webflow .



Para o nosso próximo pensador de design, eu me voltei para Los Montoya , designer líder do aplicativo social Mappen e diretor de criação da Juxta Labs. Aqui está o Los em suas próprias palavras:

Atualmente estou focado em liderar o design para os nossos esforços de marketing e design de produto no Mappen e ganhei uma perspectiva única sobre o que está por vir em 2019.

11. Abordagens opostas da cor com base na posição de mercado

Em 2019, espero ver mais empresas seguindo a liderança de outras marcas notáveis e buscando paletas de cores mais suaves e acessíveis. 

Em contraste, continuaremos a ver as empresas de designers e designers indie esculpindo a atenção com cores mais ousadas, mais saturadas e opinativas. Nós ainda veremos um uso pesado de ilustrações em um esforço para humanizar a tecnologia e, mais importante, humanizar a marca.

12. Grelha quebras de grade

Veremos o uso da grade CSS como uma estrutura subjacente para romper com a “grade”. A proliferação e a acessibilidade das tecnologias de grade CSS ajudarão designers e desenvolvedores a enxugar layouts quebrados em um esforço para trazer “old-school, Layouts de inspiração impressa para a web.

13. Primeira animação para dispositivos móveis

Web design no final de 2018 nos mostrou uma variedade de animações baseadas em rolagem e uma inclusão de “animações temporizadas” para ajudar a desviar a atenção para uma página de marketing. Embora isso funcione bem no ponto de interrupção da área de trabalho, veremos uma abordagem mais móvel às interações em 2019. Estou ansioso para ver como designers e desenvolvedores trazem as facetas do “design da Web de desktop” para o design de web móvel.

14. O ano da grande escrita

Acredito que tudo isso é uma evolução natural do que vimos em 2018. Em certo sentido, o design visual para web e produto se estabilizou. Temos uma plataforma sólida de fluxos e interações testados e comprovados de UX para design de produtos e Web abaixo de nós. O resultado são produtos digitais e sites que tendem a parecer com primos próximos – se não irmãos.

É por isso que, se você deseja criar uma marca que as pessoas amam e que seu trabalho é Designer, você precisará fortalecer suas habilidades de narrativa e sua eficácia como escritor. É muito fácil desenvolver um bom gosto a partir de uma perspectiva de design visual. Você tem muitos exemplos de designs bonitos para aprender. Você provou fluxos de funil de marketing e fluxos de UX de produtos digitais que são facilmente acessíveis a você, para que você possa criar uma experiência que seja facilmente compreendida pela maioria dos clientes.

Com isso coberto, 2019 será o ano da grande redação. O ano de grandes histórias e narrativas. Tire as cores, animações, grades e ilustrações de um site e o que lhe resta é basicamente palavras. As palavras importam em um site e as palavras importam no design do produto. Como e quando você se comunica com seus clientes enquanto eles viajam pelo aplicativo é crucial para que você tenha mais uma chance de voltar e contratar seu aplicativo novamente.

Palavras são como você se comunica com sua equipe para realizar o trabalho de forma eficaz. 

Palavras são como você ajuda um cliente a se apaixonar pela sua marca. 

Palavras são como você diz às pessoas por que elas deveriam se importar com o que você está fazendo.

2019 é o ano para construir algo que vale a pena amar.

Nossa próxima colaboradora é Mariah Driver , produtora de conteúdo, punster e defensor de acessibilidade da Webflow:

15. Muito movimento

Em ” Como você gosta”, de Shakespeare , Rosalind pergunta: “Alguém pode querer muito de uma coisa boa?”

Agora, você provavelmente está se perguntando como podemos relacionar uma comédia pastoral escrita nas tendências de web design de 1599 a 2019. Duas palavras: design de movimento.

A tendência para elementos animados e interativos é tudo menos nova – e mais importante, não vai a lugar nenhum. O design de movimento pode ser uma coisa “boa” no design da web – quando ajuda os usuários a navegar pelos sites.

As conseqüências de adicionar animações e interações em prol do visual, e não da usabilidade, podem ser muito maiores do que simplesmente distrair o usuário. Em alguns casos, eles podem tornar impossível, e até perigoso, para os usuários navegarem em seu site.

Por exemplo, qualquer exibição que pisque, pisque ou pisque pode acionar pessoas com epilepsia fotossensível. Embora esse elemento de design certamente torne o site memorável, ele pode rapidamente se tornar prejudicial se não for usado corretamente.

Incluímos o site abaixo para demonstrar o tipo de exibição intermitente que pode ser prejudicial a determinados usuários. Por favor, não clique no site se você for sensível a piscar ou piscar :

Sinopse de Bio para Zipeng Zhu em negrito, maiúsculo, tipo de letra preto que preenche a seção de herói
Aviso: se você for fotossensível, dê uma a essa falta.

Para entender melhor como você pode usar flashes, pisca e pisca com segurança e sem sacrificar a acessibilidade do seu site, confira as Diretrizes de Acessibilidade na Web sobre convulsões e flashes.

O takeaway desta tendência? 

Evite a tentação de adicionar movimento ao seu site apenas porque as ferramentas modernas de web design, como o Webflow, tornam possível fazê-lo. Antes de adicionar uma interação ou animação, pergunte se ela serve a um propósito na página. E mais importante, se isso impedir que alguém navegue em seu site.

Em seguida: pouco de mim .

16. Texto massivo e dominador de tela


O texto da landing page do Rolling Flowers que preenche a seção do herói e diz: "beba a mais pura água / boire de l'eau la plus pure"


Redatores e outros especialistas em conteúdo argumentam há muito tempo que o conteúdo deve sempre vir em primeiro lugar no processo de design. Afinal, publicar para a web … ainda está sendo publicado. E se finalmente conseguimos convencer o mundo do valor do conteúdo, ou se os designers começaram a se interessar pelas formas da letra, estamos começando a ver sites que realmente dão ao conteúdo de texto o centro do palco.

Testemunhe o tiro acima de fabricantes de produtos para fumar, Rolling Flowers. Lançada como uma alternativa ao tabaco de enrolar, a Rolling Flowers permite que o texto faça (a maior parte) a conversa no seu (alto) site de comércio eletrônico mínimo.

Texto mínimo, grande e preto em um fundo branco: um botão de compra ao lado da foto do produto e o nome do produto abaixo.


E lança em alguns botões de compra incrivelmente grandes para arrancar.

Ou tire essa foto de um projeto interno super secreto (por enquanto):


O texto grande e preto preenche a seção do herói em um fundo branco.  Uma palavra por linha diz: "marcha em infinitude"


Que define a cópia tão grande que você é forçado a processar a frase em fragmentos, não em frases inteiras. (Assim, teoricamente, concentrando sua atenção.)

"A maldita jornada do usuário" preenche a seção de heróis da landing page de Tayler Freund.
Tayler Freund compartilha alguns de seus pensamentos sobre jornadas de usuários com um tipo grande e ousado.

Até o Huffpost está entrando nas travessuras de texto dramaticamente massivas: 

Página de destino para um Huffpost piecse com o título do artigo preenchendo a esquerda 2/3 da tela em texto superdimensionado e o corpo de ensaio à direita.


Para referência, isso é tudo que vejo no meu MacBook Pro: 

 O mesmo artigo do Huffpost como na imagem acima com 2/3 da imagem cortada.


Também estamos vendo essa tendência maciça de texto emergir nos designs de menus criativos, como você pode ver no site da firma de arquitetura Dot to Dot: 

Texto branco esboçado em um fundo preto sobre uma grade de pontos amarelos conectados por linhas para formar uma imagem semelhante a uma constelação


Curiosamente, o cardápio saiu do gueto relativo de um bar na parte superior da tela para ocupar o centro do palco, de modo que seu sistema de controle de rotas se torna, pelo menos na página inicial, a “carne” do site.

17. Design e animação de cursor brincalhão

Para ficar com Dot to Dot por um momento, vale a pena mencionar uma tendência emergente em torno de aproveitar ao máximo a principal ferramenta da interação humano-computador: o cursor humilde. 

Como desempenha um papel vital na dinâmica da interação humana com os espaços digitais, muitos de nós relutam em mexer no cursor. Mas nem todos nós.

Em Dot to Dot, por exemplo, o cursor faz muito trabalho: 

Aqui, o estado de foco revela uma imagem do projeto.
Aqui ele se torna uma sugestão de como interagir com o menu, se você hesitar por alguns instantes.
E aqui isso revela um pouco de uma declaração de missão. Infelizmente, renderizando texto como imagem.
No site do Festival KIKK, o cursor parece quase queimar a camada de azul rico para revelar outra dimensão ao design, adicionando prazer ao seu tempo no site. 


O designer Niccolò Miranda, que utiliza o Webflow, também colocou o cursor em um trabalho mais criativo do que apontar e clicar em seu site de portfólio. Em sua página inicial, o cursor mostra a você como clicar e segurar, ativando uma animação inteligente dele trabalhando duro durante o dia.

Minha única esperança para Niccolò é que ele não trabalhe das 5 da manhã à meia-noite. 


18. Todos saudam o novo herói homogêneo

Até muito recentemente, todos nós compartilhamos uma visão do site onipresente. Parecia algo assim:

Wirframe de uma página de destino com nav no canto superior direito, logo superior esquerdo, uma imagem de herói seguida por uma sinopse e três colunas
Fonte

Nós até escrevemos um tutorial sobre como construir isso , caso seus clientes clamam por isso.

Mas em 2018, esse projeto começou a se transformar. Os designers se cansaram da manchete e do botão centralizados no topo da foto.

O que eles fizeram em vez disso? Mova o título e o CTA para a esquerda. Em seguida, reduza a imagem, defina-a para a direita e, talvez, crie uma ilustração personalizada?

E voilà! Contemple o novo herói homogêneo.

Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com


Para ser claro: não acho que haja algo errado com isso, pessoalmente. As manchetes estão ficando mais claras. Os subtítulos adicionam o contexto necessário. Você sempre sabe onde encontrar sua chamada à ação. Nosso desejo de fluência cognitiva – o senso de domínio que temos quando trabalhamos com coisas familiares – é cumprido. A lei de Jakob é levada em conta.

Uma landing page para a Lei de Jakob, seu layout padrão refletindo a premissa da lei.  O texto da sinopse diz: "Os usuários passam a maior parte do tempo em outros sites. Isso significa que os usuários preferem que seu site funcione da mesma maneira que todos os outros sites que eles já conhecem."


E o texto centralizado nunca foi concebido para ser visto em qualquer lugar fora dos convites de casamento. 

Mas com certeza é moda. 

19. Sobreponha todas as coisas

Maquetes de layout do site com seções separadas por caixas cinzas e texto de cabeçalho que se estende por mais de uma seção.


A era do design baseado em cartões levou-nos muito a objetos distintos com agrupamentos explícitos e muito claros. É uma escolha sensata dada a lei da psicologia gestáltica das regiões comuns .

Mas as regiões comuns não são a única maneira de vincular visualmente elementos discretos. Há também a lei da conexão uniforme , o que explica porque é claro, no projeto acima, que “É uma Luz” se refere à lâmpada mostrada à esquerda.

Então, em 2019, esperamos ver muito mais exploração de maneiras de estabelecer conectividade, como este módulo de newsletter no site da NBC: 

Módulo de boletim informativo com elementos sobrepostos na NBC.com

E esta colagem personalizável de foto e cópia:

Fotos sobrepostas, móveis para o conceito de site Molley Heltz.
Animado de Zhenya Rynzhuk sobre a página


E no site da agência de criação japonesa, SONICJAM:

Elemens sobrepostos em sonicjam.co.jp
Menu aberto para adicionar ao efeito. (Observe o cursor funky também!)

20. O ano em que “usuários” revidam

Parte de Banksy de um homem e de uma mulher que abraçam ao olhar seus telefones móveis.
“Amantes de móveis”, de Banksy

Desde o lançamento dos smartphones e o surgimento das redes sociais, estamos nos divertindo em um nível totalmente novo de conectividade. O conhecimento do mundo está ao nosso alcance. Nós podemos “fazer amizade” (isso mesmo, crianças: já havia um verbo para isso) quase qualquer pessoa, em qualquer lugar. Nós “curtimos” constantemente “feeds” de “conteúdo” “adaptados” “apenas para nós”.

E estamos ficando cansados disso tudo. Estamos fartos da invasão. A desorientação e desonestidade. A alta retórica sobre conectar o mundo diante de notícias sobre vazamentos, manipulação da mídia e (talvez?) Eleições fraudulentas.

Estamos percebendo que há um macaco nas nossas costas. E isso vive nos nossos bolsos. E sempre e sempre significou o melhor para nós.

Mas essa percepção tem muitos de nós “usuários” se perguntando: o preço da admissão vale o retorno do investimento? A transformação de “telefone móvel” para supercomputador de bolso nos custou mais do que nos trouxe?

E se for esse o caso: como podemos corrigir o desequilíbrio? Podemos ter o nosso bolo e comê-lo também?

Mas você, lendo isto, não pode simplesmente responder a essas perguntas como um “usuário”. Você também é, provavelmente, um criador também. Então, em 2019, é hora (é hora do passado) de se perguntar:

O que pode eu fazer para colocar as pessoas de volta no controle do seu compromisso, seu uso, suas vidas?

Posted on Deixe um comentário

Porque criar um site no wordpress?

Criando seu site com wordpress

Eu vou te dizer porque usar wordpress para criar teu site! Se estava na dúvida agora terá certeza de usar WP.

Eu estou 14 anos nesse mercado, já vi muitos projetos e posso te garantir, tudo igual só muda marca, inovação que se fala tanto, ficou para trás!

Falando de criar sites para web

Gosto é igual CÚ cada um tem o seu!! Certo? No desenvolvimento de um site cada um tem seu modo e gosto para criar, as opções são as mesmas sempre o que muda são os nomes das organizações.

Através de construtores online ou offline. Aquele modo arrasta e solta de blocos e depois edita os textos, existem vários construtores desse tipo. Atualmente se usa o MOBIRISE é modinha do momento, ele faz tudo que os outros fazem mais pode ser instalado em máquinas e pode ser usado offline ou Via APP ios ou android.

Através de gerenciadores de conteúdo, conhecidos com CMS. No github você encontra milhares deles. Seria criar um site em php com painel de controle, isso facilita a criação de páginas e posts. Já vem pré montando, só instalar no seu servidor, logar no painel e organizar as informações.

Através de templates editáveis, pesquise templates html5 css3, templates bootstrap, templates responsivos, templates amp html e o google te aponta uma lista de sites que você vai baixar, ai você usa seu bloco de notas para editar textos, imagens e por ai vai…

Tratando-se de que temos as mesmas opções sempre, passamos a pensar nas atualizações e nesse aspecto eu recomendo fortemente optar por criar o site no wordpress. Nele você você recebe atualização do software, de temas e plugins e também segue os padrões da web moderna.

Finalizando, por questões de atualizações o wordpress ganha de lavada de todos os projetos que conheço na web, não disse que são ruins apenas perdem no requisito ATUALIZAÇÃO.