Bienvenidos al día 36 de nuestro Maratón Divi 100. ¡Sigue sintonizando durante 100 días seguidos los increíbles recursos de Divi mientras hacemos la cuenta regresiva para el increíble lanzamiento de Divi 3.0 en el último día de la serie!
Si bien es cierto que Divi es un tema de WordPress con una hermosa capacidad de respuesta «listo para usar», también es cierto que al usar Divi para crear un sitio web único para usted o un cliente, una buena cantidad de pruebas, ajustes y ajustes serán absolutamente necesario a medida que el diseño personalizado que está creando cobra vida. Es decir, si desea que el resultado final sea un sitio web receptivo impecable que se vea perfecto en todos los dispositivos.
Habiendo recorrido este camino muchas veces para muchos clientes, pensé que sería beneficioso para la comunidad Divi si compartiera mi proceso de diseño y las lecciones que aprendí en el camino. En el siguiente artículo, he creado un proceso de seis pasos que cualquiera que use Divi puede adoptar o adaptar para mejorar su flujo de trabajo de diseño receptivo.
¡Empecemos!
Para mí, aquí es donde radica el verdadero secreto del éxito del diseño web receptivo. Comienzo con un cuestionario previo al proyecto que forma la base de una conversación en profundidad sobre hacia dónde esperan llevar su negocio en los próximos cinco años. Estas son solo algunas de las preguntas que hacemos.
¿Cuál es su combinación de negocios actual? ¿Esperan que eso cambie?
¿Cuáles son sus planes de expansión? ¿Planean introducir nuevos productos o contenido (es decir, vender en línea, lanzar un podcast, crear un directorio) pronto o en un futuro próximo?
Una de las cosas más importantes que les pido a mis clientes que piensen es cómo quieren que sus visitantes se muevan por el sitio web y qué puntos clave quieren transmitir en su página de inicio antes de que los visitantes continúen. La forma en que respondan determinará cómo creamos la página de inicio.
Identifique los mensajes clave que deben comunicarse en la página de inicio, colóquelos en orden de importancia y estará en el buen camino para crear una experiencia web centrada en el cliente.
2. Mira las estadísticas
Soy adicto a Google Analytics porque ayuda a completar el perfil comercial de su cliente de muchas maneras. ¿ Baja tasa de rebote ? El contenido de su página de inicio está funcionando claramente, así que averigüe qué necesitan conservar y qué deben eliminar. ¿Pocos visitantes que regresan? La gente no regresa para echar un segundo vistazo, por lo que tal vez el producto no se muestra lo suficientemente bien. ¿Bajo tiempo de permanencia? Tal vez la copia sea confusa o no sea lo suficientemente convincente.
Lo más importante de todo es que Analytics puede decirle qué dispositivos utilizan la mayoría de los visitantes para visitar un sitio. La mayoría de mis clientes son fotógrafos que trabajan en grandes Mac de escritorio, por lo que sé que mis diseños deben ser impecables en ese tamaño. Pero la mayoría de sus clientes visitan primero en una tableta y luego regresan por segunda vez en una computadora portátil de 15”. Este tipo de información no tiene precio y responde por completo a la pregunta, para cualquier proyecto, sobre ‘móvil primero’ o de otra manera.
3. Esbozalo
En esta etapa, es posible que esté pensando en usar un marco de alambre para ayudar a concretar la estructura básica del sitio y cómo las páginas pueden fluir de una a la siguiente. Mi punto de partida es siempre un lápiz confiable y papel en blanco. Me permite hacer una serie de bocetos aproximados, sin comprometerme demasiado con ninguna dirección de diseño en particular. Por lo general, hago esto con el cliente hasta que acordamos el mejor diseño de página de inicio.
Después de eso, mi siguiente paso depende de cuán técnicamente compleja sea la compilación. Si es sencillo y tengo toda la copia y los activos en su lugar, así como un mapa del sitio detallado, podría sumergirme directamente en Divi.
Si el diseño implica la creación de detalles originales de UX, a menudo uso mi enamoramiento actual, la aplicación Adobe CC Experience (http://www.adobe.com/uk/products/experience-design.html) para probar animaciones y diseños receptivos donde el contenido puede verse significativamente alterado en tabletas o dispositivos móviles. Esto le da a su cliente la opción de ver lo que aparecerá arriba del pliegue (la parte inferior de la pantalla) en todos los dispositivos.
La mayoría de las veces, cuando un proyecto requiere elementos gráficos complejos, trabajo en Photoshop para desarrollar un archivo detallado en capas. Soy fanático de Photoshop porque elimina las conjeturas cuando se trata de desarrollar activos que usará en el sitio terminado. Además, puede exportar rápidamente grupos de capas como archivos png y jpeg recortados, lo que acelera enormemente su flujo de trabajo.
Mi regla de oro es crear un lienzo para la resolución más utilizada por su público objetivo. En mi caso, comienzo con un ancho de retina típico de 15” de 2880 px y me aseguro de marcar mi punto central y el escenario estándar con reglas de guía. Para que conste, el ancho estándar del sitio Divi es 1080px.
Agrupe sus capas en carpetas para cada sección, de modo que pueda ajustar fácilmente las alturas de las secciones y duplicar las características del diseño.
4. Prueba sobre la marcha
Una de las características más útiles de Divi es la capacidad de guardar y reutilizar secciones y diseños, lo que facilita la creación de páginas con estructuras similares muy rápidamente. Lo que desea evitar a toda costa es duplicar diseños que aún necesitan algunos ajustes de respuesta. No hay nada peor que tener que pasar por una docena de páginas terminadas corrigiendo el mismo problema una y otra vez.
Para acelerar su flujo de trabajo receptivo, desarrollo cada sección y la pruebo a medida que avanzo, utilizando la herramienta en línea gratuita, Screenfly (http://quirktools.com/screenfly). Cuando llego al final de una página, pruebo en dispositivos reales, incluidos Android, iPhone 5, iPhone 6 y iPad, así como en un monitor de 27″ y una computadora portátil de 13″. Obviamente, arrastrar su navegador a una forma aproximada funciona bastante bien, pero nada supera a las pruebas de dispositivos reales.
Perfeccione su página de inicio y descubrirá que puede usar y reutilizar esas secciones para formar la columna vertebral del resto de sus páginas.
5. Adapte su contenido al dispositivo
Cuantos más sitios web receptivos construyo, más acepto ocultar cierto contenido, particularmente cuando se trata de dispositivos móviles. Las personas que visitan un sitio por primera vez en un dispositivo móvil tienden a buscar una descripción general. Claro, eso es una generalización, pero significa que realmente debe concentrarse en los objetivos comerciales de su cliente y asegurarse de que puedan llegar rápida y fácilmente a las áreas clave con solo un clic.
No olvide que al usar Divi, las secciones se pueden ocultar fácilmente en tabletas y dispositivos móviles, marcando solo un par de casillas.
6. Presta atención a los detalles
Si está construyendo con Divi, que hace gran parte del trabajo pesado, ya está bien encaminado para familiarizarse con el diseño receptivo y cuando se trata de controlar los detalles más finos en todos los dispositivos, aquí es donde entra en juego Divi. su propio.
En particular, me encanta lo fácil que es modificar los tamaños de fuente para tabletas y dispositivos móviles, así como el relleno y el margen. Donde solía escribir docenas de consultas de medios, ahora no escribo ninguna.
En resumen
Desarrollar un proceso de planificación sólido que primero identifique las prioridades comerciales y aborde los posibles problemas antes de llegar a la etapa del navegador lo ayudará a desarrollar sitios receptivos con confianza y rapidez. Siga probando en cada paso del proceso de diseño y use la configuración de diseño avanzada integrada de Divi para obtener los resultados que desea en todos y cada uno de los dispositivos.
Gracias por leer y no dude en hacer cualquier pregunta que tenga para mí o compartir las lecciones que ha aprendido en la sección de comentarios a continuación.
Además, asegúrese de suscribirse al boletín de correo electrónico de Elegant Themes y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi.
Divi 100 Día 36
La cuenta atrás para Divi 3.0
Esta publicación es parte de nuestro maratón Divi 100. ¡Síguenos mientras publicamos recursos Divi gratuitos durante 100 días seguidos! Esta cuenta regresiva de 100 días terminará con el revolucionario lanzamiento de Divi 3.0, que incluye nuestro nuevo editor visual creado desde cero con React. ¡Divi 3.0 cambiará para siempre la forma en que construyes sitios web con Divi Builder !
Que empiece la cuenta atrás.
Más información sobre Divi 3.0