One page completo


Briefing

Briefing é o conjunto de instruções do cliente reunidas em um documento que servirá de guia para o desenvolvimento de um projeto. Nele devem ser descritas detalhadamente todas as ideias e orientações do cliente.

A reunião de briefing é a etapa mais importante do projeto. Quanto mais informações e detalhes forem captados, menor será a probabilidade de alterações posteriores. Porém, nem sempre o cliente sabe descrever o que quer. É preciso ter uma visão geral do projeto e ter sensibilidade (feeling) para entender as reais necessidades do cliente, para conseguir distinguir o que é desejo pessoal e o que é necessário para atender à demanda.

Guia de perguntas?

  • Histórico do cliente - é importante conhecer a história da empresa seus feitos e dificuldades;
  • Qual o objetivo do projeto? Definição do problema, necessidades do cliente.
  • Qual o público-alvo? Faixa etária, nível de instrução (grau de escolaridade), classe social, gênero (masculino, feminino, lgbtqia+), profissão, hábitos, necessidades específicas, gostos pessoais, hobbies;
  • Tipos de ilustrações - se haverá um personagem apresentador, se os personagens precisam de expressão facial, se haverá cenários, se serão usados mais ícones, etc;
  • Veiculação (web, mídia impressa, TV)
  • Qual tom? formal, sério, despojado, moderno, antigo, retrô
  • Isso serve de guia para escolhermos as cores (sóbrias, vibrantes), estilo de ilustração (proporção cartoon ou realista), técnicas (flat, detalhado)
  • O cliente viu alguma referência?
  • Quantidade de ilustrações
  • Prazo
  • Orçamento
  • Haverá animação?

No botão de abaixo dos recursos, temos um campo para coletar as dúvidas e poder auxiliar melhor nossa equipe!

Tipografia

Título 1

Título 2

Subtítulo nível 1

Subtítulo nível 2

Subtítulo nível 3

A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z

A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 0

Este é um parágrafo inicial. Destaca-se dos parágrafos regulares.


Você pode usar a marca de marcação para destacar o texto.

Esta linha de texto deve ser tratada como texto excluído.

Esta linha de texto deve ser tratada como não precisa.

Esta linha de texto deve ser tratada como um acréscimo ao documento.

Esta linha de texto será renderizada como sublinhada.

Esta linha de texto deve ser tratada como letras miúdas.

Esta linha renderizada como texto em negrito.

Esta linha renderizada como texto em itálico.

Essa é renderizada como codificação.

Uma citação bem conhecida, contida em um elemento blockquote.

Alguém famoso emFonte Título

Lista sem estilo

  • Esta é uma lista.
  • Parece completamente sem estilo.
  • Estruturalmente, ainda é uma lista.
  • No entanto, esse estilo só se aplica a elementos filhos imediatos.

  • Listas aninhadas:

    • não são afetados por este estilo
    • ainda vai mostrar um bullet(ponto a esquerda)
    • e ter margem esquerda apropriada
  • Lista dotted:

      • não são afetados por este estilo
      • ainda vai mostrar um bullet(ponto a esquerda)
      • e ter margem esquerda apropriada
  • Listas numeradas:

    1. não são afetados por este estilo
    2. ainda vai mostrar um bullet(ponto a esquerda)
    3. e ter margem esquerda apropriada

Accordion border | Accordion list | Accordion plus

O componente Accordion é muito utilizado com a função de agrupar conceitos com explicações breves sobre cada item.

Possui uma limitação de 1000 caracteres por item no máximo.

Veja abaixo alguns exemplos dos modelos disponíveis e da forma de utilizar:

Este é o corpo do accordion. Está escondido por padrão, até que seja inserido a classe de recolhimento. Essas classes controlam a aparência geral, bem como o que é apresentado ou ocultado, através de transições usando CSS. Você pode modificar qualquer um deles com CSS personalizado ou substituindo nossas variáveis padrão. Também vale a pena notar que praticamente qualquer HTML pode ir dentro o .accordion-body, embora a transição limite transbordar.

