Inicio Planificación de interfaces gráficas
Artículo
Cancelar

Planificación de interfaces gráficas

Elementos del diseño

La planificación de interfaces gráficas es una tarea fundamental en el diseño de interfaces Web, ya que conlleva un conocimiento previo y una organización y documentación de las tareas a desarrollar, obteniendo un resultado final más consistente y fácil de mantener.

Utilizado habitualmente en el contexto de las artes, ingeniería, arquitectura y otras disciplinas creativas, diseño se define como el proceso previo de configuración mental en la búsqueda de una solución en cualquier campo.

Diseñar requiere principalmente consideraciones funcionales y estéticas. Esto necesita de numerosas fases de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva del objeto.

De las fases de diseño nombradas anteriormente (investigación, análisis, modelado, ajustes y adaptaciones), ¿sabrías identificar dichas fases en el siguiente vídeo de DIY Perks?

Video voluntario:

Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de un conjunto de requisitos técnicos, sociales y económicos, de necesidades biológicas con efectos psicológicos y de materiales, forma, color, volumen y espacio, todo ello pensado e interrelacionado con el entorno.

Las personas dedicadas al diseño deben comunicar las ideas y conceptos, de una forma clara y directa, por medio de los elementos gráficos. Por tanto, la eficacia de la comunicación de los mensajes visuales que elaboran estas personas dependerá de la elección que haga de los elementos a emplear y del conocimiento que tenga de ellos.

Percepción visual

Percibimos todo lo que nos rodea a través de los sentidos: la vista, el oído, el olfato, el gusto, el tacto, aunque actualmente empleamos únicamente la vista, el oído y el tacto en nuestra comunicación con el ordenador. Percepción, es el proceso de recogida y tratamiento de la información sensorial. Consiste en recibir, a través de los sentidos, las imágenes, sonidos, impresiones o sensaciones externas y elaborar e interpretar toda la información recibida.

Hoy en día, la mayor parte de los sistemas informáticos son sistemas interactivos y su éxito o fracaso depende, en gran medida, de la interfaz persona-ordenador. Por este motivo la interfaz tiene que estar diseñada pensando en las necesidades del usuario.

Debemos tener en cuenta que cada día aumenta el número de personas que utilizan el ordenador, que estas personas se enfrentan a la interacción con el ordenador con diferentes grados de preparación y con distintas expectativas.

¿Qué significan las siglas IPO?

La IPO (Interacción Persona-Ordenador) es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Cuando hay una buena comunicación entre el usuario y el ordenador el intercambio de información es más eficiente, se reducen los errores y aumenta la satisfacción del usuario.

Teoría de la Gestalt

Lee el artículo Teoría de la Gestalt.

Elementos conceptuales del diseño

Los elementos conceptuales no son visibles. Los elementos conceptuales del diseño son la base del mismo, sobre ellos se asientan los demás elementos que veremos más adelante. Cada uno tiene sus propias características que les permiten desempeñar funciones determinadas dentro de una composición.

  • Punto
  • Linea
  • Plano
  • Volumen

¿Son las líneas visibles en la naturaleza?

Elementos visuales

Los elementos visuales son la parte más importante de un diseño, porque son lo que realmente vemos.

Cuando dibujamos una línea en un papel, empleamos una línea visible para representar una línea conceptual. La línea visible tiene largo y ancho y, su color y textura quedan determinados tanto por los materiales empleados como por la forma de usarlos. Así, cuando los elementos conceptuales se hacen visibles, tienen forma, medida, color y textura.

  • Forma: Identificamos lo que percibimos porque lo que vemos posee una forma. Una forma se define como un área que se destaca del espacio que la rodea debido a un límite definido explícita o implícitamente.
  • Medida: Todas las formas tienen un volumen o una dimensión. El tamaño de las formas se puede establecer de forma relativa, por comparación de unas con otras, pudiendo decir así que una forma es más grande o más pequeña que otra pero, en cualquier caso, es físicamente medible.
  • Color: El color y, el contraste de color en particular, se utilizatambién para llamar la atención sobre una parte determinada de la imagen.
  • Textura: El material con el que se hacen los objetos aporta a su superficie una textura determinada con unas determinadas características de rugosidad, suavidad, aspereza, homogeneidad, etcétera.

