Feeds:
Posts
Comentários

Posts Tagged ‘Web Design’

Montar um layout pode trazer muita dor de cabeça, que pode se agravar caso não sejam conhecidos alguns “macetes”. No caso estou falando do CSS, uma grande ferramenta!

Utilizar qualquer ferramenta que monte o seu layout de forma automática deve ser dispensado, eles geram código desnecessário (lixo) e complicam a estrutura. O pensamento lógico utilizando CSS vai levar em conta os blocos de conteúdo. São regiões do layout, como por exemplo: logotipo, cabeçalho, navegação, menu, rodapé.

Nesta fase do projeto, quando layout, ou seja, a parte visual, já está definida, entraremos em uma esfera bastante técnica onde é preciso ter um ótimo conhecimento principalmente de HTML, que é a base de qualquer produção voltada para internet. Recomenda-se conhecer a fundo esta “linguagem”.

Ok, mais eu tenho o Dreaweaver e ele faz tudo pra mim, e eu ainda consigo ver o site como fica no browser!
 Certo, mas no dia-a-dia você fatalmente perceberá que nem sempre haverá um Dreamweaver disponível para você brincar com o editor WYSWYG (What you see is what you get) e precisará trabalhar diretamente no código. Além disso também é fácil perceber que este editor não resolve todas os problemas durante a montagem do layout, e o pior: Ele pode encher o seu código de tags perdidas, sujeira mesmo, que o deixará uma bagunça e com uma cara nada profissional.

Os posts anteriores (Web Design Metodologia I a III) falavam sobre ações conceituais e comportamentais inerentes ao projeto, e diante do cliente. Concluídas estas fases, o que resta é montar o quebra-cabeça e esta etapa você terá que cumprir por si mesmo. Tudo bem que o cliente não saberá se você fez um “xunxo” ou outro, mas estamos tentando manter um nível profissional aqui, certo?

Um web-site bem construído segue uma série de especificações e seguí-las é uma questão de bom senso. Primeiro porque seu site estará dentro dos padrões mais consistentes e utilizados na internet e também porque você criará, desde o início, o hábito de trabalhar com conceitos como palavras-chave, meta tags, robot tags, web semântica, web standards e SEO.

Devido a esta demanda técnica, iremos abandonar um pouco a metodologia em si e falaremos sobre como, passo a passo, pensar em um web-site bem construído. Fiquem atentos!

[Update 2013]

A preguiça me tirou deste projeto… não só a minha preguiça, mas a do público! Não fazer no mínimo uma pesquisa sobre os temas e termos levantados nos posts e perguntar de uma maneira “faça para mim” me incomoda. Curiosidade é o que move o mundo pessoal, estudar não tem nada haver com “instituição de ensino”, busquem conhecimento!

Read Full Post »

O cliente aprovou a proposta, conferiu todos os detalhes do projeto a ser criado, meu trabalho já começou e eu ainda não recebi nada! Qual é o próximo passo?

Um problema comum que às vezes precisamos enfrentar é o caso em que o cliente está em dúvidas em pagar por um serviço que ainda não foi executado. Além de dar garantias, como um bom contrato, você deve apoiar-se em seu portfolio, ele é sua maior referência. Aqui pode-se chegar a uma conclusão óbvia, mas nem tanto: quem é  seu maior e mais importante cliente?

É você mesmo!

Procure deixar seu material de divulgação, portfolio online, logotipo, impressos com aparência profissional e impecável. Não entre nessa de “Em casa de ferreiro, espeto é de pau”. Dedique tempo para formar sua própria imagem.

Depois de aprovada a proposta, iremos formalizar legalmente a prestação de serviços através de um contrato. No meu caso, como ainda não tenho empresa constituída, optei pelo contrato de pessoa física. Este tipo de contrato deve ter firma reconhecida e testemunhas, valendo legalmente em caso de problemas.

Após levar um número sem fim de calotes, resolvi consultar um advogado e construir um contrato que envolvesse todos os pontos do projeto. É importante explicar ao cliente que o contrato é uma segurança, tanto para ele que receberá o trabalho exatamente como pediu, quanto para você que receberá seu pagamento como estipulado.

Faça o Download: Modelo de contrato para construção de web-sites e outros projetos gráficos

Este contrato disponibilizado aqui é uma verdadeira jóia, pois prevê a maioria dos problemas que poderiam acontecer. Portanto, utilize o bom senso e faça bom uso desta ferramenta.

Contrato assinado, vamos por a mão na massa!

Já sei, agora abro o Photoshop e dá-lhe!

Nada disso! Agora é o momento de reunir todo o material coletado, referências, anotações e pensar em que conceito você vai utilizar no projeto.

Sugiro que você faça uma lista dos conceitos que pretende empregar no layout do web-site, um exemplo:

  • Força
  • Equilíbrio
  • Sobriedade
  • Dinamismo
  • Cores fortes

