isacosta.net » the geek side
6.12.07
categorias:
[4/15]

Já temos o material, já temos o planeamento, já conhecemos todos os detalhes. What's next?

O processo criativo anda de mãos dadas com a inspiração. Se quisermos fazer algo novo, diferente, inovador, vamos precisar dela... às toneladas!

Quando estamos inspirados  o trabalho flui incrivelmente bem, a mente fervilha de ideias, temos energia para dar e vender, conseguimos passar horas diante o computador sem nos cansarmos, e adoramos o nosso trabalho!

...o pior é quando a inspiração não está ao virar da esquina. É frustrante quando isto acontece, especialmente se tivermos a ser pressionados por um prazo apertado. E por vezes, quanto mais insistimos, mais ela foge de nós...

Clientes difíceis, material fraco, trabalho mal remunerado, demasiado trabalho em mãos ou mesmo problemas pessoais, são inimigos da inspiração, capazes de nos tirar o entusiasmo para desenvolver um projecto. Mas já nos comprometemos, temos que seguir em frente e nem pensar em deixar que a inércia se instale, se não, estamos bem tramados!

Primeiro há que libertar o nosso pensamento de preocupações e do trabalho que estamos a fazer, não vale a pena forçar que isso só piora a situação. Depois vamos ver outras coisas!

Podemos visitar directórios de sites, para conhecer as últimas novidades em termos de design e organização da informação. Boas ideias, layouts bonitos são sempre bons pontos de partida, mas não é tudo o que podemos (e devemos) fazer.
E que tal largar o computador e olhar em redor? A inspiração para criar sites não está só na internet, podemos encontra-la também na televisão (especialmente em canais mais inovadores), em revistas, livros, nas ruas (arquitectura, street art, pessoas, situações, etc), em exposições de arte, lojas, e por aí adiante. O webdesigner deve ser sensível a todo o tipo de estímulos e experiências visuais, deve-se deixar contagiar pelo ambiente que o rodeia e acompanhar as tendências, de modo a criar coisas novas e interessantes e não se limitar só a reproduzir ideias que já existem.

Muitas vezes o resultado final de um layout acaba por ser completamente diferente do previsto inicialmente. Isso é sinal que tivemos bastantes estímulos e fomos sofrendo influências ao longo o processo. Não é necessariamente uma coisa má, desde que o resultado agrade a ambas as partes, claro está.

Mas se a inspiração não quiser nada connosco, o prazo estiver cada vez mais apertado e não nos podemos dar ao luxo de perder o cliente, há sempre um último recurso: comprar um template. Existem por aí muitos sites que comercializam templates profissionais a preços razoáveis. É escolher um que se adapte às necessidades do cliente e fazer-lhe as alterações necessárias (e não pensem que isso não dá trabalho).

...e quem sabe, quando nos sentirmos inspirados e sem projectos à vista, porque não fazermos nós templates para vender nesses sites? É sempre uma forma de ganhar algum dinheiro!

Alguns pontos de partida:

9 rules
Best Web Gallery
CSSArtillery
CSS Beauty
CSS Remix
CSS Zen Garden
Illustration Friday
Netdiver
Screenfluent
Smashing Magazine
Web Designer Wall

...e se isto não chegar, have fun!

25.11.07
categorias:
[3/15]

Uma reunião de briefing é indispensável para que os pormenores e prazos do site sejam definidos e estabelecidos.
Conhecer o cliente e o que ele espera de nós é uma parte essencial para o trabalho que vamos desenvolver. O contacto através email ou telefone nem sempre é eficaz, e geralmente torna processo mais demorado.

Acontece por vezes o cliente não saber bem o que quer, ou querer coisas que não se adaptam de modo nenhum às suas necessidades só porque viu em algum sítio e gostou. Temos que saber aconselhar e se for preciso mostrar-lhe o caminho certo, lembrar-lhe que o site não é para ele, mas sim, para os seus clientes/visitantes.
E enquanto uns clientes deixam tudo nossas mãos e o que nós decidirmos, eles entendem que é bom, outros são muito dificies, por isso, estejam preparados para tudo..
De modo a facilitar o processo, antes de sairmos para uma reunião, devemos fazer o trabalho de casa: visitar sites do género daquele que vamos fazer, analizar, tirar notas e conclusões, para podermos fazer sugestões.

Numa reunião traçamos os perfis gerais: objectivos, público-alvo, conteúdos, navegação, e funcionalidades.

