Home

 

Llámanos ya al 973 261 283

 
BLOG

15 consejos para evitar los diseños imposibles en las maquetaciones de terceros

Escrito el 2014-09-08 por Rafael P. Vargas

<p>Lectura obligada para <strong>dise&ntilde;adores gr&aacute;ficos</strong> que se resisten a avanzar y a aprender las nuevas reglas en constante evoluci&oacute;n del <strong>Hipertexto (HTML)</strong></p>
<p>A pesar del avance <strong>tecnol&oacute;gico</strong>, algunas personas se resisten a evolucionar y se conforman con su sistema de siempre.</p> <p>Es el caso de alguno <strong>dise&ntilde;adores gr&aacute;ficos</strong> que, por encargo incurren en el <strong>dise&ntilde;o web</strong> sin tener nociones del significado de <strong>Adaptabilidad</strong>, <strong>dise&ntilde;o accesible</strong> o <strong>Responsive, o bien</strong> tipos de soporte o navegador.<br /><br />Y realmente, nos resulta irrelevante, verdad?... <strong>hasta que nos toca maquetar un dise&ntilde;o hecho por uno de estos dise&ntilde;adores gr&aacute;ficos.</strong> <br /><br />La responsabilidad final, el <strong>arte final del proyecto</strong>, siempre depender&aacute; del <strong>maquetador</strong>, por lo que las consiguientes broncas o palitos del cliente ser&aacute;n para el mismo.</p> <p>En <strong>Multigestor</strong>, hemos querido contribu&iacute;r a la soluci&oacute;n de ese problema y hemos redactado un (breve y conciso) C&oacute;digo Deontol&oacute;gico <em>(muy sui generis)</em> que , de seguirse, el resultado de los <strong>dise&ntilde;os</strong> ser&aacute; el id&oacute;neo o se le acercar&aacute; bastante, lo haga quien lo haga. Pero claro, milagros no podemos hacer...pero vamos al c&oacute;digo deontol&oacute;gico ese.</p> <p>&nbsp;</p> <h3>1) Docum&eacute;ntate</h3> <p>Es muy recomendable que est&eacute;s al corriente de todos los cambios y evoluciones del <strong>HTML</strong> y de los<strong> avances tecnol&oacute;gicos</strong> en cuestiones de <strong>soportes m&oacute;viles</strong>. Eso evitar&aacute; que al realizar un <strong>dise&ntilde;o</strong>, olvides hechos que deber&iacute;as recordar.</p> <h3>2) Visualiza la jerarquia de navegaci&oacute;n</h3> <p>Al <strong>crear</strong> tu <strong>p&aacute;gina</strong>, piensa en los elementos. En su posici&oacute;n. Ahora imagina que eres tu padre o tu madre, o tu abuelo (grandes, que har&iacute;amos sin ellos) y piensa en las limitaciones que podr&iacute;as tener para la <strong>comprensi&oacute;n de la disposici&oacute;n</strong> de los elementos. <strong>Dise&ntilde;a</strong> en consecuencia.</p> <h3>3) Piensa como piensa un visitante</h3> <p>No todos los visitantes de la <strong>web</strong> tienen la misma experiencia que tu en <strong>redes o en Internet</strong>. Algunos necesitan su tiempo para "reconocer" el terreno y asegurarse de que no pinchan en un anuncio o en sitio donde se les va a descargar un virus. Docum&eacute;ntate sobre <a title="el dise&ntilde;o accesible" href="http://es.wikipedia.org/wiki/Accesibilidad_web">el dise&ntilde;o accesible</a></p> <p>Se comprensivo y p&oacute;nselo f&aacute;cil. Pon atenci&oacute;n a como <strong>navega</strong> la gente.</p> <h3>4) Utiliza t&eacute;cnicas ya existentes</h3> <p>No inventamos nada nuevo. Ten en cuenta que <strong>Google</strong> paga a miles de <em>"cerebritos"</em> de Silicon Valey para que piensen cada d&iacute;a. Sabiendo esto, <strong>dise&ntilde;a</strong> tniendo en cuenta que quiz&aacute; debas usar un <strong>plugin de jQuery, un tooltip</strong>, por ejemplo. O un <strong>men&uacute; desplegable</strong>. O un <strong>carousel Bootstrap</strong>, o cualquier otro elemento.</p> <h3>5) Piensa en la interacci&oacute;n</h3> <p>Cuando <strong>dise&ntilde;es una web</strong>, nunca olvides que siempre est&aacute; en movimiento. Sus <strong>menus desplegables</strong> mueven el entorno, sus <strong>photo slides dinamizan</strong>, sus <strong>enlaces</strong> realizan acciones... No necesitas <strong>dise&ntilde;ar</strong> cada acci&oacute;n que haga el <strong>plugin</strong>, solo aseg&uacute;rate que el <strong>maquetador lo entiende</strong> y lo aplica.<br /><br />Si vas a presentarle el <strong>dise&ntilde;o a un cliente</strong>, JAM&Aacute;S LO HAGAS IMPRESO EN PAPEL, pues el cliente se llevar&aacute; una impresi&oacute;n (valga la redundiancia) err&oacute;nea del <strong>arte final</strong>. Usa tu <strong>Laptop</strong> o tu flamante <strong>iPad.</strong>..</p> <h3>5) Evita los arcoiris y la posicion de elementos</h3> <p>Sobre gustos los colores, pero francamente, usar <strong>m&aacute;s de 3 colores para la estructrura</strong> de una <strong>web</strong> es extremo. Observa las <strong>webs</strong> de las grandes corporaciones. Analiza donde colocan sus elementos m&aacute;s relevantes.</p> <p>&iquest;Es arriba a la izquierda?, &iquest;a la derecha?, &iquest;abajo...? observa y act&uacute;a en consecuencia.</p> <h3>6) Usa fuentes legibles</h3> <p>Y comprueba que su tama&ntilde;o sea legible en <strong>diversos soportes</strong>. Ten en cuenta el suavizado que aplican algunos <strong>navegadores</strong> o el <strong>Cleartype de windows</strong>. <br />Si en tu precioso <strong>Mac</strong> con una tarjeta gr&aacute;fica estupenda, lo ves bien, no significa que yo en mi <strong>Windows XP</strong> vaya a verlo igual... (<strong>Photoshop</strong> tiene una herramienta perecta para ello llamada <strong>anti-aliasing method</strong>).</p> <p>Ahora puedes usar las fuentes que quieras con @font-face y Google Fonts tiene un arsenal de fuentes para todos los gustos. Usa tu imaginaci&oacute;n.</p> <h3>7) Usa software que ya usen los que saben un poquito m&aacute;s que tu.</h3> <p>Los <strong>dise&ntilde;adores gr&aacute;ficos</strong> que trabajan <strong>artes para imprenta</strong> saben que solo hay una herramienta perfecta para ello: <strong>Adobe Illustrator.</strong></p> <p>Y no les falta raz&oacute;n.</p> <p><br />Pero lo que sirve para una cosa, quiz&aacute; no sirve para otra...<br />Empe&ntilde;arse en usar <strong>Illustrator</strong> (o <strong>Indesign</strong>, que yo lo he visto...) para <strong>dise&ntilde;ar una web</strong> te llevar&aacute; a una inexactitud muy bestia y a una percepci&oacute;n err&oacute;nea del trabajo final. Adem&aacute;s, cabrear&aacute;s mucho al <strong>maquetador</strong>...</p> <p>Existen varias herramientas con las que puedes<strong> dise&ntilde;ar una web</strong> de manera m&aacute;s practica. Recuerda esta palabra: <strong>Photoshop.</strong> Hace siglos que dej&oacute; de ser un programa de <strong>retoque fotogr&aacute;fico</strong> para convertirse en una suite para todo.</p> <h3>8) Considera que tu dise&ntilde;o tiene tendencia a cambiar seg&uacute;n el soporte.</h3> <p>Maravilloso. Tu <strong>dise&ntilde;o es estupendo</strong>, llamativo, buen color, buena fuente... Pero si lo miro con mi m&oacute;vil mira lo que pasa.... todo se rompe, se ve muy peque&ntilde;o, no queda como tu hab&iacute;as pensado...</p> <p>Adem&aacute;s, tarda mucho en cargar, porque <strong>como uso 3G...</strong></p> <p>(Personalmente, si una <strong>web</strong> tarda m&aacute;s de 10 segundos en dar muestras de <strong>carga en mi m&oacute;vil</strong>, cancelo la visita.)</p> <p>Trata de no cargar tu<strong> website</strong> de <strong>elementos gr&aacute;ficos o scripts</strong> muy pesados.</p> <h3>9) Dise&ntilde;a para todo tipo de tama&ntilde;os de p&agrave;ntalla</h3> <p><strong>Dise&ntilde;a</strong> para <a title="Responsive, dise&ntilde;o Adaptable" href="http://en.wikipedia.org/wiki/Responsive_web_design">Responsive, dise&ntilde;o Adaptable</a>. Usa <strong>Bootstrap</strong> o bien medidas relativas.</p> <p><strong>Imagina tu web</strong> como un elemento vivo, cambiante, que sufre cambios seg&uacute;n el soporte. Te divertir&aacute;s.</p> <h3>10) Utiliza librerias o recursos hechos para ser usados.</h3> <p>Ahora se pueden usar <strong>iconos</strong> y, como hemos dicho antes, <strong>fuentes desde Google Fonts</strong>, sin necesidad de que sean im&aacute;genes necesariamente. Si Usamos <strong>CSS</strong> para crear efectos en nuestros<strong> botones, degradados, sombras o bordes</strong>, la carga de nuestra p&aacute;gina ser&aacute; perfecta y a la larga, <strong>Google</strong> lo agradecer&aacute; en sus resultados de<strong> b&uacute;squeda</strong>. A continuaci&oacute;n una peque&ntilde;a lista de recursos muy &uacute;tiles:</p> <ul> <li><strong><a title="Font awesome" href="http://fortawesome.github.io/Font-Awesome/">Font awesome</a></strong>. Libreria de iconos en formato texto, f&aacute;cil de aplicar. Renuevan con frecuencia. La pega es que son muy comunes.</li> <li><a title="Google Fonts." href="https://www.google.com/fonts"><strong>Google Fonts</strong>.</a>&nbsp;Repositorio enorme de fuentes libres, listas para usar.</li> <li><a title="CSS Generator." href="http://css3generator.com/"><strong>CSS Generator</strong>.</a>&nbsp;Necesitas crear una sombra, un degradado o un borde a tus divisiones flotantes?</li> </ul> <p>&nbsp;</p> <h3>11) Piensa que despu&eacute;s de tu trabajo, llega el del maquetador y el programador.</h3> <p>P&oacute;nselo f&aacute;cil o te odiar&aacute;n a muerte. Y te conviene mucho llevarte bien con ellos si quieres repetir...</p> <h3>12) Piensa en los bucles.</h3> <p>Sobre todo en los <strong>productos de un e-commerce</strong></p> <p>Si la <strong>web</strong> va a albergar secuencias de <strong>productos, art&iacute;culos o noticias</strong>, debes saber que cada una es una misma secci&oacute;n, pero con <strong>contenido diferente</strong>. Es decir, se usa la misma <strong>maquetaci&oacute;n para todos los items</strong>.</p> <p>Los <strong>programadores usan bucles</strong> que invocan todos los <strong>productos o noticias</strong> filtrados para que se repitan secuencialmente.</p> <p>Cuando <strong>dise&ntilde;es</strong>, piensa en ello. El contenido es cambiante.</p> <h3>13) Unifica p&aacute;ginas.</h3> <p>Que cada <strong>p&aacute;gina</strong> no sea igual que la otra, pero que guarde concordancia. El visitante inexperto, quiere sentirse seguro siempre en un mismo entorno, para no perder el inter&eacute;s.</p> <p>Si le cambias el <strong>dise&ntilde;o de una home</strong> al de una p&aacute;gina interior con diferente forma o color, va a creer que es una <strong>p&aacute;gina</strong> de anuncios (como las de las p&aacute;ginas de pel&iacute;culas) y va a cerrar tu <strong>web</strong>.</p> <h3>14) Cabeceras</h3> <p><strong>Dise&ntilde;a</strong> pensando que necesariamente deber&aacute; haber cabeceras <strong>h1,h2,h3 y listados ul o ol.</strong></p> <p>Ten en cuenta que como <strong>dise&ntilde;ador</strong>, tienes la responsablidad de conducir el proyecto hacia un buen resultado final. Y ello implica el <strong>SEO</strong>.</p> <h3>15) Mira e insp&iacute;rate en lo existente.</h3> <p>Navega, inscr&iacute;bete a listas de correo de <strong>dise&ntilde;adores</strong>, observa los <strong>dise&ntilde;os</strong>, los procesos, investiga, siente curiosidad, pregunta.&nbsp; Nunca te apalanques, es el pan de tus hijos.</p> <p>&nbsp;</p> <p><strong>Recomendaci&oacute;n personal:</strong> usa <strong>Photoshop</strong> para el <strong>dise&ntilde;o de tus webs</strong>, es la herramienta m&aacute;s fiable puesto que puedes trabajar en tiempo real tal y como va a verse tu <strong>p&aacute;gina</strong> en los navegadores. Adem&aacute;s, trabaja en capas, igual que <strong>HTML</strong></p> <p>Hasta aqu&iacute; nuestros consejos. <strong>Insistimos en que te documentes</strong> m&aacute;s a fondo sobre este tema, porque es muy importante para ampliar tus conocimientos y para que tu trabajo sea &oacute;ptimo.</p> <p>Eso si, no olvides tu toque m&aacute;gico, eh?</p>
15 consejos para evitar los diseños imposibles en las maquetaciones de terceros

