Ftin m dulo de webdesign
This presentation is the property of its rightful owner.
Sponsored Links
1 / 52

FTIN - Módulo de WebDesign PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

FTIN - Módulo de WebDesign. Prof. Iran Pontes. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA. PHOTOSHOP. PHOTOSHOP - SLICE. Slice é uma ferramenta de recorte no Photoshop. PHOTOSHOP - SLICE. Selecionar a ferramenta > Pressionar com o mouse a área que será recortada. PHOTOSHOP - SLICE.

Download Presentation

FTIN - Módulo de WebDesign

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Ftin m dulo de webdesign

FTIN - Módulo de WebDesign

Prof. Iran Pontes


Photoshop

FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

PHOTOSHOP


Photoshop slice

PHOTOSHOP - SLICE

  • Slice é uma ferramenta de recorte no Photoshop


Photoshop slice1

PHOTOSHOP - SLICE

  • Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.


Photoshop slice2

PHOTOSHOP - SLICE

  • Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.


Photoshop slice3

PHOTOSHOP - SLICE

Salvar as imagens recortadas:

Menu file>

Save for web


Photoshop slice4

PHOTOSHOP - SLICE

Formatação:

JPEG >

72 (quality)> Save


Photoshop slice5

PHOTOSHOP - SLICE

Escolha a pasta >

Imagesonly (salva apenas as imagens)

HTML andImages (Salva html do layout e imagens)

HTML Only (Salva apena o html)


Photoshop slice6

PHOTOSHOP - SLICE


Criando layouts para web

FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

Criando layouts para web


Briefing

BRIEFING

  • Brief (eng) = Dossiê. O briefing ou brífingue[1] é um conjunto de informações, umacoleta de dados passadasemumareuniãoparaodesenvolvimento de um trabalho, documento, sendomuitoutilizadasemAdministração, RelaçõesPúblicasenaPublicidade.


Briefing1

BRIEFING

  • O briefing éumapeça fundamental para a elaboraçãoedesenvolvimento de um projeto. Um elementochaveparaoplanejamento de todas as etapas do projeto de acordo com as necessidades do cliente.


Como elaborar um briefing

COMO ELABORAR UM BRIEFING

  • Tarefa

  • Projeto

  • Negócio

  • Comunicação

  • Estratégia

  • Publico-alvo


Como elaborar um briefing1

COMO ELABORAR UM BRIEFING

  • Tarefa

    • Informações detalhadas do que será realizado no projeto.

    • Ex: Criação do site institucional da Empresa MP - Móveis Planejados


Como elaborar um briefing2

COMO ELABORAR UM BRIEFING

  • Projeto

    • Objetivos do Projeto: Quais os principais objetivos que o projeto prente alcançar. Defina tópicos e metas que sejam cumpríveis baseando na finalidade

    • Ex: Expor o conteúdo institucional da empresa na internet para prospecção de clientes.


Como elaborar um briefing3

COMO ELABORAR UM BRIEFING

  • Negócio

    • Objetivos do Negócio: Qual a finalidade do negócio em questão, qual os produtos e serviços?

    • Ex: Ser uma empresa líder no mercado de móveis planejados. Móveis corporativos e Residencias de qualidade.


Como elaborar um briefing4

COMO ELABORAR UM BRIEFING

  • Comunicação

    • Quais os meios de comunicação será utilizado para atingir os objetivos do negócio.

    • Ex: Divulgação em Redes sociais (Twitter e Facebook)


Como elaborar um briefing5

COMO ELABORAR UM BRIEFING

  • Estratégia

    • Descrição sobre o que será feito para resolver o problema de marketing que levou o cliente a desenvolver esse projeto.

    • Ex: Criar e explorar novos mercados para a marca através do ambiente virtual. Criar relacionamento via redes sociais e divulgar o negócio seguindo o plano de comunicação.


Como elaborar um briefing6

COMO ELABORAR UM BRIEFING

  • Público-alvo

    • Descrição do público a ser atingido com a realização do projeto.

    • Ex: Adultos de 25-35 Anos, Masculino e Feminino


Arquitetura da informa o

ARQUITETURA DA INFORMAÇÃO

  • “Organizo sites na internet para que usuários possam encontrar o que procuram.” Peter Morville

  • Ela é o esquema do site em cima do qual todos os outros aspectos são construídos forma, função, metáfora, navegação e interface, interação e design visual.” (SHIPLE, 2001)


