Mejores prácticas y consejos de diseño web receptivo

A medida que Google continúa dando prioridad a los sitios optimizados para dispositivos móviles, tener un sitio web receptivo para su empresa se vuelve cada vez más importante. Cuando su sitio web sea receptivo, se verá genial en todos los dispositivos (móvil, tableta, computadora de escritorio, etc.)

Si bien puede parecer desalentador revisar su sitio existente, el diseño de un sitio web receptivo no tiene por qué ser difícil. A continuación, se incluyen algunos consejos prácticos y las mejores prácticas que lo ayudarán a producir un excelente producto de sitio web utilizable fácilmente y sin complicaciones.

Define tu estilo

Creación de una paleta de colores

Ya sea que esté trabajando con una paleta de colores de marca predefinida o creando la suya propia, recuerde incluir suficientes colores contrastantes para que pueda establecer una jerarquía visual bien definida. Agregar varios tonos de colores neutros le dará mucha flexibilidad a sus diseños.

Piense primero en el móvil

Piense primero en cómo se verán sus elementos web en dispositivos móviles pequeños y luego aplíquelos a tamaños de ventana gráfica más grandes. Por ejemplo, ¿sus botones son lo suficientemente grandes como para presionarlos con un dedo y están lo suficientemente separados de otros elementos en los que se puede hacer clic?

Cree su guía de estilo después de sus diseños iniciales, no antes

A algunas personas les gusta crear una guía de estilo y definir sus estilos de elementos web antes de comenzar un prototipo o maqueta de alta fidelidad. Sin embargo, una vez que los elementos se colocan en la página y se ven entre sí, el diseño general de la página puede perderse. Cree algunas maquetas para comenzar, establezca sus estilos y luego complete las páginas restantes si es necesario.

Consistente no tiene por qué significar aburrido

Las heurísticas de usabilidad son importantes, pero también lo es destacar entre los miles de millones de otros sitios web en la web. No tenga miedo de probar algo diferente, para ser más memorable y ayudar a que la marca de su sitio web se destaque entre la multitud. Su sitio web puede ser creativo y también muy usable. Un gran diseñador de interfaz de usuario o director de arte digital debería poder equilibrar estos dos elementos.

Algunos elementos que puede querer diseñar y estandarizar incluyen:

• Niveles de titulares: H1, H2, H3…
• Imágenes principales o de héroe
• Navegacion primaria
• Navegación Secundaria
• Copia de cuerpo
• Listas numeradas y con viñetas
• Llamadas o distintivos
• Tratamiento de imágenes de contenido
• Estilo de comillas extraídas
• Widgets (rotadores, incrustaciones sociales, calendarios, etc.)
• Grandes botones de llamada a la acción
• Botones secundarios o enlaces de texto
• Elementos de formulario
• Notas al pie y tipos de ratones legales
• compartir social

Escribe

Copiar bloques

Juega con el espacio entre letras (seguimiento), los márgenes y el espacio entre líneas (interlineado) para ayudarte a redefinir tu jerarquía. Cuanto más reducido sea el espacio, más pesado y claustrofóbico parecerá el texto.

Tenga en cuenta que los bloques largos de texto que se extienden desde el lado izquierdo hasta el derecho de la pantalla de su escritorio pueden ser muy molestos para la vista. Utilice un bloque de copia más estrecho cuando sea posible. Sin embargo, demasiado espacio puede crear una sensación de aridez y dispersión.

No tengas miedo de romperlo

Si tiene una página web con mucho contenido, divida un poco el contenido con citas, llamadas, imágenes, listas con estilo, tablas, etc. También puede incorporar acordeones, menús desplegables y carruseles para mantener la página interesante e informativa. .

Sí, la gente SÍ se desplaza hacia abajo

No caiga en la trampa de la vieja escuela de pensar que todo en su página web debe aparecer arriba del pliegue digital. Mantenga el contenido más importante o atractivo cerca de la parte superior de la página para llevar al usuario más abajo. Esto podría ser un título creativo pero descriptivo, una oración introductoria convincente o una imagen poderosa.

RELACIONADO

Principales tendencias de diseño de 2020

