Rapid Prototyping: Sketching | Google for Startups

Summary

Este video de Google aborda la importancia de los prototipos como modelos experimentales de ideas. Se comparten técnicas de prototipado, como el boceto y el prototipo en papel, para validar ideas tempranamente. Los diseñadores utilizan bocetos para definir flujos de usuario, explorar diseños y crear prototipos de alta fidelidad. Se destacan las ventajas de prototipar en papel, como la facilidad para visualizar interacciones y aplicar principios de diseño material, como el uso de color y sombras. El objetivo es animar a los diseñadores a probar y validar sus ideas rápidamente para tomar decisiones de diseño inteligentes.

Takeaways

• 🎨 Un prototipo es un modelo experimental de una idea que permite probar su valor.
• 📝 El proceso de diseño en Google generalmente comienza con bocetos y prototipos en papel.
• 📄 Los bocetos son útiles en casi cualquier etapa del proceso de diseño del producto.
• 💡 Existen diferentes tipos de bocetos según a quién se dirijan y qué se quiera comunicar.
• 📱 Los prototipos en papel ayudan a visualizar interacciones clave del usuario.
• 🖍️ El uso intencional de colores en los prototipos es importante para la coherencia del diseño.
• 🖼️ La elevación y las sombras se pueden explorar mediante el diseño material en prototipos de papel.
• 📷 Grabar o hacer GIFs de prototipos en papel facilita compartir ideas con los demás.
• 🎨 El diseño material de Google se inspira en el papel y la tinta, lo que refuerza el uso de prototipos en papel.
• 📊 Prototipar y recibir retroalimentación constante ayuda a mejorar el diseño antes de llegar al producto final.

Q & A

¿Qué es un prototipo según el punto de vista del guionista?

Un prototipo es un modelo experimental de una idea, una forma de darle presencia a nuestras ideas para que otras personas puedan ver si nuestra idea tiene valor.

¿Por qué es importante mostrar nuestros prototipos temprano y a menudo?

Mostrar prototipos temprano y a menudo ayuda a obtener retroalimentación que guía las decisiones de diseño del producto, mejorando así la calidad del diseño final.

¿Cuáles son los tipos de prototipos que se discuten en la serie de videos de Google?

Se discuten técnicas como bocetos y prototipos en papel, prototipos digitales con Form y Principle, y prototipos nativos.

¿Quiénes son Melissa Powell y Mariam Shake a y qué hacen en Google?

Melissa Powell trabaja en el equipo de relaciones con desarrolladores de Google y colabora con diseñadores, desarrolladores y emprendedores. Mariam Shake es diseñadora de experiencia de usuario senior en Google, trabajando en productos como Google Search, AdWords y DoubleClick.

¿Qué es el bocetado y cómo se relaciona con el prototipo en papel?

El bocetado es una parte fundamental del proceso de diseño y puede ayudar a tomar decisiones clave de diseño. Se puede hacer en cualquier etapa del proceso de diseño de productos, y el prototipo en papel es una técnica que se utiliza para simular interacciones de usuario y explorar principios de diseño.

¿Cuáles son los cuatro tipos de bocetos comunes que se utilizan en Google?

Los cuatro tipos de bocetos son: bocetos rápidos para ideas iniciales, bocetos de flujo de usuario, esquemas básicos (wireframes) y bocetos de alta fidelidad con detalles como botones, imágenes y colores.

¿Cómo pueden ayudar los prototipos en papel a pensar en interacciones de usuario clave?

Los prototipos en papel permiten simular interacciones, como hacer clic en un botón o seleccionar una dirección, de una manera tangible y sencilla, lo que facilita la visualización y la comprensión de las mismas.

¿Qué son las 'Pro tips' para el prototipo en papel que se mencionan en el guion?

Las 'Pro tips' incluyen grabar las interacciones con un teléfono para compartir fácilmente, imprimir pantallas existentes en lugar de redibujar elementos comunes y explorar el uso de color, elevación y sombras siguiendo los principios del diseño de Material de Google.

¿Cómo se puede utilizar el diseño de Material para el prototipo en papel?

El diseño de Material, que se inspira en el estudio de papel y tinta, se puede utilizar en prototipos en papel para pensar en el uso de color, elevación y sombras de manera más tangible y práctica.