Objectivos do site
O objectivo base de um site é dar a conhecer e facilitar a comunicação entre a empresa ou instituição e possíveis clientes/utilizadores/visitantes. Logo, deve ser bem claro quanto à mensagem que pretende transmitir e ter funcionalidades que se adaptem à sua natureza.
Deve ser fácil e agradável de navegar, e deve proporcionar uma boa experiência de utilização.

O público alvo
População em geral, faixas etárias, géneros, nichos, etc.
Conhecer o público-alvo é determinante para uma comunicação visual adequada e eficaz. Cores, formas, elementos gráficos, tipos de fontes, tudo depende de a quem se destina o site.

Tipo de conteúdo
Deve ter uma linguagem adequada ao público-alvo, deve ser claro e conciso. Desaconselha-se sempre grandes testamentos, para não entediar o visitante. As pessoas nem sempre estão dispostas a perder muito tempo a ler, e captam melhor a mensagem se esta não tiver muitos rodeios. Muitas vezes, os visitantes já têm uma ideia do que procuram e se não encontram o que pretendem à primeira, abandonam o site.

Claro que existem excepções, e depende da natureza do site. No caso de sites de documentação (ex. reviews, descrições, publicações, referencias, wikis, blogs, etc), é natural que tenham longos textos, mas nesse caso, o visitante já sabe o que o espera. De qualquer forma, se vamos fazer alguém passar muito tempo a ler num site desse tipo, temos que lhe facilitar a leitura com recurso ao design.

Navegação
A navegação é muito importante. Menus pouco claros, navegação confusa, botões ou ligações em sítios estranhos, o não relacionamento de conteúdos, o mapa do site inexistente ou ineficaz, são inimigos do sucesso.
O site deve ser estruturado e desenhado de forma a facilitar o acesso a todas as áreas, de primeiro nível bem como secundárias
Deve ter um visual e navegação fácil, coerente, e persistente.

Funcionalidades
O que deve existir no site e que vai de encontro às necessidades do cliente ou do público-alvo, exemplo: formulários de contacto, recolha de informações sobre utilizadores, foruns de discussão, etc.
Apurando as funcionalidades necessárias, identificamos também o tipo de tecnologia a aplicar.

Da reunião resulta também um fluxograma e um rascunho do futuro site, com o possível posicionamento dos elementos e esquema de navegação. A partir daí ficamos com uma ideia clara e podemos passar à fase seguinte, que é desenvolver uma maquete.

Tudo deve ficar assente e elaborado num caderno de encargos, que deve ser aprovado e assinado por ambas as partes e cumprido na integra. Prazos, fases, e valores. Isto é a nossa melhor defesa, pois se da nossa parte for tudo cumprido, podemo-nos poupar a inúmeras chatices. Além disso, aquelas modificações chatas de última hora geralmente não se encontram no caderno e têm valor acrescido.

28.2.07
categorias:
[2/15]

"Que programas devo utilizar para fazer um site?" é geralmente a primeira pergunta que fazemos quando pensamos em aventurar-nos pelo mundo do webdesign.

Existe um conjunto de ferramentas especificas para cada fase do desenvolvimento de um site, desde planifica-lo até publica-lo na net. Vamos por partes:

Projectar o site!
Lápis, borracha e papel

Nada como começar por pegar numa folha de papel e rabiscar aquilo que será o nosso futuro site. Isto ajuda-nos a criar uma ideia do posicionamento e dimensão dos elementos que estamos a pensar usar. Convém também definir o esquema de navegação, desenhando um fluxograma, por exemplo.

Desenvolver o grafismo!
Para desenvolver o grafismo do nosso site vamos precisar de uma aplicação de edição gráfica. Normalmente, quando se fala em fazer um layout, o primeiro programa que salta para cima da mesa é o Photoshop. O segundo é o Fireworks.

O Photoshop é sem dúvida alguma, o melhor programa de edição de imagem que existe, e nenhum outro o bate na qualidade dos gráficos que gera e do controlo que nos oferece, seja em manipulação e retoque de imagens, sombras, degradés, filtros, entre outros, pois a lista de features é enorme. Aprender a usa-lo correctamente não é propriamente um passeio no parque, mas o esforço vale bem a pena.

Já o Fireworks é mais fácil de usar que o Photoshop. Desenhar layouts nele é sempre a andar e tem funcionalidades web embutidas, ou seja, podemos logo programar visualmente algumas acções do site, como menus. A qualidade dos degradés e sombras e as ferramentas de retoque de imagem são inferiores às do Photoshop, visto que é um programa semi-vectorial mais direccionado para a criação de elementos gráficos.
Para mim, a grande vantagem do Fireworks é a optimização e exportação dos gráficos, que considero melhor que a do Photoshop.

