Crate, Diseño y artesanía emergente - Manual de producto app

TOMO 03
Manual
de producto
ARTESANÍA Y DISEÑO EMERGENTE

Este manual está diseñado para ayudar a crear
una experiencia visual y de diseño coherente
para los usuarios de la plataforma digital Crate.
Siguiendo las directrices y recomendaciones
presentadas en este manual, se podrá aplicar
el estilo distintivo de Crate para brindar a los
usuarios una experiencia única y atractiva.
Aquí encontrarás detalladamente todos los
aspectos que se han tenido en cuenta para
el diseño de la app. Estas directrices ayudan
a mantener la coherencia visual y a transmitir
la esencia de la comunidad de Crate. El objetivo
es proporcionar las herramientas necesarias
para crear una experiencia de usuario
consistente y cautivadora, para que
puedan colaborar de manera efectiva.
Introducción

9
CONTENIDO
01. Funcionalidad de la app
03. Arquitectura
de la información
05. Accesibilidad
04. Desarrollo de la interfaz
02. Modelado de usuario
04.1. Navegación
04.2. Estructura de contenidos
04.3 . Grid app
04.4. Diseño de la app
04.5. Uso de imágenes
13
15
17
19
29
30
32
34
36
37
38
42
44
46
48
72
01.1. App a desarrollar
01.2. Categoría
01.3. Tipo de app
01.4. Usabilidad
03.1. Introducción
03.2. Paleta de colores y usos
03.3. Tipografías
03.4. Iconografía
03.5. Barra de navegación
03.6. Botones interactivos
03.7. Icono app
21 75

CRATE MANUAL DE PRODUCTO ... 11
...
CRATE MANUAL DE PRODUCTO 11
01. Funcionalidad
de la app
01.1. App a desarrollar
01.2. Categoría
01.3. Tipo de app
01.4. Usabilidad
13
15
17
19

13
CRATE MANUAL DE PRODUCTO 01.1. APP A DESARROLLAR
01.1. APP A DESARROLLAR
Bienvenido a Crate, la plataforma que está
revolucionando la colaboración creativa.
Crate es una aplicación innovadora diseñada
para reunir a los artistas, diseñadores y
artesanos emergentes en un espacio virtual
en el que puedan unir sus habilidades y crear
productos únicos y sorprendentes.
En un mundo cada vez más conectado,
la creatividad no tiene límites. Sin embargo,
nos encontramos con barreras para poder
colaborar y combinar nuestras ideas con las
de otros creadores. Es ahí donde entra Crate,
facilitando la unión de talentos para dar vida
a nuevas obras de arte y productos artesanales.
Con Crate te sumergirás en una comunidad
creativa vibrante, donde los artistas podrán
encontrar el complemento perfecto para
sus habilidades y colaborar en proyectos
emocionantes. Ilustradores, diseñadores
gráficos, joyeros o cualquier otro tipo de
creador artesanal, podrá tener la oportunidad
de conectarse con personas afines y poner
en marcha proyectos colaborativos únicos.
La esencia de Crate radica en la sinergia que
se crea entre sus usuarios. Puedes explorar
perfiles de otros creativos, descubrir sus
trabajos y habilidades, y enviarles solicitudes
para colaborar en proyectos específicos.
Imagina la posibilidad de unir fuerzas con un
diseñador de moda para crear una línea de
ropa única, o trabajar con un escultor para
producir piezas de arte innovadoras que
desafíen los límites de la creatividad.
Pero Crate no se trata solo de colaboración
entre creadores. También es una plataforma
donde los usuarios pueden sumergirse en un
mundo de productos únicos y personalizados.
Si tienes una idea en mente y necesitas el
toque de un experto para hacerla realidad,
en Crate encontrarás una comunidad dispuesta
a ayudarte. Puedes solicitar colaboraciones
y obtener propuestas de artistas y diseñadores
interesados en dar vida a tu visión, creando
productos hechos a medida que reflejen
tu estilo y personalidad.
En definitiva, Crate es mucho más que una
aplicación de colaboración creativa. Es un
espacio donde la creatividad se fusiona, donde
las ideas cobran vida y donde los productos
únicos y personalizados se convierten en
realidad. Un mundo de posibilidades donde
el arte, el diseño y la creatividad se encuentran
en perfecta armonía.
Qué es Crate

