Objetivo: Diseñar y prototipar una pantalla de inicio de sesión para una aplicación móvil, demostrando el flujo de usuario y los elementos interactivos básicos, utilizando el software gratuito y de código abierto Pencil.

Recurso indispensable: Antes de iniciar, asegúrate de tener instalado el programa Pencil. Si aún no lo tienes, sigue las instrucciones de descarga e instalación detalladas en este enlace:

https://www.frexus.dev/articulo/pencil-y-el-diseno-web/

Se Va a diseñar las pantallas clave de una aplicación móvil para un club de lectura ficticio. El objetivo es que un usuario pueda iniciar sesión y ser dirigido a la página principal. No nos enfocaremos en la estética, sino en la funcionalidad y el flujo.

Paso 1: Configuración del Lienzo (Canvas)

1. Abre el programa Pencil.

2. En la columna izquierda, en el panel de "Collections" (Colecciones), busca el apartado iOS GUI o Android GUI. Si no lo ves, haz clic en el ícono de colecciones (dos carpetas) en la parte superior para buscar y agregar la colección adecuada.

3. Desde la colección de iOS o Android, arrastra el iPhone 6 (o cualquier otro modelo de teléfono) a tu área de trabajo. Este será el lienzo (canvas) sobre el que construiremos nuestro diseño.

Paso 2: Creación de la Pantalla de Inicio de Sesión

1. Barra Superior (Header): Busca en la colección de GUI una barra de título o "Header" y arrástrala a la parte superior de tu lienzo. Cambia el texto a "Iniciar Sesión". Puedes hacer esto haciendo doble clic en el texto o modificándolo en el panel de "Properties" (Propiedades) de la derecha.

2. Título de la Aplicación: En la colección de "Common Shapes" (Formas Comunes), arrastra un Text (Texto) y colócalo en el centro de la pantalla. Escribe el nombre de nuestra app: "El Rincón del Lector".

3. Campos de Entrada:

   • Busca en la colección iOS GUI (o Android GUI) el componente Input Text (Campo de Texto).

   • Arrastra dos de estos campos al lienzo.

   • En el panel de propiedades, en la sección de "Text", cambia el texto del primer campo a "Usuario" o "Correo electrónico" y el del segundo a "Contraseña".

4. Botón de Acción:

   • Busca el componente Button (Botón) y arrástralo debajo de los campos de texto.

   • Cambia el texto del botón a "Entrar".

5. Otros Elementos:

   • Agrega un enlace para recuperar la contraseña. Arrastra un componente Link (Enlace) y escribe "Olvidé mi contraseña".

   • Puedes añadir una forma de Rectangle (Rectángulo) y, dentro, una imagen para darle un toque visual a la pantalla.

Paso 3: Creación de la Pantalla Principal (Dashboard)

1. En la parte inferior de tu área de trabajo, haz clic en el ícono "Add New Page" (Agregar nueva página).

2. Arrastra un nuevo lienzo de teléfono a esta nueva página.

3. Diseña la Pantalla Principal: Crea una interfaz sencilla para la página de inicio. Por ejemplo:

   • Una barra superior con el texto "Mi Biblioteca".

   • Un título central que diga "Bienvenido/a, [Nombre de Usuario]".

   • Rectángulos que simulen las portadas de libros.

   • Un botón o enlace que diga "Explorar Libros".

Paso 4: Creación del Flujo Interactivo (Prototipado)

1. Regresa a la Página 1.

2. Selecciona el botón que creaste con el texto "Entrar".

3. En el panel de "Properties" (Propiedades) de la derecha, busca la sección "Link to Page" (Enlazar a página).

4. Haz clic en el menú desplegable y selecciona la Página 2 (nuestra pantalla principal). Esto crea un enlace interactivo.

5. Repite el proceso para otros elementos si lo deseas (por ejemplo, el botón de "Explorar Libros" podría ir a una página de búsqueda).

Paso 5: Visualización y Exportación del Prototipo

1. Para ver tu prototipo en acción, en la barra de herramientas superior, haz clic en el ícono de "Play" (Reproducir) o presiona el botón "Preview" (Vista Previa). El programa te mostrará una versión navegable. Haz clic en el botón de "Entrar" para ver cómo te lleva a la siguiente página.

2. Para compartir tu prototipo, ve al menú File (Archivo) y selecciona Export (Exportar).

3. Pencil te permite exportar el prototipo como un archivo PDF o incluso como páginas web HTML. Elige una de estas opciones, guárdala en tu escritorio y ábrela. Verás que los enlaces que creaste son funcionales.

Para más información:

https://www.frexus.dev/post/prototipos-de-aplicaciones-software-exitoso/