30 Dicas para aprender Web Design em 30 dias
ainda está a aprender o básico do web design na sua lista “algum dia”? Porque ainda não começaste? Reunimos 30 dicas e recursos para ajudá-lo a começar a aprender web design este mês (e talvez até mesmo encontrar um novo caminho de carreira!)
designers Gráficos, designers de impressão e criativos que procuram aprender algo novo ou entrar no site precisam parar de procrastinar. Cada dia que não dás esse primeiro passo deixa-te um dia mais para trás de todos os outros!siga estes passos para começar a aprender como criar o seu primeiro site, as melhores práticas da indústria e muito mais—tudo em 30 dias!
2 milhões+ ativos digitais, com Downloads ilimitados
obter downloads ilimitados de 2 milhões + recursos de design, temas, modelos, fotos, gráficos e muito mais. Envato Elements começa em $ 16 por mês, e é a melhor Assinatura criativa que já vimos.
Explorar Envato Elementos
Iniciar um Site
A melhor maneira de começar a aprender web design é começar a fazê-lo. Esse é o conselho de David Kadavy, autor do Projeto <para> Hackers.
eu recomendo que você inicie um blog. Eu comecei um blog apenas para ter um parque infantil de web design, e 7 anos depois, eu lancei um livro best-seller sobre o assunto. Ter um projeto pessoal, como um blog, dá – lhe um lugar onde você pode experimentar coisas novas, e seu chefe não vai despedi-lo se você errar.
Você não tem que começar com um site massivo ou design louco; começar pequeno. Brincar com o site, descobrir o que faz as coisas funcionarem. (E certifique-se de inspecionar o código, para que você possa começar a se familiarizar com o que está fazendo seu site funcionar.)
quer começar rapidamente? Um construtor de sites como o Wix pode ajudar a dar-lhe um avanço com um design de site elegante, à medida que você começa a aprender os conceitos e blocos de construção do que entra em um site.
Leia tudo o que puder
comece a ler. Porque você está neste blog, você provavelmente está acostumado a manter o controle do que está acontecendo no mundo do design. Continua a ler.
Leia tudo o que puder sobre design do site, tendências, técnicas e melhores práticas. Siga os designers que você admira nas redes sociais.
Cast a wide net for your website design reading as well. Leia sobre o básico para aprender algum código, leia sobre a teoria do design e leia tutoriais e artigos atuais.se não for a pessoa mais articulada, reveja essas habilidades. Uma grande parte do design do site é a comunicação.
designers de sites têm que se comunicar com clientes regularmente para descobrir qual problema o projeto precisa resolver; eles têm que comunicar essas soluções e implementá-las também.
Subscrever Tuts+ & Envato Elementos
Considere a possibilidade de uma assinatura para Envato Elementos, que também dá acesso ao excelente Tuts+ recurso de aprendizagem.
Tuts + publica cursos regulares sobre Design Gráfico e web, desde as técnicas básicas até as mais recentes abordagens e desenvolvimentos avançados. É completamente independente, ensinado por instrutores especialistas. Você também terá acesso a elementos Envato, que é um grande recurso para encontrar gráficos, modelos, e mais para ligar ao seu trabalho de design web.
Think in HTML
HTML, or hypertext markup language, is a cornerstone of website design. 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 do site fará muito mais sentido.
W3Schools tem um grande tutorial HTML starter com centenas de exemplos HTML que você pode jogar na tela para ver o que acontece e exatamente como ele funciona. (Você pode achá-lo mais intuitivo do que imaginou.)
Play with Codeacademy
While HTML is a good start, you can learn almost any programming language from Codeacademy. O conjunto gratuito de ferramentas ensina a codificar usando atividades e jogos interativos.
Você pode pegar um curso de Codeacademy onde e quando você precisar dele e começar e parar conforme necessário. Escolha um assunto para aprender – desenvolvimento web, programação, ciência de dados ou linguagem para se concentrar em HTML & CSS (um ótimo lugar para começar), Python, Java, SQL, Ruby e muito mais.
Aprenda a entender CSS
CSS, ou Cascading style sheets, defina a apresentação de um documento escrito em HTML, ou XML e SVG.
conforme definido por Mozilla
CSS descreve como os elementos devem ser renderizados na tela, no papel, na fala ou em outros meios.
Mozilla também tem uma grande coleção de recursos de CSS para começar, com uma sólida introdução de como funciona CSS, incluindo seletores e propriedades, escrever as regras CSS, aplicação de CSS, como para especificar o comprimento, a cor e outras unidades em CSS, cascata e herança, a caixa de modelo básico, e de depuração CSS. Em seguida, os módulos passam a explicar o estilo de texto e caixas.
aplique suas habilidades de Design na Web
Se você já está trabalhando em um campo de design criativo ou gráfico, pense sobre as coisas que você já sabe que você pode aplicar ao design do site também. Os princípios que fazem algo visualmente atraente não mudam com base no meio e toda a teoria do design também será útil no espaço digital.apesar de elementos como o código de aprendizagem não parecerem naturais, ter um fundo de design é um grande bónus. De que serve um site lindamente codificado se não se quer interagir com ele?
preste atenção aos sites que você ama
tome nota dos sites que você ama. O que é que eles te atraem? (E como você pode aprender a replicar esses elementos?) Prestar atenção:
- Tipografia
- Navegação
- o Uso de imagens e espaço
- Design de formulários
- Animação e efeitos de deslocamento
- Cor
Desenhar uma grade de linhas
Avaliações é um web designer de brainstorming.
na sua forma mais pura, um modelo de arames é um esboço do que o site será. Não é um esboço de elementos estéticos, é uma planta do site. Desenhar um modelo de arames não é realmente sobre o aspecto deste projeto,é sobre a estrutura de Informação nele.
não sabe como criar um modelo de arames? A telepatia Digital tem um guia de boas práticas para ajudá-lo a aprender.
tome algum tempo para aprender Sketch
Sketch é uma ferramenta de desenho vetorial Para Mac que torna fácil criar elementos de design. Muitos designers estão se voltando para Sketch para criar elementos UI e repetir blocos de design.
é embalado com plugins e permite exportar código para fácil uso e acesso. É uma das ferramentas mais poderosas e populares para aparecer desde a suíte criativa da Adobe e vale o seu tempo.
Mantenha-se atualizado com a tecnologia
AI, VR, AR, 360 graus de vídeo, bots.pode ser difícil acompanhar tantas novas tecnologias e tendências. Mas você precisa fazer um ponto para ficar em cima dessas mudanças.
enfrentá-los um de cada vez e começar com tecnologias que são as mais diretamente relacionadas com o trabalho que você faz. Se você tem um site com chat online, comece por aprender sobre bots. Ou se você usar um monte de conteúdo de Vídeo, Jogue ao redor com vídeo de 360 graus.elementos como a inteligência artificial e a realidade virtual ou aumentada são ainda mais complexos, mas são susceptíveis de se tornar Partes Integradas da paisagem de design do site ao longo da estrada. No mínimo, você deve saber o que eles são e quais as utilizações potenciais podem ser.
Ficar Confortável com o SEO
Embora muitos web designers a pensar um especialista em SEO pode lidar com a obtenção de um site pronto para motores de busca para ler, há um monte de trabalho de design ligado à SEO.
da forma como as imagens são carregadas para a criação de código limpo que é rápido para incluir meta descrições em páginas e elementos, o designer deve incorporar o pensamento de pesquisa em seu fluxo de trabalho.Freelancers, isto é de vital importância para vocês também. A maioria dos clientes são inteligentes o suficiente para pedir um site otimizado SEO. Se você trabalha sozinho, você precisa saber o suficiente para criar um quadro sólido que o Google pode ler (e ser capaz de encaminhar o cliente para um especialista SEO se mais trabalho precisa ser feito).
Jogue com um construtor de sites
um construtor de sites pode ser uma ótima maneira de se sentir confortável com as melhores práticas e como começar a construir e projetar sites.
a maioria destas ferramentas tem muitos modelos e permite-lhe personalizar elementos e até mesmo adicionar excertos de código. Para sites Simples, muitos construtores 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, separar as peças dentro do construtor do site. Veja como eles são projetados e codificados para ter uma sensação de como tudo se junta. Você vai se surpreender com o que você pode descobrir só escolhendo outro projeto à parte.há alguém com quem trabalhe que admire como web designer? Leva-os a almoçar e pensa na indústria.encontrar um mentor que esteja disposto a trabalhar consigo e ajudá-lo a pensar sobre o campo e como aprender o design da web sozinho pode ser inestimável. E enquanto você pode provavelmente encontrar um mentor em uma comunidade online, nada é melhor do que uma pessoa ao vivo que você pode encontrar cara a cara periodicamente. (Talvez valha a pena ter mentores online e pessoalmente.)
Join the CodePen Community
Uma vez que você começar a ficar confortável com algum código e programação, você quer se juntar à comunidade CodePen. A comunidade de código aberto permite-lhe partilhar e editar excertos de código numa rede social de tipos.
Aqui está um pouco mais dos fundadores do site: “CodePen é um ambiente de desenvolvimento social. No seu coração, permite-lhe escrever código no navegador, e ver os resultados dele à medida que constrói. Uma ferramenta útil e libertadora para desenvolvedores de qualquer habilidade, e particularmente capacitante para as pessoas aprenderem a codificar. Focamo-nos principalmente em linguagens front-end como HTML, CSS, JavaScript e sintaxes de pré-processamento que se transformam nessas coisas.”
ter uma classe
para alguns alunos, um ambiente de sala de aula mais formal é o melhor.
Há uma tonelada de classes disponíveis-pessoalmente e online-para você aprender o básico de design web. Comece com um colégio local ou centros de aprendizagem online, como Udemy ou Coursera. Pegue uma aula no seu nível de habilidade atual e continue em frente.queres fazer alguma coisa? Google It
para o não-tão-tradicional-aprendiz, encontrar a resposta para o problema do web design no Google. Há tantos tutoriais e vídeos disponíveis que podem ajudá – lo a passar por quase qualquer problema-e solução.
a chave é procurar exatamente o que você precisa saber e procurar uma fonte respeitável para a resposta. Aqui está outra dica quando se trata de tutoriais e vídeos-conteúdo mais recente provavelmente vai lhe dar uma resposta melhor, mais completa e mais relevante. (Lembre-se, algumas destas coisas estão mudando rapidamente.)
preste atenção à experiência do Usuário
Nada pode fazer ou quebrar um site como o design da experiência do Usuário. Tens de planear isso e compreendê-lo.
Aqui está como a Interaction Design Foundation descreve UX design:
User experience (UX) design é o processo de criação de produtos que fornecem experiências significativas e pessoalmente relevantes. Isto envolve o design cuidadoso da usabilidade de um produto e do prazer que os consumidores irão derivar da sua utilização. Está também preocupado com todo o processo de aquisição e integração do produto, incluindo aspectos de branding, design, usabilidade e função.
UX designers, 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 UX irá considerar o porquê, o quê, e como de Uso do produto.
preste atenção às tendências de Design
como se parece um design moderno de website? Não é uma pergunta com rasteira. Para projetar sites modernos e experiências de usuários, você precisa saber o que os usuários querem e como eles estão interagindo com ele. Se a última vez que baixaste uma aplicação ou olhaste para um site no teu telemóvel foi em 2016, tens muito terreno para recuperar.a criação de projetos de sites que tenham toques modernos e tendências integradas no projeto ajudará seus projetos a se destacarem. Como sabes o que está na moda? Continue lendo sites como este e preste atenção ao que outros designers estão fazendo. Tome nota de cores e estilos e recursos que estão incluídos nos sites que você visita com frequência.
criar sem cor
iniciar cada desenho sem cor. Um grande designer uma vez me disse que se o seu design funciona em preto e branco, será impecável em cor.
isso pode nem sempre manter, mas é um grande ponto de partida.
ao criar desenhos em preto e branco, você pode ver onde os elementos contrastam e como eles jogam juntos. Você removeu qualquer associação emocional com o movimento da cor ou dos olhos que acontece por causa disso. Esta forma mais simples de design dar-lhe-á uma ideia se algo funcionar como um conceito antes de você passar a finalizá-lo.
Aprenda a amar fontes do Google
o Google Fonts é seu amigo.
independentemente do que você sente sobre o Google, a capacidade de navegar, ordenar e selecionar os tipos de letra que você sabe que funcionarão em projetos de sites é importante. Você não tem que pensar em Licenciamento ou se os tipos de letra são compatíveis com browsers específicos ou não.
a limitação é que você só tem o que está na biblioteca de fontes do Google para trabalhar. Mas se você tentar você pode encontrar algo que vai caber quase todos os projetos. Vai poupar-te muito tempo a longo prazo.
separe um Kit UI
descarregue uma interface de utilizador ou um kit de ícones e separe-o.
assim como você pode inspecionar o código de um site, veja como os elementos de design são construídos para a web. Tome nota da escala e grade, olhe para as misturas de cores e como os arquivos são organizados dentro do Photoshop ou ilustrador.
procure um kit para baixar que inclua elementos em vários formatos para ecrãs de alta resolução. (Baixar um monte de JPEGs não vai te servir muito bem.)
então tente construir ou personalizar um elemento ou dois de seu próprio.
torna-se um tipógrafo
o design moderno do website tem um forte foco na tipografia … boa tipografia. A partir de cabeçalhos de heróis com palavras gigantes para camadas de texto que atraem um usuário para o projeto, compreender os princípios de como emparelhar elementos de tipo e construir blocos de texto envolventes é vital.comece com o pensamento de Ellen Lupton com o tipo. (Há também um livro com o mesmo nome. Lupton é a autoridade em tipografia e a informação dela vai fazê-lo pensar como um tipógrafo num instante.
salte para JavaScript
quando você está começando a se sentir muito bem sobre trabalhar com web design, 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 web. É o que faz um slider slide ou que a animação paralaxe anima.
Learn js tem um tutorial interativo para ajudá-lo a começar.
actualize o seu portfólio
Uma vez que comece a desenhar para a web, certifique-se de actualizar o seu portfólio com projectos de web design. Esta simples acção vai ajudá-lo a mostrar-se … e aos outros … que o web design faz parte do seu repertório.um portfólio atualizado pode ajudar os potenciais clientes a ver como é o seu” estilo”. Certifique-se de mostrar layouts, cores, tipografia e diferentes técnicas que mostram o que você pode fazer.
Desafie-se a si mesmo
Com tantos atalhos e excertos de código para ajudá-lo a corrigir quase qualquer problema do site que você está tendo, não fique preguiçoso. Lembre-se de se desafiar continuamente a aprender novas habilidades, novas tecnologias e continuar a melhorar o seu jogo de web design.
A única coisa sobre este campo é que ele está constantemente mudando; há sempre algo novo para aprender ou tentar.maximize a sua experiência. Você tem que começar a desenhar sites para ser um web designer.
iniciar pequeno, mas assumir projetos com outros. Peça para participar de um projeto com uma equipe no trabalho. Tackle um pequeno site para um amigo. Quanto mais experiência você tem construindo sites, melhor e mais rápido você vai ter.do que estás à espera? Pára de adiar.
peça Feedback
Use sua rede para coletar feedback em seus projetos de design do site, não importa o quão pequeno você pensa que eles são. Ouça Este feedback-mesmo que não goste e veja o que pode aprender.além da preferência visual, a pessoa que fornece o feedback ofereceu sugestões para melhorar o funcionamento do site? Eles poderiam entender facilmente o objetivo do projeto? Eles ligaram-se com as mensagens?
continue aprendendo coisas novas
para ser um grande designer de website, você só precisa continuar jogando, tentando e aprendendo coisas novas. Faça um ponto para a rede e se comunicar com outros no campo para que você possa ficar em cima de técnicas e mudanças visuais que estão em demanda.
Se você está olhando para aprender design do site, então isso provavelmente já é algo que você faz regularmente. Mas este é um campo em evolução, e continua mudando quase todos os dias. Pergunta a quem o está a fazer.