BLOG

Artículos del sector

Puesta en marcha de la Web de Gourmet Golden

2015-03-12

Arranca el periplo de Gourmet Golden, la web de venta Online de productos con Denominación de Orígen Les Garrigues.

Puesta en marcha de la Web de Gourmet Golden

Leer artículo completo

Twitter para Community Manager. Consideraciones.

2014-09-24

Twitter es una red social muy exclusiva y bastante diferente de las demás, pero al fin y al cabo con la misma finalidad: difundir contenido.

Se puede percibir Twitter desde diferentes puntos de vista y dependiendo de ellos, tu línea de comportamiento aconsejada debe ser acorde el mismo.

En este caso nos centraremos en Twitter para empresas.

Twitter para Community Manager. Consideraciones.

Leer artículo completo

Llega Web Entorn, el departamento de Comunicación de Multigestor

2014-09-15 <p>Llega a la Red, de la mano de <strong>Multigestor.com</strong>, el departamente de comunicaci&oacute;n global en Internet: <strong>Web Entorn Comunicaci&oacute;n Online.</strong></p>Llega Web Entorn, el departamento de Comunicación de Multigestor

Leer artículo completo

15 consejos para evitar los diseños imposibles en las maquetaciones de terceros

2014-09-08 <p>Lectura obligada para <strong>dise&ntilde;adores gr&aacute;ficos</strong> que se resisten a avanzar y a aprender las nuevas reglas en constante evoluci&oacute;n del <strong>Hipertexto (HTML)</strong></p>15 consejos para evitar los diseños imposibles en las maquetaciones de terceros

