Blog de acompanhamento ao projecto de 3º ano de NTC, no ano lectivo de 2010/2011.
15
Abr 11

 NOME

 

 
Para iniciar o processo de selecção do nome do serviço, o grupo começou por olhar para o que já existe. Foram recolhidos os nomes de vários produtos/serviços concorrentes ou, pelo menos, semelhantes. O serviço CloudCanvas tem o nome mais relacionados com os conceitos fundamentais do projecto.
 
Assim, como ponto de partida para a definição de um novo nome, esse nome foi decomposto nos seus dois elementos fundamentais, Cloud e Canvas, que serviram de ponto de partida para o brainstorming de ideias.
Após algumas fases de brainstorming, com sucessiva escolha de nomes e iteração sobre osmesmos, o grupo chegou a alguns nomes possíveis:
 
1. Draw it!
Este nome vale, não só pela simplicidade e poder descritivo, como pela modularidade que possibilidade, abrindo a porta a possíveis expansões futuras ao serviço, dada a facilidade com que se pode substituir a primeira palavra por qualquer outro verbo.
 
2. Canvas 2.0
Apesar de soar algo genérico, este nome envolve na perfeição os conceitos atrás referidos, com o “Canvas” a representar a possibilidade de criação de imagens e o “2.0” a remeter para a comunidade e a comunicação.
 
3. Canvanize!
Este nome pretende fazer o trocadilho entre a expressão “galvanize”, neste caso com o sentido de algo energético ou energizado, e canvas, sugerindo um serviço dinâmico.
 
4. Tabula Rasa
Um nome algo mais “conceptual”. Baseado na teoria de John Locke, segundo a qual todo o conhecimento humano é adquirido. Sendo assim, o ser humano recém-nascido é uma tábua rasa ou um quadro vazio, a ser “preenchido” pela experiência humana. Da mesma forma, o projecto pretende criar uma comunidade inicialmente “vazia”, pronta a ser preenchida com o resultado da criatividade colectiva dos seus utilizadores.
 
5. weDraw
A conjugação das palavras “we” e “draw” passa a ideia de um local onde se desenha em conjunto, tocando assim tanto a componente da comunidade e colaboração, juntamente com a do desenho e arte.
 
No fim a escolha caiu, decisivamente, sobre o nome mais foneticamente distante da inspiração original. Ainda assim, as ideais e conceitos presentes nesse nome encontram-se presentes neste: weDraw.
 
O nome Draw it! seria uma alternativa viável, mas foi descartada pela existência de pelo menos dois projectos que, nesta fase, estariam a considerar nomes semelhantes. A possibilidade de expansão desse nome verifica-se também no nome escolhido.
 
 
LOGO
 
Como havia sido explicado com o nome, quisemos ter presente tanto o conceito de comunidade como o conceito de desenho, não apenas no nome, mas no conjunto inteiro do logotipo em si.
 
Dessa forma, temos aqui representado o aspecto da comunidade através de uma nuvem, que simboliza conceitos internet, partilha e trabalho colaborativo. Juntamente com a nuvem voram adicionadas “pingas” de tinta, deixando transparecer o aspecto artistico de desenho aqui presente.
 
Foram criadas duas versões: acima encontra-se a versão para impressão, abaixo a versão a ser utilizada na web.
 
 
 
 
Construção
O desenvolvimento do logotipo teve como base a fonte Hiruko, a partir dela ajustaram-se as letras com modificações nos vectores, com vista a torná-las mais interessantes.
 
Através de uma combinação de elipses com strokes da própria letra, foi então possivel construir a nuvem para o elemento de fundo ao qual foram adicionadas as gotas.
 
Juntando tudo têm-se então finalmente, o nosso logotipo.
 
 
 
 
 
Hipóteses Abandonadas
A construção de um logotipo implica uma longa fase de várias experiências, aqui pode-se ver testes de estudo de logotipo. Versões que foram testadas mas por uma razão ou outra, como por exemplo falha em transparecer um dos aspectos de desenho ou comunidade, foram abandonadas.
 
 
 
 
Regras de Utilização
A utilização do logotipo deve ser feita em um fundo branco, com bastante espaço em redor e um stroke branco à volta.
Caso essas condições não se verifiquem, ou então o logotipo no seu estado principal não se adequar, utiliza-se o logotipo invertido que se encontra abaixo.
 
 
 
 
Escala de redução
Para manter a boa legibilidade e detalhe do logo, é preferifel que as suas dimensões nunca sejam reduzidas a menos de 25% do original que possui 52 pixels de altura e 118 pixels de largura.
 
 
 
 
 
Margem de Segurança
O logo deve possuir a todas as alturas uma margem de segurança de 10 pixels a toda a sua volta, livre de outros elementos gráficos que não sejam simples manchas de cor.
 
 
 
 
Sistema Visual
 
960gs
Para o desenvolvimento dos layouts da weDraw, recorreu-se ao sistema 960gs (960 grid system) que faz uso de uma área de 960 pixels, adequado para resoluções de 1024x768 e maiores.
 
 
 
