65 Condiciones de diseño web que debe conocer

El lenguaje de diseño web incluye muchos términos de diseño web que debe conocer. Ya sea que cree su propio blog o sitio web, si trabaja con un diseñador web o desarrollador web o si desea obtener más información sobre el diseño web en general, esta publicación cubrirá los términos más importantes utilizados en el diseño web. También se hundiremos en los detalles de lo que hace que el proceso de diseño web, incluidos los métodos de resolución de problemas y el flujo de trabajo.

Durante un reciente seminario web con Michelle Schulp Web Design Expert, ganamos una perspectiva sobre los términos de diseño web y aprendimos a tener una mejor conversación sobre el diseño web.
Términos de diseño web: el vocabulario de diseño web a menudo implica disciplinas superpuestas, por lo que incluí un vocabulario que se ocupa de la marca, la composición, el color y la tipografía. Saber cómo hablar el lenguaje de diseño web lo ayudará a hacer mejores preguntas, comunicarse de manera más eficiente y producir un mejor producto final. También puede ver cómo se implementan estos términos en una amplia variedad de sitios web (para mejor o mal). Debido a que el diseño web es un proceso holístico, los diseñadores web están capacitados para ver la imagen general y también los detalles.
Obtenga más información sobre la terminología web en el nuevo libro electrónico: 65 Condiciones de diseño web que debe saber
Descargar ahora
Los términos de marca son la comunicación del mensaje, los valores y la experiencia de una organización. Todo, desde el logotipo de una empresa y elementos de diseño identificables, hasta el “sentimiento del intestino” que las personas obtienen sobre un factor de organización de la razón detrás de un sitio web. Cuando se trata de diseño web, tiene la oportunidad de crear experiencias que fortalezcan la marca de la empresa. Identidad: toda la representación visual de su marca puede incluir logotipo, color, impresión, imágenes, voz, etc. No solo un logotipo.
2. Signo de escritura / signo de palabra / logotipo: un tipo de logotipo hecho con letras estilizadas (IBM) o palabras (Coca-Cola)
3. Brandmark: un tipo de logotipo hecho con una representación gráfica (Apple, Target)
4. Icono: una reproducción simplificada de un objeto o concepto. Un logotipo e ícono no son los mismos.
5. Sistema de diseño: un depósito de componentes digitales reutilizables que se combina para formar un sitio web.
6. Guía de marca: una referencia visual y filosófica para el color, la personalidad y la voz de una marca.
Las condiciones de experiencia del usuario incluyen cómo las personas interactúan e interactúan con un sitio web. La experiencia del usuario influye en la forma en que dirigimos a los usuarios a través del sitio y los llevamos a objetivos finales específicos. Incluye muchos elementos de diseño y desarrollo, incluido cómo se ve y funciona algo. Tome decisiones de funcionalidad teniendo en cuenta el usuario final, no su preferencia o las herramientas que utiliza.
7. Persona: carácter ficticio que representa a un usuario principal de su sitio / producto Por lo general, las personas están muy bien desarrolladas, porque deben representar personas reales con motivaciones reales. Wireframe: aspecto reducido de fidelidad de un sitio, representación del contenido general a nivel de bloque y elementos interactivos.
9. Mockup: aspecto de alta fidelidad de un sitio, representación del color final, tipografía, imágenes, etc.
10. Prototipo: la versión interactiva de un sitio no se puede construir con el código final.
11. CTA: Insto la acción, generalmente asociada con un botón.
12. Conversión: cuando un usuario realiza una acción específica deseada.
13. Página de destino: una sola página optimizada para una audiencia en particular o el resultado de un motor de búsqueda.
14. Use: la forma en que los usuarios reales realmente interactúan con su sitio, generalmente probados cumpliendo con una serie de tareas guiadas.
Los términos de la interfaz de usuario La interfaz de usuario (UX, UI) incluye elementos en la página con la que interactúa el usuario. Su interfaz de usuario tiene un impacto en su experiencia de usuario, aunque no son lo mismo. No hace pensar en los usuarios; Diseñe una interfaz intuitiva para aprovechar los modelos modernos.
15. Breadcrumb: enlaces de contenido jerárquico.
16. Menú: área de navegación principal, a veces con una lista de caída o un menú de descomposición.
17. Filtro: elementos predefinidos que permiten restringir el contenido visible a través de diferentes taxonomías (las taxonomías son una forma elegante de decir categorías).
18. Búsqueda: Abra la entrada que interroga el contenido y devuelva una lista de resultados.
19. Slider: una forma de moda y animada de mostrar información que probablemente no debería usar. La composición dentro de la composición se refiere a cómo el contenido y la estética de un sitio web funcionan juntos. Cada elemento en la página web debe tener ganas de pertenecer al sitio web, no agregado como un pensamiento posterior.
20. Balance: utilizando elementos de diseño similares o complementarios para que la composición se sienta igual.
21. Repita: el uso de elementos recurrentes para fortalecer los patrones o para servir como indicaciones visuales familiares.
22. Espacio en blanco: ¿cuánto “espacio para respirar” tiene cada elemento?
23. Grid: estructura que es la base de un diseño que determina cómo se presenta todo.
24. La regla de los tercios: un concepto visual que afirma los puntos focales más agradables es en la intersección de tres filas y columnas.
Términos jerárquicos La jerarquía implica la importancia relativa de la visibilidad de la 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 información y ayuda a los usuarios a dar prioridad a la información de la página de acuerdo con la 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. Escala: ¿Qué tan grandes o pequeños son los elementos de la página entre sí?
26. Proximidad / Alineación: ¿Qué elementos de la página están asociados entre sí?
27. Punto focal: colocar en la página a la que dirigimos la atención del usuario
28. Marcado semántico: el uso correcto de los elementos HTML para involucrar a la jerarquía y el uso dentro del contenido. La tipografía dentro es la decisión estética con respecto a la disposición de tipo. El tamaño, la distancia, 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. Las opciones tipográficas deben ser deliberadas, tanto fortaleciendo los sistemas de imagen en general, así como estético y fácil de leer / comprender.
29. Font (fuente): Colección de letras y glifos / símbolos
30. Font-Family: ¿Qué patrón usas?
31. tamaño de fuente: ¿Qué tan grande / pequeño es?
32. Font-Weight: ¿Qué tan difícil / fácil es?
33. Estilo de fuente: cursiva, subrayada, huelga
34. Altura de línea (en dirección): ¿Cuánto espacio entre líneas?
35. Espaciado de letras (seguimiento): ajustar el espacio entre los bloques de texto / texto.
36. KERNING: El espacio entre letras individuales.
37. Decor de texto: ¿está subrayado el texto o tiene un estilo adicional?
38. Serif / sans serif: las fuentes serif tienen una línea o línea decorativa adicional hasta el final de las letras, mientras que una fuente sans serif no está.
Los términos de color del color incluyen decisiones estéticas con respecto al uso del color en una composición. El color se puede usar para evocar emoción, acentuación, división o agrupación de elementos; El color puede crear una unidad visual y equilibrio. El color generalmente está relacionado con la marca. Las opciones de color deben ser deliberadas y utilizadas consistentemente en todo el sitio web.
39. Hex: en sitios web, color hexadecimal, un número de seis dígitos utilizado para representar el color en HTML / CSS.40. RGB: modelo de aditivo de color utilizado para pantallas, valores de luz rojo / verde / azul que se combinan para formar colores.
41. CMYK: para la impresión, un modelo de color sustractivo utilizado para tinta, cian / magenta / amarillo / negro, que se combina para formar colores.
42. Color Pantone / Spot: tintas personalizadas específicas para un cierto color. Los grandes grandes generalmente tienen su propio color Pantone personalizado.
43. Sombra: ¿Dónde está el espectro de color?

