Archivo

Posts Tagged ‘Vocabulario’

65 Términos de Diseño Web que Debe Saber

15 de septiembre de 2019 Deja un comentario

El lenguaje del diseño web incluye muchos términos de diseño web que debe conocer. Ya sea que cree su propio blog o sitio web, trabaje con un diseñador web o desarrollador web, o quiera aprender más sobre el diseño web en general, este artículo cubrirá los términos en inglés más importantes utilizados en el diseño web. También nos sumergiremos en los detalles de lo que constituye el proceso de diseño web, incluidos los métodos de resolución de problemas y el flujo de trabajo.

 

Términos de el diseño web: vocabulario para el diseño web

 

El diseño web a menudo implica una superposición entre disciplinas, y es por eso que estamos incluyendo vocabulario de marca, composición, color y tipografía. Saber cómo hablar el lenguaje del diseño web le ayudará a hacer mejores preguntas, comunicarse de manera más efectiva y producir un mejor producto final. También puede observar cómo se implementan estos términos en una amplia variedad de sitios web (para bien o para mal). Debido a que el diseño web es un proceso holístico, los diseñadores web están capacitados para ver la imagen más grande y también los detalles.

 

Términos de marca

 

La marca es la comunicación del mensaje, los valores y la experiencia de una organización. Todo, desde el logotipo de la empresa y los elementos de diseño identificables hasta las ‘sensaciones instintivas’ que las personas obtienen sobre el motor de una organización del por qué detrás de un sitio web. Cuando se trata de diseño web, tiene la oportunidad de crear experiencias que refuercen la marca de la empresa.

1. Identity (Identidad): toda la representación visual de su marca puede incluir logotipo, color, tipografía, imágenes, voz, etc. No solo un logotipo.
2. Lettermark / Wordmark / Logotype: un tipo de logotipo hecho con letras estilizadas (IBM) o palabras (Coca-Cola)
3. Brandmark (Marca): un tipo de logotipo hecho con una representación gráfica (Apple, Target)
4. Icon (Icono): una representación simplificada de un objeto o concepto. Un logotipo y un icono no son lo mismo.
5. Design System (Sistema de diseño): un repositorio de componentes digitales reutilizables que se combinan para formar un sitio web.
6. Brand Guide (Guía de la marca): una referencia visual y filosófica para el color, la personalidad y la voz de una marca.

 

Términos de experiencia del usuario

 

La experiencia del usuario abarca cómo las personas interactúan e interactúan con un sitio web. La experiencia del usuario influye en cómo dirigimos a los usuarios a través del sitio y los llevamos a objetivos finales específicos. Abarca muchos elementos de diseño y desarrollo, incluido cómo se ve y funciona algo. Tome decisiones de funcionalidad teniendo en cuenta al usuario final, no su propia preferencia o las herramientas que está utilizando.

7. Persona: personaje ficticio que representa un usuario principal de su sitio / producto. Por lo general, las personas están muy bien desarrolladas porque deberían representar a personas reales con motivaciones reales.

8. Wireframe (Esquema de página): diseño de baja fidelidad de un sitio, representación de contenido general a nivel de bloque y elementos interactivos.

9. Mockup (Maqueta): diseño de alta fidelidad de un sitio, representación del color final, tipografía, imágenes, etc.

10. Prototype (Prototipo): versión interactiva de un sitio, no se puede construir con el código final.

11. CTA: Llamada a la acción, generalmente emparejado con un botón.

12. Conversion (Conversión): cuando un usuario realiza una acción específica deseada.

13. Landing Page (Página de destino): página única optimizada para una audiencia específica o resultado de motor de búsqueda.

14. Usability (Usabilidad): cómo los usuarios reales realmente interactúan con su sitio, generalmente probado al observar una serie de tareas guiadas.

 

Términos de la interfaz de usuario

 

La interfaz de usuario (también conocida como UX & UI) incluye elementos en la página con la que interactúa el usuario. Su interfaz de usuario impacta su experiencia de usuario, aunque no son lo mismo. No haga pensar a sus usuarios; Diseñe una interfaz intuitiva que aproveche los patrones modernos.