Elementos de relación

Este grupo de elementos gobierna la ubicación y la interrelación de las formas en un diseño. Algunos, como la dirección y la posición, pueden ser percibidos y otros, como el espacio y la gravedad, pueden ser sentidos.

  • Dirección: La dirección de una forma depende de su relación con el observador, con el marco que la contiene o con otras formas cercanas con las cuales se compara.
  • Posición: La posición de una forma es juzgada por su relación respecto al cuadro que la contiene o a la estructura global del diseño.
  • Espacio: Las formas por muy pequeñas que sean, ocupan un espacio. Así, el espacio puede estar ocupado o vacío. Se puede utilizar la perspectiva para organizar y sugerir el espacio creando la ilusión de profundidad. Se pueden superponer objetos de modo que el observador percibe como más cercano el objeto que está delante de los demás. También podemos lograr la profundidad dentro del campo visual utilizando el contraste y la variación de tamaño en las formas.
  • Gravedad: La sensación de gravedad no es visual, es psicológica. Tenemos tendencia a aplicar cualidades tales como pesadez o ligereza, estabilidad o inestabilidad, tanto a las formas individuales como a los grupos de formas.

Elementos prácticos

Los elementos prácticos del diseño permanecen ocultos en el contenido y en la trascendencia del diseño.

  • Representación: Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el ser humano. La representación puede ser realista, estilizada o medio abstracta. Una fotografía de un monumento es una representación realista del mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del monumento y un dibujo naif del monumento es una representación semiabstracta.
  • Significado: Es la imagen conceptual que se representa en nuestra mente cuando el diseño transporta un mensaje visual. Cada receptor del mensaje le dará una interpretación, un significado distinto, según sean sus conocimientos y experiencias previas.
  • Función: la función se hace presente cuando un diseño debe servir a un determinado propósito. La imagen anterior cumple una función muy importante. Colocada en el lugar adecuado como por ejemplo, una sala de revelado de fotografías, o una sala de microfilmación cumple la función de mantener el ambiente oscuro para poder trabajar.

El color

Lee el artículo Representación de colores.

Diseño de una interfaz web

Cuando comenzamos a diseñar una interfaz Web tenemos que tener en cuenta las respuestas a las siguientes preguntas:

  • ¿Sabes cuántas cosas hay que tener en cuenta a la hora de comenzar a elaborar una interfaz Web?
  • ¿Tienes claro a que tipo de público irá dirigida tu página?
  • ¿Quieres obtener un rendimiento económico con cada visita?
  • ¿Quieres contentar a todo el mundo que te visite o prefieres especializarte en un tema y tener menos seguidores?

Estas respuestas nos darán una idea clara de cuáles son los objetivos de nuestra Web y nos orientarán sobre el enfoque que debemos darle al diseño de nuestra interfaz.

Si comienzas un proyecto Web sin pensar en los usuarios a los que va a ir dirigido, es probable que no tengas la acogida que esperabas en un principio.

Una interfaz Web es un sistema gráfico que permite acceder a los usuarios a los contenidos de la Web mediante el uso de elementos gráficos, los cuales son conocidos por la mayor parte de los usuarios que acceden a nuestra página.

El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible.

Para conseguir dicho objetivo deberemos tener en cuenta varias cosas:

  • La paciencia de las personas no es ilimitada. Cuando una persona busca una información y, entra en una página después de haber realizado una búsqueda, no permanecerá mucho tiempo en ella si no encuentra rápidamente lo que busca.
  • El gusto, considerado como una cuestión de preferencias personales en materia de estética, varía mucho de unas personas a otras, pero no debemos olvidar que, un diseño cuidadoso, una interfaz agradable y, un empleo coherente de los elementos gráficos, nunca nos hará perder visitantes.
  • Los enlaces que no funcionan o que, sencillamente, no conducen a la información que prometían, provocan en el usuario una sensación de rechazo, con la consiguiente pérdida de confianza en nuestra página, pudiendo llegar, incluso, a la determinación de no visitarla de nuevo.
