SlideShare uma empresa Scribd logo
1 de 63
Baixar para ler offline
Princípios da
organização visual

Prof. Aderson Sampaio




                             Baseado no Livro
                        Design para quem
                           não é designer
                            (Robin Williams)
Princípios da
organização visual

Desafio
Princípios da
organização visual

Desafio




                     CONTEÚDO   X   FORMA
§  Proximidade
                         §  Itens relacionados entre si devem
                         ser agrupados visualmente


                     §  Alinhamento
Princípios da            §  Nada deve ser colocado
organização visual       arbitrariamente em uma página.
                         Cada item deve ter uma conexão
                         visual com algo na página
Princípios

                     §  Contraste
                         §  Se dois itens não pertencerem à
                         mesma categoria, diferencie-os
                         completamente


                     §  Repetição
                         §  Algum aspecto do design deve
                         repetir-se no material como um todo
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
A formação de grupos é o principal item
                     deste princípio




Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual
Princípios da
organização visual
Princípios da
organização visual
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Proximidade
Princípios da
organização visual

Alinhamento




                     Nada deve ser colocado arbitrariamente
                     em uma página. Cada item deve ter uma
                     conexão visual com algo na página.
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Com um alinhamento bem definido,
                     o material parece ser melhor organizado.




Princípios da
organização visual

Alinhamento



                     A linha invisível que passa por aqui
                     conectando o texto.
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Alinhamento
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste




                     Nada parece atrair de imediato o olhar
                     do leitor
Princípios da
organização visual

Contraste




                     Agora, o olhar é mais facilmente
                     direcionado que o modelo anterior
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste
Princípios da
organização visual

Contraste
Princípios da
organização visual

Repetição




                     Algum aspecto do design deve repetir-
                     se no material inteiro, reforçando
                     unidade visual e tornando o material
                     mais coeso e forte
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição
Princípios da
organização visual

Repetição




                     Algum aspecto do design deve repetir-
                     se no material inteiro, reforçando
                     unidade visual e tornando o material
                     mais coeso e forte.
Erros e acertos em design
            de páginas
Princípios da
organização visual




                               Adaptado dos Livros
        Design para quem não é designer | Web design para não designers
                             Robin Williams
Erros

            1   Texto todo em maiúsculas.
Princípios da
organização visual
Erros

           2   “Botões” que não são botões.
Princípios da
organização visual
Erros

         3 Exagero no tamanho dos botões.
Princípios da
organização visual
Erros

      4 Uso de fundo que não permita um bom
Princípios da        contraste.
organização visual
Erros

        5 Formato da página que ultrapassa      o
Princípios tamanho do monitor do seu cliente.
           da
organização visual
Acertos

                1    Clareza e limpeza.
Princípios da
organização visual
Acertos

       2 Uso inteligente do espaço em branco.
Princípios da
organização visual
Apresentação
       Visual de Informações
Princípios da
organização visual




                               Adaptado dos Livros
        Design para quem não é designer | Web design para não designers
                             Robin Williams
WILLIAMS, Robin. Design para quem
                     não é designer: noções básicas de
                     planejamento visual. São Paulo: Callis,
                     1995.


Princípios da
organização visual

Bibliografia

Mais conteúdo relacionado

Mais de Eduardo Novais

[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobileEduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - DadaismoEduardo Novais
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02Eduardo Novais
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplinaEduardo Novais
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfacesEduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visualEduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na webEduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplinaEduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - coresEduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com VisualEduardo Novais
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre gridsEduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - gridsEduardo Novais
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áureaEduardo Novais
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativoEduardo Novais
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangramEduardo Novais
 
[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestaltEduardo Novais
 
[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturizaçãoEduardo Novais
 

Mais de Eduardo Novais (20)

[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
 
[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram
 
[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt
 
[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização
 

Último

Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAnnaCarolina242437
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Érica Pizzino
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAnnaCarolina242437
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfAnnaCarolina242437
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfCharlesFranklin13
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...AnnaCarolina242437
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024CarolTelles6
 

Último (8)

Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
 
Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdf
 
Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.Estudo de caso para o aplicativo SÓ FLÔ.
Estudo de caso para o aplicativo SÓ FLÔ.
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdf
 
Design para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdfDesign para o futuro 2024 - Leiautar.pdf
Design para o futuro 2024 - Leiautar.pdf
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024
 

Princípios organização visual Robin Williams