Tipografía y Legibilidad en proyectos web

Podemos establecer que en cualquier proyecto de carácter gráfico (web, impreso, editorial, etc) la imagen y el texto conviven en niveles paralelos y en dinámicas perceptivas diferentes, y que de la interacción de ambas es de donde nace el buen diseño.

Leer más...

Tips para el diseño de sitios web responsivos.

¿Qué es exactamente y qué hace a un sitio web que sea responsivo? El diseño Web Responsivo es el diseño que se ajusta al usuario, permitiendo que pueda tener una gran experiencia y acceso al contenido independientemente del dispositivo, resolución y/o explorador en que esté navegando.

Leer más...

Tutorial: Slider web que cambia de imagen arrastrándola con el dedo.

Los Sliders son esos contenedores de imágenes rotando felices por la vida que comúnmente encontramos en los sitios web, estos se han convertido en un elemento importante, ya que mediante su uso nosotros podemos destacar contenido, utilizar banners para llamar tu atención y hacer que estos estén rotando, un claro ejemplo de esto es el banner principal que tenemos en nuestro home.

Leer más...

Adentrandonos al diseño web responsivo: Layouts Fluidos. 

Imagina un mundo mágico en el que los diseñadores web y las resoluciones de dispositivos en los que se desplegara la página convivan en armonía, una sola web para gobernarnos a todos, una web que se adapte a las necesidades del medio en el que se requiere desplegar esa página, ¿suena como una utopía verdad? pues esa utopía que asemeja una visión loca, tomada de la mente hippie de John Lenon es una realidad, bienvenido al mundo del diseño responsivo.

Leer más...

Consideraciones a tomar al momento de diseñar tu sitio web móvil.

Así es que decidiste aventurarte a crear tu sitio web móvil, ¡muy bien! con el mercado de los Smarthphones a la alza, la gente que navega por internet en estos dispositivos va creciendo hasta tomar cifras importantes, así que es tiempo de comenzar a pensar en crear una versión optimizada para dispositivos móviles de nuestra pagina web.

Consideraciones para una web mobile

¿Qué es lo que vamos a aprender en este articulo?, aquí no vamos a encontrar un tutorial que te de el código para copiar, pegar y tener lista tu pagina web, no señor, este artículo va mas allá, es una serie de tips y consejos que te van a servir para tener una mejor visión de lo que necesitas para crear tu sitio web, ya que aquí encontrarás consejos a seguir que harán de tu sitio web móvil un mejor lugar, un lugar feliz al que todos podrán acceder rápidamente desde su celular.

Leer más...

Usabilidad "Like a Boss"

Todos hemos oído el término de usabilidad, es algo que ha permeado nuestras vidas internetísticas desde tiempos inmemoriales, y aún cuando es uno de los aspectos más importantes al momento de realizar cualquier sitio web, ¿qué tanto realmente entendemos el término de usabilidad?

Usabilidad

Por medio de este pequeño artículo revisaremos lo que es la usabilidad, desde su concepción clásica pasando por nuevos factores que debemos de considerar hoy en día viendo qué es y cómo ha ido evolucionando la usabilidad en estos últimos años.


Usabilidad 101

Empecemos viendo de un modo breve el concepto de usabilidad:

Usabilidad realmente sólo significa que algo funcione bien: que una persona de habilidad y experiencia promedio (o a veces más baja) pueda hacer uso del objeto –ya sea un sitio web, un jet o una puerta giratoria- para el propósito que se creó sin que se frustre. Steve Krugg, 2001. Don’t make me Think

Pa pronto, cuando hablamos de usabilidad, nos referimos a hacer que las cosas funcionen bien y sean fáciles de usar, haciendo que el usuario obtenga el comportamiento esperado de lo que está usando.

Leer más...

Creando un efecto Parallax con jQuery, HTML5 y CSS3

Hace poco publicamos un tutorial de un efecto "Parallax" con CSS3 (realizado por el buen Edgar Parada). Como ya sabemos, en desarrollo y diseño web, un mismo resultado (independientemente de lo que estemos haciendo) lo podemos obtener de muchas formas diferentes, por lo que en esta ocasión haremos un pequeño tutorial de Parallax pero ahora hecho con jQuery, HTML y CSS.

Leer más...

Los efectos de SOPA sobre el diseño gráfico

