Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. WordPress
Business

Cómo crear un sitio web con diseño plano usando plantillas de WordPress

Spanish (Español) translation by Elena Pari (you can also view the original English article)

En los últimos años, el diseño plano se ha vuelto cada vez más popular y continúa dominando el mundo de la web y el diseño gráfico.

¿Qué es el diseño plano? En esencia, el diseño plano se centra en la facilidad de uso y evita la inclusión de sombras, biseles, degradados y otros elementos estéticos que distraen de lo que realmente importa: el contenido. Por lo general, se caracteriza por una tipografía grande y audaz, iconos lineales y fondos sólidos de colores brillantes.

El diseño plano se hizo popular primero gracias a Microsoft, gracias al rediseño de toda su interfaz de usuario en Windows 8. Luego fue rápidamente adoptado por Google y Apple, y poco a poco se generalizó. Ahora se utiliza en numerosas plantillas de diseño web.

En este tutorial, aprenderás cómo crear rápidamente un sitio web con diseño plano usando un tema de WordPress. Pero primero, mira estos excelentes ejemplos de sitios diseñados aplicando esta tendencia.

5 ejemplos geniales de sitios web con diseño plano

Antes de pasar al tutorial, he aquí cinco ejemplos de sitios web cuyo diseño plano te servirá de inspiración para tu próximo proyecto:

1. Blocklevel

Blocklevel flat website design example

Blocklevel es una agencia de diseño digital holandesa. Su sitio web presenta un diseño plano con un fondo oscuro y colores vivos en toda su página de inicio. El sitio también tiene mucho espacio en blanco alrededor de los elementos, lo que le da un aspecto limpio al diseño. Debido a esto, la navegación es fácil y los visitantes se sienten atraídos al instante por las diferentes secciones en la página de inicio.

2. Made By Fibb

Made by Fibb flat website design example
Made by Fibb

Made by Fibb es otro ejemplo de una agencia que usa diseño plano. Notarás de inmediato el color amarillo brillante, un menú de navegación replegado para no saturar el resto de la página y una tipografía llamativa que es fácil de leer.

3. Playground.Inc

Playground Inc flat website design example
Playground.Inc

Playground Inc. optó por un fondo rojo brillante combinado con tipografía blanca en su sección de inicio y un fondo blanco con letras negras para las siguientes secciones. El diseño plano de este sitio incluye unas animaciones que son perfectas para captar la atención.

4. Geckoboard

Geckboard flat website design example
Geckoboard

La especialidad de Geckoboard es crear paneles de control personalizados para que los dueños de negocios y los coordinadores de equipos puedan realizar un seguimiento de parámetros importantes. El diseño plano de este sitio web combina un fondo gris oscuro con toques de verde brillante y una tipografía elegante.

5. TriplAgent

TripIAgent flat website design example
TriplAgent

La agencia de viajes TriplAgent optó por un diseño de estilo plano con un color púrpura y una magnífica fotografía para ilustrar varias guías que tienen en su sitio. El menú principal se encuentra oculto y la tipografía blanca combinada con botones fantasma hace que sea fácil notar las llamadas a la acción.

Cómo utilizar una plantilla de WordPress con diseño plano para crear tu sitio web

Si quieres crear un sitio web moderno para tu negocio, portafolio o blog, un tema con diseño plano es una excelente opción. En este artículo, te mostraremos cómo usar una de nuestras plantillas de WordPress para crear un hermoso sitio web con diseño plano que seguramente atraerá la atención del público.

Voy a usar el tema Kirion que es una plantilla multipropósito de WordPress con un estilo de diseño plano. Gracias a su versatilidad, se puede usar tanto para sitios empresariales como para portafolios. Incluye varias demostraciones ya listas, un maquetador de páginas fácil de usar y muchas opciones de personalización para adaptarlo a tu propio estilo.

Kirion flat WordPress website design template
Kirion - Plantilla de WordPress para crear un sitio web con diseño plano

Preparación: Antes de comenzar a diseñar tu sitio web

Antes de comenzar a crear tu sitio web con diseño plano, tienes que elegir y comprar un nombre de dominio. Asimismo, debes obtener un plan de hosting profesional para alojar todos los archivos de tu sitio web.

También es una buena idea elegir un tema de WordPress y preparar el texto y las imágenes que incluirás en el sitio. Así será más fácil simplemente copiar y pegar el contenido, en lugar de escribirlo desde cero a medida que vas creando el sitio.

1. Compra tu nombre de dominio

Elegir el nombre de dominio correcto ciertamente no es fácil. Sin embargo, hay algunos factores que debes tener en cuenta y que te ayudarán a reducir tus opciones. 

Piensa en el propósito de tu sitio. ¿Es un sitio comercial para una empresa ya establecida? ¿Estás creando un portafolio personal? ¿O quizá quieres iniciar tu propio blog?