Leer artículo completo

Quiero vender por Internet, pero aun no se que producto. Dramas del E-commerce.

2014-09-08

Al plantearse abrir una tienda OnLine, son muchas las cuestiones que nos hacemos, pero la principal, sin duda, es saber que producto vamos a vender. A continuación 10 puntos interesantes a tener en cuenta.

Quiero vender por Internet, pero aun no se que producto. Dramas del E-commerce.

Leer artículo completo

La Optimización en motores de búsqueda (SEO): Acciones posteriores al análisis. (II)

2014-09-03 <p>Segunda parte de la serie Optimizaci&oacute;n SEO donde se aborda la aplicaci&oacute;n de las acciones t&eacute;cnicas para la mejora y optimizaci&oacute;n de nuestro website.</p>La Optimización en motores de búsqueda (SEO): Acciones posteriores al análisis. (II)

Leer artículo completo

La Optimización en motores de búsqueda (SEO): El Análisis previo. (I)

2014-09-02

Consideraciones a tener en cuenta para el éxito en buscadores y recomendaciones para su planificación.

La Optimización en motores de búsqueda (SEO): El Análisis previo. (I)

Leer artículo completo

La web de Husse Lleida a punto de ponerse en marcha.

2014-09-02

Si tienes una mascota, gato o perro...caballo! ya tienes tu tienda online en la provincia de Lleida. En Multigestor hemos tenido en privilegio de haber realizado esta tienda online con un novedoso sistema de pago.

