# data[].attributes.body
Definição:
São representações iniciais de um projeto. Bem simples e normalmente feitos à mão ou com softwares básicos. O objetivo é testar ideias sem se preocupar com o visual final.

Usos comuns:

Testes iniciais com usuários

Feedback rápido

Brainstorm de ideias

Exemplo: rascunhos em papel ou wireframes simples no computador.

# data[].attributes.body
Definição:
São protótipos que se parecem muito com o produto final. Incluem design visual completo, cores, tipografia e até simulação de interações.

Quando usar:

Apresentações para clientes

Testes mais avançados

Validação da interface final

Ferramentas comuns: Figma, Adobe XD, Sketch.

# data[].attributes.body
O Figma é uma ferramenta online de design muito usada pra criar interfaces e protótipos. Alguns elementos importantes:

Artboards (Frames): espaço onde você desenha as telas

Shapes: figuras básicas (retângulo, elipse, linha…)

Texto: caixas de texto pra títulos, menus etc.

Components: elementos reutilizáveis (ex: botões padrão)

Auto Layout: organiza automaticamente os elementos

Plugins: ajudam a agilizar o design com recursos extras

# data[].attributes.body
HTML (HyperText Markup Language) é a base da estrutura de sites. Ele é responsável por montar a "esqueleto" da página: onde vão os títulos, textos, imagens, links, etc.

Exemplo de código:

<p>Esse é um parágrafo</p>

# data[].attributes.body
Visual Studio Code é um editor de código muito usado por quem programa. Ele aceita várias linguagens (como HTML, CSS, JavaScript) e tem muitos recursos legais.

Destaques:

Interface intuitiva

Extensões úteis

Ideal pra iniciantes e profissionais

# data[].attributes.body
CSS (Cascading Style Sheets) é o que dá estilo à página. Com ele você pode mudar cores, fontes, posições, espaçamentos e até animações.

Exemplo de uso:

body {

background-color: lightgray;

}

# data[].attributes.attachment_link.readable_text
Construir um protótipo é uma das formas mais rápidas, e com menor custo, para validar uma ideia, um conceito ou uma funcionalidade. Assim, é possível interagir, avaliar, alterar e aprovar as principais características de uma interface antes do desenvolvimento.

As coisas podem não estar tão claras para o usuário como parecem... [Imagem: Giphy]

O protótipo pode ser parcial (normalmente utilizados para vender uma ideia, ou fazer prova de conceito), ou com um fluxo completo (utilizado para testes com usuários ou testes de lógica), e não necessariamente precisa ter um refinamento visual. O quanto um protótipo se parecerá com a versão final de uma aplicação é o que chamamos de "fidelidade".

Segundo Deborah J. Mayhew (autora do livro "The Usability Engineering Lifecycle"), são quatro as dimensões que definem a fidelidade de um protótipo:

1. detalhamento: a quantidade de detalhes que o modelo suporta.

2. grau de funcionalidade: a extensão na qual os detalhes de operação são completos.

3. similaridade de interação: o quão similar as interações com o modelo serão com o produto final.

4. refinamento estético: o quão realista o modelo é.

Com base nisso, podemos classificar a fidelidade de um protótipo em baixa, média e alta.

Um protótipo de baixa fidelidade é bastante utilizado em fases iniciais e exploratórias de um projeto para validar um conceito e decidir se uma ideia tem ou não valor funcional. Devem ser rápidos, rudimentares e baratos.
Características de um protótipo de baixa fidelidade:

Baixo nível de detalhamento.

Preferencialmente feito com papel e caneta.

Representa visualmente as funcionalidades.

Baixo custo.

Rapidez na prototipação.

Descartável.

Protótipo de baixa fidelidade para um web app
[Imagem: Grace Colbert, via Dribble]
Características de um protótipo de média fidelidade:

Prioriza a hierarquia das informações e o fluxo de navegação.