É claro que cada projeto irá precisar de uma conceituação diferente, pois cada cliente e área de atuação tem necessidades diferentes, público-alvo diferente. É isso que vai criar o diferencial.

Rough

O rough (diz-se ráfe) é como um rascunho do projeto. Pegue várias folhas de papel e desenhe o layout do web-site, defina as posições de cada elemento, faça uma pré diagramação de como layout será organizado. Onde estarão imagens, menus, textos, animações, etc.

Se for necessária fazer uma animação em flash, a melhor opção é desenhar um story board, em que é definido o que acontece em cada cena. Você ainda pode anotar ao lado de cada quadro os sons que serão tocados, se haverá narração, que tipo de imagem será necessária, etc.

Tomando estas medidas iniciais é possível prever rapidamente como o layout irá se comportar na tela e pode-se fazer correções antes mesmo de começar a criação propriamente dita.

Na parte 3 da nossa odisséia, falarei sobre como proceder com a criação do layout e o momento mais temido: a aprovação!

Read Full Post »

Eu já tenho um cliente e ele quer um web-site! Ok, o que eu faço agora? Aqui estão idéias para você organizar o projeto de forma a não pular etapas e chegar a um resultado satisfatório.

O termo “design” muitas vezes é confundido com desenho, isto se deve primeiramente à falta de cultura em relação à profissão no Brasil, e em segundo, à nomenclatura do curso nas universidades brasileiras que adotaram “desenho industrial”. Na verdade a tradução que estaria mais próxima na língua portuguesa seria “projeto”!

O projeto de um web-site consiste em várias fases e a metodologia que exponho aqui é a que tenho utilizado para confeccionar os projetos de forma organizada. Portanto não é regra, pois cada designer irá definir sua própria metodologia, a que melhor se adapta à sua maneira de trabalhar.

Pesquisa

Uma das fases que considero mais importantes no desenvolvimento de um projeto é a pesquisa. É nesta fase que serão coletados os dados utilizados para dar uma direção ao trabalho de criação e execução. A primeira pesquisa deve ser feita junto ao cliente, o que usualmente chamamos de “briefing“.

Um briefing detalhado pode salvar você de ter que refazer todo o trabalho e servir como um documento no caso do cliente negar que havia pedido isso ou aquilo.

  • Peça ao cliente para lhe fornecer o logotipo (vale lembrar que logomarca não existe), se possível em arquivo digital e em vetor (Corel, Ilustrator) para evitar distorções na utilização.
  • Solicite todo o material impresso que o cliente tiver disponível, como folders, cartões, mala-direta, papelaria de escritório, flyers, catálogos de produtos, embalagens dos produtos, fotos da empresa, etc.
  • Se puder, leve uma câmera digital e tire algumas fotos do ambiente, dos produtos, da fachada. Isto vai ajudar a criar um repertório visual sobre o projeto.

Você ainda pode levantar alguns questionamentos para saber mais sobre a empresa, abaixo listo alguns tipos de perguntas que podem ser feitas:

  • Qual o objetivo do projeto? (divulgação, reforço da marca, recrutamento de pessoal, lançamentos, notícias, etc.)
  • Quais são os principais concorrentes?
  • A empresa atua localmente ou globalmente?
  • Pergunte sobre sites que o cliente acha interessantes e visita freqüentemente. Isto pode ajudar a sentir qual estilo o cliente aprecia.
  • Levante questões sobre o que o cliente espera do web-site. Ter uma meta definida pode levar o projeto para direções distintas.

Uma dica: comente com o cliente, da forma mais diplomática possível, que o projeto não destina-se a satisfação pessoal dele. O web-site é para o público da empresa e precisa atender à suas expectativas, não a caprichos ou gostos pessoais.

Respondidas estas questões, você pode formalizar uma proposta ao cliente, relacionando todos os combinados, valores e limitações.

Faça o Download: Modelo de proposta para construção de web-sites

Ao assinar a proposta o cliente está concordando que o trabalho será feito exatamente da maneira como você sugeriu. Esta proposta, que servirá como base para o contrato de prestação de serviços, é apenas uma etapa de conferência, onde o cliente tem a chance de observar o projeto como um todo.

Organizando e Continuando a Pesquisa

Com todo este material em mãos, e o que mais você conseguir, a pesquisa agora irá concentrar-se sobre a área de atuação do cliente. Visite inúmeros sites além dos indicados pelo mesmo, observe recursos, estilo visual e linguagem gráfica utilizada. É importante coletar boas idéias e tentar perceber qual o diferencial que cada web-site oferece.

Parta do pressuposto de que o projeto a ser desenvolvido precisa ser, no mínimo, melhor do que o melhor web-site da área. Assim você nivela seu trabalho por cima!

Pronto! Agora você já tem uma idéia do que é importante tanto para o cliente, quanto para o seu nicho de mercado. No próximo post falaremos da fase que antecede a criação, que podemos chamar de rough (ou rafe).

Read Full Post »