La semana pasada fue una semana de cambios que hasta hace poco no se creían posibles. Una iniciativa del gobierno estadounidense amenazaba con acabar con Internetz del modo en que lo conocemos, fue tan grande el cambio que se proponía, que propició que sitios de la importancia de Google y la Wikipedia mostraran su descontento por medio de protestas en su sitio. En el caso de Google, fue un link que llevaba a una firma de peticiones para detener la iniciativa, en el caso de wikipedia, fue un cierre total en su servicio por un día. ¿Pero de qué trata esta iniciativa y cómo es que nos afecta? Por medio de éste artículo trataremos de explicar un poco de qué trata SOPA y cómo nos afecta a los diseñadores.

¿Qué es SOPA? Un poco de contexto

 

SOPA, por sus siglas en ingles Stop Online Piracy Policy, es una iniciativa de ley iniciada por el Senador Lamar Smith, que según el gobierno de Estados Unidos busca el ayudar a la lucha contra el infringimiento de copyright al expandir las facultades del gobierno para actuar.

Anteriormente, el modo de acusar a un sitio de infringimiento de copyright era el siguiente: La compañía dueña del copyright acusaba al sitio, si el sitio se encontraba hospedado en un servidor dentro del área de estados unidos, se procedía a actuar en contra del dueño del sitio. Aquí hay dos puntos clave que hay que aclarar:

- La jurisdicción del gobierno terminaba al emprender acciones legales en contra del dueño del sitio, sin perjudicar a un sitio aledaño o afectando a alguien más.


- Si el contenido con copyright era subido por algún usuario del sitio y no el dueño, el sitio podía ampararse gracias a una ley denominada Digital Millennium Copyright Act, que básicamente dice que el sitio no es culpable del contenido que los usuarios suban, siempre y cuando al momento en que haya alguna queja por parte del dueño de los derechos de autor, se elimine el material que tenga copyright.

Leer más...

CSS y @font-face para el uso de fuentes tipográficas en diseño web.

Uno de los principales obstáculos al que nos enfrentábamos hace algunos años al diseñar sitios web era la pequeña cantidad de fuentes tipográficas que teníamos a nuestra disposición para desarrollar sitios que pudieran ser vistos en cualquier navegador. Las famosas "Web-Safe Fonts" eran un grupo de 18 fuentes tipográficas que venían pre-instaladas en la mayoría de las computadoras, por lo que teníamos que hacer uso de estas para estar seguros de que cualquier navegador podría ver nuestras páginas de la misma forma y con las mismas fuentes que como las habíamos imaginado a la hora de diseñar.

 

CSS y @font-face para el uso de fuentes tipográficas en diseño web.

 

Esta limitante nos orillaba a hacer uso de recursos o técnicas en caso de querer diseñar con fuentes distintas a las "web-safe fonts", podíamos por ejemplo utilizar imágenes en lugar de texto o recurrir al uso de Flash, teniendo claro que esto va en contra de los estándares web, haciendo a estos textos no seleccionables, inaccesibles e imposibles de identificar e indexar por los buscadores.

 

Si tenemos en cuenta que más del 80% del contenido de internet es información escrita, nos damos cuenta de la importancia de la tipografía dentro del diseño, desarrollo y creación de sitios web. Y hablamos de esto no solo por el carácter estético que la tipografía representa, si no por su función de comunicar con claridad manteniendo leibilidad así como congruencia con la personalidad y presencia de la marca o producto que representa (Macro y Micro tipografía).


Dicho lo anterior, y si nuestro objetivo es hacer buen uso de la tipografía  en nuestros sitios pero sin tener la limitante de un número reducido de fuentes tipográficas, la mejor opción es el uso de @font-face, una opción de CSS que nos permite definir una familia tipográfica y ligar el texto de nuestro sitio a la fuente que hayamos subido a nuestro servidor, en lugar de ligarlo a las fuentes pre-instaladas de la computadora. Hemos de aclarar que @font-face no es una función nueva en CSS3 y que incluso ya tiene varios años que se se viene utilizando, aunque con el pequeño inconveniente de incompatibilidad con algunos navegadores web, ya que no todos ellos soportaban o reconocían esta función. Sin embargo a partir del 2009 este ha dejado de ser un problema ya que la mayoría de los navegadores como Safari, Chrome, Firefox, Opera y Explorer (e incluso navegadores de dispositivos móviles) son totalmente compatibles con @font-face.

Leer más...

Página 1 de 6