¿Qué significa que una página sea visual?

Podemos decir que un sitio Web es visual cuando las percepciones del usuario, sus opiniones acerca del sitio y, sus sentimientos y actitudes generados mientras lo usa, son positivos. Un sitio Web debe ser atractivo para mantener la atención del usuario, pero también debe ser coherente en el uso de los elementos gráficos. Por ejemplo, si diseñamos una Web relacionada con el tema de la madera y empleamos los colores tostados no sería muy coherente visualmente utilizar el color fucsia en un formulario de pedidos de árboles.

Un sitio Web tiene la característica de ser visual cuando los elementos gráficos empleados están orientados a conseguir los objetivos del sitio y no se han empleado como elemento decorativo.

Guías de estilo

Lee el artículo Guías de estilo.

Elementos de una interfaz web

Son muchos los elementos de los que puede estar compuesta una interfaz Web. El número de elementos empleados dependerá del objetivo del sitio. Así, un portal de noticias, o un portal de un organismo público seguramente utilizará un mayor número de elementos que una página Web de un restaurante o una página personal. Los más destacados son:

  • Elementos de identificación.
  • Elementos de navegación.
  • Elementos de contenidos.
  • Elementos de interacción.

Para no olvidarnos ningún elemento nos puede ser de gran utilidad la web Checklist Design.

Elementos de identificación

Los elementos de identificación son componentes visuales y funcionales que permiten a los usuarios reconocer de forma clara el propósito y la marca del sitio, facilitando la navegación y el entendimiento de la página. Son por ejemplo:

  • Logotipo
  • Título con el nombre de la empresa
  • Favicon
  • Título de la sección
  • Pie de página

¿Qué es el favicon?

Elementos de navegación

Ya hemos dicho que los elementos de navegación son los que nos permiten acceder a todos los contenidos que se encuentran en las diferentes páginas de un sitio Web. Pero, lo que no hemos dicho, es que si queremos que nuestra página sea usable, el usuario debe conseguir navegar por la página sin perderse y sin tener la sensación de perderse. Para conseguirlo, el sistema de navegación debería constar de una serie de elementos:

  • Elemento de regreso a la portada.
  • Menú de secciones y/o áreas de interés.
  • Información sobre la ubicación del usuario dentro del sitio Web.

¿Qué significa que una página sea usable?

Es importante para el usuario tener algún elemento que le permita volver al principio sin necesidad de utilizar la herramienta “ir hacia atrás o regresar” del navegador. Este problema suele resolverse empleando un enlace en el logotipo de la empresa que se sitúa normalmente en parte superior izquierda de cada una de las páginas que componen el sitio Web.

El menú de secciones y/o áreas de interés es una zona de la interfaz en la que se detallan las secciones y/o áreas en las que está dividida la información contenida en el sitio Web. Debe ser fácilmente localizable. Se suele ubicar en la parte superior de cada página, debajo del logotipo. Es importante que estas secciones y áreas estén bien identificadas mediante un texto descriptivo y/o una imagen representativa. También es importante que mantenga la misma posición en todas las páginas del sitio.

No debemos olvidar que, cuando el sitio Web es de gran tamaño, con muchas secciones y subsecciones, es de gran importancia que el usuario sepa en todo momento el lugar donde se encuentra dentro del sitio. Por ello debemos informar, en cada una de las páginas, el camino recorrido desde la página principal o portada hasta la página actual y, lo haremos empleando una línea de texto por debajo del menú de secciones y por encima de los contenidos. Incluso podemos aprovechar esta línea para permitir, mediante el empleo de enlaces, vueltas hacia atrás en el camino de navegación.

En la imagen siguiente están señaladas cada uno de los elementos mencionados. Se ha empleado como ejemplo la página que habla del Consejo General del Estado en el antiguo sitio Web del Ministerio de Educación y Ciencia.

alt text

