[AJUDA] Criar um WEBSITE! Parte 2
3 participantes
Ciberotic™ :: ÁREA GRÁFICA :: Tutoriais
Página 1 de 1
[AJUDA] Criar um WEBSITE! Parte 2
1. PLANEAMENTO
1.1. BRIEFING
Briefing é o conjunto de informações que deverão ser obtidas junto do cliente, de forma a serem definidos os objetivos do projeto.
Perguntas como as seguintes podem-se revelar de extrema importância:
Qual o ramo de atuação da empresa e quais os serviços oferecidos?
Quem é o público-alvo?
Qual o objetivo do site?
Que imagem se pretende transmitir para o utilizador/cliente?
Qual o conteúdo do site? (tópicos)
1.2. ESTRUTURAÇÃO E ORGANIZAÇÃO DA INFORMAÇÃO
Depois de obter as principais informações, define-se o mapa do site e a hierarquia dos menus de
navegação de forma a alcançar uma navegação fácil e intuitiva. Para o fazer, primeiro deve-se organizar os dados fornecidos pelo cliente em grupos que estejam relacionados entre si e depois agrupá-los em áreas.
Fig. 1 _ exemplo de um diagrama de navegação de um site.
Releases e Press Kit foram agrupados em Imprensa e a secção Quem Somos foi associada à página de Contacto, mesmo não estando contida na hierarquia de Quem Somos. Isso significa que as páginas de Quem Somos podem levar até a página de Contacto, através de uma mensagem ou hiperlink.
Os diagramas de navegação ajudam os designers a identificar e organizar os caminhos que o utilizador terá que percorrer até encontrar a informação que deseja. Uma boa arquitetura de informação é um dos principais fatores para alcançar sites eficientes e persuasivos.
1.3. WIREFRAMES / PESO DO CONTEÚDO
A arquitetura de informação organiza a hierarquia de páginas, e dentro de cada página os elementos que as constituem de acordo com a sua importância.
Assim, depois de criado e aprovado o diagrama de navegação do site, passamos, então, à fase seguinte: determinar o peso do conteúdo, ou seja, determinar a relevância dos elementos de interface, como blocos de texto, menu, imagens, etc.
Para isso podemos utilizar um wireframe, que consiste numa espécie de "esboço" da página de Internet, em que nos devemos preocupar com a funcionalidade, sem perder muito tempo com as questões estéticas.
Os wireframes têm como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout [branding – marca, logótipo, slogan –, publicidade,
navegação/botões, títulos da página, gráficos do cabeçalho, e rodapés, incluindo copyrights] e a sua relação com os demais elementos formadores do todo.
1.3.1. PRINCÍPIOS PARA PROJECTAR UM BOM WIREFRAME
Desenhar todos os elementos, incluindo imagens e elementos de formulário, em tamanho real;
Respeitar uma grelha e distribuir corretamente o conteúdo;
Usar exemplos de textos que façam sentido ao conteúdo;
Evidenciar o conteúdo mais relevante;
Agrupar corretamente as informações relacionadas;
Usar corretamente e coerentemente os títulos das páginas e secções, de forma a mostrar ao utilizador o que ele irá encontrar numa determinada página ou secção.
1.3.2. PADRÃO UNIVERSAL DE INTERFACE
Fig. 2 _ Modelo de interface universal, mais utilizado na Internet
Esta estrutura de página é uma convenção de design muito usada. É baseada em diversos estudos que
analisam quais os primeiros elementos que os utilizadores visualizam e procuram quando acedem a determinado site.
Como a maioria dos sites usam os mesmos elementos nas mesmas disposições, esses padrões tornaram-se convenções de design. Se por um lado respeitar este modelo garante uma compreensão mais rápida de um site, por outro a criatividade e a diferenciação revelam-se muito importantes na cativação da atenção do utilizador.
EM BREVE MAIS
Créditos: JUFASA
1.1. BRIEFING
Briefing é o conjunto de informações que deverão ser obtidas junto do cliente, de forma a serem definidos os objetivos do projeto.
Perguntas como as seguintes podem-se revelar de extrema importância:
Qual o ramo de atuação da empresa e quais os serviços oferecidos?
Quem é o público-alvo?
Qual o objetivo do site?
Que imagem se pretende transmitir para o utilizador/cliente?
Qual o conteúdo do site? (tópicos)
1.2. ESTRUTURAÇÃO E ORGANIZAÇÃO DA INFORMAÇÃO
Depois de obter as principais informações, define-se o mapa do site e a hierarquia dos menus de
navegação de forma a alcançar uma navegação fácil e intuitiva. Para o fazer, primeiro deve-se organizar os dados fornecidos pelo cliente em grupos que estejam relacionados entre si e depois agrupá-los em áreas.
Fig. 1 _ exemplo de um diagrama de navegação de um site.
Releases e Press Kit foram agrupados em Imprensa e a secção Quem Somos foi associada à página de Contacto, mesmo não estando contida na hierarquia de Quem Somos. Isso significa que as páginas de Quem Somos podem levar até a página de Contacto, através de uma mensagem ou hiperlink.
Os diagramas de navegação ajudam os designers a identificar e organizar os caminhos que o utilizador terá que percorrer até encontrar a informação que deseja. Uma boa arquitetura de informação é um dos principais fatores para alcançar sites eficientes e persuasivos.
1.3. WIREFRAMES / PESO DO CONTEÚDO
A arquitetura de informação organiza a hierarquia de páginas, e dentro de cada página os elementos que as constituem de acordo com a sua importância.
Assim, depois de criado e aprovado o diagrama de navegação do site, passamos, então, à fase seguinte: determinar o peso do conteúdo, ou seja, determinar a relevância dos elementos de interface, como blocos de texto, menu, imagens, etc.
Para isso podemos utilizar um wireframe, que consiste numa espécie de "esboço" da página de Internet, em que nos devemos preocupar com a funcionalidade, sem perder muito tempo com as questões estéticas.
Os wireframes têm como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout [branding – marca, logótipo, slogan –, publicidade,
navegação/botões, títulos da página, gráficos do cabeçalho, e rodapés, incluindo copyrights] e a sua relação com os demais elementos formadores do todo.
1.3.1. PRINCÍPIOS PARA PROJECTAR UM BOM WIREFRAME
Desenhar todos os elementos, incluindo imagens e elementos de formulário, em tamanho real;
Respeitar uma grelha e distribuir corretamente o conteúdo;
Usar exemplos de textos que façam sentido ao conteúdo;
Evidenciar o conteúdo mais relevante;
Agrupar corretamente as informações relacionadas;
Usar corretamente e coerentemente os títulos das páginas e secções, de forma a mostrar ao utilizador o que ele irá encontrar numa determinada página ou secção.
1.3.2. PADRÃO UNIVERSAL DE INTERFACE
Fig. 2 _ Modelo de interface universal, mais utilizado na Internet
Esta estrutura de página é uma convenção de design muito usada. É baseada em diversos estudos que
analisam quais os primeiros elementos que os utilizadores visualizam e procuram quando acedem a determinado site.
Como a maioria dos sites usam os mesmos elementos nas mesmas disposições, esses padrões tornaram-se convenções de design. Se por um lado respeitar este modelo garante uma compreensão mais rápida de um site, por outro a criatividade e a diferenciação revelam-se muito importantes na cativação da atenção do utilizador.
EM BREVE MAIS
Créditos: JUFASA
JUFASA- Administrador Principal
- Mensagens : 454
Pontos : 12806
Reputação : 45
Idade : 27
Re: [AJUDA] Criar um WEBSITE! Parte 2
Ótimo tutorial JUSAFA.
Esse tutorial ajudará muitos membros iniciantes,
Estou aprendendo isso no meu curso!
Obrigado por postar e meda uma forcinha.
Cordialmente,
tour.
Esse tutorial ajudará muitos membros iniciantes,
Estou aprendendo isso no meu curso!
Obrigado por postar e meda uma forcinha.
Ganhou meu "+"
Cordialmente,
tour.
tour.- DIX Novato
- Mensagens : 4
Pontos : 17
Reputação : 0
Idade : 27
Re: [AJUDA] Criar um WEBSITE! Parte 2
Gostei Do Post Levo Meu 'Thanks'
Tópico Bem Organizado.
Tópico Bem Organizado.
Exemplo- DIX Novato
- Mensagens : 45
Pontos : 51
Reputação : 0
Idade : 27
Tópicos semelhantes
» [AJUDA] Criar um WEBSITE! Parte 1
» Criar intens Até +9
» [Tutorial] Photoshop Criar Sign (Imagem)
» Ajuda COm CMS
» Ajuda Com DB CAVALO
» Criar intens Até +9
» [Tutorial] Photoshop Criar Sign (Imagem)
» Ajuda COm CMS
» Ajuda Com DB CAVALO
Ciberotic™ :: ÁREA GRÁFICA :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Qui Set 13, 2012 10:50 pm por -Park
» [Super Slime Soccer] Gameplay #1
Sáb Ago 25, 2012 11:39 am por Rafasted
» [SERTANEJO] João Lucas e Marcelo
Sáb Ago 25, 2012 4:08 am por Exemplo
» [Offtopic] Humor > Elisabete
Sáb Ago 25, 2012 4:06 am por Exemplo
» Frases Engraçadas
Sáb Ago 25, 2012 4:05 am por Exemplo
» Forever Alone !
Sáb Ago 25, 2012 4:03 am por Exemplo
» Só um Meme !
Sáb Ago 25, 2012 4:02 am por Exemplo
» Cuspida Troll !
Sáb Ago 25, 2012 4:01 am por Exemplo
» Nerd Nível máximo !
Sáb Ago 25, 2012 4:00 am por Exemplo