Todo sobre Apple, Android, Juegos Apks y Sitios de Peliculas

9 reglas de diseño simples para hacer que su sitio sea más hermoso

“Soy repugnante en diseño”.

Lo he escuchado muchas veces antes.

Conozco a muchos que administran sitios web y crean buen contenido, pero insisten en que no les gusta el diseño.

¡Disparates!

Creo que cualquiera puede mejorar su ojo para el diseño, pero si necesita ayuda, esta publicación es para usted.

En este tutorial encontrarás 9 Principios básicos de diseño que puede aplicar a todo lo que hace.

He escrito estos consejos para que sean lo más procesables posible para que sean fáciles de implementar en su sitio web.

Vea esta lista cuando necesite hacer una elección de diseño y le prometo que el resultado será un poco más hermoso.

Empecemos con…

1. Nunca use texto en color

Si no sabe lo que está haciendo, el texto en color tiende a ser feo y difícil de leer.

Como regla de oro, siempre haga que su texto sea blanco o negro.

Si tiene texto en color en su sitio web, debe elegir hacerlo.

Esto es lo que quiero decir.

Ejemplo 1

Este botón tiene texto azul y un fondo gris claro. Se ve un poco plano y el texto está considerando la forma del botón:

Si busco los colores con azul para el fondo y el texto claro, se ve mucho mejor:

Y mientras hablamos de botones …

Si su botón tiene un fondo de color, casi siempre se ve mejor con texto blanco.

El texto negro tiende a verse horrible encima del color a menos que ese color sea realmente pálido o simplemente un gris más claro:

Si normalmente usa texto en color en sus publicaciones, apreciará las ideas en los siguientes ejemplos.

Ejemplo # 2

Como otro ejemplo, puede tener texto en color en una publicación porque desea que se destaque, así:

¡Este texto no se ve tan bien porque es azul!

Hay formas más estéticamente agradables de llamar la atención con el color. Sin mencionar que algunos colores (como el azul) hacen que el texto sin formato parezca un enlace.

Otro método para resaltar el color es hacer que el texto sea blanco y el fondo azul:

Esto es mucho color, ¡así que úsalo con moderación!

O puede reducir la saturación para que el fondo sea muy pálido y luego hacer que el texto sea negro para una apariencia más sutil:

El texto negro se ve bien en fondos pálidos.

O puede dejar el texto en negro y agregar un toque de color alrededor del texto:

Este es un aspecto más simple que aún se destaca.

O puede combinar un fondo y un borde:

Esta es otra forma atractiva de usar el color.

Para resumir las reglas para el texto coloreado:

Debe usar un fondo o borde de color alrededor del texto en lugar de cambiar el texto de color. El blanco siempre se ve mejor en fondos de color a menos que el color sea muy pálido.

Ahora vamos a elegir los colores a usar.

widgets

2. Usa una paleta de colores

Elegir colores sobre la marcha es un gran error de novato.

Cuando use color en su sitio, debe hacerlo Elige siempre un color de tu paleta.

Al usar una paleta, simplemente puede elegir entre sus colores existentes y saber que el resultado se verá bien y “en el terreno” sin ningún esfuerzo.

Y aquí está la cosa …

He sido diseñador web durante varios años y todavía me resulta difícil crear bonitas paletas de colores.

Y es por eso que estoy haciendo trampa

Nunca creo mis propias paletas de colores. En cambio, encuentro una hermosa paleta de colores que ya se ha hecho y luego la retoco para satisfacer mis necesidades de diseño.

Mi recurso secreto para encontrar paletas de colores es Color Hunt.

Caza de color

Este increíble sitio tiene un grupo de miembros que crean y comparten paletas de colores a medida que diseñan.

Si navega por el sitio web, encontrará una lista interminable de hermosas paletas para elegir. Al hacer clic en cualquier paleta, accederá a su página donde se enumeran las paletas relacionadas a continuación.

Página de paleta

Honestamente, es muy divertido navegar por las paletas y obtener ideas e inspiración para su sitio web.

Si ya tiene un tono en mente, puede elegir un color para comenzar a usar la barra de búsqueda.

Búsqueda de color

Las palabras clave predefinidas como “caliente” y “frío” también están disponibles para encontrar paletas apropiadas.

Cuando elige una paleta que le gusta e implementa los colores de su sitio web, se sorprenderá de la gran diferencia que hace.

Estos dos primeros consejos deberían engañar a sus visitantes para que piensen que usted es un maestro en el diseño de gestión del color.

¡Ahora hablemos de las fuentes!

3. Usar unicamente 1 o 2 fuentes

Los colores deben seleccionarse de su paleta. Las fuentes son similares.

Tienes que elegir una o dos fuentes y luego usarlas para todo.

A menudo, cuando los usuarios de WordPress aprenden a cambiar las fuentes en su sitio, ¡de repente quieren usarlos todos!

Por ejemplo, he visto a personas cambiar la fuente de una pieza para que sea excelente en una publicación. Esa es una mala idea. Si necesita texto para destacar en una publicación, puede:

Aumentar falla de caracteres (negrita) Aumentar tamaño de caracteres Agregar color

