1. # 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.

2. 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 -

3. 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:

4. - 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

5. É 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!