Ir para conteúdo
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/

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Yanzoca
      Olá, bom dia/tarde/noite, gostaria de uma ajuda sobre como mudar a interface do photoshop, no meu photoshop a janela de cores aparece como na segunda foto, mas gostaria de deixa-la como na primeira foto, poderiam me ajudar? Desde ja agradeço


    • Por dba.amaro
      Galera, bom dia/tarde/noite, 
       
      Estou desenvolvendo uma aplicação web, porém preciso mostrar algumas informações e os objetos vão mudar de cor / porcentagem, segundo as informações que estão contidas no banco de dados, 
       
      Tenho, algumas ideias, porém não sei nem por onde começar, se alguém puder ajudar, agradeço !!
       
      Um abraço  a todos e bons posts!
    • Por Tiago92
      Bom dia. Tudo bom?
      Eu sou novo tanto aqui quanto na criação de sites e eu realmente apreciaria alguns conselhos.
      Eu criei esse site ( www.liderius.com ) em novembro do ano passado. E esse também foi o meu primeiro contato com criação de sites.
      basicamente é um site aonde eu ofereço conteúdo no blog assim como vendo produtos que sou afiliado.
      qualquer forma de feedback seria muito bem-vinda. tanto logotipo quanto design, cores ou estrutura do site de forma geral.
      Eu sou completamente leigo no assunto mas eu estou disposto a aprender o que for preciso para que esse site fique ótimo.
      Agradeço a sua anteção.
       
      Atenciosamente,
      Tiago
    • Por Geth
      Em termos de tipografia, logo, cores, espaçamentos, navegação, etc?
       
      Segue o link: https://tattoolandia.com.br/
    • Por xandedd
      Criei um login modal em minha page, e estou com problemas na minha (div #container), onde criei um background color com (width: 100% e height: 100%),  e não consigo eliminar as margins, ja tentei de tudo, (margin: 0  ,  padding: 0  ,  top:0  ,  left:0)    e até mesmo tentei colocar margin:0 nos elementos html e no body e nâo tive resultado,  exemplos =  *{margin: 0;} html,body {margin:0;} , e em ultima tentativa tentei usar o (!important;) mesmo assim sem resultado, preciso muito de ajuda, desde já agradeço
      html,body { background-size: cover; background-repeat: no-repeat; height: 100%; font-family: 'Numans', sans-serif; } *, *::after, *::before { border: 0; box-sizing: border-box; margin: 0; padding: 0; } #container { height: 100%; align-content: center; display: none; position: fixed; top: 0; left: 0; width: 100%; margin: 0; background: rgba(0, 0, 0, 0.8); z-index: 1300 !important; } #container:target{ display: block; } .card-header h3 { text-transform: uppercase; font-size: 14px; font-weight: 700; letter-spacing: .1rem; margin-bottom: 5px; } .card{ height: 370px; margin-top: auto; margin-bottom: auto; width: 400px; background-color: #fff !important; animation: slideUp 0.3s ease-in-out; } @keyframes slideUp { from{ opacity: 0; bottom: -200px; } to { opacity: 1; bottom: 0; } } .social_icon .tw{ font-size: 60px; margin-left: 10px; color: rgba(120,205,240,0.8); } .social_icon .fb{ font-size: 60px; margin-left: 10px; color: #6d84b4; } .social_icon .gm{ font-size: 60px; margin-left: 10px; color: #df4b37; } .social_icon span:hover{ color: #495057; cursor: pointer; } .card-header h3{ color: #bf8b28; } .social_icon{ position: absolute; right: 20px; top: -45px; } .input-group-prepend span{ width: 38px; background-color: #bf8b28; color: #fff; border:0 !important; } input:focus{ outline: 0 0 0 0 !important; box-shadow: 0 0 0 0 !important; } .remember{ color: #495057; } .remember input { width: 20px; height: 20px; margin-left: 15px; margin-right: 5px; } .login_btn{ color: #fff; background-color: #bf8b28; width: 100px; } .login_btn:hover{ color: #fff; background-color: #6c757d; } .links { color: #495057; } .links a { margin-left: 4px; } a { text-decoration: none; color: #309ca7; } a:hover { text-decoration: none; color:#20eaff; } <div id="container"class="container"> <div class="d-flex justify-content-center h-100"> <div class="card"> <div class="card-header"> <h3>Log In</h3> <div class="d-flex justify-content-end social_icon"> <span class="fb"><i class="fab fa-facebook-square"></i></span> <span class="gm"><i class="fab fa-google-plus-square"></i></span> <span class="tw"><i class="fab fa-twitter-square"></i></span> </div> <a href="#" class="close">&times</a> </div> <div class="card-body"> <form> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text" class="form-control" placeholder="Usuário"> </div> <div class="input-group form-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" class="form-control" placeholder="Senha"> </div> <div class="row align-items-center remember"> <input type="checkbox">Lembrar-me </div> <div class="form-group"> <input type="submit" value="Login" class="btn float-right login_btn"> </div> </form> </div> <div class="card-footer"> <div class="d-flex justify-content-center links"> Não é cadastrado?<a href="#">Cadastre Se</a> </div> <div class="d-flex justify-content-center"> <a href="#">Esqueceu sua senha?</a> </div> </div> </div> </div> </div>  


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.