Categoría: Diseño de páginas web

Recursos gratuitos para el diseño de páginas web

Recursos para diseñadores web

Existen multitud de recursos gratuitos para mejorar el diseño de páginas web, por ejemplo un paquete muy interesante lo facilita Inky Deals, una destacada agrupación de diseñadores web. El paquete incluye más de 400 elementos, como iconos, botones, texturas, plantillas y muchos otros con diferentes formatos, y licencia para sitios web particulares y comerciales. La oferta es una forma de autopromoción que, sin embargo, nos puede facilitar la tarea en determinados diseños y desarrollos. No obstante, para localizar iconos gratuitos, que sin duda es uno de los elementos más demandados, destacamos el buscador Flaticon desarrollado por el equipo de Freepik. En el buscador, que no exige registro previo, podemos seleccionar entre más de 15.000 iconos y fuentes, con distintas resoluciones (formatos vectoriales o PNG) los que mejor se adapten a nuestro proyecto.

Nueva versión de WordPress

Logotipo WordpresYa disponemos de la última versión de este gestor de contenidos con importantes novedades. Si su sitio web está desarrollado con WordPress es el momento de actualizarse a la versión denominada Charlie Parker. WordPress 3.8 presenta un sistema de administración más limpio e intuitivo, y se ha mejorado el sistema de gestión de widgets. La versión Charlie Parker tiene más capacidad para adaptarse a los monitores de los diferentes dispositivos, como tabletas o smartphones, lo que facilitará el trabajo de los diseñadores web para desarrollar sitios responsive administrados con el popular CMS, que hoy soporta en el mundo, cerca del 20% de las páginas web.

En un par de meses es previsible que esté disponible WordPress 3.9, pero para conocer mejor las características de esta versión puede informarse en WordPress.org

Más recursos para el diseño de páginas web

Los diseñadores web disponen de una amplia paleta de recursos que simplifican el diseño de páginas y aplicaciones. Son elementos que permiten mejorar los diseños y aligerar la carga de trabajo del diseñador y el programador. En esta ocasión traemos dos muy diferentes pero ambos interesantes y gratuitos.
 

En primer lugar Buttons, una herramienta que facilita la creación de botones con CSS. Una librería para diseñar botones de una forma cómoda y flexible, dando acceso a variados estilos que nos permite crearlos con diferentes formas y colores, prescindiendo del sistema tradicional de doble imagen, con el resultado de páginas más ligeras, que se descargan con mayor rapidez.

El segundo es Typeplate, un paquete que simplifica el trabajo con las tipografías, con soporte para los navegadores web más utilizados y estilos que permiten presentaciones de buena calidad. Los contenidos en Internet mayoritariamente son contenidos textuales, por lo tanto no hay que olvidar que las tipografías están en la base de un buen diseño web.
 

¿Cómo puedo mejorar el diseño de mi página web?

Antes de actuar, para mejorar un sitio web: el diseño gráfico, el diseño de navegación y el resto de elementos relevantes, recomendamos realizar una detenida revisión. Son varios los factores que conviene estudiar, pero como es una consulta que se nos hace con alguna frecuencia, primero hay que decir que lo fundamental para la calidad final de una página web, es el interés de sus contenidos. De un sitio web pobre un diseñador podrá mejorar diferentes aspectos de la página que permitan obtener un resultado más vistoso, pero si realmente queremos competir en Internet y aspiramos a que nuestro proyecto obtenga la consideración de buscadores como Google, repito: no podemos dejar de lado la calidad, cantidad y actualidad de nuestros contenidos, y sobre esa base podremos mejorar o desarrollar nuestra página web.

No queremos desanimar a nadie, pero no siempre tiene sentido mejorar una página web. Cuando nuestro sitio tiene muchos años y está desarrollado con tecnologías obsoletas, o utiliza diseños trasnochados, es probable que lo más aconsejable sea descartarlos y hacer una nueva página. Conozco casos en los que se aferran a su web por razones diversas, intentando parchear el sitio, sin entender que trabajar con determinadas páginas web impide obtener buenos resultados, además de encarecer el proyecto, ya que las limitaciones y lo farragoso del código y el diseño multiplicarán las horas de trabajo. Si es este el caso, aproveche para renovar su imagen en Internet. Aunque no siempre es fácil trasladar esta idea con proyectos donde en ocasiones, lo más interesante puede ser el propio dominio, la antigüedad de años que le haya permitido alcanzar, aunque sea por el respeto a las canas que muestran los buscadores, un cierto posicionamiento. Al margen de la calidad de la página web, la continuidad de un proyecto en Internet es un valor en sí mismo, y por lo tanto si mantenemos el dominio, siempre que haya continuidad en la actividad, renovar o cambiar una página web, en ningún caso nos hará perder posicionamiento si no muy al contrario: si mejoramos el resultado, mejoraremos también el posicionamiento.

Por contra, hay páginas web con buena calidad o calidad suficiente, que con unos ajustes certeros, a veces relativamente simples, pueden actualizarse ostensiblemente, a nuestros ojos, los ojos de los usuarios y, no menos importante, a “los ojos” de los buscadores. De cualquier forma, para mejorar un sitio web, conviene revisar y actuar sobre varios elementos.