15
CRATE MANUAL DE PRODUCTO 01.2. CATEGORÍA
01.2. CATEGORÍA
La categorización de una aplicación es un
aspecto crucial que ayuda a los usuarios
a comprender rápidamente su propósito
y utilidad. Al definir la categoría de una
aplicación, se establece una base sólida para
comunicar de manera efectiva su propuesta
de valor y funcionalidad. En este apartado
del manual de estilo, se explora la importancia
de categorizar la aplicación Crate y explicar
en detalle la elección de la categoría
“utilitaria” para la app.
La elección adecuada de la categoría es esencial
para el posicionamiento en el mercado y para
que los usuarios comprendan su propósito
principal. En este caso, la categoría “utilitaria”
ha sido seleccionada como la más adecuada
para describir su naturaleza y enfoque.
Crate se destaca por ser una herramienta
práctica y funcional para facilitar la
colaboración creativa entre artistas,
diseñadores y artesanos emergentes. A través
de esta plataforma, los usuarios pueden
conectarse, compartir ideas y trabajar juntos
para crear productos únicos y personalizados.
La elección de esta categoría enfatiza el valor
práctico y la utilidad que Crate brinda a sus
usuarios, al tiempo que resalta su enfoque en
fomentar la creatividad y la colaboración.
A lo largo de este manual se explicará con
detalle cómo la categoría “utilitaria” encapsula
los elementos esenciales de Crate, brindando
a los usuarios una visión clara de su propósito y
funcionalidad. Se explorará las características
y beneficios clave que respaldan la elección
de esta categoría, y cómo se alinea con las
necesidades y expectativas de los usuarios.
Aunque la categoría principal se haya
establecido como “utilitaria”, Crate también
incorpora elementos de interacción social entre
los usuarios. La plataforma permite a los artistas y
artesanos emergentes conectarse, comunicarse
y colaborar entre sí, fomentando así la creatividad
y el intercambio de conocimientos.
Dentro de la categoría “social”, Crate
proporciona un entorno en el que los usuarios
pueden construir y formar una comunidad
creativa. Pueden interactuar a través de
mensajes, compartir ideas, proporcionar
retroalimentación y apoyarse mutuamente
en sus proyectos. La comunicación abierta
y el intercambio de conocimientos son
elementos clave para fomentar la creatividad y
el crecimiento artístico en la plataforma. Estos
elementos sociales enriquecen la experiencia
de los usuarios y promueven la interacción
entre los miembros de la comunidad creativa.
En definitiva, aunque Crate se categoriza
principalmente como “utilitaria” debido a su
enfoque en la colaboración y la creación de
productos, también podemos considerarla
dentro de la categoría “social” debido a la
interacción y comunicación entre los usuarios
que fomenta la creatividad y el intercambio
de conocimientos. Ambas categorías son
relevantes para comprender la naturaleza
y el propósito de la aplicación Crate.
Definiendo la categoría

17
CRATE MANUAL DE PRODUCTO 01.3. SISTEMA OPERATIVO 01.3. SISTEMA OPERATIVO
Crate se ha desarrollado como una aplicación
nativa, lo que significa que está diseñada y
optimizada específicamente para funcionar en
dos de los sistemas operativos móviles más
populares: iOS y Android. Esta adaptabilidad
al sistema operativo garantiza a los usuarios el
disfrute de una experiencia fluida y coherente,
independientemente del dispositivo que utilicen.
Al ser una aplicación nativa, Crate se integra
perfectamente con las características y
funcionalidades propias de cada sistema
operativo. Esto permite aprovechar al máximo
las capacidades de los dispositivos móviles,
brindando una navegación intuitiva y un
rendimiento óptimo en cada plataforma.
Para los usuarios de iOS, Crate está disponible
a través de la App Store. Se ha desarrollado
siguiendo las directrices y estándares
de diseño de Apple, lo que asegura una
Tipo de app
experiencia fluida y familiar en los dispositivos
iPhone y iPad. Los usuarios de iOS pueden
acceder a todas las funciones y características
de Crate de manera intuitiva, aprovechando la
integración con el ecosistema de Apple.
Por otro lado, los usuarios de Android
pueden descargar Crate desde la tienda
de aplicaciones Google Play. Por lo que la
aplicación ha sido desarrollada siguiendo las
pautas y estándares de diseño para asegurar
una experiencia visualmente atractiva y
coherente en dispositivos Android.
Ya sea que utilices un dispositivo iPhone o
un dispositivo Android, se podrá disfrutar de
una experiencia de usuario fluida y coherente,
accediendo a todas las funcionalidades de
Crate diseñadas específicamente para cada
sistema operativo.

01.4. USABILIDAD
La usabilidad es un aspecto fundamental para
garantizar una experiencia de usuario fluida y
satisfactoria en la aplicación. En este apartado
del manual, se centra en proporcionar pautas
y mejores prácticas para aprovechar al
máximo la usabilidad de Crate y asegurar que
los usuarios puedan utilizar la aplicación de
manera intuitiva y eficiente.
Diseño intuitivo: el diseño de la app ha sido
cuidadosamente desarrollada para ofrecer una
interfaz intuitiva y fácil de usar. Los elementos
de navegación, como los menús, botones y
categorías son claraos y coherentes, facilitando
la exploración y la interacción con la aplicación.
Con ellos los usuarios podrán moverse por la
app sin dificultad, encontrando rápidamente
las funciones y características que necesitan.
Flujo de trabajo simplificado: se ha puesto
especial atención en simplificar el flujo
de trabajo de Crate para que los usuarios
puedan navegar de manera eficiente. Se
han eliminado pasos innecesarios y se ha
optimizado la secuencia de acciones para
minimizar la complejidad y evitar confusiones.
Comprendiendo la usabilidad
Esto garantiza que los usuarios puedan
realizar acciones como enviar solicitudes de
colaboración, buscar perfiles de otros usuarios
y explorar proyectos con facilidad y rapidez.
Retroalimentación visual: Crate proporciona
una retroalimentación visual clara y significativa
para informar a los usuarios sobre el estado de
sus acciones. Mediante el uso de indicadores
visuales, como animaciones, cambios de color
o mensajes de confirmación, los usuarios
recibirán retroalimentación instantánea y
comprensible. Esto contribuye a una sensación
de control y confianza en el uso de la aplicación.
Personalización y preferencias del usuario:
la app permite a los usuarios personalizar
su experiencia según sus preferencias
individuales. Esto puede incluir ajustes de
notificaciones, preferencias de visualización
y opciones de configuración personalizadas.
Al ofrecer opciones de personalización, Crate
se adapta a las necesidades y preferencias
únicas de cada usuario, mejorando así su
usabilidad y satisfacción.
Pruebas de usabilidad: antes de lanzar nuevas
versiones o características importantes, se
realizan pruebas exhaustivas de usabilidad
para garantizar que la aplicación cumpla con
los estándares de rendimiento y facilidad de
uso. Estas pruebas implican la participación de
usuarios reales que brindan retroalimentación
valiosa sobre la experiencia de uso. Los
resultados de estas pruebas se utilizan para
mejorar continuamente la usabilidad de Crate
y asegurar que se ajuste a las expectativas de
los usuarios.
En definitiva, con un diseño intuitivo, flujo de
trabajo simplificado, retroalimentación visual
clara, opciones de personalización y pruebas de
usabilidad, Crate se esfuerza por ofrecer una
aplicación fácil de usar y que cumpla con las
expectativas de los usuarios.
CRATE MANUAL DE PRODUCTO 01.4. USABILIDAD

