Codificação para não codificadores: designers podem pensar como desenvolvedores

Existe essa divisão não escrita entre designers e desenvolvedores desde que criamos sites. Pessoas que fazem as coisas parecerem boas versus pessoas que fazem as coisas funcionarem. Esses dias acabaram.

Todo designer precisa aprender como o desenvolvimento funciona no cenário digital. E todo desenvolvedor deve entender as teorias básicas de design. Aqui, ajudaremos os designers a entender melhor a linguagem dos desenvolvedores, uma habilidade essencial no mercado atual. (Como um bônus adicional, todos os exemplos de design são criados usando estruturas CSS.)

Explore o Envato Elements

Interfaces e Design do Usuário

A espinha dorsal por trás de cada site é uma sequência de 1s e 0s. Isso não é muito empolgante quando se trata de design. Mas a interface real e a conexão com um usuário é.

Cada pequeno detalhe inclui elementos de design com os quais alguém deve se envolver, de botões a elementos de navegação, a formulários, a assistir a um vídeo ou a comprar um par de sapatos. O objetivo é criar algo que pareça agradável, envolvente e fácil de usar. É aí que o design e o desenvolvimento se encontram.

Palavras que você precisa saber:

• Ajax: o uso de JavaScript e XML assíncrono cria uma experiência interativa na qual novas informações podem ser preenchidas no usuário final de um site sem atualização. Um exemplo comum é o carregamento contínuo de postagens à medida que o usuário rola pela página do Twitter.
• API: fornecendo especificações para rotinas, dados, classes de objetos e variáveis, e a Application Programming Interface permite que diferentes sites ou softwares "conversem" entre si e trabalhem juntos. Pense nisso como um conjunto virtual de blocos de construção.
• CSS: Cascading Style Sheets são a espinha dorsal da linguagem usada para estilizar sites e exibir elementos HTML visualmente.
• Consulta de mídia: um elemento CSS que cria regras específicas para determinados dispositivos quando se trata de como o visual será renderizado. (É a mágica que faz com que a mesma foto seja renderizada com um aspecto e corte em um site para computador e outra em um dispositivo móvel.)
• Web design responsivo (RWD): uma técnica de web design que utiliza uma grade e imagens, mídia e texto flexíveis para que um único site se ajuste a vários tamanhos de dispositivo. (Esse é sem dúvida um dos fatores mais importantes no design da web no momento.)
• Interface do usuário: a interface do usuário é tudo o que o usuário vê e interage em um design. Isso pode variar de como eles usam o site e o dispositivo a todos os elementos individuais na tela.
• UX: a experiência do usuário é o que cada usuário individual tira das interações com o site. Isso tende a ser expresso como uma conexão emocional e está relacionado ao valor geral percebido.

Pense em Perguntas

"Cada uma dessas interações deve parecer uma conversa entre duas pessoas que confiam uma na outra e merecem a confiança uma da outra."

Cada parte de um site está solicitando aos usuários que se envolvam ou continuem se envolvendo com outra parte do site. Esteja você jogando, lendo um artigo ou comprando um presente, cada ação leva a outra coisa. Mas como você chega lá?

É aí que entram as perguntas. Se você fizer perguntas no processo de design, poderá criar links entre ações, criando um design mais uniforme com um fluxo lógico.

Nicely Said, de Nicole Fenton e Kate Kiefer Lee, é um manual para escrever para a web. Ele também fornece uma estrutura de perguntas que funcionam para todas as partes da experiência em web design.

Perguntas a serem feitas ao longo do caminho (além de muitas outras no guia de recursos do livro):

• Como as pessoas usam esse conteúdo ou recurso agora?
• Quem está falando aqui?
• Que problemas estamos tentando resolver?
• Como esse conteúdo atende aos nossos objetivos? Qual é o seu propósito?
• Quais são os recursos do site? Como se comporta?
• Qual é o formato final?
• Existem restrições técnicas ou limites de caracteres?

Fenton escreveu ainda mais sobre outras perguntas que os sites "fazem" o tempo todo. Estamos falando dos detalhes pessoais que ajudam os usuários a se relacionarem com os sites com os quais interagem. “Cada uma dessas interações deve parecer uma conversa entre duas pessoas que confiam uma na outra e merecem a confiança uma da outra”, ela escreve.

Algumas dessas perguntas incluem:

• Como podemos te ajudar?
• Onde você está agora?
• Você está disposto a pagar por isso?

A resposta a essas perguntas estabelece a natureza do relacionamento interface-usuário e afeta muito o design. Pense da seguinte maneira: se um usuário não estiver disposto a informar sua localização, o design e a interface do usuário não serão eficazes se forem baseados em geolocalização; o design deve abordar o usuário de outra maneira.

Pense em simplicidade e direção

Quando os sites estão se unindo, tudo tende a cair em algum lugar no mapa. Você pode traçar o curso de uma interação do usuário para a próxima. (O que é ótimo para os pensadores visuais.) Então, pense no processo de design / desenvolvimento em termos de A vs. B: Qual é o próximo passo, A ou B?

Cada elemento deve ter um objetivo simples e fácil de definir e descrever. (Clique para reproduzir; clique para rolar.) Se você não conseguir torná-lo compreensível em uma frase, poderá repensar a estratégia de design.

Learn Code

Agora que você está pensando sobre as coisas na metodologia de um desenvolvedor, precisa sair e desenvolver algumas habilidades de codificação. Isso não significa que você precisa ser um codificador mestre, mas você deve entendê-lo o suficiente para fazer alterações simples e conversar com outros designers e desenvolvedores de maneira coerente. (Além disso, você pode realmente criar alguns efeitos interessantes, como os mencionados acima.)

Pessoalmente, comecei com um pouco de HTML com propósito. Fiz uma lista das coisas que eu queria saber como fazer e as aprendi de dentro para fora (ou seja, como alterar a cor de um elemento do site usando um valor HEX no CSS em vez de clicar em uma caixa no seletor de cores.) existem muitas ferramentas disponíveis, desde aulas e tutoriais on-line até treinamento pessoal em sua área. Tudo o que você precisa fazer é se inscrever e começar.

Quatro ótimos recursos de desenvolvimento de código:

1. Tuts +
2. CodeAcademy
3. Code School
4. Khan Academy

Conclusão

Aprender o desenvolvimento da Web não é apenas aprender sobre estruturas e códigos. É sobre o processo de pensamento. Os designers podem pensar como desenvolvedores a caminho de criar um site de sucesso. Você apenas tem que estar aberto à ideia.

Entender que alguns dos processos de pensamento são semelhantes - pensamento visual e soluções e resultados de pesagem - faz parte de qualquer projeto de design ou desenvolvimento. Somos todos designers / desenvolvedores no mercado de hoje.

Fonte da imagem: Marjan Krebelj.