wrench-503131_640

Una mirada a la caja de herramientas de un diseñador web: hoy: John Siebert

Como diseñador web, debe ser muy consciente de cómo incluso un error de diseño minúsculo puede provocar el fracaso de su sitio web. Una de las formas de evitar los diversos escollos relacionados con el diseño de sitios web es utilizar el conjunto de herramientas adecuado. La idea es utilizar tales herramientas para simplificar algunas de las tareas relacionadas con el diseño web que consumen más tiempo y garantizar que las hagas absolutamente bien. Hay muchas herramientas de diseño web disponibles en el mercado y será difícil elegir la adecuada para sus necesidades. Este artículo tiene como objetivo hacer su trabajo un poco más simple. Es una lista seleccionada de 8 herramientas que pueden ayudarlo a aprovechar al máximo su proceso de diseño web.

conjunto de cuadrículas

john-sieberts-toolbox-john-sieberts-toolbox-gridset

Usted sabe lo importante que se ha vuelto el diseño web receptivo cuando ve que las personas confían cada vez más en sus teléfonos móviles para sus negocios y actividades diarias. Por lo tanto, es imperativo que construya un sitio web que se muestre de manera efectiva en diversos dispositivos. Gridset te ayuda a hacer precisamente eso. Es una herramienta de diseño completa que le permite crear diseños personalizados basados ​​en cuadrículas. Cree cualquier tipo de cuadrícula: cuadrículas en columnas, asimétricas, compuestas, fijas, fluidas y receptivas, con una opción para elegir entre los ajustes preestablecidos disponibles. ¡Tienes una biblioteca de cuadrículas por ahí! Una de las mejores características de esta herramienta es la facilidad con la que puede crear prototipos receptivos sin hacer cálculos. Simplemente acelere el diseño de su cuadrícula y adáptelo a la perfección tal como lo imaginó.

Gridset es un servicio pago, lo que te hace retroceder 9 USD mensuales o 90 USD anuales.

Wirefy

caja de herramientas de john-sieberts-caja de herramientas de john-sieberts-wirefy

Si está buscando una herramienta que lo ayude a crear wireframes rápidos y manejables que respondan a la web, Wirefy es una buena opción. Acelera el proceso de diseño desde la fase de boceto inicial hasta los entregables finales. Sin componentes sofisticados, pero con excelentes funciones fáciles de usar que le permiten experimentar rápidamente con estructuras de alambre receptivas y sentar las bases para su diseño sin perder la pista del contenido. Repleto de estilos como tipografía, tablas, botones, paginador, menú, presentación de diapositivas, imágenes, formularios y muchos más, Wirefy brinda la flexibilidad y las funciones integrales que necesita para crear un sitio web visualmente atractivo sobre la marcha.

Wirefy es gratuito según los términos de la licencia MIT y está disponible en Github.

FLEXNAV

caja de herramientas de john-sieberts-caja de herramientas de john-sieberts-flexnav

Otra gran herramienta de diseño receptivo web, FlexNav es un complemento de JQuery que usa JavaScript para crear menús desplegables con múltiples submenús anidados. Es fácil de configurar y la velocidad predeterminada se puede cambiar. Este complemento es compatible con la mayoría de los navegadores modernos.

FLEXNAV ha pasado al dominio público y está disponible en Github.

Snagit

john-sieberts-caja-de-herramientas-john-sieberts-caja-de-herramientas-snagit

Utilice esta herramienta para grabar instantáneamente un video en su pantalla o capturar una imagen recorriendo rápidamente el menú de opciones. También puede aprovechar el programa de edición dentro de Snagit para realizar cambios en la captura de pantalla; agrega una flecha, difumínala o recórtala según lo necesites. Introduzca imágenes llamadas «sellos» en las capturas de pantalla; incluir anotaciones y mejorar el aspecto general de la captura de pantalla. La herramienta mueve automáticamente las capturas de pantalla a la sección de edición, donde se pueden cambiar exactamente como quieras. Utilice diferentes formatos de selección, incluidos Todo en uno, Pantalla completa, Copiar al portapapeles, Página web como PDF con enlaces, Copiar texto al portapapeles, Mano libre y Menú con retardo de tiempo para personalizar una gran captura de pantalla que simplemente cautive a su audiencia.

Snagit no es gratuito, pero está disponible para Windows y Mac por igual. Precios varían.

Inspección de borde

caja de herramientas de john-sieberts-john-sieberts-caja de herramientas-edgeinspect

Edge Inspect, una excelente herramienta de ayuda para diseñadores centrada en el diseño web receptivo, como su nombre indica, le brinda los recursos para obtener una vista previa rápida del diseño web en plataformas móviles sin publicar los archivos asociados en el servidor. Perteneciente a la familia Adobe, Edge Inspect permite emparejar dispositivos móviles iOS y Android con la computadora. Cada dispositivo muestra el mismo sitio utilizando sus modos nativos de representación y presentación. Entonces, en lugar de obtener una vista previa de un sitio optimizado para dispositivos móviles, el archivo se envía a dispositivos emparejados para su visualización. Los códigos se pueden editar en vivo y los cambios se muestran instantáneamente y se vuelven a verificar en el lugar para confirmar la respuesta del diseño del sitio web a varios dispositivos portátiles. Sin perder el tiempo.

Inspección de borde está disponible gratuitamente fuera de una suscripción a Creative Cloud. Sin embargo, necesitará un Adobe iD.

Ajustar texto

caja de herramientas de john-sieberts-caja de herramientas de john-sieberts-fittext

FitText es una gran herramienta para personalizar tus titulares. No puedes ignorarlos; son las primeras palabras que se encuentran con los ojos de sus lectores. Si el contenido se escala hacia arriba o hacia abajo según la ventana gráfica del usuario (me refiero al diseño web receptivo), sus titulares pueden verse feos y apagar a sus lectores. FitText es lo que necesitas. Es un excelente complemento de jQuery que le da vida a su texto y actualiza automáticamente el tamaño de la fuente para brindarle un título escalable. Ofrece un nivel de ajuste fino que hace que su texto se vea animado en lugar de una serie de palabras sin vida que pueden cansar los ojos de su audiencia.

FitText se publica bajo la licencia WTFPL, que esencialmente se traduce en lo que crees que hace. Puede utilizar el script libremente. La licencia es una especie de dominio público con esteroides (si eso fuera posible).

Ya hemos revisado el slabText alternativo aquí en Noupe.

¿Cuáles son tus herramientas favoritas? Cuéntanos en los comentarios a continuación.

(dpe)

#Una #mirada #caja #herramientas #diseñador #web #hoy #John #Siebert

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.