# WEBSITES?? Como fazer websites?

É como perguntar a um cozinheiro como se deve fazer comida, depende...

- do tipo de utilizadores

- do objectivo do site

- do produto a vender

- da funcionalidade a efectuar

- e de cada negócio

> O caso ideal será contratar ou ter na equipa alguém com experiência em web design e

desenvolvimento web.

De qualquer maneira devemos ter sempre um processo, guiado por critérios relevantes para os

nossos utilizadores, que nos garanta um resultado final adequado aos nossos utilizadores e ao

nosso objectivo.

Envolvendo todos os membros da equipa deverá ser pensado o site de acordo com os seguintes

objectivos e fases, pela seguinte ordem:

1. Pesquisa

2. Conteúdo

3. Arquitectura de Informação

4. Design Visual

5. Implementação

6. Lançamento

7. Análise

Especificando cada uma das fases...

## Pesquisa

Todos deverão recolher e partilhar screenshots ou links para sites que achem inspiradores ou que

podem ser influência ao nível de estrutura, layout, grafismo, funcionalidade, tom de voz, copy,

etc. Podem ser sites da concorrência, directa ou indirecta, nacional ou internacional ou de algo

que não tenha nada a ver mas que vos agrade em algum dos aspectos referidos anteriormente.

Para facilitar este processo podem instalar extensões nos vossos browsers e configurá-la para

gravar automaticamente para uma pasta todos os screenshots recolhidos. Um exemplo para o

Chrome( https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg )

- Actionable Goals -

Tirem uma horinha ou duas de um pacato serão para percorrerem os vossos favoritos, facebook

likes, twitter, etc e pesquisarem por sites que possam servir de referencia.

Sacar screenshots, fazer anotações nas imagens e gravar tudo para uma pasta partilhada por

todos, usando a dropbox, por exemplo.

Convencer alguém a enviar-nos screenshots/links de sites de referencia. Percorrer os favoritos /

facebook likes dessa pessoa e extrair referências daí também.

## Conteúdo

Um site não existe sem conteúdo. E o conteúdo dita como o site deve ser. Nesta era da internet,

por mais giro ou funcional que o site seja, Content is King!

Um site que precise de ter conteúdo regularmente actualizável deve contemplar um sistema de

inserção de conteúdo simples de usar como o Wordpress ou o Drupal.

Não é esperto desenhar um site sem antes ter definido o conteúdo que o compõe.

- Actionable Goals -

Criar um documento partilhado onde escrevem todos o texto que o site irá ter, tipificando esse

conteúdo e dando-lhe uma hierarquia utilizando os estilos de Headings disponíveis no Word,

Google Docs ou qualquer outro tipo de processador de texto.

Esquematizar o tipo de contéudo que querem no site para o caso de ser algo repetível, ou seja, se

tiverem uma montra de produtos, cada produto terá de ter um "Nome + Descrição + Foto + Preço

+ Reviews + etc..."

Listar todo o conteúdo que falta ser feito, porque falta sempre alguma coisa.

Pensar em vários tipos de suportes inerentes ao site que também precisem de conteúdo como

Newsletters, Post da página de Facebook, Descrições de bio para as várias redes sociais, etc...

## Arquitectura de Informação

Esta é a parte mais importante e mais descurada na maioria dos sites. Quando ouvem falar em

User Experience, é normalmente aqui que essa é pensada, criada e iterada. Sim, pensada, criada e

iterada. A iteração e experimentação aqui é muito importante.

Nesta fase, com a pesquisa anteriormente feita e os conteúdos definidos, podemos começar a

esquematizar o site, definindo hierarquias, secções, estrutura, fluxos de navegação, etc.

O objectivo será criar um wireframe interactivo, para todos experimentarem podendo assim

trabalhar e refinar o site em cima desses mockups.

Os wireframes ou mockups são a melhor maneira de gerar discussão em relação a um site.

Começamos a ver materializado o resultado do que se andou a falar e começam-se a discutir

interpretações pessoais, percepções contraditórias e começa-se tudo a formar em torno de uma

discussão colaborativa. É uma guerra entre todos, mas é suposto ser assim e é muito mais rico e

eficaz do que andar a desenhar hipóteses de design que depois já não se adequam ao que se

pretendia. Estas discussões têm de ser feitas presencialmente e com mente aberta, num espírito

de brainstorming e acima de tudo com a perspectiva centrada no utilizador.

- Actionable Goals -

Usar o Balsamiq, as bibliotecas da Keynotopia ou mesmo desenhar em papel os esquemas de

como as páginas iriam ser, com que ordem, o número de páginas, o flow do utilizador, user

stories detalhando casos específicos, etc...

Isto deverá ser desenhado e criado em conjunto com todos os elementos.

## Design Visual

Esta é a parte sexy. Depois de tudo estar definido, em termos do wireframe, criar uma imagem e

pintar uma tela com o aspecto que o site poderá ter é muito mais rápido do que tentar fazer isso

sem wireframe. Aqui também entra muito a parte da pesquisa, em que as influências estéticas

que tenham sido apontadas na pesquisa podem influenciar o aspecto do site bem como as

