30 dicas para aprender Web Design em 30 dias
O aprendizado do básico do web design ainda está na sua lista de "algum dia"? Por que você ainda não começou? Reunimos 30 dicas e recursos para ajudá-lo a começar a aprender web design este mês (e talvez até encontrar uma nova carreira!)
Designers gráficos, designers de impressão e criativos que desejam aprender algo novo ou invadir o site precisam parar de procrastinar. Todos os dias em que você não dá o primeiro passo, fica um dia mais atrás de todos os outros!
Siga estas etapas para começar a aprender como criar seu primeiro site, as melhores práticas do setor e muito mais - tudo em 30 dias!
1. Inicie um site
A melhor maneira de começar a aprender web design é começar a fazê-lo. Esse é o conselho de David Kadavy, autor de Design Hackers.
Eu recomendo que você comece um blog. Comecei um blog apenas para ter um playground de web design e, sete anos depois, lancei um livro best-seller sobre o assunto. Ter um projeto pessoal, como um blog, oferece a você um lugar onde você pode experimentar coisas novas, e seu chefe não o despedirá se você errar.
Você não precisa começar com um site gigantesco ou um design maluco; Comece pequeno. Brinque com o site e descubra o que faz as coisas funcionarem. (E não deixe de inspecionar o código, para começar a se familiarizar com o que está fazendo o seu site funcionar.)
Deseja começar rapidamente? Um construtor de sites como o Wix pode ajudar a dar-lhe uma vantagem inicial com um design de site elegante, à medida que você começa a aprender os conceitos e os blocos de construção do que entra em um site.
2. Leia tudo o que puder
Comece a ler. Como você está neste blog, provavelmente está acostumado a acompanhar o que está acontecendo no mundo do design. Continue lendo.
Leia tudo o que puder sobre design de site, tendências, técnicas e práticas recomendadas. Siga designers que você admira nas mídias sociais.
Lance uma rede ampla para a leitura do design do seu site também. Leia sobre o básico para aprender um pouco de código, leia sobre a teoria do design e leia tutoriais e artigos atuais.
3. Seja um comunicador eficaz
Se você não é a pessoa mais articulada, aprimore essas habilidades. Uma grande parte do design do site é a comunicação.
Os designers de sites precisam se comunicar regularmente com os clientes para descobrir qual problema o design precisa resolver; eles precisam comunicar essas soluções e implementá-las também.
4. Assine o Tuts + & Envato Elements
Considere uma assinatura do Envato Elements, que também fornece acesso ao excelente recurso de aprendizado do Tuts +.
O Tuts + publica cursos regulares sobre design gráfico e web, desde técnicas básicas até as mais recentes abordagens e desenvolvimentos avançados. É totalmente individual, ministrado por instrutores especializados. Você também terá acesso ao Envato Elements, que é um ótimo recurso para encontrar gráficos, modelos e muito mais para conectar-se ao seu trabalho de web design.
5. Pense em HTML
HTML, ou linguagem de marcação de hipertexto, é uma pedra angular do design do site. HTML é o esqueleto que ajuda a criar a estrutura de um site e, uma vez que você pode ler a linguagem, o mundo do design de sites fará muito mais sentido.
O W3Schools tem um ótimo tutorial para iniciantes em HTML, com centenas de exemplos de HTML com os quais você pode brincar na tela para ver o que acontece e exatamente como ele funciona. (Você pode achar mais intuitivo do que imaginava.)
6. Jogue com código na Codeacademy
Embora o HTML seja um bom começo, você pode aprender praticamente qualquer linguagem de programação no Codeacademy. O conjunto gratuito de ferramentas ensina a codificar usando atividades e jogos interativos.
Você pode pegar um curso da Codeacademy onde e quando precisar, iniciar e parar conforme necessário. Escolha um assunto para aprender - desenvolvimento web, programação, ciência de dados - ou linguagem para se concentrar - HTML e CSS (um ótimo lugar para começar), Python, Java, SQL, SQL, Ruby e muito mais.
7. Aprenda a entender CSS
CSS, ou folhas de estilo em cascata, definem a apresentação de um documento escrito em HTML ou XML e SVG.
Conforme definido pelo Mozilla
O CSS descreve como os elementos devem ser renderizados na tela, no papel, na fala ou em outra mídia.
O Mozilla também tem uma grande coleção de recursos CSS para começar, com uma introdução sólida de como o CSS funciona, incluindo seletores e propriedades, escrevendo regras CSS, aplicando CSS ao HTML, como especificar comprimento, cor e outras unidades em CSS, cascata e herança, noções básicas de modelo de caixa e CSS de depuração. Em seguida, os módulos passam a explicar o estilo de texto e caixas.
8. Aplique suas habilidades de design à Web
Se você já trabalha em um campo de design criativo ou gráfico, pense nas coisas que você já sabe que também pode aplicar ao design de sites. Os princípios que tornam visualmente atraente algo não mudam com base no meio e toda essa teoria do design também será útil no espaço digital.
Embora elementos como o aprendizado de código possam não parecer naturais, ter um background de design é um grande bônus. De que adianta um site lindamente codificado, se ninguém quiser interagir com ele?
9. Preste atenção nos sites que você adora
Tome nota dos sites que você ama. O que tem sobre eles é atraente para você? (E como você pode aprender a replicar esses elementos?) Preste atenção a:
- Tipografia
- Navegação
- Uso de imagens e espaço
- Design de formulários
- Efeitos de animação e rolagem
- Cor
10. Desenhe um Wireframe
Wireframing é o brainstorming de um web designer.
Em sua forma mais pura, um wireframe é um esboço do que o site será. Não é um esboço de elementos estéticos, mas uma planta do site. Desenhar um wireframe não é realmente a aparência desse design, é a estrutura de informações nele contida.
Não sabe ao certo como criar um wireframe? A Telepatia Digital possui um guia de práticas recomendadas para ajudá-lo a aprender.
11. Tire um tempo para aprender o esboço
O Sketch é uma ferramenta de desenho vetorial para Mac que facilita a criação de elementos de design. Muitos designers estão recorrendo ao Sketch para criar elementos de interface do usuário e repetir blocos de design.
Ele vem com plugins e permite exportar código para facilitar o uso e o acesso. É uma das ferramentas mais poderosas e populares disponíveis desde o Creative Suite da Adobe e vale a pena.
12. Mantenha-se atualizado com a tecnologia
AI, VR, AR, vídeo de 360 graus, bots.
Pode ser difícil acompanhar tantas novas tecnologias e tendências. Mas você precisa fazer questão de se manter atualizado sobre essas mudanças.
Enfrente-os um de cada vez e comece com as tecnologias mais diretamente relacionadas ao seu trabalho. Se você tem um site com bate-papo online, comece aprendendo sobre bots. Ou, se você usa muito conteúdo de vídeo, brinque com vídeo em 360 graus.
Elementos como inteligência artificial e realidade virtual ou aumentada são ainda mais complexos, mas provavelmente se tornarão partes integrantes do cenário do design do site no futuro. No mínimo, você deve saber o que são e quais podem ser os usos potenciais.
13. Fique confortável com SEO
Enquanto muitos web designers pensam que um especialista em SEO pode gerenciar a preparação de um site para a leitura dos mecanismos de pesquisa, há muito trabalho de design conectado ao SEO.
Desde o upload das imagens até a criação de um código limpo, rápido para incluir meta descrições em páginas e elementos, o designer deve incorporar o pensamento da pesquisa em seu fluxo de trabalho.
Freelancers, isso é de vital importância para você também. A maioria dos clientes é experiente o suficiente para solicitar um site otimizado para SEO. Se você trabalha sozinho, precisa saber o suficiente para criar uma estrutura sólida que o Google possa ler (e ser capaz de encaminhar o cliente a um especialista em SEO, se mais trabalho for necessário).
14. Jogue com um construtor de sites
Um construtor de sites pode ser uma ótima maneira de se familiarizar com as melhores práticas e como começar a criar e projetar sites.
A maioria dessas ferramentas possui muitos modelos e permite personalizar elementos e até adicionar trechos de código. Para sites simples, muitos criadores de sites também têm um plano gratuito, onde você pode criar uma página de portfólio pessoal ou site básico que serve como um playground para você.
Em seguida, escolha as peças no construtor de sites. Veja como eles são projetados e codificados para ter uma ideia de como tudo acontece. Você ficará surpreso com o que pode descobrir apenas escolhendo outro design.
15. Encontre um Mentor
Existe alguém com quem você admira como web designer? Leve-os para almoçar e escolha seu cérebro sobre a indústria.
Encontrar um mentor que esteja disposto a trabalhar com você e ajudá-lo a pensar sobre o campo e como aprender design da web por conta própria pode ser inestimável. E embora você possa provavelmente encontrar um mentor em uma comunidade on-line, nada é melhor do que uma pessoa viva que você pode conhecer cara a cara periodicamente. (Talvez valha a pena ter mentores on-line e pessoalmente.)
16. Participe da comunidade CodePen
Depois de começar a se sentir confortável com algum código e programação, você deseja ingressar na comunidade CodePen. A comunidade de código aberto permite compartilhar e editar trechos de código em uma espécie de rede social.
Aqui está um pouco mais dos fundadores do site: “O CodePen é um ambiente de desenvolvimento social. Na essência, ele permite escrever código no navegador e ver os resultados à medida que você cria. Uma ferramenta útil e libertadora para desenvolvedores de qualquer habilidade e particularmente capacitante para as pessoas que aprendem a codificar. Nós nos concentramos principalmente em linguagens de front-end, como HTML, CSS, JavaScript e sintaxe de pré-processamento que se transformam nessas coisas. ”
17. Tome uma aula
Para alguns alunos, um ambiente de sala de aula mais formal é o melhor.
Há uma tonelada de aulas disponíveis - pessoalmente e online - para você aprender o básico sobre web design. Comece com uma faculdade local ou hubs de aprendizado on-line, como Udemy ou Coursera. Escolha uma classe no seu nível de habilidade atual e continue avançando.
18. Quer fazer algo? Google It
Para o aluno não tão tradicional, encontre a resposta para o problema de design da web no Google. Existem tantos tutoriais e vídeos disponíveis que podem orientá-lo em praticamente qualquer problema - e solução.
A chave é procurar exatamente o que você precisa saber e procurar uma resposta para uma fonte respeitável. Aqui está outra dica quando se trata de tutoriais e vídeos - o conteúdo mais recente provavelmente fornecerá uma resposta melhor, mais completa e mais relevante. (Lembre-se, algumas dessas coisas estão mudando rapidamente.)
19. Preste atenção à experiência do usuário
Nada pode criar ou quebrar um site como o design da experiência do usuário. Você precisa planejar e entender.
Veja como a Interaction Design Foundation descreve o design do UX:
O design da experiência do usuário (UX) é o processo de criação de produtos que fornecem experiências significativas e pessoalmente relevantes. Isso envolve o design cuidadoso da usabilidade de um produto e o prazer que os consumidores obterão ao usá-lo. Também se preocupa com todo o processo de aquisição e integração do produto, incluindo aspectos de marca, design, usabilidade e função.
Os designers de UX, ou designers que estão cientes do processo de formação da experiência, procuram criar e moldar os fatores que influenciam o processo deliberadamente. Para fazer isso, um designer de UX considerará o porquê, o quê e como o uso do produto.
20. Preste atenção às tendências de design
Como é o design de um site moderno? Não é uma pergunta complicada. Para projetar sites modernos e experiências do usuário, você precisa saber o que os usuários desejam e como eles estão interagindo com ele. Se a última vez que você baixou um aplicativo ou consultou um site em seu telefone foi em 2016, ainda há muito o que fazer.
Criar designs de sites com toques e tendências modernos integrados ao design ajudará seus projetos a se destacarem. Como você sabe o que é tendência? Continue lendo sites como esse e preste atenção no que outros designers estão fazendo. Anote as cores, estilos e recursos incluídos nos sites que você visita com frequência.
21. Criar sem cor
Comece todo design sem cor. Um grande designer me disse uma vez que se o seu design funcionar em preto e branco, ele terá uma cor perfeita.
Isso nem sempre é válido, mas é um ótimo ponto de partida.
Ao criar desenhos em preto e branco, você pode ver onde os elementos contrastam e como eles tocam juntos. Você eliminou quaisquer associações emocionais com movimentos oculares ou de cores que acontecem por causa disso. Essa forma mais simples de design fornecerá uma idéia se algo funcionar como um conceito antes de você finalizá-lo.
22. Aprenda a amar as fontes do Google
O Google Fonts é seu amigo.
Independentemente de como você se sinta em relação ao Google, é importante a capacidade de navegar, classificar e selecionar tipos de letra que você sabe que funcionarão nos designs de sites. Você não precisa pensar em licenciamento ou se os tipos de letra são compatíveis com navegadores específicos ou não.
A limitação é que você só tem o que há na biblioteca do Google Fonts para trabalhar. Mas se você tentar, poderá encontrar algo que caiba em quase todos os projetos. Você economizará muito tempo a longo prazo.
23. Escolha um kit de interface do usuário
Faça o download de uma interface do usuário ou kit de ícones e escolha um.
Assim como você pode inspecionar o código de um site, veja como os elementos de design são construídos para a web. Anote a escala e a grade, observe as misturas de cores e como os arquivos são organizados no Photoshop ou Illustrator.
Procure um kit para download que inclua elementos em vários formatos para telas de alta resolução. (Baixar um monte de JPEGs não vai servir muito bem para você.)
Em seguida, tente criar ou personalizar um ou mais elementos.
24. Seja um tipógrafo
O design moderno do site tem um forte foco na tipografia ... boa tipografia. De cabeçalhos de heróis com palavras gigantes a camadas de texto que atraem um usuário ao design, é essencial entender os princípios de como emparelhar elementos de tipo e construir blocos de texto envolventes.
Comece com Ellen Lupton's Thinking with Type. (Há também um livro com o mesmo nome.) Lupton é a autoridade em tipografia e suas informações o farão pensar como um tipógrafo em pouco tempo.
25. Ir para JavaScript
Quando você começar a se sentir muito bem em se interessar pelo design da web, desafie-se novamente para aprender JavaScript. Após HTML e CSS, é a linguagem mais importante da web.
JavaScript é uma ferramenta que permite aos designers implementar coisas complexas e interação em páginas da web. É o que faz um slide deslizante ou a animação de paralaxe animar.
Learn JS possui um tutorial interativo para ajudar você a começar.
26. Atualize seu portfólio
Depois de começar a criar para a web, atualize seu portfólio com projetos de web design. Essa ação simples ajudará você a se mostrar ... e a outros ... que o web design faz parte do seu repertório.
Um portfólio atualizado pode ajudar os clientes em potencial a ver como é o seu "estilo". Certifique-se de mostrar layouts, cores, tipografia e técnicas diferentes que mostram o que você pode fazer.
27. Desafie-se
Com tantos atalhos e trechos de código para ajudá-lo a corrigir praticamente qualquer problema no site, não fique com preguiça. Lembre-se de desafiar-se continuamente para aprender novas habilidades, novas tecnologias e continuar melhorando seu jogo de web design.
A única coisa sobre esse campo é que ele está constantemente mudando; sempre há algo novo para aprender ou experimentar.
28. Maximize sua experiência
Vá lá fora e projete. Você precisa começar a criar sites para ser um web designer.
Comece pequeno, mas assuma projetos com os outros. Peça para participar de um projeto com uma equipe no trabalho. Enfrente um site pequeno para um amigo. Quanto mais experiência você tiver na construção de sites, melhor e mais rápido você obterá.
O que você está esperando? Pare de procrastinar.
29. Pedir feedback
Use sua rede para coletar feedback sobre os projetos de design do seu site, não importa quão pequeno você pense que eles são. Ouça esse feedback - mesmo que você não goste e veja o que pode aprender.
Além da preferência visual, a pessoa que forneceu feedback ofereceu sugestões para melhorar o funcionamento do site? Eles poderiam entender facilmente o objetivo do design? Eles se conectaram às mensagens?
30. Continue aprendendo coisas novas
Para ser um ótimo designer de sites, você só precisa continuar jogando, tentando e aprendendo coisas novas. Faça questão de interagir em rede e se comunicar com outras pessoas no campo para que você possa acompanhar as técnicas e alterações visuais que são demandadas.
Se você deseja aprender o design do site, provavelmente isso já é algo que você faz regularmente. Mas este é um campo em evolução e continua mudando quase todos os dias. Basta perguntar a quem está fazendo isso.