...
02. Modelado de usuario

O2. MODELADO DE USUARIO
02. MODELADO DE USUARIO
El modelado de usuario es una parte esencial
para comprender las necesidades, expectativas
y comportamientos de los usuarios. En este
apartado del manual, se explora cómo se ha
realizado el modelado de usuario en Crate y
cómo esta comprensión enriquece el diseño y la
funcionalidad de la aplicación.
Para ello se han creado perfiles de usuario
que representan a los diferentes tipos de
personas que interactuarán con Crate. Estos
perfiles incluyen características demográficas,
intereses, habilidades y objetivos específicos
relacionados con artesanía y el diseño. El
modelado de perfiles de usuario ayuda a
los diseñadores y desarrolladores de Crate
a comprender las diversas perspectivas y
necesidades de los usuarios, y a adaptar la
aplicación en consecuencia.
Existen diferentes tipos de usuarios
interesados por la app de Crate:
Los usuarios de Crate
Artistas emergentes: los artistas emergentes
que están buscando oportunidades para
colaborar y mostrar su talento pueden
encontrar una oportunidad en Crate. Estos
usuarios pueden ser diseñadores gráficos,
ilustradores, artistas visuales, escultores,
entre otros. Crate les ofrece la posibilidad de
conectarse con otros artistas y artesanos,
promover su trabajo y participar en proyectos
colaborativos para crear productos únicos.
Diseñadores: los diseñadores que desean
crear artículos personalizadas y únicas pueden
encontrar en Crate un espacio para encontrar
colaboradores creativos. Estos usuarios pueden
colaborar con otros artistas para desarrollar
colecciones exclusivas y diferentes. Crate les
brinda la oportunidad de explorar nuevas ideas
y técnicas, así como de conectar con personas
con habilidades complementarias.
Artesanos tradicionales: artesanos que
buscan ampliar su alcance y encontrar nuevas
oportunidades de colaboración pueden
beneficiarse de Crate. Estos usuarios pueden
ser joyeros, ceramistas, tejedores, vidrieros,
entre otros. La aplicación les permite mostrar
su trabajo, conectarse con otros artistas y
diseñadores, y participar en proyectos conjuntos
para crear productos únicos y de calidad.
Personas con interés en el diseño y la
artesanía: los usuarios que buscan productos
personalizados y únicos pueden encontrar
en Crate una variedad de opciones. Pueden
colaborar con artistas y artesanos para diseñar
y crear productos hechos a medida, como
joyas personalizadas, prendas de vestir únicas,
objetos decorativos o muebles artesanales.
Estos usuarios valoran la originalidad y la
artesanía, y encuentran en Crate una forma de
obtener productos exclusivos que se adapten a
sus gustos y preferencias.
CRATE MANUAL DE PRODUCTO 02. MODELADO DE USUARIO

02. MODELADO DE USUARIO 02. MODELADO DE USUARIO
Ana Martín Carlos Hernández
Edad: 32 años
Ocupación: artesana de joyería
Intereses: diseño, arte, artesanía
Objetivo: encontrar colaboradores para crear
una línea de joyería única y de alta calidad.
Edad: 28 años
Ocupación: arquitecto
Intereses: interiorismo, arte, decoración
Objetivo: encontrar colaboradores para crear
elementos decorativos personalizados y únicos
para sus proyectos de arquitectura.
Ana es una talentosa artesana especializada
en la creación de joyas hechas a mano. Tiene
habilidades en diseño, selección de materiales
y técnicas de joyería. Ana se ha unido a Crate
para encontrar colaboradores creativos, como
ilustradores o diseñadores gráficos, que puedan
aportar ideas frescas y únicas a sus diseños.
Su objetivo es ampliar su línea de joyería con
productos innovadores y atractivos
que destaquen en el mercado.
Apasionado por el diseño de interiores y la
decoración. Como profesional, se dedica a
crear espacios funcionales y estéticamente
atractivos para sus clientes. Como cliente de
Crate, Carlos utiliza la aplicación para buscar
colaboradores creativos, que puedan crear
piezas decorativas personalizadas para sus
proyectos de arquitectura.
Carlos aprecia la artesanía, la atención al detalle
y la calidad de los productos hechos a mano.
Valora la colaboración creativa y busca en Crate
una plataforma que le permita explorar nuevas
ideas, conocer talentos emergentes y encargar
productos personalizados.
PERFIL DE ARTESANO PERFIL DE CLIENTE

