Share
Explore

Oriol Segarra x Més Que Mai Gavà x treseiscero

Breve guía de este documento en vídeo:
⁠
Breve guía de este documento en vídeo
⁠
⁠
Primero, definamos el proyecto:
Més que Mai Gavà es un marketplace de restauración y comercio local de Gavà en el que puedes encontrar las ofertas que desees a través de un buscador filtrado.
¿Cuál es el objetivo?
Dejar a punto a la página web en Webflow para poder reutilizar el proyectos con futuros comercios.
Nuestra forma de pensar y actuar
Nuestro estudio: treseiscero
⁠
¿Qué tipo de estudio es treseiscero?
⁠
⁠
⁠
¿Quiénes están detrás?
⁠
⁠
⁠
Nuestro portfolio
⁠
⁠
⁠
¿Cómo lo hacemos?
⁠
⁠
⁠
Tres reglas
⁠
⁠
⁠
Nuestro proceso de diseño
⁠
⁠
⁠
Nuestro proceso de desarrollo
⁠
⁠
⁠
¿Qué puedes esperar de nosotros?
⁠
⁠
⁠
¿Por qué nosotros?
⁠
⁠
Información sobre: tiempos, disponibilidad, rango de precios
⁠
Tiempos
⁠
⁠
⁠
Disponibilidad
⁠
⁠
⁠
Rango de precios
⁠
⁠
⁠
Costes de Tecnologías
⁠
⁠

¿Qué tipo de estudio es treseiscero?
Somos un estudio de diseño digital no-code. Realizamos proyectos digitales con un buena lectura de diseño y los desarrollamos a través de herramientas visuales como Webflow que nos permiten ser versátiles sin perder calidad.
¿Quiénes están detrás?
Somos dos personas (sólo):
El que diseña todo con Figma, Andoni
El que desarrolla todo con Webflow, Eric
Nuestro portfolio
Nuestro mejor portfolio es nuestra propia página diseñada por nosotros que además contienen los mejores trabajos hechos hasta la fecha:
treseiscero.app
⁠
⁠
Nuestra forma de pensar y actuar
Primero tenemos tres reglas que nunca deben de cambiar:
Escuchamos un 70% y hablamos un 30%
Queremos llegar a pensar como tú. Por eso escuchamos un 70% y hablamos un 30%.
Desgranamos las ideas y buscamos una solución
Desgranamos las ideas en bruto y diseñamos el molde digital que necesites.
Moldeamos las ideas y las hacemos autónomas
Utilizamos no-code para moldear las ideas y hacerlas autónomas en un mercado competitivo.
Teniendo estas tres reglas en mente, nuestro proceso es fácil de entender, primero entregamos todo lo relacionado con el diseño. Este es un proceso basado en sprints donde la retro-alimentación del cliente es muy importante.
Estos son los procesos de diseño que seguimos religiosamente:
Primero, un cuestionario para ti
Enviamos un cuestionario para que nos ayudes a entender más sobre el mercado y el proyecto en si.
Análisis de mercado
Analizamos el mercado y la competencia. Este análisis nos permitirá saber la paleta de colores, fuentes, logos, filosofías y misiones de los competidores principales.
Creación de un perfil de usuario/cliente
Creamos perfiles psicológicos de los usuarios/clientes del proyectos para llegar a entender quiénes son los principales usuarios de la plataforma. El objetivo es empatizar con el usuario desde diferentes puntos de vista.
Definición de la UX
Empezamos estructurando la experiencia de usuario del proyecto. Esto normalmente lo hacemos en FigJam para ser ágiles y para que nos ayude a presentar y a establecer un debate con el cliente en tiempo real sobre las cosas que se van a desarrollar. Definir la UX nos ayudará a saber claramente cuál es el camino que recorrerá el usuario y por tanto, cuáles serán los componentes se necesitarán crear.
Definición de paleta de colores, tipografía y fuentes
En base a los resultados obtenidos en los anteriores procesos, creamos una paleta de colores, tipografía y fuentes óptimas para el proyecto.
Diseño de logo
In parallel we design the logo of the project. First in black & white and after with the color palettes defined. De forma paralela diseñamos el logo del proyecto. Primero en blanco y negro y luego con la paleta de colores definida.
Diseño UI + recursos visuales
Finalmente, se diseñan todas las páginas del producto digital, mock ups y recursos visuales que se necesiten.
Entrega: archivo Figma
Para poner fin a esta fase de diseño se entregará el archivo de Figma completo donde todo podrá ser exportado y todo podrá ser cambiado por el cliente.
Teniendo todo el diseño aprobado, o parcialmente aprobado, empezamos con el desarrollo no-code adecuado siguiendo lo siguientes pasos:
Desarrollo Webflow
Ajustes generales de la página
Ajustamos todas la características que necesite tu proyecto: fuentes, favicons, paleta de colores...
Creamos las clases en función de las guías diseño
Esto será una página en [Borrador] que contendrá todas las clases definidas en base a la convención de clases de Finsweet y a las guías de diseño aprobadas por el cliente.
Creación de componentes
Buttons, forms, cards, backgrounds, rich texts etc. are created on the design guidelines page En la página de guías creamos todos los componentes personalizados del proyectos como: botones, formularios, tarjetas, fondos, textos enriquecidos etc.
Estructura de secciones HTML/CSS
Luego se procede a estructurar todas las secciones a nivel de HTML/CSS, esta son organizadas basándonos en el desarrollo
client-first
⁠
de Finsweet.
Creación de símbolos
Cuando los componentes y secciones está terminado se procede a crear los símbolos del proyecto que permitirán al cliente reutilizar en diferentes páginas.
Definición de CMS
El CMS es una base de datos donde se alojará todo el contenido dinámico del proyecto. Definimos la estructura de los datos del CMS y todos los campos que se necesiten.
Javascript snippets
En páginas complejas necesitaremos añadir snippets de Javascript que nos permitirán realizar ciertas funcionalidades que no permite Webflow de forma nativa. Ejemplo: el carrusel infinito
Animaciones
Desarrollamos animaciones de alta calidad basándonos en las interacciones que nos ofrece Webflow.
Ajustes de SEO
Nosotros no hacemos SEO. Pero ajustamos todos sus parámetros: Tag de título, Meta descripción, Imagen y descripción Open Graph.
Automatizaciones con Zapier o Integromat
Realizamos las automatizaciones que sean pertinentes con Zapier o Integromat. De esa forma podemos hacer cosas como:
Conectar una newsletter
Crear una membresía
Conectar el CMS de Webflow a una API
Conectar con Whatsapp, Email o cualquier servicio de mensajería
Conectar con Airtable
Etc, etc.
Entrega: Editor y Diseñador de Webflow
Al final de este proceso el cliente recibirá el Editor de Webflow donde es posible modificar imágenes, textos, colores desde la vista front-end y también tener accesos y editar el CMS y los ajustes de SEO. También proveeremos el Diseñador de Webflow donde cualquier desarrollador Webflow podrá cambiar cualquier cosa de la página.
¿Qué puedes esperar de nosotros?
Primero, pasión. Llevamos desde 2017 creando proyectos digitales y nos ENCANTA.
Segundo, claridad. Somos honestos y transparentes. Por eso siempre decimos lo que pensamos y con nosotros no hay sorpresas.
Tercero, rapideeez. Somos rápidos y eso lo podrás experimentar durante el transcurso del proyecto.
¿Por qué nosotros?
Somos dos, lo cual es una ventaja si lo miras desde la perspectiva que seremos un micro-equipo trabajando para ti. Eso es genial si necesitas:
Un equipo cercano
Un equipo que toma decisiones rápidas
Un equipo sin malos entendidos
Un equipo de toma de decisión fácil
Un equipo sin egos
Un equipo centrado
Tiempos
Rediseño UX/UI: 1 semana
Desarrollo de Webflow: 2 semanas
Automatización de formulario con Airtable e Integromat: 3 días
Disponibilidad
Podremos empezar el proyecto el 18 de agosto.
Rango de precios
Nuestro ticket medio es de 4.000€ para un diseño y desarrollo completo. Para este proyecto en concreto se adjunta presupuesto a continuación:
⁠
Presupuesto_Oriol Segarra_treseiscero_18_07_2022.pdf
108.7 kB
⁠
⁠
Costes de Tecnologías
Search
Herramienta
Precio
1
Webflow CMS
16$/mes
2
Integromat
9$/mes
3
Airtable
12$/mes
There are no rows in this table
⁠
¿Suena bien? Así es como procederemos:
Recibirás este documento
Recibirás el contrato
Si todo suena bien, recibiremos un email tuyo
Recibiremos el contrato firmado de vuelta
Te pediremos el primer pago del 50% del proyecto
Recibiremos el primer pago 50% del proyecto
Empezaremos el proyecto
Primero, un cuestionario para ti
Análisis de mercado
Creación de un perfil de usuario/cliente
Definición de la UX
Ajustes generales de la página
Creamos las clases en función de las guías diseño
Creación de componentes
Estructura de secciones HTML/CSS
Creación de símbolos
Definición de CMS
Javascript snippets
Animaciones
Ajustes de SEO
Automatizaciones con Zapier o Integromat
Entrega: Editor y Diseñador de Webflow
¿Todo bien? Enviaremos la factura final 50% del proyecto
Recibiremos el 50% final del proyecto
Pediremos una reseña del trabajo realizado






Breve guía de este documento en vídeo:
Primero, definamos el proyecto:
¿Cuál es el objetivo?
Nuestra forma de pensar y actuar
¿Qué tipo de estudio es treseiscero?
¿Quiénes están detrás?
Nuestro portfolio
Nuestra forma de pensar y actuar
Desarrollo Webflow
¿Qué puedes esperar de nosotros?
¿Por qué nosotros?
Tiempos
Disponibilidad
Rango de precios
Costes de Tecnologías
¿Suena bien? Así es como procederemos:
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.