11 sitios de plantillas CSS no comienzan desde cero!

El diseño web es más accesible que nunca, pero aún requiere mucho trabajo y mucha habilidad. ¿Quieres aprender diseño web? 7 canales de YouTube para comenzar ¿Quieres aprender diseño web? 7 canales de YouTube para comenzar You YouTube tiene miles de videos y canales para principiantes de diseño web. Aquí nos fijamos en algunos de los mejores para empezar. Leer más - para producir resultados de aspecto profesional.

Afortunadamente, no es necesario empezar desde cero cada vez. Hay miles de plantillas CSS gratuitas disponibles en línea, todas abarcando las tendencias y tecnologías de diseño moderno. Puede usarlos en su forma original o personalizarlos para que sean suyos..

En esta guía veremos más de cerca las plantillas CSS y dónde encontrarlas..

¿Qué es una plantilla CSS??

Una plantilla CSS no solo contiene CSS: le brinda todo lo que necesita para crear un sitio web completamente funcional. Cuando descarga una, normalmente obtendrá una carpeta que contiene lo siguiente:

• Archivos HTML - Obtendrá un archivo HTML para cada página del sitio web. Contendrá texto de muestra e imágenes que deberá reemplazar con su propio contenido. También deberá poder ajustar los metadatos, en relación con cosas como la descripción del sitio..
• Archivo CSS - Por lo general, obtiene un archivo CSS principal que contiene todo el estilo del sitio, además de los extras, como una hoja de estilo de restablecimiento, o uno para fuentes web.
• Archivo Javascript - Si el sitio contiene funciones de Javascript, idealmente deberían incluirse en su propio archivo separado, en lugar de incorporarse a los documentos HTML..
• Imágenes, fuentes e iconos. - Cualquier imagen utilizada en la plantilla también debe ser incluida. Es posible que desee conservar elementos como íconos y fondos, pero deberá reemplazar las otras imágenes de marcadores de posición con las suyas. Algunas fuentes personalizadas también podrían ser incluidas.

A diferencia de la mayoría de los otros tipos de plantillas que encontrará, ya sean plantillas de WordPress, Excel o InDesign Los 7 mejores sitios para encontrar plantillas gratuitas de InDesign: libros, folletos, revistas y más Los 7 mejores sitios para encontrar plantillas gratuitas de InDesign: libros, Folletos, revistas y más ¿Qué le parece utilizar una plantilla profesional de Adobe InDesign en lugar de crear la suya propia? Aquí están los mejores sitios de plantillas gratuitas. Leer más: las plantillas CSS requieren una cierta cantidad de conocimientos técnicos.

No hay una interfaz amigable para editarlos, por lo que deberá saber al menos cómo encontrar un documento HTML para agregar su propio contenido. Para hacer tus propias personalizaciones, necesitarás un conocimiento decente de CSS Aprender HTML y CSS con estos tutoriales paso a paso Aprender HTML y CSS con estos tutoriales paso a paso ¿Tienes curiosidad sobre HTML, CSS y JavaScript? Si crees que tienes una habilidad para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee mas .

Qué buscar en una plantilla CSS

Hay tantas plantillas CSS gratuitas para elegir. Entonces, ¿cómo sabes cuál es el adecuado para ti? Aquí hay algunas cosas a tener en cuenta:

• Diseño - Obviamente, usted desea un sitio que se vea bien y que refleje cualquier imagen que quiera retratar. Pero también considere si la plantilla es adecuada para sus necesidades, tanto ahora como en el futuro. Muchos son para sitios web de una página; Algunos están diseñados para múltiples páginas. Si necesita esto último, considere si podría estar mejor usando un CMS como WordPress en su lugar.
• Optimizado para móviles - El uso de la web móvil ahora es más alto que el de escritorio, por lo que es esencial que su sitio funcione correctamente en los teléfonos inteligentes. Cualquier plantilla CSS decente debe usar un diseño responsivo para que el sitio funcione perfectamente en cualquier pantalla de tamaño. Si su elegido no lo hace, cambie a uno que lo haga.
• Bien escrito - Descargue la plantilla y eche un vistazo al código antes de comprometerse a usarlo. Debe estar limpio, bien estructurado y ser fácil de editar. También debe ser consciente de SEO, con el uso correcto de las etiquetas de título y encabezado.
• Licencia - Asegúrese de verificar la licencia de su plantilla CSS elegida. Muchos están disponibles bajo una licencia de Creative Commons ¿Qué es Creative Commons, y debería usarlo? ¿Qué es Creative Commons, y debería usarlo? Creative Commons es un conjunto de licencias que automáticamente le da permiso para hacer varias cosas, como reutilizar y distribuir el contenido. Averigüemos más sobre esto y cómo usarlo. Lea más, pero las diferentes versiones de esta licencia determinan si puede editar la plantilla, si puede usarla comercialmente y si necesita acreditar al diseñador original.
• Addons - Algunos desarrolladores de plantillas CSS ofrecen su trabajo en una “freemium” base. Obtiene la plantilla de forma gratuita, pero tiene la opción de pagar personalizaciones adicionales para hacerla única en su sitio.

