Diseño de páginas web en Bilbao y Bizkaia

Archivo de Categorías: Diseño Web

  • 0
5 webs donde descargar fuentes tipográficas gratis

5 webs donde descargar fuentes tipográficas gratis

Es el deber todo diseñador gráfico disponer de una amplia gama de fuentes tipográficas donde echar mano. Esto, que es fundamental para la creación de logotipos y el material impreso publicitario, vale también para la maquetación de páginas web. Porque diseñar tus páginas con una tipografía clásica como Arial, Times New Roman o Comic Sans da mala imagen, la de un diseñador incompetente que no cuida el acabado final de sus trabajos y que no conoce las diferencias entre una fuente con serifas o sin serifas, caligráfica, elegante, decorativa o en versalitas. Por supuesto, no basta con limitarse a las fuentes que te vienen instaladas con Windows por defecto. Debemos buscar la tipografía que mejor se adapte a los valores que queremos transmitir: rigor, fiabilidad, creatividad, ambiente lúdico y relajado, etc.

Cada fuente tipográfica tiene una personalidad y representa unos valores, de ahí la importancia de su elección

Aquí os presento 5 páginas web donde podéis descargar fuentes tipográficas gratis (y otras muchas cosas más):

1-Font Squirrel

Font Squirrel

La web de la simpática ardilla es una de mis preferidas. A decir verdad, no es la que mayor número de fuentes tipográficas alberga en su archivo, pero su interfaz amigable y sus múltiples opciones hacen de ella un sitio ideal, casi obligado, para guardar en nuestros favoritos. Cuenta con un buscador de fuentes y luego ofrece la posibilidad de buscar por etiquetas o tags, además de otras categorías como recientes o más populares.

Una utilidad que me gusta mucho de Font Squirrel es su Webfont Generator, donde podemos subir una fuente de nuestro disco duro en TTF (TrueType Font) u OTF (OpenType Font), las más usadas en el entorno Windows, y él nos la convierte a otros formatos para web como EOT, WOFF y SVG. Esto es especialmente útil cuando utilizas la propiedad de CSS 3 @font-face.

Ahora también incluye un Identificador de Fuentes a imitación del ínclito WhatTheFont. Asimismo, dispone de un blog y de un foro donde resolver dudas; ambos, por supuesto, en inglés.

Quizás su mayor defecto y lo único que se echa en falta es el típico visor para poder escribir el texto deseado y mostrarlo en las diferentes tipografías a medida que van cargando, algo que siempre ayuda a hacerse una mejor idea de la composición que tenemos en la cabeza.

Sus fuentes son 100% gratis para uso comercial, como recalcan en su logo.

2-Megafuentes

Megafuentes

Funciona muy parecido a Font Squirrel, aunque tiene menos utilidades. La búsqueda es, igualmente, por etiquetas, y tiene una categoría de novedades y unas fuentes destacadas en primera página. La ventaja es que está en español. Le falta, asimismo, el visor. Las fuentes son TrueType y OpenType.

3-Urbanfonts

Urbanfonts

Esta web es muy completa, y su catálogo de fuentes es de lo más heterogéneo y diverso que se puede encontrar. Las tipografías gratuitas (también tiene de pago, las premium) están ordenadas alfabéticamente y también por categorías (Fuentes nuevas, Nuestras favoritas, Top 100), básicas, script, display/decorativas, no latinas y miscelánea. A diferencia de las anteriores páginas, Urbanfonts sí cuenta con un visor de texto, y además muy completo, pues te deja cambiar el color del texto y el del fondo, así como aumentar o disminuir el cuerpo de letra.

Urbanfonts no sólo permite descargar fuentes tipográficas, sino también un variado repertorio de dingbats (símbolos) y vectores. Otra web que tampoco debería faltar en nuestros favoritos.

4-Font River

Font River

Es muy similar a las anteriores. En su header muestra tres secciones destacadas con Fuentes nuevas, Lo más popular y al Azar. Más abajo establece una serie de categorías: básico, símbolos, fantasía, extranjero, gótico, fiestas, escritura y tecno. No tiene visor de texto, pero sí mapa de caracteres. Presume de tener 20.000 fuentes  y dingbats descargables para Windows y Mac. Permite descargar (en TTF) y donar al autor. Está en varios idiomas; entre ellos, español.

Sus fuentes son gratuitas para uso personal.

5-1001 Free Fonts

1001 Free Fonts