Elementos de contenido

El contenido es la parte esencial de una página Web. Es importante que los contenidos estén expresados en un lenguaje claro y conciso y, presentados en un formato agradable y de fácil lectura. Además, si el sitio Web está formado por muchas páginas, el contenido debe situarse siempre en la misma ubicación. También es importante evitar que el usuario tenga que hacer grandes desplazamientos durante la lectura de los contenidos. Siempre es mejor dividir el contenido en más de una página y enlazar unas con otras.

Elementos de interacción

¿Qué son las zonas de interacción?

Cuando el usuario elige el idioma en el que desea ver el sitio, cuando realiza una búsqueda de información rellenando un formulario de búsqueda, cuando manda una opinión o cuando firma un libro de visitas introduciendo sus datos, todos los elementos del sitio necesarios para realizar este tipo de operaciones forman parte de la zona de interacción.

Los elementos que permiten la interacción son muy variados y cada uno de ellos cumple una función concreta:

  • Botón. Elemento que permite al usuario realizar una acción. Se suele utilizar para su representación un rectángulo con efecto de relieve y con un texto escrito que sirve para orientar al usuario sobre la acción que se realizará al presionarlo. Su diseño debe mantenerse en todo el sitio Web.
  • Áreas de texto. Son rectángulos en los que el usuario puede escribir. Deben ir acompañadas de una etiqueta que describa el tipo de información que se le pide al usuario.
  • Botones de opción. Son elementos excluyentes entre sí que están agrupados bajo una misma descripción. Constan de una circunferencia acompañada de un texto descriptivo. Se identifica el que está seleccionado porque contiene un círculo negro.
  • Casillas de verificación. Al contrario de lo que sucede con los botones de opción, las casillas de verificación no son excluyentes entre sí. El usuario puede no seleccionar ninguna, o bien, seleccionar una, algunas o todas las casillas. Suelen ir agrupadas bajo una misma descripción y acompañadas cada una de ellas por un texto descriptivo. Tienen forma de cuadrado que cuando se selecciona queda marcado con una uve “V” o con una doble aspa “X”.

¿Un enlace puede tener forma de botón?

¿Cómo se les llama a las botones de opción en inglés?

¿Cómo se les llama a las casillas de verificación en inglés?

Botones

Los botones tienen 2 características:

  • Importancia: Es si queremos o no que el usuario pulse ahí. A mayor importancia es que queremos que mas veces pulse en ese botón.
  • Función: Es para decir al usuario que tipo de acción está realizando. Por ejemplo , la función “Peligrosa” es roja y nos quiere decir que tengamos cuidado al pulsar ahí.

alt text Tipos de botones

Veamos algunos ejemplos de varios botones juntos:

  • Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
  • Cancelar pago: Terciaria Normal . Nunca queremos que pulse ahí y es una acción normal

  • Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal
  • Vaciar carrito: Terciaria Peligrosa . Nunca queremos que pulse ahí y ademas es peligroso porque se queda sin los productos del carrito

  • Actualizar a la nueva versión de Windows: Primaria Peligrosa . Queremos que pulse ahí y es una acción peligrosa
  • Mantener tu versión de Windows: Secundaria Normal . No queremos que pulse ahí y es una acción normal

  • Donar 20€ a Wikipedia: Primaria Normal . Queremos que pulse ahí y es una acción normal
  • Donar 5€ a Wikipedia: Secundaria Normal . No queremos que pulse ahí y es una acción normal

Maquetación web

La maquetación web es el proceso de estructurar y organizar los elementos visuales de una página web para asegurar que se presenten de manera clara, atractiva y funcional en diferentes dispositivos y tamaños de pantalla. Consiste en definir cómo se disponen los bloques de contenido (como texto, imágenes, menús, etc.) y cómo estos elementos interactúan con el usuario.

A la hora de realizar la maquetación Web, deberemos pensar previamente:

  • Cuáles son los elementos que va a contener cada una de nuestras páginas.
  • Cómo irán colocados cada uno de esos elementos dentro de las páginas teniendo en cuenta siempre el espacio disponible, es decir, la ventana del navegador.