Para los sitios comerciales, es una buena idea usar el nombre de la empresa, mientras que los propietarios de un portafolio personal generalmente pueden usar su propio nombre.  Si tienes un blog, piensa en los temas de tu blog y elige un nombre relacionado con lo que escribirás. Así será más fácil que los lectores sepan lo que pueden esperar en términos de contenido.

Siempre que sea posible, trata de usar una extensión .COM y recuerda mantener el nombre fácil de deletrear y fácil de pronunciar.

2. Obtén un plan de alojamiento web profesional

Tendrás que elegir una empresa de alojamiento para instalar WordPress en su servidor y publicar tu sitio. Hay muchas empresas de alojamiento, y WordPress incluso recomienda algunas de buena reputación.

También puedes optar por Envato Hosted. Envato Hosted ofrece alojamiento premium gestionado para WordPress por un pago mensual de $19 USD (+ impuestos aplicables), junto con la instalación del tema que elijas y servicio técnico premium.

Professional WordPress Website Hosting Plan
Envato Hosted - Alojamiento profesional de WordPress que incluye la instalación fácil del tema para tu sitio web

El plan también incluye:

  • Hasta 100,000 visitas mensuales de tráfico, 5GB de espacio en el disco y 100GB de ancho de banda mensual.
  • Copias de respaldo diarias, servidor seguro y monitoreo del sitio, así como apoyo constante de nuestro equipo de expertos en WordPress.

3. Obtén un tema premium de WordPress

El siguiente paso es elegir y comprar un tema para el sitio. Como lo mencioné anteriormente, hay muchos temas de WordPress con diseño plano y lo mejor de elegir un tema de WP premium es que su autor ofrece respaldo garantizado. También puedes estar seguro de que el tema se actualizará periódicamente para que el diseño no se quede con parámetros antiguos.

4. Prepara el contenido y los elementos del diseño

El último paso de la preparación es escribir el contenido y reunir todas las imágenes y recursos visuales (como tu logotipo, favicón, imágenes o patrones de fondo, etc.) y tenerlos en un lugar fácilmente accesible.

Cómo crear tu sitio web con diseño plano en WordPress

Ahora que ya tienes listo el nombre del dominio, un plan de hosting, un tema profesional y todo el contenido, es hora de comenzar a diseñar el sitio web. Tendrás que instalar WordPress, el tema, los plugins necesarios, configurar las páginas y personalizar el sitio. ¡Empecemos!

1. Instalar WordPress

Cuando compras los planes de alojamiento, el proveedor de hosting enviará un correo electrónico de bienvenida que contiene la información de tu cuenta. Necesitarás el nombre de usuario y la contraseña que te proporcionen para iniciar sesión en el panel de control de tu cuenta. Una vez que hayas iniciado la sesión, ve a la sección Sitio web o Scripts y busca WordPress. Selecciónalo y luego sigue los pasos para instalar WordPress.

En la mayoría de los casos deberás ingresar el título y la descripción del sitio, estabecer un nombre de usuario y una contraseña, así como ingresar tu dirección de correo electrónico. Después de haber completado toda la información, haz clic en el botón Instalar.

El proceso de instalación generalmente toma un par de minutos. Después de eso, recibirás un mensaje que confirma la instalación de WordPress. Para iniciar sesión en el panel de control, ve a www.yoursitename.com/wp-admin e ingresa el nombre de usuario y la contraseña que creaste durante la instalación.

2. Carga tu tema de WordPress

Ahora que has iniciado sesión en el panel, debes instalar el tema de WordPress con diseño plano que compraste. Ve a Apariencia > Temas > Agregar nuevo. A continuación, haz clic en Cargar tema.

Después de eso, ubica la carpeta comprimida que contiene los archivos del tema WP y súbela. Una vez que la instalación esté lista, haz clic en Activar.

Si estás usando el tema Kirion como en este tutorial, tendrás que instalar el tema padre, Layers WP, que se puede descargar de forma gratuita y no necesitas activarlo. Simplemente sube LayersWP, luego sube el tema de WordPress Kirion y actívalo.

3. Instala los plugins requeridos de WordPress

El siguiente paso es instalar los plugins necesarios. Verás una notificación en el panel que indica qué plugins son necesarios, junto con un enlace para ir directamente a la pantalla de instalación.

required WordPress plugins
Instalar los complementos necesarios de WordPress

Selecciona todos los plugins y elige Instalar en el menú desplegable. Una vez instalados, ve a Plugins > Todos los plugins y selecciona Plugins inactivos. Luego selecciona Activar en el menú desplegable.

Cómo personalizar tu nuevo sitio web con diseño plano

