Krypton Solid

Herramientas esenciales para todo diseñador web

Herramientas esenciales para todo diseñador web

Todo diseñador web necesita las herramientas adecuadas para hacer su trabajo. Para crear diseños originales bien elaborados, ciertamente necesitas inspirarte para hacerlo.

Llegar a ese punto es a veces el desafío más difícil en el campo del diseño web. Afortunadamente para nosotros y nuestra comunidad de diseño, hay herramientas disponibles para ayudar a completar el trabajo de manera más rápida y eficiente.

A continuación, he descrito una lista de herramientas que recomiendo a cualquier diseñador web. ¡Asegúrese de marcar estas páginas para que pueda utilizarlas a su favor como lo hice yo!

Color

Adobe Kuler (gratis)

Una gran herramienta ofrecida por Adobe que permite a los miembros cargar, crear y editar esquemas de color de su elección.

Pictaculous (gratis)

De los creadores de Mailchimp llega un generador de paleta de colores diferente a cualquier otro. Simplemente cargue una imagen y los colores dentro de la imagen se muestrean para crear un esquema de color personalizado.

Colorzilla (gratis)

ColorZilla para Google Chrome es una extensión que ayuda a los desarrolladores web y diseñadores gráficos con tareas relacionadas con el color, tanto básicas como avanzadas. ColorZilla incluye un selector de color, un cuentagotas, un generador de degradado y muchas herramientas de color avanzadas adicionales.

Dribbble.com (gratis)

Muchos diseñadores recurren a dribbble.com en busca de gran inspiración. Puede buscar términos comunes, pero aún mejor, puede buscar por color. Visite dribbble.com y haga clic en el enlace explorar en la navegación superior y luego seleccione colores para explorar la inspiración para sus diseños por color.

Tonos ($ 2.99)

¿Está interesado en aplicaciones nativas en lugar de aplicaciones web? Los tonos del cometa gigante son una herramienta de intriga de colores para ti. Por solo $ 2.99 en la tienda de aplicaciones, puede probar colores en cualquier proyecto en el que esté trabajando.

Tipografía

Google Webfonts (gratis)

Google tiene numerosas fuentes web para que cualquier diseñador web las utilice. Son gratuitos e increíblemente fáciles de implementar en sus proyectos.

Font Squirrel (gratis)

Font Squirrel es su mejor recurso para obtener fuentes gratuitas, seleccionadas a mano y de alta calidad para uso comercial. Incluso si eso significa que te envían a otro lugar para conseguirlos.

Tipo perdido (desde $ 1)

The Lost Type Co-Op es una fundición de tipo Pay-What-You-Want, la primera de su tipo. Con una gran selección de fuentes, cualquier diseñador web podría llevar sus diseños al siguiente nivel.

Encasillado (desde $ 29 por mes)

Typecast es una herramienta muy valiosa que le permite diseñar, verificar la legibilidad y renderizar rápidamente mientras trabaja. En lugar de descargar fuentes web y cambiar constantemente la forma en que leen dentro de un documento de Photoshop, esta nueva tecnología ayudará al flujo de trabajo de cualquier diseñador.

Wireframing

Balsamiq (desde $ 79)

Balasmiq es una herramienta rápida de wireframing que se utiliza para producir maquetas de experiencias de usuario. Su diseño de interfaz de usuario esbozado abarca el hecho de que es una herramienta para la lluvia de ideas y el pensamiento crítico cuando se trata de diseñar pensando en los usuarios. Las opciones de diseño para web, dispositivos móviles y tabletas existen y son fáciles de implementar.

moqups (gratis)

moqups es una aplicación HTML5 que se utiliza para crear wireframes, maquetas o conceptos de interfaz de usuario. El estilo y las características disponibles son muy similares a balsamiq. Todo se reduce a qué herramienta se siente más cómodo usando.

Mockflow (de forma gratuita)

Mockflow es una herramienta de estructura de alambre en línea como la pareja que mencioné anteriormente. La característica que encuentro interesante son las herramientas de colaboración. Puede tomar notas para permitir que otro usuario vea sus cambios o inquietudes, así como conversar entre sí en tiempo en vivo con respecto a decisiones o funciones importantes de la interfaz de usuario.

