Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

CSS3, Fuentes Web e Íconos

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
All About Trends in Web Design
Video in Web Design

Spanish (Español) translation by RRGG (you can also view the original English article)

Tenemos mucha suerte de estar trabajando en una industria como la industria web. Hoy en día, tenemos tantos nuevos consejos y técnicas y maneras de trabajar todo el tiempo. También tenemos mucha suerte que estamos en una época donde, mientras se introducen estas nuevas tecnologías, nuestros buscadores pueden (en la mayoría de las partes) ser bastante rápidos de alcanzar, así que vamos a poner estas nuevas tecnologías en nuestros diseños (y jadear, ¡incluso en el trabajo del cliente!) más que nunca antes.

CSS3 es una de esas nuevas increíbles tecnologías. Junto a esto han venido un montón de cosas que hacen nuestras vidas más fáciles tanto como diseñadores como desarrolladores. Mientras nuestros buscadores mejores, podemos ser más aventureros con nuestras ideas y diseños que creamos.

Sin embargo, también estamos en una época donde estamos diseñando para más usuarios, dispositivos, buscadores y tecnologías más que nunca antes. Antes de era de los teléfonos inteligentes, la tableta y la nevera conectada al internet solo había una manera de acceder al internet, a través de una computadora normal. Y la resolución de pantalla más común para ese momento era 640px x 480px, ¡o 800px x 600px!

Hoy en día tenemos miles de diferentes dispositivos, tamaños de la pantalla y contextos que esperamos atender. Si solo vemos las pantallas y tamaños de las pantallas que tenemos para atender, tenemos miles de dispositivos móviles (teléfonos móviles, teléfonos inteligentes, tabletas, libros net, etc.) Pantallas de Retina, pantallas estándar, pantallas de alta definición, pantallas pequeñas y grandes, y mucho, mucho más.

Mientras que puede ser muy difícil, la cantidad de cosas que tenemos que atender solo se volverá más y más grande, así que es algo a lo que tenemos que adaptarnos y de lo que aprender.


Nuestro Proceso se Debe Adaptar

¿Y qué significa esto para nuestro proceso? Es una tarea imposible probar tu sitio web en cada dispositivo hecho donde tu sitio sea visto posiblemente. En vez de eso, tenemos que efectivamente cambiar nuestro proceso para lo mejor. Estoy seguro, como desarrollador, que has tenido que hacer esto por ti mismo, y es lo mismo como un diseñador.

Podríamos no tomar pasos extra para mejoras nuestro proceso de diseño para mejor. Un ejemplo de esto es sentirse más cómodo iterando ideas de diseño para tipografía (por ejemplo) en el buscador, rápidamente. Lo que sea que sea, te garantizo que tu proceso podría necesitar ajustarse un poco.


CSS3

Aunque se sienta como que CSS3 es una cosa más reciente, con la adopción de muchas técnicas populares de CSS3 siendo usadas en los últimos par de años, los borradores más recientes para CSS3 fueron tan tempranos como en 1999, ¡catorce años atrás!

A diferencia de las especificaciones CSS anteriores (como CSS2), CSS3 se dividió en varios módulos - ya mediados de 2012 se publicaron más de cincuenta módulos. Cuatro de estos en particular han sido publicados como recomendaciones, donde el módulo ha pasado por una cantidad masiva de revisión y prueba antes de ser recomendado para el uso completo. Los cuatro módulos Recomendados W3C de CSS3 son:.

  • Dudas del Medio
  • Namespaces
  • Selectores (Nivel 3)
  • Color

Otros módulos, tal como "Fondo y Bordes", "Visualización de Multi Columna", "Visualización de la Caja Flexible" están actualmente en el nivel de "Recomendación de Candidato", donde el W3C está feliz con las características ofrecidas de ese módulo.

