Share
En los últimos años, el diseño plano se ha vuelto cada vez más popular y continúa dominando el mundo del diseño web y gráfico..
¿Qué es el diseño plano? En esencia, el diseño plano se centra en la facilidad de uso y la falta de sombras, biselados, degradados y otros elementos estéticos que alejan el enfoque de lo que realmente importa: su contenido. Por lo general, se caracteriza por una tipografía grande y audaz, iconos de líneas y fondos de colores sólidos con colores brillantes.
El diseño plano se hizo popular por primera vez por Microsoft, ya que rediseñó su interfaz de usuario completa en Windows 8. Fue adoptada rápidamente por Google y Apple, y poco a poco se convirtió en la corriente principal, y ahora se utiliza en numerosas plantillas de diseño web.
En este tutorial, aprenderá cómo crear su propio sitio web de diseño rápido usando un tema de WordPress de estilo plano. Pero primero, algunos ejemplos impresionantes de diseño de sitios planos:
Antes de profundizar en este tutorial, aquí hay cinco ejemplos de sitios web planos para inspirarte para tu próximo proyecto:
Blocklevel es una agencia de diseño digital de los Países Bajos. Su sitio web presenta un diseño de sitio web plano con un fondo oscuro y toques de colores vivos en toda su página de inicio. El sitio también tiene un montón de espacios en blanco alrededor de los elementos que le dan a todo el sitio un aspecto limpio. Debido a esto, el sitio es fácil de navegar y los visitantes son atraídos instantáneamente a diferentes secciones en la página de inicio.
Hecho por FibbHecho por Fibb es otro ejemplo de agencia que usa diseño plano. Inmediatamente notará el color amarillo brillante, un menú de navegación que se ha hecho a un lado para que no abarrote el resto de la página, y una tipografía en negrita que es fácil de leer..
Parque infantil inc..Playground Inc. optó por un fondo rojo brillante combinado con una tipografía blanca en su encabezado y un fondo blanco con una fuente negra y en negrita. El sitio también utiliza un diseño de sitios web de estilo plano con íconos animados que capturan perfectamente la atención..
GeckoboardLa especialidad de Geckoboard es crear paneles personalizados para que los dueños de negocios y los gerentes de equipos puedan realizar un seguimiento de las métricas importantes. Su sitio web utiliza un fondo gris oscuro con toques de tipografía verde y elegante en un estilo de diseño plano..
Agente de viajeTriplAgent, la agencia de viajes, optó por un diseño de estilo plano con color púrpura y una hermosa fotografía para ilustrar las diversas guías que tienen en su sitio. El menú principal se ha desplazado hacia un lado y la tipografía blanca combinada con los botones fantasma hace que las llamadas a la acción sean fáciles de notar.
Si desea crear un sitio web moderno para su negocio, cartera o blog, optar por un tema plano es una excelente opción. En la publicación de hoy, le mostraremos cómo usar una de nuestras plantillas de sitio web de WordPress para crear un sitio web hermoso que atraiga la atención de sus visitantes..
Usaré el tema Kirion, que es una plantilla de sitio web de WordPress multiuso con un elegante diseño plano. Gracias a su versatilidad, se puede utilizar para sitios de negocios así como para sitios de cartera. Ofrece varias demostraciones prefabricadas, un generador de páginas fácil de usar y muchas opciones de personalización para que sea realmente tuyo..
Plantilla de diseño de sitio web de WordPress plana Kirion.Antes de comenzar a diseñar el diseño de su sitio web plano, es necesario elegir un nombre de dominio y comprarlo, así como obtener un plan de alojamiento profesional que albergue todos los archivos de su sitio web..
También es una buena idea elegir un tema de WordPress y preparar el texto y las imágenes que se incluirán en su sitio web. Esto facilitará simplemente copiar y pegar su contenido, en lugar de escribirlo desde cero mientras construye su sitio..
Elegir el nombre de dominio correcto ciertamente no es fácil. Sin embargo, hay algunas cosas que debe tener en cuenta que lo ayudarán a limitar sus opciones..
Piense en el propósito de su sitio. ¿Es un sitio de negocios para una empresa ya establecida? ¿Estás creando un portafolio personal? Quizás quieras iniciar tu propio blog.?
Para los sitios de negocios, es una buena idea seguir con el nombre de su negocio, mientras que los propietarios de carteras personales generalmente pueden ir con su propio nombre. Si eres un blogger, considera los temas de tu blog y elige un nombre que esté relacionado con lo que escribirás. Esto facilitará a los lectores saber lo que pueden esperar en términos de contenido..
Siempre que sea posible, intente ir con una extensión .COM y recuerde mantener el nombre fácil de deletrear y fácil de pronunciar.
Tendrá que elegir una empresa de alojamiento para poder instalar WordPress en su servidor y hacer que su sitio esté disponible para los visitantes. Hay un montón de empresas de hosting y WordPress incluso tiene recomendaciones para hosts de buena reputación..
El siguiente paso es elegir y comprar un tema para su sitio. Como se mencionó anteriormente, hay muchos temas de WordPress planos y la mejor parte de la elección de un tema de WP premium es su respaldo garantizado por parte del autor. También puede estar seguro de que el tema se actualizará de manera regular para que no se quede estancado con un diseño de tema de sitio web obsoleto..
El último paso de preparación es escribir el contenido y recopilar todas las imágenes y recursos visuales, como su logotipo, su favicon, cualquier imagen de fondo o patrones y tenerlos en algún lugar de fácil acceso..
Ahora que tiene su nombre de dominio, un plan de alojamiento, un tema profesional y todo su contenido listo, es hora de comenzar a hacer el diseño de su sitio web. Deberá instalar WordPress, el tema, los complementos necesarios, configurar sus páginas y personalizar su sitio. Vamos a empezar!
Cuando compre sus planes de alojamiento, el proveedor de alojamiento le enviará un correo electrónico de bienvenida con la información de su cuenta. Necesitará el nombre de usuario y la contraseña que le proporcionaron para poder iniciar sesión en el panel de su cuenta. Una vez que haya iniciado sesión, desplácese a la sección Sitio web o Scripts y busque WordPress. Selecciónelo y luego siga los pasos para instalar WordPress en su sitio..
En la mayoría de los casos, deberá ingresar el título y la descripción de su sitio, configurar su nombre de usuario y contraseña deseados, así como completar su dirección de correo electrónico. Después de haber completado toda la información, haga clic en Instalar botón.
El proceso de instalación suele tardar un par de minutos. Después de eso, verás un mensaje que indica que WordPress ha sido instalado. Para iniciar sesión en su panel de control, vaya a www.yoursitename.com/wp-admin e ingrese el nombre de usuario y la contraseña que creó durante la instalación.
Ahora que ha iniciado sesión en su panel de control, debe instalar el tema de WordPress plano que compró. Ir Apariencia> Temas> Añadir nuevo. Luego, haga clic en Subir tema.
Después de eso, encuentre la carpeta comprimida que contiene los archivos del tema WP y cárguela. Una vez realizada la instalación, haga clic en Activar.
Si está utilizando el tema de Kirion como en este tutorial, deberá instalar el tema principal, LayersWP, que se puede descargar de forma gratuita y no es necesario que lo active. Simplemente cargue LayersWP, luego cargue el tema Kirion WordPress y actívelo.
El siguiente paso es instalar los complementos necesarios. Notará una notificación en su panel que le indicará qué complementos son necesarios, junto con un enlace que lo llevará directamente a la pantalla de instalación.
Instalar los plugins de WordPress requeridos.Selecciona todos los complementos y elige Instalar desde el menú desplegable. Cuando se hayan instalado los complementos, vaya a Complementos> Todos los complementos y seleccione Complementos inactivos entonces escoge Activar desde el menú desplegable.
Ahora que el diseño del tema de WordPress y los complementos se han instalado y activado, puede comenzar a configurar las páginas de su sitio web y personalizar los colores, las fuentes y más. En la mayoría de los casos, la mejor manera de acelerar el tiempo de configuración de su tema y facilitar la edición del contenido es importar el contenido de la demostración..
Si desea utilizar el contenido de demostración, deberá ir a su panel de control y encontrar el submenú llamado Herramientas> Importar. Allí, encontrar Importador de WordPress, instálalo, y luego haz clic Ejecutar importador. Por lo general, su carpeta de temas tendrá una subcarpeta llamada Demo Import o Data de muestra. Use los archivos XML en una de esas carpetas para importar todas las publicaciones, páginas, diseños e imágenes..
Alternativamente, si está utilizando el tema Kirion, vaya a Capas> Añadir Nueva Página. Como puede ver en la captura de pantalla a continuación, Kirion incluye varias plantillas de página que puede usar para construir su sitio web. Elegí el Kirion Home Layout One para la página de inicio.
Ingrese el nombre de la página y luego haga clic en proceder a personalizarr. Su página se creará instantáneamente y será redirigido a Personalizador pantalla.
Cuando se carga el Personalizador, puede ver todas las opciones disponibles. Puede editar el diseño haciendo clic en el Editar diseño opción. El editor es bastante sencillo 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 puede editar el fondo, cargar sus propias imágenes destacadas, reemplazar imágenes del control deslizante y mucho más.
Edición de diseño.Para crear y editar páginas adicionales, vaya a Capas> Añadir Nueva Página y elige el diseño con el que te gustaría trabajar.
Adición de nuevas páginas web en Kirion.Si desea editar los estilos, seleccione Configuración del sitio. Aquí puede editar colores, fuentes, cargar su propio logotipo y más.
Personalizando los colores en tu web plana..Finalmente, deberás crear un menú para tu sitio. En el Personalizador, haga clic en Menús> Menú Principal. Primero, elija una ubicación para el menú. He elegido encabezamiento menú. Luego, haga clic en Agregar articulos. Agrega todas las páginas que has creado y luego guarda el menú.
Si desea obtener más información sobre diseño plano y aplicar sus principios a su sitio, hemos recopilado algunos tutoriales y cursos para ayudarlo a comenzar:
Este tutorial presenta los mejores consejos para crear gráficos que funcionarán bien con cualquier sitio web de tipo plano. Aprenderá un poco sobre el historial de diseño plano, así como sobre cómo crear iconos simples pero impactantes, cómo usar colores y más.
Este curso es un recorrido en profundidad de la estética plana, y cómo lograrlo en sus propios diseños. Aprenderá cómo configurar su archivo de Photoshop, crear un diseño para un sitio web plano y diseñar todos los elementos que se utilizarán, como iconos, formularios, menús y más.
Si te gusta trabajar con Affinity Designer, te encantará este curso. Aprenderá todo sobre el proceso de creación de iconos vectoriales planos; Sugerencias y trucos útiles para trabajar con formas geométricas básicas, modificarlas y utilizar varias operaciones para combinar las formas. El curso también cubre cómo alinear y organizar los objetos y las funciones principales del programa..
Intente este curso si planea crear elementos de diseño de UI. El curso trata sobre cómo crear menús, botones, pestañas, reproductores de video, recolectores de fecha y otros elementos de la interfaz de usuario usando un estilo de diseño plano.
Este curso cubre tanto Adobe Photoshop como Adobe Illustrator, dos programas poderosos considerados el estándar de la industria cuando se trata de diseño. En el curso, aprenderá cómo crear diseños de iconos planos, cómo exportarlos y cómo monetizar sus esfuerzos creativos..
Crear un sitio web plano nunca ha sido tan fácil gracias a WordPress y hermosos temas premium de alta calidad. Comience a trabajar en su sitio web de planos hoy, explorando nuestra colección de temas de WordPress planos..
Accentsconagua