Sempre ao utilizar esse modelo se atentar para os aspectos de quantidade de caracteres, caso queira algum recurso que ultrapasse as limitações abaixo teremos sempre um indicativo de recursos que possam substituir este recurso.

Para utilizar um recurso com a possibilidade de mais caracteres e que possua uma disponibilidade tanto mobile quanto desktop recomendamos a utilização de um card.

Clique na marcação para ir até o card.

Esse tipo de accordion é mais utilizado como definição de lista, onde é mais simples e harmoniza com a utilização de recursos mais dinâmicos como o design line, dessa maneira sendo utilizado com linhas.

Esse recurso também possui suas limitações como os demais. Pensando nesse recurso como uma lista, pode ser utilizado para apresentar textos dinâmicos.

Para substituir este recurso no caso de uma grande quantidade de caracteres, considerando sempre a acessibilidade no mobile primeiro, aconselhamos utilizar o recurso card.
  • Accordion plus - Como usar

    Este é o corpo do accordion, nele há a possibilidade de acrescentar imagens e textos, pensando na limitação de caracteres informado nos accordions anteriores.

  • Accordion plus - Limitações

    As limitações desse recurso variam, como ele não possui uma limitação como o lista ou o border, há a possibilidade de utilizar mais caracteres, sendo disponivel 1000 caracteres e uma imagem.

  • Accordion plus - Recurso substituto

    Para substituir esse recurso, como ele possui uma maior acessibilidade tanto em mobilequanto em desktop podemos colocar um comparativo com o card. Mesmo assim é bom se atentar aos demais recusos e seus comportamentos distintos dentro do mobile

Áudio | Transcrição

Os recursos Áudio e Transcrição devem ser inseridos juntos para que

A transcrição do áudio pode aparecer diretamente na tela ou pode ser habilitado o download para que o aluno baixe o PDF com o texto.

Botão | Botão Preenchido | Botão Vazado

A utilização deste recurso deve ser feita de acordo com a situação sendo ele feito para interagir dentro ou fora de boxes ou imagens, dessa forma trazendo um contexto mais claro mostrando que há uma interação a ser feita.





Box | Box title | Box Importante | Box saiba mais | Box dica | Box você sabia | Box pdf

O recurso Box é utilizado para dar destaque, isolar um assunto, enfatizar um assunto, dar foco a uma reflexão ou até mesmo algo de grande importância. Pensando nisso, preparamos algumas das boxes mais utilizadas.

Importante tomar cuidado com a quantidade de caracteres ao se utilizar a box, pensando nisso sugerimos no máximo 1000 por box.

Box

Duas cabeças pensam melhor do que uma, certo?

Fique atento ao fato de, nesse momento do projeto, as ideias não poderem ser criticadas e/ou julgadas, para não interferir no processo criativo dos participantes.

Box Title

Esse tipo de box precisa ser utilizada estrategicamente, pois devido ao tamanho do título, os caracteres fixos abaixo são 40 no máximo. O título deve ter no máximo 20 caracteres.

Importante!

A box Importante!destaca assuntos importantes que precisam de fato serem lidos.

Saiba mais...

Essa box auxilia o assunto trazendo um pouco mais dele, aprofundando assim um assunto, tema para que te ajude.

Dica

Essa box trás uma dica simples, ou até mesmo aprofundada sobre o assunto ou imagem. Podendo ser algo simples ou bem complexo.

Você sabia?

Essa box gera uma dúvida e te mantém atualizado com uma nova informação, explicação ou até mesmo um novo tema.

PDF

Essa box, trás com ela uma nova informação e em um arquivo em pdf, podendo ser feito download do arquivo, ou visualizado dentro da pagina.


Card | Card top | Card bottom | Card left | Card right | Card fast | Card focus | Card slim