En este nivel, está pensado que las implementaciones (por buscadores, por ejemplo) deberían dejar los prefijos del buscador que tienen en lugar. Otros módulos que están siendo vistos incluyen "CSS Animaciones", "Transformaciones CSS" y "Efectos de Filtro CSS", pero estos todos están funcionando en el estado de "Borrador Funcional" (como lo están muchos, ¡muchos otros módulos!) y no están muy listos por lo tanto como aquellos con el estado CR.

Sin embargo, junto a los cuatro módulos Recomendados principales W3C, existen muchas técnicas populares de CSS3 que vemos seguidamente en nuestros sitios web hoy en día. Estos incluyen:

  • Gradientes CSS
  • Radio-borde
  • Sombra-de caja
  • Fondos Múltiples
  • Opacidad (rgba)
  • Animaciones y Transformaciones

Veamos a cada uno de estos con un poco más de detalle.

Gradientes CSS

La introducción de los Gradientes CSS ha significado que en vez de usar un fondo de imagen para crear un look en particular en un sitio web, para buscadores modernos puedes usar un CSS3 en vez.

css3-gradients

Esto es increíble ya que guarda el peso de la página y también asegura que estás manteniendo el desempeño al mínimo al no pedir muchas imágenes.

Radio del Borde

El radio del borde significa que ahora podemos incluir bordes redondeados para buscadores modernos en nuestros diseños sin tener que tener que usar imágenes para cada uno. E imagina si tuvieses una imagen de fondo que tuviese un borde, esquina redondeada, gradiente y una sombra - ese tipo de cosas eran una pesadilla en el pasado, mientras que ahora son fáciles de implementar para buscadores que lo apoyen.

css3-border-radius

Si tienes suerte, obtendrás clientes que también entiendan sobre la expansión progresiva, y si no es así entonces puedes explicarlo a ellos y educarlos. En el mundo de hoy en día donde muchas personas poseen teléfonos inteligentes, tabletas y computadoras (o una combinación de eso y más) las personas deberían esperar y entender que los sitios web no están todos hechos para desempeñarse en cada dispositivo o pantalla donde lo vean. Hasta un grado, entenderán para ciertos visuales estéticos para degradas agraciadamente para otros buscadores. ¡Las esquinas redondeadas siendo uno de ellos!

Sombra de caja

Con la introducción de la caja de sombra CSS3, ahora podemos tener sombras para nuestros elementos de la caja. También hay una versión de texto que podemos usar (sombra de texto, si no lo puedes adivinar) para nuestro contenido también.

css3-box-shadow

También tienes la opción de tener tanto un inset como un set estándar de gradiente también, significando que podemos - sí, lo adivinaste - abandonar el uso de imágenes para estos estilos una vez más.

Fondos Múltiples

CSS3 también introdujo a ser capaces de referenciar múltiples imágenes de fondo en nuestro código. Esto es increíble, ya que significa que podemos divertirnos más con ponerle capas a los elementos del fondo encima una de otra para crear efectos bonitos que de otra manera podríamos haber esforzado mucho para recrear en CSS o con una imagen de fondo nada más.

Opacidad (rgba)

Finalmente - desde IE9 en adelante y con todos los otros buscadores modernos, ¡ya no tendremos que crear una imagen de fondo pequeña, repetible y transparente!

css3-opacity

Esto solo fue suficiente para hacer que amara usar CSS3, y simplemente significa que podemos ser libres de usar transparencia en nuestros diseños donde sintamos que es apropiado.

Animaciones y Transformaciones

Las animaciones y transformaciones son increíbles, junto con las transiciones, nos ayudan a añadirle más interactividad en nuestros sitios web. Mientras que estas pueden ser difíciles de mostrar en nuestros diseños, es definitivamente una manera en la que podemos usar CSS3 para nuestra ventaja para traerle vida a los sitios web.


Fuentes Web (@font-face)

La inclusión de la regla @font-face para CSS3 fue brillante para diseñadores, ya que significó que podemos ser un poco más experimentales en la tipografía que usamos en nuestros diseños. En esencia, usar fuentes web ha permitido que los diseñadores tengan más libertad de expresar la creatividad a través de su trabajo.

