31/03/2022
Oye, designer.
¿Tú te consideras designer?
Y digital además.
No pasa nada, somos tus fans. Necesitamos gente como tú para que navegar por internet sea una experiencia inteligente, bonita, intuitiva, and why not, elegante.
Pero además nos gustaría que tuvieses en cuenta que intentamos desarrollar productos digitales responsables con el medioambiente, así podemos conectar lo hacemos con lo que nos preocupa.
Ahora bien, podemos plantar todos los arbolitos que queramos pero si no hacemos un trabajo fino y lo entregamos a tiempo de nada servirá tener un bosque con nuestro nombre en él.
Hablamos WordPress, Woocommerce, Invision, Sketch, Adobe, Vanilla js, Laravel, Json, Lumen, Responsive, Media query, Javascript, JQuery, React JS, MySQL, Mongo DB, OOP, CSS, CMS, SEO, PHP, etc.
Pero también hablamos Figma. Y Figma.
(Si todavía diseñas webs con Photoshop haznos un favor y vete a la sala donde se reúnen los fans de Macromedia Freehand, ellos te ayudarán).
Ahora sí, te invitamos de todo corazón a revisar los siguientes puntos, son claves para que tu trabajo cumpla las expectativas que están puestas en él.
1. Usamos Basecamp.
Si no te gusta, nos parte el corazón.
Hay un montón de empresas fantásticas donde puedes usar tu herramienta favorita o abrazar el caos en ellas.
Si trabajas con Gold, no tendrás más remedio que pasar por el aro. Nosotros lo utilizamos para organizar todo lo que hacemos, y nuestros clientes también.
Allí se apunta el tiempo que le dedicas a cada proyecto, es donde están las tareas repartidas, las fechas importantes y espacio para todo el material necesario.
Márcalo como favorito y entra cada día, sisplau.
2. Somos perfeccionistas. Mucho.
No te imaginas cuánto.
Por eso no competimos con gente que hace webs por 500€.
Esto significa que cogemos una página y la redimensionamos hasta la saciedad. Desde pantallas 4K hasta un Apple watch.
Así nos aseguramos de que el trabajo que hacemos se ve perfecto en cualquier resolución. Incluso en la pantalla del portátil del cliente, que suele tener la peor de todas las resoluciones del mercado. C’est la vie.
Si no fuéramos tan perfeccionistas nos tendríamos que llamar Silver o Aluminium.
3. Chá. chá chá.
Nos hemos estrellado muchas veces en la pista de baile y ya tenemos un método que nos funciona. Queremos que funcione para ti también.
No empieces a diseñar si Óscar o David no te explicado el contexto, las herramientas y la forma en la que vamos a abordar cada proyecto. Con Vicente revisarás el brief, las referencias, las propuestas creativas y feedbacks de clientes. Hay un momento para cada cosa que te permite hacer mejor la siguiente.
Por ejemplo: no wireframes, no game.
Luego buscaremos referencias juntos, se las enseñaremos a cliente en un Moodboard para que opine sobre el territorio que estamos buscando. Y finalmente hacemos una propuesta de Diseño.
Wireframes, Moodboard, Diseño. Chá, chá, chá.
Ok?
4. Módulos. Módulos. Módulos.
Y los montamos en Wordpress como piezas de lego.
Trabajamos creando módulos reaprovechables, escalables, que funcionan bien en desktop y mobile, la idea es que puedan cambiar de orden, quitar o repetir y el diseño siempre debe responder de forma eficiente sin romperse.
Para conseguirlo sigue estas simples instrucciones:
A_ Cuando trabajas en un módulo, no pases al siguiente hasta que ese módulo funcione bien en todas las resoluciones de pantalla.
B_ Asegúrate de seguir las instrucciones del punto A.
C_ Asegúrate de seguir las instrucciones del punto B.
D_ Asegúrate de seguir las instrucciones del punto C.
5. ¿Responsive? Nah, liquid.
Los templos se construyen sobre columnas, pero una web necesita algo más.
Las columnas sostienen, pero no encarcelan, úsalas para diseñar webs, pero sobre todo usa tu imaginación para proyectar el comportamiento de las imágenes o el texto al aumentar y reducir la ventana del navegador, y también al usar el dedo o el ratón para interactuar.
No dejes que un programador se invente los breakpoints que te ha dado pereza diseñar, bastante trabajo tendrá en hacer realidad tu proyecto.
Mira estos ejemplos de webs mega flexibles:
https://manoverboard.com/hello/
https://wearedigitalfreelancers.com/
A continuación tienes unos puntos a tener en cuenta.
Strict
This layout will not flex with a changing format size. Fixed layouts are often used to promote a specific interaction or informational layout that would be degraded at a smaller size.
Data tables and graphs will often create a scrollable strict layout at a specific size because the legibility and interactions would be significantly degraded below a certain size.
Adaptive.
An adaptive layout is one that changes entirely based on the format it is presented in. For example, loading different experiences based on desktop, tablet, and mobile devices.
This promotes a more tailored experience for the user’s device but can become expensive to rebuild the same functionality into multiple formats.
Responsive.
A responsive layout is fluid and can adapt to a changing format size. This is a common practice on the web and has become a necessity for native apps as screen size variations have increased.
This allows you to build a feature one time and expect it to work across all screen sizes.
The downside is that touch and mouse interactions are very different and it’s expensive to account for all devices and use cases.
Breakpoints.
Trabaja sobre 360px (mobile) y 1280px (desktop y tablet) con dos breakpoints: Uno entre 360px y 768px. y otro entre 768px en adelante (hasta 3840px)
Por lo tanto comprueba que el diseño se vea bien en:
360px
1280px
1440px
Más de 2560px hasta 3840px
Si te parece exagerado siempre podemos añadir un Watch de apple a la ecuación.
#justsaying
7. ¿Y las fuentes?
Usa fuentes variables, porque si quieres un diseño flexible mejor que empieces eligiendo bien la tipo.
Un ejemplo: https://fonts.studiofeixen.ch/
Cuantas menos fuentes tenga un diseño, más eco friendly es.
(Si tu creatividad acaba de sufrir un colapso, recuerda que hay una sala de fans de Macromedia Freehand donde se resuelven estos problemas).
En Gold desarrollamos proyectos responsables con el medio ambiente, y si una tipo menos significa un árbol más pues ya sabes. Go green!
Por cierto, nos gustan los textos grandes porque la tipografía también es un recurso gráfico. Titulares grandes, cuerpo de texto de 16px para arriba. Sin miedo.
8. No todo es coser y cantar, hay que saber bordar botones.
Diseñar botones es un arte y es muy fácil hacerlo mal.
Basta en hacerlos como los hace todo el mundo y listo, ya tienes botones pequeños, con mala legibilidad y con un UI que da pena. Hay que currárselo un poco más, tu abuela estará orgullosa de ti.
9. Diseño y Desarrollo son dos pedales de una misma bicicleta.
Trabajamos en equipo, en una carrera por hacer el mejor trabajo posible dentro del timming que tenemos.
10. La distancia más corta entre dos puntos distantes es una sonrisa.
¿Estás de acuerdo?
Genial.
Anda, sé amable y ayúdanos a crear un ambiente positivo y respetuoso, entre nosotros y con los clientes.
Love is in the air, has como los developers... just breath deep.