15. Breadcrumb (La miga de pan o el hilo de Ariadna es una técnica de navegación usada en muchas interfaces gráficas de usuario, además de páginas web): enlaces de contenido jerárquico.

16. Menu (Menú): Área de navegación principal, a veces con un menú desplegable o flotante de elementos de submenú.

17. Filter (Filtro): elementos predefinidos que permiten reducir el contenido visible por varias taxonomías (las taxonomías son una forma elegante de decir categorías).

18. Search (Búsqueda): entrada abierta que consulta el contenido y devuelve una lista de resultados.

19. Slider (Control deslizante): una forma moderna y animada de mostrar información que probablemente no debería usar.

 

Términos de composición

 

La composición se refiere a cómo el contenido y la estética de un sitio web trabajan juntos. Cada elemento en la página web debe sentirse como si perteneciera al diseño del sitio web, no agregado como una ocurrencia tardía.

20. Balance (Equilibrio): uso de elementos de diseño similares o complementarios para que la composición se sienta igual.

21. Repetition (Repetición): uso de elementos recurrentes para reforzar patrones o servir como señales visuales familiares.

22. Whitespace (Espacio en blanco): ¿Cuánto ‘espacio para respirar’ tiene cada elemento?

23. Grid (Rejilla): Estructura subyacente a un diseño que determina mostrar todo lo que se presenta.

24. Rule of Thirds (Regla de los tercios): Un concepto visual que establece que los puntos focales más agradables están en la intersección de tres filas y columnas. En las artes visuales y el área cinematográfica como la pintura, fotografía y diseño, la regla de los tercios es una forma de composición para ordenar objetos dentro de la imagen. Esta regla divide una imagen en nueve partes diferentes , utilizando dos líneas imaginarias paralelas y equiespaciadas de forma horizontal y dos más de las mismas características de forma vertical, y recomienda utilizar los puntos de intersección de estas líneas para distribuir los objetos de la escena. La regla de los tercios se usa con frecuencia en todo tipo de escenas como retratos, paisajes o bodegones.

 

Términos de jerarquía

 

La jerarquía implica la importancia relativa de la visibilidad de las piezas de información. La jerarquía visual suele ser una colección de pequeños detalles como tipografía, color, proximidad y equilibrio. Tener una buena jerarquía ayuda a escanear la información y ayuda a los usuarios a priorizar la información en la página por importancia. La jerarquía también ayuda a dirigir a los usuarios a través de un sitio web. Las decisiones tomadas sobre el estilo y la posición de los elementos tienen un gran impacto en la experiencia del sitio web.

25. Scale (Escala): ¿Qué tan grandes o pequeños son los elementos en la página entre sí?

26. Proximity/Alignment (Proximidad / Alineación): ¿Qué elementos de la página están asociados entre sí?

27. Focal Point (Punto focal): El lugar en la página al que estamos dirigiendo la atención del usuario.

28. Semantic Markup (Marcado semántico): Usar elementos HTML correctamente para implicar jerarquía y uso dentro del contenido.

 

Términos de tipografía

 

La tipografía son las decisiones estéticas sobre la disposición del tipo. El tamaño, el espaciado, la alineación, el tamaño de la columna y el tamaño relativo del tipo tienen un gran impacto en la experiencia del usuario, así como solo en la estética.

29. font (typeface) (fuente) (tipo de letra): Colección de letras y glifos / símbolos

30. font-family: ¿Qué tipo de letra está usando?

31. font-size (tamaño de fuente): ¿Qué tan grande / pequeña es?

32. font-weight: ¿Qué tan pesada / ligera es?

33. font-style, text-decoration (estilo de fuente, decoración de texto): cursiva, subrayado, tachado

34. line-height (leading) (altura de línea) (inicial): ¿Cuánto espacio entre líneas?

35. letter-spacing (tracking) (espaciado entre letras) (seguimiento): ajuste del espaciado entre grupos de letras / bloques de texto.

36. kerning: el espacio entre letras individuales.

37. serif / sans serif: las fuentes Serif tienen un trazo o línea decorativa adicional al final de las letras, mientras que una fuente Sans Serif no tiene.

 

Términos de color

 

