Papel com desenhos de protótipos sobre um prancheta e canetas ao redor

6 dicas essenciais para desenhar bons protótipos

Com poucos materiais e em poucos minutos, durante até mesmo a própria reunião de requisitos junto ao cliente, os protótipos criados a mão se figuram em uma das formas mais fáceis e rápidas de se experimentar um produto.

Recomendado para protótipos de baixa e média-fidelidade, os protótipos criados a mão constituem uma etapa essencial do desenvolvimento de um sistema (ou software), tendo como principais benefícios:

  • planejar e compartilhar ideias de interface e disposição da organização de forma mais efetiva;
  • validar o atendimento aos requisitos do sistema antes do início de seu desenvolvimento;
  • percorrer e simular o fluxo de forma mais compreensível que em diagramas;
  • permitir aos envolvidos a coleta de valiosos feedbacks que os auxiliarão na tomada de decisões;
  • permitir o “uso” do produto de forma rápida e com baixo custo.

Sabendo-se de sua grande utilidade, chegou a hora de colocar a mão na massa e começar a criar com essas 6 dicas essenciais:

1. Ambiente

Os itens básicos e obrigatórios no ambiente para se prototipar são o espaço e a iluminação.

Recomenda-se que tenha uma mesa grande livre para poder espalhar seus materiais, deixando-os visíveis e fáceis de serem manuseados. Outro ponto importante é com este espaço poder espalhar as várias folhas já desenhadas a fim de facilitar a visibilidade dos protótipos.

Quando se cria protótipos guiados, isto é, com a ajuda e considerações de outros envolvidos em volta, é bom que tenha-se um ambiente quieto e calmo a fim de facilitar a comunicação e não atrapalhar na criatividade. Porém, caso esteja criando protótipos sozinho, sem a comunicação com outros envolvidos durante o processo, uma boa música de fundo é essencial!

Dê preferência às músicas instrumentais por facilitarem a concentração e foco durante a criação. Dica: existem boas playlists no Spotify, basta procurar pela categoria “Foco”.

2. Materiais

Em minha consideração, os itens fundamentais na atividade de desenho de protótipos são:

Papel:

Prefira papéis inteiramente brancos ou quadriculados, todos do mesmo tamanho para facilitar a organização e disposição. Tenha folhas o bastante para criar várias propostas e também não se preocupar em errar, mas claro, pense sempre no meio-ambiente e evite o desperdício! 😉

Os papéis em branco lhe dão maior liberdade para desenhar os elementos da forma e posição que desejar, por esta razão, são mais recomendados a usuários com boa habilidade nos traçados, de forma que os protótipos não fiquem muito ‘assimétricos’, se é que me entendem.

Os papéis quadriculados por sua vez, facilitam o desenho dos elementos de forma simétrica aproveitando-se das linhas como referência para o protótipo. Recomendado aos usuários com menores habilidades nos traçados. O ponto ‘negativo’ desses papéis é que os quadriculados, dependendo da opacidade de seu traçado, muitas vezes podem se misturar com os traçados do protótipo e causar um desconforto ou confusão visual.

Lápis e borracha:

Itens essenciais a qualquer desenhista, ou, prototipador – no caso.

Prefira lápis fáceis de serem apagados e borrachas que dificilmente borram, tornando rápido o processo de rascunho e evitando marcas ao longo da evolução do desenho, pois desenhar e apagar pode ser atividade comum.

Lápis de cor também são bem vindos no processo de prototipação. Quando bem utilizados, darão um ar mais profissional aos protótipos.

Canetas

Qualquer caneta esferográfica (do tipo Bic ou Compactor) já são suficientes para deixar os traços mais fortes e marcantes no protótipo.

Utilize diferentes espessuras para os traçados, variando de finos para grossos e canetas coloridas a fim de diferenciar os elementos no protótipo.

