El diseƱo web puede suponer un proceso largo, laborioso y complejo. Por eso es tan importante contar con herramientas y opciones que te permitan agilizar tus tareas y ganar algo de tiempo. Vivimos un momento en el que hay una gran cantidad de herramientas web y aplicaciones adicionales que cubren todo tipo de necesidades, asĆ que debemos aprovecharlo.
A continuaciĆ³n me gustarĆa compartir con vosotros siete ejemplos de ello, y por supuesto os invito a que compartĆ”is con nosotros en la secciĆ³n de comentarios cualquier otra herramienta que a vosotros personalmente os resulte Ćŗtil para abordar proyectos web.
Adobe Kuler
La combinaciĆ³n de colores puede resultar algo complicada en ciertos momentos, o bien porque tenemos varias ideas contradictorias o porque no encontramos ninguna que refleje bien las pretensiones de nuestro proyecto. En estos casos Adobe Kuler es una gran alternativa. Este programa gratuito de Adobe estĆ” pensado para facilitar la creaciĆ³n de paletas de color y encontrar aquellas combinaciones mĆ”s adecuadas. ĀæCĆ³mo conseguir esta aplicaciĆ³n? Para ello Ćŗnicamente deberĆ”s estar registrado como usuario en la pĆ”gina de Adobe y una vez que cuentes con tu nombre de usuario y tu contraseƱa podrĆ”s tener acceso rĆ”pido a Ć©l. No sĆ© si recuerdas que hace algĆŗn tiempo nuestro compaƱero Antonio desarrollĆ³ un vĆdeo sobre esta herramienta. PodrĆ”s tener acceso a nuestro vĆdeo desde aquĆ.
Typecast
Hemos hablado en muchas ocasiones de la importancia de la tipografĆa en cualquier proyecto y es que decidir cuĆ”l puede ser la mĆ”s adecuada tambiĆ©n puede transformarse en todo un dilema. Por eso, esta aplicaciĆ³n puede ser una herramienta imprescindible muchas veces para crear diseƱos. Typecast te permitirĆ” el acceso a mĆ”s de cinco mil fuentes desde Typekit, Google Web Fonts y Fonts.com Fontdeck, todo ello desde un Ćŗnico panel de control. De este modo podrĆ”s escoger la tipografĆa que mĆ”s se adapte al estilo o tĆ³nica de tu trabajo de una forma tremendamente sencilla y rĆ”pida. AdemĆ”s esta aplicaciĆ³n te permitirĆ” crear columnas para organizar la informaciĆ³n y el contenido asĆ como alterar o modificar la tipografĆa escogida. SĆ³lo tendrĆ”s que escoger en el menĆŗ del Ć”rea lateral tu proveedor de fuentes y seleccionar cualquiera de ellas para obtener un reflejo de los resultados directamente en la misma pĆ”gina web. AdemĆ”s tambiĆ©n nos permite acceder a su cĆ³digo CSS para poder insertar esas fuentes directamente en tus pĆ”ginas web con la total certeza de que tus usuarios cargarĆ”n la fuente y verĆ”n el mismo resultado que tĆŗ.
GuideGuide
Se trata de una extensiĆ³n para la aplicaciĆ³n de Adobe Photoshop que te permitirĆ” preparar tu propio documento para comenzar a diseƱar tus pĆ”ginas webs y lo mejor de todo es que serĆ” en cuestiĆ³n de minutos. Para muchos diseƱadores webs esta herramienta se ha convertido en imprescindible sobre todo por la precisiĆ³n que ofrecen las guĆas para lograr diseƱos perfectos. No tienes mĆ”s que instalarla (su peso es muy reducido al tratarse de una extensiĆ³n) para disfrutar de ella.
Mockflow
Si necesitas desarrollar tus propios wireframes esta aplicaciĆ³n va a serte de gran utilidad ya que te permitirĆ” diseƱar tu propio prototipo en sĆ³lo pocos minutos de forma online y para una gran variedad de plataformas distintas: Desde iPhone, WordPress, Android, Joomla, Facebookā¦ El resultado serĆ”n prototipos de alta calidad y de fĆ”cil uso en tus proyectos. AdemĆ”s su funcionamiento es tremendamente sencillo, intuitivo y funcional ya que la forma de trabajo se basa en un sistema drag and drop a travĆ©s de los componentes o elementos que la propia aplicaciĆ³n te proporciona. Eso sĆ, debes tener en cuenta que la versiĆ³n gratuita sĆ³lo te permite un Ćŗnico proyecto con una extensiĆ³n mĆ”xima de cuatro pĆ”ginas, aunque puedes descargar tus proyectos en diferentes formatos y eliminarlos en el momento en que dejes de usarlas.
Invision
Cuanto se estrenĆ³ suscitĆ³ una gran expectaciĆ³n y no es para menos. Invision es una herramienta que se centra en la representaciĆ³n de prototipados pero con una diferencia importante: Esta aplicaciĆ³n convierte tus trabajos en prototipos interactivos, dinĆ”micos y con transiciones y animaciones web por lo que tus propios mockups ganarĆ”n un gran realismo. AdemĆ”s te permite compartir tu proyecto con todos los usuarios que desees (incluyendo por supuesto a tu cliente) por lo que resulta rĆ”pida, segura y prĆ”ctica a la hora de hacer presentaciones de proyectos e interactuar con el diseƱo de una pĆ”gina web antes de comenzar con el desarrollo de la misma.
Layervault
Seguro que mĆ”s de una vez hemos tenido dificultades para gestionar dentro de un proyecto las Ćŗltimas versiones de los archivos. Sobre todo cuando un mismo archivo va siendo editado por varias personas a la vez. Layervault es una aplicaciĆ³n web que te permitirĆ” controlar y gestionar todos los aspectos de tu proyecto (comunicaciĆ³n con compaƱeros, gestiĆ³n de archivos, etc.) desde una misma interfaz. Puedes aƱadirla a la barra de tareas, lo que te permitirĆ” ir guardando de forma automĆ”tica a travĆ©s de la sincronizaciĆ³n cualquier cambio, archivo, carpeta, etc. en el directorio de LayerVault. AsĆ tus compaƱeros de proyecto irĆ”n recibiendo actualizaciones para estar informados de quĆ© aspectos del trabajo se actualizan o cambian, y tambiĆ©n recibiremos dichas notificaciones en nuestros otros dispositivos si tambiĆ©n los sincronizamos.
Codekit
Hemos hablado de ella en alguna que otra ocasiĆ³n, pero si aĆŗn no la conoces te dirĆ© que se trata de una herramienta muy Ćŗtil a la hora de construir pĆ”ginas web de manera organizada y limpia. Te permitirĆ” importar tus frameworks y compilar Sass y Less asĆ como optimizar tus archivos haciendo bĆŗsquedas rĆ”pidas y automĆ”ticas en el proyecto con que estĆ©s trabajando y en tus frameworks.