Graças à internet, o design gráfico e a programação estão se tornando cada vez mais sobrepostos.

Como programador, constantemente me pego precisando de conhecimentos básicos de Design Gráfico, mas tenho problemas para localizar recursos de aprendizado de design gráfico completos, porém concisos, e, em vez disso, geralmente encontro algumas partes do conhecimento aplicáveis ​​à tarefa em questão.

Vocês podem oferecer algumas dicas ou recomendar bons livros, tutoriais, blogs e sites que fornecem uma visão geral do design de sites para iniciantes que, na sua experiência, foram materiais de aprendizagem eficazes e de alta qualidade. Não estou procurando dicas sobre como usar as ferramentas de edição de imagens, mas assumindo uma compreensão básica delas, quais recursos e conselhos ajudarão melhor um novo designer a criar designs com aparência profissional?

• Mantenha-se simples - não tente fazer nada muito chique ou aventureiro no início. Baixe o básico primeiro e comece a experimentar. Não tente emular a interface do computador Star Trek.
• Seja consistente - Um design consistente faz parte da base de um bom design. Acompanhe suas margens, tamanhos e posicionamento e mantenha-os em todo o design.
• Remover desordem - inclua apenas os elementos necessários para o design. Remova todo o resto.
• Priorizar - Qual é o objetivo principal do design? Enfatize esse propósito. Torne óbvio.
• Use espaço em branco - permita margens adequadas. Grandes blocos de texto com pouca ou nenhuma margem não são muito legíveis. O mesmo vale para outros elementos de design.
• Use uma paleta de cores - você não deve usar mais de 4-5 cores no total.
• Fontes consistentes - use uma ou duas fontes. Use-os de forma consistente, geralmente um para títulos e outro para texto de parágrafo. Calcular e manter tamanhos de fonte consistentes, alturas de linha e espaçamento entre linhas. Não use Comic Sans, a menos que você possa se defender de zumbis raivosos do velociraptor.
• Design primeiro - o design não deve ser uma reflexão tardia; deve ser um membro de primeira classe da fase de planejamento. O design será a maneira como seus usuários interagem com a sua programação e eles formarão suas opiniões primeiro e serão amplamente baseados no seu design. Dê ao design sua importância adequada.

Quanto aos recursos, confira qualquer um dos seguintes sites:

• Smashing Magazine
• PSD Tuts
• Abuzeedo
• UX Booth
• Eu amo tipografia
• Jason Santa Maria

O índice básico de design de Jim Krause me deu um resumo muito bom dos princípios básicos de composição, cor e tipo. Eu não era um grande fã da maioria de seus próprios exemplos, mas eles ilustram muito bem seus pontos e ele aborda algumas coisas valiosas que eu não vi mencionadas em outros lugares. E talvez o mais importante, a leitura me deixou realmente empolgado por sair e experimentar as idéias que ele estava apresentando.

Às vezes, há uma ligeira sobreposição entre desenvolvimento web e web design, mas não acho que os desenvolvedores web devam tentar ser designers em tempo integral, a menos que estejam dispostos a colocar tanto esforço nisso quanto aprenderam a programar. Não é algo em que você possa se envolver nos fins de semana e ser bom.

Se for assim, você pode aprender a ser seu próprio web designer (ou seja, criar seu próprio web design para todos os sites em que trabalha), então eu realmente recomendo que você receba algum treinamento formal (mesmo que esteja apenas fazendo alguns cursos de design de faculdade) para aprender os fundamentos do design visual e composição. Um livro de design no estilo de um livro didático como o que Damon postou poderia ajudar, mas você terá que fazer todos os exercícios do livro e entender o material. Mas o mais importante é que você precisa gastar muito tempo olhando (navegue em galerias de design on-line, folheando revistas e anúncios de revistas etc.) e criando designs (faça o download de alguns resumos de design de prática on-line ou participe de concursos de design on-line).

Se é para ajudá-lo a se comunicar com os designers gráficos / da web com os quais trabalha, simplesmente adquirir um livro que ensina o vocabulário (por exemplo, conceitos de tipografia) e focar na usabilidade , acessibilidade e design de UX é provavelmente o melhor uso do seu tempo. Dessa forma, você pode se envolver na direção criativa do projeto e ajudar a projetar as interfaces, mas é o designer quem cria a "aparência" ou estética do site.

