Caminho do desenvolvedor para o Designer: Como

Sendo um desenvolvedor que quer ser designer, estou realmente interessado em aprender como criar uma interface de usuário de alto nível para sites, aplicativos para dispositivos móveis, etc. No entanto, não sei nada sobre o Photoshop nem nada relacionado ao design, minhas principais habilidades são HTML e CSS .

Por onde devo começar? Como faço para aprender a criar belos sites e interfaces?

Como um ex-desenvolvedor que se tornou um designer, há algumas coisas que eu sugiro. Em primeiro lugar, comece a trabalhar em projetos! Se você tiver a capacidade, encontre um mentor que já seja um designer de UI / UX e comece a trabalhar com eles em projetos. Descobri que aprendi mais trabalhando em projetos e absorvendo o conhecimento de pessoas que fazem isso há anos do que nunca ao ler um livro.

Dito isto, se você quiser ler sobre UI / UX / etc., Daria uma olhada neste excelente tópico: Livro de Interface do Usuário que você deve ler? Eu acho que meu favorito é o "Don't Make Me Think" de Steve Krug - mas tenho certeza que você encontrará o seu favorito eventualmente.

Por fim, no que diz respeito a ferramentas como Photoshop, Illustrator, etc ... não se preocupe! Por fim, você encontrará as ferramentas que funcionam melhor para você. Pessoalmente, começo com maquetes de lápis e papel e, dependendo do projeto , mudarei para algo no Balsamiq , Axure ou, às vezes, HTML e CSS direto - isso realmente depende do tamanho, escopo etc. do projeto. mais confortável para você. No final do dia, tudo o que importa é que você comunique claramente sua visão para o seu design, não a ferramenta usada para fazê-lo.

Venho misturando design e desenvolvimento há muito tempo. Mas, nos primeiros dias, gastei mais tempo aprendendo as ferramentas de edição do que o que faz um bom design. Existem muitos tutoriais para aprender a usar o Photoshop, Illustrator, Fireworks, etc. Mas é bom ter algum sentido e direção no design. Ainda é algo que eu quero melhorar.

Uma das minhas inspirações é um cara chamado Robby Ingebretsen, porque ele faz o desenvolvimento e o design extremamente bem. Seu site está em nerdplusart.com .

Há algumas coisas que eu daria uma olhada nele ...

• Minha (muito) pequena lista de livros obrigatórios para designers
• Fundamentos de design para desenvolvedores
• 10 maneiras de atacar um problema de design e sair vencedor

Como ele fala em todas as suas apresentações, acho fundamental encontrar inspiração para seus projetos. Mesmo os melhores designers não inventam essas coisas do nada. Um dos meus favoritos é uma coleção de "Novo Design Gráfico" , vista principalmente em trabalhos impressos. A maioria deles é muito simples, geralmente usando a tipografia como os principais elementos gráficos. Por mais simples que pareça, apenas navegar por coisas como essa pode ajudá-lo a moldar seu design.

Assim como aprender o Visual Studio não torna um bom desenvolvedor de software, nem aprender o Photoshop também torna um bom designer de interface do usuário.

Se você quiser seguir o caminho formal, todos os locais onde procurar uma educação em Arte / Design Gráfico, Fatores Humanos, Psicologia, Arte da Informação / arquitetura da biblioteca / ciências da biblioteca.

Informalmente, comece a trabalhar! ;) A melhor maneira de aprender é apenas fazê-lo.

Sou um designer gráfico formalmente treinado que adquiriu habilidades de desenvolvimento de software no trabalho. Comecei por pura necessidade.

Pessoalmente, acho que os melhores membros da equipe de UX são aqueles que têm uma mistura de ambas as habilidades. Então, acho que você está no caminho certo.