...
03. Arquitectura
de la información
03.1. Introducción
03.2. Paleta de colores y usos
03.3. Tipografías
03.4. Iconografía
03.5. Barra de navegación
03.6. Botones interactivos
03.7. Icono app
29
30
32
34
36
37
38

29
03. ARQUITECTURA DE LA INFORMACIÓN
La arquitectura de la información es
un aspecto fundamental en el diseño
y desarrollo de la aplicación de Crate.
En este apartado del manual, se detallan
los elementos clave que conforman la
estructura y organización visual de la app.

03.2. PALETA DE COLORES
03.2. PALETA DE COLORES
Paleta de colores y sus usos
#0E0E0E #E2D1BB #FDCA50 #EE745C #B4AD36
COLORE SECUNDARIOS DE USO
EXCLUSIVO PARA LA APP
#E0E0E0
#C4AF97
El color negro de Crate se limita su uso
para los textos y para el contorno de
aquellos botones sin relleno.
El color beige se define como el color de
fondo de la app.
El uso del amarillo se reserva para
identificar el botón de mensajes.
Se hará uso de este color para la barra
de menú y para identificar los botones
de colaboración.
El verde es el color para identificar
el botón de realizar pago que está
incluído dentro del chat.
El color gris se utilizará para los botones
del método de pago y aquella información
que se quiera ocultar sobre fondo blanco.
El color marrón se utilizará para cuando se
quiera ocultar botones sobre fondo beige.

03.3. TIPOGRAFÍA CORPORATIVA
03.3. TIPOGRAFÍA CORPORATIVA
Usos tipográficos
Tipografía corporativa
CATEGORÍA
Titular
Tiempos Headline
Light Regular
GENERAL SANS
SEMIBOLD
General Sans
Regular
General Sans
Regular
40 pt 43 pt 0% No
13 pt Auto 5% Sí
25 pt 28 pt 0% No
18 pt 23 pt 0% No
13 pt Auto 5% Sí
13 pt 16 pt 0% No
10 pt 13 pt 0% No
Tiempos Headline
Light Italic
GENERAL SANS
SEMIBOLD
General Sans
Regular
Subtitular
Botón
Titular pequeño
para apartados
Nombre del
producto/artesano
Descripción del
producto/artesano
Letra pequeña
FUENTE TAMAÑO INTERLINEADO TRACKING CAJA ALTA
Tiempos Headline
Light Italic
Aa Bb Cc Dd Ee Ff
Gg Hh Ii Jj Kk Ll
0123456 7890¿?*
Aa Bb Cc Dd Ee
Ff Gg Hh Ii Jj Kk Ll
01234567890¿?*
General Sans
Regular SemiBold

03.4. ICONOGRAFÍA
03.4. ICONOGRAFÍA
Iconografía
Los iconos de Crate se complementan entre sí,
formando un conjunto armonioso y reconocible.
Cada uno de ellos representan de manera
clara y concisa su función correspondiente,
lo que permite a los usuarios comprender su
significado de un vistazo.
Han sido diseñados en base a una retícula de
10x10, lo que asegura una consistencia visual
y una alineación precisa entre ellos. Esta
retícula proporciona una estructura clara
y definida, para facilitar la legibilidad y la
identificación de los iconos.
Además, se ha optado por una iconografía
sencilla con bordes redondeados, que tiene
como objetivo mantener la unidad visual y la
coherencia en el conjunto. También ayudan a
suavizar los contornos y aportar un aspectos
más amigable y moderno.
1x
1x
Pago Mensajes
Home
Me gusta Colaborar
Perfil de usuario Búsqueda
Hacia atrás

03.6. BOTONES INTERACTIVOS
03.5. BARRA DE NAVEGACIÓN
Barra de navegación
BARRA DE NAVEGACIÓN
La barra de navegación alberga las acciones de
mayor prioridad para ofrecer una experiencia de
navegación intuitiva y orientada al usuario.
Este panel se encuentra situado en la parte
inferior de la pantalla manteniéndose estático
en todo momento. De esta manera se asegura
el acceso fácil y rápido de las acciones más
importantes de la app.
Una característica distintiva de la barra
de navegación es que, cuando el usuario se
encuentra dentro de una sección específica,
dicho icono se rellena de color. Esto
proporciona una retroalimentación visual
clara, indicándole al usuario en qué pestaña
se encuentra en ese momento.
Está diseñada en base a una retícula de 5
columnas de 54px y unos márgenes de 20px.
75 px
390 px
20 px 54 px
BOTONES
Cada botón ha sido estratégicamente diseñado
para destacar la acción más relevante en cada
contexto. Por ejemplo, el color verde se asocia
únicamente para indicar los procesos de pago
y el amarillo para la sección de chat.
Por otro lado, el color naranja ha sido
reservado para las acciones relacionadas
con la colaboración y así fomentar una
experiencia de usuario más intuitiva.
Los botones contorneados se utilizan en
situaciones específicas donde es necesario
mantener un equilibrio visual y evitar que uno
de los botones se destaque más que el otro.
Además, esta elección de colores facilita la
comprensión y la toma de decisiones para los
usuarios, ya que pueden asociar rápidamente
los colores con las acciones específicas que
desean realizar.
Todos los textos que se incorporen dentro de
los botones deberán estar centrados con un
margen de 15 px en sus laterales.
Botones interactivos

