1

Creative Brief

  • Project Overview

    O projeto eLearning Templates começou como uma forma de simplificar meu próprio processo de desenvolvimento, mas rapidamente evoluiu para um kit de ferramentas usado em vários contratos com clientes. Abrangendo oito anos e refinados em três meses intensivos, esses nove modelos de Storyline foram criados para eliminar o trabalho de produção redundante e, ao mesmo tempo, elevar a qualidade do design.

  • Goals

    Crie um sistema de modelos de nível profissional, pronto para HTML5, que permita a criação rápida e escalável de conteúdo para designers instrucionais, mantendo a acessibilidade, a flexibilidade e um padrão de design visual limpo.

  • Challenges
    • Garantindo o desempenho entre dispositivos e HTML5 em diferentes pilhas de tecnologia do cliente
    • Incorporando acessibilidade e lógica de interação sem aumentar a complexidade dos slides
    • Projetando para a adaptabilidade em todos os setores, sistemas de marca e formatos de aprendizagem
    • Equilibrando a simplicidade para usuários não técnicos com profundidade suficiente para usuários avançados
  • Timeline
    2017—2025
  • Team Size

    1 membro

  • Roles

    1 membro

  • Tools

    Adobe Photoshop, Illustrator, Cinema 4D, Render Engine, Adobe Audition, Articulate Storyline 360, Audacity, PowerPoint

  • Outcome

    Os modelos foram criados para apoiar metas comuns de aprendizado, como:

    • Recuperação de conhecimento
    • Compreensão do conceito
    • Treinamento processual
    • Tomada de decisão baseada em cenários
    • Validação de competência por meio de questionários e camadas de feedback

    Cada layout e interação foram projetados para garantir o alinhamento com objetivos de aprendizagem bem definidos em toda a Taxonomia de Bloom, desde lembrar e entender até aplicar e avaliar.

2

Live Product Simulation

3

Motion Principles

Esses modelos refletem os princípios da teoria da carga cognitiva, do aprendizado multimídia e da prática de recuperação. Ao remover elementos de design estranhos e focar em hierarquias visuais claras, eles ajudam a reduzir o esforço mental e melhorar a retenção. Os modelos suportam a lógica de avaliação formativa e sumativa, permitindo uma medição eficaz dos resultados da aprendizagem.

Primary

Seconary

Tertiary

Key Motion Components

  • Primary Motion

    Esses modelos se tornaram um ativo fundamental em meu kit de ferramentas de design instrucional, usado para acelerar a entrega do projeto, manter a consistência e escalar a produção de acordo com as diversas necessidades e cronogramas do cliente.

  • Secondary Motion
    • 9 modelos versáteis e testados pelo cliente
    • Usado em vários setores e tipos de cursos
    • Reduza o tempo de desenvolvimento em 50 a 60%
    • Acessível, visualmente aprimorado e pronto para implantação em grande escala
  • Tertiary Motion
    • Construir uma vez e reutilizar com propósito é como você dimensiona o design instrucional
    • A acessibilidade e a flexibilidade devem ser incorporadas à base, não adaptadas
    • Um sistema bem elaborado se torna um facilitador criativo, não uma restrição
  • Rationale

    Cada modelo foi criado com as melhores práticas alinhadas às WCAG, incluindo ordem de foco adequada, navegação pelo teclado e compatibilidade com leitores de tela. O contraste de cores foi cuidadosamente considerado, e a dependência mínima de sinais visuais garante que o conteúdo seja acessível a uma ampla variedade de alunos. Os modelos são projetados para serem inclusivos por padrão, exigindo ajustes mínimos para atender à maioria dos padrões de acessibilidade da empresa.

Easing Curves & Durations

navigational transitions

Custom Animated components

Infographics

4

Engineering Implentation

Approach

Prototype Setup

My work drives results. Let’s talk about yours.

1

Build Overview

Project
Modelos de eLearning
  • Client
    Vários clientes
  • Company
    Jessé Mercado
  • Category
    Produto digital/Design instrucional
  • Timeline / Duration
    2017—2025
  • Team Size

    1 membro

  • Role

    Designer instrucional, Desenvolvedor, Designer visual

  • Software

    Adobe Photoshop, Illustrator, Cinema 4D, Render Engine, Adobe Audition, Articulate Storyline 360, Audacity, PowerPoint