O componente Card pode ser utilizado de diversas formas. Mesmo com a limitação de largura X altura, ele pode ser adaptado para diversas posições assim contemplando da melhor forma possivel a imagem e criando uma harmonia através do texto e da imagem. Onde possibilita uma maior harmonia no design como as imagens abaixo.

Card Top

Esse card também possibilita uma imagem acima do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.


Card Bottom

Esse card também possibilita uma imagem abaixo do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.



Card Left

Esse card também possibilita uma imagem a esquerda do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.

Devemos ficar atentos a essa recurso, a imagem a esquerda no mobile irá desaparecer, a imagem precisa estar na proporção vertical, e a quantidade de texto deve ser limitada.

Card Right

Esse card também possibilita uma imagem a direita do texto, nesse caso a imagem fica em destaque e o texto fica centralizado também.

Devemos ficar atentos a essa recurso, a imagem a direita no mobile irá desaparecer, a imagem precisa estar na proporção vertical, e a quantidade de texto deve ser limitada.

...

Card fast

Para um conteudo relativo explicando uma imagem ou relacionando a mesma.

Card focus

Card subtitle

Algum texto de exemplo rápido para criar no título do card e compor a maior parte do conteúdo do card. content.

Nesse card é possivel colocar dois links.

Card link Another link
Card slim

Esse card possui uma estrutura mais fina

Nele encontramos uma estrutura isolada que pode ser definida apenas por linhas

Botão

Comment Light | Comment Dark

O Comment é mais utilizado em referências bibliográficas para fazer uma grande referência e mostrar seu autor com imagem e data, para poder melhorar o acompanhamento e atualização do mesmo.


Collapse show | Collapse animation | Collapse left

O collapse é um recurso que pode estar dentro de um botão, dessa forma ele pode apresentar ou ocultar um card, um texto, um bloco ou até mesmo uma imagem.

Elemento um utilizando uma simples animação superior, a quantidade de caracteres varia de acordo com a necessidade do recurso.

Exercicios | Combobox | Single choice | Multiple choice | True or false

Os exercicios são recursos de interação que possibilitam testar seu conhecimento, nesse tipo de recurso temos diversos modelos para cada tipo de situação diferente.

1. Um sistema de Educação a distância é formado por todos os processos que operam quando ocorrem o ensino e a aprendizagem a distância. Sobre o processo de Desenvolvimento de cursos, associe as etapas às suas definições:

a. São coletadas informações sobre o público-alvo, os objetivos e as necessidades de aprendizado.

b. Os designers educacionais planejam e projetam o curso.

c. O conteúdo do curso é efetivamente criado com base no plano de design.

d. É a fase em que o curso é disponibilizado para os alunos .

e. É contínua e ocorre em várias etapas do processo.
Atenção!
Selecione todas as alternativas do exercício.

Parabéns! Resposta correta.

Você associou corretamente etapas de desenvolvimento de curso EAD.

Ops! Tente novamente.

Retorne ao conteúdo e estude com atenção as etapas de desenvolvimento de curso EAD.

Resposta incorreta.

Resposta incorreta. . As respostas corretas são:

  • Análise
  • Design
  • Desenvolvimento
  • Implementação
  • Avaliação

Aproveite para estudar um pouco mais sobre as etapas de desenvolvimento de curso EAD.

2. Na EAD, muitos profissionais fazem uso do processo de ensino e aprendizagem. Das características citadas, quais estão relacionados ao Designer educacional?

Parabéns! Resposta correta.

O Designer Educacional organiza pedagogicamente os materiais, assegurando a clareza e o alinhamento aos objetivos educacionais. Elabora documentos instrucionais como storyboards, roteiros de vídeos, entre outros.

Ops! Tente novamente.

Retorne ao conteúdo e estude com atenção sobre Equipe Multidisciplinar.

Resposta incorreta.