¿Qué se puede aprender del siguiente video de la serie sobre prototipos digitales?

El siguiente video de la serie se enfocará en cómo crear prototipos digitales de alta fidelidad, lo que permite construir prototipos más robustos para validar ideas y tomar decisiones de diseño más inteligentes.

Outlines

00:00

📝 Prototipos de papel y bocetos para diseño de productos

Este párrafo aborda el concepto de prototipos como modelos experimentales de ideas y cómo estos pueden ser utilizados para evaluar el valor de una idea. Se enfatiza la importancia de compartir prototipos temprano y a menudo para obtener retroalimentación y guiar futuras decisiones de diseño. Se presenta una serie de videos que exploran técnicas de prototipado utilizadas en Google, incluyendo bocetos y prototipos de papel, prototipos digitales con Form y Principle, y prototipos nativos. Se introduce a Melissa Powell y Mariam Shake, quienes trabajan en el equipo de relaciones con desarrolladores de Google y como diseñadora de experiencia de usuario, respectivamente. Ambas explican cómo, incluso en una empresa de tecnología punta como Google, comienzan el proceso de diseño con prototipos de papel para explorar interacciones de usuario, usar color de manera intencional y visualizar elevación y sombras, siguiendo los principios del diseño de materiales de Google.

05:01

🎨 Uso intencional del color y elevación en prototipos de papel

En este segundo párrafo, se discute cómo el prototipado de papel puede ayudar a pensar en el uso intencional del color y a visualizar la elevación y las sombras, elementos clave del diseño de materiales de Google. Se sugiere seleccionar un color primario para componentes como la barra de la aplicación o el fondo, y uno o dos colores de énfasis para llamar la atención del usuario. Se explica que el prototipado de papel es útil para pensar en el uso del color a lo largo de la aplicación, lo que reduce el ruido visual y facilita la navegación del usuario. Además, se aborda la importancia de la elevación en el diseño de materiales y cómo el prototipado de papel permite explorar estas propiedades físicas. Se menciona que, una vez que las ideas se han visualizado en papel, se pueden compartir con compañeros o usuarios para validar suposiciones y tomar decisiones de diseño más inteligentes. Finalmente, se sugiere que los bocetos pueden traducirse en prototipos digitales de alta fidelidad para un prototipo robusto.

Keywords

💡Prototipo

Un prototipo es un modelo experimental de una idea, utilizado para dar forma y presencia a una idea y evaluar su valor. En el vídeo, se menciona que los prototipos son esenciales en el proceso de diseño y se pueden compartir temprano y a menudo para recibir retroalimentación. Se destaca que el nivel de fidelidad del prototipo debe coincidir con el nivel de pensamiento del diseñador.

💡Fidelidad

La fidelidad de un prototipo se refiere a la similitud entre el prototipo y el producto final. En el guion, se sugiere que la fidelidad de un prototipo debe coincidir con la fidelidad de los pensamientos del diseñador, lo que implica que tanto los prototipos de baja como de alta fidelidad tienen su lugar en el proceso de diseño.

💡Diseño de investigación

El diseño de investigación es un enfoque que se utiliza para entender y mejorar las experiencias de los usuarios. En el vídeo, se menciona que el diseñador de investigación del Google pone ideas frente a personas que usan sus productos constantemente para evaluar si estas tienen valor.

💡Boceto

Un boceto es una forma de dibujo rápido y simple que se utiliza para explorar ideas iniciales en el diseño. En el vídeo, se destaca que el boceto es una parte fundamental del proceso de diseño y se puede utilizar en cualquier etapa del diseño de productos, desde la definición de flujos de usuario hasta la estructura básica de la aplicación.

💡Prototipado en papel

El prototipado en papel es una técnica de prototipado de baja fidelidad que implica la creación de prototipos con materiales físicos como el papel. En el vídeo, se describe cómo el prototipado en papel puede ayudar a pensar en interacciones de usuario clave, usar el color de manera más intencional y visualizar elevaciones y sombras.

💡Material Design