Para diseñar un sitio web, debemos comenzar por hacer una distribución de los grandes bloques de elementos de información.

En los comienzos del HTML, la única forma de estructurar los contenidos de una página web era empleando tablas. Para poder agrupar estos contenidos en los bloques de encabezado, zona de navegación, contenidos y pie, había que anidar unas tablas dentro de otras y definir los tamaños de cada bloque dándole valores, absolutos o relativos, a la altura y anchura de cada celda. Era fácil, aunque laborioso, pero se conseguía situar exactamente cada cosa en su sitio. Había que tener el código HTML con las tabulaciones bien colocadas para no perderse en un maremágnum de etiquetas tr y td.

A día de hoy tenemos otros tipos de display mucho más intuitivos y versátiles como son flex y grid.

Con la aparición de la hojas de estilo, las cuales no hay que confundir con las Guías de estilo que vimos con anterioridad, se tiende a dejar de emplear tanto los marcos como las tablas sustituyendo ambos por el empleo de la etiqueta DIV para definir los bloques y las hojas de estilos para configurar la visualización de dichos bloques. Pero este tema no es tan sencillo por lo que se verá más adelante.

Elementos de ordenación

Cuando diseñamos un sitio Web debemos ser consistentes en la distribución de los grandes bloques en todas las páginas del sitio y debemos tener en cuenta el espacio disponible en la ventana del navegador.

Encabezado

El bloque de Encabezado está situado siempre en la parte superior de cualquier página. Suele contener además de los elementos identificativos del sitio Web: el logotipo, el nombre de la empresa, elementos de acción que permiten cambiar el idioma de lectura, realizar búsquedas, e incluso, si el sitio es muy grande, puede contener elementos de navegación que permanecen a la vista en todas las páginas del sitio.

El bloque de Encabezado se repite en todas las páginas de un sitio Web y debe permanecer visible en todas ellas siempre que sea posible y la complejidad del sitio nos lo permita.

El bloque de Navegación es donde se coloca el sistema de navegación del que ya hemos hablado en el apartado Zonas de navegación, contenido, interacción.

Contenido

El bloque de Contenido es aquel en el que se muestran los contenidos. Los contenidos representan la meta del usuario y la razón por la que visita nuestro sitio Web por lo que debemos prestar mucha atención al diseño de este bloque. Debemos reservar una zona lo suficientemente grande para que el usuario pueda leer los contenidos cómodamente, sin necesidad de realizar grandes desplazamientos. Es importantísimo evitar que el usuario tenga que realizar desplazamientos horizontales para leer el final de cada línea.

Pie

El bloque de Pie de página está situado al final de la página y, al igual que el encabezado, se repite en todas las páginas del sitio. Normalmente se emplea el pie como zona de navegación complementaria a la zona superior situada en el encabezado. En ellas se repiten algunos enlaces que se suelen colocar en el encabezado como el enlace al Mapa del sitio (que veremos en el próximo apartado) o, el enlace a la información de contacto y, además, se colocan algunos enlaces nuevos como los enlaces a la información relativa a los derechos de autor, privacidad e información legal.

El diseño del pie no suele estar tan elaborado como el del encabezado, ya que su importancia es menor. El usuario tiene que ser consciente de que lo que está viendo es el pie. Esto es de gran importancia en aquellos casos en los que, por ser el tamaño vertical de la página mayor que la ventana del navegador, el usuario se ve obligado a desplazarse verticalmente, pudiendo perder de vista el encabezado. Con un diseño más sencillo del pie respecto al resto de los bloques conseguimos esa percepción por parte del usuario.

Mapa de navegación

Cuando un sitio Web es muy grande y complejo, como el antiguo sitio del Ministerio de Educación y Ciencia, es conveniente tener un mapa del sitio que ayude a los usuarios a encontrar lo que buscan.

El mapa del sitio proporciona a los visitantes un lugar donde buscar de forma sencilla los contenidos que le interesan si es que no los ha encontrado ya en la página principal.