Ahora que el diseño del tema de WordPress y los complementos se han instalado y activado, puedes comenzar a configurar las páginas web y a personalizar colores, fuentes y más. En la mayoría de los casos, la mejor manera de acelerar el tiempo de configuración del tema y facilitar la edición de los contenidos es importar el contenido de demostración.

Si deseas utilizar el contenido de demostración, deberás dirigirte al panel y encontrar el submenú llamado Herramientas > Importar. Allí, busca WordPress Importer, instálalo y luego haz clic en Importar. Usualmente, la carpeta de temas tendrá una subcarpeta llamada Demo Import o Sample Data. Usa los archivos XML en una de esas carpetas para importar todas las publicaciones, páginas, diseños e imágenes.

Configura las páginas de un sitio web con el tema Kirion

La otra opción, si estás usando el tema de Kirion, ve a Layers > Agregar nueva página. Como puedes ver en la siguiente captura de pantalla, Kirion incluye varias plantillas de página que puedes usar para construir tu sitio web. Yo elegí la de Kirion Home Layout One para la página de inicio.

Ingresa el nombre de la página y luego haz clic en Personalizar. Tu página se creará instantáneamente y serás redirigido al editor de personalización.

Una vez que carga el editor de personalización, puedes ver todas las opciones disponibles. Puedes editar el diseño haciendo clic en la opción Editar diseño. El editor es bastante directo y fácil de usar. Todo lo que tienes que hacer es seleccionar el elemento deseado y reemplazar el contenido con el tuyo. También puedes editar el fondo, cargar tus propias imágenes destacadas, reemplazar las imágenes de los sliders y mucho más.

Editing layout in Kirion flat wordpress website theme
Edición del diseño

Para crear y editar páginas adicionales, ve a Layers > Agregar nueva página y elige el diseño con el que deseas trabajar.

adding pages
Agregar nuevas páginas en Kirion

Editar la apariencia visual y los menús

Si deseas editar los estilos, selecciona Configuración del sitio. Aquí puedes editar los colores, las fuentes, cargar tu propio logotipo y más.

colors
Personaliza los colores de tu sitio web

Finalmente, necesitarás crear un menú para tu sitio. En el editor de personalización, haz clic en Menús > Menú principal. Primero elige una ubicación para el menú. Para el ejemplo he elegido un menú de cabecera. Luego haz clic en Agregar elementos. Añade todas las páginas que has creado y luego guarda el menú.

5 tutoriales y cursos para ayudarte a dominar el diseño plano

Si deseas saber más sobre el diseño plano y aplicar sus principios en tu sitio, estos tutoriales y cursos te ayudarán a dar el primer paso:

1. Los 10 mejores consejos para crear gráficos con diseño plano

Este tutorial presenta los mejores consejos para crear gráficos que funcionen bien en cualquier sitio web de diseño plano. Aprenderás un poco sobre la historia del diseño plano y cómo crear iconos simples pero impactantes, cómo usar colores y más.

2. Domina el diseño plano - Curso de Envato Tuts+

Este curso ofrece un recorrido a profundidad a través de la estética plana, y explica cómo aplicarla en tus propios diseños. Aprenderás a configurar tu archivo de Photoshop, crear un diseño para un sitio web y diseñar todos los elementos que se utilizarán en el diseño plano, como iconos, formularios, menús y más.

3. Cómo diseñar iconos planos en Affinity Designer

Si te gusta trabajar con Affinity Designer, este curso te encantará. Aprenderás todo sobre el proceso de creación de iconos vectoriales planos; consejos y trucos útiles para trabajar con formas geométricas básicas, modificarlas y usar varias operaciones para combinar las formas. El curso también explica cómo alinear y organizar los objetos y las funciones principales del programa.

4. Diseño y desarrollo de una UI estilo plano

Prueba este curso si planeas crear elementos de diseño para IU. El curso te enseñará cómo crear menús, botones, pestañas, reproductores de video, selectores de fecha y otros elementos de la interfaz de usuario usando un estilo de diseño plano.

5. Diseño de iconos planos - Curso de Envato Tuts+

Este curso cubre tanto Adobe Photoshop como Adobe Illustrator, dos potentes programas considerados el estándar de la industria en lo que respecta al diseño. En el curso, aprenderás cómo crear diseños de iconos planos, cómo exportarlos y cómo monetizar tus esfuerzos creativos.

Crea tu sitio web con diseño plano hoy mismo

Crear un sitio web aplicando el diseño plano es ahora más fácil que nunca gracias a WordPress y a los temas con diseño plano bonitos, premium y de alta calidad. Comienza a trabajar hoy mismo en tu sitio web navegando por nuestra colección de temas de WordPress con diseño plano. No te olvides de echar un vistazo a Envato Hosted si necesitas un alojamiento asequible y confiable para el sitio web de tu negocio o portafolio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.