11 sitios de plantillas CSS: ¡no comience desde cero!

Anuncio

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 comenzarYouTube tiene miles de videos y canales para principiantes en diseño web. Aquí vemos algunos de los mejores para comenzar. Lee mas - para producir resultados de aspecto profesional.

Afortunadamente, no necesita comenzar desde cero todo el tiempo. Hay miles de plantillas CSS gratuitas disponibles en línea, que abarcan todas 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 que funcione completamente. Cuando descarga uno, normalmente obtendrá una carpeta que contiene lo siguiente:

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

A diferencia de la mayoría de los otros tipos de plantillas que encontrarás, ya sea WordPress, Excel o Plantillas de InDesign Los 7 mejores sitios gratuitos de plantillas de InDesign para libros, folletos, revistas y másLas plantillas gratuitas de InDesign pueden ser difíciles de encontrar. Nuestra lista seleccionada de sitios web de plantillas de Adobe InDesign cubre todas sus necesidades de diseño. Lee mas - Las plantillas CSS requieren una cierta cantidad de conocimiento técnico.

No hay una interfaz amigable para editarlos, por lo que necesitará saber al menos cómo orientarse en un documento HTML solo para agregar su propio contenido. Para hacer sus propias personalizaciones, necesitará un conocimiento decente de CSS Aprenda HTML y CSS con estos tutoriales paso a paso¿Tienes curiosidad por HTML, CSS y JavaScript? Si cree que tiene una habilidad especial 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, quieres un sitio que se vea bien y refleje cualquier imagen que quieras retratar. Pero también considere si la plantilla es adecuada para sus necesidades ahora y en el futuro. Muchos son para sitios web de una página; algunos están diseñados para múltiples páginas. Si necesita este último, considere si es mejor usar un CMS como WordPress.
• Móvil optimizado - 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 receptivo para que el sitio funcione perfectamente en pantallas de cualquier tamaño. Si el elegido no lo hace, cambie a uno que sí lo haga.
• Bien escrito - Descargue la plantilla y eche un vistazo al código antes de comprometerse a usarlo. Debe ser limpio, bien estructurado y fácil de editar. También debe ser compatible con 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 Creative Commons ¿Qué es Creative Commons y uso no comercial?¿Qué es Creative Commons? ¿Qué significa "uso no comercial"? Aprenda sobre las licencias Creative Commons y cómo funcionan. Lee mas , pero diferentes versiones de esta licencia determinan si puede editar la plantilla, si puede usarla comercialmente y si necesita acreditar al diseñador original.
• Complementos - Algunos desarrolladores de plantillas CSS ofrecen su trabajo de forma "freemium". Obtiene la plantilla de forma gratuita, pero tiene la opción de pagar personalizaciones adicionales para que sea única en su sitio.

Con todo eso explicado, echemos un vistazo a los mejores lugares para encontrar plantillas CSS gratuitas.

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ía verlos surgiendo en ningún otro lugar.

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

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

Las plantillas gratuitas cubren una amplia gama de categorías, desde sitios web completos hasta páginas disponibles próximamente, e incluso las que a menudo se pasan por alto. Página de error 404 Cómo hacer una gran página de error 404 y 10 ejemplosUna página de error 404 diseñada de manera inteligente 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.

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

Se atiende a todas las categorías habituales de sitios, como blog y página de productos, y hay algunos diseños particularmente buenos 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 sus ajustes.

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

La impresionante colección de plantillas gratuitas del sitio es perfecta para agencias, fotógrafos, desarrolladores de aplicaciones y otras creatividades. Repleto de efectos y animaciones de Javascript y CSS, puede personalizar los sitios, aunque a menudo son tan agradables que quizás no desee.

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

Free-CSS.com es un sitio web sin lujos que ofrece, al momento de escribir, algunas 2503 plantillas gratuitas, además de muchas premium, en caso de que aún no pueda encontrar lo que está buscando.

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

