{"id":1091,"date":"2021-02-18T22:51:12","date_gmt":"2021-02-18T22:51:12","guid":{"rendered":"http:\/\/blog.utp.edu.co\/jose-manuel\/?p=1091"},"modified":"2021-02-18T22:51:13","modified_gmt":"2021-02-18T22:51:13","slug":"herramientas-para-diseno-de-paginas-web","status":"publish","type":"post","link":"https:\/\/blog.utp.edu.co\/jose-manuel\/herramientas-para-diseno-de-paginas-web\/","title":{"rendered":"Herramientas para dise\u00f1o de p\u00e1ginas web"},"content":{"rendered":"\n

No podemos negar que el dise\u00f1o de paginas web<\/a> representa una tarea llena de esfuerzo, dedicaci\u00f3n e inversi\u00f3n de tiempo, para que se puedan alcanzar todos los objetivos propuesto y que cada uno de sus elementos se encuentren en armon\u00eda. Para facilitarnos el trabajo, existen m\u00faltiples herramientas que nos van ayudar a alcanzar esta meta<\/strong>, las cuales debemos conocer a fondo para poder incluirlas en nuestro equipo de trabajo.<\/p>\n\n\n\n

Las mejores herramientas para dise\u00f1ar una p\u00e1gina web<\/h2>\n\n\n\n

Dise\u00f1ar una p\u00e1gina web o un blog que se encuentre en perfecto estado es imprescindible para un buen posicionamiento<\/strong> de la misma, tambi\u00e9n para que nuestra marca, empresa, compa\u00f1\u00eda o negocio gane la visibilidad que tanto anhelamos. Para lograr cada uno de estos objetivos, vamos a tener que utilizar distintas herramientas que nos ayuden a optimizarla<\/strong> y que al mismo tiempo nos ayuden a ahorrar tiempo valioso.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Ahora bien, con el pasar de los d\u00edas existen nuevas herramientas y diferentes actualizaciones dentro del mercado, por lo que escoger las mejores para nosotros puede representar un gran reto. Por ello, nos hemos tomado la tarea de realizar una lista con las apps y herramientas m\u00e1s utilizadas<\/strong> y mejor valoradas por los usuarios a nivel internacional.<\/p>\n\n\n\n

Comenzamos con Adobe Color CC<\/strong>, la herramienta ideal para dar color a tu p\u00e1gina web, ya que tiene una gran variedad de paletas disponibles para ti. Esta analiza los tonos a partir de una imagen y te ofrece las mejores combinaciones para que puedas escoger la paleta de colores que quieres aplicar a tu sitio. Asimismo, tambi\u00e9n tendr\u00e1s la oportunidad de ajustar los colores, la saturaci\u00f3n, tonos, curvas y mascaras de luminosidad. Es completamente gratuita y vas a poder descargarla como una aplicaci\u00f3n de escritorio o como una herramienta en tu dispositivo m\u00f3vil.<\/p>\n\n\n\n

Seguimos con Google Fonts, que se especializar\u00e1 en las tipograf\u00edas<\/strong> que incluir\u00e1s en tu p\u00e1gina web. Esta cuenta con una interfaz muy intuitiva y f\u00e1cil de utilizar, donde se te presenta un catalogo con m\u00e1s de 800 fuentes distintas para que puedas seleccionar la de tu preferencia; las tipograf\u00edas son gratuitas, originales y se adaptar\u00e1n al estilo que desees. Cuenta con filtros de b\u00fasqueda para que la elecci\u00f3n de las fuentes sea m\u00e1s sencilla y posee una secci\u00f3n llamada Featured donde tendr\u00e1s acceso a colecciones tem\u00e1ticas.<\/p>\n\n\n\n

En tercer lugar, nos topamos con MockFlow<\/strong>, la cual es considerada una de las herramientas m\u00e1s importantes dentro del mundo del dise\u00f1o web. Esta te permite construir esquemas de dise\u00f1o de una forma sencilla y r\u00e1pida<\/strong>, puesto que solo tienes que arrastrar y soltar las formas en el espacio de tu preferencia, para as\u00ed crear una interfaz funcional. Puedes ejecutarlas desde un dispositivo m\u00f3vil y te ofrecer\u00e1 plantillas con las que puedes inspirarte.<\/p>\n\n\n\n

Continuamos con el Administrador de Dise\u00f1o HubSpot<\/strong>, siendo una aplicaci\u00f3n repleta de herramientas indispensables para crear p\u00e1ginas web o blogs avanzados mientras que permiten que sus usuarios creen contenido de manera libre. Podr\u00e1s inspeccionar c\u00f3digos, editar dise\u00f1os, inspeccionar las propiedades de tus dise\u00f1os, entre muchas m\u00e1s. Es personalizable, eficiente, r\u00e1pida y segura.<\/p>\n\n\n\n

La siguiente a destacar es Tinypng, un optimizador de im\u00e1genes<\/strong>. Todos sabemos que las ilustraciones son las que producen que el tiempo de carga de una web sea mucho m\u00e1s lento, la soluci\u00f3n para ello es Tinypng<\/strong>, la cual comprimir\u00e1 el contenido grafico para reducir su tiempo de carga, de una forma r\u00e1pida y automatizada.<\/p>\n\n\n\n

En sexto lugar vamos a encontrar a Adobe Edge Reflow, cuyo objetivo es crear prototipos de p\u00e1ginas webs<\/strong> o blogs de alta fidelidad, siendo funcionales y utilizando herramientas graficas. De esta manera podr\u00e1s crear una web adaptativa de una forma r\u00e1pida y sencilla, con un solo clic. Es adaptable a cualquier resoluci\u00f3n y cumple con los est\u00e1ndares HTML5 y CSS3.<\/p>\n\n\n\n

Por otro lado, tenemos a Notepad++, el cual nos servir\u00e1 para editar texto y c\u00f3digos de fuente libre<\/strong>, el cual puede leer y captar distintos leguajes de programaci\u00f3n sin problema alguno. Se caracteriza por su interfaz simple de utilizar, cuyo dise\u00f1o es muy parecido a un block de notas y por resaltar de distintos colores las combinaciones para que la lectura se realice de una forma m\u00e1s f\u00e1cil y fluida.<\/p>\n\n\n\n

Para finalizar, cerramos con Proto.io<\/strong>, puesto que toda p\u00e1gina web debe tener su aplicaci\u00f3n m\u00f3vil<\/strong> y esta es la herramienta ideal para ello. Te ayudar\u00e1 desde crear los distintos prototipos hasta montarlos para su presentaci\u00f3n. Podr\u00e1s modificarla a tu gusto, a\u00f1adiendo los elementos de tu preferencia. Asimismo, la versi\u00f3n gratuita de la herramienta te permite guardar un proyecto en tus subdominios.<\/p>\n\n\n\n

Otras herramientas que no puedes dejar fuera de tu portafolio<\/h3>\n\n\n\n
  • Pixabay<\/strong>: es un banco de im\u00e1genes gratuito donde vas a poder conseguir elementos gr\u00e1ficos sin derechos de autor.<\/li>
  • CSS3 Button Gnerator<\/strong>: crea y dise\u00f1a botones personalizados desde cero.<\/li>
  • WhatFontils<\/strong>: te ayudar\u00e1 a descubrir el nombre de aquella fuente que tanto deseas en poco tiempo.<\/li>
  • Canva<\/strong>: ideal para crear im\u00e1genes de cabecera para tus blogs.<\/li>
  • Iconfinder<\/strong>: creador de iconos creativos.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"

    No podemos negar que el dise\u00f1o de paginas web representa una tarea llena de esfuerzo, dedicaci\u00f3n e inversi\u00f3n de tiempo, para que se puedan alcanzar todos los objetivos propuesto y que cada uno de...<\/p>\n","protected":false},"author":6331,"featured_media":1101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37021],"tags":[],"class_list":["post-1091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing"],"_links":{"self":[{"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/posts\/1091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/users\/6331"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/comments?post=1091"}],"version-history":[{"count":1,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1111,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/posts\/1091\/revisions\/1111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/media\/1101"}],"wp:attachment":[{"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/media?parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/categories?post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.utp.edu.co\/jose-manuel\/wp-json\/wp\/v2\/tags?post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}