En muchas ocasiones nos ocurre que no sabemos por donde empezar nuestro diseño web. Tipografías, colores, jerarquías, imagenes.....puede ser demasiado.
De ahí la importancia de tener una metodología y diferentes herramientas para afrontar un diseño web de la manera más óptima.
El diseño web siempre es nuestra carta de presentación online, desde una gran empresa a un pequeño negocio, es el primer impacto al cliente. Por ello es tan importante la impresión que generamos, ya que entre un buen diseño o un mal diseño se puede marcar la diferencia.
Este Meetup es ideal para aquellos desarolladores de WordPress que se quieran adentrar en el mundo del diseño web, y mediante esta metodología pueden obtener los mejores resultados.
Durante 7 pasos abordaremos de manera general las fases del diseño web, aportando tips, webs de referencia y herramientas de todo tipo, que nos facilitaran en gran medida este proceso.
¿Te animas?
1. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima.
DEMONSTRAVERUNT LECTORES LEGERE
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima.
PUTAMUS PARUM CLARAM DECIMALos 7 pasos de mi proceso de diseño
web, por Javi Díaz
...en las siguientes Meetups
- Jueves 1 de Marzo a las 19:00h, Tarragona Impulsa -
WordPress & Beers
- Jueves 15 Febrero a las 19:00h, Amsteleria -
https://www.meetup.com/es-ES/wordpresstarragona/
https://www.wptarragona.com/
2. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima.
DEMONSTRAVERUNT LECTORES LEGERE
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima.
PUTAMUS PARUM CLARAM DECIMA
• 2 Meetups mensuales
• WordPress&Beers (La Amstelería)
• Meetup - 50% Teoría / 50% Práctica
• Tarragona Impulsa & Castell del
Paborde
wptarragona.com
3. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima.
DEMONSTRAVERUNT LECTORES LEGERE
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima.
PUTAMUS PARUM CLARAM DECIMA
4. LO S 7 PA S O S
D E L P R O C E S O D E
D I S E Ñ O W E B P A R A
5. https://www.linkedin.com/in/javidiazagudo
P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Me dedico profesionalmente al Diseño y
Desarrollo web con Wordpress.
Soy Javi Díaz
Como freelance ayudo a Empresas y Profesionales a generar
una imagen innovadora de su marca a través del diseño web.
También soy co-organizador de la Meetup de
WordPress Molins de Rei, junto a Jordi Sala y Joan Artès.
Disfruto estando en constante formación así como viajando y haciendo
fotografías, a la cual dedico bastante parte de mi tiempo.
6. https://www.linkedin.com/in/javidiazagudo
P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
“El diseño no es algo con lo cuál se nace, es algo que se aprende con horas de
visualizar contenido gráfico, contra más lo hagamos más visión crítica tendremos, y
con ello podremos diferenciar más lo que nos transmiten los elementos, si una
tipografía es la adecuada o no, color correcto , jerarquías, etc…
Y esto nos es diferente en el diseño web.”
Así que todos podemos hacerlo.
7. Los 7 pasos del
proceso de diseño web
para ordPress
9. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Lo primero que debemos prestar atención es el objetivo de la web.
Cada negocio tiene su propio objetivo…simple publicidad, otras venta, o solo mero contacto,
el caso es que el diseño debe de estar enfocado a cumplir dicho objetivo.
En el briefing recogemos todos los datos, como por ejemplo número de páginas, menús de
navegación y diferentes funcionalidades… simplemente todo lo relacionado con el proyecto,
esto nos servirá para enfocar las necesidades y dimensiones de la web en cuanto a diseño.
¿Qué es el Briefing?
Durante el proceso de diseño volveremos a verificar si cumple objetivo inicial.
10. “Siempre partimos de la necesidad que el cliente
quiere cubrir. Nosotros integramos estas necesidades o
requerimientos en el diseño.”
12. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Hay que tener muy claro desde dónde partimos y qué materiales tenemos?
• ¿Tenemos logo?
• ¿Tenemos colores corporativos?
• ¿Tenemos tipografías?
• ¿Tenemos fotografías de calidad?
El cliente nos tiene que facilitar también el contenido, es decir el texto e imágenes que irán en
las páginas, sino no podemos diseñar correctamente.
NOTA: Esto nos hará variar considerablemente el presupuesto.
¿Realmente qué es contenido?
13. “El contenido es el rey y las imágenes también,
si el cliente no las tiene tendremos que
conseguir fotografías de calidad.”
15. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Este quizá sea el proceso más largo. Tenemos que analizar todo el material recibido para
saber cómo vamos enfocar el diseño para WordPress.
Por otra parte investigar desde tipografías, colores, diseños y webs de la competencia.
Inspirarnos con todo lo posible para que el diseño sea lo más completo y adecuado.
¿Cómo hacer un buen Análisis
e Investigación?
16. “El proceso de análisis e investigación es clave,
seguramente es donde radica la diferencia
entre un buen diseño o un mal diseño.”
17. 4 PILARES
Realmente todo lo podemos
hacer con tipografías gratuitas.
Tipografías
2 colores y un tercero
complementario.
Colores
Investigar themes
y themeshops.
Diseños
Investigar webs de la
competencia del sector.
Webs sector
18. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Contra más pesos tenga una tipografía, más variaciones podemos realizar.
Importante: no transmitir con la tipografía aquello que no queremos.
Jerarquizar el contenido entre titulares y textos resulta agradable a la vista.
Tipografías
19. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
¿Que transmitimos? / Tipografías
Meetup Tarragona Meetup Tarragona
Meetup Tarragona Meetup Tarragona
Faster One
Atlas Avenir Next
Mystery Quest
20. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Jerarquías / Tipografías
Lorem Ipsum es simplemente el texto de
relleno de las imprentas y archivos de texto.
Lorem Ipsum ha sido el texto de relleno
estándar de las industrias desde el año
1500, cuando un impresor (N. del T. persona
que se dedica a la imprenta) desconocido
usó una galería de textos y los mezcló de tal
manera que logró hacer un libro de textos.
Lorem Ipsum es simplemente el texto de
relleno de las imprentas y archivos de texto.
Lorem Ipsum ha sido el texto de relleno
estándar de las industrias desde el año 1500,
cuando un impresor (N. del T. persona que se
dedica a la imprenta) desconocido usó una
galería de textos y los mezcló de tal manera
que logró hacer un libro de textos.
Las mejores tipografíasLas mejores tipografías
El año de Gutenberg El año de Gutenberg
21. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Si queréis dominar de una manera completa el
mundo de las tipografías y sus jerarquías os
recomiendo el libro:
22 consejos sobre tipografía (que algunos
diseñadores jamás revelarán)
de Enric Jardí.
22. “Es recomendable no usar más de dos tipografías
con sus variaciones.
Normalmente utilizamos una para los
titulares y otra para el texto.”
24. Es la mejor herramienta que podemos encontrar, tanto como biblioteca
como descarga de fuentes, para trabajar de manera offline y online.
Googlefonts
https://fonts.google.com
25. Colección de fuentes premiadas y con buena trayectoria,
altamente importantes y gratuitas.
Awwwards
https://www.awwwards.com/
26. Formato de tipo según sector, nos puede servir de mucha ayuda,
si es un sector algo desconocido para nosotros y queremos tener
una idea de por dónde empezar a nivel tipográfico.
Fontsinuse
https://fontsinuse.com
27. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Mi recomendación es que utilicemos 2 colores y como mucho un tercero que nos
complemente, para resaltar la marca.
Al igual que la tipografía también debemos vigilar transmitir lo que deseamos con el color
elegido, en algunos casos el sector en cuestión ya tiene algún color definido.
¿Que colores elegimos?
¿Que queremos transmitir?
28. “No elegir más de 2 o 3 colores.
En conjunto nos tiene que crear la imagen de marca.”
30. Podemos ver paletas de colores y generar degradados.
AdobeKuler
https://color.adobe.com/
Nota: Elijo el color que me encaja y después género diferentes
tonos para encontrar el color adecuado.
32. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Debemos y tenemos que investigar themes, themeshops, webs de otros diseñadores,
webs de la competencia.
Con esta investigación tendremos nuevas ideas más claras de lo que hacer en nuestro diseño.
Con todo ello podemos identificar lo que nos funciona y lo que no, y lo que queremos
adaptar en nuestro diseño.
Diseños
33. “No escatimemos tiempo en esta investigación de
nuevos diseños y competencia.
Eso marcará la diferencia en nuestro diseño.”
35. Elegimos la temática, y nos filtra el contenido, esto nos inspira para
coger el estilo que queremos. También podemos filtrar por color.
Designspiration
https://www.designspiration.net/
36. Repositorio de themes y de diseñadores,
un soplo de aire fresco.
Thebestdesigns
https://www.thebestdesigns.com/
37. Themeshops de plantillas, en realidad nos sirve cualquiera
mientras encontremos referencias y material gráfico que nos
interese.
Elegantthemes
http://www.elegantthemes.com/
38. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Igual de importante es la investigación sobre diseño, como revisar webs de la competencia,
ya sea para acercarnos o para alejarnos completamente en el diseño, todo según nos
interese.
Webs del sector
40. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Okey, ¡vamos allá! ¡Saquemos los pinceles a relucir! Ya tenemos una idea del proyecto, ahora
toca realizar el diseño.
- Wireframe o Boceto Tradicional
Hay mucho software para realizar Wireframes, personalmente soy más de lápiz y papel pero
entiendo que en un proyecto común sea vital.
A partir de aquí empezamos a plasmar el diseño de todo lo que hemos ido recogiendo.
Lo podemos hacer con un software como:
- Photoshop, Ilustrator, Sketchapp…
¡Por fin el diseño!
41. Wireframe o Boceto Tradicional
“El Wireframe o Boceto Tradicional es vital, nos servirá como guía para
plasmar en el diseño todo lo que queramos diseñar.
También el Wireframe lo podremos ir validando con el cliente.”
42. Diseño (Photoshop, Ilustrator, Sketchapp)
“Poco a poco y con mucho cariño vamos plasmando nuestro
diseño, siguiendo el Wireframe y con nuestra hoja de ruta de
contenido, tipografías, colores, etc.”
43. “Lo más importante es dejarse llevar en el proceso y probar sin
miedo hasta que nos convenza el resultado.
En ocasiones es bueno dejarlo respirar para tener nuevas
ideas y dar con la solución óptima.”
45. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Llega la hora de presentar la propuesta al cliente, puede ser una o varias, lo mejor es
establecer una línea definida con algunas versiones.
Una vez presentada es muy probable que existan modificaciones por parte del cliente.
Entonces se volverá a la fase de diseño a realizarlas.
Aprovechar para pedir feedback de nuestras propuestas siempre que podamos.
Es importante la manera como le presentamos al cliente estas propuestas, solo tenemos una
oportunidad para impactarle, recomiendo el uso de Mockups para que sea más efectivo.
Propuesta = imagen del éxito
46. “Es una fase dinámica junto con el diseño, es bueno pactar
con el cliente un límite de modificaciones.
Utilizar los Mockups como recursos de nuestras propuestas
nos ayudará a generar impacto.”
48. Aquí un ejemplo de Mockup para un cliente.
Nota: El Mockup nos genera la imagen final del producto, el cliente puede
visualizar la propuesta en el dispositivo final que lo va a reproducir.
49. Aquí podemos encontrar muchos Mockups interesantes.
GraphicBurguer
http://graphicburguer.com
51. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
Esta fase se alcanza cuando el cliente ha aprobado el diseño.
Ahora toca llevarlo a cabo, en el caso que lo implementemos nosotros pasaremos a
la fase de maquetación.
En el caso que no, facilitaremos todos los archivos e imágenes editables al equipo de
maquetación y desarrollo.
Implementación para publicación
52. “En esta parte toca implementar el diseño
realizado hacía la dimensión online
para su publicación.”
54. P R O C E S O D E D I S E Ñ O W E B PA R A W O R D P R E S S
De nada sirve un proyecto de diseño web si no obtenemos feedback de este, ahora toca
compartirlo y recoger las reacciones e impresiones de diseño de los diferentes públicos que
visualizan la web.
Con ello obtenemos nuevas perspectivas de nuestro proyecto y podemos realizar cambios si lo
creemos conveniente.
Feedback, nuestro aliado
55. “El feedback nos ayuda a ser mejores diseñadores, en
ocasiones aportando soluciones que jamás habríamos
llegado por nuestra cuenta.”
59. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima.
DEMONSTRAVERUNT LECTORES LEGERE
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima.
PUTAMUS PARUM CLARAM DECIMA
…en las siguientes Meetups de WordPress Tarragona…
WordPress & Beers
- Jueves 15 de Marzo a las 19:00h, Amsteleria -
Introducción a Gutenberg, el nuevo editor de WordPress
- Jueves 29 de Marzo a las 19:00h, Tarragona Impulsa -
60. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta
decima.
DEMONSTRAVERUNT LECTORES LEGERE
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima.
PUTAMUS PARUM CLARAM DECIMA
www.wptarragona.com
Meetup WordPress
Tarragona
¿Preguntas?
