Explore

Cofi <> treseiscero

Este documento describe en detalle el proceso que seguiremos en treseiscero para llevar a cabo el proyecto.

Sobre Cofi

Cofi es una plataforma tecnológica que ayuda a las organizaciones a planificar y gestionar su rendimiento de manera eficiente. Esto se logra mediante la combinación de una experiencia colaborativa fácil de usar con un motor de métricas potente. Cofi permite a las empresas tomar decisiones basadas en datos en tiempo real para mejorar su rendimiento y alcanzar sus objetivos.

¿Cuál es el objetivo?

Establecer un marco de colaboración para desarrollo Webflow

Nuestra forma de pensar y actuar

¿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?

Andoni Martínez Talavera, diseñador UX/UI

Eric Ruiz Molero, desarrollador Webflow

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:

Diseño UX/UI

Realizar investigación de usuarios

Recopilamos datos e información sobre el público objetivo, como sus necesidades, preferencias y comportamientos, con el fin de informar el proceso de diseño. Esto podría incluir actividades como encuestas, entrevistas con usuarios y pruebas de usabilidad.

Crear wireframes

Estas son versiones de baja fidelidad de la interfaz de usuario que se utilizan para probar y mejorar el diseño antes de crear la versión final. Los wireframes se centran en el diseño, la estructura y la jerarquía de la interfaz de usuario.

Definir la apariencia

Establecemos el estilo visual y estético de la interfaz de usuario, incluyendo colores, fuentes y otros elementos de diseño.

Crear elementos de diseño

Definimos los elementos estándares del proyecto. Aquí se realizan tareas como: diseñar botones, iconos y otros elementos de interfaz que se utilizan a lo largo de la interfaz de usuario.

Establecer un estilo y diseño consistente

Definimos las reglas y pautas para cómo debe estructurarse y organizarse la interfaz de usuario, con el fin de crear una experiencia consistente e intuitiva para el usuario final.

Pruebas e iteración

A lo largo del proceso de diseño, el equipo probará la interfaz de usuario con el cliente para recoger comentarios y realizar mejoras. Esto podría implicar realizar más investigación de usuarios, revisar el diseño en base a los comentarios y crear nuevas versiones de los esquemas de alambre y los prototipos.

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 webflow adecuado siguiendo lo siguientes pasos:

Desarrollo Webflow

Teniendo todo el diseño aprobado, o parcialmente aprobado, empezaremos con el desarrollo webflow adecuado siguiendo los siguientes pasos:

Ajustes generales de la página

Ajustamos todas la características que necesite tu proyecto: fuentes, favicons, paleta de colores, etc.

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 V2⁠

y a las guías de diseño aprobadas por el cliente.

Creación de componentes

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 se han desarrollado se procede a crear los símbolos del proyecto que permitirán al cliente reutilizar componentes 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. Definiremos 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.

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, rapidez. 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

Tareas generales

Ajustes generales de la página

Creación de 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 SEO

Proyectos planteados:

- Crear landing CMS para cada competidor - Crear un formulario pre-descarga de los eBooks y templates - Modificar conectores en la landing principal - Añadir un vídeo o un carrousel de 3 imágenes en la landing principal - Cambiar las imágenes de la web

Tiempos

Crear landing CMS para cada competidor: 28 h

Crear un formulario pre-descarga de los eBooks y templates: 6 h

Modificar conectores en la landing principal: 2 h

Añadir un vídeo o un carrousel de 3 imágenes en la landing principal: 5 h

Cambiar las imágenes de la web: 30 min

Presupuesto

⁠

30012023_Cofi_treseiscero_colaboración.pdf

402.1 kB

⁠

Costes de Tecnologías