O Virtuosi Media lista muitos recursos bons (a rede Tutsplus é ótima em geral, e a Smashing Magazine é uma leitura obrigatória para qualquer desenvolvedor / designer da Web), ao qual eu acrescentaria:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - hospeda os portfólios de muitos designers de classe mundial para se inspirar

Sou programador e, para mim, os seguintes livros foram muito úteis para mim:

• Livro de design do não-designer de Robin Williams: Este livro aborda os conceitos básicos de design gráfico.
• Desenho no lado direito do cérebro de Betty Edwards: O livro para desenvolver suas habilidades de desenho.
• A interface humana de Jef Raskin: Este livro provoca algumas reflexões sobre o design da interface do usuário.

Talvez não seja relevante para todos os casos, mas para os programadores da Web, uma das maiores coisas que se destaca para mim, que talvez preencha um pouco a lacuna, é aprender CSS por dentro e por fora, pois ser capaz de projetar bem não significa nada se você não conseguir integrá-lo ao seu projeto que está criando.

Em 2004, eu me encontrei no meio do caminho entre os dois mundos, como havia sido a maior parte da minha vida - eu fazia web desde o HTML 3.2 nos dias pontocom; criado com uma Apple // e pelos pais (um coreógrafo e um educador) que me permitiram e me incentivaram a passar muito tempo com arte. Design não é arte e, de fato, alguns de seus padrões mais algorítmicos se alinham muito bem com a programação, esteja você fazendo web ou não.

• Histograma da estante de livros - uma impressão que eu fiz na pós-graduação que é design e desenvolvedor-y.

Mas sim, 2004: eu dividi a diferença quando entrei na faculdade, onde obtive uma educação tipográfica de primeira classe e, em seguida, a latitude a explorar - durante a qual, mais tarde, minhas tendências mais nerds vieram a calhar.

Então, talvez considere o ensino superior, ou o que quer que seja da mesma forma que você consome. Boa sorte com isso de qualquer maneira.

Aprenda muito sobre tipografia.

Dos clássicos …

^{Jan Tschichold}

Não os palhaços ...

^{David Carson}

Tipografia estratégica e eficaz é uma das qualidades mais ausentes neste campo (e sempre foi).

Normalmente, posso recrutar um designer totalmente baseado em seu tipo de manipulação. Cerca de 80% da história está no currículo configurado.

Um bom começo (gratuito) é essa adaptação detalhada do recurso essencial de Robert Bringhurst para aplicação na Web.

^{Os elementos do estilo tipográfico, Bringhurst}

Essa é uma consideração mais ampla que lida com a interação de tipo e layout.

^{Sistemas de grade em design gráfico, Brockmann}

1. Pense criticamente sobre objetos projetados ao seu redor

   Quase tudo no ambiente criado pelo homem tem algum tipo de design, seja um gráfico, um site ou um acessório de moda.

   Observe como o design funciona bem para a finalidade a que se destina, bem como sua aparência.

2. Pense no design como uma maneira de preencher uma necessidade ou resolver um problema

   Embora se esforce para fazer as coisas parecerem boas, o design difere de outros tipos de arte, pois possui uma aplicação prática.

   Um logotipo, por exemplo, é um tipo de design gráfico que ajuda a tornar uma marca ou empresa rapidamente reconhecível.

   Uma peça de roupa serve para cobrir o corpo, além de tornar o usuário mais atraente.

3. Pratique a comunicação visual.

   Os designers precisam ser capazes de fazer desenhos ou outras representações de seus projetos para refiná-los e explicá-los a outras pessoas, como colegas e fabricantes de design.

   O desenho é uma ferramenta poderosa para designers, mas não se preocupe se você não pode desenhar foto-realista. Os desenhos dos designers não precisam ser obras-primas, apenas uma maneira de capturar rapidamente idéias que levarão ao produto final. O rastreamento também é totalmente aceitável.

   Além dos desenhos, os designers também usam itens como maquetes, protótipos e imagens de computador para visualizar seus desenhos.

4. Explore como as coisas são feitas

   Quando você trabalha como designer, não apenas precisa considerar o que é agradável aos olhos, mas também precisa considerar como o seu design será implementado.

   Para um objeto como um estojo de celular, os designers industriais precisam pensar sobre que tipo de processos de plástico e moldagem serão usados ​​e como cada parte será unida.

