Design Responsivo

O design do layout foi pensado para ser utilizado em diferentes dispositivos.

Ao longo do guia são mostradas as directrizes para a construção de uma versão web e de uma versão mobile.

 

 

 

 

 

 

 

 

 

 

 

 

 

Interacção

Nos vídeos é possível ver em tempo real a interação do utilizador através do acesso à plataforma num computador ou num dispositivo móvel.

 

 

 

 

 

 

Estrutura base

O layout foi construído com base numa grelha composta por 11 colunas e com 25 px de goteira.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Página Principal

O layout da página principal é composto por blocos de informação dividos em duas colunas principais.

A coluna do lado esquerdo ocupa seis colunas da grelha, e a coluna do lado direiro é composta por cinco colunas da grelha.

     

     

     

     

     

     

     

     

     

     

     

     

     

Página Secundária

O layout das páginas secundárias já têm apenas um bloco de informação composto pelas 11 colunas.

O layout da versão mobile é apenas composto por uma coluna principal.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Página Principal

No layout da versão web os blocos de informação estão todos na mesma coluna da grelha.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Página Secundária

O layout das páginas secundárias são compostos por um único bloco de informação.

As cores primárias são as cores que predominantemente são utilizadas no design do layout.

Estas cores podem ser encontradas nos links, nos botões, e também nos menus.

As cores secundárias são utilizadas sempre que é necessário destaquar algum conteúdo. As mesmas vão desde azul a dois tons cinza e um amarelo que geralmente é usado como parte da legenda no calendário.

O azul mais claro é o azul usado no actual logótipo da empresa e pode-se encontrar nos botões de acção.

Por outro lado, o azul mais escuro é a cor usada na barra superior (header) que fica visível em todas as páginas.

     

     

     

Títulos

O título principal é usado na barra superior, mas também pode ser utilizado sempre que for necessário um grande destaque ao título.

 

Características:

• Open Sans Light 30pt

• Alinhado à esquerda

• Letter-spacing 1 px

• Padding 20 px

 

     

     

     

Um título secundário é geralmente usado como título das tabs ou sempre que é definido uma pequena secção de conteúdos. As suas características são as mesmas do texto das opções que se encontram na barra superior.

 

Características:

• Open Sans Semibold 18pt ou 24pt

• Letter-spacing 1 px

• Padding 20 px

 

     

     

     

Páragrafo

Um parágrafo de texto é utilizado no layout sempre que for necessário introduzir informação relevante através de texto, informação essa que se destina a ajudar o utilizador nas suas tarefas/projectos diários.

 

Características:

• Open Sans Regular 13pt

• Justificado alinhado à esquerda

• Line-height 150%

     

     

     

     

     

     

     

     

     

Legendas

As legendas são textos de ajuda ao utilizador, e têm como principal função explicar o que deve ele deve fazer para concluir determinada tarefa. Por exemplo, no preenchimento de formulários.

 

Características:

• Open Sans Regular 11pt

• Alinhado à esquerda

• Padding 18 px

Um botão de confirmação é um botão que têm como função principal uma acção obrigatória e distinta. Este tipo de botões estão sempre aos pares, visto que um normalmente funciona como confirmação, e o outro como anulação.

     

     

Web

Os botões primários têm uma altura e largura mínima de 36 px e 113 px respectivamente.

A tipografia do texto dos botões é a Open Sans Regular, tamanho 14 pt.

     

     

     

     

     

     

     

     

     

     

     

     

Mobile

Num ecrã mais pequeno onde não existe rato é necessário aumentar o tamanho dos elementos por forma ao utilizador os conseguir seleccionar com o dedo. Assim, os botões em mobile passam a ter uma altura e largura mínimas de 189x53px.

O tamanho mínimo a ser usado num ecrã mobile é de 5 pt.

Os botões de acção são utilizados sempre que é preciso um botão para uma função numa interface do UIS. Os botões podem ter duas larguras diferentes consoante a quantidade de letras do botão.

     

     

Web

Os botões secundários têm uma altura mínima de 36 px e uma largura variável consoante a quantidade de texto.

A tipografia é a mesma para todo o tipo de botões, Open Sans Regular, tamanho 14 pt.

     

     

     

     

     

     

     

     

     

     

Mobile

A tipografia e o tamanho dos botões mantém-se o mesmo dos botões de confirmação.