Por Qué las Fuentes Web son Increíbles

Las fuentes web son increíbles, ya que nos ofrecen una nueva manera de crear sitios web visualmente asombrosos. Existe una amplia variedad de elecciones para las fuentes que podemos usar ahora en nuestros sitios web, sino cientos, mayormente definitivo en miles.

No todos ellos serán increíbles, y existen definitivamente algunos favorecidos por muchos, pero existen muchas joyas que puedes encontrar para usar en tus diseños que se ven muy bien comparadas con algunas de las más viejas fuentes de web seguras.

webfonts-coastalconservationleague

Las fuentes web también ofrecen una manera más segura de trabajar la responsabilidad con nuestros diseños responsivos. ¿Recuerdas el día cuando los títulos "lujosos" fueron creados con fuentes alternativas (que no eran juzgadas como seguras en la web) y fueron puestas como imágenes o fondos de imágenes? Las fuentes web significan que podemos seguramente abandonar esa práctica y dejarla atrás, sabiendo que tendremos hermosos sitios web con fuentes completamente accesibles y escalables.

¿Cómo Puedo Usar Fuentes Web?

Con la introducción de fuentes web y @font.face, unos cuantos servicios surgieron que nos ayudan a implementar fuentes web en nuestros sitios web. Aquellos servicios incluyen:

  • Typekit
  • H&FJ tipografía de la nube
  • Fontdeck
  • Fonts.com
  • Fuentes de Google

E incluso con solo unos pocos servicios, existen muchas maneras de implementar estos en tu proceso de desarrollo. Algunos usan JavaScript y algunos usan puro CSS para cargar las fuentes. Pero qué del flujo de trabajo de los diseñadores, ¿cómo trabajar con fuentes web en maquetas estáticas?

Es un poco difícil, realmente, ya que no hay muchas maneras de integrar las fuentes web que usas con el software de gráficas que podrías usar. Typekit ha recientemente anunciado planes de integrar un Desktop Sync con Adobe Creative Cloud, y empezó rodándolo en usuarios seleccionados.

Debido al Typekit siendo adquirido por Adobe, ahora tienen esta manera de estar perfectamente en sincronización con Photoshop e Illustrator y todos los otros productos de Adobe, lo cual son increíbles noticias para los diseñadores.

webfonts-edenspiekermann

Además de eso, no hay otra manera que fácilmente podamos integrar las fuentes web que escojamos para usarlas en las maquetas, al menos que lo hagamos al comprar la versión estándar de "escritorio" de la fuente separadamente de la fuente web. Si no estás viendo la marca de un sitio web, entonces esto puede comenzar a convertirse en un poco costoso y difícil de manejar.

Una otra opción que tienes cuando se trabaja con la tipografía es saltar al navegador con bastante rapidez; Ya sea mediante el trabajo con un servicio como Typecast, como se explica en las secciones de tipografía anteriores de esta serie, o mediante la compra de las fuentes web en tu servicio preferido y ver cómo reaccionan con tu contenido en una versión prototipo de tu diseño.

Sin embargo tú decides trabajar con fuentes web en tu diseño, puedes asegurarte que tendrás un resultado más creativo y mejor para que tus usuarios disfruten y del que puedas sentirte orgulloso.


Íconos

Los íconos son una gran cosa en el momento, una buena cosa que está sucediendo en el mundo de las "tendencias" Pienso que los íconos e imágenes visuales que pueden caer bajo eso, por ejemplo un logotipo, son una gran herramienta para ayudarte a guiar a los usuarios alrededor del sitio web. Usado al lado del texto, pueden ser una gran ayuda visual.

Sin embargo, en mundo donde necesitamos asegurar que las imágenes y visualizaciones funcionen bien en tantos dispositivos y tamaños de pantallas, necesitamos asegurarnos que nuestros íconos e imágenes funcionen bien a lo largo de la tabla y sean más a prueba de futuro. Con suerte, existen un par de opciones disponibles para nosotros que nos pueden ayudar a asegurarnos que hagamos eso.

