Home-theater-designers
El diseño web es más accesible que nunca, pero aún requiere mucho trabajo y mucha habilidad para producir resultados de apariencia profesional.
Afortunadamente, no es necesario empezar desde cero cada vez. Hay miles de plantillas CSS gratuitas disponibles en línea, todas con tendencias y tecnologías de diseño modernas. Puede usarlos en su forma original o personalizarlos para hacerlos suyos.
En esta guía, analizaremos 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 en pleno funcionamiento. 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 cosas como la descripción del sitio.
- Archivo CSS - Por lo general, obtiene un archivo CSS principal que contiene todo el estilo del sitio, más cualquier extra como una hoja de estilo restablecida o una para las fuentes web.
- Archivo Javascript - Si el sitio contiene funciones de Javascript, idealmente deberían incluirse en su propio archivo separado, en lugar de incorporarse en los documentos HTML.
- Imágenes, fuentes e íconos - También se deben incluir todas las imágenes utilizadas en la plantilla. Es posible que desee conservar 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á, ya sea Wordpress, Excel o Plantillas de InDesign - Las plantillas CSS requieren cierta cantidad de conocimientos técnicos.
No hay una interfaz amigable para editarlos, por lo que deberá saber al menos cómo orientarse en un documento HTML solo para agregar su propio contenido. Para realizar sus propias personalizaciones, necesitará un conocimiento decente de CSS.
aplicación gps gratuita para teléfonos android
Qué buscar en una plantilla CSS
Hay tantas plantillas CSS gratuitas para elegir. Entonces, ¿cómo saber cuál es el adecuado para usted? 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 tanto ahora como en el futuro. Muchos son para sitios web de una página; algunos están diseñados para varias páginas. Si necesita lo último, considere si sería mejor utilizar un CMS como Wordpress en su lugar.
- Optimizado para móviles - El uso de la web móvil ahora es mayor que el del 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 cualquier tamaño de pantalla. 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 estar limpio, bien estructurado y fácil de editar. También debe ser consciente de SEO, con un uso correcto de las etiquetas de título y encabezado.
- Licencia - Asegúrese de verificar la licencia de su plantilla CSS elegida. Muchos estan disponibles bajo una licencia Creative Commons , 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.
- Complementos - Algunos desarrolladores de plantillas CSS ofrecen su trabajo sobre una base 'freemium'. Obtiene la plantilla de forma gratuita, pero tiene la opción de pagar por personalizaciones adicionales para que sea única para su sitio.
Con todo lo explicado, 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ía verlos aparecer en ningún otro lugar.
Todas las plantillas son receptivas y están creadas con HTML5. Son pequeños y livianos, con características adicionales de Javascript, como una caja de luz de video o efectos de desplazamiento, que solo se usan cuando agregan un valor real a la experiencia.
2. Styleshout.com
Styleshout ofrece una amplia gama de plantillas gratuitas y premium, la primera publicada bajo la licencia Creative Commons.
Las plantillas gratuitas cubren una amplia gama de categorías, desde sitios web completos hasta páginas de Próximamente, e incluso la página de error 404 que a menudo se pasa por alto. 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 elegante colección 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é.
Todas las categorías habituales de sitios están atendidas, como blog y página de producto, y hay algunos diseños particularmente agradables para que los fotógrafos muestren su trabajo. Las plantillas de estilo de cuadrícula básicas son extremadamente personalizables, mientras que las más llamativas tienden a usar Javascript bastante, por lo que pueden ser menos adecuadas para sus ajustes.
4. Freebiesbug.com
Lo que le falta a Freebiesbug en cantidad lo compensa con creces 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 otros creativos. Repleto de animaciones y efectos de JavaScript y CSS, puede personalizar los sitios, aunque a menudo son tan agradables que es posible que no desee.
Además, Freebiesbug.com incluye todo tipo de recursos gratuitos para diseñadores web, incluidas fuentes, fotos de archivo, bocetos de Illustrator y archivos PSD, y más.
5. Free-CSS.com
Free-CSS.com es un sitio web sencillo que ofrece, en el momento de redactar este artículo, unas 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 de autor.
6. OS-Templates.com
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 que busca 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 básicas'. Estos le brindan la estructura básica para un sitio web en varios esquemas de diseño populares (dos columnas, tres columnas, etc.), mientras que no tienen 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 se puede vista previa en acción en boag.online .
Es una plantilla rápida y limpia, ideal para la página de un producto. El diseño minimalista se ve aumentado solo por algunos efectos de Jquery para ayudarlo a desplazarse entre las secciones. El diseño simple funciona por derecho propio, pero también lo convierte en un excelente punto de partida para sus propias personalizaciones.
8. Pixel Buda
Las plantillas de Pixel Buddha no se limitan solo a sitios web, también incluyen algunas para boletines informativos 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 aspectos más destacados incluyen Howdy HTML, una hermosa plantilla de portafolio / currículum, y SOHO HTML, una página de comercio electrónico de aspecto impresionante que incluye los archivos PSD de origen en la parte superior del HTML y CSS.
¿Puedo usar auriculares bluetooth con Xbox One?
9. Templatemo.com
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 se incluyen características 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 hace que sea más fácil si su contenido no se ajusta al diseño de una página cada vez más común.
10. Startbootstrap.com
Bootstrap es un marco de interfaz de usuario increíblemente popular que le permite crear sitios web de alta calidad en muy poco tiempo. Sin embargo, se necesita un poco de tiempo para aprender, que es donde entra en juego Start Bootstrap.
Esta colección de plantillas gratuitas de código abierto se crea utilizando el sistema de cuadrícula de Bootstrap. 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 los modifique.
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 ultralimpio de Bootstrap.
Es fácil armar un sitio web básico con Bootstrap, y Bootswatch le da un toque instantáneo.
Cómo utilizar plantillas CSS
En términos generales, hay dos formas de utilizar las plantillas. O los usa tal cual o los usa como base para su propio diseño.
El peligro al usar plantillas es que terminas con un sitio web 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.
¿Pueden dos personas ver Netflix al mismo tiempo?
Las plantillas CSS son un gran atajo para diseñadores web experimentados que tienen un diseño básico en mente y quieren saltar directamente a diseñarlo.
También son perfectos para cualquier persona nueva en el diseño web. Si conoce HTML y CSS, pero aún no tiene la confianza o el conocimiento para construir un sitio desde cero, una plantilla CSS sirve tanto como una manera fácil de obtener un sitio de gran apariencia como como una herramienta de aprendizaje increíble.
Puede tratarlo como un trabajo en progreso. Empiece por cambiar las fuentes y cambiando el esquema de color 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.
¿Utiliza plantillas CSS al crear sitios web? ¿Cuáles son tus lugares favoritos para encontrarlos? Comparta sus experiencias y consejos con nosotros en los comentarios.
Cuota Cuota Pío Correo electrónico Cómo limpiar su PC con Windows usando el símbolo del sistemaSi su PC con Windows se está quedando sin espacio de almacenamiento, limpie la basura con estas rápidas utilidades del símbolo del sistema.
Leer siguiente Temas relacionados- Programación
- Web Design
- CSS
Andy es un ex periodista impreso y editor de revistas que ha estado escribiendo sobre tecnología durante 15 años. En ese tiempo ha contribuido a innumerables publicaciones y ha realizado trabajos de redacción publicitaria para grandes empresas de tecnología. También ha proporcionado comentarios de expertos para los medios de comunicación y ha organizado paneles en eventos de la industria.
Más de Andy BettsSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse