.dontaioncontest_widgetbox { border: 2px solid #C0C0C0 !important; background-color: #F8F8F8 !important; text-align: center !important; padding: 5px 10px !important; max-width: 300px !important; line-height: 20px; font-size: 13px; } .dontaioncontest_widgetbox h3 { font-weight: bold !important; font-size: 14px !important; line-height: 17px !important; margin: 0px 0px 5px 0px !important; padding: 0px !important; border: 0px solid transparent !important; } .dontaioncontest_button { margin: 5px 0px 0px 0px !important; } .dontaioncontest_contestdata {top: 0px; left: 0px;}
Post escrito por Yeltsin Lima
Faz mais de dois anos que eu trabalho, legalmente, com websites. Comecei com a Prática Design, depois fui para a Web Interativa, depois para a Aporte Comunicação e por último Público Comunicação. Todas elas, exceto a Aporte, possuíam foco no desenvolvimento de websites. Duas delas fazem por excelência e qualidade, acima de quantidade, que é a Web e a Público. E nesse meio tempo eu comecei a aceitar freelancer, que é basicamente contato direto com o cliente.
Dica 1: Você está fazendo um site, não uma peça impressa. Então, por favor, não use CMYK, o padrão web é RGB. A não ser, que você queria que eu leve seu arquivo para uma gráfica, imprima e cole no monitor do cliente…
Dica 2: Existem dois programas que são utilizados para fazer site. Você pode até fazer a logo do seu cliente no Illustrator ou no Corel Draw mas, por favor, não faça o site dele TODO em Illustrator ou Corel. Quer usar um programa? Use o Photoshop ou Fireworks. Não tem experiência? Aprenda. Não há dinheiro fácil, você pode até tentar fazer um site em Corel Draw, mas quando o front-end souber que ele foi feito em Corel Draw ou Illustrator, cabeças vão rolar. Sério. Facilite o trabalho do front-end, ele é que vai colocar seu lindo layout no ar.
Dica 3: Padrões. Pelo amor de Deus. Não faça um site com 600 pixels de largura OU com 1200 pixels de largura. Não estamos em 1999 nem em 2020. O padrão que usamos é 960 pixels, existe inclusive um framework em PSD para você, de graça, chama-se 960 Grid System. Pode até fazer o site maior, desde que fique num tamanho entre 900 e 1050 pixels. A altura não importa, mas também não use tamanhos fixos.
Dica 4: Não recorte. Deixe que o front-end faça todo esse trabalho “sujo”. Recortar um layout e enviar pedaços para o front-end, significa que ele não saberá onde colocar cada pedaço daquele. Isso é um layout em PSD:
E não 100 arquivos em .ai ou .psd com cada peça do layout. O front-end precisa ter uma noção da posição de cada elemento do layout para poder montar o site. Ou você acha que os códigos são feitos magicamente? Não, não existe ainda uma bola de cristal que o front-end possa descobrir qual a posição de cada elemento do layout…
Dica 5: Não sobrecarregue seu layout, você não está enviando ele para uma gráfica, está enviando ele para a web. Não adianta fazer um site lindo que demore 2 minutos para carregar. Internet precisa ser rápida, tudo rápido. Não é por coincidência que eu paguei 30 dólares só para ter os arquivos do meu blog distribuídos em 13 lugares pelo mundo (MaxCDN).
Dica 6: Design. O que é Design? Não vou explicar, mas você está fazendo um design, um web design. Lembre-se WEB DESIGN. Use os padrões de usabilidade da WEB. Quer que o site do seu cliente venda, ou quer que seja apenas uma vitrine? Quer que os leitores leiam seu blog ou quer que seja apenas um site de copia, que o visitante entra, copia o que quer e sai, por que não acha o layout interessante? (Curiosidade: aumentamos para 1.000 visitantes por dia). Usabilidade, decore esse termo, é muito importante em um layout.
Dica 7: Envie a peça final ao front-end. Quando um site está todo pronto, e o front-end recebe uma alteração importante e que consiste basicamente na alteração de quase todo o layout: 1) ele vai lhe cobrar por outro site; 2) ele vai fazer na boa, mas nunca mais vai fazer contrato contigo; 3) ele é idiota e vai fazer tudo de graça.
Dica 8: Se puder enviar um e-mail explicando o layout do site ao front-end, melhor ainda. Vai ter animação em um momento específico? Explique. Vai ter um “hover” ao passar o mouse em cima de um link? Explique. Isso é o que eu adoro em Lula Paiva, o designer da Público, tudo que ele fazia e exigia alguma animação, ele explicava. Por isso que não havia conflito entre front-end e designer.
Dica 9: Acha que entende de front-end, sem nunca ter mexido em CSS ou HTML? Então gere um layout através do Illustrator, Corel Draw ou Dreamweaver. Sério, peça pra ele gerar todo o HTML pra você. Agora sofra.
Dica 10: Está desenvolvendo um blog? Ótimo, faça toda a estrutura dele e não apenas o BG. Como é que os posts irão se comportar? Isso é o layout de um blog:
Ele foi passado exatamente assim para o Ciro fazer o site. Já disse, não temos bolinha de cristal. Faça toda a estrutura do blog, ou espere até 2050 para o seu layout ficar pronto. Nesse layout acima, eu sei a posição de cada widget, de cada título, da meta do blog, como é a fonte, onde ficará o conteúdo. Tudo. Isso é um layout.
Esse post não foi uma indireta. Ou foi. Mas ao invés de apenas reclamar, eu decidi ensinar. Ah, e idade não explica nada. Tenho 20 anos e sei muito mais do que gente muito mais velha do que eu e que se diz “front-end guru”… Em tese, aprendi muito com um cara que nem front-end oficialmente é, que foi o Ciro Luna. Formado em Design pela UFPE, ele entende de WordPress e de desenvolvimento para web de uma forma absurda.
Então, não, você pode até saber fazer design impresso. Mas fazer website é uma coisa totalmente diferente e que exige muito mais cuidado do que você imagina. E sempre existe um front-end para ficar até de madrugada tentando descobrir o que você fez ou tentou fazer naquele layout, para no fim do dia receber um “esporro” do cliente. Afinal, só sobra pro front-end.
Tenham um bom dia.
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.
Caramba Yeltsin, que artigo… Foi um tapa na cara dos “design” UHAUAHUAHA, abraço! (:
Boa! Belo Post! Essa cambada ainda tem muito o que aprender! É isso ai
Muito bom mesmo, gostei! O pior é lembrar que no começo eu era assim… Vivendo e aprendendo :)
@oliveirakevin7:disqus , tá mais para um coice. kkkk
É realmente nota-se que você tem só 20 anos, pouca experiencia, um front-end, nada mais é do que um operário, a tarefa de criar um “design” como você diz é uma tarefa que exige muito mais do que saber operar um programa, um profissional que “cria” é um profissional que investiu muito em repertório para criar aquele tal “design”, ele cria a partir de nada, de um briefing escrito, analisa o publico-alvo e uma serie de fatores externos, para criar algo. Um front-end tem sim seu valor, trabalha duro num layout pronto, todavia faz seu trabalho a partir de uma idéia já concebida, como um operário de construção civil, que executa o projeto criado pelo engenheiro ou arquiteto, ambos tem seu valor, mas você há de convir que o arquiteto e o engenheiro, assim com o publicitário ou qualquer outro profissional que esta por trás da criação foram um pouco mais a fundo no desenvolvimento de sua aptidões, não são meros funcionários, com a experiência aprendemos a ser mais humildes.
Sim, mas o front-end pode até trabalhar a partir de uma idéia pré-concebida, mas ainda assim ele terá que criar. Incluindo desenvolver scripts de acordo com a necessidade do layout. Alguns usam prontos, outros preferem re-inventar a roda. No entanto, uma agência não vive sem um designer. Mas também não vive sem um front-end.
Porém, eu não sou mais front-end. ;)