PNG

El bonito PNG (que nos ofreció una manera de incluir un fondo transparente en una imagen, que no era un astuto GIF) es una manera segura de trabajar con íconos en tus sitios web.

icons-symbolicons

Pero no te olvides, si quieres servir imágenes bonitas a una multitud de Retina, entonces necesitarás algún tipo de respaldo CSS o JavaScript para asegurarte que hagas eso.

Trabajar con PNG's no debería cambiar nada en tu flujo de trabajo tampoco. Simplemente puedes guardar cualquier imagen que hayas creado con el tamaño requerido y guardarlo directo desde Photoshop.

PNGs también funcionan bien para escalar, mientras escales hacia abajo. Si tienes que escalar una imagen hacia arriba (lo que a veces pasa cuando vas desde un puerto de vista grande a uno pequeño) el PNG muchas veces se verá pixelado y borroso, lo cual es algo que obviamente querrás evitar.

SVG

El último punto sobre PNG rápidamente nos lleva a la opción de SVg que hemos tenido para nuestros íconos. Mientras tengas una imagen donde esté basado el vector (creada en Adobe Illustrator, por ejemplo) - y no basada en raster, como sería en Adobe Photoshop por ejemplo - entonces puedes guardar esta imagen como SVG.

icons-sachagrief

Como desarrollador muchas veces entenderás sobre SVG y las diferentes maneras que puedes implementarlos en tu sitio web. Si no lo haces, SVG es una manera de implementar una gráfica escalable en los diseños de tu sitio web. De esa manera, no necesitas preocuparte sobre el gráfico convirtiéndose en pixelado o borroso al cambiarle el tamaño o escalarlo, y se estirará perfectamente al tamaño requerido que necesitas.

Esto funciona increíble para logos, básicamente cualquier cosa que posiblemente necesite escalar que ya tengas en tu formato de vector o puedas recrear fácilmente en ese formato, si es necesario. Al diseñar y ahorrar tus imágenes de SVG, recomendaría siempre que trabajaras al tamaño óptimo que necesitas la mayor parte del tiempo; De esa manera, tu navegador sólo tiene que hacer algún trabajo para cambiar el tamaño y la escala del logotipo en circunstancias especiales y no todo el tiempo.

Fuentes Web

Como ya sabemos, las fuentes web son infinitamente escalables y pueden funcionar perfectamente en nuestros sitios web en los buscadores actuales. Algunas personas muy astutas han sido capaces de combinar ambos fuentes web e íconos para hacer fuentes web de íconos o símbolos. Justo como Wingdings, estos muchas veces tienen más significado y contexto cuando se usan con un ícono simple.

webfonts-symbolset

Existen argumentos para y contra las fuentes e íconos web, algunos dicen que para cargar una fuente completa para usar solo algunos ligamentos no es sensible, ya que añadirá mucho peso a la página e influenciará el desempeño.

Mientras que esto podría ser difícil de evitar con fuentes comerciales de símbolos web que has comprado, existen muchas herramientas para crear tus propias fuentes web, donde puedes evitar esto y solo crear una fuente con los íconos que necesitas. Algunos también dicen que podrías perder algo del contexto con las fuentes web ya que a veces solo usan solo una carta para visualizar el ícono. Sin embargo, algunas personas astutas como la persona en Symbolset usan palabras claves para las fuentes, lo que ayuda a añadir al menos un poco más de contexto al ícono que tienes.

Y ahí tienes las tres opciones de cómo usar íconos en tus diseños, ¡la elección es ahora tuya para hacer! La mayoría de las opciones añadirán un poco al flujo de trabajo de tu diseño en alguna manera u otra, pero queda en ti ver cuál proceso podría encajar en tu flujo de trabajo de mejor manera.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.