8 maneiras de projetar sites mais rapidamente no Photoshop
Como um web designer, é difícil se manter organizado. Não apenas você está equilibrando vários projetos de uma só vez, mas provavelmente está enfrentando prazos apertados e clientes difíceis também. Você também pode estar saltando de marca para marca e ter que aprender constantemente novas diretrizes e estilos de marca.
Felizmente, existem muitas maneiras de tornar seu fluxo de trabalho mais eficiente. Para ajudar, eu juntei essas oito dicas para mantê-lo são em sua carreira de web design
1. Mantenha seus arquivos organizados
Uma das coisas mais fáceis que você pode fazer para manter sua sanidade é manter seus arquivos organizados. Criar e manter uma estrutura de pastas consistente tornará fácil encontrar seus arquivos. Os problemas surgem quando você estrutura uma pasta diferente de outra, tornando um desafio localizar o arquivo Final-Final-logo.ai .
Convenções consistentes de nomenclatura de arquivos são essenciais ao organizar seus arquivos. É aí que entra o versionamento. Alguns designers usam datas, outros usam números de versão e alguns usam rodadas. Isso dependerá do seu setor e de suas preferências pessoais, mas é uma boa prática. Graças ao controle de versão, você pode rastrear facilmente qual arquivo é o mais atual, especialmente se você tiver versões antigas salvas para referência.
Eu geralmente mantenho de duas a três versões antigas, caso o cliente queira reverter para aquela estratégia de herói da Primeira Rodada, ou tenha preferido o seu tratamento móvel da Segunda Rodada. Para evitar a mentalidade de pack rat, é bom arquivar ou excluir arquivos antigos para evitar que o seu disco rígido seja esbarrado.
Aqui está uma estrutura de exemplo que uso no Clearlink.
A combinação de uma estrutura de pastas consistente e convenções de nomenclatura com controle de versão também ajudará na capacidade de pesquisa. Por exemplo, se você iniciar todos os nomes de arquivo de uma marca com o nome ou abreviação da marca, poderá filtrar os recursos dessa marca mais facilmente. Isso ajudará a diferenciar “ATT-logo-final.ai” do que poderia ser um mar de “logo-final.ai's”.
2. Entenda sua estrutura
Uma coisa que eu não aprendi até vários anos em minha carreira de design é como utilizar adequadamente uma estrutura existente. Os dois pesos pesados no mundo da estrutura são atualmente Bootstrap e Fundação , mas o do Google Materializar certamente lhes dará uma corrida por seu dinheiro no futuro próximo. A empresa em que trabalho usa a Foundation para a maioria de seus sites de marca.
A fundação vem com uma grade responsiva integrada, além de estilo para botões, campos, tipografia, navegação, etc., entre muitas outras coisas para tornar sua vida mais fácil. Utilizando a grade incorporada da Foundation dentro de seus PSDs, você tornará mais fácil para o desenvolvedor implementar seus projetos de uma maneira mais perfeita do que se você fizesse sua própria coisa. O Photoshop tem essa ferramenta de layout de guia bacana que não só facilita muito a criação de grades, mas também as anexa à prancheta para facilidade de reestruturação e movimentação de arquivos.
Captura de tela do Folha de fraude de fundação
Os frameworks também fornecem um bom ponto de partida para estilos de botões, formulários, etc. e ajudam a mostrar as possibilidades e limitações das estratégias de design que você pode implementar. Isso não apenas lhe dará um excelente ponto de partida para o seu design, mas também ajudará a promover uma colaboração mais amigável com seu desenvolvedor.
3. Organize suas camadas por seção de conteúdo
Quando você está lidando com complexos PSDs de web design com tantas pastas, camadas, objetos inteligentes, etc., é fácil que as coisas fiquem confusas. Uma vez que a camada 2.455 aparece, você começa a perceber que precisa de algum tipo de organização dentro do seu PSD. É por isso que recomendo organizar seu PSD por seções.
O meu geralmente consiste em pastas que incluem Nav, Hero, Intro, Pacotes, Benefícios, Footer, etc. Eu também codifico essas pastas de cores na forma de arco-íris, então elas são fáceis de navegar. Isso facilita a atualização de seções e a reformulação do seu PSD.
Organizo meu arquivo em pastas de seção que são codificadas por cores do arco-íris para facilitar a digitalização.
Por exemplo, se você precisar aumentar a seção do herói, poderá arrastar facilmente todas as pastas abaixo como uma unidade (comando de retenção) e, em seguida, arrastá-las de volta após a atualização ser feita. Essa estratégia também ajuda os desenvolvedores e outros designers a navegar facilmente pelo seu arquivo. Usando nomes compreensíveis como "Hero" e "Nav", um novo designer pode facilmente pular para a pasta e fazer as alterações necessárias.
Alguns designers vão até mesmo nomear camadas individuais, o que também pode ser incrivelmente benéfico, mas pode consumir um pouco de tempo. Como as camadas são fáceis de encontrar por meio da ferramenta de seleção automática quando é definida como "camada", é fácil chegar às camadas individuais atualmente, por isso cabe ao designer individual como elas desejam organizar suas camadas. O ponto é que você acabou de fazer.
4. Memorize todos os atalhos de teclado que você normalmente usa
Este é um grande problema para a eficiência. Se você se encontrar usando um comando de tecla específico regularmente, memorize-o. Você aumentará sua eficiência exponencialmente se tiver todos os atalhos de teclado principais desativados.
Alguns importantes são salvar, tamanho da fonte e entrelinhamento, ordenação de camadas, salvar na web e opacidade entre muitos outros. O Photoshop também oferece a capacidade de criar atalhos personalizados. No meu livro, o comando mais importante para memorizar é salvar seu arquivo. Devido às falhas aleatórias da Adobe, é bom errar do lado do salvamento com frequência, em vez de correr o risco de perder seu progresso.
A Adobe oferece a opção de personalizar seus atalhos de teclado em Editar> Atalhos de teclado
Os atalhos também se vinculam à organização de suas camadas por pastas de seções de conteúdo (como mencionado acima). É mais fácil colocar camadas na parte superior e inferior de uma pasta usando atalhos de teclado do que reordenar camadas em um arquivo não organizado. É aqui que a organização do seu arquivo é projetada. Memorizar os atalhos de teclado usados com freqüência e manter suas camadas organizadas melhorará enormemente sua eficiência e ajudará outros designers a trabalhar com seus arquivos.
5. Utilize bibliotecas de CC
Uma das melhores coisas que a Adobe adicionou desde a criação do CC são as bibliotecas. Se você ainda não ouviu falar deles, precisa verificar tutorial incrível sobre como usá-los.
Eu sinto que toda equipe de design deve estar utilizando este incrível recurso. As bibliotecas permitem que você crie uma biblioteca de marcas com recursos como cores, estilos de fonte, fotos, ícones e símbolos (como cabeçalhos e rodapés). Graças às bibliotecas, você pode colaborar facilmente com criativos de várias organizações usando uma biblioteca de marca única.
As bibliotecas facilitam a mudança de cores e a atualização de estilos de texto com o clique de um botão. Eles também ajudam a armazenar ícones de marca que podem ser facilmente atualizados em um único local, com atualizações refletidas rapidamente em PSDs. Isso é incrivelmente benéfico para cabeçalhos e rodapés do seu site, onde você provavelmente fará pequenas atualizações durante o projeto.
Eu também uso Bibliotecas CC para estilos de fonte em todo o meu design. Eu configurarei estilos para cópia heróica, títulos, subcabeçalhos, cópia do corpo, isenções de responsabilidade, etc. para aplicativos de desktop, tablet e dispositivos móveis. Com relação à alternância de exibição, vejo-me usando o formato de lista mais do que a visualização de bloco devido à facilidade de verificação.
Elementos da biblioteca vistos como colaboradores
As bibliotecas também são ótimas para colaboração em equipe. Você pode optar por colaborar com outros criativos para que eles possam editá-los e adicioná-los à biblioteca ou compartilhar o link da biblioteca para facilitar o acesso. Eles também têm um recurso "Criar nova biblioteca a partir do documento", mas eu prefiro criar a biblioteca sozinho, para que ela continue organizada e tenha apenas os recursos mais relevantes.
Infelizmente, há algumas desvantagens nas bibliotecas, sendo uma delas a falta de estilos de parágrafos e caracteres separados para o texto. Eu trabalho em torno disso, aplicando o meu estilo de caractere em uma caixa separada e, em seguida, colando diferentes estilos em uma caixa juntos para facilitar o gerenciamento de caixas de texto dentro do arquivo. Outra desvantagem é que atualmente você não pode atualizar um estilo de caractere globalmente. Atualmente, não há habilidades de organização dentro da biblioteca para criar subpastas dentro das categorias (cor, estilos de caractere, etc.), mas esperamos que a Adobe também esteja trabalhando nisso.
A forma atual como as Bibliotecas CC funcionam é que o recurso adicionado / adicionado mais recentemente aparecerá no topo. As cores da CC Library não podem ser aplicadas a texto individual em caixas de texto e são facilmente aplicadas a formas e caixas de texto inteiras. Tenho certeza que a Adobe está trabalhando duro para corrigir esses problemas, então eu não estou muito preocupado, especialmente porque os profissionais definitivamente superam os contras.
6. Mantenha imagens e vetores no formato de objeto inteligente
Mesmo que isso torne o seu arquivo maior, mantendo suas imagens e vetores em formato de objeto inteligente, será mais fácil para futuros projetistas editarem seus PSDs. Imagine isso: o cliente volta com edições que incluem recortar uma foto de herói e fazer pequenos ajustes em um ícone vetorial. Isso é feito com mais facilidade se o PSD incluir a foto com resolução total em vez de uma versão menor e rasterizada. Os vetores também são fáceis de ajustar quando são objetos inteligentes do Illustrator, em vez de gráficos rasterizados.
Outro benefício de ter fotos no formato de objeto inteligente é quando você as salva como PSDs e depois as coloca no seu arquivo como um objeto inteligente. Usando uma foto posicionada O PSD facilita a adição de camadas de ajuste e edição em um arquivo de foto separado e contido, em vez de sobrecarregar o arquivo de origem. Utilizando objetos inteligentes como gráficos de biblioteca, você obtém uma combinação ainda mais vencedora. Não apenas você pode editar facilmente os objetos vetoriais, mas os gráficos da biblioteca serão atualizados em todos os aplicativos.
O gráfico “Hero Illustration” pode ser editado em um PSD separado para manter a desordem do arquivo principal no mínimo.
7. Crie um guia de estilo e atenha-se a ele
Muitas marcas terão um guia de estilo geral para você seguir quando se trata de fontes, cores, fotos, ícones, ilustrações, etc. Isso é útil como um recurso, mas nem sempre o manterá consistente em seu estilo específico do site. . Melhorei bastante minha eficiência criando guias de estilo da Web para cada site específico em que trabalho.
Por vezes, as marcas têm vários sites com estilos diferentes, por isso, certifico-me de que tenho uma para cada site, para que possa manter a consistência enquanto concebo. Isso também cria um recurso fácil de arrastar e soltar quando eu preciso de botões, ícones, ilustrações, fotos, etc. Isso não apenas o tornará mais eficiente como designer, mas também ajudará você a permanecer consistente em seu estilo em todo o site.
Qual espaçamento eu uso entre as seções? Confira o guia de estilo! Qual foi a cor do botão principal e preenchimento novamente? Agarre-o do guia de estilo! Isso também ajudará outros designers a pular facilmente os designs do site com facilidade e eficiência. Se você mesclar o uso de bibliotecas de CC com o guia de estilo, você está ainda mais à frente do jogo.
Eu crio um guia de estilo PSD para todas as diferentes marcas em que trabalho para que eu possa facilmente pegar elementos como botões e ícones.
Muitos designers são tentados a adicionar novos estilos cada vez que enfrentam um novo problema dentro do design. Por questões de consistência, é melhor evitar isso e sempre seguir os padrões que você estabeleceu em seu guia de estilo. Se você adicionar novas camadas e estilos, verifique se eles estão aplicados em todo o site.
Quanto mais estilos novos forem criados, mais complexos serão os projetos futuros, e mais difícil será para novos designers pularem em projetos e manterem designs consistentes. Em muitos casos, a consistência é mais importante do que a inovação constante quando se trata de experiência do usuário. Mesmo que você leve mais tempo para criar o guia de estilo da Web no início de um projeto, ele aumentará sua eficiência em todas as páginas futuras.
Uma das melhores práticas que aprendi com Brad Frost é fazer uma inventário de interface durante o processo de design ou em um site existente no qual você estará trabalhando. Um inventário de interface consiste em coletar todos os diferentes estilos de texto, estilos de botão, etc. por meio de capturas de tela e compilá-los para encontrar inconsistências. Você pode então apresentar suas descobertas ao cliente para propor atualizações e melhorias.
Como os sites da Web abordam vários designers sobre o caso de sua existência, as coisas podem ficar bastante complicadas no departamento de consistência. Depois de encontrar um estilo de design unificado para os elementos na página, atualize seu guia de estilo para que todos estejam atualizados.
Captura de tela do inventário da interface em http://bradfrost.com/blog/post/interface-inventory/
8. Promover a colaboração interdepartamental
Muitas pessoas que buscam carreiras na produção de marketing (designers, desenvolvedores, redatores etc.) tendem a ser introvertidas, por isso é difícil sair da sua zona de conforto quando se trata de colaboração. Também é difícil deixar sua bolha de conhecimentos, especialmente quando é mais fácil se relacionar com as pessoas em seu campo. Mesmo que possa ser estranho ou desconfortável às vezes, deixar sua bolha e colaborar regularmente com pessoas de outros departamentos pode melhorar muito a qualidade de seus projetos junto com sua eficiência.
Um excelente exemplo disso é quando designers e desenvolvedores colaboram em um novo design. Você deve se reunir com o desenvolvedor antes para revisar o framework que está usando, informar-se sobre o sistema de grade e avaliar as possibilidades. Quando o trabalho de design estiver concluído, compartilhe sua Biblioteca do Photoshop, para que o desenvolvedor tenha fácil acesso à paleta de cores, estilos de fonte, etc. Também é útil compartilhar o guia de estilo com antecedência, junto com os componentes que você tiver. projetado para dar-lhes um bom começo.
A colaboração com outros designers da sua equipe utilizando Bibliotecas também ajudará você a permanecer consistente e ser mais eficiente. Dar ao Diretor de Arte ou à responsabilidade do Designer Sênior pela Biblioteca e as atualizações do guia de estilo eliminará a confusão e manterá a identidade visual consistente. Apenas certifique-se de que há uma linha de comunicação quando as atualizações são feitas, para que todos estejam na mesma página.
Fique sã
Web design pode ser esmagador e desafiador, às vezes. Nem sempre tem que ser assim. Ao seguir essas dicas simples sobre a eficiência do Photoshop, você pode aliviar uma boa parte do seu estresse. Isso não apenas melhorará seu bem-estar, mas gerentes e diretores, tanto do lado empresarial quanto criativo, irão realmente apreciar seu trabalho duro e elogiá-lo por isso. Afinal, todo mundo é bom com um design mais consistente, eficiente e bonito.