Utilizo canetas de tinta nanquim e particularmente as recomendo pois os traços ficam melhor definidos e dão a aparência que foram impressos ao invés de desenhados.

Possuo canetas nanquim do tipo profissional recarregável (Desegraph) e descartáveis (Uni). Recomendo fortemente as descartáveis pela praticidade e facilidade de uso.

Materiais complementares

Prancheta: tenha sempre uma por perto, elas possuem um custo baixíssimo e uma utilidade gigantesca: permitem que você realize seu traçados independentemente da superfície disponível, pois nem sempre temos aquela mesa bacana com espaço livre.

Régua: facilita a criação dos traços retilíneos e a divisão simétrica dos elementos no protótipo, como exemplo, os grids estruturais. Lembrando que quanto mais retilíneos e simétricos forem seus traços e elementos, maior será a impressão de fidelidade do protótipo, já traços menos definidos e simétricos, dão a impressão de protótipos de baixa fidelidade. Ambos são importantes e possuem seu valor, o que depende é o objetivo de sua criação e utilização.

Post-it: possibilitam o incremento de comentários em protótipos que não possuem mais espaço ou não podem/devem ser poluídos com informações ‘complementares’.

3. Por onde começar: os primeiros rabiscos e elementos básicos do protótipo

Defina e limite a proporção a ser trabalhada:

Diferentes dispositivos possuem geralmente diferentes proporções de tela e essa importante informação deve ser considerada na criação dos protótipos.

Delimite a área a ser trabalhada com traços fortes.

Rascunhe o dispositivo ou janela do aplicativo

Com o intuito de facilitar o entendimento do usuário – do protótipo – e permitir uma melhor comparação com a realidade, o rascunho do dispositivo é altamente recomendado.

Na internet é possível de encontrar diversos modelos e exemplos legais a serem utilizados.

Defina os grids

Com a área útil a ser trabalhada devidamente pronta para o desenho, crie mentalmente (no caso de protótipos de baixa fidelidade) ou delimite de lápis com o auxílio de uma régua (no caso de protótipos de média/alta fidelidade), os grids a serem trabalhados.

Esses traços (grids) lhe auxiliarão na organização dos elementos durante todo o processo de prototipação e darão um senso de estética confortável ao desenho. Podem também facilitar (e muito) a futura codificação da tela, uma vez que existem diversos frameworks de front-end (HTML e CSS) que utilizam dessa prática.

Um dos grandes princípios do design é trabalhar com grids. caso esse termo ainda não seja familiar ou considerado em seus trabalhos, recomendo veemente seu estudo e aplicação nos trabalhos de prototipagem. //leitura complementar

4. Experiência centrada no usuário

Quando se desenvolve um sistema, ele é projetado para seus usuários e não para o requisitante, pense sempre nisso!

Portanto, foque na experiência do usuário, isto é, crie seus protótipos pensando exatamente como o usuário gostaria de se interagir com o produto. Foco na interação.

Aplique ao máximo seus conhecimentos em usabilidade e acessibilidade. Facilite seu uso!

5. Inspire-se

Não é preciso reinventar a roda

Muitas telas e interações já foram profundamente estudadas por especialistas e aplicadas em inúmeros projetos. Quando elas funcionam bem, não se faz necessário reinventa-las, pelo contrário, aproveite-as em seus protótipos.

Se você precisa de uma boa inspiração, encontre-a nos melhores.

Como exemplo, a ‘simples’ página inicial do Google possui uma barra de pesquisa que é sua valiosa ‘ferramenta principal’. A experiência ao usá-la com certeza passou e passa por diversos estudos e aprimoramentos. Utilize-se dessa experiência para sua inspiração.

Lembre-se sempre que há uma grande diferença entre se inspirar e copiar uma ideia. Seja criativo!

6. Experimente seu protótipo

O protótipo é a forma mais rápida e barata de se usar um produto. Este é seu objetivo!