03.7. ICONO DE LA APP
03.7. ICONO DE LA APP
Icono de la app
El icono de la app de Crate es una
representación gráfica distintiva y reconocible
de la marca. Diseñado con una estética sencilla,
elegante y minimalista.
Al utilizar el icono de la “C” como imagen
representativa de la marca, Crate logra una
identidad visual coherente y memorable.
El uso de una sola letra como icono refuerza
la simplicidad y la claridad de la marca.
16 x
16 x

...
04. Desarrollo
de la interfaz
04.1. Navegación
04.2. Estructura de contenidos
04.3 . Grid app
04.4. Diseño de la app
04.5. Uso de imágenes
42
44
46
48
72

04.2. ESTRUCTURA
04.1. NAVEGACIÓN
Los usuarios pueden interactuar y moverse
dentro de la aplicación para acceder a
diferentes funciones y secciones.
En la app Crate, puedes navegar
seleccionando elementos y deslizándote
hacia arriba y hacia abajo. Estas acciones te
permiten explorar y acceder al contenido de
manera intuitiva y cómoda.
Navegación Estructura
Taps: los usuarios pueden tocar
los elementos de la interfaz, como
botones, iconos o enlaces, para
seleccionarlos y activar acciones
específicas.
Swipes: se puede deslizar
suavemente el dedo sobre la
pantalla para realizar acciones como
deslizar hacia arriba o abajo para ver
más contenido.
01. Inicio:
• Presentación de la app y sus
características principales.
• Acceso rápido a las funciones
clave de la app.
04. Comunidad:
• Perfiles de artesanos destacados.
• Portfolio profesional.
• Información de contacto y posibilidad
de seguimiento.
05. Chat:
• Sistema de mensajería para
comunicarse con los usuarios y realizar
colaboraciones.
• Conversaciones privadas y grupales.
• Intercambio de ideas y detalles de
colaboraciones.
07. Ayuda y soporte:
• Preguntas frecuentes y guías de uso.
• Contacto con el equipo de soporte.
• Información sobre políticas
y términos de uso.
06. Perfil:
• Configuración personalizada del perfil.
• Edición de información del perfil
profesional o personal.
• Preferencias.
08. Cerrar sesión:
• Opción para cerrar sesión o salir
de la aplicación.
02. Productos:
• Catálogo de productos disponibles.
• Opciones de filtrado y búsqueda para
encontrar productos específicos.
• Detalles del producto, incluyendo
descripción, imágenes y precio.
03. Colaboraciones:
• Espacio dedicado a las colaboraciones
entre diseñadores, artesanos y
clientes.
• Búsqueda de colaboraciones activas.
• Creación y gestión de colaboraciones
con usuarios y artesanos.

04.2. ESTRUCTURA
04.2. ESTRUCTURA
Escanea el QR para
ver el diagrama en
formato digital
Estructura app
INICIO
CLIENTE ARTESANO
INICIO INICIO
Productos Comunidad
Foto del producto
Perfil artesano
Me gusta
Nombre artístico
Descripción
Tags
Contacto
Nombre del prod.
Descripción
Tags
Materiales
Mantenimiento
Precio
Nombre del prod.
Descripción
Colaboradores
Tags
Materiales
Mantenimiento
Notificaciones
Privacidad
Acerca de
Borrar cuenta
Salir de la app
Listado colab.
Me gusta
Palabra clave Panel favorito Panel mensajes Configuración
Nombre
Ubicación
Foto perfil
Datos de pago
Notificaciones
Privacidad
Acerca de
Borrar cuenta
Salir de la app
Artesanos Colab. Palabras clave Panel favorito Panel mensajes
Panel Mis productos
Mis colab Configuración
Colaborar Clientes Artesanos
Conversación Conversación
Ficha del
producto
Ficha del
artesano
Colaborar Conversación
Pagar
Colaborar Comprar Ver produc. Colaborar
Resumen Envío Pago
Panel trámite
BUSCADOR BUSCADOR
COLABORADOR COLABORADOR
MENSAJES MENSAJES
PERFIL
PERFIL
EXPLICACIÓN APP
PANEL SESIÓN

04.3 GRID APP
04.3 GRID APP
Grid app
20 px
8 columnas
Barra de navegación
Margen superior
Barra de estado
10 px
La app Crate ha sido diseñada utilizando
una retícula de 8 columnas con 20px de
margen y 10px de medianil.
Esta retícula proporciona una estructura
consistente y equilibrada para el diseño de
la interfaz de usuario. Cada columna tiene
un ancho proporcional que permite un
posicionamiento preciso de los elementos
en la pantalla.
El margen de 20px crea un espacio adecuado
alrededor de los elementos, ayudando a
mejorar la legibilidad y la usabilidad.
El medianil de 10px se utiliza para separar
visualmente las columnas y proporcionar una
guía visual clara para el diseño.
Esta retícula es una herramienta esencial para
mantener la coherencia y la armonía visual en
todas las pantallas y elementos de la app Crate.
Grid app
La estructura de la app mantiene como base
los márgenes de la retícula y los elementos que
invaden estáticamente la composición, como
son la barra de estado y la barra de navegación.
Dos elementos que hay que tenerlos
presente en el diseño de la app porque estos
permanecerán de manera estática.