O sistema 960gs têm variantes de 12, 16 e 24 colunas. Para o desenvolvimento do layour optou-se pelo sistema de 12 colunas, cada uma com 60 pixels.
 
 
 
Divisão
A vantagem de utilizar o sistema 960gs é a divisão em colunas que pode ser usada em diferentes configurações. No nosso caso, utiliza-se uma divisão de 4x4x4, criando efectivamente um layout de 3 colunas, cada uma com uma dimensão de 300 pixels.
 
 
 
Margens e Goteiras
Entre cada uma das 3 colunas do layout, existe uma goteira de 20 pixels (indicada a magenta) para criar um aspecto mais organizado. Existe também uma margem de 10 pixels em cada um dos lados, criando uma área útil com 940 pixels de largura.
 
 
 
Baseline
De forma a melhor estruturar e organizar os textos e elementos, aplicou-se também uma baseline de 15 pixels. Isto cria uma unidade macro dentro das colunas de 15 pixels de altura com 60 largura, separadas por uma unidade micro de 15 pixels de altura com 20 de largura para melhor alinhar os conteúdos dentro de cada coluna.
 
 
 
Estudo de Cinzentos
Tendo sido construida a grelha é então possivel planificar a disposição do conteúdo no site como pode ser visto. Estas manchas de conteúdo permitem ver de maneira simplificada zonas com grande densidade visual e um alinhamento mais simples dos elementos.
 
 
 
 
Simulação
Tendo depois como base a grelha e os estudos de cinzento, pode-se passar à criação de simulações, dispondo os conteúdos de acordo com as manchas anteriormente indicadas. Consegue-se com este processo criar um layoyt mais limpo, organizado e com um forte balanço estético.
 
 
 
Outros ecrâs
Perfil de Utilizador
Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.
 


Página Principal
Fazendo uso do sistema de 3 colunas, agrupa menus na coluna esquerda, usando as outras duas em junção para conteúdos.
 
 
 
Ferramenta de Desenho
Tendo em conta a necessidade de um canvas grande, nesta página optou-se por usar a largura inteira da janela em vez de apenas os 940 pixels
 
 
 
Página de Ficheiros
Fazendo uso do sistema de 3 colunas, inverte o esquema anterior, usando a barra da direita para menus, e as restantes para os conteúdos.
 
 
 
 
Tipografia
As fontes escolhidas para a utilização na weDraw são a Gill Sans MT para os titulos e a Verdana para os restantes textos. Caso por algum motivo essas fontes não sejam visiveis, usam-se como fontes alternativas/secundárias a Trebuchet MS para os títulos e a Helvetica World para o corpo de texto.
 
 
 
Hieraquia de Fontes
Usando sempre um leading de 15 pixels, as dimensões do texto é de:
 
- 36 pt para os titulos de maior dimensão,
- 18 pt para os elementos na barra de navegação,
- 16 pt para os titulos de menor dimensão
- 12 pt para os textos restantes e links
 
Um caso único é a utilização de texto a 11 pt, exclusivamente no footer a cinzento com informaão weDraw.
 
 
 
 
Sistema Cromático
Seguindo um esquema de cores simples, a utilização de cores é predominantemente azul nos titulos, com preto nos textos e magenta nos links. A cor alternativa de azul deve ser usada exclusivamente na barra inferior, tal como o cinzento escuro deve ser apenas usado no footer.
 
O cinzento mais claro deve ser usado como border de um pixel à volta de imagens com formas regular e para marcar items não activos. Tanto o vermelho como o verde apenas devem ser usados como feedback de interacção.
Por fim o fundo deve estar sempre a branco.
 



Ícones
Tendo adoptado um aspecto mais minimalista, a weDraw não dispões de um número elevado de ícones, no entando ainda existem alguns que importa destacar: As mensagens privadas, o promover e despromover do sistema de reputação e o botão de ver mais.
 
Os estados representados são, o activo ou estado normal, o hover quando se passa o cursor por cima e o inactivo quando não existe interacção de momento.
 
O botão de ver mais não possui estado inactivo pois caso não exista algo mais para ver, ele simplesmente não irá ser visivel.
 
 
 
 
Interacção
A weDraw vai dispor de dois principais mecanismos de interacção. 
O primeiro mecanismo trata-se de uma lightbox para se poder visualizar os ficheiros em dimensão total, iria estar principalmente presente nas páginas de ficheiros. 
 
O segundo mecanismo de interacção trata-se de um slide down menu. Ao tentar salvar um ficheiro criado no svg-edit ou fazer um upload, um efeito de slide irá fazer surgir um novo ecrã no topo da ferramenta para inserir os detalhes e submeter, avisando para fazer o login ou registo caso necessário. Adicionalmente, usam-se progress bars para dar feedback sobre o estado do upload.
 

 

 
 

 

Pode fazer download de uma versão em pdf aqui: weDraw.pdf

Adicionalmente pode visulizar online aqui: LINK


Abril 2011
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2

3
4
5
6
7
8
9

10
11
12
13
14
16

17
18
19
20
21
22

24
25
26
28
29
30


arquivos
pesquisar blog
 
blogs SAPO