Possui simulações simples de uso (interação com botões, por exemplo).

Pode ser feito com o auxílio de um computador, utilizando ferramentas como Balsamiq, Mockflow ou Draw.io, que já oferecem elementos prontos para a interface (como botões, campos de formulário etc.), agilizando a criação.

Wireframe de um site de agência de viagens
[Imagem: Robert Smith, via Medium]
Características de um protótipo de alta fidelidade:

Foco em aspectos visuais e funcionais da interface.

Permite navegação e interação similares à versão final do produto.

São desenvolvidos com o auxílio de softwares para criação de interfaces, como o Sketch, Figma ou Adobe XD.

Exemplo de protótipo de alta fidelidade, simulando um fluxo de navegação [Imagem: Victor Luna, via Dribble]

Esse aqui, por exemplo, vai precisar de uns ajustes... [Imagem: Giphy]

Esse tipo de protótipo é um pouco mais refinado que o de baixa fidelidade, mas ainda não necessita de uma preocupação estética. Também conhecido como wireframe, é utilizado quando o foco é validar a arquitetura da informação e a interatividade com os elementos da interface.

Um protótipo de alta fidelidade deve se aproximar ao máximo dos aspectos visuais e funcionais do produto final, incluindo o conteúdo, fluxo de navegação e interações. São muito utilizados para testes e validação com usuários, ou para vender uma ideia, pois ver o produto "funcionando" costuma gerar fascinação.

Embora este tipo de protótipo busque atender às quatro dimensões de fidelidade definidas pela Deborah J. Mayhew, apresentadas no início do post, é importante ter em mente que o objetivo de um protótipo é testar a validade de uma proposta, e apesar de sua similaridade com o produto final, não deve, necessariamente, ser encarado como tal.

Até a próxima. ;)

# data[].attributes.attachment_link.title
Protótipos: baixa, média ou alta fidelidade?

# data[].attributes.attachment_link.description
Construir um protótipo é uma das formas mais rápidas, e com menor custo, para validar uma ideia, um conceito ou uma funcionalidade. Assim, é possível interagir, avaliar, alterar e aprovar as...

# data[].attributes.attachment_link.readable_text
Como parte da série de projetos de experiência do usuário da MOBGEN, abordamos recentemente os benefícios da prototipagem de baixa fidelidade no processo de design de produtos digitais. Além dos protótipos de low-fi, designers também podem fazer uso de protótipos de alta fidelidade em seus processos para comunicar ou validar conceitos.

Com o recente anúncio do estúdio Origami pelo Facebook e a atualização do Framer - algumas das ferramentas usadas na indústria para criar protótipos interativos de alta fidelidade - o momento para este post não poderia ter sido melhor. Então...

O que é prototipagem de alta fidelidade?

A fidelidade do protótipo refere-se ao nível de detalhes e funcionalidade incorporada a ele. Nesse sentido,

Um protótipo de alta fidelidade (às vezes chamado de high-fi ou hi-fi) é uma representação interativa do produto, baseada no computador ou em dispositivos móveis. Esse protótipo já apresenta maior semelhança com o design final em termos de detalhes e funcionalidade.

O "high" em alta fidelidade refere-se ao nível de abrangência, que permite examinar questões de usabilidade em detalhes e tirar conclusões sobre o comportamento da pessoa usuária que testam o protótipo.

Os protótipos de alta fidelidade abrangem não apenas a interface da pessoa usuária (UI) do produto em termos visuais e estéticos, mas também os aspectos da experiência do(a) usuário(a) (UX) em termos de interações, fluxo e comportamento.

Você pode estar pensando: low-fi (ou lo-fi), hi-fi (isso, por acaso, tem algo a ver com wi-fi?) - qual é a necessidade de outra técnica e como isso é melhor que o lo-fi?