2

Creative Rationale

O projeto eLearning Templates começou como uma forma de simplificar meu próprio processo de desenvolvimento, mas rapidamente evoluiu para um kit de ferramentas usado em vários contratos com clientes. Abrangendo oito anos e refinados em três meses intensivos, esses nove modelos de Storyline foram criados para eliminar o trabalho de produção redundante e, ao mesmo tempo, elevar a qualidade do design.

Goal

Crie um sistema de modelos de nível profissional, pronto para HTML5, que permita a criação rápida e escalável de conteúdo para designers instrucionais, mantendo a acessibilidade, a flexibilidade e um padrão de design visual limpo.

Process

  1. Descoberta: Identificou as necessidades comuns dos clientes em todos os projetos para definir o escopo do modelo
  2. Design e desenvolvimento: Criou nove modelos distintos (questionários, iniciantes, bibliotecas, interações) em várias proporções e estilos visuais
  3. Teste e controle de qualidade: Realizou testes extensivos de compatibilidade, acessibilidade e experiência do usuário do navegador
  4. Iteração: Modelos refinados com base no feedback real dos clientes e nos padrões em evolução

Key Highlights

Detailed Insights

Deep Dives

Learning Science

Esses modelos refletem os princípios da teoria da carga cognitiva, do aprendizado multimídia e da prática de recuperação. Ao remover elementos de design estranhos e focar em hierarquias visuais claras, eles ajudam a reduzir o esforço mental e melhorar a retenção. Os modelos suportam a lógica de avaliação formativa e sumativa, permitindo uma medição eficaz dos resultados da aprendizagem.

2

Creative Rationale

O projeto eLearning Templates começou como uma forma de simplificar meu próprio processo de desenvolvimento, mas rapidamente evoluiu para um kit de ferramentas usado em vários contratos com clientes. Abrangendo oito anos e refinados em três meses intensivos, esses nove modelos de Storyline foram criados para eliminar o trabalho de produção redundante e, ao mesmo tempo, elevar a qualidade do design.

Goal

Crie um sistema de modelos de nível profissional, pronto para HTML5, que permita a criação rápida e escalável de conteúdo para designers instrucionais, mantendo a acessibilidade, a flexibilidade e um padrão de design visual limpo.

Challenges

  • Garantindo o desempenho entre dispositivos e HTML5 em diferentes pilhas de tecnologia do cliente
  • Incorporando acessibilidade e lógica de interação sem aumentar a complexidade dos slides
  • Projetando para a adaptabilidade em todos os setores, sistemas de marca e formatos de aprendizagem
  • Equilibrando a simplicidade para usuários não técnicos com profundidade suficiente para usuários avançados

Process

  1. Descoberta: Identificou as necessidades comuns dos clientes em todos os projetos para definir o escopo do modelo
  2. Design e desenvolvimento: Criou nove modelos distintos (questionários, iniciantes, bibliotecas, interações) em várias proporções e estilos visuais
  3. Teste e controle de qualidade: Realizou testes extensivos de compatibilidade, acessibilidade e experiência do usuário do navegador
  4. Iteração: Modelos refinados com base no feedback real dos clientes e nos padrões em evolução

Impact and Results

Esses modelos se tornaram um ativo fundamental em meu kit de ferramentas de design instrucional, usado para acelerar a entrega do projeto, manter a consistência e escalar a produção de acordo com as diversas necessidades e cronogramas do cliente.

Measurable Outcomes

  • 9 modelos versáteis e testados pelo cliente
  • Usado em vários setores e tipos de cursos
  • Reduza o tempo de desenvolvimento em 50 a 60%
  • Acessível, visualmente aprimorado e pronto para implantação em grande escala

Takeaways

  • Construir uma vez e reutilizar com propósito é como você dimensiona o design instrucional
  • A acessibilidade e a flexibilidade devem ser incorporadas à base, não adaptadas
  • Um sistema bem elaborado se torna um facilitador criativo, não uma restrição

1

The brief

O projeto eLearning Templates começou como uma forma de simplificar meu próprio processo de desenvolvimento, mas rapidamente evoluiu para um kit de ferramentas usado em vários contratos com clientes. Abrangendo oito anos e refinados em três meses intensivos, esses nove modelos de Storyline foram criados para eliminar o trabalho de produção redundante e, ao mesmo tempo, elevar a qualidade do design.