El color abarca decisiones estéticas sobre el uso del color en una composición. El color se puede utilizar para evocar emoción, énfasis, división o elementos grupales; El color puede crear unidad visual y equilibrio. El color generalmente está relacionado con la marca. Las opciones de color deben liberarse y usarse de manera consistente en todo el sitio web.

39. HEX: en sitios web, el color hexadecimal, un número de seis dígitos utilizado para representar el color en HTML / CSS.

40. RGB: modelo de color aditivo utilizado para pantallas, valores de luz roja / verde / azul combinados para formar colores.

41. CMYK: Para la impresión, el modelo de color sustractivo utilizado para tinta, cian / magenta / amarillo / negro se combinan para formar colores.

42. Pantone / color plano: tintas personalizadas específicas de un determinado color. Las grandes marcas suelen tener su propio color Pantone personalizado.

43. Hue: ¿Dónde está en el espectro de color?

44. Saturation (Saturación): ¿Qué tan vívido o aburrido es el color?

45. Contrast (Contraste): ¿Cuánto se destaca?

46. Opacity (Opacidad): ¿Sólida o transparente?

 

Términos de imágenes

 

Los términos de imágenes incluyen los elementos visuales y gráficos de un sitio web. Las imágenes son importantes para comunicar su mensaje y conectarse con su audiencia. Sin embargo, cuando las imágenes se usan de manera inadecuada, puede agregar un volumen adicional al tiempo de carga de un sitio web sin hacer mucho por la experiencia del usuario. Use imágenes para respaldar sus mensajes; use el formato de imagen correcto para el contenido.

47. Vector (Vector): imágenes hechas de las matemáticas (SVG, EPS).

48. Raster (Ráster): imágenes que están hechas de píxeles (JPG, TIFF, PNG, GIF).

49. Resolution (Resolución): cuántos píxeles tiene una imagen de trama (por ejemplo, 800 × 600 o 2400 × 1200). Una resolución más alta generalmente será de mayor tamaño, pero con mayor detalle.

50. Compression (Compresión): optimización (tamaño de archivo grande / pequeño).

51. JPG / JPEG: mejor para fotografía e imágenes detalladas.

52. PNG: ideal para gráficos, colores simples e imágenes con transparencia.

53. GIF: ideal para gráficos o animaciones de bajo detalle.

54. TIFF: mejor para la calidad de impresión, no adecuado para la visualización en pantalla.

55. SVG: un formato de imagen vectorial adecuado para mostrar en la Web, mejor para gráficos y logotipos.

 

Términos de terminología web

 

Los términos de terminología web abarcan un vocabulario general al diseñar para la web. Los diseñadores web no solo conocen el diseño, sino que también entienden la tecnología para la que están diseñando.

56. Heading (Encabezado): títulos y subtítulos, escritos semánticamente con etiquetas h1 – h6. Útil para organizar la información en una jerarquía y es utilizada por los motores de búsqueda y los lectores de pantalla.

57. Body Copy/Body Text (Copia del cuerpo / Texto del cuerpo): El contenido escrito principal, generalmente los párrafos, las listas, las citas, etc.

58. Hero: la imagen / gráfico principal en una página de inicio o de aterrizaje, generalmente con un llamado a la acción principal.

59. Single-Scroll (Desplazamiento único): un sitio web donde la mayoría del contenido está contenido en una sola página.

60. Responsive Design (Diseño adaptativo): un diseño que no es fijo, pero se adapta al tamaño de la pantalla y / o dispositivo del usuario.

61. Breakpoint (Punto de interrupción): un punto específico (por ejemplo, ancho) donde el contenido / diseño de un sitio web cambiará para adaptarse a una interfaz diferente.

62. Accessible (Accesible): capacidad de un sitio web para ser utilizado por todos los públicos, incluida la discapacidad visual, auditiva o motriz, mediante tecnología de asistencia o navegación estándar.

63. Front-End: en general, se trata del código que se ejecuta en un navegador y controla lo que se ve e interactúa.

64. Back-End: en general, se trata de código que se ejecuta en un servidor y controla el contenido y la lógica.

65. CMS: sistema de gestión de contenido (como WordPress).
Elements photos

A %d blogueros les gusta esto: