Share
Adobe Illustrator está experimentando un regreso en el mundo del diseño web. SVG no solo se está usando comúnmente en línea, sino que cada vez más diseñadores están utilizando vectores para el cableado. Los siguientes consejos te ayudarán a aprovechar al máximo Illustrator como una herramienta de armado de alambre..
Wireframing se trata de trabajar rápidamente e iterar rápidamente. El objetivo no es crear interfaces atractivas; Tu prioridad número uno es diseñar información y experiencia..
Los wireframes aclaran la jerarquía en una página web; demuestran visualmente el orden en que los usuarios deben procesar la información disponible. Si desea que los usuarios procesen el título antes de presionar el botón "comprar ahora", el título debe "triunfar" presionando más el botón..
Esta jerarquía visual se puede definir de varias maneras. Podríamos usar el tamaño para hacer que el titular sea más impactante, podríamos usar el posicionamiento (colocándolo antes del botón). Podríamos usar color, contraste y una variedad de otras cosas, pero hacerlo en una estructura alámbrica solo hace que las cosas sean más confusas..
Al eliminar el color de la ecuación, la relación visual definida por la posición, el tamaño y (si desea ir más lejos) el contraste es mucho más clara..
La cálida paleta monocromática de los kits UX de Eric Miller DesignNo estamos construyendo bonitos kits de IU de píxeles perfectos aquí. Manténgase en un rango limitado de grises, luego use color solo para etiquetas y notas.
Hablando de etiquetas, notas y comentarios, es una buena idea colocar cada una en una capa dedicada. Lo mismo ocurre con cualquier otra cosa que tenga un propósito específico; tales como comportamiento, interacción, gestos y así sucesivamente.
Coloque imágenes en una capa, comportamiento en otra y etiquetas en otra, para que pueda alternar fácilmente su visibilidad cuando sea necesario.
SECO. se usa generalmente como un término de programación, pero es igualmente aplicable al flujo de trabajo de diseño. En cualquier estructura metálica dada, vamos a usar y reutilizar ciertos objetos. Convierta estos objetos en símbolos y cualquier cambio que realice en uno se reflejará instantáneamente en el resto.
Por ejemplo, aquí hay un campo de formulario simple:
Vamos a arrastrarlo al panel de Símbolos (Mayús + Comando + F11)
Ahora podemos sacar este símbolo de la Simbolos Panel, tantas veces como queramos, en la mesa de trabajo. Al hacer doble clic en cualquiera de ellos, lo aislaremos (un poco como objetos agrupados) para poder editarlo. Cualquier cambio que hagamos, en este caso redondeando las esquinas del rectángulo, se aplicará a todos y cada uno de los símbolos de campo de formulario que hemos utilizado.
Una vez que tengamos una colección de símbolos, también podemos guardarlos como un conjunto:
Esto nos permitirá cargarlos en otros archivos para el futuro..
Si desea obtener más información sobre la paleta de símbolos, eche un vistazo al Consejo rápido: Trabajar con símbolos en Adobe Illustrator.
Un gran consejo es aprovechar las puntas de flecha de trazo, algo que está disponible en Illustrator directamente desde el CS5. Los wireframes son la oportunidad ideal para describir visualmente las interacciones, el flujo de aplicaciones, la navegación y el movimiento..
En estos días, podemos agregar fácilmente puntas de flecha a los trazos, directamente desde el panel Trazo.
Incluso podemos editar el archivo "Arrowheads.ai" de la fuente de Illustrator, como lo explica Ryan Cornwell, y agregar nuestras propias puntas de flecha a la mezcla.
Nota: Molestamente, la herramienta cuentagotas no aplica puntas de flecha junto con otros estilos de trazo, por lo que no es tan fácil como podría ser duplicar el efecto que ha elegido. Pero aún así, son perfectos para wireframing.
En muchos sentidos, esto se sigue de no usar color. La unificación de las dimensiones y el espacio elimina un elemento de distracción de los wireframes, lo que nos ayuda a concentrarnos visualmente en lo que es importante.
No importa si las dimensiones exactas no reflejan cómo será la interfaz de usuario más adelante; Mientras la jerarquía y las relaciones sigan siendo ciertas, estamos listos para continuar..
Aplica una cuadrícula a tu mesa de trabajo yendo. Ver> Mostrar cuadrícula. Seleccionando Ver> Ajustar a la cuadrícula Te ayudará a posicionar tus objetos con precisión..
Para especificar exactamente cómo quiere que se vea su cuadrícula (y recuerde, aquí no va a contar con pequeños detalles) vaya a Illustrator> Preferencias> Guías y cuadrícula ... Una vez allí, puede definir la distancia entre las líneas de la cuadrícula y luego indicar cuántas subdivisiones desea dentro de esas líneas..
Nota: Siéntase libre de colorear su cuadrícula en algo que no sea gris; No será parte del producto final..
Dependiendo del nivel de fidelidad (cuán fiel al sitio web final al que apuntas) puedes tener texto real, por ejemplo, dentro de los botones. Para hacer que estos botones crezcan y se reduzcan dependiendo del contenido que contienen, no use objetos, use estilos gráficos.
Comencemos con una cadena de texto ficticio.
Ahora vamos a abrir el panel Apariencia yendo Ventana> Apariencia.
Usando el panel Aspecto, puede agregar múltiples rellenos a un objeto. Podemos colocar esos rellenos en el orden en que nos gustaría que se muestren; En esta imagen puedes ver varios, todos apilados uno encima del otro.
Por ahora, solo necesitamos dos rellenos, así que vamos a agregar un relleno oscuro para el texto, luego un color más pálido para el fondo.
Actualmente, no podemos ver el fondo gris pálido, porque es exactamente la misma forma que el relleno superior. Sin embargo, podemos aislar y manipular cada relleno por separado. Seleccione el relleno inferior en el panel Apariencia, luego vaya a Efecto> Convertir a forma> Rectángulo redondeado ...
Ingrese algunas configuraciones, lo que considere que corresponda, solo asegúrese de que el tamaño sea relativo al objeto al que estamos aplicando esto..
El relleno gris pálido en la parte inferior ahora ha tomado la forma de un rectángulo redondeado, en relación con el tamaño del texto. ¡Un botón! Para aplicar esta apariencia a otros objetos, abra el panel Estilos gráficos y arrastre todo el botón hasta él. Sus apariencias se guardarán como un estilo que podrá reutilizar..
Por ejemplo, aquí hay una cadena de texto más larga. Con el texto seleccionado, haga clic en el estilo gráfico recién creado (al que hice doble clic y renombré) para aplicarlo instantáneamente.
¡Velocidad es el nombre del juego con wireframing! Anote un diseño, continúe, anote otro diseño, continúe. Por lo tanto, tiene sentido tener un punto de partida ya hecho al que pueda acceder fácilmente. Es posible que primero encuentre que trabaja mejor en una mesa de trabajo masiva, juntando los objetos finalizados en un archivo separado, o que prefiera trabajar directamente con tablas de diseño del tamaño adecuado.
Aquí, por ejemplo, hay un diseño con una pantalla de iPad (1536x2048px) y cuatro pantallas de iPhone 4S (640x960px), aunque puede preparar un archivo con cualquier número de ejemplos de pantallas de dispositivos. Establezca sus dimensiones preferidas manualmente o elija cualquiera de los ajustes preestablecidos disponibles de las Opciones de Artboard:
Incluya cualquier guía común, nombre de capa, conjunto de símbolos, etc. que pueda usar, luego guárdelo todo como una plantilla para uso futuro (Archivo> Guardar como plantilla ... ) Este punto de partida estará disponible para usted yendo a Archivo> Nuevo desde plantilla ... , Completa con todos los bits y piezas que dejaste allí..
Illustrator no viene con ninguna herramienta de texto ficticio. Hay algunos scripts con los que vale la pena jugar, pero la forma más fácil de incluir texto ficticio en sus Wireframes de Illustrator es usar TextExpander.
Nota: si eres usuario de Windows, PhraseExpress ofrece una funcionalidad similar a TextExpander
Agregue una serie de fragmentos de texto que normalmente utiliza para los wireframes (como un encabezado grande, un encabezado corto, una copia del cuerpo de diferentes longitudes, texto típico de un botón, elementos de menú, etc.) para que estén disponibles desde Illustrator..
Al definir una frase clave para cada fragmento, TextExpander reemplazará esa frase con su contenido cada vez que la escriba, lo que le ahorrará una gran cantidad de tiempo. También puede usar las opciones de carpeta para asegurarse de que estos fragmentos solo tengan efecto en Illustrator, si desea.
Para obtener más información sobre cómo optimizar el flujo de trabajo de TextExpander, eche un vistazo a Master TextExpander con estos consejos y trucos útiles..
Ser capaz de visualizar rápidamente los cambios y las ideas está en el corazón de wireframing, pero esto puede llevar a una gran cantidad de archivos desorganizados si no tiene cuidado. La clave es guardar en etapas significativas y con convenciones de nombres de archivos lógicos..
Por ejemplo, podríamos comenzar cada nombre de archivo con el nombre de la página en la que estamos trabajando. Entonces podría ser sensato utilizar algún tipo de nombre de variante, después del cual el número de versión: page-variant-version.ai
Por ejemplo, podríamos estar trabajando en una página de destino; uno que se concentra en promocionar una campaña de correo electrónico o un libro electrónico. Podríamos tener nombres de archivo como:
Esto no solo mantiene las carpetas de proyectos organizadas, sino que actúa como una forma de control de versiones manual. Matt Smith analiza la idea más en su artículo Wireframing With Illustrator e InDesign.
Tomando aún más la idea de la versión, guardando sus archivos directamente en Dropbox eliminará esa tarea de su lista de tareas por completo. Incluso el plan gratuito de Dropbox almacenará una copia de sus archivos cada vez que los guarde, durante treinta días..
Asimismo, Layervault ofrece una similitud similar en su plan gratuito..
En cualquier caso, esto es especialmente útil si está colaborando con un equipo. Tener a todos los miembros trabajando desde una ubicación central, con la opción de restaurar cualquier versión si alguien hace algo extraño, es ideal para el trabajo en equipo.
Muchos de estos consejos son totalmente personales para mi propio flujo de trabajo y es posible que no se traduzcan perfectamente en su propia forma de hacer las cosas. Sin embargo, espero que al menos despiertan algo de curiosidad, para que pienses en la forma en que realizas el cableado de los diseños web. Si tiene otros consejos propios, compártalos en los comentarios.!
Accentsconagua