Não é uma questão de qual técnica de teste de usabilidade é melhor e talvez você possa precisar de uma combinação das duas (+ outros métodos de prototipagem) em seu processo de design, mas a questão é quando usar qual método e porque.

Extensas pesquisas foram realizadas, comprovando que ambos os métodos são basicamente equivalentes na busca de problemas de usabilidade (Walker et al 2002).

Na MOBGEN, usamos amplamente as duas técnicas, dependendo do estágio do processo de design e do nível de maturidade de nossos projetos. De fato, frequentemente os(as) designers fazem vários protótipos usando mais de uma técnica, avançando para os métodos finais de produção à medida que os projetos amadurecem até a conclusão (Newman & Landay, 2000).

Quando usar a prototipagem de alta fidelidade?

Ou quando é a hora certa de usar protótipos de hi-fi?

Quando você tem designs visuais do seu produto;

Quando se tem uma ideia sobre elementos interativos, como esquemas de navegação de uma tela para outra; quando há animações e mini-interações no seu modelo e você é capaz de prototipá-las;

Quando se deseja testar os detalhes de seus produtos em termos de elementos da interface da pessoa usuária, esquemas de cores ou texto;

Quando você deseja testar as transições, animações e os efeitos destas no comportamento do usuário;

Quando você deseja saber como seus usuários-alvo se sentem em relação ao seu produto e deseja obter as opiniões deles sobre seus designs.

Por que usar prototipagem de alta fidelidade?

O principal objetivo dos protótipos interativos é seu uso nos testes de usabilidade do produto, para que os usuários-alvo o validem.

É importante testar seu produto antes de lançá-lo no mercado para prever quaisquer problemas ou falhas. Tirar o máximo proveito do feedback pode ser possível com um protótipo mais próximo do produto final em detalhes e funcionalidade.

Além de validar projetos, protótipos interativos podem ser usados para apresentações e pitches e também quando você deseja comunicar os projetos e as funcionalidades do seu produto aos membros da equipe, clientes ou outras partes interessadas no projeto.

Além disso, quando a construção funcional do software ainda não foi desenvolvida, um protótipo de alta fidelidade faz esse trabalho muito bem.

Existem vários benefícios no uso de protótipos de alta fidelidade no design de produtos:

Os protótipos interativos são feitos o mais próximo possível da verdadeira representação gráfica dos produtos para permitir testes detalhados em todos os aspectos, incluindo componentes da interface da pessoa usuária, cores, layouts, hierarquia de informações, carga mental das telas nos usuários e outras interações;

Eles fornecem uma boa base em termos de gerenciamento de projetos para fazer estimativas de quanto tempo é necessário para testes de implementação e garantia de qualidade;

A disponibilidade de protótipos interativos pode melhorar a colaboração com os(as) desenvolvedores(as), pois eles terão uma ideia mais clara de como o aplicativo deve se comportar;

Mais importante, ao permitir que você teste seu produto, os protótipos podem economizar para a empresa o custo em termos de tempo e dinheiro na construção de algo que teria tido pouco sucesso no mercado.

Como em tudo, sempre existe o outro lado da moeda e também existem desvantagens no uso de protótipos de alta fidelidade em seu processo de design:

Os protótipos de alta fidelidade são caros em termos de tempo e recursos para produzir em comparação com seus similares de baixa fidelidade;

Como é mais demorado alterar os designs, é mais difícil fazer correções on-the-go entre usuários durante um teste de usabilidade, principalmente se você deseja atualizar seu protótipo rapidamente para obter melhores comentários;

Como os protótipos de alta fidelidade têm uma aparência final, os participantes dos testes de usabilidade podem não se sentir à vontade para fazer críticas ou apontar falhas nos designs.

Como usar? Materiais e métodos

Para criar um protótipo interativo, você precisa preparar todos os ingredientes. Primeiro, prepare seus recursos visuais e defina os fluxos de usuários. Identifique todas as transições e animações que você deseja criar entre diferentes objetos ou telas. Por fim, escolha a ferramenta certa de acordo com suas necessidades. Existe uma lista crescente de ferramentas de prototipagem disponíveis para designers.