44. Saturación: ¿Qué tan vívido o aburrido es el color?
45. Contraste: ¿Cuánto se da cuenta?
46. ​​Opacidad: ¿sólida o transparente?
Términos para imágenes Los términos de imagen incluyen los elementos visuales y gráficos de un sitio web. Las imágenes son importantes para comunicar su mensaje y conectarse con el público. Sin embargo, cuando las imágenes se usan de manera inapropiada, pueden agregar una cantidad adicional al tiempo de carga de un sitio web, sin hacer mucho para la experiencia del usuario. Use imágenes para apoyar sus mensajes; Use el formato de imagen adecuado para el contenido.
47. Vector: Imágenes hechas de Matemáticas (SVG, EPS).
48. Raster: imágenes hechas de píxeles (JPG, TIFF, PNG, GIF).
49. Resolución: cuántos píxeles tiene una imagen ráster (por ejemplo, 800 × 600 o 2400 × 1200). Una resolución más grande generalmente será un tamaño mayor, pero detalles más grandes.
50. Compresión: optimización (tamaño de archivo grande / pequeño).
51. JPG / JPEG: lo mejor para fotografía e imágenes detalladas.
52. PNG: lo mejor para gráficos, color simple e imágenes con transparencia.53. GIF: Lo mejor para gráficos con bajos detalles o animaciones.
54. TIFF: lo mejor para la calidad de la impresión no es adecuado para mostrar la pantalla.
55. SVG: un formato de imagen vectorial adecuado para la pantalla web, mejor para gráficos y lógica.
Terminología terminología Términos de terminología web de la terminología web incluyen vocabulario general cuando se diseña para la web. Los diseñadores web no solo saben sobre el diseño, sino que también entienden la tecnología para la que se proyectan.
56. Antetitlu: títulos y subtítulos, escritos semánticamente con etiquetas H1 – H6. Útil para organizar información en una jerarquía y son utilizados por motores de búsqueda y lectores de pantalla.
57. Copia corporal / Texto del cuerpo: el principal contenido escrito, generalmente párrafos, listas, comillas, etc.
58. Héroe: la imagen / gráfico principal en una página de inicio o en una página de destino, generalmente con una llamada principal a la acción.
59. Scrroll único: un sitio web donde la mayor parte del contenido está contenido en una página
60. Diseño receptivo: un diseño que no es fijo, pero se adapta al tamaño de la pantalla y / o el dispositivo del usuario.
61. Punto de interrupción: un punto específico (por ejemplo, ancho) en el que el contenido / apariencia de un sitio web cambiará para adaptarse a otra interfaz.
62. Accesible: la capacidad de un sitio web para ser utilizado por todas las audiencias, incluidas las deficiencias visuales, la audición o la función motora, a través de la asistencia estándar o la tecnología de navegación.
63. Front-end: en general, tratar el código que se ejecuta en un navegador y controlando lo que se ve e interactúa.
64. Back-End: en general, tratar el código que se ejecuta en un servidor y controlar el contenido y la lógica.65. CMS: sistema de gestión de contenido (como WordPress).
Más recursos para términos de diseño web Para obtener más información sobre los términos de diseño web, consulte estos 4 principios clave del diseño web y 99 palabras de diseño descriptivo que debe conocer. Mira la reproducción de seminarios web: cómo hablar unicornio – comprensión del lenguaje de diseño
Michelle Schulp de Marktime Media es una diseñadora gráfica independiente y desarrolladora de frotend en Minneapolis. Antes de comenzar su carrera, estudió comunicación visual, con menores en psicología y sociología. A medida que su trabajo ha progresado, también se ha ramificado en el desarrollo del front-end y el diseño de la experiencia del usuario para completar su conjunto de habilidades. Esta combinación de disciplinas la ha llevado a adoptar un enfoque de diseño estratégico, centrado en resolver problemas tangibles y lograr objetivos reales basados ​​en cómo piensan las personas. Obtenga más información sobre el diseño web de Michelle durante el diseño web Bootcamp de Web.
Obtenga más información sobre la terminología web en el nuevo libro electrónico: 65 Condiciones de diseño web que debe saber
Descargar ahora
Mira tu reanudación descarga las diapositivas
Kristen Wright
Kristen escribió tutoriales para ayudar a los usuarios de WordPress en 2011. Por lo general, puede encontrarlo trabajando en nuevos artículos para IThems Blog o desarrollar recursos para #WpProsper.Fuera del trabajo, Kristen disfruta del diario (¡escribió dos libros!), Senderismo y acampar, cocinar y aventuras diarias con su familia, con la esperanza de llevar una vida más presente.