Cuando se trata de fuentes, deberías Elija uno o dos para todo el sitioY si crees que necesitas más que eso, piensa en esto …

Google diseñó la fuente Roboto (que también puede usar, está en las fuentes de Google), y usan esta fuente.

Lo usan para Google.com, Youtube, Gmail, Google Docs, Chrome, literalmente, todos sus productos usan esta fuente para todo el texto.

Entonces, si está convencido de que necesita más de una fuente para un sitio web hermoso, ¡piense de nuevo!

4. Utilice una fuente popular sans serif

Tengo un nuevo atajo para ti.

En lugar de explorar cientos de fuentes, le recomiendo que elija entre las fuentes más exitosas en la web.

Esta estrategia básicamente garantiza que su sitio web se verá bien.

Para hacer esto, visite Google Fonts y encuentre las fuentes de moda que figuran en el sitio web.

Fuentes de Google

Para refinar los resultados, haga clic en el menú desplegable y anule la selección de todas las excepciones.

Categorías de fuentes

Si elige una de las fuentes enumeradas ahora, su sitio se verá fantástico.

Tenga en cuenta que la mayoría del texto en su sitio aparece en sus publicaciones y la fuente de calidad más importante es que es fácil de leer

Todas las fuentes sans serif más populares son populares porque son legibles y atractivas. Y si te preguntas …

¡Esto es lo que yo también hago!

Cuando diseño nuevos temas, generalmente voy a las fuentes de Google y busco inspiración de las fuentes de moda.

Cuando quiero agregar un poco más de carácter al diseño, uso esta próxima táctica.

5. Use una fuente de pantalla para encabezados

Si está satisfecho con una fuente, puede omitir esta táctica.

Pero si siente que su creatividad está un poco obstaculizada por una selección tan simple, esto es lo que puede hacer …

Use una fuente para los encabezados de su sitio.

La primera fuente que seleccionó fue diseñada para leerse en tamaños pequeños, pero una fuente está diseñada específicamente para tamaños grandes (como pantallas grandes, ¿entiendes?).

La cuestión es que las fuentes de pantalla a menudo son muy ordenadas, por lo que usarlas en exceso puede hacer que su sitio se vea llamativo.

Los titulares son el lugar perfecto para usar fuentes de pantalla porque:

Siempre son grandes. Se utilizan en dimensiones.

Si lo desea, también puede reutilizar la fuente de visualización para el título (o logotipo) de su sitio web.

Para encontrar una fuente de visualización para su sitio, visite Google Fonts nuevamente, pero esta vez, cambie las categorías para incluir solo fuentes, como esta:

Fuentes de pantalla seleccionadas

Verá directamente de las fuentes de moda la mayor variedad que hay con las fuentes.

Fuentes de pantalla

A partir de ahora, hay alrededor de 300 fuentes de pantalla en Google Fonts, así que diviértete navegando y recuerda elegir solo una.

Aquí hay otro consejo de diseño basado en texto que hará que su sitio sea más hermoso.

6. Haga que las opciones del menú sean una palabra

De todos los consejos de diseño enumerados en esta publicación, este es el más fácil de implementar.

Echa un vistazo al menú Compete Themes:

Captura de pantalla del menú del tema del concurso

Las opciones del menú son proporcionales y están distribuidas de manera uniforme, lo que hace que se vea bien.

Al crear su menú, debe hace que cada elemento del menú sea una palabra. La razón se reduce al espacio.

Vea, por ejemplo, cómo se distribuyen los elementos del menú en The New York Times.

Nuevo menú seleccionado

Es fácil navegar por los temas y separar cada uno.

Cuando agrega más palabras a un elemento del menú, cancela ese espacio. La opción del menú se vuelve mucho más larga que las otras y los espacios entre las palabras crean un vacío en el diseño.

En la siguiente captura de pantalla, agrego elementos de menú falsos al NUEVO menú en diferentes palabras. Mira cuán confuso se vuelve el menú:

Nuevo menú editadoLos espacios en los elementos del menú son difíciles de distinguir de los espacios entre los elementos del menú.

Si bien los elementos de menú con una palabra funcionan mejor, a veces está bien usar otra palabra si es necesario. Solo asegúrese de que haya mucho más espacio entre los elementos del menú que entre las palabras en los elementos del menú.

Wistia usa dos palabras en las opciones del menú y se ve bien porque hay mucho espacio entre las opciones del menú:

Menú de Wistia

Acortar todas las opciones de menú largo solo toma unos minutos y al instante hace que su sitio sea más atractivo.

Y si no lo sabía, podría hacer que las etiquetas de los elementos de su menú fueran diferentes a los títulos de las páginas. Este video le enseña cómo crear menús personalizados y cambiar las etiquetas de menú:

Los siguientes consejos lo ayudarán a hacer que su contenido sea más atractivo.

7. Balance de texto con medios

Si quieres que tu sitio web sea increíble, el contenido en sí debe ser hermoso.

Estudie el contenido en sitios populares como Buzzfeed, Washington Post o Bloomberg Businessweek y encontrará el mismo patrón.

