 Os presento a Ben subido e os va a hablar de... De coxas. Me habla para te canillo, por favor. Vale, mira, este diseñador do Producto Digital, que ne su propia persa, Agencia ROOT, é especializado no XQI, e colabora con a comunidade E agora os voy a dejar directamente con ele para nos unir máis tiempos. Vamos a ver interesante. Se escuche a línguas, nós vemos éxito. Non sube la boca ya. Non suante e o podamos encontrar. Aunque antes é xao el tiempo, Voy a intentar ti un pouco rápido porque quero contar muchas coisas E não me interesa nada porque creo que lá que estamos vendo En torno de Sara Aguiloper, Dentro das desaportando, en un dia, A lo que se dice e un pouco de conocimiento. Primeiro de todo, grácias. Primeiro grácia a organización, que me veniu xao a hablar. Perdón, é xao é xao o coxas no XQI, Aunque da o barro, á unas barros. Segundo, grácias, a vez de de Sevilla, Porque realmente llevo antes de hablar de diseño, Pero, en el contexto de los trabajos que hemos estado organizando Para a vez de de Sevilla. E, bueno, como a vez de de Sevilla, Como muchas empresas, que coxas, O coxas que se están haciendo, aunque se hacen cosas muy interesantes, Non está perdido de la comunidad, Pero están veniendo éxito. O coxas internas, Onde llevo o daño e o de reconvención O que vamos a contar aquí hoy, O que vamos a repetir posibilamente Para recibir o coxas, coxas con vosotros. E, por outro lado, Les coxas en vador, Que explica por talaba comunidad Unas coxas que están haciendo, Unas coxas que os poden contar De o que nos están haciendo. E, graxia, que é xeca A vosotros coxas, que estén passadas E, xeca, que unas coxas conmigo Escuchandame, non vinhan de diseño. Datos interesantes antes de continuar, Se han celebrado, Hasta agora, contando con éxitas, Unas seis workings, Si non me fallan las cuentas, Suman un total de 160 ponencias, Redondeando, son 159, Pero que no número redondo, que queda má bonito. E, de diseño, Lo que seria específicamente, Lo que seria específicamente diseño Son unas 17 charlas. Éso é o que eu he contado, Próximamente. He tenido específicamente O tema de diseño, E se ha tratado en 17 charlas de 160. E creo que estamos en un punto En el que la comunidad de workings Tiene suficiente madures Como para entender que el diseño No é un proceso simplemente estético, Sino que tenemos que aportar cierta metodrogía Igua que os desarrolladores Hablan de sus procesos de trabajo. Eu intento aportar esta visión En estas charlas. Que é o que eu vou ver? O que é o que vamos a ver En estas charlas? Para non jugar mucho Con vuestro tempo, Se não estáis seguros Se deveis estar aqui En esta sala ou en la siguiente, Básicamente, Eu vou tentar convencer Con as próximas Dos diñetas. Se não convence o que cuentas Que eu, por favor, Quando não éis a sala E en seguida vai a ir ao outro sítio O único que vai ocurrir Que não é nada malo Eu tenho que unha libreta Com o meu WordPress Ou anotaré vuestro nome Unha crucezita Pero prometo que não significa nada malo. Vamos a poner un pouco de contexto A lo que vamos a hablar. Primeiro vou contar o objetivo O que é o objetivo de nixarla Que básicamente é Hablar de diseño De producto digital. Decir De metodología de diseño en general. Tenen en cuenta que Con o WordPress Se podem crear Muchos tipos de produtos Podemos crear páginas web corporativas Podemos crear comercio eléctronico Aplicaciones web, etc. Eu quero hablar de diseño Pero não dos clásicos Tips de diseño De Hay que hacer esto Con tipografía, con color Sino me gustaría escalar esto A un nivel máis baixo De metodología E o diseño como servicio. Por outro lado Evidentemente dentro Del contexto de WordPress O que vamos a hablar É de diseño De temas De WordPress Que están pensados Que son personalizados Não é que Vamos adquirir Un tema de WordPress De algún sítio E lo modificamos Sino que dirextamente Vamos a trabajar En el tema personalizado E evidentemente En el contexto De los medios digitales Eso é obvio O que acabo de decir Que son todos Los productos que se construíen Con WordPress Más contenidos Por si Esto os condiciona A estar aquí En esta charla o non Não vamos a ver código Sé que isto pone Muit triste a los desarrolladores Pero não procede Ver código en esta charla Alguna cosita comentaremos Não vamos a hablar De Gutenberg Ya sé que estáis vosotro Con supicacia diseño Por seguro que va a contar Alguna historia De Gutenberg, etc. Non Daí dos charlas De Gutenberg Muit especializadas Eu o que quero hablar É de una metodología de trabajo Que quizás En el futuro engancha Con essa llegada De Gutenberg E não habrá Gris, gis Animados, gif Graciosos Sé que isto motiva Muitos a la gente Também Pero eu não tenho Gif graciosos Non xante Puedo hacer chas carrillos Sobre a macha E con isso Un pouco intento Amenizar esa falta De gif animados Sobre mim Esta Aunque se hable Mucho delego Del diseñador Que é a viñeta Que probablemente Más perista me dá Em A forma de resumir O que encontrado En este tempo É decir que soy diseñador Digital Que significa Soy de la vieja escuela Vengo de un mundo En el que o diseñador Prácticamente diseñaba E também programaba Después É cierto que En los últimos años Havia una segmentación De los perfiles De diseño E nos ha tocado Por obligación Por gusto Trabaixar En diferentes escopos Eu o que basicamente Trabaixo a día de hoy É todo o proceso E o diseño De manera transversal Desde o concepto Hasta o código E dicí E un pico colorero Pero também Trabaixo a maquetación HTML CSS Un pouco de JavaScript Pero Con cierto aspecto E sobre todo O que hago São temas personalizados Não trabalho con sinfores E ese tipo de recurso E utilizamos En muchos de los proyectos E utilizamos recursos De código abierto Para construir los temas Pero los temas son totalmente personalizados En ese contexto Criamos un montón de costares Desde como decía Páxinas web Corativa Aplicaciones web Comércio electrónico Todo xinco Por preso Vale Eu o que venho aquí a hablar É o proceso De trabajo De diseño De la metodología De diseño En un contexto especificamente De O que son los metodisitales Eu utilizado En el título de la charla A palavra un pouco inventada Que está La gente de letras Echa a mano na cabeça Que é editorización Como tal Eu creo que no existe la cor Pero lo he intentado A ver Que é una solución suficiente E utilitar a corresusa Para explicar Realmente En que existe O método de trabajo Vale Entonces por intentar Equalizar Porque quizás Cada uno en la cabeza Tiene Un concepto diferente De lo que é sumedio Un metodisital Pois Vou intentar explicar En estas siguentes Positivas Que são os metodisitales Que son os portales verticales E en que se diferencian A un bloc Vale Que entendemos por metodisitales Bueno pues Un metodisital É basicamente Um sítio Que ofrece Contenido Na metodisital Vale Un metodisital É um sítio Podria parecer un bloc Pero no lo é Pero sí é verdade Que comparte con o bloc Que puede tener un contenido En torno a unha temática O un sector determinado Un metodisital Puede hablar de motor Puede hablar de moda E sempre En torno a unha temática Muy concreta Su modelo de negocio É evidentemente la publicidad É a través de impresións A través de sementación A través de patrocínio Luego Hablaremos de O modelo de negocio E bueno Eu sei que Achei de hoje Há muito debate Respeto ao tema da publicidade Os metodisitales A incertalucha Con os blocadores De publicidade etc. Depois comentamos Algunas ideas Respeto E o rol do usuario Digamos O usuario Que equivalirá Ao cliente De este produto digital Pues basicamente É algo que se interesa En esta temática E consume este contenido É muy importante En este caso O rol do usuario Barra cliente Porque é realmente O que dá valor Ao próprio meio digital O usuario consume o conteúdo Resignifica o conteúdo Se os usuarios comparten Una notícia má que outra Está resignificando A notícia Orienta a temática O volumen do usuario Nos está indicando Realmente qual é o interés verdadeiro De as personagens Que consumen o conteúdo E, por supuesto, A labor de distribución De conteúdo Que hace o propio usuario A través de redes sociales E, de má, se cuenta Con eso, en ese modelo de negocio A priori Con esta descripción Podiamos dizer que é un blog Una temática específica Que tiene publicidade E que o usuario Comparte o conteúdo É un blog Qual é a diferença Qual é o punto de inflexión Que nos transforma No meio digital A mi forma de verlo La diferencia entre un e outro É o ejercicio de editorialización De que é esta palavra inventada Con la que eu intento expresar Que un medio digital Está obligado a editorializar E editorializar o seu contenido Un blog Non é má que una secuencia Ordenada de posts E os posts Sempre tenen o mesmo formato Mientras que un medio digital Hace un ejercicio de editorialización Quando elige Que as personas Quando elige Que además de um post Non é má que corriente Vai tener noticia, opinións Reportaje Contenido promocionado Recomendado E também contenido De una Que en troca con una tipología Según la temática Se temos un sitio Con recetas totas Bá, má o menos De eso o tema Todo isto evidentemente Se transforma Em custom post type E exemplos de verticales Non pretendo enfrentar A estos sitios Simplemente un Exemplo como cualquier outro Por exemplo, a gente de web DSL Tiene seu sitio de tendencia Ocio me de tener nosotras E a veces de Sevilla Boulevard Sur Que é un sitio Que eu he trabajado Básicamente Se os fijais Os tres sitios Hablan de la misma temática Cada uno está construido de manera diferente Pero o modelo é similar Outra cosa A tendencia A os verticales A estos portales verticales Que son médios É a estrutura Vale Non solamente É una secuencia de post Uno debajo de outro Sino que intentan aportar Una estrutura personalizada Para, digamos Poner en valor Un contenido frente a outro Por exemplo, aquí Temos reportaje, noticias Opinión, rápido publicidad E se ha editorializado Atraves de una estrutura Que parte del diseño Outra propuesta Propuesta de valor De os médios Sería La modularidad Significa que A parte de la estrutura Originalmente propuesta Puede modificarse En función de las necesidades En determinados momentos Es decir, momentos Que haya Que promocionan Un contenido frente a outro Por calendario Por... Actoridad Pues se supone Que deberemos tener La opción Ola forma en la que Esos módulos Se puedan mover E aquí estamos generando E esa suspicacia de Gutenberg Pero recordar Que eu he estado hablando De un processo de trabajo De cinco años atrás Donde não estava Gutenberg Então, eu tenho que buscar A solución a ésta Vale Ésta obviamente Se traducería, por exemplo, Con a forma de trabalhar O quiche Muy bien, requisitos previos O cliente tem suas preocupaciones Que podemos transformar En os objetivos do trabalho E nós temos que Tener un perfil determinado Ésta seria o equipe Para o que vamos a trabajar Nosotros Vale Dependendo do cliente Podemos ter Dentro desse cliente Gente que se dedica A marketing eventa Gente que se dedica Especificamente A parte editorial E gente que se dedica Ao desarrollo Vale O desarrollo Podemos aportá-lo Nosotros En función de a solicitud Del trabalho Ou estando dentro O próprio medio Ou incluso Tenido casos Que os desarrollas São outro proveedor Más Con o que hai que entender E como nós Podemos trabalhar Con eles O primeiro que temos É que temos que entender Qualas são suas preocupaciones A gente de marketing eventa Normalmente Van a requerir Espacios para a publicidad E a integración Con publicidad externa Tenemos que tener en cuenta Los redactores E SEO, etc. O equipe editorial O que necesitas básicamente Poder trabajar É Trarjar con os tipos de contenido E con esa modularidad E os desarrolladores O único que queren É que Poden integrar De esto de manera Más estando posibles Con o que oferece O que seria o codex E que sea sostenible E escalable Como construimos E este tema de Wordpress Por nós o que vamos hacer E transformar estas preocupaciones En los objetivos Del trabajo Del propio diseño Para a gente de marketing eventa O que vamos hacer E diseñar Tenendo en cuenta Que tenemos que respetar Espacios de publicidad A los diseñadores Non nos gusta esto Porque ese publicidad Afeará o nosso trabajo E etc. Pero tenemos que asumirlo Hay que asumir o modelo de negocio Sinón No te podes meter En este tipo de proyecto Non se discute E ese modelo de negocio Sinón que vamos A aportar nuestra parte A la gente editorial Vamos a diseñar por componente Vamos a pensar En esos tipos de contenidos E creamos un sistema de diseño A lo que vamos aplicar En el tema que se construirá E a los deserradores Siempre que estemos diseñando Hay que hacer un diseño Que sea un poquito codex Freely Es decir Non inventar algo Que a nivel de desarrollo Poda provocar cierto desvio O suponga un problema Eso es la diferencia entre Un buen diseñador E otro Un diseñador Que va a súbola E diseñar Que piensa que está bien E otro diseñador Que entende el contexto En el que está diseñando Vale Por eso E es importante a día de hoy Hablar de diseño E os decía Quantas charlas Hemos hablado de diseño En estas últimas workings Porque el diseño Non solamente es O proceso de chapa E pintura De actualmente A la de trabajar de corpo Sino que a día de hoy El diseño Lo que hace es traducir E ese modelo abstracto Que cada parte del equipo Tiene en su cabeza Los editoriales Están empezando en sus cosas Nosotros o que vamos hacer E utilizar el diseño Como un especie de esperanto Para poner de acuerdo El lenguaje E cualizar el lenguaje De todo o mundo Non solamente es pintar El perfil de diseñador Pues bueno Tiene que ser Eu entendo Que tiene que ser Un diseñador que sea O usuario de Warp Press Que no provoque Este efecto de Non sé se acordei Del meme de Pa que quere saber E sos a saludo De una persona Que se dedicaba a responder En jazz u respuesta Pues macho Se está tu respuesta Pa que estás aquí Tene que saber Realmente En el contexto En el que está E tens que entender De que va a historia Non? HTML e CSS Són oblicatórios Eu não estou dicendo Que o diseñador Tenha que maquetar Pero sí Tiene que saber Las implicaciones cada De que pinta Que son Las consecuencias De ese diseño En una maqueta E interiorizar O modelo de negocio Ya lo he dicho antes Hay que assumir Que es un proyecto Que tiene publicidad Que eso puede Afear un poco La fotografía Non queda tan bonita Pero tenemos que encajarlo Porque básicamente É a solución Que nós estamos ofreciendo Proceso de diseño De Boulevard e Grumet Que son los dos proyectos De AVF de Sevilla Los que he estado trabajando Con todo E este contexto De trabajo que os he descrito Vale O primero que se hace É Una vez Nos hemos reunido Con el equipo de editorial E demás E conocemos O quale son los tipos De contenido E etc. Vamos a trabajar En las áreas Vamos a ese concepto De editorialización Ya en una estructura Que será La futura estructura Html Vale Esa estructura Html Se pu identifica Perfectamente las áreas E esa área La podemos transformar En áreas de Wigge Que eso ya es transformar O sea, hacer En la equivalencia Del diseño Al desarrollo Vale, tenemos nuestras áreas De Wigge E dentro de esas áreas Pues Los desarrolladores Trabajaran En la medida En la que Ésto posteriormente E sea modular Pues Se puede jugar un pouco Dentro de eso De esas áreas de Wigge Los desarrolladores Haran sú parte Para que podamos Poner reportajes, noticias Opinión Más omeno E esa es La manera En la que se trabaja Que tenemos que Hacen nosotro Una vez Hemos solucionado Esa estructuración De áreas Pues vamos A diseñar Los componentes E eu no No recomiendo Hacer Quizás Una primera pintura Generada E dicis Se un componente Un item Como por exemplo La noticia Trabajar desde ese componente Para validar El diseño específico Del componente E a través de aí Escalar el resto del diseño E aí ya podemos Nosotro e va adorando E se isto Tiene una correspondencia Con o que serían Los estandares de Warpre Entonces Los desarrolladores Dirextamente serán Nostros amigos Nos harán o que hay E cetera Con eso Digamos que Validamos Los primeros puntos De frición Que podes existir Entre o diseño E o desarrollo Entende que veis Que esto se corresponde Con el título Campo personalizado Categoría Poderá ser de outra manera Pero como é Una correspondencia Conseguimos validación rápida Con eso Que hacemos Seguimos escalando E empezamos a montar Ojetos más complejos O que seria Como o diseño Atómico Que partimos desde molécula Finalmente Templay Páginas etc. Outra cosa La hora de diseñar E contar Con que recursos El medio Es decir Acaboy Están trabaljando As personas Que tienen diferentes Conocimentos técnicos Sí Saben manejar Con Retoque fotográfico etc. Por lo mejor Podemos plantar diseño Que a la hora de Mantener e escalar Tengan esa dependencia Que sabes que O equipo va Tener que modificar Esas cosas Se no lo tiene Preparemos o diseño Por exemplo Aqui se está haciendo Un degradado Que está como inclinado E tal E aparte La fotografía Está debajo De todos os campos E tenemos un título En blanco La pregunta seria Siempre vais a poner Osa foi a pergunta O equipo editorial Siempre vais a poner fotografía Teniendo en cuenta Que tenis un título en blanco Ono Eso lo vais a tener en cuenta Sí, tenemos recursos Para hacer fotografía Noxtante Por si acaso Hacemos Un diseño Que prevea Ese tipo de cambio Entonces, la fotografía Tiene una sombra Que Digamos Hace que se guarde Su seguridad Respeto a fotografías Que pueden ser un pouco Más blanca Eso lo tenemos que tener en cuenta Con eso Seguimos avanzando E basicamente O que hacemos É construir Todo Construir todo O sistema de diseño Que posteriormente Bueno En realidad No es un sistema de diseño No es un guía de estilo O sistema de diseño E cuando se completa La maquetación De los componentes Html Eso es Hablando estrictamente Pero bueno Y una vez tenemos esto Ya podemos empezar A maquetar las páginas Que finalmente Se integrarían E deba Aquí se oficei E ya se ve Como funcionan Las diferentes áreas Ecetera Como se van combinando En fin Todo esto Tiene una translación final Al código Es algo un poco Más tangible Pois sí Evidentemente No es que yo esté contando Que bonito Lo he pintado Sino también Lo he llevado A la maquetación Aquí podéis ver Los archivos E se se que estou utilizando Ver que los comis Son algunos recientes E bueno E isto é O modelo ya transladado De La maquetación O futuro próximo Todo este modelo De trabajo Será posible Engancharlo con Gutenberg Posiblemente Pero independente De se utilizamos O no utilizamos Gutenberg Lo que tenemos Que tener presente E la metodología de trabajo E que el diseño Va más allá De pintar Sino que lo tenemos Que utilizamos Como un servicio E como un apropiamento de metodología Que haga entender A todas as partes del equipo E digamos Respeite O proyecto Procule que No tengamos ciertos de frío Vale E pouco más Gracias Está un pouco solo Dentro A ver Xisto Gracias E Evidentemente Como productor Del televisión En Madrid y yo Queremos montar Como un espécie De plataforma De fútas En Madrid Como lo que es Que nos llevamos Pero de segunda división de E Me dirán a saber Se usar Con esta fórmula En el proyecto Yo de Miloso Mar Que vamos para Añutar el La web E el mes Sin duda Eu Mi consejo seria Sim Hola sim Mi consejo seria Que para ese proyecto Que parece Que Tenen cierta ambición E En el sentido de que Va Va abarcar en mucho tipo de contenido Mi consejo seria Que os plantei En el modelo ideal En el modelo soñado E sobre papel Dirextamente Plantei Pues vamos a tener Tal componente Tales páginas Queremos mostrar aquí Los resultados Aquí tenemos Una página Donde se puede ver Resultados en directo Mientras se va Jogando el partido E etc. Ver Qual es el alcance E después de eso Saca el factor común De quale seria O producto mínimo Viable Que tenes que llevar a cabo Entonces, a partir de ahí Deseñar los componentes Que necesitas e o sí Eso te va generar El estilo genérico De la página E lo que es El estilo genérico De la hoja de estilo Propemente dicha E se prevêes E eso Quando vayais creciendo Será má fácil De añadir cosas nuevas Claro Sobre todo Efectivamente Sobre todo porque Así Estás tenendo en cuenta El trabajo no sobre Del diseñador Sino del desarrollador Se ya tienes previsto Por donde tienes Que hacer E ese recorrido de diseño A la hora de crecer E es má fácil Que sí Después llega un punto En el que tenes que hacer Un tenes que vivo tarde De tal maneira Que basicamente Tenes que tirarlo todo E volver a hacer So un poco la idea Me parece viable Yo Una única pregunta Era Como influye La publicidad A hora de Que vosotros questionéis O que es un diseño Que nos daban Perdiamente O que dice En el misterio E a gente Y la publicidad O que es vosotros En el misterio Vale Que es un diseño Que va a publicidad O que nos vamos mostrar E etc. Pues Es una Es una Es una buena pregunta E en este caso La publicidad Venía dictada Es decir Non Non la posición Como tal De la publicidad La mayoría sí Pero si venía Existen tales banners De tales tamaños Lo ideal seria Que estuvieran Aquí, aquí, aquí En posición E en función de eso Te va dejando O resto de espacio De la composición Para trabajar Vale Ya, por exemplo Si recuerdas la pantalla Voy super rápido A segundito Si recuerdas la pantalla Aquí Estas que se ve Un poquito Aquí Vale Si me ponen Esto obligatorio Yo lo respeto Pero La propuesta Nuestra sí Es esta división De dos en dos E esta grande E eso sí Es nuestra parte Pero Los puntos de publicidad En este caso En este proyecto Sí Se han A sido obligatorio E agora El ser todo respirado Se obligan En esos proyectos En concreto Se sirve Unha versión baile específica Que es todo vertical E después La versión tabla E escritoio Compartenla yao De tal manera Que es muy fácil Que tabla e da yao Sean prácticamente igual Exactamente Más o menos Como se serve Servís Una cosa que Que tiene el proyecto La versión Tabla desde el móvil Pero evidentemente Non es como doler Ni mucho Ni mucho menos Visto Pues es mucha gracia