Saltar al contenido

Herramientas de diseño web para mantener en su Arsenal

×
Cada diseñador web tiene unas pocas herramientas sin las que no se imaginan trabajando. Hay algunas obvias, como un gran editor de texto y Photoshop, pero hay otras herramientas de diseño web que pueden no parecer tan obvias. Aquí están algunas de nuestras herramientas favoritas para los diseñadores web.

Twitter

Mientras que al principio Twitter puede parecer que no debería ser una herramienta, es definitivamente algo que se usa mucho por aquellos en la industria de la web. Ya que la tecnología que usamos cambia diariamente, a veces hasta parece que cada hora, es un gran lugar para escanear un feed y obtener una rápida visión de las nuevas ideas. A la comunidad web le encanta compartir, ayudar y enseñar. Por lo general, también puedes encontrar un montón de grandes enlaces a artículos innovadores. Podría ser útil instalar un cliente de Twitter, como TweetDeck, también. Pueden ayudarte a organizar tus tweets, construir líneas de tiempo, ayudarte a buscar temas específicos y administrar varias cuentas. De esta manera puedes mantener tus actualizaciones de Beyoncé separadas de las de Responsive Design.Aquí están algunas de nuestras personas favoritas en la industria de la web para empezar a seguirlas:

Herramientas de diseño web para mantener en su Arsenal
Herramientas de diseño web para mantener en su Arsenal

Trello

Puede ser increíblemente difícil llevar la cuenta de todas las cosas diferentes que tienes que hacer. Trello es un servicio gratuito que puede cambiar tu vida. Sólo tienes que crear listas para diferentes tareas. Así que, digamos que estás trabajando en el sitio de tu portafolio, puedes crear un tablero llamado «Portafolio» y luego agregar listas para todas las diferentes cosas que necesitas hacer. Esto creará una forma sencilla de mantenerse organizado y de echar un vistazo rápido a las cosas que le quedan por hacer. También tienen una aplicación disponible para iPhone y Android, para que pueda actualizar sus tareas dondequiera que esté.Trello publicó recientemente una entrada en su blog sobre cómo el uso de su servicio podría incluso ayudarle a mantenerse organizado cuando busque un trabajo.

HTML5 Boilerplate

HTML5 Boilerplate es una plantilla simple y un conjunto de reglas que pueden ser usadas en cualquier proyecto web. Es una plantilla que comenzó en 2009 y fue creada en su mayoría por Paul Irish y Divya Manian. Una vez que comiences a crear sitios, notarás que probablemente estés copiando y pegando código todo el tiempo.HTML5 Boilerplate es todo lo que necesitas para poner en tus archivos en primer lugar. Así que en los términos más simples, puedes usar como punto de partida una página o un archivo basado en HTML. También incluye un montón de comentarios y documentación para ayudarte a entender por qué las cosas que forman parte del Boilerplate están ahí. Dado que la documentación se incluye con la descarga, te facilita la referencia a ellos incluso si trabajas sin conexión. El uso de Boilerplate HTML5 puede darte una ventaja cuando creas tus archivos de documentos. El archivo main.css incluye clases de ayuda y algunas consultas de medios para que puedas empezar con un diseño que responda a tus necesidades. También tiene un archivo normalize.css para corregir los errores del navegador y una base más consistente para construir tu CSS. Para aprender más acerca de HTML5 Boilerplate, revisa el Curso de Iniciación a HTML5 Boilerplate.

CódigoPen

CodePen es un editor de código que está incorporado en tu navegador y que te permite previsualizar el HTML, CSS y JavaScript que escribes. Lo que hace que CodePen sea diferente de algunos de los otros editores de navegador, a menudo llamados Code Playgrounds, es la posibilidad de que crees una cuenta con un perfil y te unas a la comunidad. Es casi como Dribbble para los desarrolladores de front-end. Una vez que hayas creado unos cuantos bolígrafos (que es como se llama cada sesión guardada) podrías incluso usar el CodePen como tu portafolio. También tienen una función Hire Me que puedes añadir a tu perfil para ayudarte a encontrar trabajo. Lo que es realmente genial del CodePen es la posibilidad de ver el trabajo de otras personas. Puedes ver simplemente algunas de las cosas increíbles que la gente está creando con sólo HTML, CSS y JavaScript. Verá cosas como animaciones, soluciones a nuevos problemas y cosas realmente geniales basadas en código. También es otra forma de aprender cómo lograr algo con código. Como puedes ver el código y el resultado al mismo tiempo, también puedes jugar con él. El CodePen también soporta muchos preprocesadores, como Sass, LESS, Markdown y Haml, por lo que no tienes que sentirte limitado si estás acostumbrado a usar un preprocesador.

