Issuu on Google+

Faculdade de Letras da Universidade do Porto Ciências da Comunicação CDI

Relatório de modelos de páginas As wireframes

1


Para a realização das wireframes começamos por fazer uma pesquisa de sites, de forma a termos uma melhor noção e inspiração para o desenvolvimento da nossa própria página. Um dos sites que acabou por influenciar as decisões que tomamos foi a pagina da Universidade do Porto, que analisamos para o trabalho anterior. Após esta pesquisa esquematizamos os nossos modelos de página manualmente, atribui-mos-lhes as devidas medidas, títulos e áreas e, de seguida, com a ajuda do freehand, transformamos toda essa informação nos wireframes que apresentamos abaixo. Começamos por definir o tamanho da página modelo: 1200x700px. Decidimos também que iríamos realizar quatro modelos de páginas: homepage, página de informação, página de infografia e página álbum. Depois, ao começar a esquematização, definimos desde logo as áreas estáticas, ou seja as caixas de texto que se irão manter em todas as páginas do site, como: o cabeçalho, a barra de navegação e o footer; e só depois nos debruçamos sobre as áreas mais especificas de cada modelo. Relativamente à hierarquização pretendemos que o titulo da página web ou cabeçalho se destaque, por isso atribui-mos-lhe uma área de 70x236px. Este cabeçalho ou logotipo foi desenvolvido por nós no Freehand e por isso mesmo não tem um lettering definido. De forma geral a letra utilizada ao longo da página será o Arial 12 e em tom branco (White:#FFFFFF), apenas os títulos e as legendas de imagens deverão ter tamanhos diferentes (18 e 8 respectivamente). A barra de navegação será distinta através da cor de fundo (Red3: #CD0000), que irá contrastar com os tons negros e neutros (Black: #000000 e Gainsboro: #DCDCDC) do background da página. Neste caso o tamanho da letra será 20. A barra de navegação é constituída por 5 diferentes categorias que irão dar lugar, aquando do “pisar” do rato às subcategorias de cada um desses temas. Isto pretende facilitar a navegação de qualquer utilizador. O Footer irá corresponder à informação e contacto do(s) criador(es) da página web, e será bastante discreta e com um tamanho de letra pequeno (10), de forma a não se destacar, uma vez que corresponde a conteúdo secundário. A nível de imagens estas serão utilizadas essencialmente nos modelos de páginas de informação e álbum, bem como na homepage. É obvio que todas estas opções já tomadas poderão ser alvo de algumas alterações no decorrer da construção da página web.

Modelo de página Homepage

2


Este modelo de página, considerado muitas vezes o modelo mais importante do site, tem uma constituição bastante básica. A estrutura estática que já referi anteriormente (cabeçalho, barra de navegação e footer) e depois, no local referente à imagem, pretendemos através da utilização do flash, que vão surgindo imagens aleatórios sobre o tema do projecto. Estas imagens terão sempre presente uma frase que acabará por ser o “lema” da página: Fashion is made to become unfashionable (Coco Chanel).

Modelo de página de informação

Este será o modelo mais utilizado ao longo da página web. É constituído pelos elementos estáticos, mais uma vez, mas também por uma caixa de texto que irá incluir o texto principal e uma imagem ou vídeo que completará esse conteúdo.

Modelo de página de infografia

3


Este modelo irá surgir apenas numa ocasião, na qual irá constar a infografia. Todos os outros elementos se irão manter, apenas a caixa central será diferente. Esta irá incluir duas caixas de texto, uma que incluirá a própria infografia e outra que será uma espécie de legenda, que irá incluir informação adicional sobre a mesma. O tema da infografia será a História da Moda, pretendemos assim realizar em flash uma barra cronológica que irá espelhar as principais características de cada década, de forma simples mas dinâmica.

Modelo de página álbum

Este modelo será utilizado na categoria “Eventos Nacionais” e irá incluir um conjunto de fotografias sobre essa temática. Mais uma vez alguns elementos irão manter as suas posições, apenas a caixa central sofrerá alterações. Esta incluirá um conjunto de pequenas caixas de texto agregadas (24 ao todo) que representam as fotografias em pequeno e que ao clicar serão apresentadas (com dimensões obviamente maiores, na caixa de texto ao lado.

Ana Margarida Silva Teresa Teixeira

turma 2, 2º ano

4


relatorio modelos de pagina