Con todo lo que se explica, echemos un vistazo a los mejores lugares para encontrar plantillas CSS gratuitas.

1. Templated.co

Esta impresionante colección de más de 800 plantillas CSS contiene estilos para cada clase de sitio web. Todos están creados especialmente para el sitio, por lo que no deberías verlos en ningún otro lugar..

Todas las plantillas son responsivas, y están construidas con HTML5. Son pequeños y ligeros, con funciones de JavaScript adicionales, como una caja de luz de video o efectos de desplazamiento, que solo se usan cuando agregan valor real a la experiencia.

2. Styleshout.com

Styleshout ofrece una amplia gama de plantillas gratuitas y premium, la anterior lanzada bajo la licencia Creative Commons.

Las plantillas gratuitas cubren una amplia gama de categorías, desde sitios web completos hasta páginas Próximamente, e incluso la página de error 404 que a menudo se pasa por alto Cómo hacer una gran página de error 404 y 10 ejemplos Cómo hacer una gran página de error 404 y 10 ejemplos A inteligentemente la página de error 404 diseñada puede ser la diferencia entre un sitio web aburrido y un sitio web memorable. Lee mas . Puede personalizarlos usted mismo y adaptarlos al estilo de su sitio existente, o puede pagar para que Styleshout lo haga por usted..

3. HTML5Up.net

Esta colección súper elegante de plantillas también es súper popular. La mayoría se han descargado cientos de miles de veces, y es fácil ver por qué.

Todas las categorías habituales de sitio están diseñadas, como el blog y la página de productos, y hay algunos diseños particularmente agradables para que los fotógrafos muestren su trabajo. Las plantillas básicas de estilo de cuadrícula son extremadamente personalizables, mientras que las más llamativas tienden a usar Javascript bastante, por lo que pueden ser menos adecuadas para tus ajustes.

4. Freebiesbug.com

Lo que a Freebiesbug le falta en cantidad lo compensa en calidad. Un sitio donde los jóvenes desarrolladores muestran sus habilidades, incluye muchos diseños de alta gama y de alta calidad..

La impresionante colección de plantillas gratuitas del sitio es perfecta para agencias, fotógrafos, desarrolladores de aplicaciones y otros creativos. Equipado con efectos y animaciones de Javascript y CSS, puede personalizar los sitios, aunque a menudo son tan agradables que tal vez no quiera.

Además, Freebiesbug.com incluye todo tipo de recursos gratuitos para diseñadores web, incluidas fuentes, fotos de archivo, bocetos de Illustrator No pague por Adobe Illustrator: esta alternativa gratuita es genial No pague por Adobe Illustrator: esta alternativa gratuita es genial Adobe Illustrator es impresionante, pero cuesta bastante debido a la suscripción de Creative Cloud. Esta alternativa de aplicación web es casi tan buena y no cuesta nada! Leer más y archivos PSD, y más.

5. Free-CSS.com

Free-CSS.com es un sitio web sin adornos que ofrece, al momento de redactar este artículo, unas 2503 plantillas gratuitas, además de muchas de las mejores también, en caso de que aún no pueda encontrar lo que está buscando.

Con tantos para elegir, puede ser un poco difícil conformarse con el diseño perfecto. La calidad es generalmente buena, aunque la existencia de 10 años del sitio significa que aún alberga plantillas escritas en XHTML. Usted querrá evitar estos. La otra cosa es asegurarse de verificar la licencia para la plantilla elegida. Todos son gratuitos, pero algunos son de dominio público, algunos de Creative Commons y otros usan una licencia específica de autor..

6. OS-Templates.com

28 páginas de plantillas CSS gratuitas, en su mayoría con diseños modernos basados ​​en cuadrícula en una sola página. Si lo que buscas es simple, entonces este es el lugar para buscar. Los diseños son limpios, atractivos y fáciles de personalizar..

OS-Templates.com también ofrece una gran colección de “plantillas basicas”. Estos le brindan la estructura básica de un sitio web en varios esquemas de diseño populares (dos columnas, tres columnas, etc.), mientras que están completamente sin estilo. Al igual que con el tema predeterminado en WordPress, el lienzo en blanco le permite convertir su sitio en cualquier cosa que desee.

7. boag.online

Maglev es una plantilla de sitio web de una sola página que puede previsualizarse en acción en boag.online.

Es una plantilla rápida y limpia, ideal para una página de producto. El diseño minimalista está aumentado solo con unos pocos efectos Jquery para ayudarlo a desplazarse entre las secciones. El diseño simple funciona por derecho propio, pero también es un excelente punto de partida para sus propias personalizaciones..

8. Pixel Buddha

Las plantillas de Pixel Buddha no se limitan solo a los sitios web, sino que también incluyen algunos para boletines por correo electrónico..

