User experience (UX)

User Interface (UI) 

Design
de experiencia e
Interfaces
Team Presentation

André Dias Rubem Filho Luiz Otávio André França

INSTRUTOR INSTRUTOR INSTRUTOR INSTRUTOR

Ezequiel Neves Rita Santos

Coordenação Coordenação
2
Roda de conversa
Apresentação

Como responder “Fale um pouco sobre

você”

1. Seu Nome?
2. Esqueça a falsa modéstia. ...
3. Fale de seus defeitos e limitações. ...
4. Seja criativo. ...
5. Comente sobre seu estilo de vida. ...
6. Relate seus objetivos e sonhos. ...
7. Conte experiências profissionais que não estão no currículo. ...
8. Mostre como você pode ajudar a empresa, e vice-versa.
9. Tem LinkedIn?
Mentimeter - wordart 3

https://www.insidehighered.com/admissions/article/2017/10/09/cornell-students-revive-debate-whom-colleges-should-count-black
Roda de conversa
Apresentação

Computadores e programas

 Acesso aos computadores

 Repositório local de arquivos do aluno
 Material de aula
 Programas utilizados
4
 Comunicação – redes sociais
https://www.insidehighered.com/admissions/article/2017/10/09/cornell-students-revive-debate-whom-colleges-should-count-black
Atividade colaborativa
https://www.figma.com/file/rl2CSaw2EMcysANm9tPfEM/QUEBRA-GELO_FULLSTACK_TARDE

5
FIGMA
RELÓGIO APPLE:
https://www.figma.com/file/Tj54wrZSZFgJWRW9xKx19b/EXEMPLO---02?node-id=2%3A320

CELULAR::
https://www.figma.com/file/46hSGkysE0PZS6AGWicKlZ/EXEMPLO---01?node-id=0%3A1

6
Projeto de curso
Organização curricular
Unidades Curriculares

UC2 – Projetar sistemas UI/UX

Máx.: 36 horas
• Indicadores
• Elementos de competência-conhecimentos
• Projeto integrador

http://forzaeducacional.com.br/
Projeto de curso

UC2 – Projetar sistemas UI/UX

Máx.: 36 horas
Organização curricular
Indicadores

1. Analisa requisitos do sistema conforme necessidade

do cliente(UX).
2. Define interfaces para sistemas e aplicativos mobile de
acordo com especificações do projeto(UI).
8

http://forzaeducacional.com.br/
 Projeto de curso
Conhecimentos
1. Identificação do perfil do cliente e público-alvo, concorrentes diretos e indiretos e
briefing.
2. Elaboração de projetos: tendências, tecnologias, gestão de projetos.
3. Ferramentas de organização e levantamento de ideias: brainstorming, mapas
mentais e painéis semânticos.
4. UX - User Experience Design: conceito, funcionalidade e aplicabilidade.
5. UI - User Interface Design: conceito, funcionalidade e aplicabilidade.
6. Arquitetura da informação: conceito e aplicações, mapa do site e estruturas de
navegação, organização de conteúdo.
7. Design para interface para sistemas/mobile.

9
Não deixe BigMac confuso!
Experiência de usuário:
⬡ Conceitos
⬡ Aspectos técnicos e subjetivos
⬡ Aplicações e usabilidade

13
UX é uma disciplina que estuda a
experiência do usuário de um
produto ou serviço, com o objetivo
de estimular melhorias nos mesmos.

Usuário x Cliente

https://fia.com.br/blog/ux-user-experience/ 14
A experiência do usuário abrange
todas as interações do usuário com
uma marca. Após a 
transformação digital, essa
experiência se voltou
principalmente para sites,
aplicativos móveis, equipamentos,
ferramentas e outros recursos.

Pressão das empresas por

desenvolvimento de produto (APP
´s)
https://rockcontent.com/br/blog/experiencia-do-usuario/ 15
• UX – User Experience
• UI – User Interface

16
Sketch ou Esboço
Pilares da experiência
do usuário

1. Atrativo visual
2. Utilidade
3. Acessibilidade
4. Credibilidade
5. Intuitividade
6. Desempenho técnico
7. Proximidade e cumplicidade (humanização)
8. Inovação e originalidade

https://rockcontent.com/br/blog/experiencia-do-usuario/ 18
https://www.figma.com/file/F3G79EJd5wb44GEon7s6PV/CONTROLE-REMOTO?node-id=0%3A1