Aquí puedes ver un par de mapas de navegación:

A continuación, vamos a ver cuáles son las estructuras más habituales de los mapas de navagación.

El mapa de un sitio Web va a tener una estructura que dependerá de la relación que tengan las páginas del sitio entre sí. Esta relación puede ser de diferentes tipos:

alt text Representación gráfica de las estructuras de mapas de sitios

  • La estructura lineal es adecuada en aquellos sitios compuestos por páginas donde la lectura de las mismas es secuencial. Su estructura es similar a la de un libro donde avanzas de página en página, pero puedes volver a la página anterior y desde ésta a la anterior para releer algún párrafo.
  • La estructura reticular se emplea en aquellos sitios en los que todas sus páginas están relacionadas entre sí. No resulta adecuado cuando el sitio está compuesto por muchas páginas porque el usuario puede llegar a perderse.
  • La estructura jerárquica es la más común. Se emplea en aquellos sitios donde existen varias secciones bien diferenciadas pero de poca complejidad de modo que el usuario no tiene porque navegar de una sección a otra.
  • La estructura lineal jerárquica es también de las más empleadas cuando cada una de las secciones tiene un volumen de información más elevado y conlleva una lectura secuencial del contenido de la sección. También se emplea este método en aquellos sitios en los que sus secciones representan grados de dificultad de la información presentada y se permite la navegación entre secciones.

¿Qué estructura de mapa debería tener esta web?

Tecnologías para el diseño de documentos web

Los sitios Web están compuestos de páginas que están escritas en lenguaje HTML.

HTML, acrónimo de las palabras en inglés HyperText Markup Language o Lenguaje de Marcado de Hipertexto, es el lenguaje de marcado predominante para la elaboración de páginas web. Los documentos escritos en este lenguaje sirven para describir tanto la estructura como el contenido de una página web.

El HTML emplea marcas o etiquetas dentro del documento para informar al navegador de lo que es presentación dentro de un documento y lo hace, normalmente, delimitando el texto entre dos etiquetas: una de apertura y una de cierre, y, digo normalmente, porque hay etiquetas que no tienen etiqueta de cierre. Una etiqueta se distingue del resto porque va encerrada entre corchetes angulares (los símbolos “menor que” y “mayor que”) y tiene unas normas sintácticas que se deben respetar si queremos que el resultado mostrado en el navegador sea el que pretendemos. La mayoría de ellas constan de: nombre de la etiqueta y atributos de la etiqueta, aunque algunas no tienen atributos.

XML, acrónimo de las palabras en inglés de eXtensible Markup Language o Lenguaje de Marcas eXtensible, se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas. XML no es realmente un lenguaje en particular, es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).

A diferencia del HTML en el que los errores sintácticos no producen errores en el navegador y sólo pueden provocar variaciones en la presentación, el XML es muy estricto en cuanto a sus normas de sintaxis.

XHTML, acrónimo de las palabras en inglés de eXtensible Hypertext Markup Language o lenguaje extensible de marcado de hipertexto. Es un lenguaje que utiliza las mismas etiquetas y atributos que el HTML pero aplicando las reglas de sintaxis del XML.

¿Conoces alguna herramienta especializada para hacer diseños web?
  • Balsamiq
  • Figma
  • Adobe XD
  • Sketch

Plantilla de diseño

La reutilización de código es una técnica común que intenta ahorrar tiempo y energía, reduciendo el trabajo redundante.

Las plantillas de diseño Web son sitios Web prediseñados que se pueden usar como base en un diseño Web y que permiten adaptarlo a las necesidades del diseñador de forma rápida y fácil, ahorrando una gran cantidad de tiempo y dinero.

Hoy en día, hay gran cantidad de sitios comerciales que suministran plantillas de diseño Web por muy poco dinero si consideramos el tiempo ahorrado en el diseño.

¿Conoces algún sitio comercial que base su negocio en el uso de plantillas?

Existen webs como Wordpress, Wix, Shopify, Prestashop, Magento, etc. cuyo negocio está basado en el uso de plantillas.

