Websites

250 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
250
No SlideShare
0
A partir de incorporações
0
Número de incorporações
37
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Websites

  1. 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 edesenvolvimento web.De qualquer maneira devemos ter sempre um processo, guiado por critérios relevantes para osnossos utilizadores, que nos garanta um resultado final adequado aos nossos utilizadores e aonosso objectivo.Envolvendo todos os membros da equipa deverá ser pensado o site de acordo com os seguintesobjectivos e fases, pela seguinte ordem:1. Pesquisa2. Conteúdo3. Arquitectura de Informação4. Design Visual5. Implementação6. Lançamento7. AnáliseEspecificando cada uma das fases...## PesquisaTodos deverão recolher e partilhar screenshots ou links para sites que achem inspiradores ou quepodem 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 algoque 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 paragravar automaticamente para uma pasta todos os screenshots recolhidos. Um exemplo para oChrome( https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg )- Actionable Goals -Tirem uma horinha ou duas de um pacato serão para percorrerem os vossos favoritos, facebooklikes, 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 portodos, usando a dropbox, por exemplo.
  2. 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údoUm 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 deinserçã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 esseconteú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, setiverem 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 comoNewsletters, Post da página de Facebook, Descrições de bio para as várias redes sociais, etc...## Arquitectura de InformaçãoEsta é a parte mais importante e mais descurada na maioria dos sites. Quando ouvem falar emUser Experience, é normalmente aqui que essa é pensada, criada e iterada. Sim, pensada, criada eiterada. A iteração e experimentação aqui é muito importante.Nesta fase, com a pesquisa anteriormente feita e os conteúdos definidos, podemos começar aesquematizar o site, definindo hierarquias, secções, estrutura, fluxos de navegação, etc.O objectivo será criar um wireframe interactivo, para todos experimentarem podendo assimtrabalhar 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 discutirinterpretações pessoais, percepções contraditórias e começa-se tudo a formar em torno de umadiscussão colaborativa. É uma guerra entre todos, mas é suposto ser assim e é muito mais rico eeficaz do que andar a desenhar hipóteses de design que depois já não se adequam ao que sepretendia. Estas discussões têm de ser feitas presencialmente e com mente aberta, num espíritode brainstorming e acima de tudo com a perspectiva centrada no utilizador.- Actionable Goals -
  3. 3. Usar o Balsamiq, as bibliotecas da Keynotopia ou mesmo desenhar em papel os esquemas decomo as páginas iriam ser, com que ordem, o número de páginas, o flow do utilizador, userstories detalhando casos específicos, etc...Isto deverá ser desenhado e criado em conjunto com todos os elementos.## Design VisualEsta é a parte sexy. Depois de tudo estar definido, em termos do wireframe, criar uma imagem epintar uma tela com o aspecto que o site poderá ter é muito mais rápido do que tentar fazer issosem wireframe. Aqui também entra muito a parte da pesquisa, em que as influências estéticasque tenham sido apontadas na pesquisa podem influenciar o aspecto do site bem como aspreferê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 garantemque 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 osutilizadores virem o site, o seu aspecto e conteúdo será diferente. Diferente no sentido de naversão mobile, o site provavelmente terá menos conteúdo na homepage e terá o tipo de letramaior e será mais despojado de artifícios estéticos. Isto porque quando estamos a ver um site noiPhone estamos num contexto diferente, a uma distância diferente do ecrã e provavelmente a usaro telemóvel só com uma mão enquanto seguramos os sacos das compras na outra e tentamos tirara 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 ajanela do vosso browser para um tamanho mais pequeno e verão que o site adapta-se a todas aslarguras 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 daimplementação.## ImplementaçãoEm relação a implementação e desenvolvimento web, há toda uma panóplia de opções e adiscussão à volta das tecnologias a utilizar, linguagens e abordagens pode muito rapidamenteresvalar para um guerra de religiões. No entanto, hoje em dia há um série de conjuntos detecnologias que estão na moda e são adoptadas pela maioria das startups, assentando numametodologia ágil de desenvolvimento. Como boa regra, deve-se sempre preferir trabalhar comtecnologias open-source, porque para além de não terem custos com licenças dedesenvolvimento ou alojamento, garantem que o trabalho produzido possa sempre ser alteradonoutra circunstância e por outro programador dando assim flexibilidade no trabalho. Algumasindicações gerais e factores a ter em conta aquando da escolha da tecnologia:
  4. 4. - Escalabilidade- Agilidade- Rapidez de implementação- Popularidade entre Developers- Maturação da linguagem- Performance- Segurança- CompatibilidadeEm relação ao alojamento, existe hoje uma forte vertente direccionada para a cloud em que aescalabilidade do alojamento pode ser feito on-demand e de forma elástica. Existem bastantesopções gratuitas inicialmente e para um uso moderado como a Amazon Web Services (a maiorinfra-estrutura mundial de cloud hosting), o Heroku (direccionado para aplicações webdesenvolvidas 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 osite, fornecendo assim ao utilizador final a segurança de que está a lidar realmente com quemdeve 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ésde 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 ecorrigir quaisquer problemas antes de lançar.## LançamentoQuando 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 primeirodia, 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. 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é aoKissMetrics que é mais centrado no comportamento de cada utilizador, o MixPanel que é superconfigurável e poderoso porque medem todo o tipo de eventos(e oferecem uma t-shirt =) e oInspectlet que mais parece saído de uma agência de inteligência governamental porque gravatudo 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 aestratégia da empresa deve-se focar em melhorar continuamente esta métrica única.P.S.: Parabéns por teres lido tudo isto! Obrigado!

×