Quando criados em papéis, experimentar os protótipos com outros usuários se torna incrivelmente fácil uma vez que você precisa somente de apontar, seja com o dedo ou uma caneta para simular seu uso e colher feedbacks. Existem inclusive técnicas para estudo de usabilidade aplicáveis aos protótipos de papel. Faça bom uso!

Leituras complementares

30 de junho de 2016 - Sem Comentários


Ata de reunião: como fazer de forma efetiva

Toda reunião deve ser claramente registrada para que os envolvidos fiquem alinhados dos propósitos, definições e afazeres, assegurando assim sua efetividade.

A importância da ata de reunião

É comum vermos pessoas se reunindo, gastando horas em discussões de vários assuntos, realizando diversas definições e posteriormente, por falta de uma ata, tudo se desfaz ao vento, como as palavras. Sim, muitas pessoas acreditam que não é preciso anotar pois está tudo na cabeça e será fácil recordar. Pois bem, saiba que a chance de falhar é imensa: os dias se passam, novos assuntos, novas discussões, novas definições e nenhuma memória ou registro para resgate do que ficou acordado. Importante também considerar a ‘oficialização’ de acordos e prazos, comuns em reuniões, para que posteriormente ambas as partes estejam alinhadas.

Enfim, inúmeras razões óbvias afirmam a importância das atas. Caso ser um bom profissional é seu objetivo, independentemente de sua área de atuação, nunca deixe de relatar qualquer reunião e posteriormente alinhar as partes envolvidas.

Como criar uma ata de forma efetiva

Independentemente da reunião, alguns itens são essenciais no cabeçalho de uma ata:

  • data e hora (ou período): itens indispensáveis para a organização
  • local: facilitará a recordação futura
  • pauta: descrição resumida do que se trata a reunião, facilitando sua identificação
  • envolvidos: identificação dos presentes com o nome e quando necessário, organização, cargo, email, telefone e outros dados

É claro que não existe um modelo mágico perfeito para todas as atas. Cada profissional, área ou até mesmo o próprio objetivo da reunião em si pode fazer com que alterações se façam necessárias.

Visando os objetivos principais de uma ata e sua efetividade, utilizo e recomendo a seguinte organização no corpo da ata:

  • objetivos: toda reunião deve ser preparada e possuir objetivos para se tornar efetiva, trabalhe portanto os itens que deseja executar na reunião e ao longo da mesma, utilize-os para manter o foco dos envolvidos em sua execução – este é o único item que deve estar obrigatoriamente preparado antes da reunião;
  • acompanhamento: no decorrer da reunião vários assuntos deverão ser discutidos, apresentações realizadas, arquivos e documentos entregues, é portanto importante que todas essas ações sejam registradas – quando possível, de forma cronológica;
  • definições: muitas reuniões são realizadas com o objetivo de definições, estas também devem estar adequadamente registradas com o intuito de consolidar tais aos envolvidos e, futuramente, servir de memória para resgate de informações;
  • afazeres: ao longo da reunião, algumas atividades ainda a serem executadas serão levantadas, e, visando a facilidade no expediente, recomenda-se que sejam relatadas separadamente e quando possível, identificando o responsável e prazo por sua execução.

Modelo de ata exemplo

Importante ressaltar que as considerações levantadas neste artigo são resultados puramente de experiências empíricas, isto é, vivenciadas ao longo do dia-a-dia de meu trabalho.

Modelo de ata para download

Facilitando o uso das recomendações feitas no artigo, disponibilizo um modelo de ata a ser utilizado em word e abaixo uma exemplificação de uso da mesma.

19 de janeiro de 2016 - Sem Comentários


Como desenvolver sites utilizando o Bootstrap 3

No artigo ‘Desenvolvendo com Bootstrap 3: um framework front-end que vale a pena!‘ fiz uma breve apresentação do framework apontando seus pontos positivos e negativos, explicando o funcionamento do sistema de grids e como se inicia um projeto.

Mas agora chegou a hora de colocar a mão na massa pra valer!