19
 20
https://www.artlebedev.com/pultius/
 21
https://boards.core77.com/viewtopic.php?t=25074
 22
https://corsairmediaservices.com/index.php/blog/98-writing-design/101-the-importance-of-ui-ux
23
24
• Campos de atuação

• UX Researcher;
• Information Architect;
• UI/UX Developer;
• Usability Analyst;
• UX Writer;
• Product Designer.

https://medium.com/aela/
ux-design-quais-as-
possibilidades-de-atua
%C3%A7%C3%A3o- 25
e15c2086aff5
UX Writer

26
https://medium.com/sympla-design/ux-writing-e-a-comunica%C3%A7%C3%A3o-n%C3%A3o-violenta-5-exemplos-de-estrat%C3%A9gias-99f912e520dd
Quais destes itens não compõem a lista dos pilares da
experiencia do usuário?
A. Atrativo visual
B. Utilidade
C. Acessibilidade
D. Credibilidade
E. Intuitividade
F. Desempenho técnico
G. Criação e cognição
H. Inovação e originalidade

27
A. Atrativo visual
B. Utilidade
C. Acessibilidade
D. Credibilidade
E. Intuitividade
F. Desempenho técnico
G. Proximidade e cumplicidade
H. Inovação e originalidade

28
Proposta de projeto PI:
https://www.figma.com/file/xV9clQAs75EtAF8ApLCaye/FULLSTACK-_2022.26.55_TARDE?node-id=0%3A1

Brainstorming no Figma (votação):

 Nome do grupo ou time?
 Qual a empresa?
 Divisão das funções: gerencia de projetos, arquitetura da informação, design UX/UI,
programação(front e back end), Analise de testes(qualidade).

Escolha da proposta de projeto:

Proposta 1: Desenvolver um sistema para um site institucional com cadastro

e exposição de produtos do portfólio de uma empresa.

Proposta 2: Desenvolver um sistema para um site institucional com

agendamento de serviços pelo navegador web e consultas via mobile.

VAGAS: https://www.wit-software.com/careers/
https://midiamax.uol.com.br/mundo/2021/empresa-quer-300-brasileiros-para-trabalhar-e-repovoar-cidade-de-pedro-alvares-cabr
al
29
 Conhecendo o FIGMA

Miro Ninja Mock Whinsical

O Figma permite projetar e Invision Axure RP Overflow

criar protótipos, além de Origami Pop app Plant
coletar comentários ou Proto.io Principle Zeplin
anotações sobre os projetos.
Essa é a primeira ferramenta Sketch(Apple) UX PIN
de design de interface Fluid Webflow
baseada em navegador(web- CodiQA Adobe XD
based), o que facilita a
Pixate Framer
criação de software pelas
equipes. Marvel Flinto
https://www.iebschool.com/pt-br/blog/analitica-web/usabilidade-e-ux/20-ferramentas-de-prototipagem-e-usabilidade-na-web/ 30
PESQUISA

UX
31
Exemplo de pesquisa
QUANTITATIVA
QUALITATIVA

Dados quantitativa :
apresentam os números
que comprovam os
objetivos gerais da
pesquisa.

Dados
qualitativos: permitem
compreender a
complexidade e os detalhes
das informações obtidas.

https://pt.surveymonkey.com/mp/quantitative-vs-qualitative-research/

32
Exemplo de pesquisa
QUANTITATIVA

https://pt.surveymonkey.com/mp/
quantitative-vs-qualitative-research/

FORMULARIO:
https://forms.office.com/Pages/ResponsePage.aspx?id=-RjGdLexlkKe_2QQbBUwxPOj
HsYktAFCnzwIac-lm4pURUZKVE9NSU9LSUJBNFg5SEM1VzMyTEVFVy4u

33
designer John
Furness:
https://andresar
ti.com.br/projet
o-web-contato-i
nicial/
35
Conhecimento

• Equipe de desenvolvimento de
aplicativo.

36
https://usemobile.com.br/equipe-necessaria-para-criar-um-aplicativo/
O que faz um desenvolvedor Full Stack?
https://www.figma.com/file/MprUdOdBaBzi1TEVNsfiD9/VOTO-FULLSTACK?node-id=0%3A1

1. Desenvolver a arquitetura da interface do site