Dibujo de Google (gratis)

Una herramienta valiosa que muchos diseñadores web pasan por alto es Google Drawing. Si bien no presenta ajustes preestablecidos como los de balsalmiq o moqups, es un servicio completamente gratuito que puede almacenar en su unidad de Google en línea. Simplemente necesita una dirección de Gmail para comenzar.

Photoshop / Indesign / Fireworks (desde $ 49,99 por mes)

En mi opinión, la solución más sencilla es crear una estructura alámbrica desde cero. Seguir esta ruta solo está limitado por su creatividad e imaginación en lugar de las soluciones de interfaz de usuario preestablecidas como ofrecen muchas herramientas de estructura de cables. Puede llevar más tiempo, pero el resultado final es más personal y personalizado para adaptarse a la experiencia de cada usuario individual, ya sea un sitio web, una aplicación, un sitio web móvil o una aplicación para tableta.

Diseño y calderería

960 Grid (gratis)

La cuadrícula 960 es el punto de referencia de la web. Todo buen diseñador web ya debería comprender la importancia de utilizar una cuadrícula fundamental para su diseño, ya que hace que el diseño web sea mucho más útil para el usuario final. Las acciones de Photoshop que acompañan a la descarga me han ahorrado muchas horas de controlar los problemas de alineación.

1140 CSS Grid (donación de $ 5)

Si está interesado en un ancho de cuadrícula más amplio, le recomiendo la cuadrícula CSS 1140 como un excelente punto de partida. La cuadrícula completa encaja perfectamente en un monitor de 1280 y mejor aún para monitores o dispositivos más pequeños, la cuadrícula se vuelve fluida y se adapta a cualquier ancho del navegador.

Bootstrap (gratis)

Si está buscando una experiencia de usuario prefabricada lista para usar, bootstrap se convertirá en su mejor amigo. Hay numerosas características incluidas con el marco que es completamente adaptable y de aspecto sexy para arrancar.

LessFramework 4 (gratis)

Less es un marco dedicado a hacer que los sitios web sean verdaderamente adaptables. Está hecho para adaptarse a casi cualquier dispositivo del mercado. Contiene 4 diseños y 3 conjuntos de ajustes preestablecidos de tipografía, todos basados ​​en una sola cuadrícula.

Esqueleto (gratis)

Skeleton es simplemente un excelente punto de partida para cualquier sitio web. Su estructura simple y liviana beneficia a aquellos que buscan comenzar sin estudiar cómo funciona realmente el marco.

Foundation by Zurb (gratis)

Foundation acaba de lanzar Foundation 4, que según ellos es el marco front-end receptivo más avanzado del mundo. Con muchas características nuevas agregadas y plantillas increíbles para comenzar, puedo decir que soy un verdadero fanático. Pruébelo hoy.

Restablecer CSS (gratis)

Sin lugar a dudas, este restablecimiento de CSS del navegador reconocido mundialmente es una necesidad absoluta para que cualquier diseñador web ofrezca sus diseños en cualquier plataforma o navegador.

Gestión de contenido

WordPress (gratis)

WordPress se lleva la palma cuando se trata de sistemas de gestión de contenido. Originalmente, la plataforma de publicación de blogs más popular se ha convertido en eso y más en el mundo de los CMS.

Joomla (gratis)

Joomla es otro CMS popular utilizado por millones de personas en todo el mundo. Al igual que WordPress, el diseño predeterminado instalado con el CMS es fácil de usar y está listo para dispositivos móviles.

Motor de expresión (desde $ 299)

Desarrollado por EllisLab, Expression Engine es un CMS creado con la ayuda de un marco PHP de código abierto llamado Codeigniter. Muchas corporaciones más grandes como Apple, Ford, Nike y Sony eligen Expression Engine para satisfacer sus propias demandas. Como resultado, Expression Engine no es un CMS gratuito, pero definitivamente vale la pena leer y / o descargar una copia para familiarizarse con el trabajo futuro que pueda encontrar.

Drupal (gratis)

Drupal es una plataforma de gestión de contenido de código abierto para impulsar millones de sitios web y aplicaciones. Está construido, utilizado y respaldado por una comunidad activa y diversa de personas de todo el mundo. Drupal se puede utilizar para todo, desde blogs hasta amplias aplicaciones web.