Os links direccionam o utilizador para outra página, e podem estar inseridos em tabelas, textos, ou para indicar um ficheiro anexo.

Os links são sempre Open Sans Semibold Underline, e sempre que o rato passa por cima mudam de cor.

Estas características são válidas tanto para web como para mobile.

 

Web

Os menus têm como principal função levar o utilizador para páginas secundárias através de uma lista de acções que disponibilizam.

Essa lista aparece em destaque sobre os restantes elementos aparecendo sempre sobre os mesmos.

   

   

   

Mobile

O menu em mobile passa a ser um ícone de três barras, como mostra a figura. Contrariamente à página web, quando o menu é seleccionado abre as opções na vertical ocupando cinco colunas da grelha.

A tipografia usada é Open Sans Light, 9 pt e as linhas das opções do menu têm 15 px de padding.

Web

Um menu pode ter campos activos ou inactivos consoante as permições do utilizador. Por exemplo, um project manager têm funções que um developer não têm, logo não fazia sentido os dois utilizadores terem acesso às mesmas opções uma vez que não as iria utilizar.

     

     

 

Cada item do menu é limitado a uma única linha de texto que descreve a acção ou o nome da página à qual o utilizador será encaminhado se seleccionar o item. Além de texto os items também podem conter marcas de selecção, quando é necessário seleccionar mais que um campo do menu.

     

     

 

Este tipo de menus aparece geralmente no dashboard, e funciona como o sistema de tabs. O utilizador sempre que quiser aceder à informação de uma destas três opções basta seleccioná-las.

Mobile

O menu quando é seleccionado fica com fundo de outra cor, e abre as opções da esquerda para a direita.

Os campos do menu a cinza claro são os que o utilizador logado não têm permissões para aceder.

As opções de menu que têm submenus associadas estão marcadas com >.

   

   

   

   

   

   

O submenu substituí o menu anterior, ocupando o mesmo no ecrã.

   

   

   

   

   

   

   

   

   

   

   

Para voltar ao menu principal o utilizador só tem que seleccionar a opção < voltar.

   

Web

A tabela da figura é um exemplo de uma lista de pessoas/trabalhadores da empresa.

 

Características cabeçalho:

• Open Sans Semibold 14 pt

• Alinhado ao centro

• Padding 20 px

 

Características das linhas:

• Open Sans Semibold 12 pt

• Alinhado ao centro

• Padding 20 px

 

 

 

As tabelas podem conter thumbnails ou apenas texto, sendo que o mesmo pode ser um link direccional ou não.

Quando um dos campos da tabela não aparece disponível para selecção é porque o utilizador em questão não tem permissões para realizar essa acção. Visualmente o campo fica com uma opacidade de 40% oq ue o diferencia dos restantes.

Sempre que existe um campo que não têm informação associada em determinada coluna e linha essa quebra é referenciada por ......

     

     

     

     

     

Ordenação

O ícon > ordena a lista pelo campo seleccionado, como mostra a figura, a lista está ordenada por ordem decrescente de departamento.

     

     

     

     

     

     

     

     

Selecção

O utilizador pode sempre seleccionar um elemento da tabela caso o mesmo seja um link direcional. No caso da figura, o username direcciona o utilizador para a página pessoal de cada colaborador.

     

     

     

     

     

     

     

     

     

Sempre que a tabela tiver texto sublinhado em itálico significa que o mesmo é um link direccional e que irá conduzir o utilizador a outra página ou a mais informação.

     

     

     

     

     

Mobile

Em mobile todas as tabelas passam a ter a informação na vertical como mostra a figura.

Nos casos em que existem figuras nas tabelas, essas imagens desaparecem e só fica informação útil.

Os ícons podem variar de tamanho consoante a plataforma em que o UIS é acedido. Desta forma podem aumentar de tamanho de 23 em 23 px, sendo que o ícon mais pequeno é dessa medida.

 

Características de utilização:

• Formato PNG com fundo transparente

• Tamanho do ficheiro inferior a 10kb, e a 72dpi

• Não pode incluir sombras

• Centrado dentro das áreas indicadas na figura

 

A listagem de ícons que se seguem foi escolhida para serem usados em todo UIS, sempre que seja necessário a utilização de um ícon no seu design.

Foi mantido o design minimalista, sendo que os ícons serão todos reprentados a preto num fundo branco ou claro e sem contornos ou cores adicionais.

Nos casos em que o fundo têm uma cor mais escura a cor do ícon passa para branco como está exemplificado na figura.

