Jump to content
zetabyte00

Quais passos para adquirir um bom design?

Recommended Posts

Quais passos para adquirir um bom design? Meus conhecimentos são muito básicos em HTML e CSS. O que devo procurar ler e praticar. Pois, eu vejo cada site na internet com um design irado. Por exemplo, o próprio imasters tem um design bem exuto. 

 

Tem esses também: 

 

https://honeysanime.com/

 

https://screenrant.com/

 

http://creative-punch.net/

 

https://www.hongkiat.com/blog/

 

Share this post


Link to post
Share on other sites

Olá @zetabyte00,

 

Existem três áreas distintas, mas que trabalham em conjunto na idealização de um site: Design, UX e Desenvolvimento, esse último é dividido em front-end (desenvolve na camada do cliente com html, css e javascript) e back-end (desenvolve na camada de serviço da aplicação com php, c#, python etc).

 

Os profissionais que trabalham nessas áreas também têm características distintas, por exemplo, um designer precisar ter conhecimentos bem sólidos de gestalt, psicologia das cores etc. Além disso precisa também pesquisar muito, ver muitos sites e guardar referências.

 

As interações nos sites podem ser de forma sofrível ou agradável para o usuário, e é justamente o profissional de UX que vai pensar na melhor forma do usuário se relacionar com o site. Para isso, ele precisa contar com conhecimentos de prototipagem, psicologia, micro-interações etc.

 

O desenvolvedor front-end é a pessoa que dará vida ao site, vai pegar as diretrizes visuais criadas pelo designer + os protótipos criados pelo UX Designer e vai codificar isso usando as linguagens de marcação (html), de estilo (css) e interação (js). Para esse profissional, conhecimento técnico dessas linguagens é indispensável, assim como a experiencia profissional trará traquejo na resolução dos problemas. Pesquisar e se atualizar também são fundamentais.

 

Eu acho que um bom "design", não é apenas design. É a junção dos esforços dessas três áreas. Se você quiser fazer sites com um bom "design", comece fazendo:

 

- Cursos online - Alura, Devmedia, Codecademy, Udacity etc;

- Leia blogs - brasil.uxdesign.cc, tableless, choco la design, codrops, usabilidoido etc;

- Acesse fóruns para tirar suas dúvidas e de outros - imasters, stackoverflow, forum.tableless etc;

- Leia livros - Não me faça pensar, Design para a internet, qualquer livro da Casa do Código etc;

- Pesquise referências: Pinterest, behance, calltoidea, ffffound etc;

- Salve suas referências: Pinterest, Evernote, Github, jsfiddle etc;

- Tente reproduzir layouts, códigos e interações que ache legal em outros sites.

- Desenvolva projetos pessoais e peça opiniões de outras pessoas (da área ou não). 

- Observe o mundo ao seu redor, seja curioso, goste de novidades, viaje, observe e observe "um pouco mais".

 

Espero que tenha ajudado, Abraços.

 

 

  • Obrigado! 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lumbarque_Oficial
      Tô a procura de uma equipe para participar 
       
      Sou programador, spriter ou músico
       
      meu nome é Gabriel , tenho 18 anos e já participei de uns grupo pequenos
       
      Sei de tudo um pouco mas a área que eu tô mais querendo botar a mão na massa atualmente é programação
       
      ~ alguém? ~
    • By carlavoltani
      Vaga: Web designer - WordPress
      Estamos com vaga aberta para Web Designer com experiência em WordPress para atuar na área de Marketing.
      Principais atividades:
      Desenvolvimento e manutenção de websites em ambiente WordPress.
      Criação de artes gráficas para o uso no ambiente web, que atendam sites, redes sociais e anúncios para campanhas de marketing.
      Requisitos:
      Grande experiência em Wordpress com desenvolvimento de layouts responsivos e também com instalação de plugins/componentes. Conhecimento dos formatos e tamanhos de imagens para site, rede sociais, e para anúncios de campanhas de marketing. Conhecimentos de HTML | CSS | SEO. Excelentes habilidades no PACOTE ADOBE (Illustrator e Photoshop). Detalhes:
      VAGA CLT - Período Integral - Home Office Estamos localizados em condomínio empresarial próximo à Unicamp.
      Detalhes da empresa e local, clique aqui.
      Interessados, por favor preencher o formulário ao lado até 31/Maio/2020.  
      Interessados deverão enviar o portfólio e realizar o cadastro nesse link:

      https://go.vulcanet.com.br/vaga-web-designer
    • By bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By D Design
      Olá, como posso fazer esse tipo de animação em um site? Que conteúdos devo procurar e estudar? Eu até fiz um no Adobe animate mas não sei como deixar fluido assim e interativo com o mouse do usuário.
       
       
    • By pedronleal
      Olá Pessoal, então, gostaria de saber se existe pessoas, dispostas a trabalhar comigo para fazer um anime, gostaria de montar um grupo de brasileiros com, Ilustradores, Iluminadores, Efeitos especiais e etc, para juntos conseguirmos criar um Anime Brasileiro. Irei criar um Discord para juntar todas essas pessoas e realizar isso. Quem tiver interesse me manda seu Email e se possível seu Discord.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.