Dicas e recursos para designers iniciantes

189

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?

Andy Groff
fonte
Achei isso útil: net.tutsplus.com/articles/lectures/design-for-developers Vale a pena assistir.
dan_waterworth

Respostas:

180
  • 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:

Virtuosi Media
fonte
13
"Não tente emular a interface do computador de Star Trek." Hahaha, brilhante. : D Obrigado pela resposta informativa.
Rob Howard
2
Confira hackdesign.org , é uma lição semanal muito boa sobre design para hackers.
Augustin Riedinger
11
PSD Tuts - link ruim!
Dmitri Zaitsev
11
Eu gostaria de acrescentar a esta lista o quão importante o usuário é, design deve ser utilizável em primeiro lugar e tudo o que fica no caminho de usabilidade devem ser descartados
Toni Leigh
Então, basicamente, tudo o que você faz com o código. Furar a qualquer abas ou espaços. Use espaço em branco. Remova a desordem etc.
Bald Bantha
29

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.

Damon
fonte
24

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

Calvin Huang
fonte
2
Eu concordo com a maioria dos seus pontos de vista, e não estou considerando uma mudança de carreira ou algo assim :-) No trabalho e se eu fosse iniciar um projeto pessoal realmente sério, obviamente os profissionais fazem o trabalho. Mas eu e eu assumimos que muitos outros programadores gostam de criar pequenos projetos pequenos e não podem contratar profissionais para algo que terá quatro visitas por mês. Assim, com esses esforços, eu mesmo os projeto, e quanto melhor eles parecerem, maior a chance de decolar. Também gosto do processo de tentar criar arte digital. É uma boa pausa da codificação e um resultado decente torna tudo mais agradável.
Andy Groff
4
@ Andy Groff: Isso soa como um bom plano. Eu estava me referindo principalmente a desenvolvedores da Web que tentam lidar com o design de projetos comerciais e acabam gastando 95% do seu tempo na parte de desenvolvimento e, em seguida, tentam fazer o design nos últimos 3-4 dias antes do prazo final. Mas acho que qualquer um pode aprender algo com novas habilidades e expandir seus horizontes. É meio como os atletas fazem o treinamento cruzado, o que ajuda a melhorar seu desempenho geral.
Calvin Huang
11
Há enorme sobreposição em termos de papéis. Esses papéis geralmente não são tratados pela mesma pessoa, é claro.
DA01 2/02
19

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.
caahab
fonte
15

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.

Kaji
fonte
12

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

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

fish2000
fonte
12

Aprenda muito sobre tipografia.

Dos clássicos

A Forma do Livro, Tschichold
Jan Tschichold

Não os palhaços ...

O fim da impressão: o design gráfico de David Carson
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
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
Sistemas de grade em design gráfico, Brockmann

roupas comuns
fonte
10
  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

Rachuru
fonte
7

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 .

  1. É 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.

Farnham e Benton Sans são um bom jogo

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.

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

    1. Seus (futuros) usuários
    2. A experiência pretendida para seus usuários / visitantes
    3. 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 .

rsdimitrov
fonte
6

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.

jontyc
fonte
6

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

Vicky
fonte
2
Olá, as duas postagens neste site foram vinculadas ao mesmo site externo, a galeria minimalista. Só para você saber, as pessoas podem pensar que esse tipo de coisa parece um pouco spam.
user568458
2

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 .

Hemalatha
fonte
2

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.

verão
fonte
0

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

Ale Macedo
fonte