Eu começaria lendo o livro "Head First Web Design", de Watrall & Siarto (publicado por O'Reilly). É um absurdo, fácil de digerir e explica tudo o que um designer deve considerar. Não é um estudo aprofundado, mas ajuda você a saber quais perguntas você precisa responder em seguida. Abrange a navegação, organização, layout, escrita, cor e acessibilidade.

Além disso, antes de saltar para o Photoshop, Adobe Illustrator ou qualquer outra coisa, monte o design do seu design para garantir que tudo esteja no lugar certo antes de dedicar mais tempo para torná-lo bonito. Você pode desenhá-lo em papel ou quadro branco ou usar uma ferramenta. Uma ferramenta que achei realmente útil nesta etapa é o Balsamiq Mockups . Ele permite que você pense primeiro na organização e no layout do site.

Na verdade, adotei a abordagem oposta do UX Designer ao UI Developer, no entanto, ao escolher o Design, recomendo algumas áreas para começar:

Eu daria uma olhada no livro "Não me faça pensar!" de Steve Krug , que eu acho um ótimo livro sobre design para design na web.

Existem toneladas de ótimos recursos da web, incluindo SmashingMagazine.com e PSDTuts.com, que fornecem ótimos artigos atuais no mundo do design e da web.

Também daria uma olhada no entendimento dos princípios da HCI se você estiver pensando especificamente em se tornar um UX Designer.

Boa sorte e feliz design!

Estou realmente interessado em aprender a criar uma interface de usuário de alto nível para sites, aplicativos para dispositivos móveis etc.

Ok, esse é um tópico amplo. Você deseja criar sites "bonitos", "de primeira qualidade" e com aparência profissional. Então, você precisa saber o que faz as pessoas perceberem algo como "bonito", certo? Felizmente para você, a beleza não é realmente subjetiva.

Uma das chaves para um belo design visual é a harmonia .

A falta de harmonia é o que faz seus desenhos parecerem amadores.

E o melhor é que a harmonia visual se resume à matemática. Não se trata de ter um pressentimento.

Como outros já apontaram, eu recomendo criar sites por conta própria. Tente aplicar os princípios de design sobre os quais você aprende, em vez de usar uma estrutura pronta. Pode ser difícil no começo, mas o ajudará a melhorar.

Como incorporar harmonia em um design de site

A seguir, é apresentado um exemplo prático e um pequeno exercício engraçado que você pode fazer agora.

Uma maneira que eu pessoalmente prefiro é usar uma escala modular para dimensionar os elementos do site em proporções harmoniosas. Um site que pode ajudá-lo a gerar uma escala modular é este: modularscale.com

O benefício de usar uma balança modular é que ela pode tomar decisões de tamanho tão fáceis quanto escolher um número da balança.

Por exemplo, vamos dimensionar os cabeçalhos de um site (para comunicar a hierarquia visual).

Digamos que temos essa escala modular com base no tamanho da fonte do corpo de 19 px que eu escolhi (19 px porque parecia melhor com a fonte que eu estava usando, mas você pode pular esta etapa e seguir o tamanho padrão de 16 px) e a proporção 1,412 (Não É necessário entrar em detalhes sobre por que escolhi essa proporção. Qualquer proporção será melhor do que nenhuma proporção para seus projetos.):

Olhando para ele, eu escolheria o H1 para 2.815em, o H2 para 1.994em e o H3 para 1.412em. Primeiros 3 números maiores que o tamanho da fonte do corpo. Fácil, certo? O texto do corpo seria 1em (no meu caso, 19px). Então, eu dimensionaria o H4-H6 em 1em e usaria o contraste (peso ou estilo da fonte diferente) para diferenciá-los do texto do corpo.

Então, tente isso agora:

1. Gere sua própria balança modular
2. Obtenha um documento HTML simples (conteúdo real, por favor, não Lorem Ipsum)
3. Use a escala para dimensionar os títulos.
4. Em seguida, tente usar a balança para outras decisões de tamanho (margens, preenchimentos, etc.)

Esse é apenas um pequeno passo em direção a projetos melhores, mas espero que ajude você.

Se você achou isso útil, pode ler minha outra lista de 7 dicas para web designers iniciantes que conhecem HTML e CSS

PS: Você realmente tem muita leitura para fazer

Como outros já disseram, leia:

• Os elementos do design gráfico de Alexander White
• Os elementos do estilo tipográfico de Robert Bringhurst
• Não me faça pensar por Steve Krug

Além disso, aqui está uma lista enorme de recursos on-line, como blogs e comunidades, para acompanhar: enboard.co/webdesign/