A resposta correta é a alternativa e. O Designer Educacional organiza pedagogicamente os materiais, assegurando a clareza e o alinhamento aos objetivos educacionais. Elabora documentos instrucionais como storyboards, roteiros de vídeos, entre outros.

3. Teste de exercicio, multipla escolha:

Atenção!

Selecione todas as alternativas do exercício.

Parabéns! Resposta correta.

Isso mesmo! A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.

Resposta incorreta.

Ops! Tente outra vez! Volte ao tópico sobre Relacionamento de objetos.

Resposta incorreta.

As respostas corretas são:
a. Questionário
b. Prototipagem
c. Brainstorm
d. Briefing
e. Entrevista
Examine a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

4. Verdadeiro ou falso pode ter mais de uma tentativa ?

Parabéns! Resposta correta.

Você fez a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

Resposta incorreta.

As respostas corretas são:
a. Questionário
b. Prototipagem
c. Brainstorm
d. Briefing
e. Entrevista
Examine a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

5. Considerando as operações fundamentais da matemática, temos algumas regras básicas de programação em Python. Classifique cada afirmativa como verdadeira ou falsa:

A. Toda operação com números inteiros gera números inteiros (por exemplo: uma soma ou subtração).


B. Nem toda operação com números flutuantes gera números flutuantes.

C. Toda operação com números inteiros e números flutuantes gera números flutuantes.

Atenção!

Selecione todas as alternativas do exercício.

Parabéns! Resposta correta.

Você fez a correspondência correta das técnicas que são aplicadas para facilitar e determinar quais serão as condições que o produto final deverá contemplar.

Resposta incorreta.

Tente outra vez! Procure relembrar as caracteerísticas das operações matemáticas estudadas neste desafio.

Resposta incorreta.

Apenas a afirmativa B é falsa, pois toda operação com números flutuantes gera números flutuantes. Reveja o tópico Fundamentos da linguagem Python.


Graphic Bar | Graphic Pizza | Graphic Radial

O Grafic é um recurso que pode estar dentro de um botão, dessa forma ele pode apresentar ou ocultar um card, um texto, um bloco ou até mesmo uma imagem.

Highlight img | Highlight code

O recurso highlight tem por sua vez focar em algo ou apresentar algo. Dessa forma o hightlight de imagem apresenta um foco ou destaque em cima da imagem ao fundo, o highlight de código possui foco em apresentar o código inserido e dois botões informativos um de cópia e o outro de qual linguagem presente no código.

                                
                                <div class="row">
                                    <div class="col-lg-6 mx-auto">
                                        <div id="highlight-img" class="highlight-dark" name="highlight-img">

                                            <a href="#" id="item-spot1" class="highlight-spot rounded-circle"
                                            style="width: 25%; height: 38%;" data-bs-toggle="modal"
                                            uk-toggle="target: #modal-highlight-img-1"></a>

                                            <a href="#" id="item-spot2" class="highlight-spot rounded-circle"
                                            style="width: 17%; height: 26%;" data-bs-toggle="modal"
                                            uk-toggle="target: #modal-highlight-img-1"></a>

                                            <img src="img/1.png" class="img-fluid" alt="">
                                            
                                        </div>
                                    </div>
                                </div>
                                
                            

Parallax - Titulo superior | Parallax - Titulo de encaixe | Parallax - Motion

O desenvolvimento Parallax foi desenvolvido para harmonizar tanto a parte visual quanto descritivo de um assunto ou citação sendo possivel criar um ambiente de destaque com uma imagem de fundo fixo ou movimentação.

Parallax - Titulo superior

Esse recurso deve ser composto por uma imagem com no maximo 1920x1080px com exportação para web 72dpi, de preferencia em formato .jpg

Parallax - Titulo de encaixe

Essa utilização deve ser feita pensando no contexto de leitura, com uma imagem bem pensada e elaborada para questionamento devido a coloração do texto em si. Lembrando de como deve ser utilizado o texto e a imagem, no formato altura e exportação adequada.

