Sou desenvolvedor da Web com capacidade moderada. Posso colocar as coisas onde quero e colocar algumas coisas do JQuery, se necessário. No entanto, se estou criando meu próprio site (o que estou começando a fazer), não tenho idéia de como projetá-lo. Se alguém se sentar ao meu lado, aponte para a tela e diga "coloque essa foto lá, envie uma mensagem de texto", posso fazer isso com bastante facilidade. Mas projetar meu próprio site com minha escolha de cores e texto parecerá que uma criança a inventou.

Alguém conhece algum site / livro que eu possa consultar ou alguém tem dicas sobre os conceitos básicos de web design para não-bebês?

Você tem algumas coisas a fazer.

Dicas:

Aprenda a usar o Photoshop. (Em particular, os estilos de camada são excelentes. Observe que podem ser efeitos difíceis de serem reimplementados no CSS2). Isso ajuda bastante na criação de bons modelos.

Veja sites criados por profissionais. Quais sites você visitou com uma aparência agradável?

Encontre sites que o incomodem e considere o que poderia torná-lo melhor. Veja também os anúncios de produtos. Embalagem de alimentos. Anúncios de jornal. Você escolhe.

Além disso, quando você começar a entender, pratique, pratique, pratique. Os gráficos levam tempo para se desenvolver como uma habilidade, especialmente de um programador que tenha códigos a considerar. (Gradientes versus "tileabilidade")

Ferramentas:

(O Photoshop é um favorito pessoal. O Paint.NET é uma boa alternativa para Windows, mas não é tão poderoso.)

Sistema de grade 960 de Nathan Smith . Possui modelos para muitos dos principais programas gráficos. Confira.

Referências:

Veja alguns desses sites: (Vi mais, tentarei adicionar à medida que os encontrar)

• A List Apart
• John McCain
• BarackObama.com
• Hayon2010.com (Ok, eu criei este, mas acho que é legal. Edit: eu também gostaria de comentar. ;-D)

O lado prático

Definitivamente, existem alguns aspectos práticos passo a passo do design que são importantes para aprender. Nem tudo é subjetivo.

   • Tutoriais de design web: http://webdesign.tutsplus.com/

   • Tutoriais do Photoshop: http://psd.tutsplus.com/

   • Toneladas de tutoriais: Lynda

Inspiração

   • Site: estilo incomparável

   • Site: Abduzeedo

   • Livro: Diretrizes para o sucesso online

   • Site: Revista Smashing

Habilidades de design

Design geral

   • Livro: Design Gráfico: Os Novos Fundamentos

   • Livro: Design Gráfico, Referenciado

   • PDF: os quatro grandes: contraste, repetição, alinhamento, proximidade

Tipografia

   • Livro: Pensando com Tipo

   • Livro: Os elementos do estilo tipográfico

   • Artigo: http://en.wikipedia.org/wiki/Typography

   • Artigo: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

Layout

   • Livro: pasta de trabalho de layout

Cor

   • Livro: Pasta de trabalho de design de cores

   • Livro: Pasta de trabalho de harmonia de cores

Filosofia do Design

"O erro mais estúpido é ver o design como algo que você faz no final do processo para 'arrumar' a bagunça, em vez de entender que é uma questão de 'um dia' e parte de tudo". -Tom Peters

"Um bom design mantém o usuário feliz, o fabricante de preto e o esteta sem ofensa". -Raymond Loewy

"O design verdadeiramente elegante incorpora a funcionalidade de alto nível em uma forma simples e organizada". -David Lewis

"Um bom design é um bom negócio." - Thomas J. Watson Jr.

Mais citações

Isso pode ser um pouco fora de tópico, mas eu me lembro de Jeff Atwood recomendando fortemente o livro Não me faça pensar . Ele descreve como você deve criar seu site para obter a melhor experiência do usuário.

Ogilvy on Advertising: este livro aborda alguns conceitos básicos de design gráfico, além de muito senso comum em criar qualquer tipo de folheto, anúncio etc., mesmo que tenha sido escrito muito antes da era www.

De maneira mais geral, procure livros e revistas sobre design gráfico, arte, decoração de interiores, cinema - existem muitos princípios comuns de design para tornar algo visualmente atraente e tornar a informação ou outro conteúdo atraente. É como o eletromagnetismo é comum à eletrônica, ciência planetária, química, nuclear e outros campos da física e da engenharia.

Outro bom livro nesse espaço seria The Design of Everday Things. Ele abrange muitas das idéias práticas, como favorecer projetos que se prestam ao uso fácil, tirando vantagem de como as pessoas naturalmente abordam uma coisa nova. O livro não é especificamente sobre interface do usuário ou web design, mas acho que cobre um pouco isso.

Um exemplo inicial do livro são portas. Ele fala sobre como portas com maçaneta ou maçaneta de um lado e dobradiças visíveis são intuitivas, porque você conhece a porta que a porta se abrirá empurrando ou puxando desse lado. Portas sofisticadas com dobradiças ocultas, barras de pressão por toda a porta ou maçanetas centralizadas são complicadas e exigem um momento de experimentação, porque sua operação não é intuitiva.

Uma ferramenta que considero inestimável no design é o Color Scheme Designer . Normalmente escolho uma cor que gostaria de basear o design e depois uso o esquema "Analógico" para obter um bom conjunto de cores correspondentes. Para mim, acertar as cores é a pior parte; depois disso, o restante fica com um layout agradável e aplica a paleta limitada de cores.