04.4. DISEÑO DE LA APP
Diseño de la app Diseño de la app
INICIO
Cuando se inicia la app aparece el logotipo con
una transición de opacidad hacia la siguiente
pantalla explicativa. En el caso de tener ya la
sesión iniciada entraría al panel de la home.
EXPLICACIÓN APP
Al iniciar la app por primera vez aparecerán
diferentes pantallas, con la misma estructura,
en el que se detalla de manera sencilla el modo
de uso de la app.

Diseño de la app
PÁGINA PRINCIPAL DE INICIO
La pantalla de inicio sesión será la encargada
de llevar a los usuarios hacia su panel de control
según si se posiciona como artesano o como
cliente. Los usuarios no podrán hacer uso de la
app si no tienen una cuenta de registro.
Diseño de la app
INICIO SESIÓN
El usuario, a través de esta pantalla, podrá
acceder mediante correo electrónico y
contraseña o bien con alguna cuenta que esté
enlazada con su dispositivo. Además, se indica
si está iniciando sesión como artesano o como
cliente. Esto dependerá de la opción que se
haya seleccionado en la pantalla anterior.

Diseño de la app
HOME
Al iniciar sesión el usuario se encontrará con la
pantalla 1 en el que se muestra un vídeo modo
reel mostrando el trabajo de la comunidad
artesanal. Al hacer scroll (pantalla 2) el usuario
encontrará un panel interactivo en el que
podrá acceder al apartado de productos o
artesanos. Por último, haciendo scroll (pantalla
3) encontrará a modo de explicación cómo
podrá realizar una colaboración, así como el
significado de los elementos iconográficos.
Pantalla 1 Pantalla 1

Diseño de la app
PESTAÑA PRODUCTOS
En el apartado de productos el usuario podrá
ver de un vistazo los productos que están
disponibles en la plataforma, incluso, podrá
realizar un filtrado para afinar su búsqueda.
Por ejemplo, buscar por categoría o por
nombre del artesano.
El panel de previsualización es dinámico,
se ajusta en base al tamaño de la fotografía,
ya sea horizontal, vertical o cuadrada.
Esta pestaña también funciona gracias a la
acción de scroll.
Diseño de la app
PESTAÑA ARTESANOS
A través de la pantalla de inicio el usuario
también podrá acceder a la pestaña de
artesanos. Aquí podrá realizar una búsqueda
de todos aquellos artesanos o diseñadores
que estén en la comunidad de Crate. Además,
podrá realizar una búsqueda filtrada mediante
cualquier categoría que esté disponible.

Diseño de la app
FICHA PRODUCTO
El usuario podrá ver los productos que se
han realizado gracias a las colaboraciones,
cada uno de ellos tendrá una ficha técnica
donde se podrá encontrar todos los aspectos
relevantes del producto. Como, por ejemplo,
sus diseñadores, materiales, vídeo de cómo se
hizo y fotos del producto.
Esta misma estructura se mantiene para
la previsualización de los detalles de los
productos propios de cada artesano.
Al igual que las pantallas anteriores este panel
funciona gracias a la acción de scroll.
Dentro de la ficha de producto el usuario se
encontrará con diferentes botones interactivos,
por ejemplo, podrá comprar el producto,
solicitar una nueva colaboración con los
artesanos implicados para personalizar su
compra y acceder al perfil de cada artesano.
Por otro lado, en la parte superior izquierda
encontrará una flecha que le ayudará a ir a la
página anterior. De este modo hacemos que la
experiencia de usuario sea más intuitiva.
Pantalla 1 Pantalla 2 Pantalla 1 Pantalla 2

Diseño de la app
FICHA PRODUCTO
El segundo botón de la barra de navegación
en la app Crate es el “Panel de búsqueda”.
Esta función proporciona a los usuarios una
manera sencilla y eficiente de buscar contenido
dentro de la app. El panel de búsqueda permite
al usuario ingresar palabras clave o nombres
específicos para encontrar productos,
colaboraciones, artistas y cualquier otro
contenido relevante.
Al utilizar el panel de búsqueda, los usuarios
pueden explorar de manera rápida y precisa el
contenido deseado. La búsqueda se realiza de
forma inteligente y los resultados se presentan
de manera ordenada y relevante. Esto permite
a los usuarios ahorrar tiempo y encontrar lo que
buscan con facilidad.
Diseño de la app
PANEL DE COLABORACIÓN
El “Panel de Colaboración” es la tercera
pestaña del panel de navegación en la app
Crate. Esta sección está diseñada para
fomentar la colaboración entre los usuarios
y los artistas. Aquí, los usuarios pueden
descubrir y guardar a sus artistas favoritos con
el fin de iniciar nuevas colaboraciones.
ElobjetivoprincipaldelPaneldeColaboración
esfacilitarlacreacióndeconexionesyla
comunicaciónentrelosusuariosylosartistas.Los
usuariospuedenexplorarunaampliaselecciónde
artistasydiseñadoresdestacadosyagregarlos
asulistadefavoritos.Alhacer“match”consus
artesanosfavoritos,secreaunaoportunidadpara
iniciarunaconversacióncolaborativa.
Este panel brinda a los usuarios la posibilidad
de establecer contacto directo con los artistas,
compartir ideas y trabajar juntos para crear
productos únicos y personalizados.
A través del Panel de Colaboración, Crate busca
promover la conexión y la sinergia entre los
usuarios y los artistas emergentes, facilitando la
creación de productos innovadores y auténticos.