Em 6 etapas, você desenvolverá o seu primeiro site utilizando o Bootstrap.

1. Fase de concepção

Antes de sair desenvolvendo qualquer página, é importante demandar tempo em entender a real necessidade e objetivo do que será criado.

Esta é uma das fases mais importantes do ciclo de vida de um projeto e constantemente negligenciadas pelos desenvolvedores, no anseio de se ter um produto a ser usado em pouco tempo.

Mas pare e pense: nada adianta uma página bem desenvolvida se ela não atende o objetivo de seu idealizador ou a real necessidade do usuário.

Portanto se inspire, pense, rabisque, faça brainstorm’s, peça opiniões, enfim, demande tempo… o quanto necessário, pois valerá a pena, pode confiar. 😉

Homem rascunhando em papel o desenho de um aplicativo

Como exemplo de caso, desenvolveremos um site com o objetivo de divulgar informações pessoais e profissionais de um indivíduo. A fase de concepção portanto se dá em descobrir quais serão esses dados e quais suas importâncias (para já se ter uma idéia da organização e disposição do conteúdo).

Dados a serem disponibilizados: nome, cargo, foto, resumo, telefone, email, localidade, experiências profissionais, habilidades, paixões e hobbies.

2. Defina a estrutura do layout pensando em grids

Com a concepção elaborada, chegou a hora de definir o layout, isto é, a estrutura visual de seu site.

Lembre-se de sempre pensar em grids! O Bootstrap trabalha com até 12 colunas e seu layout deve respeitar esses limites. (O sistema de grids foi explicado no artigo citado no início desta postagem – ver artigo).

Através de desenhos bem simples (chamados de wireframes) feitos à mão ou no próprio computador, você definirá onde e como ficará cada componente de seu site como o menu de navegação, rodapé, conteúdo e o que mais tiver.

Imagem mostrando o layout sobrepondo os grids do bootstrap

No wireframe acima é possível perceber a distribuição do conteúdo respeitando o sistema de grids (colunas de contorno azul), dividido em 12 porções iguais.

3. Preparando o ambiente

Em sua forma mais simples de utilização, preparar um ambiente utilizando Bootstrap é extremamente fácil e rápido.

