Cómo convertir mi aplicación web en una nueva plantilla de bootstrap

Hay muchos pasos a considerar antes de alcanzar una plantilla de alta fidelidad. Pero adoptar un enfoque de pensamiento de diseño al desarrollar una aplicación lo llevará desde la concepción hasta la finalización (es decir, una plantilla Bootstrap implementada).

Suponiendo que haya realizado el trabajo preliminar para determinar qué problema está tratando de resolver su aplicación y cómo lo resolverá, la siguiente parte es visualizar cómo interactuará su usuario con su aplicación.

En nuestro estudio de diseño, estamos siendo el proceso de creación de plantillas haciendo primero perfiles de usuarios que están en nuestro público objetivo. Les damos un nombre, ocupación, biografía y anotamos cuál es su motivación para usar la aplicación. A continuación, haremos preguntas sobre estos usuarios y escribiremos respuestas cortas en notas adhesivas. Hacemos preguntas como: “¿Dónde le gusta a este usuario comer / comprar / mirar / socializar?”, “¿Qué música escucha el usuario?” y “¿Qué medios de comunicación frecuenta el usuario para mantenerse informado?”. Las respuestas a este tipo de preguntas ayudan a determinar qué expectativas tienen nuestros usuarios al interactuar con la nueva aplicación. Un abogado de Manhattan de 55 años que compra boutiques, lee el Wall Street Journal y disfruta de restaurantes de lujo puede tener expectativas muy diferentes a las de, digamos, una mujer de 28 años que se queda en casa y una madre que compra Wal-Mart, mira “The View “y ama a Myley Cyrus. Conocer las expectativas del usuario informa cómo se presenta y presenta la información. Cuanto más podamos averiguar sobre nuestros usuarios, mejores opciones de diseño podremos hacer al diseñar el contenido.

A partir de nuestras notas adhesivas, comenzaremos a enmarcar o bloquear áreas donde se pueda mostrar contenido. Es fundamental incluir al equipo de desarrollo front-end (FED) en esta parte del proceso, ya que conocen mejor las habilidades y limitaciones del marco Bootstrap. Esencialmente, los FED imponen las reglas y guían a los diseñadores. Colectivamente, realizamos varias iteraciones y revisiones aproximadas hasta llegar a un par de soluciones de trabajo. Luego, lo refinamos en wireframes, que eventualmente se convierten en maquetas de alta fidelidad. Una vez que las partes interesadas firman, las maquetas se pasan a los FED que las codifican con Bootstrap.

¿Sabes cómo diseñar una plantilla Bootstrap? Luego, coloque su aplicación en una pantalla y diseñe una plantilla que se vea así, en Bootstrap, en otra pantalla.