Goal

Crie um sistema de modelos de nível profissional, pronto para HTML5, que permita a criação rápida e escalável de conteúdo para designers instrucionais, mantendo a acessibilidade, a flexibilidade e um padrão de design visual limpo.

Challenges

  • Garantindo o desempenho entre dispositivos e HTML5 em diferentes pilhas de tecnologia do cliente
  • Incorporando acessibilidade e lógica de interação sem aumentar a complexidade dos slides
  • Projetando para a adaptabilidade em todos os setores, sistemas de marca e formatos de aprendizagem
  • Equilibrando a simplicidade para usuários não técnicos com profundidade suficiente para usuários avançados

Learning Objectives

Os modelos foram criados para apoiar metas comuns de aprendizado, como:

  • Recuperação de conhecimento
  • Compreensão do conceito
  • Treinamento processual
  • Tomada de decisão baseada em cenários
  • Validação de competência por meio de questionários e camadas de feedback

Cada layout e interação foram projetados para garantir o alinhamento com objetivos de aprendizagem bem definidos em toda a Taxonomia de Bloom, desde lembrar e entender até aplicar e avaliar.

Learning Science

Esses modelos refletem os princípios da teoria da carga cognitiva, do aprendizado multimídia e da prática de recuperação. Ao remover elementos de design estranhos e focar em hierarquias visuais claras, eles ajudam a reduzir o esforço mental e melhorar a retenção. Os modelos suportam a lógica de avaliação formativa e sumativa, permitindo uma medição eficaz dos resultados da aprendizagem.

Learning Methodolgy

Os modelos são baseados em um design modular baseado em cenários, permitindo o aprendizado na hora certa, a repetição espaçada e a progressão orientada por avaliações. Eles oferecem suporte a caminhos de aprendizado lineares e não lineares, tornando-os ideais para estruturas de aprendizado adaptáveis e ambientes mistos. As interações são criadas para se alinharem à tomada de decisões e às verificações de conhecimento do mundo real.

Process

  1. Descoberta: Identificou as necessidades comuns dos clientes em todos os projetos para definir o escopo do modelo
  2. Design e desenvolvimento: Criou nove modelos distintos (questionários, iniciantes, bibliotecas, interações) em várias proporções e estilos visuais
  3. Teste e controle de qualidade: Realizou testes extensivos de compatibilidade, acessibilidade e experiência do usuário do navegador
  4. Iteração: Modelos refinados com base no feedback real dos clientes e nos padrões em evolução

Impact and Results

Esses modelos se tornaram um ativo fundamental em meu kit de ferramentas de design instrucional, usado para acelerar a entrega do projeto, manter a consistência e escalar a produção de acordo com as diversas necessidades e cronogramas do cliente.

Measurable Outcomes

  • 9 modelos versáteis e testados pelo cliente
  • Usado em vários setores e tipos de cursos
  • Reduza o tempo de desenvolvimento em 50 a 60%
  • Acessível, visualmente aprimorado e pronto para implantação em grande escala

Takeaways

  • Construir uma vez e reutilizar com propósito é como você dimensiona o design instrucional
  • A acessibilidade e a flexibilidade devem ser incorporadas à base, não adaptadas
  • Um sistema bem elaborado se torna um facilitador criativo, não uma restrição

Accessibility & inclusion

Cada modelo foi criado com as melhores práticas alinhadas às WCAG, incluindo ordem de foco adequada, navegação pelo teclado e compatibilidade com leitores de tela. O contraste de cores foi cuidadosamente considerado, e a dependência mínima de sinais visuais garante que o conteúdo seja acessível a uma ampla variedade de alunos. Os modelos são projetados para serem inclusivos por padrão, exigindo ajustes mínimos para atender à maioria dos padrões de acessibilidade da empresa.

If the work speaks to you, let's build something.

3

Results

Real learning, real results.
Explore the live experience in action.

Open Live Site

Real learning, real results.
Explore the live experience in action.

Open Live Site

Real learning, real results.
Explore the live experience in action.

Open Live Site

ELearning Templates

0% QA TestedError-free and launch-ready
0 Templates Modular and production-ready‍

My work drives results. Let’s talk about yours.

page name