La jerga de diseño está en todas partes. Y necesitas poder hablar el idioma. Trabajar en proyectos digitales tiene su propio conjunto de terminología. Desde el dither hasta los valores de color y los diseños fluidos o fijos, hay algunos términos que todo diseñador debe tener en cuenta.
Así que lo hemos hecho fácil para usted y hemos elaborado una lista de términos de diseño digital que necesita saber. Esta lista comenzó como un top 10, pero agregamos un poco de jerga adicional para fines comparativos. ¿Con cuántos de estos términos ya estás familiarizado?
1. RGB y HEX
Tanto RGB como HEX se refieren a valores de color numéricos. Cada color en el espectro de luz, sí, el color de la pantalla se crea con luz, se puede hacer combinando tres tonos primarios.
- R = rojo
- G = Verde
- B = azul
Los valores RGB se expresan utilizando un conjunto de tres números, donde cada número varía de 0 (sin uso de un color) a 255 (valor de color completo). En la pantalla, incluso el blanco y negro se hacen combinando estos valores. El negro no usa valores de color para rojo, verde y azul, mientras que el blanco usa valores de 100 por ciento para cada uno.
Los valores HEX utilizan una fórmula un poco más compleja de letras y números. Cada valor HEX tiene un valor RGB correspondiente. Los códigos HEX se utilizan en HTML para codificar el color en los sitios web. Estos valores están representados por tres conjuntos de pares de caracteres que incluyen letras y números.
Los valores HEX siempre comienzan con un signo #. El valor más bajo es 00, mientras que el valor más alto es FF.
2. Mouseover
Un mouseover es un elemento de JavaScript que produce un cambio en un elemento de la pantalla una vez que el puntero del mouse lo alcanza.
Estos cambios a menudo se relacionan con elementos gráficos como las fotos. A menudo se ve algo simple como un hipervínculo, pero los estados de mouseover también pueden ser complejos. Algunos efectos de mouseover más complejos incluyen menús de navegación ocultos o cambios a estados de fotos o listas de desplazamiento.
3. Dither
Un proceso utilizado en la edición de audio e imagen digital, el dither ayuda a prevenir las bandas de color o el ruido aleatorio. El proceso en realidad incluye una fórmula matemática compleja que agrega ruido intencional (visual o de audio).
Esta adición de ruido puede afectar especialmente el aspecto de las imágenes en relación con las imágenes en una paleta de colores limitada. Al interponerse, el diseñador puede crear una ilusión de color que puede no estar allí porque con el ruido agregado, los píxeles comenzarán a adquirir algunas de las propiedades de color de los píxeles cercanos.
4. CSS
Las hojas de estilo en cascada son un conjunto de reglas que definen cómo se ven las cosas en un sitio web, utilizando un conjunto de estilos definidos para elementos HTML.
Comúnmente llamadas CSS, estas definiciones pueden ahorrarles mucho tiempo a los diseñadores, ayudar a los motores de búsqueda a leer su sitio y facilitar la creación de un sitio que tenga imágenes consistentes. Con un solo cambio en el CSS, todos los atributos de texto o color se pueden cambiar en un solo paso.
Funciona mediante la definición de especificaciones para elementos tales como copia del cuerpo o encabezados, donde se aplica una fuente, tamaño, color, alineación y otros valores cada vez que se utiliza la etiqueta HTML correspondiente.
5. Metadatos y Meta Tags.
Metadatos y meta etiquetas son términos interrelacionados. Las etiquetas meta retransmiten los metadatos. Los metadatos son información acerca de los datos, por muy confuso que pueda parecer, específicamente proporcionar información sobre el contenido de un elemento en un archivo digital. Los metadatos más comúnmente reconocidos incluyen la información de la cámara que se ve en los archivos de fotos digitales.
Los metadatos también se usan para describir el contenido de un sitio web para motores de búsqueda, y esta información se agrega al final de un sitio mediante etiquetas meta. Las etiquetas comunes incluyen la descripción del contenido de una página, palabras clave, información del autor, información de la foto y sellos de día, hora y ubicación.
¿Quieres ver etiquetas meta en acción? Google casi cualquier cosa. Esa breve descripción que aparece después del nombre de la página y el enlace generalmente proviene de la? Descripción? etiqueta meta, por lo que es un elemento altamente visible e importante en su caja de herramientas de diseño digital. (Nota: si deja esa etiqueta en blanco, los motores de búsqueda la llenarán con el primer bit de contenido de su página).
6. Favicon
Este pequeño icono, generalmente de 16 por 16 píxeles, es la imagen ubicada en la parte superior de cada pestaña o ventana del navegador. Cada sitio web puede tener su propio favicon, que es la abreviatura de su icono favorito. El pequeño icono también aparecerá en los historiales de búsqueda, junto a los marcadores y en las pestañas del navegador y los iconos del escritorio.
Los Favicons deben guardarse y almacenarse correctamente para trabajar en un sitio web. Si bien muchos navegadores admiten los formatos GIF y PNG, Internet Explorer prefiere un archivo ICO.
Puede crear su propio favicon utilizando software como Adobe Photoshop o usar una herramienta en línea como Favicon Generator.
7. Diseño de ancho fijo frente a fluido frente a sensible
Hay tantos términos flotando alrededor de estos días que describen cómo funciona su sitio web dentro de un navegador o interfaz móvil. Antes de elegir un tipo de concepto de diseño o cuadrícula, considere opciones de diseño fijo, fluido y sensible.
Diseño de ancho fijo: Un diseño de ancho fijo funciona exactamente como su nombre lo indica. Un sitio se construye basándose en un conjunto de especificaciones de tamaño y mantiene esas especificaciones, independientemente del tamaño del dispositivo o del navegador. Si bien estos sitios pueden diseñarse rápidamente, pueden ser complicados de ver en dispositivos más pequeños.
Disposición fluida: Los diseños fluidos se crean utilizando un sistema de proporciones en relación con el diseño y el tamaño de la pantalla para renderizar un sitio. A cada elemento del diseño se le asigna un ancho porcentual en relación con el tamaño de la pantalla. Por ejemplo, la columna principal de texto puede abarcar el 60 por ciento de la pantalla, mientras que la barra lateral llena el 40 por ciento restante. Si bien el uso de un diseño fluido resolvió algunos de los problemas asociados con el diseño de ancho fijo, el resultado final a veces puede ser difícil de determinar en el back-end. Los diseños fluidos pueden funcionar bien con diferentes entornos de navegador de escritorio, pero tienden a volverse un poco torpes en dispositivos pequeños de tamaño móvil.
Disposición Responsive: Responsive es la gran tendencia de 2013 y está asumiendo el modo en que pensamos sobre el diseño web. Debido a que el diseño responsivo se adapta al dispositivo en el que se ve, el diseño responsivo funciona casi universalmente. Cada elemento se dimensiona en función de los porcentajes, incluidas las imágenes y el texto, y las consultas de los medios de comunicación permiten que los sitios de respuesta se construyan utilizando diferentes estilos CSS. El diseño receptivo no es solo una vista más pequeña de un sitio, sino que puede incluir su propia versión personalizada del sitio de escritorio completo, ya que los elementos pueden apilarse de manera diferente o incluir funciones solo para dispositivos móviles, como tocar un número de teléfono en la pantalla para marcar eso. Por otro lado, puede llevar más tiempo desarrollar y diseñar.
8. Resolución
Cuando se trata de imágenes, la resolución es un término que escuchará con frecuencia. Y la resolución de la pantalla es especialmente importante para optimizar las imágenes para una visualización rápida en la web. La resolución de una pantalla es el tamaño visible de la pantalla, como un navegador que muestra una pantalla? o desplazamiento de un sitio web a 1.366 píxeles de ancho por 768 píxeles de alto.
La resolución de una imagen se mide de la misma manera. Pero también debe considerar píxeles por pulgada al guardar imágenes. Para obtener los mejores resultados en línea, ahorre a 72 ppi a menos que se recomiende lo contrario. El ancho y el alto de las imágenes se deben escalar al tamaño más grande que se usará en línea, aunque muchos diseñadores optan por un ancho mínimo de 600 píxeles: el tamaño óptimo para colocar en Pinterest.
9. UI vs.UX
UI y UX se refieren a las partes posteriores y posteriores del diseño digital. No puedes tener uno sin el otro.
- IU (interfaz de usuario) - Es todos los componentes y trabajos que se requieren para crear un sitio web. La interfaz de usuario hace que todo funcione, desde todos los componentes utilizados para crear un diseño de sitio hasta cómo funciona cada parte.
- UX (experiencia de usuario) - Así es como funciona el diseño para usuarios reales. ¿Qué experiencia o emoción o reacción crea el producto final? Lo que puede ser complicado es que una buena interfaz de usuario es lo que normalmente crea una excelente experiencia de usuario.
Obtenga una lección en profundidad sobre estos términos en un artículo anterior de Design Shack.
10. Skeuomorphism vs. Flat
Casi todo el mundo ha tenido algún tipo de experiencia con skeuomorphism o diseño plano en los últimos meses gracias a una gran cantidad de diseñadores de sitios que van "planos".
El diseño de Skeuomorphic incluye elementos y trucos de diseño para hacer que una interfaz de usuario se vea u opere de manera realista. ¿Desde sombras hasta biselados o mandos que giran? con un clic o un desplazamiento del mouse, el skeuomorphism encarna un sentido de falso realismo. El ejemplo más conocido de diseño skeuomorphic es la interfaz iOS de Apple, que presenta gradientes, texturas y sombras.
El diseño plano, por otro lado, es sin adorno o "realismo". El estilo es super simple y no incluye ningún elemento que le dé una sensación tridimensional. El ejemplo más conocido de diseño plano es la interfaz de Windows, incluida la de Windows Phone, que presenta un estilo de bloque.
Conclusión
Ahora que conoces la jerga, sal y comienza a crear. ¡No se olvide de consultar también la guía de Design Shack para conocer los 10 términos de diseño de impresión que necesita saber, para que tenga una buena comprensión de ambas áreas!
Fuente de la imagen: Robert Scoble.