Diseño Web

Del diseño al desarrollo de tu sitio web

«Por qué mi sitio web no se parece a la maqueta presentada?»
Esta pregunta aparece a veces durante los proyectos del sitio web, y es una señal reveladora de que algo salió mal. La buena noticia es que este es un dilema evitable.

Cuando los clientes tienen un conocimiento técnico limitado, la etapa de desarrollo puede ser confusa y llevar a sorpresas. Si la comunicación es deficiente y las expectativas no se manejan adecuadamente, a menudo surgen problemas. 

Para pasar con éxito del diseño al desarrollo, se requiere la colaboración de todos los involucrados en un proyecto de desarrollo web para estar en la misma página y eliminar el potencial de malentendidos. 

Utilice la siguiente lista de verificación como guía para lo que debe pensar, como cliente, antes de crear su sitio web. 

LAS DIFERENCIAS ENTRE MAQUETAS Y SITIOS WEB FUNCIONALES.

Tradicionalmente, las maquetas de sitios web se crean como parte de la fase de planificación y diseño de un proyecto de sitio web. Por lo general, se completan después de obtener la aprobación de wireframes y proporcionan representaciones visuales del contenido del sitio web, mostrando los colores, diseños / cuadrículas, imágenes, tipografía, etc. 

La creación de estas maquetas le permite elaborar los detalles de un sitio web antes de pasar al desarrollo. 

Sin embargo, en estos días las personas acceden a la web desde una gran variedad de dispositivos y una amplia gama de tamaños de pantalla. Esto hace que sea más difícil transmitir con precisión cómo se verá un sitio web terminado con maquetas simples. De hecho, algunos diseñadores web se han alejado del uso de maquetas tradicionales, en lugar de presentar sus ideas utilizando mosaicos de estilo o diseñando en el navegador. 

Recuerde: una maqueta de un sitio web es una representación cercana de su proyecto terminado, pero nunca podrá capturar por completo las cualidades dinámicas de un sitio web terminado que funcione.

Independientemente de los desafíos que traen las maquetas de sitios web, los diseños de alta fidelidad a menudo siguen siendo el método preferido para presentar un diseño de sitio web a un cliente. Esto significa que es más crucial que nunca que los clientes comprendan la diferencia entre una maqueta y un sitio web completamente funcional. 

Lo más importante a tener en cuenta es lo siguiente: una maqueta es una representación lo más cercana posible al proyecto finalizado, pero nunca podrá capturar por completo las cualidades dinámicas de un sitio web en funcionamiento, como efectos de desplazamiento, formularios, video , y cualquier otro elemento interactivo. La forma en que ve el diseño de un sitio web puede cambiar una vez que vea todas las piezas trabajando juntas. 

Al iniciar un nuevo proyecto de sitio web, puede ser útil ver ejemplos de maquetas de diseño en comparación con el sitio web final. Esto puede ayudarlo a tener una idea de la diferencia entre una maqueta estática y un sitio web en vivo. 

Explique sus expectativas y solicite un seguimiento sobre las limitaciones de construcción, si no está claro

Una vez que entienda qué esperar de una maqueta, trabaje con su equipo web para definir las expectativas entre diseño y desarrollo. Considere preguntas tales como: 

  • ¿Qué detalles deben elaborarse en el diseño y qué detalles se pueden finalizar en el desarrollo?
  • ¿En qué momento se considerará que el diseño del sitio está «hecho» y hay flexibilidad para cambiar las opciones de diseño más adelante?
  • ¿Hay algún elemento que pueda presentar un desafío durante el desarrollo que altere el diseño?

Hacer estas preguntas antes de que comience el desarrollo ayudará a administrar el alcance y evitar la falta de comunicación. 

Discutir la funcionalidad de los elementos interactivos.

Si hay elementos interactivos en su sitio web, asegúrese de que se discuta la funcionalidad esperada antes de pasar del diseño al desarrollo. Si tiene ideas específicas sobre cómo va a funcionar algo, no puede asumir que el desarrollador tendrá esas mismas ideas. 

Considere este ejemplo: después de que un diseñador web cree una maqueta para una página web que incluye un formulario de contacto, el cliente puede asumir que, al enviarlo, el usuario será redirigido a una página de agradecimiento. Sin embargo, esta decisión de flujo de trabajo debe estar claramente definida. Si no es así, el desarrollador puede asumir que al enviar el formulario, la página mostrará un mensaje en línea y lo construirá en consecuencia, lo que no satisfará al cliente. 

Estos tipos de decisiones de funcionalidad para elementos de diseño deben definirse claramente para evitar retrabos costosos en la fase de desarrollo. 

¡Comunicar! Si tiene ideas específicas sobre cómo va a funcionar algo, evite asumir que el desarrollador tendrá la misma idea que usted.

Utilice contenido «real» durante la fase de diseño

Una forma segura de que el diseño de su sitio web coincida con su visión una vez que se haya creado es diseñar utilizando el contenido final (o casi final) en sus maquetas. Si su diseñador web solo está adivinando el contenido, entonces es mucho menos probable que la creación final del sitio web funcione correctamente con todos sus elementos de diseño. 