preferências estéticas do segmento de utilizadores para onde se direccionam.

Hoje em dia torna-se cada vez mais importante que o site seja desenhado de forma responsive.

Podem ver exemplos de sites desse tipo aqui ( http://mediaqueri.es ). Sites responsive garantem

que o utilizador visualize uma versão do site adequada ao tamanho do ecran que está a utilizar,

seja ele um desktop ou um smartphone. Isto significa que dependendo do device em que os

utilizadores virem o site, o seu aspecto e conteúdo será diferente. Diferente no sentido de na

versão mobile, o site provavelmente terá menos conteúdo na homepage e terá o tipo de letra

maior e será mais despojado de artifícios estéticos. Isto porque quando estamos a ver um site no

iPhone estamos num contexto diferente, a uma distância diferente do ecrã e provavelmente a usar

o telemóvel só com uma mão enquanto seguramos os sacos das compras na outra e tentamos tirar

a chave da porta de casa do bolso. Para diferentes contextos de utilização o site dever-se-á

apresentar de maneira diferente.

Para verem os exemplos deste tipo de site podem explorar o link acima e podem diminuir a

janela do vosso browser para um tamanho mais pequeno e verão que o site adapta-se a todas as

larguras de ecrã, reorganizando o seu conteúdo e alterando o seu aspecto.

- Actionable Goals -

Desenhar o aspecto do site e apresentá-lo como um protótipo navegável e interactivo antes da

implementação.

## Implementação

Em relação a implementação e desenvolvimento web, há toda uma panóplia de opções e a

discussão à volta das tecnologias a utilizar, linguagens e abordagens pode muito rapidamente

resvalar para um guerra de religiões. No entanto, hoje em dia há um série de conjuntos de

tecnologias que estão na moda e são adoptadas pela maioria das startups, assentando numa

metodologia ágil de desenvolvimento. Como boa regra, deve-se sempre preferir trabalhar com

tecnologias open-source, porque para além de não terem custos com licenças de

desenvolvimento ou alojamento, garantem que o trabalho produzido possa sempre ser alterado

noutra circunstância e por outro programador dando assim flexibilidade no trabalho. Algumas

indicações gerais e factores a ter em conta aquando da escolha da tecnologia:

- Escalabilidade

- Agilidade

- Rapidez de implementação

- Popularidade entre Developers

- Maturação da linguagem

- Performance

- Segurança

- Compatibilidade

Em relação ao alojamento, existe hoje uma forte vertente direccionada para a cloud em que a

escalabilidade do alojamento pode ser feito on-demand e de forma elástica. Existem bastantes

opções gratuitas inicialmente e para um uso moderado como a Amazon Web Services (a maior

infra-estrutura mundial de cloud hosting), o Heroku (direccionado para aplicações web

desenvolvidas em Ruby on Rails e assente na infra-estrutura da Amazon) e o Rackspace

(bastante direccionado para startups, promovendo diversos concursos)

Devem também assegurar um certificado SSL que garante a identidade da empresa que gere o

site, fornecendo assim ao utilizador final a segurança de que está a lidar realmente com quem

deve e que comunica com o site através de uma ligação encriptada e segura.

A integração de pagamentos pode ser resolvida com o uso de várias plataformas existentes,

direccionadas a vários tipos de pagamentos como o Paypal, Stripe (só funciona nos EUA),

Paymill (clone do Stripe para a UE) e o Easypay que garante em Portugal o pagamento através

de referências multibanco como as facturas da água e luz.

- Actionable Goal -

Ter um protótipo acessível na web e que cumpra as funções desejadas onde se pode testar e

corrigir quaisquer problemas antes de lançar.

## Lançamento

Quando estiver tudo pronto, e aqui o pronto significa, implementado, online, testado, corrigido,

com conteúdo e tudo o mais, devemos orquestrar o lançamento do site.

Este lançamento deverá ser suportado por actividades que garantam bastante tráfego no primeiro

dia, sejam Google AdWords, Facebook Ads, actividades offline e campanhas tradicionais,

dependendo do tipo de negócio.

- Actionable Goals -

Lançar o site com muitas pessoas a visitarem-no.

## Análise

É essencial focarem-se em métricas, não as métricas de vaidade como o número de utilizadores,

as pageviews que dão sempre números grandes, mas as que são relevantes para o vosso negócio.

Ex.: Percentagem de pessoas que foram ao site e compraram alguma coisa.

Existem várias soluções para ajudar nesta análise como o básico do Google Analytics, até ao

KissMetrics que é mais centrado no comportamento de cada utilizador, o MixPanel que é super

configurável e poderoso porque medem todo o tipo de eventos(e oferecem uma t-shirt =) e o

Inspectlet que mais parece saído de uma agência de inteligência governamental porque grava

tudo o que os utilizadores fazem nas vossas páginas.

- Actionable Goals -

Definir uma métrica única crucial para o negócio que deve ser monitorizada diariamente. Toda a

estratégia da empresa deve-se focar em melhorar continuamente esta métrica única.

P.S.: Parabéns por teres lido tudo isto! Obrigado!