Como su nombre indica, esta web posee una gran colección de fuentes. Están ordenadas alfabéticamente y por etiquetas. Al igual que Urbanfonts, cuenta con un visor de texto, aunque menos sofisticado (éste no permite, por ejemplo, cambiar el color de fondo). En cada fuente se te informa de si es gratuita, o sólo para uso personal (en cuyo caso puedes adquirir la licencia comercial), de dominio público, etc. También permite hacer una donación al diseñador, cosa que seguro te agradecerá.


  • 1
Convert Image

ConvertImage, una alternativa a Photoshop

En Internet siempre hay alternativas para los que no saben utilizar Photoshop o no se pueden permitir pagar su licencia. Una de ellas es ConvertImage, un editor de imágenes gratuito que es como un pequeño cajón de sastre donde puedes encontrar casi de todo. Esta página web ofrece múltiples utilidades de retoque fotográfico, y todas ellas sin tener ningún conocimiento de edición y a golpe de click. Interesante, ¿verdad?

Convert ImageUna de sus principales aplicaciones, como indica su nombre, es convertir una imagen a diferentes formatos. Para ello sólo tenemos que marcar el formato deseado (JPG, PDF, PNG, BMP, GIF, ICO, PSD, TIF o PCX) y seleccionar la imagen. Tan fácil como eso. Pero ConvertImage tiene muchas más herramientas online. Su variado repertorio de gadgets nos permite:

  • Comprimir fotos a JPEG (una opción más para optimizar la velocidad de carga de nuestro sitio web).
  • Crear un favicon de 16×16 px.
  • Crear fotos de carné o pasaporte (8 imágenes de 10×15 cm), para lo que sólo tienes que subir una foto de tu cara.
  • Aplicar filtros y efectos artísticos: blanco y negro, sepia, pop-art a lo Andy Warhol, vieja pantalla de televisión, dibujo a lápiz, etc.
  • Redimensionar, recortar, reflejar y girar la foto.
  • Añadirle una marca de agua.

ConvertImage no es ni pretende sustituir a programas como Photoshop o Gimp, pero es una alternativa interesante para quien no se maneje bien con los programas de retoque fotográfico o para quien quiera aplicar un estilo rápido.


  • 0
Diseño Web viejuno, avances en desarrollo de páginas web

Diseño web viejuno: elementos web que quedaron obsoletos

Etiquetas :

Categoría : Diseño Web

Hoy me siento nostálgico y me apetece echar una mirada al pasado. ¿Recordáis cómo eran las páginas web de hace 10 ó 15 años? Uf, cómo han cambiado las cosas. Ahora incluso le dan el Nobel de Literatura a un cantante como Bob Dylan, y David Bowie y Leonard Cohen nos han dejado. Snif, snif. El diseño web, como cualquier otra disciplina artística, y más siendo una profesión estrechamente relacionada con la informática y la tecnología y el universo siempre cambiante de Internet, ha avanzado una barbaridad. Para los que dimos los primeros pasos en este mundillo allá por el año 2000 y 2001 (¡qué tiempos aquellos!), el desarrollo web que vemos ahora (la maquetación, el código HTML y CSS, la optimización para SEO, etc.) nada o muy poco tiene que ver con lo que se hacía antes. Para empezar, y aunque a algunos les cueste creerlo, ni siquiera existían las redes sociales o los CMS. Todo era muy simple. Internet estaba en pañales, y se abría un inmenso abanico de oportunidades por explorar. No sé si en estos tres lustros hemos ido a mejor (quiero creer que sí), pero lo que está claro es que el panorama ha cambiado radicalmente. Y como siempre ocurre, toca adaptarse.

Si queremos ver y comparar cómo era una página web hace 10 años, tenemos una fabulosa máquina del tiempo que nos permite viajar al pasado. Ya os he hablado en otros post de ella. Se trata de Wayback Machine, una base de datos enciclopédica que guarda el caché de todas las webs antiguas. Pero no hay añoranza que no traiga consigo un inefable sentimiento de vergüenza, pues si observamos cómo era nuestra página hace una década o más, probablemente salgamos horrorizados de los engendros que diseñábamos en aquella época. No es culpa nuestra, era la moda, lo que se llevaba entonces, argüiremos. Igual que la ropa y los peinados imposibles de los locos años 80. Bienvenidos a Mundo Viejuno.

Nos sorprendería ver ahora cómo era el diseño web de hace 15 años; stricto sensu, casi ni se puede decir que hubiera diseño, más bien falta de

En fin, paso a enumerar algunas de esas aberraciones estéticas que hasta hace no tanto tiempo aún se usaban en el diseño y en la maquetación de páginas web:

Gifs animados

Gifs animados. Diseño Web

Un clásico y una de las cosas más horteras y espantosas que se han hecho nunca en el diseño web son los gifs animados. Los había de todo tipo: iconos, letras, banners (sí, lo confieso, yo también diseñé en mis comienzos un banner animado con ImageReady de Photoshop), contadores de visita… Incluso había sitios web dedicados a proveer a otras páginas de estos elementos (y puede que siga habiéndolos). Algunas webs que abusaban de ellos parecían máquinas tragaperras o paintballs demenciales no aptos para epilépticos. Nadie en su sano juicio los usaría hoy en día, salvo para hacer memes o alguna tontería por el estilo. Pueden resultar simpáticos y hasta graciosos, sí, pero a fe mía que no los echaremos de menos.

Animaciones Flash

Animaciones Flash, diseño web

Durante mucho tiempo Flash fue el programa de animación por excelencia, y no se podía pensar en una web dinámica sin él. Las intros en Flash estuvieron muy de moda, y nosotros mismos las diseñábamos para algunos de nuestros clientes. Obviamente, ya entonces era sabido que los motores de búsqueda no podían indexar su contenido, por lo que en tales casos incluíamos una web paralela en HTML. Aun así, el tiempo ha acabado con su hegemonía, y hoy en día ya ningún diseñador serio lo usa. No es sólo que no fuera indexable y, en consecuencia, veneno para el SEO, sino que además presentaba graves deficiencias de seguridad. Los jQuery y los Canvas de HTML 5 son actualmente los medios más utilizados para crear animaciones. Ahora bien, ¿qué pasa con todo el tiempo que invertimos en aprender a usar Flash y Action Script? ¿Quién nos devolverá todas esas horas de sesudo estudio?

Marquesinas

Marquesinas animadas, diseño web

Siguiendo con el tema de las animaciones, hubo un tiempo (sí, suena muy remoto, como la frase introductoria de un cuento de hadas) en que era muy habitual ver texto en movimiento en una página web. Eran las llamadas marquesinas, una especie de eslogan o mensaje publicitario que se quería resaltar moviéndolo de un lado a otro de la pantalla; algo de lo más cutre, obvia decir. Actualmente es muy raro encontrárselas, aunque me han contado que siguen existiendo. ¿Será como el mito del Yeti o Bigfoot?

Contadores de visita

Contadores de visitas

Cuando nadie o casi nadie usaba Google Analytics, lo más común era toparse con contadores de visita. Los había de todos los tamaños, formas y colores; también, cómo no, con ortopédicas animaciones gif. Hace muchos años que dejaron de usarse, aunque aún es posible encontrarse alguno en blogs personales. Toda una reliquia del mal gusto.

Banner en la cabecera

Banner de cabecera

Casi todas las páginas web que veías hace no tantos años tenían una estructura similar; todas, sistemáticamente, incluían un banner en la cabecera. Este banner no era otra cosa que un montaje fotográfico, ya fuera estático o dinámico, con el logotipo integrado. Dicho banner, por lo general, ocupaba todo el ancho de página y una altura de unos 150 ó 200 px, algo que ahora se antoja muy escaso. Por supuesto, esta práctica ha caído en desuso. La inmensa mayoría de las páginas web actuales, muchas con la firma de WordPress, llevan el logo, los datos de contacto y el menú en la cabecera, y justo debajo un slider o rotador de imágenes con fotos de gran amplitud que van desgranando las principales categorías de la web.

Menús laterales

Menú lateral, diseño web

Ya casi no se ven, pero haberlos, haylos. Hace años era mucho más común encontrarse con menús en los laterales, a modo de sidebar. No son muy prácticos que digamos, especialmente cuando hay elementos desplegables y tapan el texto principal, por lo que, en aras de la usabilidad y navegabilidad, los menús horizontales han acabado imponiéndose.

Menús con botones web

Botones para menús de web

Sería, tal vez, porque Photoshop venía con una lista de estilos predefinidos para botones web o por cualquier otra razón desconocida, pero el caso es que durante mucho tiempo los menús con botones (por lo general, redondeados y con un degradado de fondo, como píldoras o grageas) se hicieron harto populares. Algunos, incluso, tenían otras formas más personalizadas y variopintas adaptadas a la temática, como tuberías o televisiones. Hoy, por suerte, y salvo en contadas excepciones y desde luego mucho más elaborados, es muy difícil volver a verlos.

Tablas anidadas

Tablas anidadas