Por ejemplo, un diseñador puede crear un elemento de llamada a la acción que consiste en un título, una descripción y una imagen. Una vez que llegue al desarrollo, puede darse cuenta de que no tendrá imágenes aunque el diseño las requiera. Este cambio puede cambiar drásticamente la apariencia de sus llamadas a la acción (y potencialmente hacer que la página general sea menos efectiva). 

Está bien usar el contenido de marcador de posición en algunos casos, siempre y cuando sepa que cualquier cambio en el contenido más adelante podría resultar en un diseño adicional o trabajo de desarrollo. Sin embargo, lo mejor que puede hacer es acercarse lo más posible a la realidad para poder trabajar completamente los detalles de diseño. 

ESTÉ AL TANTO DE LOS DESAFÍOS DE DESARROLLO QUE PUEDEN AFECTAR EL DISEÑO DE UN SITIO WEB.

Si bien las posibilidades de diseño dentro de un programa como Photoshop son prácticamente infinitas, no se puede decir lo mismo para trabajar dentro de un navegador web. 

Incluso los desarrolladores más experimentados tienen problemas al traducir el diseño de un sitio web a código. El mayor desafío es equilibrar las limitaciones técnicas con las consideraciones de diseño para producir un sitio web fácil de usar que mantenga la integridad del diseño. 

Mientras trabaje con diseñadores y desarrolladores experimentados, las diferencias entre las maquetas aprobadas y el sitio web final deben ser mínimas. Sin embargo, es útil tener en cuenta los aspectos de alto nivel que podrían causar variaciones con respecto al diseño esperado, por lo que no se sorprenderá si se presentan. 

Estas son algunas de las razones comunes por las que se pueden realizar cambios en el diseño durante el desarrollo: 

Diseño responsivo : el diseño responsivo consiste en construir un sitio web que se adapta a todos los tamaños de pantalla, y es la forma más común de garantizar que sus visitantes puedan usar su sitio web con éxito, sin importar su dispositivo. Eso significa que el diseño del sitio web que apruebas para una vista de escritorio típica no será el mismo diseño que una tableta o usuario móvil que vaya a ver. Es probable que haya opciones de diseño y contenido para trabajar una vez que su sitio web esté funcionando, y podrá ver cómo se ajusta el contenido en diferentes dispositivos. 

Representación de fuentes : las fuentes a menudo se procesan de forma diferente dentro de un navegador web que en un programa de diseño, lo que puede cambiar ligeramente la apariencia de un diseño. Si la tipografía es una preocupación primordial, pida ver un ejemplo de la versión web de una fuente antes de seleccionarla para su sitio web. 

Inconsistencias en el navegador : si bien la compatibilidad del navegador con las funciones se ha vuelto más consistente a lo largo de los años, existen algunas técnicas modernas de codificación que no están disponibles en todos los navegadores. A veces, se deben colocar alternativas aceptables para los navegadores más antiguos que no coinciden con el diseño. Trabaje con su equipo web para determinar qué navegadores admitirá su sitio web y cómo podría afectar al diseño. 

Sistemas de gestión de contenido : a menudo hay límites sobre cómo se puede mostrar el contenido cuando se trabaja con un CMS. A veces, estas limitaciones requieren un compromiso entre el diseño de un elemento y la flexibilidad deseada para los editores de contenido. Idealmente, estos problemas se resolverán durante la fase de diseño al hacer que un desarrollador revise estos posibles conflictos, pero a veces no se vuelven claros hasta que se construye el sitio web. 

Esta no es una lista exhaustiva, pero debería darle una idea general del tipo de desafíos que puede esperar durante la fase de desarrollo. 
A

NO TE EXCEDAS EN LA FASE DE DISEÑO.

Con todas estas consideraciones, es posible que le preocupe la necesidad de tener en cuenta cada pequeño elemento y cada vista diferente durante la fase de diseño. ¡Éste no debería ser el caso! 

Debería estar de acuerdo con dejar algo de flexibilidad en el proceso de desarrollo. El diseñador no necesita crear diseños de alta fidelidad de cada página en su sitio web solo para administrar las expectativas. Esta puede ser una decisión costosa que en última instancia es innecesaria, ya que a menudo es más fácil para un desarrollador hacer pequeños cambios y ajustes una vez que la base del diseño está claramente definida. 

Si hace las preguntas correctas y trabaja de cerca con su equipo web para abordar los elementos de esta lista de verificación, puede estar seguro de que ha cubierto todas las bases necesarias para avanzar desde el diseño.

CONFIAR EN LOS EXPERTOS

Debe pasar a la fase de desarrollo con un cierto nivel de confianza en su equipo web. Sepa que están tratando de ofrecer el mejor sitio web de calidad posible y se apegan a las directrices del proyecto. 

Una fase de desarrollo web exitosa requiere flexibilidad por parte del cliente en caso de que surjan problemas, como casi siempre ocurrirá, y la voluntad de reunirse a medio camino para resolver los problemas de la mejor manera posible. 

Al final, se trata de trabajar en equipo para crear un sitio web exitoso que todos estén contentos con el lanzamiento.

Desea un diseño o rediseño de su sitio web? Podemos ayudarle!

Leave a comment