Material Design es el lenguaje de diseño visual de Google que combina principios de buen diseño con la innovación y posibilidades de la tecnología. En el guion, se menciona que el Material Design fue inspirado en el estudio del papel y la tinta, lo que justifica el uso del prototipado en papel para explorar diseños.

💡Elevación y sombras

La elevación y las sombras son conceptos clave en Material Design que se utilizan para crear una sensación de profundidad y espacio en la interfaz de usuario. En el vídeo, se sugiere que el prototipado en papel permite explorar estas propiedades de manera práctica y efectiva.

💡Flujo de usuario

El flujo de usuario es una representación visual de las interacciones y decisiones que un usuario puede tomar al utilizar un producto o servicio. En el guion, se menciona que el boceto puede utilizarse para esbozar los pasos en un flujo de usuario, lo que ayuda a visualizar y comunicar la experiencia del usuario.

💡Boceto de alta fidelidad

Un boceto de alta fidelidad es una representación más detallada y realista de una idea de diseño, que puede incluir elementos como botones, imágenes y colores. En el vídeo, se menciona que una vez que se ha acordado el diseño básico, se crean bocetos de alta fidelidad para detallar la idea antes de transferirla a herramientas digitales.

💡Prototipo nativo

Un prototipo nativo se refiere a un prototipo creado directamente en el entorno o plataforma donde se ejecutará el producto final. Aunque no se menciona explícitamente en el guion proporcionado, se sugiere que una vez que se han validado las ideas en papel, se pueden traducir a prototipos digitales más robustos.

Highlights

Un prototipo es un modelo experimental de una idea.

Prototipos utilizados para validar ideas y su valor en el diseño.

Compartir prototipos temprano y a menudo para recibir retroalimentación.

La fidelidad del prototipo debe coincidir con la fidelidad del pensamiento.

Introducción a técnicas de prototipado en Google.

Sketching y prototipado en papel como métodos de prototipado.

Importancia de comenzar el proceso de diseño con materiales simples como el papel.

Sketching ayuda a tomar decisiones de diseño y a visualizar ideas.

Diferentes tipos de bocetos utilizados en Google según la etapa del proceso de diseño.

Utilización de bocetos para definir el flujo de usuario y estructura de la aplicación.

Creación de bocetos de alta fidelidad con detalles como botones, imágenes y color.

Prototipado en papel para simular interacciones de usuario y visualizar elevación y sombras.

Consejos prácticos para el prototipado en papel, como grabar interacciones o reutilizar pantallas existentes.

Importancia de la selección de colores y la elevación en el diseño de materiales.

Material Design como灵感来源于纸张和墨水，鼓励使用纸张和墨水进行设计探索。

Prototipado en papel ayuda a pensar en el uso intencional del color y a explorar la elevación y sombras.

Compartir prototipos en papel con equipos o usuarios para validar suposiciones y tomar decisiones de diseño inteligentes.

Transición de bocetos a prototipos digitales de alta fidelidad para construir un prototipo robusto.

Transcripts

[Music]

what is a prototype the way I think

about it a prototype is an experimental

model of an idea it's a way to give our

ideas a presence that we can put in

front of somebody else to see if our

idea has value as a design researcher

here at Google I put ideas in front of

people who use our products all the time

is your idea ready to be put in front of

people yes in fact in this video series

we'll share with you several types of

prototyping methods that you can use to

get your ideas in front of people as

soon as possible now how will you know

when it's right to show your idea to

someone else the Fidelity of your

prototype should match the Fidelity of

your thinking so don't be afraid to

share your prototypes early and often to

get feedback to guide your next product

design decision we put together a series

of three videos to introduce you to

various techniques we use at Google

there's sketching and paper prototyping

digital prototyping with form and

principle and Native prototyping so to

get things started let's take a look at

how teams at Google take an idea in

their head and make the first stroke of

the pen on

paper hi my name is Melissa Powell and

I'm on Google's developer relations team

I get to work with designers developers

and entrepreneurs both inside and

outside of Google to solve some pretty

tough design challenges and I'm Mariam

shake a senior user experience designer

at Google I design ad experiences to

make them better and simpler to use for

products such as Google search AdWords

and double click and we're here to talk

to you about sketching and paper

prototyping I often work in digital

prototyping and graphic design tools to

create High Fidelity mocks like

