2
respostas

[Projeto] Projeto similar

No momento não tenho uma dúvida, mas gostaria de compartilhar o projeto que estou fazendo. Decidi não optar pela ideia do professor, mas estou utilizando todas as dicas e ensinamentos dados em aula.

Aceito sugestões.

Segue o link: https://www.figma.com/file/MfNmEvkUPoPc83WMD7ozyz/Site-escola?node-id=0%3A1&t=XM8W9ZwOXOckcpQC-1

2 respostas

Olá, Mateus! Como está?

Muito bom seu projeto! A estrutura está ótima! Agradeço muito por você compartilhar seu projeto aqui no Fórum, pois com certeza vai inspirar colegas a também compartilharem conosco!

Quanto ao que nos apresenta, gostaria de dar algumas sugestões que podem acrescentar ainda mais ao seu excelente projeto:

Em Professores, o terceiro docente apresentado está em um posicionamento na tela um pouco mais alto, talvez pudesse deixá-los de maneira igual. E para não haver cortes no card deste terceiro docente, há a possibilidade de diminuir o tamanho dos três. O que acha?

PrintScreen que apresenta um projeto em formato retangular, fundo em cor bem próxima a cor branca, com um retângulo amarelo na parte posterior, fundo amarelo, com ícone de e-mail à direita, com lorem ipsum de e-mail, e ainda mais à direita um ícone de telefone e telefone de exemplo. Abaixo, à esquerda uma pequena imagem de uma escola e no lado direito seis retângulos pequenos com distanciamento entre eles, sendo o primeiro com fundo azul escrito “Home”, o segundo com fundo azul escrito “Sobre”, o terceiro com fundo amarelo escrito “Professores”, o quarto com fundo azul escrito “Turmas”, o quinto com fundo azul escrito “Projetos” e o sexto com fundo azul escrito “Contato”. Na parte embaixo há o título “Conheça nossos professores", centralizado na cor preta com fundo branco. Há  três retângulos abaixo, separados por espaço, sendo cada um deles com fundo azul claro, um círculo com foto de pessoas diferentes e com três nomes e abaixo um retângulo na cor branca com texto de exemplo usando lorem ipsum em preto sobre cada um.

A parte de Turmas está excelente com imagens e espaço para textos! O que acha sobre centralizar os retângulos para que o espaçamento nas laterais fique igual em ambos lados?

PrintScreen que apresenta um projeto em formato retangular, fundo em cor bem próxima a cor branca, com um retângulo amarelo na parte posterior, fundo amarelo, com ícone de e-mail à direita, com lorem ipsum de e-mail, e ainda mais à direita um ícone de telefone e telefone de exemplo. Abaixo, à esquerda uma pequena imagem de uma escola e no lado direito seis retângulos pequenos com distanciamento entre eles, sendo o primeiro com fundo azul escrito “Home”, o segundo com fundo azul escrito “Sobre”, o terceiro com fundo amarelo escrito “Professores”, o quarto com fundo azul escrito “Turmas”, o quinto com fundo azul escrito “Projetos” e o sexto com fundo azul escrito “Contato”. Na parte embaixo há o título “Turmas/Séries", centralizado na cor preta com fundo branco. Abaixo há três retângulos, os quais contém dropshadow, e que tem a cor de fundo azul e uma imagem cada. O primeiro retângulo tem uma imagem de uma professora à frente de uma sala de aula com estudantes sentados e de mãos levantadas no lado esquerdo. À direita tem o título “Fundamental” e abaixo um texto de exemplo usando lorem ipsum. No retângulo abaixo do primeiro há três pessoas com etnias diferentes sorrindo e olhando para uma tela e colocando a mão no teclado e tela. À direita tem o título “Ensino Médio” e abaixo um texto de exemplo usando lorem ipsum. E no último retângulo há cinco crianças diferentes sentadas em semicírculo, segurando lápis e pintando os cadernos à frente delas. À direita tem o título “Ensino Médio Especial” e abaixo um texto de exemplo usando lorem ipsum.