Algumas das principais ferramentas de prototipagem de software para dispositivos móveis e Web atualmente no setor são:
Na internet é possível encontrar informação suficiente sobre a comparação de ferramentas e não queremos ser repetitivos aqui.
Contudo, o que é importante mencionar é que, ao escolher a ferramenta de prototipagem mais adequada, você precisa basear suas decisões em considerações práticas:

Estética do protótipo produzido, em termos visuais e interações, dando uma sensação nativa - quão fluidas são as animações e assim por diante;

A disponibilidade de interações estabelecidas no software, para você usar opções como arrastar e soltar, a fim de criar protótipos de forma rápida;

Assets, em termos de sincronização com outras plataformas baseadas na nuvem, facilidade de armazenamento e pesquisa no software e facilidade de atualização de todas as instâncias ao alterar o asset de origem;

Compatibilidade com Photoshop, Illustrator, Sketch ou qualquer uma das suas ferramentas favoritas para gerar elementos visuais;

Capacidade de visualizar seus protótipos em dispositivos e plataformas de tamanhos diferentes;

Velocidade de reprodução;

Recursos de publicação para permitir o compartilhamento com seus clientes e outras partes interessadas;

Disponibilidade da biblioteca com elementos comuns da interface da pessoa usuária para ajudar na criação de telas rápidas;

Colaboração, no sentido de permitir que colegas ou outras pessoas comentem ou comentem recursos.

Como todos os projetos de design têm necessidades diferentes e as equipes têm padrões ou objetivos diferentes, você precisa tomar suas decisões de acordo com essas variáveis.

No MOBGEN, usamos Invision, Pixate e Principle no passado e, atualmente, optamos pelo Proto.io. Preferimos o Proto.io por sua simplicidade e pela rapidez com que você pode criar coisas com ele. A plataforma possui uma biblioteca com elementos de interface padrão que você pode usar para criar suas telas rapidamente, sem precisar mudar para o Photoshop para obter elementos simples.

Ele é baseado na Web e mantém seus projetos na nuvem, o que significa que, se você alternar entre dispositivos, poderá acessá-lo de qualquer lugar (o aplicativo móvel ainda tem um modo offline para acessar seus protótipos sem internet).

É adequado para usuários iniciantes e avançados; você obtém o aplicativo rapidamente, graças à simplicidade de gatilhos e interações estabelecidos, enquanto os(as) usuários(as) avançados(as) podem aproveitar a grande quantidade de recursos que permitem códigos personalizados.

Confira algumas dicas práticas da MOBGEN

Com nossa experiência em criar protótipos interativos e usá-los em testes de usabilidade, aprendemos muito sobre como obter os melhores resultados.

Para economizar tempo e com muitas lições para aprender, queremos compartilhar algumas dicas práticas:

Informe às pessoas usuárias que aquele é um protótipo que está sendo testado. É importante que os usuários saibam que aquele é apenas um protótipo; é uma ideia inicial do produto e pode haver elementos que ainda não estão funcionando. Eles também não devem ver isso como um produto finalizado e devem se sentir à vontade para apontar falhas no design;

Se o tempo permitir, coloque alguma distância na interação entre diferentes usuárias. Dessa forma, você maximiza a qualidade e quantidade de melhorias que pode fazer durante uma sessão e outra de teste;

Embora as sessões formais de teste de usabilidade sejam úteis, também podem ser demoradas. Use seus protótipos interativos para mostrar e obter feedback rápido em qualquer lugar a qualquer momento. Peça a um colega (que não esteja familiarizado com o projeto), a um amigo ou até a sua mãe para que use o aplicativo e ouça o que eles tem a dizer;