28 páginas de plantillas CSS gratuitas, en su mayoría con diseños modernos basados ​​en cuadrículas en una sola página. Si lo simple es lo que buscas, 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 básicas". Estos le dan la estructura básica para 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 lo que desee.

7. boag.online [Ya no está disponible]

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

Es una plantilla rápida y limpia, ideal para una página de producto. El diseño minimalista se ve incrementado solo por 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.

Las plantillas de Pixel Buddha no solo se limitan a sitios web, sino que también incluyen algunas 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 geniales en cualquier dispositivo. Los puntos destacados incluyen Howdy HTML, un hermoso plantilla de cartera / currículum Las últimas 5 aplicaciones y sitios para crear currículums que necesitaráUse estos fantásticos sitios y aplicaciones de creación de currículums cuando necesite que su CV se destaque entre la multitud. Con las herramientas adecuadas, puede crear un currículum único rápidamente, incluso sin habilidades de diseño. Lee mas y SOHO HTML, una página de comercio electrónico de aspecto increíble que incluye los archivos PSD de origen en la parte superior de HTML y CSS.

Cerca de 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 las características como las cajas de luz y los carruseles de contenido se incluyen donde se necesitan. También nos gusta el hecho de que varias de las plantillas están configuradas para funcionar con hasta seis páginas de forma predeterminada. Esto facilita la tarea si su contenido no se ajusta al diseño de una página cada vez más común.

Bootstrap es un marco front-end increíblemente popular que le permite crear sitios web de alta calidad en muy poco tiempo. Sin embargo, lleva un poco de tiempo aprender, que es donde entra en juego Start Bootstrap.

Esta colección de plantillas gratuitas de código abierto está construida utilizando Sistema de cuadrícula de Bootstrap Creación de interfaces web: dónde comenzarLe mostraremos cómo se descomponen las interfaces web, luego le indicaremos los conceptos clave, las herramientas y los componentes básicos necesarios para convertirse en un diseñador web del siglo XXI. Lee mas . Hay más de 30 para elegir. Algunos están completamente diseñados y destinados a aplicaciones, blogs y páginas de destino, mientras que otros son diseños en blanco que esperan que le dé un estilo.

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

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

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

Cómo usar plantillas CSS

En términos generales, hay dos formas de usar plantillas. Los usas tal cual o los usas como base para tu propio diseño.

El peligro al usar plantillas es que terminas 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 argumento principal a favor de personalizarlos.

Las plantillas CSS son un excelente acceso directo para diseñadores web experimentados que tienen un diseño básico en mente y quieren comenzar a diseñarlo.

También son perfectos para cualquier persona nueva en diseño web. Si conoce bien HTML y CSS pero aún no tiene la confianza o el conocimiento para construir un sitio desde rascar y luego una plantilla CSS sirve como una manera fácil de obtener un sitio de gran aspecto y un aprendizaje increíble herramienta.

Puedes tratarlo como un trabajo en progreso. Comience por cambiar las fuentes Los 8 mejores sitios web de fuentes gratuitas para fuentes gratuitas en líneaNo todos pueden pagar una fuente con licencia. Estos sitios web lo ayudarán a encontrar la fuente gratuita perfecta para su próximo proyecto. Lee mas y cambiando el esquema de color Cómo elegir un esquema de color como un profesionalLos colores son complicados. Puede parecer bastante fácil elegir un puñado de colores que se vean bien juntos, pero como cualquier diseñador que haya pasado horas ajustando los tonos te dirá: es complicado. Lee mas y, con el tiempo, puede rediseñar los elementos existentes, agregar otros nuevos, etc. No hay mejor manera de aprender nada que a través de la experiencia práctica y práctica.

¿Utiliza plantillas CSS cuando crea sitios web? ¿Cuáles son tus lugares favoritos para encontrarlos? Comparta sus experiencias y consejos con nosotros en los comentarios.