Servicio de validación de marcas

Aunque un servicio de validación no es tan emocionante como el resto de las herramientas de esta lista, validar su código es importante. El uso de un validador asegura que tu código siga las mejores prácticas y directrices mediante el uso de una sintaxis correcta. Un validador bien respetado es directamente del W3C. También es bastante sencillo de usar. Puedes subir tu archivo o simplemente pegar su contenido. Te ayudará a encontrar si has cometido algún error u olvidado aspectos importantes de tu código, como añadir una codificación UTF.

Skitch

Skitch es una aplicación que se usa para hacer capturas de pantalla. Pero lo que hace que Skitch sea genial es la posibilidad de escribir o añadir formas, flechas o bocetos a la captura de pantalla directamente dentro de la aplicación. Skitch ahora forma parte de Evernote, por lo que es aún más fácil guardar y organizar tus capturas de pantalla. Tener una manera de simplemente tomar una foto de algo que tu sitio está haciendo que es raro o incluso simplemente enviarlo a un cliente o alguien con quien estás trabajando puede ser increíblemente útil.

Lápiz y papel

Aunque puede parecer una herramienta tonta incluirla en esta lista llena de elementos digitales, a veces todo lo que necesitas para poner en marcha una idea es un pequeño boceto. Es una buena práctica mantener un cuaderno y un bolígrafo juntos en tu bolso con tus aparatos electrónicos. A veces sólo tienes que alejarte del teclado para empezar a anotar tus ideas. También es mucho más sencillo dibujar un marco rápido con el bolígrafo que crear uno digitalmente. ¿Utilizas alguna de estas herramientas? Dinos algunas de tus favoritas en la sección de comentarios de abajo!

COMPARTIR:

¿Listo para capacitar a todo tu equipo?

10Licencias¿Necesitas más licencias? Contacte con ventas. Continúe con la compraContinúe con la compraCancelar

Con tu plan, puedes:

Con tu piloto de 14 días, puedes:

  • Acceder a miles de videos para desarrollar habilidades críticas
  • Darle acceso a hasta 10 usuarios a miles de cursos de video
  • Practicar y aplicar habilidades con cursos y proyectos interactivos
  • Ver datos de habilidades, uso y tendencias de sus equipos
  • Prepararse para las certificaciones con los exámenes de prácticas líderes en la industria
  • Medir la competencia entre las habilidades y los roles
  • Alinear el aprendizaje a sus objetivos con los caminos y canales

╲╱Solutions Skills FlowGift of View PricingContactar Sales╲╱PlatformBrowse libraryRole IQSkill IQIrisAuthorsProfessional ServicesTechnology Index╲╱CompanyAbout usCustomer storiesInvestorsCareersBlogNewsroomResource centerGuides╲╱ResourcesDownload EventsTeachPartnersAffiliate programOne.orgSubscribe╲╱SupportContactHelp centerIP whitelistSitemapCopyright © 2004 – LLC. Todos los derechos reservadosTérminos de usoPolítica de privacidad

Utilizamos cookies para que las interacciones con nuestros sitios web y servicios sean fáciles y significativas. Para obtener más información sobre las cookies que utilizamos o para saber cómo puede desactivarlas, haga clic aquí.

Acepta las cookies y cierra este mensaje Deshabilitar cookies

Ha desactivado las cookies no críticas y está navegando en modo privado. Para tener la mejor experiencia posible en nuestro sitio web, por favor, acepte las cookies. Para obtener más información, lea nuestra política de privacidad.

Acepta las cookies y cierra este mensaje