La web de Husse Lleida a punto de ponerse en marcha.

Leer artículo completo

La ropa para hacernos invisibles, a un paso

2010-11-04

Físicos británicos crean un material flexible que consigue esquivar la luz y hace desaparecer los objetos al ojo humano

La ropa para hacernos invisibles, a un paso

Leer artículo completo

Nace la Tanatopedia, la wiki de los temas funerarios

2010-11-02

Cuando una idea resulta buena, lo más probable es que nazcan imitadores. Así ha pasado con la Wikipedia, que ha tenido múltiples adaptaciones temáticas y que ahora es utilizada como plataforma para el intercambio de conocimiento sobre temas funerarios, naciendo así la Tanatopedia.

Nace la Tanatopedia, la wiki de los temas funerarios

Leer artículo completo

Escucha la canción que dura mil años

2010-10-15 <p>Compuesta por ordenador, comenz&oacute; la noche el 31 de diciembre de 1999 y terminar&aacute; en 2999 sin repetirse ni una sola vez.</p>Escucha la canción que dura mil años

Leer artículo completo

La llegada del HTML5: ¿El fin de la privacidad en Internet?

2010-10-12 <p>Tu ubicaci&oacute;n y zona horaria, fotograf&iacute;as y textos compartidos, los comentarios que escribes en blogs y foros, el contenido de tu carrito de compras, tus direcciones de correo electr&oacute;nico y el historial de las p&aacute;ginas Web que visitas, son algunos de los datos a los que los anunciantes podr&aacute;n acceder incluso semanas despu&eacute;s de que navegues en sitios Web desarrollados en HTML5.</p>La llegada del HTML5: ¿El fin de la privacidad en Internet?