Também podemos recorrer a programas vectoriais para desenhar alguns elementos gráficos com maior detalhe. O Illustrator, o Freehand e até mesmo o Flash podem ser utilizados para criar gráficos, ilustrações ou icones com grande qualidade.

Todas as ferramentas que mencionei acima pertencem à Adobe e são pagas a peso de ouro, mas felizmente existem alternativas opensource gratuitas, como é o caso do Gimp para edição gráfica (ou Seashore, para quem usa MacOS X e não quer instalar o X11), e o Inkscape para vector.
Todas elas funcionam em Windows e MacOS X, e apenas as duas opções opensource estão também disponíveis para Linux, apesar de já ter ouvido falar de quem tenha conseguido correr o Photoshop nesta plataforma.

Agora que já sabemos que ferramentas usar para desenharmos o nosso site, vamos conhecer aquelas que nos permitem prepara-lo para a web.

Código HTML/CSS!
O Dreamweaver é a melhor ferramenta que conheço para compor os sites e escrever markup.
Em "design view", o WYSIWYG é cada vez mais fiel e gera o código mais limpo que tenho visto em programas do género. Em "code view" a codificação de cores e a sugestão de código (code-hinting) torna a produção do HTML muito mais rápida.
Possui uma biblioteca de acções de javascript e de linguagem de servidor, que torna mais fácil dar dinamismo aos sites. Também existem montes de extensões disponíveis na net que complementam este cardápio de funcionalidades.
Existe uma alternativa gratuita ao Dreamweaver, o NVU, que funciona em Windows, MacOS X e Linux.

Para quem não se acanha em escrever código em editores de texto, seja de raiz, seja fazer apenas pequenas modificações, existem umas quantas aplicações como o Notepad 2 ou Notepad++ (ambos gratuitos) para Windows, o TextMate, BBEdit, ou o Smultron (gratuito, e o meu favorito) para MacOS X, e o jEdit que é multi-plataforma.

O problema de utilizar editores básicos, e que não tenham code-hinting, é que dificulta a vida a que não conhece bem as regras de CSS. Com a prática acabamos por decorar bastantes, mas até lá, podemos recorrer a editores de CSS.
O mais conhecido é o TopStyle (Windows), e para MacOS X existem, entre outros, o CSSEdit e o Syle Master.

O Microsoft Expression é a resposta da Microsoft às suites da Adobe. É composto pelo Expression Web, que é o equivalente ao Dreamweaver ou ao GoLive, pelo Expression Blend, uma espécie de Director para aplicações multimédia desktop, o Expression Design, um programa de desenho vectorial semelhante ao Fireworks ou ao Inkscape, que trabalha com SVG (Scalable Vector Graphics). O Expression Design usa XAML (Extensible Application Markup Language), que faz parte do motor gráfico do Windows Vista. E finalmente, o Expression Media, que serve para catalogar os ficheiros multimédia que vamos usar nas nossas composições.

Já agora, não se esqueçam de instalar a Web Developer Extension, que é simultaneamente uma das melhores extensões que existe para o Firefox e um dos melhores aliados do webdesigner, pois permite dissecar os sites e fazer debug, por exemplo, ao CSS em tempo real. Para MacOS X existe o XyleScope que faz o mesmo, usando o Safari.
Flash!
O Flash é uma aplicação de animação vectorial muito boa para gerar animações e componentes para sites. Apesar de não morrer de amores por ele, sei que não pode ser ignorado. Tem um enorme potencial na área do vídeo e também em aplicações dinâmicas devido às funcionalidades de ligação a webservices, fontes de dados em XML (Extensible Markup Language), e outras.
É bastante usado para fazer sites completos, mas como expliquei há uns meses neste post, nem sempre é a escolha acertada.

A melhor forma para aprendermos como se fazem algumas animações em flash é observar como foram feitas. Mas como raramente temos acesso ao ficheiro do projecto (*.fla), temos que descarregar o filme compilado (.swf) e corre-lo num descompilador. O Sothink SWF Decompiler e o Flash Decompiler são duas das melhores soluções que andam por aí, mas infelizmente só correm em Windows. Para MacOS X existe o Gordon.
Existe uma extensão para FireFox bastante útil para descarregar os SWF's (e não só), a Download Embedded.

Publicar na net!
Uma vez que o nosso site está pronto para ser enviado para internet, vamos precisar de um cliente de FTP!
Os clientes de FTP (File Transfer Protocol) são usados para nos ligar-mos a um servidor web, para que um possamos colocar os nossos ficheiros online.
Um dos melhores clientes para Windows que andam por aí é o CuteFTP, e também o SmartFTP, que é gratuito. Para MacOS X existem uns quantos muito maneirinhos, como o caso do Transmit, do Yummy, e do Fetch, e uma alternativa gratuita muito boa, o Cyberduck.