Claridad y precisión
Como en todo, una página web tiene que ser clara e intuitiva. Tiene que entenderse la idea central que le da forma: el objetivo principal de la página, la estructura organizativa y de navegación. Hágase preguntas del tipo: ¿Para qué y por qué tengo o necesito una página web? ¿Cual es la función de mi sitio? ¿A quién me dirijo y qué espero lograr? Según sean las respuestas, repase los apartados del sitio, elimine los que no sean necesarios o puedan distraer al usuario. Revise los textos e imágenes para que sean claros y concisos. Corrija la redacción y evite la sobrecarga de elementos, las distracciones gratuitas como música, animaciones sin sentido, etc.

Al mismo tiempo, si la actividad no se limita a Internet, asegúrese de que existe una correspondencia directa entre la imagen on-line y la imagen off-line del proyecto, o la empresa en cuestión.

Hay que prestar una atención especial al sistema de navegación para que resulte fácilmente comprensible, con un menú principal bien organizado y previsible. Si el sitio web tiene muchos apartados, es recomendable utilizar menús de dos o tres niveles que permitan entender como se ha organizado el sitio antes de sumergirse en él. Piense en los visitantes que acceden por primera vez y no conocen su proyecto, deles facilidades para que entiendan y encuentren lo que buscan. Es importante que los títulos sean descriptivos, utilice las negritas y cursivas con moderación y criterio. Y siempre que sea posible utilice nombres de archivos y URL comprensibles y amigables.
Es importante también que las páginas se descarguen con rapidez. Optimice los contenidos, especialmente las imágenes y extras para que el peso total sea razonable.

Confianza
En principio, todas las páginas web deberían tener un apartado explicativo indicando quiénes son los promotores del sitio, un Quiénes somos, que ponga “cara” y facilite una dirección y un teléfono de referencia. Son multitud los sitios web que como fórmula de contacto se limitan a un formulario, o una dirección electrónica, y el número de un teléfono móvil, algo que obviamente no ofrece confianza ni garantías sobre la solidez del proyecto.

Diseño responsive
A demás de un buen diseño gráfico, que convierta su página web en un lugar atractivo, es cada vez más recomendable utilizar un diseño móvil (responsive). La revolución móvil se ha consolidados (más de la mitad de los accesos a Internet ya se hacen desde dispositivos móviles) y hoy es fundamental que los sitios web sean “adaptativos”, es decir que tengan una arquitectura móvil que les permita adaptar su diseño y la disposición de sus elementos en función del monitor en el que se muestren. Los elementos que en un monitor grande se distribuyen horizontalmente, en la pantalla de un teléfono móvil se organizaran verticalmente, adaptándose a las dimensiones de estos dispositivos.

Asegurar un correcto etiquetado del sitio
Por último, pero no menos importante: Asegúrese de que su página web está correctamente etiquetada. Revise las etiquetas meta title, description y keywords de cada uno de los apartados (no se conforme con utilizar las mismas para todas las páginas del sitio), revise igualmente las etiquetas header h1, h2... e incluya textos descriptivos que identifiquen sus imágenes. Aunque lo fundamental es interesar a los usuarios del sitio, no es menos importante facilitar la información necesaria, adecuada y precisa, para los buscadores que, como sabe, son la principal puerta de entrada a su página web.

Diseño de páginas web adaptado a diferentes dispositivos

Cada vez más el acceso a Internet y la visita de páginas web se hace desde dispositivos diversos. Ha pasado el tiempo en que los diseñadores web podían limitarse a cuidar la visión de sus diseños en ordenadores portátiles o de escritorio, con tres o cuatro resoluciones. En poco tiempo, la mayoría de los accesos a su página web personal, o a la web de su empresa, se harán desde dispositivos móviles. Esto significa que habrá mayor número de dispositivos, sistemas de acceso, navegadores y resoluciones. Hasta ahora algunas empresas han resuelto esta diversidad creciente realizando versiones específicas de su sitio web para algunos dispositivos como iPhone. Sin embargo la generalización del uso de tabletas y todo tipo de terminales, está imponiendo en el diseño web una arquitectura que permita adaptarse a los diferentes dispositivos y resoluciones, el denominado Responsive Web Design, que podemos traducir al castellano como: Diseño web adaptable, el diseño web con capacidad de respuesta para ajustarse a los diferentes terminales en los que se muestre.
Diseño web adaptable a diferentes dispositivos

Afortunadamente el diseño web con html y hojas de estilo CSS nos facilita las herramientas para responder adecuadamente a las nuevas exigencias: Las imágenes flexibles y, sobre todo, las Media Queries del CSS3, basadas en las Medias Type del CSS2, permiten adaptar el diseño al tipo de navegador y dispositivo que esté utilizando el usuario. Sin embargo, el diseño mediante bloques reajustables aún impone algunas limitaciones que, probablemente, la experiencia no tardará en resolver. De momento podemos hacer hojas de estilo a medida para el iPhone, los teléfonos con Android y similares: Ajustes que amplíen el espacio activo de los enlaces cuando se muestren en pantallas de teléfonos móviles, ocultar elementos que no sean imprescindibles para el conjunto y simplifiquen la navegación en este tipo de dispositivos, e incluso aumentar el tamaño del texto.

Además hay que celebrar la aparición de nuevas herramientas online que simplifican la labor del diseñador, como Screenqueries una utilidad gratuita que, aunque todavía está en fase beta, resulta muy práctica para comprobar la respuesta de estos diseños con diferentes resoluciones. Para probar, una vez que tenemos planteado el diseño, basta con introducir la URL y ver como se adapta a cada caso.