Radiant CMS (gratis)

Radiant es un sistema de gestión de contenido de código abierto sin complicaciones, diseñado pensando en equipos pequeños. Su lema lo dice todo: gestión de contenidos simplificada.

Aplicaciones, acciones y recursos útiles

GuideGuide (gratis)

GuideGuide es una increíble extensión de Photoshop que te permite crear cuadrículas perfectas sobre la marcha. Al utilizar GuideGuide, puede crear columnas, filas, puntos medios y líneas de base más precisos con un solo clic.

Acciones y flujos de trabajo de Photoshop para iOS (gratis)

Uno de mis recursos favoritos está en un sitio web llamado bjango.com. El artículo específico presenta una lista detallada de acciones y flujos de trabajo creados por Bjango. Las acciones para crear nuevas plantillas para iPhone o iPad se realizan con un simple clic o si está diseñando el ícono de una aplicación para una aplicación de iPhone, hay una gran acción que cambia el tamaño de la aplicación a cada ancho y alto de píxel necesario. Este hallazgo fue el equivalente a encontrar oro para mí.

Por personas (gratis)

By People es una función de sitio web excelente y sencilla repleta de recursos que son gratuitos y fáciles de usar.

Temboo (desde gratis)

Temboo permite a los desarrolladores centrarse en lo que hace que su software sea único. Temboo normaliza el acceso a API, bases de datos y más para ahorrarle tiempo y brindarle el espacio creativo que necesita.

LittleIpsum (gratis)

¡Descarga esto! Si eres un diseñador web en una Mac, lo usarás todos los días. ¡¡Prometo!!

awesome-fontstacks.com (gratis)

Awesome Fontstacks es una gran herramienta en línea que te ayuda a mezclar y combinar fuentes web sobre la marcha. Cuando esté satisfecho con su pila de fuentes, será recibido con un código CSS listo para usar.

Editores de código

Coda 2 (desde $ 99)

Desde que me presentaron coda, he sido un fan. Por lo general, comparo otros editores de código con coda y, para mí, Coda siempre gana la pelea. Esto puede ser diferente para ti, pero te sugiero que pruebes coda si aún no lo has hecho. Coda2 está repleto de funciones y una interfaz de usuario fácil de usar que hace que la codificación para la web sea muy sencilla.

SublimeText 2 ($ 70)

SublimeText 2 está a la altura de Coda para mí. Hay un montón de funciones y la elegante interfaz de usuario de la aplicación en sí le permite concentrarse en el proceso de codificación en lugar de jugar con la aplicación para ponerla en condiciones de uso para sus propios proyectos.

TextMate (desde $ 59)

TextMate lleva el enfoque de Apple a los sistemas operativos al mundo de los editores de texto. Es simple y fácil de usar y ocupa menos espacio en la pantalla que muchos otros editores de código.

Estudio Aptana (gratis)

Aptana Studio es el IDE de aplicaciones web líder en la industria. Disponible tanto para Mac como para PC, este software aprovecha un increíble potencial para codificar prácticamente cualquier tipo de aplicación que se te ocurra.

BBEdit ($ 49,99)

BBEdit es un editor de texto y HTML profesional para Mac.

Clientes FTP

CyberDuck ($ 23,99)

De lejos, mi cliente FTP favorito es CyberDuck. Hay infinitas formas de conectarse a servidores web, servidores locales, dispositivos de acceso a través de ssh y más. Una gran herramienta disponible para plataformas Mac y PC.

FileZilla (gratis)

FileZilla es una solución FTP gratuita. También es un software de código abierto.

Transmitir ($ 34)

De los creadores de Coda viene Transmit. Una solución muy rápida y eficaz para FTP.

FireFTP (gratis)

Fire FTP es un cliente disponible para usuarios de Firefox. La aplicación está integrada en el navegador de Mozilla y ofrece una forma rápida y sencilla de transferir sus archivos.

¿Ha probado estos recursos? ¿Nos hemos perdido alguno de tus favoritos? Háznoslo saber en los comentarios.

Deja un comentario