these but even at a high-tech company

like Google we generally start the

design process with something that looks

a lot more like

this by the end of the video you should

feel confident knowing when to use

sketching and paper prototyping four

types of sketches we commonly use in

Google and three primary benefits of

paper prototyping sketching is a

fundamental part of the design process

and can help you make key decisions boa

to design it can be as simple as drawing

on a piece of paper or even a Post-It

note or you can use any of these common

materials to create a more realistic

sketch and share your sketch with others

sketching can be used in nearly any

stage in the product design process you

can use different types of sketches

depending on who you're working with and

what you need to communicate sketching

is great when thinking through all of

the initial ideas running through your

head you can sketch to outline the steps

in a user flow explore a variety of

layouts and to show the basic app

structure or what we commonly call a

wireframe once you've agreed on the

rough layout we usually create higher

Fidelity sketches with details such as

buttons images and

color at this point you may decide to

transfer your sketches to your digital

tools but the more you can flush out

your ideas on paper the faster you'll

move on your computer computer during

mid development and even post launch you

may need to rethink your design and want

to quickly visualize new ideas so you

might bust out a pen and paper even if

you already have high fidelity digital

prototypes it can be faster to

communicate and validate your new ideas

through sketches before you have to make

those changes to your digital

prototype in addition to sketching

another low Fidelity option is paper

prototyping today I'll cover how paper

prototyping can help you think through

key user interactions use color more

purposefully and visualize elevation and

shadows and let me give you some

practical paper prototyping Pro tips as

you can see with the sketch that Miriam

created it's easy to visualize the user

flow but it's a little bit more

difficult to understand the user

interactions between the screens you can

use your paper prototype to simulate

interactions for example if we look over

here I've pre-created some paper

prototypes and we can explore what

happens when I click on an individual

button here we have the floating action

button or the quantity and we can

actually have it drop

down and see what happens when a new

screen appears and we're looking at the

checkout cart we can also select the

address and a pop-up window will

appear to avoid carrying around your

paper prototype from meeting to meeting

record these interactions with your

phone or you can create an animated gift

by taking a few Stills and throwing it

into into Google photos auto awesome

feature it's just easier to share your

ideas with people that way another Pro

tip is to print out existing screens

instead of redrawing all the common

elements over and over the goal here

isn't to test your arts and craft skills

but to explore the interactions and

natural transitions between the screens

and since we're working with paper you

can also explore different principles of

material design such as color elevation

and shadows material design is Google's

visual design language that synthesizes

class principles of good design with the

Innovation and possibility of technology

and at the end of the day it was

inspired by the study of paper and ink

so why not get back to basics using

paper and ink a good place to start is

to Think Through purposeful and

consistent use of colors the material

design spec has a lot of great

information about selecting Hues and

saturations so be sure to explore the

full material design color palette at

the link in the description below and be

purposeful with your use of color not

just on one screen but throughout the

app in general we recommend choosing one

primary color which is most commonly

used for components such as the app bar

or background and one or perhaps two

accent colors for anything that you want

to grab the user's attention such as the

Fab or to indicate that a tab has been

selected paper prototyping can help you

think through your purposeful use of

color because as a practical paper

prototyping Pro you'll want to reuse the

colors throughout the app not only is

that easier but when this translates to

your final product it will reduce visual

noise for the user user making

navigation much easier and because we're

working with physical materials be sure

to make note of how the layers form

Shadows of course we have the X AIS and

the Y AIS with material design we're

encouraged to consider and make use of

the z- AIS and elevation of each sheet

you can read more about elevation and

shadows in the material design spec

Linked In the description

below as you saw you can use different

types of sketching throughout the

product design cycle to help you

visualize and communicate your ideas in

a lightweight fashion with user flows

rapid sketches of many layout options

wireframes and detailed sketches with

images and text and paper prototyping is

one technique that can help you think

through key user interactions and

explore material design principles such

as purposeful use of color elevation and

shadows now that you visualized your

ideas on paper you can shop them around

with your teammates or users to validate

your assumptions and make smarter design

decisions you can translate your

sketches into higher Fidelity digital

mocks to build a robust prototype to

learn about making a digital prototype

check out the next video in this series

[Music]