De cualquier manera, todos están diseñados con HTML5 y CSS3, y son receptivos, por lo que se ven muy bien en cualquier dispositivo. Los aspectos más destacados incluyen Howdy HTML, una hermosa carpeta / plantilla de currículum vitae Las últimas 5 aplicaciones y sitios de creación de currículum vitae Las últimas 5 aplicaciones y sitios de cesión de currículum que alguna vez necesitará Use estos fantásticos sitios de compilación de currículum y aplicaciones cuando lo necesite para hacer que tu CV se destaque entre la multitud. Con las herramientas adecuadas, puede crear un currículum único rápidamente incluso sin habilidades de diseño. Lea más, y SOHO HTML, una impresionante página de comercio electrónico que incluye los archivos PSD de origen sobre HTML y CSS.

9. Templatemo.com

Casi 500 plantillas gratuitas están disponibles en Templatemo. Algunos de los mejores son los que se liberan del sistema de cuadrícula estilo Bootstrap para probar algo diferente.

La mayoría de las plantillas son simples y ordenadas, aunque se incluyen funciones como cajas de luz y carruseles de contenido donde se necesitan. También nos gusta el hecho de que varias de las plantillas están configuradas para trabajar con hasta seis páginas de forma predeterminada. Esto lo hace más fácil si su contenido no se ajusta al diseño cada vez más común de una página..

10. Startbootstrap.com

Bootstrap es un marco de aplicaciones para el usuario increíblemente popular que le permite crear sitios web de alta calidad en muy poco tiempo. Sin embargo, toma un poco de tiempo aprender, que es donde entra en marcha Bootstrap.

Esta colección de plantillas gratuitas de código abierto se construye utilizando el sistema de rejilla de Bootstrap. Creación de interfaces web: dónde comenzar a crear interfaces web: dónde comenzar Le mostraremos cómo se desglosan las interfaces web, luego señalaremos los conceptos clave, herramientas y bloques de construcción necesarios para hacerte un diseñador web del siglo 21. Lee mas . Hay más de 30 para elegir. Algunos están totalmente diseñados y destinados a aplicaciones, blogs y páginas de destino, mientras que otros son diseños en blanco que esperan que usted los revise..

11. Bootswatch.com

Finalmente, algo un poco más práctico. Bootswatch ofrece 16 temas de código abierto para diseñar sitios creados con Bootstrap.

Puede crear el diseño de su sitio usted mismo usando Bootstrap o descargar una de las plantillas en blanco de Start Bootstrap. Lo que hace Bootswatch es cambiar las fuentes, los colores de fondo y el estilo de los botones, menús y otros elementos. Le da a su sitio un aspecto único mientras se mantiene fiel al espíritu ultra limpio de Bootstrap.

Es fácil armar un sitio web básico con Bootstrap, y Bootswatch le da un poco de pulido instantáneo.

Cómo utilizar plantillas CSS

En términos generales, hay dos formas de usar plantillas. O los usa como están o los usa como base para su propio diseño.

El peligro al usar plantillas es que usted termina con un sitio web que es idéntico al de otra persona. Elija una plantilla popular y podría haber literalmente decenas de miles de sitios idénticos. Este es el principal argumento a favor de personalizarlos..

Las plantillas CSS son un gran atajo para los diseñadores web experimentados que tienen un diseño básico en mente y quieren saltar directamente al estilo..

También son perfectos para cualquier persona nueva en el diseño web. Si sabe cómo utilizar HTML y CSS pero aún no tiene la confianza o el conocimiento para construir un sitio desde cero, una plantilla CSS es una forma fácil de obtener un sitio con un aspecto atractivo y una herramienta de aprendizaje increíble..

Puedes tratarlo como un trabajo en progreso. Comience por cambiar las fuentes ¿Desea Gorgeous Free Fonts? Aquí hay más de 25 sitios donde los encontrarás ¿Quieres tener hermosas fuentes gratuitas? Aquí hay más de 25 sitios donde los encontrará. En lugar de leer cientos de fuentes, aquí hay algunos sitios que lo ayudarán a mantenerse al día con todas las fuentes nuevas que querrá usar en su próximo diseño. Lee más y cambia el esquema de color Cómo elegir un esquema de color como un profesional Cómo elegir un esquema de color como un profesional Los colores son difíciles. Puede parecer bastante fácil elegir un puñado de colores que se ven bien juntos, pero como lo dirá cualquier diseñador que haya pasado horas ajustando los tonos: es complicado. Lea más, y con el tiempo podrá rediseñar los elementos existentes, agregar nuevos, etc. No hay mejor manera de aprender nada que a través de la experiencia práctica y práctica..

¿Utilizas plantillas CSS al crear sitios web? ¿Cuáles son tus lugares favoritos para encontrarlos? Comparte tus experiencias y consejos con nosotros en los comentarios..

Explorar más sobre: ​​CSS, diseño web.