Leer artículo completo

Google prueba la previsualización de sitios en el buscador

2010-10-07 <p>Google contin&uacute;a probando nuevas caracter&iacute;sticas en su buscador con la finalidad de facilitar y aumentar la velocidad con que realizamos nuestras b&uacute;squedas.</p>Google prueba la previsualización de sitios en el buscador

Leer artículo completo

Japoneses crean auto robot controlado por el cerebro de una rata

2010-10-06

Japón es un país donde hay estatuas de robots, los heladeros son robots, y hay matrimonios hechos por robots. Así que no debería resultar extraño que el primer androide animal fuera construido en esa nación.

Japoneses crean auto robot controlado por el cerebro de una rata

Leer artículo completo

Policía 2.0 llega a las Redes Sociales para prevenir delitos

2010-10-04 <p>Oficiales del Grupo de Delitos Telem&aacute;ticos de la Guardia Civil espa&ntilde;ola desembarcan en Facebook, Twitter, y m&aacute;s recientemente en Tuenti y YouTube, para alertar a sus usuarios sobre los m&eacute;todos utilizados por los delincuentes para cometer fechor&iacute;as 2.0.</p>Policía 2.0 llega a las Redes Sociales para prevenir delitos

Leer artículo completo

Steve Wozniak en The Big Bang Theory