Também podemos simplesmente instalar o FireFTP no FireFox uma extensão criada para o efeito.

22.2.07
categorias:
[1/15]

Este é o primeiro de (para já) 15 posts dedicados totalmente ao tema. E para começar, nada melhor que fazer uma analise às funções de um webdesigner.

O webdesign é uma profissão relativamente nova (surgiu em meados de 1991), e ainda há muita gente ainda não faz a mínima ideia o que é que um webdesigner faz. Basicamente, é um designer que se especializou na produção de conteúdos para a internet.

Então, quais são os requisitos para este ofício?

Conhecer o meio!
Primeiro que tudo, é essencial conhecermos bem o meio onde nos movemos, a internet. Devemos navegar muito, ver e analisar diversos tipos de sites de modo a nos mantermos actualizados de acordo com as tendências e exigências do mercado.
E porque o nosso mundo não é só a internet, ver televisão, ler revistas, ver posters e outdoors e até ouvir a conversa do vizinho do lado. A análise de todos esses elementos ajuda-nos a criar uma noção do que está em voga.
Ao analisarmos um site ou uma peça, devemos colocar algumas perguntas a nós próprios, tipo que técnicas ou abordagens foram utilizadas para atingir determinado resultado, e se esse resultado funciona ou não, dentro das circunstâncias.

Versatilidade!
Um bom webdesigner não tem que ser, propriamente dito, um programador exímio, ou um designer gráfico brilhante, ou um fotógrafo profissional, ou um especialista em marketing, ou um consultor. Deve antes, ser capaz de conciliar um pouco de todas essas características.
Hoje em dia, vêem-se por aí alguns "webdesigners" que são mais designers gráficos que outra coisa.. os seus conceitos podem ter um aspecto maravilhoso nas maquetes, mas a sua concepção é totalmente inviável, resultando muitas vezes, em coisas pesadas, sem navegabilidade e estrutura.
Os designers gráficos muitas vezes não entendem conceitos básicos da usabilidade nem dominam as linguagens de markup, e recorrem a código gerado automaticamente pelas ferramentas de desenho..

Ser imaginativo e criativo dentro das limitações!
O webdesign tem regras. Não existe propriamente a liberdade da tela, há que conhecer as linguagens, a sua forma de construção e os seus limites. Por vezes, para conseguimos aproximar o resultado final ao conceito, temos de ser criativos e saber "dar a volta". E sem nos apercebermos, podemos estar mesmo a inovar.

Conhecer bem o próprio ofício e em parte, o dos outros!
Bom conhecimento da internet e das ferramentas, linguagens, standards e tecnologias que se usa é fundamental, se quisermos que o nosso trabalho seja integralmente profissional.
Deve existir, desde que iniciamos o desenvolvimento de um site, uma preocupação de como vamos construi-lo, saber prever o seu comportamento, e se aquilo que estamos a fazer é o mais adequado. Também devemos saber prepara-lo para ser trabalhado por outras pessoas, nomeadamente, programadores.
Um bom webdesigner tem que ser capaz de construir um site utilizando HTML e CSS e faze-lo "como manda a lei". Hoje em dia, o CSS desempenha um papel muito importante, porque ao separar o conteúdo da apresentação, cria flexibilidade nos layouts e permite fazer modificações sem necessidade de alterar a estrutura do site, poupando assim imenso tempo.
Temos que nos certificar que o nosso site funciona em diversos browsers e em diversas resoluções de monitores, e que é funcional e intuitivo.

Devemos ter ainda conhecimentos sobre outros aspectos que afectam directa ou indirectamente o site, como por exemplo, alojamento, domínios, servidores, browsers, motores de busca, sistemas operativos, etc..

Saber o que se vai fazer!
É fundamental conhecermos os objectivos do trabalho que estamos a desenvolver. Conhecer o seu propósito, a audiência a quem se destina, as necessidades do cliente, etc.

Saber lidar com o cliente!
Saber escutar o cliente, saber o que ele aspira, fazer perguntas para identificar as suas necessidades e fazer sugestões de acordo isso. Devemos saber recomendar soluções e explicar-lhe as vantagem deste ou daquele método.
É conveniente certificar-nos que o cliente está seguro daquilo que pretende, e não hesita muito, pois corremos o risco de ter que refazer o trabalho, apenas porque ele não gostou de algum aspecto no resultado final.
Ter em atenção que o webdesigner nem sempre é responsável pelo conteúdo de um site. A menos que seja um projecto de caracter pessoal, o conteúdo deve ficar a cargo do cliente e ele deve ter noção disso.