Geralmente, os resultados dos testes com prototipagem hi-fi são usados ​​para revisar a interface do usuário. Mesmo antes do teste, seja claro sobre o que você deseja alcançar através dos testes de usabilidade e como abordará os resultados. Em termos de gerenciamento de projetos, deixe claro para sua equipe como você implementará as melhorias que obteve com suas descobertas;

Ao testar o protótipo de um aplicativo que tem fluxo longo, descobrimos que quando algo dá errado e o aplicativo trava, a pessoa usuária terá que iniciar todo o fluxo desde o início. Uma solução prática que criamos para resolver isso é criar vários marcos no fluxo (Seção 1 - Inscrição, Seção 2 - Integração, Seção 3 - Perfil pessoal (...), por exemplo) e criar uma página inicial no protótipo com atalhos para cada um desses marcos. Dessa forma, se o aplicativo falhar, você poderá retomar de onde estava, em vez de precisar começar do início.

Criação de vários marcos no fluxo de prototipagem de alta fidelidade.

Conclusão

Em seu artigo "Designing for Usability: Key Principles and What Designers Think ", Gould e Lewis (1985) discutem três princípios para o design no campo da tecnologia da informação:

(1) foco inicial nas pessoas usuárias,

(2) medição empírica usando protótipos e

(3) design iterativo.

Seguindo esses princípios na MOBGEN, acreditamos no lema:

O design centrado no usuário começa com o usuário e termina com o usuário.

Em todas as etapas do nosso trabalho, tentamos nos colocar no lugar da pessoa usuária. Não podemos enfatizar o suficiente a importância de testar um protótipo o mais cedo possível no processo de desenvolvimento do produto.
Quando usados ​​em ciclos iterativos de design e desenvolvimento, essa técnica te aproxima da criação do aplicativo fantástico que você está procurando.
Esses protótipos, de baixa ou alta fidelidade, que podem ser validados e refinados com base nos comentários obtidos, servem como uma ferramenta poderosa para descobrir as lacunas a serem preenchidas nos seus projetos.

# data[].attributes.attachment_link.title
Prototipagem de alta fidelidade: o que é, quando, por que e como usar?

# data[].attributes.attachment_link.description
Como parte da série de projetos de experiência do usuário da MOBGEN, abordamos recentemente os benefícios da prototipagem de baixa fidelidade no processo de design de produtos digitais. Além dos protótipos de low-fi, designers também podem fazer uso de protótipos de alta fidelidade em seus processos para comunicar ou validar conceitos.

# data[].attributes.attachment_link.title
Tutorial Completo de FIGMA - Ferramenta GRÁTIS para Design de Interfaces

# data[].attributes.attachment_link.title
O que é HTML? Guia Completo com Lista de Comandos Básicos HTML

# data[].attributes.attachment_link.description
O que é HTML? Aprenda sobre programação em HTML, como programar e o que é HTML para detonar nos seus códigos com esse artigo. Abordamos os principais pontos e conhecimentos que um iniciante e um intermediário devem saber de HTML.

# data[].attributes.attachment_link.readable_text
Olá, Web Developers! É provável que você já tenha ouvido falar do VS Code. Vamos conhecê-lo melhor e certamente entenderá o motivo de programadores no mundo todo usá-lo.

O que é VS Code?

O Visual Studio Code (VS Code) é um editor de código de código aberto desenvolvido pela Microsoft.

A saber, ele está disponível para Windows, Mac e Linux. É criado com Electron, ferramenta criada pelo GitHub que permite a criação de softwares Desktop com HTML, CSS e JavaScript.

Não confunda com o Visual Studio

O Visual Studio é uma IDE desenvolvida pela Microsoft, dedicada ao .NET Framework e a linguagens como C, C++, C# e F#. Por ser uma solução completa, é uma ferramenta bem mais pesada.

Já o VS Code é um Editor de Código, o qual possui as funcionalidades mais simples como:

edição de código com suporte a várias linguagens de programação;