Os formulários de dados não têm altura e largura fixas uma vez que são usados e adaptados ao layout em forma de pop-ups.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

No exemplo da figura está um formulário de edição de dados do utilizador, onde ele pode editar os seus dados pessoais.

 

Características:

• Open Sans Regular 14px

• Alinhado à esquerda

• Padding 20 px

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Quando o utilizador tenta realizar uma acção existem duas possibilidades de resposta à mesma. Sendo que a resposta pode ser positiva "O seu pedido foi realizado com sucesso!", ou negativa "Lamentamos, mas não é possível realizar o seu pedido!"

 

Características:

• Open Sans Regular 14px

• Alinhado ao centro

• Padding 20 px

 

Os pop-ups não têm largura e altura fixas, uma vez que esses valores dependem da quantidade de texto necessária para transmitir a mensagem, e quando necessário ocupam a largura total do ecrã.

No exemplo da figura o pop-up têm uma altura de 61 px e uma largura de 356 px.

     

     

 

 

 

 

 

 

Mobile

As mensagens em forma de pop-ups ou formulários na versão mobile ocupam todo o espaço do ecrã.

No caso das mensagens de erro elas ficam visíveis durante algusn segundos e depois desaparecem, pelo que nesta versão o utilizador não têm de fechar a janela.

Web

A primeira página do UIS foi pensada em blocos de informação e com um menu fixo.

A informação distribuída em blocos fica mais organizada e o utilizador de forma directa pode aceder ao que lhe é mais importante.

Desta forma consegue visualizar tudo o que precisa para o seu trabalho logo na primeira página do sistema.

 

 

A largura dos blocos é calculada através da lagrura do ecrã menos o valor de padding 25px entre eles.

     

     

     

     

     

     

     

 

 

A página principal, o dashboard, está dividida em blocos de informação com largura fixa e altura variável, e podem ser reorganizados segundo as preferências do utilizador.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Sempre que a opção MENU é seleccinada é aberto um bloco na horizontal com as opções para o utilizador seleccionar.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Uma subpágina têm a informação dividida em dois blocos. O bloco do lado esquerdo é onde fica a informação principal, a secundária fica no bloco mais pequeno à direita.

     

     

     

     

     

     

     

     

     

     

     

     

     

Numa subpágina vão existir botões que vão ter como acção directa um pop-up.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Mobile

Em mobile apenas existe uma única coluna onde têm toda a informação. Desta forma a informação que estava na coluna da direita em web, passa para a coluna da esquerda.

O padding em mobile é de 15px.

Web

A barra de cabeçalho permite que seja feito o check-in quase automático, bem como aceder às subpáginas através do MENU.

No check-in existe um contador que vai contando o tempo de trabalho do colaborador.

Na barra superior o utilizador também pode fazer uma pesquisa por palavras-chave através do SEARCH.

     

     

     

Mobile

No dashboard mantém-se a informação em blocos, com leitura apenas na vertical.

Nas subpáginas passa a existir um único bloco vertical onde está toda a informação dessa página.

O Dahsboard é a página principal, onde o utilizador têm acesso rápido a tudo o que necessita para trabalhar nesta plataforma. Os blocos podem ser ordenados segundo as preferências de cada utilizador.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

O utilizador têm que fazer o Check-in/Check-out. sempre que estiver a trabalhar na empresa.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

O Menu no dashboard tem seis opções de escolha para o utilizador.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

O menu não é fixo, ou seja, o utilizador pode escolher arrastá-lo para outro local.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

O menu pode ficar visível onde o utilizador o colocar na página.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

O utilizador também pode fazer pesquisa através de palavras-chave.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Os blocos podem ser minimizados ou maximizados segundo a vontade do utilizador.

O utilizador pode actualizar as suas tarefas do redmine sem ter que sair da página principal.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Para aceder às subpáginas o utilizador têm que ir ao menu e escolher uma opção.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

A Subpágina Calendário está divida em Férias e em Faltas.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

A Subpágina Calendário está divida em Férias e em Faltas.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

Para marcar férias aparece um pop-up onde o utilizador pode seleccionar os dias que pretende pedir.

Quando o pedido de férias é confirmado aparece uma mensagem de confirmação do pedido

O UIS em mobile têm as mesmas funcionalidades que em web. O design do layout foi apenas adaptado a um ecrã mais pequeno.