Prototipagem é tirar as ideias e explorações de dentro da cabeça e colocá-las no mundo mas, por onde começar?
Navegue pelo infográfico e conheça algumas possibilidades!
Prototipagem é tirar as ideias e explorações de dentro da cabeça e colocá-las no mundo.
Um protótipo pode ser qualquer coisa que tome uma forma física - seja uma parede de post-its, uma atividade de representação, um espaço, um objeto, uma interface ou até mesmo um storyboard.
A resolução de um protótipo deve se relacionar ao seu progresso no projeto. Nas primeiras explorações, mantenha seus protótipos simples, rústicos e rápidos para que você se permita aprender rapidamente e investigar diferentes possibilidades.
Protótipos são mais bem sucedidos quando as pessoas (o grupo de trabalho, o usuário ou outros) podem experimentá-lo e interagir com ele. O que se aprende com essas interações pode ajudar a desenvolver empatia além de construir melhores soluções.
Algumas vezes pode ser difícil iniciar um projeto, a linguagem especifica de cada área do conhecimento pode ser uma barreira assim como uma língua estrangeira. Pensando nisso fizemos um glossário com as palavras-chave do universo da prototipagem.
Aplicativo (App): Um programa de computador projetado para uma tarefa ou uso específico. Essa terminologia é mais comum quando nos referimos a programas que rodam em aparelhos celulares.
CNC: Sigla para Comando Numérico Computadorizado, uma forma de controle de maquinário por meio de comandos vindos de um computador. É o sistema por trás das máquinas de fabricação digital.
Design Thinking: É uma abordagem de trabalho centrado nas pessoas que através da iteração e uma sequência lógica de passos propõe solucionar problemas de forma efetiva. A colaboração é uma palavra forte no design thinking, onde todos tem papel importante no processo e devem discutir e trabalhar a favor de um mesmo conceito.
Eletrônica Digital: É uma área de estudos da Eletrônica, que mesmo sendo recente é a mãe da grande maioria das tecnologias existentes hoje. É base fundamental para a Informática e Telecomunicações e seus conceitos estão presentes em diversos aparelhos eletro-eletrônicos, como os celulares, MP3, computadores, etc.
Hack: Do verbo Inglês "to hack", que significa "cortar" é um termo que refere-se à reconfiguração ou reprogramação de um sistema de função de forma que não autorizada pelo proprietário, administrador ou designer. O termo tem vários significados relacionados com a tecnologia e ciência de computação: pode se referir a uma correção ou melhoria rápida e inteligente de um problema de programa de computador, ou pode significar uma desajeitada ou deselegante (embora relativamente rápida) solução para um problema de informática, como um "remendo" ou "gambiarra".
Software: Um termo geral para toda a parte lógica de sistemas de computadores. Em geral pode ser entendido como sinônimo de um programa de computador. Aplicativos são software e o sistema operacional de um computador ou celular também é software.
IoT: A Internet das Coisas (IoT, pela sigla em inglês) é uma rede global crescente de objetos habilitados para Internet que transferem dados e se comunicam entre si. Todos esses objetos têm identificadores exclusivos e podem variar desde dispositivos móveis até eletrodomésticos e carros.
Mapa de Navegação: Um documento que exibe todo o caminho que é feito entre telas dentro do produto. Ele é importante, tanto nos passos iniciais do produto, para projetar o fluxo de navegação; quanto nas etapas mais à frente, para guiar a equipe.
MVP (Minimum Viable Product): Em português: produto minimamente viável. É uma forma de se lançar um produto no qual se busca utilizar o mínimo de recursos possível e ainda assim ter um produto funcional e testar sua aceitação.
Prototipagem rápida: Outro nome para Fabricação Digital. A prototipagem rápida é a criação de modelos físicos a partir de arquivos digitais e tem esse nome pois, com as recentes tecnologias, é uma forma de prototipagem que tende a economizar bastante tempo em relação aos métodos de prototipagem anteriores.
UI (User Interface): Onde o usuário interage com o produto. É o amontoado de botões, col-md-6s, cores, títulos, textos, micro-interações e etc. Todos esses detalhes devem ser coerentes com a experiência do usuário e a identidade da marca do produto em questão.
Wireframe: Um modelo 3D digital de algo em que são exibidas apenas linhas e os locais onde elas se unem ou, no caso de sites e aplicativos, um plano básico para um website que exibe apenas os tipos de informação que ele conterá e como essa informação é organizada, mas que não inclui características de design como cor ou detalhes específicos.
Boneco: Também chamado de Mock up é a montagem em formato tridimensional de determinado material a ser impresso, que serve como referência para a sua reprodução em escala. É muito utilizado para projetos de embalagens. Este termo também é utilizado na área de fotografia e filmagem, quando materiais são montados em escalas normais ou diferenciadas (maior ou menor), para que a captação da imagem seja perfeita.
Desenhos vetoriais: São desenhos produzidos a partir de softwares vetores (Corel DRAW, Freehand, Illustrator, Inkscape). Todos os elementos visuais possuem coordenadas matemáticas de pontos e curvas.
Eletrônica Analógica: A eletrônica analógica se baseia na manipulação das tensões e correntes existentes num circuito, formando circuitos capazes de realizar amplificações de sinais, comutação de máquinas e possibilitou a diversificação das telecomunicações que a principio só trabalhavam com modulações de sinais. Os elementos chaves da eletrônica analógica são os chamados transistores, resistores, capacitores, bobinas, potenciômetros e circuitos integrados, cristais e outros.
Fabricação Digital: Fabricação Digital é a produção de objetos físicos, a partir de modelos digitais. Suas formas mais comum são a Impressão 3D, a fresa CNC e o corte à laser.
Hackaton: Existem diferentes desdobramentos, mas em geral, Hackaton é uma maratona de programação com duração de tempo curta onde os participantes participam de uma imersão em torno da resolução de um problema.
Hardware: O maquinário físico e dispositivos que compõem um sistema do computador. Esse termo também é utilizado para a parte física de dispositivos em geral (TVs, celulares, consoles de video-game).
Inteligência artificial (IA): A Inteligência artificial faz com que máquinas aprendam padrões e tomem decisões por conta própria a partir deles. Na indústria, ela permite um grande aumento da produção com custo muito menor, tornando as fábricas mais competitivas e eficientes.
Iteração: Ideia de repetição, visando sempre a constante evolução e aprendizado no processo.
Mock-up: um modelo em tamanho real de algo que ainda não foi construído, que exibe como ficará ou operará. A tradução da palavra para o português é “maquete”, e é exatamente isso que se trata: um modelo mais detalhado do produto final, em que as questões estéticas são importantes e as funcionalidades básicas são demonstradas de uma forma estática.
Persona: Basicamente, um documento que descreve um personagem que sintetiza quem é o usuário do produto. As personas são criadas a partir de dados e/ou entrevistas com usuários.
Protótipo: Pode aparecer em várias formas, como os de baixa, média e alta fidelidade. Geralmente, é uma construção do produto que serve para testar algumas hipóteses e se o produto é entendível na perspectiva do usuário. Ainda, protótipos são exemplos iniciais e funcionais de um produto. Eles não têm todas as características planejadas, senão seriam o produto final propriamente dito, mas permitem ao usuário interagir como se o fizesse com o produto final real. Dessa forma, não são modelos estáticos como os mock-ups, e sim simuladores com a intenção de planejar e, principalmente, avaliar critérios de usabilidade e de experiência de usuário.
O segredo de uma tarefa bem executada muitas vezes recai sobre o uso da ferramenta mais adequada. Pensando nisso, selecionamos algumas ferramentas que podem ser muito úteis em diferentes etapas de um projeto, envolvendo diferentes áreas de interesse dentro da Cultura Digital.
Uma plataforma online para ensino e aprendizagem de programação por meio de diferentes recursos como desafios, jogos, aulas expositivas, etc.
É possível desenvolver jogos, programas e aplicativos partindo de projetos pré-existentes ou começando um novo do zero.
visite o site tutorialO Scratch é um software de programação em blocos desenvolvido pelo Instituto Tecnológico de Massachussets, o MIT. Com ele, é possível programar on-line e off-line, criando jogos, animações, histórias interativas, de forma simples e lúdica.
O Scratch é uma ferramenta criada para o ensino de programação para crianças, mas que vem ganhando maior complexidade ao longo dos anos. Voltada para a criação de jogos e animações, também pode ser utilizada para a criação de apresentações interativas, quizes, etc.
visite o site tutorialPermite a criação de um app funcional a partir de uma Planilha Google com diferentes informações.
Partindo de templates prontos e de uma planilha, é possível criar um protótipo de aplicativo em poucos minutos. Também possui alguns recursos um poucos mais avançados para interatividade.
visite o site tutorialFerramenta que permite a criação de protótipos de aplicativos totalmente interativos e de alta fidelidade com ótimas possibilidades de Interface.
É possível partir de templates para a criação de um protótipo com uso de diferentes tipos de elementos gráficos e interativos.
visite o site tutorialPlataforma para criação de aplicativos mais sofisticados, a partir de programação em blocos, sem escrita de linhas de código. O produto gerado pode ser disponibilizado para Android e iOS.
É uma ferramenta bastante simples e acessível. A ferramenta funciona dividido em duas partes: A primeira é a parte de Design, que permite ao usuário criar o design de um aplicativo e a segunda parte é a linguagem de blocos, projetada pelo MIT para adicionar lógica a interface criada.
visite o site tutorialPlataforma para criação de aplicativos completamente funcionais por meio de blocos. Criada pelo MIT para simplificar a programação de apps, possui muitas possibilidades.
O App Inventor é um ambiente de programação de fácil utilização para os iniciantes na área de programação para celular. Possibilita o desenvolvimentos de aplicativos para celular mesmo sem domínio da lógica de programação.
visite o site tutorialFerramenta para criação de WireFrames baseada na simplicidade e colaboratividade.
A partir de stencils de ícones, botôes e outros, permite a prototipagem de interfaces de usuário e a criação de wireframes
visite o site tutorialFerramente de Design colaborativa, para uso em equipes voltada para a criação de Wireframes e prototipagem de interfaces.
Prototipagem de navegação de aplicativos, interfaces, interações de usuários e outros recursos em apenas uma plataforma.
visite o site tutorialAplicativo de prototipagem de produtos digitais
Criação de links entre páginas para protipagem da navegação entre diferentes páginas de um aplicativo
visite o site tutorialAplicativo para criação de telas interativas para prototipagem de apps.
Permite programar a interação entre diferentes telas de um protótipo de aplicativo para simular a usabilidade.
visite o site tutorialFeramenta de prototipagem rápida de aplicativos , telas e interface de usuário em geral.
Usa um sistema de links para criar interação entre diferentes telas que permitem toques, arrastes de mouse e outras interações.
visite o site tutorialCanva é uma plataforma de design gráfico que permite a criação para mídia social, apresentações, pôsteres e outros conteúdos visuais. Está disponível online e em dispositivos móveis e possui várias imagens, fontes, modelos e ilustrações.
Partindo de exemplos e templates, é possível criar cartazes, posts, banners e outras peças gráficas de bom apelo visual com muita facilidade.
visite o site tutorialO Adobe Spark Post é um App que permite de maneira simples e rápida a criação de logos, banners, flyers e outros gráficos incríveis para qualquer ocasião.
Cria banners, flyers, cartazes, posts e outros a partir de templates, imagens, fotos e recursos gráficos diversos.
visite o site tutorialO Padlet é um site da Internet que permite que você colabore com outros usuários, fornecendo textos, fotos, links e outros conteúdos. Cada espaço colaborativo é chamado de "mural", podendo ser usado como um quadro de avisos particular.
Professores e empresas utilizam o Padlet para encorajar conversas criativas multimídia e brainstorming.
visite o site tutorialSite que possibilita a criação, num mural virtual, de notas contendo texto, imagens, vídeos e outros recursos midiáticos.
Permite a criação, em tempo real, de notas contendo diferentes recursos midiáticos. Os usuários podem, em tempo real, construir mapas conceituais, compartilhar mensagens, debater sobre temas geradores etc.
visite o site tutorialFerramenta para elaboração, edição e compartilhamento de vídeos explicativos. Permite criação de animação, gravação de voz, upload de fotos e vídeos e outra imensidão de ferramentas e recursos.
Recursos visuais bonitos, interativos, formato leve e permite uso de várias ferramentas como desenho, vídeo, recursos 3D.
visite o site tutorial tutorialAplicativo para gravação, edição e distribuição de podcast.
Permite fazer podcast com o celular, pode ser gravado sozinho ou com outra pessoa, discente pode interagir mandando mensagens de voz que pode ser integrada ao podcast, além de adicionar músicas, efeitos sonoros. Ele armazena o conteúdo de forma gratuita e o aluno pode escutar sem precisar ter uma conta.
visite o site tutorialFerramenta digital que permite a criação de um jornal on line
Essa ferramenta apresenta também versão em português e permite a produção de um jornal de determinada temática.
visite o site tutorialO Google Sites é uma plataforma da Google em que é possível construir e gerenciar gratuitamente um site. É possível personalizá-lo, inserir vídeos, fotos e textos, além de disponibilizá-lo à todos ou à um grupo restrito de pessoas.
Ferramenta de fácil utilização, gratuita e com muitos recursos disponíveis.
visite o site tutorialÉ uma plataforma online de criação e edição de sites, que permite aos usuários criar sites em HTML5 e sites Mobile.
Wix.com oferece aos usuários da web a possibilidade de criar um site profissional, independentemente de conhecimento prévio em programação ou design.
visite o site tutorialPixton é um site que permite criar histórias em quadrinho sem precisar instalar. Pode escolher personagens, cenários...Permite o uso gratuito por determinado tempo, posterior a esse tempo é possivel aderir a pacotes, inclusive existe um próprio para estudantes. É fácil de manusear, está em português, o gráfico é bem bonito e pode-se construir com peças predeterminadas.
Para um ínicio em criação de HQs é interessante que já se tenham elementos pré estabelecidos, acho que nesse primeiro momento se envolver com a narrativa é importante e esse formato mais de compor os cenários (ou seja não ter que criá-los do zero) permite maior otimização do tempo e abre possibilidades de despertar a vontade de criar posteriormente.
visite o site tutorialO Boords é um web-app para criar storyboards de maneira simples.
O Boords é uma ferramenta baseada na web, que facilita a adição, remoção, reordenação e substituição de conteúdo para tornar o storyboard perfeito de forma rápida e fácil. Você compartilhar o seu trabalho facilmento exportando como PDF personalizado, ou através de um link privado.
visite o site tutorialFerramenta online e gratuita para criação de storyboards voltados para ensino.
Ferramenta gratuita com possibilidade de criação de storyboards voltados para o aprendizagem, educação, negócios, com diversos recursos de imagens para ser construídos.
visite o site tutorialPlataforma colaborativa online projetada para trabalho em equipes, e possibilita a criação de storyboards, mapas mentais e fluxogramas.
A ferramenta é simples de usar e intuitiva. Oferece uma boa diversidade de templates e integração com outros Apps.
visite o site tutorialServiço de transferência de arquivos grátis, ideal para compartilhamento de grandes arquivos via internet.
Transferência de até 2GB de dados no plano gratuito por meio do envio e compartilhamento de um link.
visite o site tutorialAnimaker é um editor de vídeo e animação com produção e armazenamento, permitindo a criação de vídeos animados através de personagens e cenários pré-produzidos.
Proporciona o estímulo à criatividade, podendo ser um trabalho executado individualmente ou em trabalho colaborativo, através da divisão de tarefas ou integração de ações. Também uma ferramenta para criação de animações para diversas plataformas digitais como Youtube, Facebook, Instagram e outros.
visite o site tutorialPlataforma online para criação de videos animados e apresentações animadas, baseada na nuvem.
Partindo de templates, é possível criar uma animação visual com diferentes elementos gráficos.
visite o site tutorialEditor de áudio gratuito, livre e multiplataforma
Permite a edição profissional de trilhas de áudio com cortes, remoção de ruído, adição de efeitos com possibilidade de trabalho em diversas pistas simultaneamente.
visite o site tutorialFerramenta online para edição de vídeos
Funcionando completamente online, você faz upload dos vídeos ou pode escolher em uma biblioteca as filmagens para serem editadas na plataforma. Também oferece música e fotos para a edição.
visite o siteSoftware livre e gratuito para edição profissional de vídeos.
O Lightwork é um software completo para edição profissional de vídeos. Ideal para cortes, adição de efeitos, transições, textos e criações visuais mais complexas.
visite o site tutorialPlataforma para criação de conteúdo audiovisual com foco em redes sociais.
Com uma grande biblioteca de filmagens "stock", é possível compor imagens na criação de um vídeo por meio de uma ferramenta online.
visite o site tutorialTrata-se de um simulador digital para circuitos elétricos e eletrônicos.
Existe uma versão gratuita (demo). Fácil instalação. Permite o desenho e simulação com uma biblioteca de dispositivos bem completa.
visite o site tutorialFerramenta que auxilia na criação de códigos para arduino e na montagem de diferentes hardwares
Com esta ferramenta, você pode adicionar os componentes eletrônicos e sensores que deseja usar e o sistema já oferece um exemplo de código para Arduino para ser usado com o hardware escolhido.
visite o site tutorialFerramenta integrada à platadorma Arduino que permite criar códigos funcionais online, sem a necessidade de se instalar a IDE do Arduino.
Esta ferramenta possui todas as funcionalidades de escrita de um código arduino e, com ela, você pode conectar uma placa (Hardware) arduino para testar seu projeto
visite o sitePlataforma que integra diferentes serviços online e cria interações entre eles do tipo "Se isso, então aquilo"
IFTTT é uma das mais conhecidas ferramentas de Internet das Coisas que não precisa de escrita de códigos. É possível integrar diferentes serviços online e criar condições para essas integrações, como por exemplo, enviar um Email para seus contatos no dia de Natal.
visite o site tutorialPlataforma para integração de aplicativos nas nuvens similar ao IFTTT
É possível criar desde integrações simples, até workflows mais complexos entre diferentes aplicativos online.
visite o site tutorialAplicativo de celular para visualização de valores de resistores, cálculos de resistências e outros circuitos simples.
Possui uma série de utilidades relacionadas à eletrônica analógica com destaque para a tabela de códigos de cores de Resistores.
visite o site tutorialCriador de engrenagens online, ideal para uso em corte à laser ou impressão 3D
A partir de parâmetros customizáveis é possível criar diferentes tipos e tamanhos de engrenagens que podem ser baixadas, impressas ou cortadas à laser.
visite o siteCriador de caixas online para uso em corte à laser
Ferramenta para criação de diferentes tipos de caixas para corte à laser. Totalmente online, permite a customização de tamanhos, encaixes e outros parâmetros
visite o siteCriador online de Planos de Corte para corte à laser
Ferramenta online que permite encontrar a forma ideal de montar um plano de corte para diferentes desenhos ao mesmo tempo.
visite o siteFerramenta livre e gratuita para ilustração digital, desenho e edição de fotos
GIMP é um editor de imagem livre e gratuito com diversas ferramentas e funcionalidades. É uma ferramenta de desenho profissional que permite também customizações em sua interface.
visite o site tutorialTrata-se de uma ferramenta digital que permite criar e visualizar figuras em três dimensões e também permite desenhar circuitos elétricos e eletrônicos.
Uso gratuito. Não é necessária a instalação, pois trata-se de uma ferramenta on-line. É possível fazer modelos 3D com uma grande opção de formas.
visite o site tutorialSketchUp é um software próprio para a criação de modelos em 3D no computador.
É um software intuitivo e simples de usar, e possibilita a elaboração de várias formas e volumes. Épossivel trabalhar com modelos 3D e 2D e possui uma versão FREE online.
visite o site tutorialFerramenta nova para desenho 3D auxiliado por Realidade Virtual
Uma grande novidade, o Google Blocks utiliza Realidade Virtual para a criação de desenhos e modelos 3D
visite o site tutorialÉ um software livre para editoração de imagens e desenho vetorial.
Permite a criação de desenhos a mão livre, tranformações de dimensão e forma de diversos objetos, criação de várias camadas, editor de cores , suporte de texto e renderização. Ideal para modelos 2D.
visite o site tutorialAo explorar um mundo novo, precisamos de um guia. Confira abaixo alguns projetos, sites, publicações e canais de referência que podem servir de inspiração para seu projeto. Caso precise de ideias, ferramentas, tutoriais ou deseje saber das novidades de diferentes áreas criativas, vale a pena visitar alguns Links dessa página.
Repositório de tutoriais de diversos tipos: desde marcenaria até culinária, passando por eletrônica e projetos para a casa.
visite o sitePlataforma educacional ligada ao Google Earth. É possível explorar todo o mundo visualmente, além de criar mapas e roteiros.
visite o siteSite da revista MAKE. Com ideias, inspiração, projetos, reviews e diversos assuntos dentro do campo da cultura Maker.
visite o siteSite com diversos tutoriais e aulas a respeito de diversas linguagens ( html / CSS ) e frameworks ( bootstrap ) para a programação de sites.
visite o SiteWiki House é um projeto de criação de casas que podem ser fabricadas com uso de uma Fresadora CNC. A ideia é fazer download dos projetos e módulos e cortá-los no local da construção da casa
visite o siteArduino é uma plataforma para prototipagem em eletrônica digital que integra hardware e programação e pode ser usada de muitas formas diferentes em projetos com diferentes características.
visite o siteFórum e ponto de encontro de projetistas e curiosos em torno da eletrônica analógica e digital com grande quantidade de projetos documentados pela comunidade.
visite o siteCentral de Portfolios de designers com curadoria de projetos de destaque em torno de diferentes linguagens visuais: ilustração, fotografia, desenho vetorial, ux, etc.
visite o sitePortal Embarcados é um site com conteúdo técnico sobre hardware, firmware e assunto relacionados a IoT.Parte desse conteudo é criado pela comunidade, por pessoas que compartilham seu conhecimento na área de sistemas eletrônicos.
visite o siteRepositório de desenhos 3D para fabricação digital. Muitos desenhos podem ser recriados/remizados e alguns deles são paramétricos. O portal ainda tem uma ferramenta que permite que os arquivos sejam customizados onlines.
visite o sitePortal de recursos da escola de Design de Stanford com muitos materiais a respeito de Design Thinking além de outros cursos e oficinas.
visite o siteSite da empresa Adafruit, focada em prototipagem eletrônica, com tutoriais, fórum e aulas.
visite o sitePortal com diversos recursos e um e-book a respeito de Desing Thinking para educadores com exemplos de atividades.
visite o sitePortal da rede FabLab Livre SP com informações a respeito dos espaços e equipamentos da rede, além de agendamento de aulas e encontros.
visite o siteCentral de documentação de projetos em programação onde os usuários podem hospedar e compartilhar códigos-fonte e contribuir com projetos abertos.
visite o siteCanal de Youtube do projeto Semente Cinematográfica com cursos, aulas e materiais a respeito de educação audiovisual.
visite o canalSite da equipe Hardware Livre da USP com projetos, oficinas, tutoriais e materiais a respeito de Hardware Open Source. Ótimos projetos para inspiração.
visite o siteSite de projetos da Designer Cristiana Felgueiras que também possui canal do Youtube. Boa referência para trabalhos de marcenaria.
visite o siteFarm Bot é um projeto de canteiro de legumes e verduras totalmente automatizado.
visite o siteCanal Ciência Todo Dia com uma abordagem interessante a respeito de temas da ciência
visite o canalCanal do Youtube Manual do Mundo com muitos projetos de inspiração em diferentes níveis de dificuldade.
visite o canalEste site utiliza cookies para aprimorar sua navegação e aperfeiçoar nossa comunicação com você. Ao continuar navegando, você está ciente e de acordo com o armazenamento desses dados.