terminal de comandos integrado;

controle de versão;

Por isso é uma ferramenta bem mais leve. Mas não é apenas isso!

Uma poderosa ferramenta com diversas funcionalidades

O VS Code é capaz de fazer muitas coisas que nos ajudam a trabalhar melhor.

A princípio ele é uma ferramenta muito simples, mas ele possui uma loja de extensões imensa, e que continua crescendo.

Ou seja, com essa enorme coleção de extensões, podemos adicionar diversas funcionalidades ao VS Code de forma bem simples. Dessa maneira, ele pode facilmente ser comparado a grandes IDEs pagas.

Qualquer um pode criar uma extensão e publicar na loja. Desse modo, sempre há novas ferramentas que podem ser interessantes para alguém.

Já fizemos aqui no blog uma série de posts indicando as melhores extensões de VS Code para desenvolvedores Front-End.

VS Code é customizável

Certamente é mais agradável usar uma ferramenta que atenda ao seu gosto e necessidades.

As necessidades já são supridas pelo enorme número de extensões disponíveis. E o gosto também é atendido, já que o VS Code é bem customizável.

Você pode alterar a aparência dele manualmente ou baixar temas na loja de extensões.

Além disso, cada funcionalidade (tanto do VS Code quanto das extensões) podem ter seu comportamento alterado na tela de configurações, que é bem simples e intuitiva.

Se algo na tela não te agrada, você pode esconder.

Acima de tudo, também podemos fazer login no VS Code para manter nossas configurações salvas na nuvem. Dessa forma podemos manter nossas preferências e extensões sincronizadas em computadores diferentes.

Extra: Dica de ouro de produtividade no VS Code

O VS Code possui vários atalhos de teclado que facilitam o nosso trabalho. A saber, esses atalhos podem ser customizados. Além disso, você pode atribuir teclas de atalho para funcionalidades existentes mas que não possuem um atalho definido.

Como programadores, quanto mais tempo mantermos as mãos no teclado, melhor. Afinal, pressionar algumas teclas é bem mais rápido do que ir com a mão até o mouse e sair clicando e procurando o que você precisa.

Mas você não precisa saber todos os atalhos logo no começo!

Pressione Ctrl + Shift + P ( Cmd + Shift + P no Mac) ou F1. Isso vai abrir um campo onde você pode procurar pelo comando que quer realizar.

Além de permitir executar rapidamente QUALQUER coisa (desde o simples copiar e colar até funções mais complexas), caso essa funcionalidade tenha um atalho, este será exibido. Assim, você poderá executar qualquer comando sem saber seu atalho e vai aprendendo eles aos poucos.

Por que usar o VS Code?

Ferramenta simples;

Código aberto;

Arquitetura bem planejada;

Possibilidade de customização;

Várias funcionalidades e atalhos;

Rica loja de extensões;

Facilidade em criar e publicar extensões (escritas em JavaScript ou TypeScript);

Essas são algumas das razões que tornou o VS Code no editor de código mais usado e querido pelos programadores das mais diversas linguagens de programação.

Não deixe de conferir nosso guia de instalação do VS Code para Windows, Linux e Mac.

# data[].attributes.attachment_link.title
VS Code - O que é e por que você deve usar?

# data[].attributes.attachment_link.description
Olá, Web Developers! É provável que você já tenha ouvido falar do VS Code. Vamos conhecê-lo melhor e certamente entenderá o motivo de programadores no mundo todo usá-lo. O Visual Studio Code (VS Code) é um editor de código de código aberto desenvolvido pela Microsoft. A saber, ele está disponível para Windows, Mac e Linux.

# data[].attributes.attachment_link.title
O que é CSS? Guia Básico para Iniciantes

# data[].attributes.attachment_link.description
Guia Básico para Iniciantes sobre o que é CSS com Lista de Comandos CSS gratuita e simplificada. Confira agora.