[Resposta - Parte 1/2]

[Resposta - Parte 2/2]

As imagens em Artigos estão excelentes! Sugeriria colocar a imagem abaixo no mesmo tamanho da imagem superior, proporcionando uma visão mais estruturada para a pessoa que pode observar a página como um todo.

PrintScreen que apresenta um projeto em formato retangular, fundo em cor bem próxima a cor branca, com um retângulo amarelo na parte posterior, fundo amarelo, com ícone de e-mail à direita, com lorem ipsum de e-mail, e ainda mais à direita um ícone de telefone e telefone de exemplo. Abaixo, à esquerda uma pequena imagem de uma escola e no lado direito seis retângulos pequenos com distanciamento entre eles, sendo o primeiro com fundo azul escrito “Home”, o segundo com fundo azul escrito “Sobre”, o terceiro com fundo amarelo escrito “Professores”, o quarto com fundo azul escrito “Turmas”, o quinto com fundo azul escrito “Projetos” e o sexto com fundo azul escrito “Contato”. Na parte embaixo há o título “Ornamentação Copa do Mundo", centralizado na cor preta com fundo branco. Embaixo tem uma fotografia de pessoas reunidas, sendo crianças e pessoas adultas, em uma sala de aula com a bandeira do Brasil na parede ao fundo, a decoração do lado direito da foto contém balões de ar nas cores da bandeira nacional e ao redor da bandeira há imagens e fotos sobre o tema. Abaixo da fotografia, há um texto centralizado utilizando lorem ipsum. Debaixo do texto há uma segunda fotografia de tamanho menor em comparação com a primeira fotografia, contendo nesta segunda fotografia mini hambúrgueres à direita decorados em cima com palitos de madeira que em cima contém bandeirinhas verdes e uma bola de futebol no meio destas bandeirinhas, mini bolinhos com cobertura verde à direita e o fundo está embaçado assim não se pode visualizar nada além dos elementos centrais, mini bolinhos e mini hambúrgueres. E embaixo da segunda fotografia, há um texto centralizado separado em três pequenos parágrafos utilizando lorem ipsum.

Em seu mapa, há sombreamento na imagem dele, ao contrário das outras imagens em seu projeto que não contém sombra. Assim, referente à maior harmonização, gostaria de sugerir a retirada do dropshadow.

PrintScreen que apresenta um projeto em formato retangular, fundo em cor bem próxima a cor branca, com um retângulo amarelo na parte posterior, fundo amarelo, com ícone de e-mail à direita, com lorem ipsum de e-mail, e ainda mais à direita um ícone de telefone e telefone de exemplo. Abaixo, à esquerda uma pequena imagem de uma escola e no lado direito seis retângulos pequenos com distanciamento entre eles, sendo o primeiro com fundo azul escrito “Home”, o segundo com fundo azul escrito “Sobre”, o terceiro com fundo amarelo escrito “Professores”, o quarto com fundo azul escrito “Turmas”, o quinto com fundo azul escrito “Projetos” e o sexto com fundo azul escrito “Contato”. Na parte embaixo há o título “Contatos", centralizado na cor preta com fundo branco. Abaixo do título há o ícone de uma carta na primeira linha, ao lado uma frase de exemplo de e-mail utilizando lorem ipsum. Embaixo tem o ícone de um telefone e ao lado uma frase de exemplo de telefone usando lorem ipsum. Na linha embaixo há o ícone de um telefone dentro de um balão de fala e ao lado uma frase de exemplo de telefone usando lorem ipsum. Um pouco abaixo há um outro título em preto no fundo branco, sendo ele “Localização”. Um pouco abaixo do título há o print de uma parte de um mapa em formato retangular mostrando ruas e marcando certa posição com um ícone de local na cor vermelha, o mapa está inserido em um retângulo com fundo azul claro.

Novamente, gostaria de lhe parabenizar por seu excelente projeto!

Caso tenha dúvidas, fico à sua disposição.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software