5. Encontre boas fontes de informação

   Além de revistas de design, procure livros sobre o processo, princípios e métodos de design.

   Tente olhar para livros didáticos e vídeos técnicos sobre itens de construção de roupas, métodos de fabricação e várias técnicas artesanais.

   Aprender sobre design é mais profundo do que ler revistas de moda e decoração, embora sejam um bom recurso para as tendências atuais.

6. Desenvolvendo suas habilidades de design

   Estudar e praticar é bom, mas o que realmente levará seu projeto ao próximo nível é a experiência do mundo real.

7. Cometer erros rapidamente

   você cometerá muitos erros e, quanto mais rápido conseguir resolvê-los, melhor.

8. Esteja sempre pronto para pegar idéias.

   Procure inspiração em todos os lugares. A inspiração não precisa vir de outros designs ou tendências de design - geralmente pode vir da natureza ou de coisas que acontecem por acidente.

Livros e materiais

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Abuzeedo

UX Booth

Alguns pontos a serem lembrados:

1. Todo projeto resolve um problema

Pare de pensar no design em termos de "Como faço isso bonito?" e comece a pensar sobre isso em termos "Como faço para tornar isso tão fácil de usar quanto humanamente possível?"

Ao criar sites, isso significa que, no sentido mais amplo, você está resolvendo um problema de negócios .

Existe um site para atingir uma meta de negócios .

Os usuários de um site também têm seu próprio objetivo - podem querer comprar algo, comparar produtos, ler sobre um tópico etc.

É seu trabalho como designer ajudar os negócios , certificando-se de que o maior número possível de usuários cumpra a meta de negócios e ajude os usuários a navegar no site para que possam cumprir sua própria meta.

Por exemplo, você está criando uma loja de comércio eletrônico: o objetivo comercial aqui seria vender os produtos. E o objetivo dos usuários é encontrar exatamente o que eles querem comprar, o mais rápido possível e verificar, o mais rápido possível.

Grande parte do processo de design consiste em descobrir o problema, criar um perfil do usuário, pensar em como atingir a meta de negócios etc.

As cores, fontes, layout, todas as decisões de design que você toma devem ser ditadas pelo objetivo do site .

2. É a repetição que faz as coisas parecerem bonitas .

É disso que trata a consistência.

Por exemplo, emparelhamento de fontes. As fontes são emparelhadas com base em características semelhantes, na repetição de detalhes.

Aqui está uma partida: Farnham e Benton Sans.

De acordo com este post aqui 2, essas duas fontes correspondem porque:

[...] os rostos são iguais no agachamento de suas letras minúsculas, que têm ascensores e descendentes distintamente curtos. [...] As letras minúsculas de ambos são largas.

A repetição de certas características faz com que essas duas fontes funcionem bem juntas. Você pode vê-los em uma página da web aqui 3 .

Repetição traz harmonia em um design. E a harmonia torna o design bonito.

Mas, como você pode ver, Farnham e Benton Sans também contrastam - Fuham é uma fonte com serifa e Benton é sem serifa.

Por que há necessidade de contraste? Estamos procurando introduzir semelhanças em um design, certo?

Bem, sim, mas muita repetição torna seus projetos sem graça e difíceis de usar .

A cura é contraste.

3. O contraste ajuda o usuário a encontrar o caminho

Isso os ajuda a distinguir elementos diferentes um do outro. Isso os ajuda a encontrar os principais elementos, como cabeçalhos, navegação e botões.

Quanto mais importante o elemento, mais ele deve contrastar com o ambiente.

Use a repetição para tornar seus projetos consistentes. Como outros já disseram - 2 fontes, uma paleta de cores limitada, etc.

Use contraste quando realmente precisar separar um elemento do resto.

Tudo o que é bom saber, mas ... ainda não ajuda você a criar seu próximo site, certo?

Bem, eu tenho uma solução para isso também.

O primeiro passo para melhorar o design da Web é observar e absorver o trabalho de outras pessoas. Muito disso. É daí que a "inspiração" vem.

Olhe para uma centena de designs que você gosta, analise-os e você começará a identificar padrões. Seu cérebro o ajudará a combinar esses padrões em seu próprio design, que será uma variação de todos os designs semelhantes que você viu. Você não precisa criar algo "único".

Resumo: Da próxima vez que você começar a criar seu projeto paralelo