Diseño de la app Diseño de la app
PANEL CHATS
VENTANA DE CONVERSACIÓN
Dentro de la app Crate, los usuarios tienen
la posibilidad de entablar conversaciones
directas con sus artesanos favoritos para
personalizar sus productos, llegar a acuerdos,
intercambiar ideas e, en última instancia,
consensuar un acuerdo para realizar el pedido
y establecer un presupuesto.
Esta función se realiza a través de un chat grupal
que involucra a los artesanos seleccionados y
al usuario que solicita la colaboración. El chat
grupal proporciona un espacio de comunicación
para interactuar de manera fluida y efectiva.
A través de la conversación, se puede discutir
y personalizar cada aspecto del producto,
asegurando que se ajuste perfectamente a las
necesidades y deseos del usuario.
Además se puede establecer acuerdos sobre
el precio, los plazos de entrega y otros detalles
relevantes. Esto garantiza una comunicación
clara y transparente entre todas las partes
involucradas, y facilita la toma de decisiones y la
concreción de los pedidos de manera eficiente.

Diseño de la app
TRÁMITE DEL PEDIDO
Una vez que el usuario y los artesanos
hayan llegado a un consenso sobre el
pedido, el siguiente paso es realizar el pago
correspondiente a través de la pasarela de
tramitación de pedidos. En este apartado,
se brindará al usuario toda la información
detallada sobre su pedido, incluyendo los
productos seleccionados, las opciones de
personalización acordadas y el precio total.
La pasarela de tramitación de pedidos ofrece
una interfaz segura y confiable para que el
usuario realice el pago de manera rápida y
sencilla. Se proporcionarán las opciones de
pago disponibles, como tarjetas de crédito,
transferencias bancarias u otros métodos de
pago electrónicos, según lo establecido por la
plataforma de la app Crate.
Una vez que el pago se haya realizado
exitosamente, se generará una confirmación
del pedido que será enviada tanto al usuario
como a los artesanos involucrados. Esta
confirmación incluirá los detalles del pedido,
el comprobante de pago y cualquier otra
información relevante.
Pantalla 1 Pantalla 2 Pantalla 3 Pantalla 1 Pantalla 2 Pantalla 3

Diseño de la app
PERFIL DE USUARIO CLIENTE
Diseño de la app
VENTANA DE CONVERSACIÓN
A través de la pestaña de perfil, los usuarios
tendrán acceso a los ajustes de su cuenta, lo
que les permitirá personalizar y gestionar su
información de manera conveniente. En esta
sección, podrán realizar diversas acciones,
como modificar su foto de perfil, actualizar
su nombre, visualizar un historial de pedidos
anteriores, cambiar el método de pago
utilizado, ajustar las configuraciones de la
cuenta y acceder a información adicional sobre
ellos mismos a través de la sección “About”.

Diseño de la app
INICIO DE SESIÓN COMO ARTESANO
El inicio de sesión como artesano, diseñador
o artista proporciona a los usuarios con
habilidades creativas la posibilidad de acceder
a un perfil y panel específicos para ellos dentro
de la app de Crate.
Diseño de la app
PESTAÑA DE INICIO - COMUNIDAD
La primera ventana de la interfaz como
artesano es la página de inicio, donde los
artesanos pueden obtener una visión general
actualizada de los productos y colaboraciones
en la comunidad de Crate.
En este apartado, los artesanos podrán
encontrar una selección de productos
destacados, destacados recientes y nuevas
colaboraciones que se han generado en los
últimos días. Esto les permite mantenerse al
tanto de las últimas tendencias y oportunidades
de colaboración dentro de la comunidad.
A través de esta primera pantalla el artesano
podrá acceder a cualquier contenido que
le interese, ya sea visitar el perfil de algún
artesano o ver las características de algún
producto en concreto.

Diseño de la app
PESTAÑA DE INICIO - COLABORADORES
Al igual que la ventana anterior, el artesano
podrá acceder a la pestaña “colaboraciones”
para ver de manera actualizada aquellos
productos que han sido creado gracias a las
colaboraciones de Crate. Es por ello que, para
mostrar este contenido, se le da prioridad a las
fotos del producto pero también a las personas
implicadas en el proceso de creación. Además,
el usuario artesano puede darle me gusta a los
artículos para así generar interacción/apoyo a
la comunidad creativa.
Diseño de la app
PANEL MENSAJES
En la pestaña de mensajería diseñada para los
artesanos, la interfaz se presenta de manera
similar a la vista del modo usuario, pero con la
capacidad de clasificar las solicitudes según
su origen. Esto permite al artesano organizar
y gestionar de manera efectiva las diferentes
solicitudes que recibe.
En esta interfaz de mensajería, el artesano
puede encontrar tanto las solicitudes de
colaboración provenientes de otros artesanos
de la comunidad de Crate, como las solicitudes
realizadas por usuarios externos que desean
iniciar una colaboración.