Comparten constantemente texto con imágenes, mapas, videos, citas, tweets y otras imágenes.

BuzzFeedEsta lista de Buzzfeed contiene imágenes, botones para compartir, enlaces y encabezados para casi todas las piezas.

Lo llamaré La regla de 4 puntos.

Asegúrate de editar tus publicaciones incluir un elemento visual en cada 4 puntos.

El objetivo es mantener el contenido visualmente interesante para que no se vuelva aburrido a medida que los lectores se mueven de pieza en pieza. Visual también hace que el contenido sea más informativo y divertido de leer.

Con la capacitación, aprenderá a hacer esto naturalmente mientras escribe, pero siempre puede navegar por su publicación después de hacerlo y encontrar lugares para incluir nuevas imágenes.

Para dividir una línea larga, puede agregar:

Fotos Blockquotes Videos Tweets Insertar Tablas de anuncios Nuevos encabezados Listas 😉

También es una buena idea usar texto en negrita en partes importantes de su texto para llamar la atención y crear más interés visual.

Y para ser claros: no es necesario incluir un elemento visual cada cuarto párrafo. Es una buena aproximación para usar al dominar esta técnica.

Como acabo de decirle que incluya muchas fotos en sus publicaciones, aquí hay un consejo para hacerlo de la manera correcta.

8. Imágenes de ajuste central

Las imágenes en WordPress pueden tener cualquiera de los siguientes ajustes:

Al agregar fotos a tus publicaciones, debes hacerlo Utilice siempre el ajuste central.

Además, asegúrese de que la imagen sea tan ancha como el contenido de la publicación.

Así es como veo todas mis fotos en mis publicaciones y la mayoría de los editores también lo hacen de esta manera.

Si selecciona una orientación hacia la izquierda o hacia la derecha, la imagen fluye “de lado” para que el texto se ajuste a ella, de esta manera:

Imagen liquida“Flotar” es el nombre de la propiedad CSS utilizada para ajustar el texto alrededor de imágenes como esta.

La última línea de texto que está casi completamente debajo de la imagen siempre parece incómoda, pero hay otra razón por la que este ya no es un estilo popular.

Puede verse horrible en el móvil:

Mala imagen móvil

Los bloggers solían mover imágenes en sus publicaciones de esta manera, pero eso era cuando los sitios web tenían un ancho predefinido y solo eran visibles en las computadoras.

Ahora su contenido tiene que adaptarse a tamaños de pantalla de 400 px a 2, 560 px de ancho.

Probablemente ya haya elegido un tema receptivo, pero su tema no le impedirá publicar imágenes flotantes, ya que es su elección.

Quiero decir, alinea todas tus imágenes al centro y se verán geniales en todos los dispositivos. Tan simple como eso.

Si desea un poco más de variedad, puede usar el nuevo estilo de imagen ancha en Gutenberg (requiere soporte de tema):

Imagen amplia

Tengo un último consejo para que tus fotos y otros medios se vean bien.

9. Coloca tus medios en columnas

Esto es algo que veo en muchos de los sitios de usuarios para mis temas.

Al agregar múltiples elementos multimedia (imágenes, sonidos, videos) se apilan uno por uno.

Funciona bien, pero no es el mejor uso del espacio. Los usuarios tienen que desplazarse demasiado para enviar las imágenes, solo pueden ver una imagen a la vez y no saben cuántas imágenes quedan mientras navegan.

Si inserta tres o más imágenes seguidas, use una galería.

Al usar una galería, puede ver todas las imágenes a la vez sin desplazarse.

Galería

Y sé lo que estás pensando ahora …

“Está bien, pero quiero que las imágenes sean más grandes que eso”.

Para eso es a. Puede instalar un complemento lightbox como este y los visitantes pueden hacer clic en una imagen en la galería para ver una versión más grande en pantalla completa.

Grabación de pantalla 2019 12 17  kl. 01:58

En lugar de tener que navegar por todas las imágenes, los visitantes pueden verlas todas al mismo tiempo en un atractivo diseño de galería. Cuando hacen clic en una imagen, el cuadro de luz también muestra la imagen más grande que si se hubiera insertado en la publicación.

En otras palabras, usar una galería te ofrece lo mejor de ambos mundos.

El bloque de galería facilita la inclusión de galerías de imágenes, y puede usar el bloque de columnas para enumerar columnas de audio y video incrustados (y todo el otro contenido).

Los bloques de columnas ahora son aún más fáciles de usar en WP 5.3, y puede seguir esta guía sobre cómo agregar columnas a las instrucciones posteriores.

Cuando encuentre una larga lista de medios incrustados en su publicación, sabrá que este es el momento perfecto para usar columnas.

Haz un mejor sitio

Con estos 9 Reglas de diseño Estás listo para crear un sitio web más hermoso.

La mejor parte es que no lleva mucho tiempo implementar ninguno de estos principios. Simplemente saber qué hacer es la mitad de la batalla.

Si desea comenzar con el pie derecho, asegúrese de elegir un tema que haga que su contenido se vea bien y que esté en el camino hacia una mejor estética.

Resumen del Contenido