Cómo comenzar con UXPin
A medida que nos adentramos en el ámbito del diseño móvil, el diseño de aplicaciones y el diseño responsivo, se ha centrado cada vez más en la experiencia de usuario (UX, User Experience) y el cableado, prototipos interactivos y maquetas. Hay un montón de herramientas por ahí dirigidas a este nicho y abarcan toda la gama desde complejos, con características cargadas hasta dispersos y apenas útiles. Una de las herramientas que me llamó la atención es UXPin simplemente porque fue desarrollado por diseñadores para diseñadores.
Antes de avanzar … una advertencia. Si la suya es una organización que prefiere poseer el software, UXPin no es para usted. Todo el trabajo realizado en esta aplicación se realiza en el navegador y los proyectos que guarda se guardan en su cuenta.
Para comenzar con UXPin, inicie un navegador y diríjase a UXPin. Desde aquí puede inscribirse para una prueba gratuita o solicitar un plan mensual según sus necesidades anticipadas. El proceso de registro es bastante sencillo y una vez que haya establecido su nombre de usuario y contraseña, estará listo para comenzar.
Cómo iniciar un proyecto en UXPin
Cuando inicia sesión, llega al Panel de control y, desde aquí, puede decidir crear un nuevo alámbrico, un nuevo proyecto móvil o un proyecto de Diseño web responsivo. También hay complementos para UXPin que te permitirán traer tus proyectos de Photoshop o Sketch. Para esto, cómo crearé un banner con texto y agregaré un botón de correo electrónico al banner. Para lograr esto seleccioné Crear un nuevo alámbrico.
Cómo utilizar la interfaz UXPin
La superficie de diseño se divide en cuatro áreas. En el área negra a la izquierda hay una serie de herramientas que le permiten volver al panel de control, abrir los elementos que usará, abrir el panel de elementos inteligentes, buscar elementos, agregar notas a la página y agregar miembros del equipo. En la parte inferior hay un botón que abre un breve tutorial, otro que le permite acceder a su cuenta y otro que accede a las Preguntas frecuentes, le permite hacer preguntas e incluso proporcionar comentarios.
En el área azul a lo largo de la parte superior hay una serie de herramientas y propiedades. Los botones más oscuros en el lado derecho le permiten recorrer su diseño, ajustar la configuración del proyecto, compartir la página y realizar una simulación de la página en el navegador.
El panel Elementos es donde se capturan las partes y piezas de la Superficie de diseño, se le asigna un nombre al proyecto y se agregan o eliminan páginas.
La biblioteca Elements es una agradable sorpresa para los diseñadores de UX. Este menú desplegable te permite elegir entre 30 bibliotecas que van desde iOS a Android Lolipop. Además, tienes acceso a los elementos de Bootstrap y Foundation, junto con los iconos de Font Awesome, Gesture para móviles y una colección de widgets sociales.
04 de 09Cómo agregar un elemento a una página de UXPin
Para comenzar, arrastré el elemento Caja a la superficie de diseño y, cuando suelte el mouse, el Panel de propiedades se abre El botón Propiedades le permite nombrar el elemento y establecer los valores de altura y posición de ancho del elemento. También puede agregar relleno al elemento, redondear las esquinas y ajustar su opacidad. Al hacer clic en el botón Color de fondo se abre un selector de color RGBA.
También puede asignar una fuente, un borde y un patrón al elemento seleccionado. El Lightning Bolt le brinda la posibilidad de agregar interactividad a un elemento seleccionado.
05 de 09Cómo agregar y formatear texto en UXPin
Para agregar texto, arrastre el elemento de texto a la superficie de diseño e ingrese su texto. Haga clic en la propiedad de texto Botón para abrir las propiedades de la fuente y formatear el texto. Si necesita un bloque de texto ficticio, agregue un elemento de texto y haga clic en GENERAR LOREM IPSUM Botón en las propiedades de fuente.
06 de 09Cómo agregar una imagen a una página de UXPin
Hay un par de maneras de lograr esta tarea. Puedes usar el Herramienta de imagen en la barra de herramientas, agregue un elemento de Imagen de la Biblioteca o simplemente arrastre y suelte una imagen desde su escritorio sobre el elemento en la superficie de diseño como se muestra arriba.
07 de 09Cómo agregar un botón a una página de UXPin
Aunque hay un elemento Button, ingresando " Botón " en el Buscar El área, como se muestra arriba, abre todos los botones que se encuentran en todas las bibliotecas. Arrastre el que más le convenga sobre la superficie de diseño y use las Propiedades para cambiar el color, la fuente e incluso el radio del borde. Para cambiar el texto dentro del botón, haga clic una vez en el texto e ingrese el nuevo texto.
08 de 09Cómo agregar interactividad a una página de UXPin
Esto no es tan complicado como puede parecer. Para la entrada de correo electrónico, agregué un elemento de entrada, lo redimensioné, ingresé el texto y formateé el texto. Con el elemento de entrada seleccionado haga clic en el botón Propiedades y, cuando el Propiedades del elemento aparece haga clic en el Visibilidad Botón: el globo ocular: en la esquina superior derecha del panel.
Seleccione el botón y haga clic en el Botón de interacciones - El Rayo - en las propiedades. Cuando se abra el panel de interacciones, seleccione Nueva interacción. Seleccione Haga clic en el menú desplegable Desencadenador. En el área de acción, seleccione Mostrar elemento. Ahora se te preguntará qué elemento mostrar. Haga clic una vez en el sitio de armas y haga clic en el elemento de entrada. Con el elemento identificado, ahora puede determinar si animar o no el elemento. En este caso, decidí mostrar el cuadro de entrada con facilidad y fui con el valor de duración predeterminado de 300 ms.
También quiero que el botón se mueva unos 65 píxeles a la derecha cuando se hace clic. Seleccioné el botón, abrí el panel de Interacciones y seleccioné Nueva interacción. Utilicé estos ajustes:
- Desencadenar: Haga clic
- Acción: Mover por
- Mover direccion: 65 px en el eje x
- Animación: Lineal
- Duración: 300 ms
Para eliminar una interacción, seleccione el elemento y abra el panel Interacciones. Seleccione la interacción en el panel y haga clic en la Papelera para eliminarlo.
09 de 09Cómo probar tu página en UXPin
Debido al hecho de que está trabajando en el navegador, las pruebas son muy simples. Haga clic en el Simular diseño botón. La página se abrirá en el navegador y podrás probarla. También se agregará un panel en el lado izquierdo de la página que permite Comentarios, un Mapa del sitio si hay varias páginas, Pruebas de usabilidad, Uso compartido en vivo, Edición y un retorno al Panel.
En la parte inferior de la página hay otro pequeño panel que le permite mostrar los elementos interactivos, mostrar u ocultar comentarios y compartir el enlace del proyecto con otros.
