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 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>  


    • Por juliosertori
      Boa noite galera, tudo bem? Tenho uma dúvida é a seguinte:
       
      Tenho que fazer uma imagem para impressão de um Adesivo de 3x3 metros, e a questão é, fazer esse arquivo em 300 DPI no tamanho original no Photoshop, está ficando com 10gb de arquivo, mas pesquisei um pouco e vi que fazem com 100 DPI e até menos, só que com a questão da distância que a pessoa vai visualizar a imagem, no meu caso, é em uma parede onde a pessoa ficará de frente menos de 1m de distância, o que me recomendariam?
       
      Obrigado!
    • Por MAYCON BARTOWSKI
      Gente eu fiz uma pagina em html pra um cliente de descrição do produtos contendo também uma lista de produtos compatíveis com o produto em questão.
      O problema é que ele precisam de um programa que permita ele simplesmente clicar no texto e modificar a descrição sem ter que ir no html. O program que ele está usando esta danificando os códigos alterando efeitos de mouse hover e as vezes da quebra a linha do texto que deveria ser inteira. 
      Alguém sabe de um programa que permite modificar direto no texto do design mas que não danifica os códigos?
       
×

Informação importante

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