2010-10-02

Ya apareció el esperado capítulo de The Big Bang Theory (S04E02) en el que Steve Wozniak hace su intervención.

Steve Wozniak en The Big Bang Theory

Leer artículo completo

Estudio: La mayoría de los twitteos no los responde nadie

2010-09-30 <p>Un nuevo y chocante resultado apareci&oacute; hoy en un estudio, que viene a sumarse a otra lista de estudios chocantes: la mayor&iacute;a de los mensajes que la gente pone en Twitter no son respondidos por nadie. Los investigadores de lo obvio la compa&ntilde;&iacute;a Sysomos analizaron 1.200 millones de tweets en dos meses, encontrando que el 71\% no produce ninguna reacci&oacute;n (ni respuesta, ni retwitteo).</p>Estudio: La mayoría de los twitteos no los responde nadie

Leer artículo completo

Facebook desmiente proyecto de móvil pero quedan dudas

2010-09-28 <p>La compa&ntilde;&iacute;a y red social Facebook neg&oacute; que est&eacute; trabajando secretamente en un tel&eacute;fono m&oacute;vil propio despu&eacute;s de que una fuente cercana informara lo contrario a trav&eacute;s del blog tecnol&oacute;gico TechCrunch.</p>Facebook desmiente proyecto de móvil pero quedan dudas

Leer artículo completo

EE.UU. prepara una ley para poder controlar internet

2010-09-28

Las autoridades estadounidenses preparan una nueva ley que les permitirá enterarse de los mensajes enviados por medios electrónicos. Esta norma tiene la intención de obligar en adelante a los operadores de telecomunicaciones en Internet a permitir la lectura abierta de los mensajes de chat y los correos electrónicos encriptados.

  EE.UU. prepara una ley para poder controlar internet

Leer artículo completo

Lanzan la primera lectura de Don Quijote por Youtube

2010-09-28

La Real Academia Española (RAE) y la plataforma de vídeos YouTube han puesto en marcha la primera lectura global del 'Quijote' en la red, en la que podrán participar más de 2.100 hispanohablantes de cualquier rincón del mundo, informa la agencia EFE.

Lanzan la primera lectura de Don Quijote por Youtube

Leer artículo completo

Actuable.es: un intento de salvar al mundo (de internet)

2010-09-28

Si quieres erradicar el hambre y la pobreza, exigir el respeto a los derechos humanos, protestar contra el maltrato animal, velar por el cuidado del medioambiente y luchar contra la corrupción, puedes hacer escuchar tu voz en Actuable.es, un espacio concebido para emprender batallas ciudadanas en la Web 2.0.

Actuable.es: un intento de salvar al mundo (de internet)

Leer artículo completo

AOL compra TechCrunch

2010-09-28

Tal como adelantábamos en la mañana, el blog de emprendimiento tecnológico TechCrunch acaba de ser adquirido por AOL, y el anuncio fue realizado a través del mismo sitio en un post escrito por el CEO del ex-gigante de internet de los 90, Tim Armstrong.

AOL compra TechCrunch

Leer artículo completo

CONTACTO

Cons├║ltenos aquello que necesite.

Por favor, utilice el formulario para enviarnos cualquier sugerencia, petici├│n o mensaje.

Mensaje
Código
 
Multigestor garantiza que los datos que nos envíe no serán facilitados a terceros.