Navegue por uma dúzia de sites / aplicativos da web semelhantes e faça esboços rápidos de seus designs. Observe qual fluxo de trabalho eles usaram. Por que eles usaram? Observe quais formas, cores e fontes eles usaram.

Em seguida, siga esse processo para criar seu próprio design:

1. Defina o projeto. Mergulhe no projeto e saiba mais sobre:

   1. Seu objetivo, resultados pretendidos

   2. Seus (futuros) usuários
   3. A experiência pretendida para seus usuários / visitantes
   4. A marca por trás do projeto
2. Adquira os recursos necessários. Pegue suas mãos no conteúdo (exemplo) (peça emprestado de sites semelhantes)

3. Dê forma ao conteúdo

   1. Escolha um tipo de letra para digitar o conteúdo (escolha um que se encaixe no humor e na mensagem do site)
   2. Escolha o tamanho da fonte para a cópia do corpo
   3. Gere uma escala modular (uma tabela de dimensões harmônicas proporcionais) a partir do tamanho da fonte da cópia do corpo (usando Escala de tipo - uma calculadora visual)
   4. Esboce layouts diferentes com base nos requisitos do projeto
   5. Crie o layout (em HTML e CSS) com a ajuda da escala modular: largura da coluna, altura da linha, tamanhos de cabeçalho, margens inferiores, colunas (se necessário)
   6. Aplique a cor de acordo com as diretrizes da marca

Você pode ler mais sobre cada etapa deste processo aqui .

Um pouco mais:

1. Dê uma olhada nas coleções inspiradoras de sites para obter idéias. Uma coleção mãe de coleções inspiradoras de sites lista várias coleções. Outros dois bons sites são siiimple.com e minimalsites.com .

2. A sugestão de 'Remover a desordem' da Virtuosi Media é um ideal definitivo, mas um site com desorganização feito por um iniciante parece melhor do que um site minimalista feito por um iniciante. A desordem camufla um pouco os outros elementos de design ruins, distraindo o conteúdo. O site comercial típico tem muita confusão, como quase todos os modelos, mas ainda tem uma aparência profissional o suficiente.
   
   É necessária uma conexão íntima com fontes, contraste, espaço negativo, coloração, densidade, fluxo, ... para criar um site eficiente e bem projetado que respira bem.

3. Se tudo se tornar um pouco esmagador, considere comprar um modelo.

Apenas para adicionar mais alguns links para pessoas provenientes de um background de programação interessadas no design da interface do usuário.

• Design For Hackers (livro impresso)
• Princípios do design de interface do usuário (site)
• Design de interface do usuário passo a passo (ebook)
• The Shape Of Design (versão online gratuita)

No começo, você enfrentará problemas, pois algumas coisas não estarão no seu caminho. Mas você terá que ser paciente e praticar bastante. Quando comecei a projetar e olhar para trás, há 4 anos, não acredito que fiz esse trabalho.

Você realmente precisa procurar outros ótimos designers para trabalhar. Para isso, você deve seguir grandes designers no Dribbble . Outra coisa muito importante é assistir regularmente aos projetos mais recentes nos sites das galerias de CSS, como www.minimalistgallery.com ou outros.

Desejando tudo de melhor !!!

Inscreva-se em http://sidebar.io/ para obter boletins diários. Cada artigo será útil de uma maneira ou de outra. Outra ótima maneira de aprender sobre projetos é o drible .

Esta pode ser uma dica bastante geral, mas para mim é algo que realmente diz se alguém é um bom designer ou não:

Espaços em branco, margens e alinhamento.

Eles são a chave para criar designs lisos e com aparência profissional. Eles criam uma espécie de 'espaço para respirar' e podem realmente determinar se o seu design parecerá montado ou não. Assim como as fontes, você deseja manter um determinado conjunto de margens / espaços em branco para manter um layout limpo.

Para acompanhar coisas assim, usar uma grade ou guias para projetar pode ser muito útil.

Sua pergunta é do tipo "Como designer, estou constantemente precisando de conhecimentos básicos de programação de aplicativos". Ambas são vastas áreas, com regiões sobrepostas supor que precisam uma da outra. A boa notícia: você está interessado e entende a importância deles. A má notícia: não há uma maneira fácil de entender completamente o que é necessário para criar um bom design, sem um curso ou metodologia adequados. Mas, para os primeiros passos, este livro é de alguma maneira bom para começar a construir com segurança sistemas visuais que façam sentido.

Livro de Design para Não Designers