Parallax - Move

Esse estilo de Parallax é mais utilizado para realizar um efeito de movimentação em imagem, tendo como foco a imagem em si. Esse precisa ser bem pensado para que caso haja uma composição grande com um ponto de foco na imagem não cortar a imagem.

Parallax - Texto

Para melhorar o desenvolvimento de foco em textos descritivos menores, esse recurso é o mais adequado.

Como usar?

Pensando pelo no ambiente mobile e desktop, temos que criar e desenvolver o habito de pensar no tipo de leitura via scroll. Que da o sentido de descer para ler, já que possui um efeito atrelado ao efeito de scroll.

Contras

Devido o tamanho, temos que nos limitar a quantidade de caracteres, não podendo ser textos muito longos, nem atividade ou imagens dentro desse recurso, assim evitando recursos dentro de recursos que impossibilita a visão dinamica do mobile.



Slider | Slider Cover | Slider Box | Slider Vertical | Slider Three

O Slider nome mais comum para esse recurso pode ser utilizado de diversas formas dependendo da situação, lembrando sempre de como deve ser aplicado deviado a orientação da imagem, como nos exemplos a baixo. Podendo ser utilizado um ou mais de um na mesma tela, respeitando a respectiva necessidade da orientação adequada devido a responsividade.

      • Slider Box - 1

        Esse slider, compoe a disposição de imagens e textos com o mesmo tamanho e altura.

      • Slider Box - 2

        Para uma exibição mais harmonica que não afete a imagem, para alinhar melhor os textos e as imagens precisam ter o mesmo tamanho e largura.

      • Slider Box - 3

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

      • Slider Box - 4

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

      • Slider Box - 5

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

        • Slider Vertical

        • 2

        • 3

        • 4

        • Slider Three

        • 2

        • 3

        • 4

        • 5

        • 6

        • 7

        • 8

        • 9

        • 10

        Timeline Horizontal | Timeline Vertical

        O Timeline deve ser utilizado para comparativo de datas, tempo, situações por etapas e sera reposicionado no mobile no formato de cards

        1. Coleta de dados ou informações iniciais, realizada com o cliente, que será a base para o desenvolvimento inicial do projeto. Essa coleta ocorre em uma reunião com o cliente, chamada reunião de briefing.
        2. Técnica utilizada para levantar sugestões e ideias, a fim de solucionar problemas no desenvolvimento de produtos e serviços.
        3. Lista de perguntas sobre os requisitos do projeto. Diferentemente do briefing, que coleta dados sobre o produto ou serviço a ser desenvolvido, o design, a empresa etc., o questionário contém perguntas sobre a implementação do produto ou serviço no mercado.
        4. Técnica utilizada para analisar requisitos sociais e culturais das tarefas desempenhadas numa organização.
        5. Reunião feita com a equipe de analistas da empresa contratada para o desenvolvimento do produto ou serviço e com representantes do cliente, a fim de especificar as necessidades do projeto.
        6. Reunião feita com a equipe de analistas da empresa contratada para o desenvolvimento do produto ou serviço e com representantes do cliente, a fim de especificar as necessidades do projeto.
        7. Modelo preliminar ou inicial do produto que apresenta algumas funcionalidades que ele terá.

        Inicio

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!

        John Doe

        When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is.

        John Doe
        18 APR
        Fim

        Tooltip | Popover Button

        A utilização deste recurso deve ser feita de acordo com a situação sendo ele feito para interagir dentro ou fora de boxes ou imagens, dessa forma trazendo um contexto mais claro mostrando que há uma interação a ser feita.

        Video | Video Caps | Video Youtube

        O desenvolvimento video caps foi desenvolvido para criar capitulos onde são de grande importancia ou destaque, para pooder enfatizar uma parte do video, podendo criar um link com arquivos, recursos, imagens até mesmo exercicios se for bem utilizado.