2. Projeta as interfaces do usuário e outros elementos de front-end
3. Desenvolver aplicativos back-end
4. Crie servidores e bases de dados para uma funcionalidade correta
5. Garantir o funcionamento do aplicativo ou site em telefones celulares
6. Garantir a velocidade e escalabilidade do site
7. Gerenciamento de projetos complexos
8. Assessoria a outros departamentos

https://www.freelancermap.com/blog/pt/que-faz-desenvolvedor-full-stack/ 37
 NO CODE
LOW CODE
Amplia o nível de
abstração.

USUÁRIO
desenvolvedor
Ganha
produtividade.

http://
arquiteturacomputador
es11i.blogspot.com/
2013/01/pesquisa-
linguagens-de-
programacao.html 38
Sobre a área e campo de trabalho UX/UI e Programador Fullstack:

- Carreira em alta
- Mudança de carreira
- Prof. Unicórnio: profissionais de alta performance

O desenvolvedor full stack entende a

conexão entre a experiência
do usuário ao usar uma interface (front-
end) e o que acontece nos servidores e
armazenamento de dados (back-end).

39
Metodologias

&

Processos

40
Começando o projeto do zero:

NOTION: https://www.notion.so/Projeto-Cliente-Problema-cbafa61914ea42b2a0023cce963e7d9d

41
Quais técnicas empregar:

NOTION: https://www.notion.so/Projeto-Cliente-Problema-cbafa61914ea42b2a0023cce963e7d9d

Não utilizar email ou PDF

42
Quais técnicas empregar:

43
Quais técnicas empregar:

44
FIGMA DESIGN SPRINT:
https://www.figma.com/community/file/988862190889287101

https://medium.com/agile-and-lean-thinking-management-3-0-and/quando-fa%C3%A7o-uma-lean-inception-940add21c949
45
Conhecendo o FIGMA
Interface de site

46
Design simples, bonito e intuitivo

https://br.pinterest.com/pin/329325791504631975/
Iniciando o
processo de
UX design

49
Double
Diamond

...consiste em
explorar um
problema ou uma
oportunidade de
melhoria de forma
mais ampla, para
depois focar em
ações direcionadas.

https://medium.com/aela/double-diamond-como-utilizar-essa-metodologia-na-pr%C3%A1tica-5dc8a5d878bb 50
Double
Diamond
... A combinação
entre os dois
diamantes, da
descoberta à entrega,
fará com que a
evolução do MVP
seja constante, tendo
sempre em paralelo
ao desenvolvimento
um track de
descoberta que
realizará pesquisas.

https://medium.com/aela/double-diamond-como-utilizar-essa-metodologia-na-pr%C3%A1tica-5dc8a5d878bb
51
Método: https://innovationenglish.sites.ku.dk/model/design-thinking/

https://www.nngroup.com/articles/design-thinking-practitioners-say/
52
Praticar e praticar...
Consultar site:
https://www.popwebdesign.net/popart_blog/en/2018/05/design-thinking-pri
nciples-in-ux-ui-design/

Desenvolvendo um aplicativo:
primeiros passos para criação do
produto com DD e Sprint.
Como uma empresa cria entregáveis?

1. Entender
2. Divergir
3. Decidir
4. Prototipar
5. Validar
53
Conhecendo o FIGMA
Escolha um produto e desenvolva
um mapa de empatia.
https://www.figma.com/file/56yJBJ6fbOJsVo6dmyiih2/FULLSTACK_MAP_EMPATHY?node-id=0%3A1

54
Leia e pratique bastante!
1. Não me faça pensa
2. O design do dia a dia

55
CRIATIVIDADE
BRAINSTORMING
PROBLEMA:
DEFINIR:
QUAL PRODUTO OU SERVIÇO?
PRETENDE ABRIR UM NEGÓCIO?
VOTAÇÃO.

------------------------------------------------
QUAL O NOME DA MARCA PARA O NEGÓCIO?
1. ESCREVA AS ALTERNATIVAS
2. CRIAR GRUPOS DE IDÉIAS
3. ESCOLHER GRUPO
4. ECOLHER IDÉIA PRINCIPAL
5. MARCA E IMAGEM
6. PRODUTO OU SERVIÇO E VALORES.

LINK FIGMA
https://www.figma.com/file/yMs6duA3pUPeOR5yKN1XjC/FULLSTACK_BRAIN?node-id=0%3A1
Diagrama de Afinidade
(CARD SORTING)