Acesse a página oficial do framework (http://www.getbootstrap.com/) e faça o download de sua versão compilada.

Seta apontando para o botão de download do Bootstrap

Descompacte o arquivo zip no local desejado e seu ambiente está pronto! Simples, não? =D

4. Criando a estrutura do HTML

Crie o arquivo “index.html” no diretório raíz e insira o código ‘padrão’ da estrutura do Bootstrap disponível abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Bootstrap - Template básico</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1>Olá, mundo!</h1>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Estrutura pronta, vamos iniciar a codificação do layout.

5. Codificando a estrutura do layout e grids

Para o exemplo, vamos dividir esta etapa em quatro itens:

5.1. Definindo os componentes principais

Nosso layout possui 3 componentes horizontais:

1. cabeçalho: header;
2. seção principal: section;
3. rodapé: footer.

Divisões estruturais da página em divs horizontais

O código a ser inserido dentro do <body></body> de nosso arquivo “index.html” para realizar esta separação é bastante simples:

<header>
	<nav>HEADER > NAV</nav>
</header>

<section>
	<aside>SECTION > ASIDE</aside>
	<article>SECTION > ARTICLE</article>
</section>

<footer>FOOTER</footer>

Com as estruturas horizontais prontas, partimos para codificação de cada componente e suas divisões em grids, ou seja, as divisões em colunas do layout.

5.2. Codificando o cabeçalho (header) com a barra de navegação

O Bootstrap já possui uma barra de navegação (ou navbar) como um componente pronto para uso (e isso significa que você não precisará codificar uma linha sequer para isso). 😉

Basta entrar na documentação disponível no site oficial http://www.getbootstrap.com e procurar pela navbar na página de componentes.

Copie e cole o código da barra de navegação dentro de sua header.

Perceba que a documentação disponibiliza algumas customizações para cada componente, um exemplo é a possibilidade de tornar a barra de navegação fixa ao topo ou utilizá-la com suas cores invertidas, como é o nosso caso.

Dois pontos importantes a serem observados:

1. Para que os elementos fiquem centralizados na página, basta utilizar a classe “container” nos elementos superiores de cada seção.

2. Quando utiliza-se a barra de navegação fixa no topo, é necessário adicionar um espaçamento (margin-top) ao elemento inferior para evitar que a mesma sobreponha a navbar.

O código para nosso exemplo ficará assim:

<header><!-- Cabeçalho -->
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
			  	</button>
			  	<a class="navbar-brand" href="#">nome do site</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container -->
	</nav>
</header><!-- Cabeçalho-fim -->

5.3. Codificando o componente central (section) e seus grids

Chegou o momento de trabalhar efetivamente com os grids (visto que não precisamos dele no cabeçalho, uma vez que utilizamos o componente pronto).

Conforme o desenho do layout, o componente central, definido na estrutura do HTML como section, deverá receber duas colunas:

1. aside (elemento à esquerda): onde virão os detalhes do profissional como a foto, nome, e-mail, telefone, etc;

2. article (elemento à direita): elemento principal, onde virão os textos e descrições mais detalhadas.

Divisão em grids do layout utilizando o bootstrap

Lembrando as regras do sistema de grids: as colunas devem estar inseridas na <div class=”row”></div> e a soma das mesmas não podem ultrapassar 12.

Para o exemplo, utilizaremos a seguinte proporção: ‘md-3’ para o elemento aside e ‘md-9’ para o article (somando 12 no total, preenchendo assim a largura da página).

Obs: foi adicionado o margin-top à section, evitando que a mesma sobreponha a barra de navegação.

O código de nossa section portanto ficará assim:

<section class="container" style="margin-top:100px;">
	<aside class="col-md-3">
		aside
	</aside>
	<article class="col-md-9">
		article
	</article>
</section>

5.4. Codificando o rodapé (footer)

Nosso rodapé (footer) seguirá a mesma lógica do elemento anterior (section), porém as proporções serão invertidas. Utilizaremos ‘md-9’ para a coluna da data de última atualização e ‘md-3’ para a coluna dos créditos.

Tendo o seguinte código:

<footer class="container">
	<hr>
	<div class="row">
		<div class="col-xs-9">Última atualização</div>
		<div class="col-xs-3 text-right">Créditos</div>
	</div>
</footer>

5.5. Código completo

O resultado é o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<title>Bootstrap - Template básico</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<header><!-- Cabeçalho -->
			<nav class="navbar navbar-inverse navbar-fixed-top">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
					  	</button>
					  	<a class="navbar-brand" href="#">nome do site</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">Link 1</a></li>
							<li><a href="#">Link 2</a></li>
							<li><a href="#">Link 3</a></li>
							<li><a href="#">Link 4</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container -->
			</nav>
		</header><!-- Cabeçalho-fim -->

		<section class="container" style="margin-top:100px;">
			<aside class="col-md-3">
				aside
			</aside>
			<article class="col-md-9">
				article
			</article>
		</section>

		<footer class="container">
			<hr>
			<div class="row">
				<div class="col-xs-9">Última atualização</div>
				<div class="col-xs-3 text-right">Créditos</div>
			</div>
		</footer>

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

6. Insira o conteúdo e publique!

Layout codificado, agora basta inserir os conteúdos e publicar.

Resultado final:

Layout final desenvolvido em bootstrap

Ver demo Baixar projeto Repositório no GitHub

O mais legal: seu site está funcional e responsivo para diversos dispositivos com resoluções diferentes, seja smartphones, tablets, notebooks ou desktops.

27 de julho de 2015 - 2 Comentários