Tipo de dimensionamiento

En términos generales, apéguese a un tamaño de fuente de 14 a 18 píxeles para un sitio web receptivo. En general, use fuentes simples sans o serif para esos bloques de texto más grandes y manténgalos sobre un fondo claro con un color de tipografía que contraste moderadamente. El título principal puede ser más grande, pero tenga en cuenta que es posible que deba diseñarse un poco más pequeño después de encontrar un punto de interrupción de tamaño móvil.

Tipo Color

El truco con el color de la tipografía es que debe tener suficiente contraste con el fondo para que pueda verlo fácilmente, pero lo que muchos diseñadores no saben es que, a veces, la tipografía puede tener demasiado contraste y es áspera a la vista, lo que hace que parezca vibrar. cuando se ve Trate de usar un tipo de letra más claro sobre un fondo más oscuro con moderación y solo para bloques de texto más pequeños.

Tipo Peso

Los estilos de fuente de mayor peso pueden ser difíciles de leer en tamaños más pequeños y pueden hacer que la página parezca oscura y pesada en tamaños más grandes. Los estilos de fuente finos y ligeros se ven muy bien en pantallas retina y tipo retina, pero pueden verse tenues en muchas pantallas de resolución estándar.

Navegación

Hamburguesas!

El Navicon es el ícono que también parece un pequeño sándwich o hamburguesa con tres líneas de apilamiento. Si cree que su grupo demográfico general de usuarios no es tan inteligente con las tecnologías en línea, siempre incluya la palabra "menú" arriba o al lado del Navicon . Los estudios de usuarios hasta la fecha muestran que un usuario es más apto para navegar por su sitio si incluye la palabra Menú o Navegar al lado o encima del Navicon.

Incluya un botón 'Volver al principio' en la parte inferior de la página de desplazamiento largo

La investigación nos dice que muchos usuarios de dispositivos móviles no saben cómo saltar fácilmente a la parte superior de una página web dentro de su navegador web móvil. Para solucionar esto, proporcione un botón "volver al principio" en la parte inferior de su página web. Esto permitirá que un usuario acceda fácilmente a la navegación del sitio si no se refleja en el pie de página.

Otra opción es crear una navegación fija. Esta es una barra de navegación del sitio superior que siempre se mantiene en la parte superior de la pantalla, sin importar cuánto se desplace hacia abajo en la página. Si elige seguir esta ruta, asegúrese de que su navegación fija no tenga más de 100 px de alto o podría quedarse sin espacio para el contenido de su página en tamaños de ventana de visualización más pequeños.

Glosario de diseño:

Gritar
un breve fragmento de texto con un tratamiento más fuerte que el resto de la página y destinado a llamar la atención.

Copiar bloque
un párrafo agrupado o una serie de párrafos de texto.

El pliegue (digital)
se utiliza en el diseño de sitios web (junto con " por encima del desplazamiento") para referirse a la parte de la página web que es visible sin desplazarse. Como los tamaños de pantalla varían drásticamente, no existe una definición establecida para el número de píxeles que definen el pliegue .

Serif
una ligera proyección que termina un trazo de una letra en ciertos tipos de letra.

sans serif
un tipo de letra sans - serif , sans serif , gothic, san serif o simplemente sans es aquel que no tiene las pequeñas características salientes llamadas “ serifs ” al final de los trazos. El término proviene de la palabra francesa sans , que significa "sin" y " serif " de la palabra holandesa schreef que significa "línea".

Tipo (tipográfico) Peso
Oscuridad relativa de los caracteres de un tipo de letra resultante del grosor relativo de los trazos, expresada como clara, negrita, extranegrita, etc.

Usuario
una persona que usa u opera algo, especialmente una computadora, dispositivo u otras máquinas.

vista
un área enmarcada en una pantalla de visualización para ver información.

espacio en blanco
en el diseño de página, la ilustración y la escultura, el espacio en blanco a menudo se denomina espacio negativo. Es la parte de una página que queda sin marcar: márgenes, medianeras y espacio entre columnas, líneas de texto, gráficos, figuras u objetos dibujados o representados.