¿Os acordáis de cómo eran las webs al comienzo, pero muy al comienzo de Internet? Todas estaban hechas con tablas anidadas. Huelga decir que desde hace bastante tiempo esta arquitectura está más que desfasada, y que primero los divs o capas sustituyeron a las tablas, y luego, con la irrupción de HTML 5, fueron el header, el nav, el section, el article, el aside y el footer. Lo más gracioso de dichas tablas es que apenas tenían estilos CSS, y era bastante frecuente ver tablas con bordes gruesos sin definir, a imitación de un biselado. ¡Qué estilazo, mamma mía!

Marcos o frames

Marcos, frames. Diseño Web

Esto sí que es un vestigio de una civilización extraterrestre. Los marcos o frames dejaron de existir hace tanto tiempo que algunos empiezan a dudar de si alguna vez de verdad existieron. Además de crear un efecto feísimo en la página web al compartimentarla de una forma tan poco natural, eran muy perniciosos para el SEO. Una joyita del vintage, vamos.

Resolución 800×600 px con color de fondo

Resolución 800x600px, diseño web

Hace 15 años las pantallas de los ordenadores eran mucho más pequeñas. Vaya, que ni siquiera eran planas, y pocas pasaban de 14 pulgadas. Por esa razón, las primeras páginas web se diseñaban para una resolución de 800×600 px, unas medidas que ahora resultarían ridículas. Seguro que aún quedan por ahí páginas obsoletas que no saben lo que es el diseño responsive, y que contempladas con un monitor de 20 pulgadas se verán microscópicas, más o menos como Mario Bros cuando se hace diminuto. Para más inri, muchas de estas páginas se diseñaban con una tabla principal que ocupaba el 80% del ancho de la pantalla y un fondo de un color cualquiera, con lo que su contenido quedaba aún más canijo.

Enlaces sin estilos

Links, enlaces sin CSS

Así es. Antiguamente los links no solían tener estilos CSS, con lo que hacer clic resultaba una acción de lo más monótona. Los enlaces eran azules por definición y morados cuando habían sido clicados. El a:hover prácticamente ni existía.

Títulos larguísimos con puntos y barras

Cuando el SEO casi ni había nacido, el title de las páginas web solía iniciarse y finalizarse con una sucesión de puntos y barras al más puro estilo Tetris. Aparte de eso, nadie ponía un límite al número de caracteres. Los títulos eran algo tal que así:

.:: Abrelink: diseño web y diseño gráfico en Bilbao || Posicionamiento web Bizkaia || Logotipos Vizcaya .::

Fuentes tipográficas grandes y estrafalarias y sin formato o con estilos planos

Textos estrafalarios

¿A que pensasteis que diría “bizarras”, eh? Pues no. Me resisto a continuar con esa infame tradición de deformar el significado de este popular vocablo. Bueno, a lo que iba. Cuando las hojas de estilo en cascada CSS eran sólo una promesa de lo que ahora son, la mayoría de los textos en la web eran, cómo decirlo de una manera sutil, bastos, toscos, sin pulir. En una palabra, horrorosos. Básicamente, había dos tipos de texto: el plano y sin estilo, con la fuente Arial o Times New Roman, sin justificar los párrafos y sin apenas interlineado, y cuerpo de letra de 12 puntos; y el de letras enormes y coloridas y tipografías barrocas o futuristas creadas con Photoshop. La pesadilla de cualquier diseñador gráfico.

Colores a cascoporro

Colores CSS antiguos diseños web

Siguiendo con lo dicho al hilo de los textos, la web, por aquellos años de inocencia creativa, estaba inundada de colores, como un barco de Greenpeace o una carroza del Día del Orgullo Gay. Uno, que se formó como diseñador gráfico antes que como desarrollador web, sabe que combinar más de dos colores o más de dos fuentes tipográficas en un mismo documento es casi un atentado contra el buen gusto, pero claro, el decálogo del diseño no estaba muy extendido en aquella época, y así proliferaron todo tipo de webs psicotrópicas, como un viaje lisérgico o un caleidoscopio mareante y sin límites.

Texto blanco sobre fondo negro

CSS estilos textos antiguos diseños de páginas web

¿Hay algo más cutre y doloroso para la vista que esto? Pues, lo creáis o no, fue todo un boom.

Y vosotros, ¿echáis de menos algo de aquellas webs primigenias, los incunables de Internet?


BUSCAR

Suscríbete al Blog

Introduce tu email para estar al tanto de las novedades.

ABRELINK EN TWITTER