Produção de Websites. Composição Web. Artur M. Arsénio. Engenharia Informá:ca / Informá:ca Web 2014/15

Tamanho: px

Começar a partir da página:

Download "Produção de Websites. Composição Web. Artur M. Arsénio. Engenharia Informá:ca / Informá:ca Web 2014/15"

João Lucas Farias Lobo
8 Há anos
Visualizações:

1 Produção de Websites Composição Web Engenharia Informá:ca / Informá:ca Web 2014/15 Artur M. Arsénio

2 Planeamento Estratégico Análise da informação, a par:r de um briefing com o cliente Detectar corretamente o obje:vo do projeto é essencial para um bom planeamento, de modo que as ações sejam tomadas de forma correta. Importante para iden:ficar as funcionalidades que o cliente quer ver implementadas no site, O visitante procura por conteúdos O primeiro passo estratégico é definir bem todas as informações que o site terá, definir claramente a arquitectura de informação do site e por úl:mo, o design visual do site Visual deve ter um aspecto profissional seguindo pelo menos os conceitos básicos do design como aproximação, contraste, alinhamento, entre outros. É necessário definir o público alvo do website, o objec:vo, os serviços oferecidos. A par:r desta informação, e de outra relevante ao projeto, será definida a estrutura do site, ou Arquitectura de informação Layout do Website Tecnologias a usar 2

3 Estrutura e Layout do Website Estrutura ou Arquitectura da Informação Usabilidade: tornar a experiência do u:lizador o mais confortável e fácil possível, para que obtenha facilmente a informação ou serviço desejado Exemplo: definição do número máximo de clicks desde a homepage até aceder a conteúdo desejado no site Layout O layout precisa transmi:r a informação desejada com eficiência. É preciso que o layout seja um elemento de comunicação com o u:lizador Que seja condizente com o objec:vo do site. Cada elemento inserido num website deve ter um obje:vo, a perfeição de um website é a:ngida quando não há nada a ser re:rado nem a ser inserido. A maioria dos layouts an:gos dos sites da Web eram feitos com tabelas na linguagem HTML, porém esta forma é inapropriada pois tabelas devem ser u:lizadas apenas para exibir dados tabulados. 3

4 Esté:ca do Website Na web, a esté:ca deve ser moldada ao disposi:vo que acede ao website Na web não é possível prever como o u:lizador final verá a esté:ca do produto, pois a aparência pode e deve mudar radicalmente de acordo com o sistema opera:vo u:lizado, configurações pessoais, browsers, resoluções do ecrâ, e disposi:vos, como telemóveis, TV, impressora, etc. Por este mo:vo, a estrutura (HTML) com a qual a informação será exposta deve trabalhar independentemente da formatação es:lís:ca (CSS) e do comportamento (scripts), que são recomendações do W3C. 4

5 Wireframes Wireframes: Fazem a ponte entre a Arquitectura da Informação é o Visual Gráfico wireframe conecta a estrutura conceptual subjacente ao design visual do site esquema de página modelo, é um guia visual que representa a estrutura do esqueleto de um site Wireframes são criados com a finalidade de organizar elementos para melhor cumprir um propósito par:cular O wireframe descreve o layout da página ou da disposição do conteúdo do site, incluindo elementos de interface e sistemas de navegação, e como eles funcionam juntos O wireframe geralmente não inclui es:lo, cores, ou gráficos, já que o foco principal está na funcionalidade, comportamento, e prioridade de conteúdos concentra- se no que a o site faz, não no que parece Wireframes pode ser desenhos a lápis ou desenhos num quadro branco, ou podem ser produzidos por meio de uma ampla gama de aplicações de soiware gratuito ou comercial. 5

6 Focus dos Wireframes Um processo itera:vo Maneira eficaz de fazer protó:pos rápidos de páginas, avaliando a eficácia de um conceito de design. Normalmente começa- se com fluxogramas de alto nível estruturais de trabalho semelhante ou mapas de site e desenhos de tela Concentra- se: Na gama de funções disponíveis Nas prioridades rela:vas da informação e funções Nas regras para a exibição de certos :pos de informação No efeito de diferentes cenários no ecrâ Em estabelecer a funcionalidade, e as relações entre os diferentes modelos de tela de um site 6

7 Wireframes: Exemplo 1 7

8 Wireframes: Exemplo 2 8

9 Wireframes: Exemplo 2 (cont.) 9

10 Wireframes: Exemplo 3 10

11 Elementos das Wireframes Design da informação O design da informação é a apresentação por posicionamento e priorização de informações de uma forma que facilita a compreensão. O design da informação é uma área de design gráfico, para exibir informações de forma eficaz e com uma comunicação clara. Para sites, os elementos de informação devem ser organizados de uma forma que reflete as metas e tarefas do u:lizador. Design de navegação O sistema de navegação oferece um conjunto de elementos de tela que permitem o u:lizador se mova de uma página para outra através do site. O design de navegação deve comunicar a relação entre as ligações que contém, de modo que os u:lizadores percebam as opções que têm para navegar no site. Muitas vezes, os sites contêm vários sistemas de navegação, como um sistema de navegação global, navegação local, navegação complementar, navegação contextual, entre outras. Design de interface Design da interface de U:lizador inclui a seleção e organização de elementos de interface para permi:r que os u:lizadores interajam com a funcionalidade do sistema O obje:vo é facilitar a usabilidade e eficiência, tanto quanto possível. Os elementos comuns encontrados em design de interface são botões de ação, campos de texto, caixas de seleção, botões de rádio e menus drop- down. 11

12 Templates na Web Content Management System Joomla hpps:// list=plk9ni6if90lqk1xodoseac1pwrqbkbmc0 Outros sites hpp://bitnami.org 12

Documentos relacionados

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO Arte X Engenharia Desenvolver Sistema Web é arte? A Web oferece espaço para arte...... mas os usuários também desejam