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ñadores gráficos</strong> que se resisten a avanzar y a aprender las nuevas reglas en constante evolución del <strong>Hipertexto (HTML)</strong></p>
<p>A pesar del avance <strong>tecnoló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ñadores gráficos</strong> que, por encargo incurren en el <strong>diseño web</strong> sin tener nociones del significado de <strong>Adaptabilidad</strong>, <strong>diseñ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ño hecho por uno de estos diseñadores gráficos.</strong> <br /><br />La responsabilidad final, el <strong>arte final del proyecto</strong>, siempre dependerá del <strong>maquetador</strong>, por lo que las consiguientes broncas o palitos del cliente serán para el mismo.</p>
<p>En <strong>Multigestor</strong>, hemos querido contribuír a la solución de ese problema y hemos redactado un (breve y conciso) Código Deontológico <em>(muy sui generis)</em> que , de seguirse, el resultado de los <strong>diseños</strong> será el idóneo o se le acercará bastante, lo haga quien lo haga. Pero claro, milagros no podemos hacer...pero vamos al código deontológico ese.</p>
<p> </p>
<h3>1) Documéntate</h3>
<p>Es muy recomendable que estés al corriente de todos los cambios y evoluciones del <strong>HTML</strong> y de los<strong> avances tecnológicos</strong> en cuestiones de <strong>soportes móviles</strong>. Eso evitará que al realizar un <strong>diseño</strong>, olvides hechos que deberías recordar.</p>
<h3>2) Visualiza la jerarquia de navegación</h3>
<p>Al <strong>crear</strong> tu <strong>página</strong>, piensa en los elementos. En su posición. Ahora imagina que eres tu padre o tu madre, o tu abuelo (grandes, que haríamos sin ellos) y piensa en las limitaciones que podrías tener para la <strong>comprensión de la disposición</strong> de los elementos. <strong>Diseñ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éntate sobre <a title="el diseño accesible" href="http://es.wikipedia.org/wiki/Accesibilidad_web">el diseño accesible</a></p>
<p>Se comprensivo y pónselo fácil. Pon atención a como <strong>navega</strong> la gente.</p>
<h3>4) Utiliza té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ía. Sabiendo esto, <strong>diseña</strong> tniendo en cuenta que quizá debas usar un <strong>plugin de jQuery, un tooltip</strong>, por ejemplo. O un <strong>menú desplegable</strong>. O un <strong>carousel Bootstrap</strong>, o cualquier otro elemento.</p>
<h3>5) Piensa en la interacción</h3>
<p>Cuando <strong>diseñes una web</strong>, nunca olvides que siempre está 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ñar</strong> cada acción que haga el <strong>plugin</strong>, solo asegúrate que el <strong>maquetador lo entiende</strong> y lo aplica.<br /><br />Si vas a presentarle el <strong>diseño a un cliente</strong>, JAMÁS LO HAGAS IMPRESO EN PAPEL, pues el cliente se llevará una impresión (valga la redundiancia) erró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á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ás relevantes.</p>
<p>¿Es arriba a la izquierda?, ¿a la derecha?, ¿abajo...? observa y actúa en consecuencia.</p>
<h3>6) Usa fuentes legibles</h3>
<p>Y comprueba que su tamañ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á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ón.</p>
<h3>7) Usa software que ya usen los que saben un poquito más que tu.</h3>
<p>Los <strong>diseñadores grá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ón.</p>
<p><br />Pero lo que sirve para una cosa, quizá no sirve para otra...<br />Empeñarse en usar <strong>Illustrator</strong> (o <strong>Indesign</strong>, que yo lo he visto...) para <strong>diseñar una web</strong> te llevará a una inexactitud muy bestia y a una percepción errónea del trabajo final. Además, cabrearás mucho al <strong>maquetador</strong>...</p>
<p>Existen varias herramientas con las que puedes<strong> diseñar una web</strong> de manera más practica. Recuerda esta palabra: <strong>Photoshop.</strong> Hace siglos que dejó de ser un programa de <strong>retoque fotográfico</strong> para convertirse en una suite para todo.</p>
<h3>8) Considera que tu diseño tiene tendencia a cambiar según el soporte.</h3>
<p>Maravilloso. Tu <strong>diseño es estupendo</strong>, llamativo, buen color, buena fuente... Pero si lo miro con mi móvil mira lo que pasa.... todo se rompe, se ve muy pequeño, no queda como tu habías pensado...</p>
<p>Además, tarda mucho en cargar, porque <strong>como uso 3G...</strong></p>
<p>(Personalmente, si una <strong>web</strong> tarda más de 10 segundos en dar muestras de <strong>carga en mi móvil</strong>, cancelo la visita.)</p>
<p>Trata de no cargar tu<strong> website</strong> de <strong>elementos gráficos o scripts</strong> muy pesados.</p>
<h3>9) Diseña para todo tipo de tamaños de pàntalla</h3>
<p><strong>Diseña</strong> para <a title="Responsive, diseño Adaptable" href="http://en.wikipedia.org/wiki/Responsive_web_design">Responsive, diseñ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ún el soporte. Te divertirá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ágenes necesariamente. Si Usamos <strong>CSS</strong> para crear efectos en nuestros<strong> botones, degradados, sombras o bordes</strong>, la carga de nuestra página será perfecta y a la larga, <strong>Google</strong> lo agradecerá en sus resultados de<strong> búsqueda</strong>. A continuación una pequeña lista de recursos muy ú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á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> Repositorio enorme de fuentes libres, listas para usar.</li>
<li><a title="CSS Generator." href="http://css3generator.com/"><strong>CSS Generator</strong>.</a> Necesitas crear una sombra, un degradado o un borde a tus divisiones flotantes?</li>
</ul>
<p> </p>
<h3>11) Piensa que después de tu trabajo, llega el del maquetador y el programador.</h3>
<p>Pónselo fácil o te odiará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ículos o noticias</strong>, debes saber que cada una es una misma sección, pero con <strong>contenido diferente</strong>. Es decir, se usa la misma <strong>maquetació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ñes</strong>, piensa en ello. El contenido es cambiante.</p>
<h3>13) Unifica páginas.</h3>
<p>Que cada <strong>pá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és.</p>
<p>Si le cambias el <strong>diseño de una home</strong> al de una página interior con diferente forma o color, va a creer que es una <strong>página</strong> de anuncios (como las de las páginas de películas) y va a cerrar tu <strong>web</strong>.</p>
<h3>14) Cabeceras</h3>
<p><strong>Diseña</strong> pensando que necesariamente deberá haber cabeceras <strong>h1,h2,h3 y listados ul o ol.</strong></p>
<p>Ten en cuenta que como <strong>diseñ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írate en lo existente.</h3>
<p>Navega, inscríbete a listas de correo de <strong>diseñadores</strong>, observa los <strong>diseños</strong>, los procesos, investiga, siente curiosidad, pregunta. Nunca te apalanques, es el pan de tus hijos.</p>
<p> </p>
<p><strong>Recomendación personal:</strong> usa <strong>Photoshop</strong> para el <strong>diseño de tus webs</strong>, es la herramienta más fiable puesto que puedes trabajar en tiempo real tal y como va a verse tu <strong>página</strong> en los navegadores. Además, trabaja en capas, igual que <strong>HTML</strong></p>
<p>Hasta aquí nuestros consejos. <strong>Insistimos en que te documentes</strong> más a fondo sobre este tema, porque es muy importante para ampliar tus conocimientos y para que tu trabajo sea óptimo.</p>
<p>Eso si, no olvides tu toque mágico, eh?</p>