(Voluntario) Lee el artículo Cómo crear una página web paso a paso sin programar si quieres saber más.

Normas y estilos de diseño

Haz que las cosas que no están relacionadas estén muy separadas entre si. Es decir que haya mucho espacio en blanco. Y luego ya veremos si los juntas un poco.

alt text Espacios en blanco mal

alt text Espacios en blanco bien

(Voluntario) Lee el artículo Utilización del espacio en blanco en el diseño de una web.

Los diseño no tienen que ocupar el 100% de la pantalla ya que en pantallas muy grandes queda mal.

Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo.

alt text Interfaz móvil alineada

alt text Interfaz móvil alineada con las líneas marcadas

Resalta lo importante.

Repele la atención de lo que no es importante (más pequeño, más espacioso, de menor contraste).

Evita usar label o captions. Si ves “ventas@persianas.com” ya sabes que es un correo, no hace falta indicar que es el correo. Pero si usas un label que forme parte de una frase. “3 en stock” en vez de “Stock:3”. Y aun así, si las usas, que estén desenfatizadas.

Los títulos <h1> no tienen porque destacar ya que a veces no son importantes ya que es obvio el título. <h1> es para que el buscador sepa que eso es importante.

Las esquinas cuadradas indican seriedad. Las Esquinas muy muy redondeadas son muy informales(border-radius).

Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, usa un color de letra gris en vez del negro del texto.

Nunca usar un carrusel: Mira la web https://shouldiuseacarousel.com/ para saber por qué.

¿En que se fija un diseñador?

Elige entre la imagen de la izquierda o de la derecha y luego se puedo comparar para ver las diferencias: https://cantunsee.space/.

Sistema de tamaños

Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de margenes, fuentes, etc.

alt text

Veamos algunos ejemplos.

Padding o Margin:

1
0px, 4px, 6x, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px

Tamaño de fuente:

1
12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px

Border radious:

1
0px, 2px, 4px, 6px, 8px, 16px

Obviamente se puede elegir los tamaños que se deseen pero se tiene que tener en cuenta que a mayor tamaño , mas debe ser el incremento entre uno y otro.

Experiencia de usuario

La experiencia de usuario (UX, por sus siglas en inglés) en el diseño de software se refiere a cómo una persona interactúa con una aplicación o sistema y qué tan satisfactoria, eficiente y fácil es esa interacción. Es un concepto amplio que abarca muchos aspectos del diseño y desarrollo de software, con el objetivo de crear productos que sean intuitivos, accesibles y agradables para los usuarios. Para conseguir:

  • Retener a los usuarios
  • Hacer que los usuarios cometan menos errores.
  • Diferenciarte de la competencia.
  • Mejorar la eficiencia del usuario.
¿Qué es la ley de Hick?

Diseño de logos

El diseño de logos es un campo muy interesante en el que se pueden cometer muchos fallos como se puede ver en el siguiente vídeo:

¿Por qué es importante la versión de un logo a una tinta?

¿Qué es el kerning?

¿Es recomendable hacer ajustes a un logo en reducciones?

(Voluntario) Si quieres, puedes ver infinidad de logos interesantes en https://www.reddit.com/r/logodesign/.

(Voluntario) Lee el artículo Si quieres crear logos profesionales, gratis y online, ¡hazlo con Canva! para aprender a hacer un logo profesional.

Además existen herramientas que nos facilitan el trabajo para crear un logo resultón:

Fondo de pantalla

Para definir un fondo de pantalla existen varias alternativas:

(Voluntario) Diseño en dispositivos móviles

Lee el artículo Técnicas de diseño web para dispositivos móviles

Lee el artículo Navegación en dispositivos móviles

Lee el artículo Cómo hacer un diseño web adaptable (reponsive design)

Lee el artículo Errores comunes al diseñar para móvil

(Voluntario) Artículos de interés en inglés 🔥

Bibliografía

Este artículo está licenciado bajo CC BY 4.0 por el autor.

Desarrollo Web en Entorno Cliente 24 25

Arquitecturas y lenguajes de programación en clientes web