https://www.provalore.com.br/as-25-tecnicas-e-ferramentas-utilizadas-pelo-design-thinking/
Diagrama de Afinidade
(CARD SORTING)
Definição
É uma organização e agrupamento dos Cartões de Insights com base em
afinidade, similaridade, dependência ou proximidade, gerando um diagrama
que contém as macro áreas que delimitam o tema trabalhado, suas
subdivisões e interdependências.
Momento de utilização
Quando há uma grande quantidade de dados provenientes da pesquisa (desk
e/ou de campo), para identificar conexões entre temas e de áreas de
oportunidade para o projeto.
Aplicação
Após a ida a campo e ao final da Pesquisa Desk obtém-se uma massa de
dados cujos achados mais relevantes são capturados em Cartões
de Insights. Eles são organizados em uma mesa, no chão ou até mesmo
afixados na parede por uma equipe multidisciplinar, de forma colaborativa,
para não haver viés único na análise.

https://www.provalore.com.br/as-25-tecnicas-e-ferramentas-utilizadas-pelo-design-thinking/
Diagrama de Afinidade
(CARD SORTING)
Qual o conteúdo do site?

BRAINSTORMING

AGRUPAMENTO POR TEMA

SUBGRUPOS DOS TEMAS

DIAGRAMA FINAL OU SITE MAP

https://www.provalore.com.br/as-25-tecnicas-e-ferramentas-utilizadas-pelo-design-thinking/
Sitemap
http://www.aquarelasilkesign.com.br/

Desenvolver sitemap e wireframe de site pesquisado na web/ou empresa.

ARQ. DA INFORMAÇÃO-TAXONOMIA-ONTOLOGIA
Sitemap

Desenvolver sitemap e wireframe de site pesquisado na web/ou empresa.

Sitemap

GOCONQR:
https://www.goconqr.com/pt-BR

FLOWMAPP
https://app.flowmapp.com/projects/195366/sitemap/

LUCIDCHART
https://lucid.app/lucidchart/2c22fbab-a0c9-418b-82d5-9b759f206faa/edit?page=0_0#

CANVA
https://www.canva.com/design/DAEW4Zxu_3Y/BVX6CZskLYKUOmnqU5F8QA/edit

CRIA SITEMAP XML

https://www.xml-sitemaps.com/
Projeto do
design visual do
site

65
Projeto do design visual do site:

Processo Organização
LAYOUT Visualização
WIREFRAME dos elementos Visual do
ESBOÇO criativo PROTÓTIPO do site na
(MOCKUP) site
inicial /funcional web.
ESBOÇO

BRIEFING+SITEMAP

Organização dos LAYOUT

ESBOÇ
Processo WIREFRA
elementos PROTÓTIPVisualização
Visual do site
(MOCKU
O criativo inicial ME O do site na web.
/funcional P)
Sketch ou Esboço
WIREFRAME
MOCKUP

Organização dos
WIREFRA LAYOUT
ESBOÇ
Processo ME elementos PROTÓTIPVisualização
Visual do site
(MOCKU
O criativo inicial O do site na web.
/funcional P)
Wireframe
Wireframe

ADOBE XD
https://www.adobe.com/br/creativecloud/busi
ness/enterprise/.html

MOCKFLOW
https://www.mockflow.com/

BALSAMIQ
https://balsamiq.com/products/mockups/

Criar manualmente o wireframe e sitemap dos sites salvos.

Etapas
INSPIRAÇÃO:
Behance, Pinterest, etc

INSPIRAÇÃO:
Behance, Pinterest, etc

INSPIRAÇÃO:
Behance, Pinterest, etc

INSPIRAÇÃO:
Behance, Pinterest, etc
LAYOUT (MOCKUP)

Organização
Processo LAYOUT Visualização
ESBOÇ WIREF dos Visual do PROT
criativo (MOCK site do site na
O RAMEelementos ÓTIPO
inicial UP) web.
/funcional
Modelos de layouts: HTML-CSS

hero-section

https://mbcreative.ca/blog/15-hero-section-design-
inspiration/
12 no desktop, 8
no tablet e 4 no
celular. A maioria
das grades tem
larguras de
coluna de 60-
80px.

CANVAS
https://www.canva.com/pt_br/
recursos/grade-de-design/

https://elementor.com/blog/
grid-design/
Partes de uma página web
FRONT-END

CABEÇALHO(HEADER)

Elementos frontais(FRONT-
END)
1. Estrutura de
navegação(LINKS)
2. Página principal(HOME)
3. Logotipo(LOGO) CORPO(BODY)
4. Conteúdo(CONTENT)
5. Cabeçalho(HEADER)
6. Menu(MENU)
7. Propaganda(AD)
8. Barra de pesquisa(SEARCH)
9. Elementos de mídia(MEDIA)
10.Rodapé(FOOTER)
RODAPÉ(FOOTER)

https://www.pentaweb.es/partes-de-una-pagina-web/
ELEMENTOR
-PROTÓTIPO
-MAQUETE

Organização LAYO
Processo Visualização
ESBOÇ WIREF dos UT Visual do PROT
criativo do site na
O RAMEelementos (MOC site ÓTIPO
inicial web.
/funcional KUP)
Sitemap e Wireframe

EXEMPLO DE SITES:
https://br.pinterest.com/infnet/webdesign/
Conhecendo o FIGMA
Criando um site

80
Pesquisa na área de UX:
⬡ Perfil do cliente
⬡ Público alvo
⬡ Concorrentes diretos e indiretos

81
Projeto de telas:
⬡ Briefing
⬡ Escopo

⬡ Interações básicas

82
Pilares da experiência do usuário
⬡Conceitos ⬡Usabilidade
⬡Aspectos técnicos e subjetivos ⬡Estética
⬡Aplicações ⬡Arquitetura da informação
⬡Fluxos de interação e conteúdo

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

83
Olá!
Postura profissional,
portfólio e mercado de
trabalho UI/UX.

84
Instructions for use
EDIT IN GOOGLE SLIDES EDIT IN POWERPOINT®
Click on the button under the presentation Click on the button under the presentation
preview that says "Use as Google Slides preview that says "Download as PowerPoint
Theme". template". You will get a .pptx file that you
You will get a copy of this document on your can edit in PowerPoint.
Google Drive and will be able to edit, add or Remember to download and install the fonts
delete slides. used in this presentation (you’ll find the links
to the font files needed in the
You have to be signed in to your Google
Presentation design slide)
account.

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

85
Instructions for use
EDIT IN GOOGLE SLIDES EDIT IN POWERPOINT®
Click on the button under the presentation Click on the button under the presentation
preview that says "Use as Google Slides preview that says "Download as PowerPoint
Theme". template". You will get a .pptx file that you
You will get a copy of this document on your can edit in PowerPoint.
Google Drive and will be able to edit, add or Remember to download and install the fonts
delete slides. used in this presentation (you’ll find the links
to the font files needed in the
You have to be signed in to your Google
Presentation design slide)
account.

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

86
UX Project
Conduzindo pesquisas UX
e teste de conceitos
iniciais.

87
Arquitetura
da informação

88
Instructions for use
EDIT IN GOOGLE SLIDES
Click on the button under the presentation
preview that says "Use as Google Slides
Theme".
You will get a copy of this document on your
Google Drive and will be able to edit, add or
delete slides.
You have to be signed in to your Google
account.
https://www.digitalhouse.com/br/blog/o-que-e-arquitetura-da-informacao-e-como-aplica-la-em-seus-projetos
EDIT IN POWERPOINT®
Click on the button under the presentation
preview that says "Download as PowerPoint
template". You will get a .pptx file that you
can edit in PowerPoint.
Remember to download and install the fonts
used in this presentation (you’ll find the links
to the font files needed in the
Presentation design slide)
89
Instructions for use
Arquitetura da informação:

⬡ Organização de conteúdo

⬡ Conceitos

⬡ Identificação de Recursos

⬡ Nomenclatura para Web semântica

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

90
Fundamentos da
experiência do usuário
Interface gráfica - UI:
⬡ Princípios de design Gráfico
⬡ Interação.

91
Design UI voltado à usabilidade
⬡ Uso de cores ⬡ Desktop e mobile
⬡ Posicionamento de elementos ⬡ Responsividade
⬡ Tipografia para Aplicações web ⬡ Restrições de acessibilidade.

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

92
Interface de usuário versus usabilidade
⬡ Diferenças e conexões ⬡ Integração entre UI e UX

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

93
Design de interação (UI)
⬡ Conceitos e aplicações

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

94
Criando designs
de alta fidelidade e protótipos
com as ferramentas gráficas.

95
Ferramentas de prototyipação UI
⬡ Características ⬡ Opções do mercado
⬡ Tipos ⬡ Vantagens e desvantagens

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

96
Conhecimento

• Ferramentas de criação da
interface:

1. Photoshop
2. Figma
3. Adobe XD
4. After effect
5. Miro
6. Scketch
7. Zeplin

97
Design
responsivo.

98
Instructions for use
EDIT IN GOOGLE SLIDES EDIT IN POWERPOINT®
Click on the button under the presentation Click on the button under the presentation
preview that says "Use as Google Slides preview that says "Download as PowerPoint
Theme". template". You will get a .pptx file that you
You will get a copy of this document on your can edit in PowerPoint.
Google Drive and will be able to edit, add or Remember to download and install the fonts
delete slides. used in this presentation (you’ll find the links
to the font files needed in the
You have to be signed in to your Google
Presentation design slide)
account.

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

99
Fundamentos da
experiência do
usuário
Design com foco no usuário e
bem estar social.

100
Conhecimento

• Ética nas organizações e nos

negócios.
• Direitos autorais

10
1
Instructions for use
EDIT IN GOOGLE SLIDES EDIT IN POWERPOINT®
Click on the button under the presentation Click on the button under the presentation
preview that says "Use as Google Slides preview that says "Download as PowerPoint
Theme". template". You will get a .pptx file that you
You will get a copy of this document on your can edit in PowerPoint.
Google Drive and will be able to edit, add or Remember to download and install the fonts
delete slides. used in this presentation (you’ll find the links
to the font files needed in the
You have to be signed in to your Google
Presentation design slide)
account.

More info on how to use this template at www.slidescarnival.com/help-use-presentation-template

This template is free to use under Creative Commons Attribution license. You can keep the Credits slide or mention
SlidesCarnival and other resources used in a slide footer.

102
Thanks!
Any questions?
You can find me at:
@username
user@mail.me

103
2.
Extra Resources
For Business Plans, Marketing Plans, Project
Proposals, Lessons, etc
“ Quotations are commonly
printed as a means of
inspiration and to invoke
philosophical thoughts
from the reader.

105
1.
Transition headline
Let’s start with the first set of slides
This is a slide title
⬡ Here you have a list of items
⬡ And some text
⬡ But remember not to overload your slides
with content
Your audience will listen to you or read the
content, but won’t do both.

107
Big
concept
Bring the attention of your audience
over a key concept using icons or
illustrations

108
You can also split your content
White Black
Is the color of milk and Is the color of ebony and of
fresh snow, the color outer space. It has been the
produced by the symbolic color of elegance,
combination of all the solemnity and authority.
colors of the visible
spectrum.

109
In two or three columns
Yellow Blue Red
Is the color of gold, Is the colour of the clear Is the color of blood,
butter and ripe lemons. sky and the deep sea. It and because of this it
In the spectrum of is located between has historically been
visible light, yellow is violet and green on the associated with
found between green optical spectrum. sacrifice, danger and
and orange. courage.

110
A picture is worth a
thousand words
A complex idea can be
conveyed with just a single still
image, namely making it
possible to absorb large amounts
of data quickly.

111
Want big impact?
Use big image.

112
Use diagrams to explain your ideas
Q1 Q2 Q3 Q4

LOR IPS DOL LOR IPS DOL LOR IPS DOL LOR IPS DOL

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

LOREM

113
And tables to compare data

A B C

Yellow 10 20 7

Blue 30 15 10

Orange 5 24 16

114
Maps

our office

Find more maps at slidescarnival.com/extra-free-resources-icons-and-maps

115
89,526,124
Whoa! That’s a big number, aren’t you proud?

116
89,526,124$
That’s a lot of money

185,244 users
And a lot of users

100%
Total success!
117
 Our process is easy
Vestibulum congue tempus
1
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.

Vestibulum congue tempus

2
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.

Vestibulum congue tempus

3 Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.

118
Let’s review some concepts
Yellow
Is the color of gold, butter and
ripe lemons. In the spectrum of
visible light, yellow is found
between green and orange.
Yellow
Is the color of gold, butter and
ripe lemons. In the spectrum of
visible light, yellow is found
between green and orange.
Blue
Is the colour of the clear sky and
the deep sea. It is located
between violet and green on the
optical spectrum.
Blue
Is the colour of the clear sky and
the deep sea. It is located
between violet and green on the
optical spectrum.
Red
Is the color of blood, and
because of this it has historically
been associated with sacrifice,
danger and courage.
Red
Is the color of blood, and
because of this it has historically
been associated with sacrifice,
danger and courage.
119
 4000