Arquitetura da informa o1

ARQUITETURA DA INFORMAÇÃO

UNIBRATEC – CARLOS JOSÉ


Arquitetura da informa o2

ARQUITETURA DA INFORMAÇÃO

RESUMINDO:

  • Arquitetura de informação tem como objetivo a construção de websites fáceis de usar, que preencham necessidades dos clientes e objetivos dos usuários. (Carlos José)


Arquitetura da informa o taxonomia

ARQUITETURA DA INFORMAÇÃO - TAXONOMIA

  • Classificar informação em uma hierarquia (árvore),utilizando o relacionamento pai-filho (generalização ou “tipo-de”).

    Web Semântica - A internet do Futuro (Karin Breitman)


Arquitetura da informa o wireframe

ARQUITETURA DA INFORMAÇÃO - WIREFRAME

  • É um desenho feito a mãe ou pelo computador que mostra como será seu site (disposição de cada elemento) orientando sobre a organização do site.


Arquitetura da informa o wireframe1

ARQUITETURA DA INFORMAÇÃO - WIREFRAME


Arquitetura da informa o wireframe2

ARQUITETURA DA INFORMAÇÃO - WIREFRAME


Tipografia

TIPOGRAFIA

  • A tipografia (do grego typos — "forma" — e graphein — "escrita") é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa.


Tipografia na web

TIPOGRAFIA NA WEB

  • Princípios da Tipografia na Web

    • Tamanho

    • Espaçamento e Margem

    • Constraste

    • Comprimento e Alinhamento


Tipografia na web1

TIPOGRAFIA NA WEB

  • Princípios da Tipografia na Web

    • Tamanho

      • 12 ou 13 pixels (Textos)

      • Para títulos, não temos um padrão, deve-se utilizar o bom senso para isso.

      • O ideal, é disponibilizar páginas que tenha a opção de aumentar e diminuir o tamanho da fonte.


Tipografia na web2

TIPOGRAFIA NA WEB

  • Princípios da Tipografia na Web

    • Espaçamento e Margem

      • A tendencia da maioria das pessoas é ocupar o espaço disponível. Seja com textos ou fotos, e não é diferente em uma página web.

      • A Idéia é fazer com que a leitura seja flúida, focar o usuário no texto.

      • Distanciar o conteúdo das margens e bordas


Tipografia na web3

TIPOGRAFIA NA WEB

  • Princípios da Tipografia na Web

    • Constraste

      • Fundo verde com letras vermelhas (NUNCA MAIS)

      • Combinar fundo branco com letras cinzas, você ajudará o leitor.

      • Enfatizar trechos do texto para facilitar a leitura rápida é extremamente aconselhável


Tipografia na web4

TIPOGRAFIA NA WEB

  • Princípios da Tipografia na Web

    • Comprimento e Alinhamento

      • Um mal comum tanto em textos curtos quanto longos são linhas de texto longas de mais.

      • Existe um cálculo simples para saber a largura ideal de um bloco de texto. Basta multiplicar o tamanho da fonte por 30. Se a fonte tiver o tamanho de 12px, a largura do bloco não precisa passar de 360 pixels.

      • Texto deve ser alinhado a esquerda para facilitar a leitura


Tipografia na web5

TIPOGRAFIA NA WEB

  • Sites para downloads de fonts:

    • www.1001freefonts.com

    • www.dafont.com

    • www.urbanfonts.com

    • www.fontsquirrel.com


Ftin m dulo de webdesign

MENU

  • A capacidade de utilização de zonas de “saltos”, ou simplesmente, links, é a função mais básica da internet e sua característica primordial. Ir de uma página a outra, viajar pelo mundo sem sair da frente do computador é realmente fantástico.

  • Navegação na web é definida pelos “Hyperlinks”


Ftin m dulo de webdesign

MENU

  • Hyperlinks é parte fundamental das linguagens utilizadas no desenvolvimento de uma página web e em outros meios digitais. São elementos clicáveis que podem ser textos ou imagens que levam a determinadas áreas de um documento ou nos leva para outro documento.


Ftin m dulo de webdesign