Saber gerir o tempo e as prioridades!
Fazer uma boa gestão de tempo é essencial, porque quando um cliente paga, o mais certo é quer começar a ver resultados no dia seguinte. Logo, para evitarmos situações mais desagradáveis, devemos tentar não nos empanturrarmos de trabalho, de modo a sermos capazes de cumprir com os prazos estabelecidos. Planificar todas as fases de produção é uma boa ideia.
Não nos podemos esquecer de salvaguardar sempre algum tempo para margem para erros, contra-tempos e imprevistos, para podermos trabalhar à vontade, sem a pressão constante e iminente do prazo.

Saber lidar com o feedback!
Sermos críticos com o nosso próprio trabalho não chega! Devemos pedir opiniões de como este poderia estar melhor, e estar abertos a sugestões, mesmo que estas sejam completamente estapafúrdias. Devemos analisa-las e verificar se têm fundamento ou não.
É oportuno saber fundamentar bem as nossas escolhas, e sempre que possível com factos e dados estatísticos, se quisermos ter algum controlo criativo em todo o processo.

Ser responsável!
Tentar cumprir os prazos, e antes de entregar o site ao cliente, certificar-nos que esta tudo a funcionar devidamente, que não existem bugs, que carrega rápido e sem problemas, que é correctamente apresentado em vários browsers, e que as várias resoluções não afectam a sua visibilidade.
Devemos manter-nos em contacto com o cliente, ajuda-lo a com as suas dúvidas, ou caso ele necessite de fazer alterações justificáveis ao site.
Se ele gostou do nosso trabalho, vai certamente recomendar-nos a outras pessoas, o que e muito importante.

Formação continua!
Neste meio não podemos parar de aprender e desenvolver as nossas capacidades e técnicas, sob a pena de ficarmos para trás. Tal como em muitas outras profissões, no webdesign não existem metas, está sempre em constante evolução, por exemplo, quando dominamos uma linguagem, aparece outra e voltamos ao princípio, ou cada versão nova que sai de um programa, com características que não conhecemos ou não estamos habituados, ou as técnicas novas que aparecem todos os dias. É uma exigência da profissão que estejamos sempre alerta e sejamos rápidos a aprender a aplicar conceitos novos.
Quando queremos fazer algo e não sabemos como, uma das melhores formas de aprender é observando o trabalho dos outros, analisando o código e as técnicas utilizadas, desconstrui-lo e voltar a construi-lo. Não há que ter vergonha em perguntar como isto ou aquilo foi feito. A troca de ideias e experiências com outras pessoas que estão no mesmp meio é uma mais-valia.
Também aprendemos muito à custa dos nossos erros, e das tentativas que fazemos. Devemos conhecer as nossas limitações e tentar supera-las, e não temer os desafios.

A experiência é tudo!
"Practice makes perfect"!
Os últimos dois anos têm sido decisivos para o meu desenvolvimento enquanto webdesigner, tenho aprendido bastante durante este tempo, talvez porque tenho-me dedicado com grande afinco à profissão. Cada site que faço representa mais um desafio, mais uma oportunidade de evoluir, e quando isso acontece, sinto-me realizada.
Quanto mais profissionais nos tornamos, mais noção temos que o webdesign não é assim tão fácil como pode parecer à primeira vista..

20.2.07
categorias:
Primeiro queria ser arquitecta, depois estilista. Entretanto fiquei maravilha pelo mundo da investigação cientifica e quis ser microbiologista, mas o curso cientifico-natural do secundário simplesmente não estava a dar frutos. Estava presa no 12º ano sem grandes perspectivas de futuro (e de acabar o ano com sucesso), quando decidi que tinha que mudar e escolher uma área diferente.
Foi nessa altura que surgiu a ideia de enveredar pelo mundo dos áudio-visuais, e o curso de multimédia atravessou-se no meu caminho quanto procurava procurava um curso nessa área.
Durante o curso ainda hesitei entre o design gráfico e o webdesign, mas a minha paixão pela internet (e por fazer sites) falou mais alto.

Queria ser arquitecta, mas tornei-me webdesigner..nada mal!

Isto tudo porque reparei que este blog está quase a fazer um ano, e um dos principais motivos que levaram à sua fundação era precisamente falar sobre webdesign, algo que tem sido negligenciado. Portanto, esperam-se posts sobre este assunto com mais frequência por aqui :)


 

Isa. Webdesigner, geek, apple fangirl assumida, necessita tanto de uma ligação à internet como do ar que respira. Adepta das novas tecnologias e sempre atenta às novidades!

online