3000

2000

1000

You can insert graphs from Excel or Google Sheets

120
Credits
Special thanks to all the people who made and
released these awesome resources for free:
⬡ Presentation template by SlidesCarnival
⬡ Photographs by Unsplash

121
Presentation design
This presentation uses the following typographies:
⬡ Titles: Lexend Deca
⬡ Body copy: Muli light
Download for free at:
https://www.lexend.com/
https://www.fontsquirrel.com/fonts/muli

You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide
if you need to create new slides or download the fonts to edit the presentation in PowerPoint®

122
Timeline

Yellow is the color of

Blue is the colour of the Red is the colour of danger Black is the color of ebony gold, butter and ripe White is the color of milk Blue is the colour of the
clear sky and the deep sea and courage and of outer space lemons and fresh snow clear sky and the deep sea

JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC

Yellow is the color of White is the color of milk Blue is the colour of the Red is the colour of danger Black is the color of ebony Yellow is the color of
gold, butter and ripe and fresh snow clear sky and the deep sea and courage and of outer space gold, butter and ripe
lemons lemons

123
Roadmap
Blue is the colour of the Red is the colour of danger Black is the color of ebony
clear sky and the deep sea and courage and of outer space

1 3 5

2 4 6

Yellow is the color of gold, White is the color of milk Blue is the colour of the
butter and ripe lemons and fresh snow clear sky and the deep sea

124
Gantt chart
Week 1 Week 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Task 1

Task 2 ◆

Task 3

Task 4 ◆

Task 5 ◆

Task 6

Task 7

Task 8

125
SWOT Analysis
STRENGTHS WEAKNESSES
Blue is the colour of the clear sky Yellow is the color of gold, butter
and the deep sea and ripe lemons

Black is the color of ebony and White is the color of milk and
of outer space fresh snow
OPPORTUNITIES THREATS

126
Business Model Canvas

Key Partners Key Activities Value Propositions Customer Relationships Customer Segments
Insert your content Insert your content Insert your content Insert your content Insert your content

Key Resources Channels

Insert your content Insert your content

Cost Structure Revenue Streams

Insert your content Insert your content

127
Funnel

AWARENESS Insert your content

DISCOVERY Insert your content

EVALUATION Insert your content

INTENT Insert your content

PURCHASE Insert your content

LOYALTY Insert your content

128
Team Presentation

Imani Jackson Marcos Galán Ixchel Valdía Nils Årud

JOB TITLE JOB TITLE JOB TITLE JOB TITLE
Blue is the colour of the clear Blue is the colour of the clear Blue is the colour of the clear Blue is the colour of the clear
sky and the deep sea sky and the deep sea sky and the deep sea sky and the deep sea

129
 Competitor Matrix
HIGH VALUE 2

Competitor
Compet
itor
Our company

Competitor

HIGH VALUE 1
LOW VALUE 1

Competitor

Competitor Competitor

LOW VALUE 2

130
Weekly Planner
SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

09:00 - 09:45 Task Task Task Task Task Task Task

10:00 - 10:45 Task Task Task Task Task Task Task

11:00 - 11:45 Task Task Task Task Task Task Task

12:00 - 13:15 ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time

13:30 - 14:15 Task Task Task Task Task Task Task

14:30 - 15:15 Task Task Task Task Task Task Task

15:30 - 16:15 Task Task Task Task Task Task Task

131
Extra resources

132
SlidesCarnival icons are editable shapes.

This means that you can:

⬡ Resize them without losing quality.
⬡ Change fill color and opacity.
⬡ Change line color, width and style.

Isn’t that nice? :)

Examples:

Find more icons at

slidescarnival.com/extra-free-resources-icons-and-m
aps

133
Diagrams and infographics

134
You can also use any emoji as an icon!
And of course it resizes without losing quality.

How? Follow Google instructions

https://twitter.com/googledocs/status/730087240156643328

✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂
😉😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈
🎨🏈🏰🌏🔌🔑 and many more...
135
 Free templates for all your presentation needs

For PowerPoint and 100% free for personal or Ready to use, professional Blow your audience away
Google Slides commercial use and customizable with attractive visuals

136