MENU

  • O Menu, é o agrupamento dos hyperlinks que formam o conjunto de páginas do website ou de qualquer outro projeto digital que está sendo desenvolvido.

  • Devemos apenas colocar as páginas principais.

  • Para subpáginas, criamos agrupamentos que formam um “submenu”, ou seja, um menu dentro de outro menu.


Estrutura b sica de um website

ESTRUTURA BÁSICA DE UM WEBSITE

  • Layout com Topo e Rodapé

  • Layout Responsivo

  • Layout de 2 colunas

  • Layout de 3 colunas


Estrutura b sica de um website1

ESTRUTURA BÁSICA DE UM WEBSITE

  • Layout com Topo e Rodapé

    • O topo é uma área bastante comum e está presente em praticamente todos os sites. Geralmente comporta elementos importantes de um website como a logomarca da empresa e o menu da página.

    • Conteúdo sempre virá abaixo do topo.

    • Rodapé geralmente contem informações de contato (Endereço, E-mail e Telefone) e quando muito extensos, comporta todo o menu do site por questões de acessibilidade


Estrutura b sica de um website2

ESTRUTURA BÁSICA DE UM WEBSITE

  • Layout Responsivo

    • Se adapta ao tamanho da tela do usuário

    • Tem voltado a ser o foco das anteções dos desenvolvedores para ser acessível pelos dispositivos móveis

    • Ex: www.designculture.com.br


Estrutura b sica de um website3

ESTRUTURA BÁSICA DE UM WEBSITE


Estrutura b sica de um website4

ESTRUTURA BÁSICA DE UM WEBSITE


Estrutura b sica de um website5

ESTRUTURA BÁSICA DE UM WEBSITE

  • Layout de 2 colunas

    • Característica em ter uma coluna lateral e uma coluna de conteúdo.

    • Muito comum em blogs, mais não necessariamente só se utiliza este formato em blogs.

    • Ex: http://freelanceswitch.com/


Estrutura b sica de um website6

ESTRUTURA BÁSICA DE UM WEBSITE


Estrutura b sica de um website7

ESTRUTURA BÁSICA DE UM WEBSITE

  • Layout de 3 colunas

    • Característica em ter 2 colunas laterais e uma coluna de conteúdo.

    • Padrão bastante utilizado, mais já está caindo em desuso.


Flat design

FLAT DESIGN

Tendência que segue a linha da simplicidade, leveza, clean, minimalismo (menos é mais) ...


Flat design1

FLAT DESIGN


Atividade

ATIVIDADE

  • Crie um briefing para uma empresa fictícia que está querendo desenvolver um site. Empresa: Lojão dos CabelosSegmento: Venda de produtos de beleza

  • Procure exemplos de sites na internet que possuam a estrutura de layout Responsivo, de 2 Colunas de 3 Colunas e fale um pouco sobre eles. Cite o link dos sites.

  • Pesquise sobre flat design e explique com suas palavras do que se trata.

Cada atividade é uma avaliação, dedique-se.

Faça as atividades com suas palavras, não copie e cole da internet ou colegas.


Atividade1

ATIVIDADE

Prazo para postagem:

21/09/2013 até às 23h55

  • Evite enviar a postagem de sua atividade no último dia.

  • Imprevistos podem ocorrer;

  • Sua organização e pontualidade também estão sendo avaliadas;

  • Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).


D vidas

DÚVIDAS...

  • Acesse o Fórum de dúvidas e discussões Diariamente.

  • Chat na Terça-Feira 17/09/2013

    19h00 as 20h30


Ferramentas de apoio

Ferramentas de apoio

  • Apostilas e vídeos do AVASIS;

  • Fórum durante o módulo com resposta em até 06 horas úteis;

  • Email do professor: [email protected]


Por hoje s

POR HOJE É SÓ!

  • PRÓXIMA AULA:

    • Implementação HTML/CSS

  • SIGA-ME:

    • Facebook.com/iranpontes

    • Twitter.com/iranpontes

    • www.designculture.com.br


Por hoje s1

POR HOJE É SÓ!

"Qual de vocês, se quiser construir uma torre, primeiro não se assenta e calcula o preço, para ver se tem dinheiro suficiente para completá-la?Pois, se lançar o alicerce e não for capaz de terminá-la, todos os que a virem rirão dele,dizendo: ‘Este homem começou a construir e não foi capaz de terminar”.

Lucas 14:28-30


  • Login