Diseño de la app
PANEL PERFIL DE USUARIO - ARTESANO
El artesano contará con un apartado exclusivo
para personalizar su cuenta de usuario en
la app de Crate. Este apartado le brindará la
oportunidad de gestionar su perfil profesional
y garantizar que su presencia en la plataforma
refleje de manera precisa su trabajo, productos y
preferencias personales.
Dentro del apartado de personalización de
la cuenta, el artesano encontrará un panel
profesional que le permitirá actualizar y mantener
su portfolio en Crate. Aquí podrá agregar nuevas
imágenes, descripciones y detalles relacionados
con sus productos artesanales. Esta función
le proporciona una plataforma para exhibir y
destacar su trabajo, lo que ayuda a atraer la
atención de potenciales colaboradores y clientes
interesados en sus creaciones.
Además, el artesano podrá acceder a la
configuración de su cuenta para personalizar
diversos ajustes. Desde esta sección, podrá
editar su información personal, como su foto
de perfil, nombre y detalles de contacto.
También podrá gestionar sus preferencias
de notificaciones y cualquier otro aspecto
relacionado con la configuración de su cuenta.
Diseño de la app
PANEL MENSAJES
En la pestaña de mensajería diseñada para los
artesanos, la interfaz se presenta de manera
similar a la vista del modo usuario, pero con la
capacidad de clasificar las solicitudes según
su origen. Esto permite al artesano organizar
y gestionar de manera efectiva las diferentes
solicitudes que recibe.
En esta interfaz de mensajería, el artesano
puede encontrar tanto las solicitudes de
colaboración provenientes de otros artesanos
de la comunidad de Crate, como las solicitudes
realizadas por usuarios externos que desean
iniciar una colaboración.

04.5. USO DE IMÁGENES
04.5. USO DE IMÁGENES
Uso de imagenes
Todos los bloques fotográficos que se utilicen
en la interfaz de la app de Crate deberán tener
los bordes redondeados con un ajuste de 20pt.
Esto garantiza una apariencia uniforme
y agradable en toda la aplicación.
Además,pararesaltaryenmarcaradecuadamente
lasimágenes,cadabloquedecontenido
fotográficoestarárodeadoporunalíneade
contornode1pt.degrosor,encolornegro.
Es importante tener en cuenta que todas las
fotografías utilizadas en la app deben cumplir
con los derechos de autor correspondientes.
Cada artesano es responsable de proporcionar
imágenes que sean de su propiedad o que
cuenten con los derechos de uso necesarios.
Se recomienda encarecidamente a los
artesanos que utilicen sus propias fotografías
o que obtengan imágenes de fuentes
confiables y autorizadas, evitando infringir
los derechos de autor de terceros.

...
05. Accesibilidad

05. ACCESIBILIDAD
05. ACCESIBILIDAD
Accesibilidad
Crate se ha creado con interfaz intuitiva y fácil
de usar para garantizar una experiencia fluida
y agradable para todos los usuarios. Se ha
adoptado un enfoque centrado en el usuario,
teniendo en cuenta la simplicidad y la claridad
en el diseño. Algunas características son:
Diseño limpio y minimalista: se ha optado
por un diseño limpio y minimalista, evitando
la sobrecarga de información y elementos
visuales innecesarios. Esto facilita la
navegación y la comprensión de la aplicación,
especialmente para los usuarios nuevos.
Organización estructurada: se ha organizado
cuidadosamente los elementos y las secciones
de la app para que los usuarios puedan
encontrar rápidamente lo que están buscando.
Con una arquitectura de información clara y
lógica, agrupando funcionalidades relacionadas
y proporcionando una navegación fluida.
Uso de iconografía intuitiva: el diseño
de la iconografía es clara y reconocible las
cuales representan diferentes acciones y
funcionalidades. Esto permite a los usuarios
comprender rápidamente las opciones
disponibles y facilita la interacción.
Consistencia visual: se mantiene una
consistencia visual en todo el diseño de la
aplicación, utilizando colores corporativos,
tipografía coherente y elementos visuales
similares. Esto ayuda a crear una experiencia
cohesiva y familiar para los usuarios, lo que les
permite moverse fácilmente dentro de la app.
Feedback visual y animaciones sutiles:
se ha incorporado animaciones sutiles para
indicar acciones realizadas por el usuario o
cambios de estado. Esto mejora la interacción
y proporciona una retroalimentación visual
clara, asegurándonos de que los usuarios
comprendan y sepan que sus acciones han
sido ejecutadas correctamente.

Crate, Diseño y artesanía emergente - Manual de producto app

Crate, Diseño y artesanía emergente - Manual de producto app

Recommended

Recommended

More Related Content

Similar to Crate, Diseño y artesanía emergente - Manual de producto app

Similar to Crate, Diseño y artesanía emergente - Manual de producto app (20)

Recently uploaded

Recently uploaded (20)

Crate, Diseño y artesanía emergente - Manual de producto app