11 Css sitios de plantilla: no empezar de cero!

El diseño web es más accesible que nunca, pero todavía tiene mucho trabajo - y mucha habilidad - para producir resultados de aspecto profesional.¿Quieres aprender diseño web? 7 canales de YouTube para que pueda empezar¿Quieres aprender diseño web? 7 canales de YouTube para que pueda empezarYouTube tiene miles de vídeos y canales para principiantes de diseño web. Aquí nos fijamos en algunos de los mejores para empezar.Lee mas

Vídeo: diseñando un sitio web - Html5 - Css3 | Servicio | parte#1 | Desde cero

Afortunadamente, no es necesario que empezar de cero cada vez. Hay miles de plantillas CSS gratuitas disponibles en línea, todas las tendencias de diseño moderno que abrazan y tecnologías. Usted las puede utilizar en su forma original, o personalizarlos para que sean el suyo propio.

En esta guía vamos a echar un vistazo más de cerca a las plantillas CSS, y dónde encontrarlos.

¿Qué es una plantilla CSS?

Una plantilla CSS no sólo contiene CSS: te da todo lo que necesita para crear un sitio web completamente funcional. Al descargar uno, normalmente obtener una carpeta que contiene lo siguiente:

• Los archivos HTML - Usted obtendrá un archivo HTML para cada página del sitio web. Contendrá la muestra de texto y las imágenes que usted necesita para substituir por su propio contenido. También tendrá que ser capaz de ajustar los metadatos, en relación con cosas como la descripción del sitio.
• archivo CSS - Por lo general, obtener un archivo CSS principal que contiene todo el estilo del sitio web, además de los extras, como una hoja de estilos de reset, o uno para fuentes web.
• archivo javascript - Si el sitio contiene funciones de javascript que idealmente deben ser incluidos en su propio archivo separado, en lugar de incorporar en los documentos HTML.
• Imágenes, fuentes y los iconos - Las imágenes utilizadas en la plantilla también deben ser incluidos. Es posible que desee mantener las cosas como iconos y fondos, pero tendrá que reemplazar las otras imágenes de marcador de posición con el suyo propio. Algunas fuentes personalizadas también podrían ser incluidos.

A diferencia de la mayoría de los otros tipos de plantilla que vas a encontrar - ya sea WordPress, Excel o plantillas de InDesign - plantillas CSS requieren una cierta cantidad de conocimientos técnicos.6 lugares impresionantes para encontrar plantillas gratis de InDesign6 lugares impresionantes para encontrar plantillas gratis de InDesign¿Cómo sobre el uso de una plantilla de InDesign de calidad profesional en lugar de hacer su propia? Este artículo analiza los mejores sitios de plantilla gratuitas en la web.Lee mas

No hay ninguna interfaz amigable para editarlos en, por lo que tendrá que saber al menos cómo encontrar su camino alrededor de un documento HTML sólo para añadir su propio contenido. Para hacer sus propias personalizaciones se necesita un conocimiento decente de CSS.

Lo que debe buscar en una plantilla CSS

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

• Diseño - Obviamente, usted quiere un sitio que se ve bien y refleja cualquier imagen que queremos reflejar. Pero también tienen en cuenta si la plantilla es adecuada para sus necesidades, tanto ahora como en el futuro. Muchos de ellos son de una sola página de sitios en Internet- algunos están diseñados para múltiples páginas. Si necesita este último, considere si puede ser mejor usar un CMS como WordPress en su lugar.
• Optimizado para móviles - uso de la web móvil es ahora mayor que el escritorio, por lo que es esencial que su sitio funciona correctamente en los teléfonos inteligentes. Cualquier plantilla CSS decente debe utilizar el diseño de respuesta para que el sitio funciona perfectamente en cualquier pantalla de tamaño. Si el elegido no es así, cambiar a uno que lo haga.
• Bien escrito - Descargar la plantilla y echar un vistazo al código antes de comprometerse a utilizarlo. Debe estar limpia, bien estructurado y fácil de editar. También debe ser consciente de SEO, con el uso correcto del título y las etiquetas de encabezado.
• Licencia - Asegúrese de verificar la licencia para su plantilla CSS elegido. Muchos están disponibles bajo una licencia Creative Commons, pero diferentes versiones de esta licencia determinan si puede editar la plantilla, ya que se puede utilizar comercialmente, y si es necesario acreditar el diseñador original.
• complementos - Algunos desarrolladores de plantillas CSS ofrecen su trabajo sobre una base “freemium”. Se obtiene la plantilla de forma gratuita, pero tienen la opción de pagar por las personalizaciones adicionales para que sea único a su sitio.

Con todo lo que ha explicado, vamos a echar 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 página web. Todos ellos son creados especialmente para el sitio, lo que no debería verlos apareciendo en otro sitio.

Todas las plantillas son sensibles, y construidas con HTML5. Son pequeños y ligeros, con características adicionales de javascript, como una caja de luz de vídeo o desplazarse efectos, sólo se utilizarán cuando agregan valor real a la experiencia.

2. Styleshout.com

Styleshout ofrece una amplia gama de ambas plantillas gratuitas y premium, la antigua publicado bajo la licencia Creative Commons.

Las plantillas gratuitas cubren una amplia gama de categorías, de las páginas web completas para Próximamente páginas, e incluso la menudo pasados ​​por alto página de error 404. Se les puede personalizar usted mismo y adaptarlos al estilo de su sitio existente, o puede pagar para obtener Styleshout que lo haga por usted.Cómo hacer una gran página de error 404 & 10 EjemplosCómo hacer una gran página de error 404 & 10 EjemplosLee mas

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 son atendidos, como el blog y la página del producto, y hay algunos diseños particularmente agradable para los fotógrafos para mostrar su trabajo. Las plantillas básicas de tipo rejilla son muy personalizable, mientras que los más llamativos tienden a utilizar javascript bastante fuerte por lo que puede ser menos adapte a sus ajustes.

4. Freebiesbug.com

Lo que le falta Freebiesbug en cantidad más que lo compensa con la calidad. Un sitio donde los desarrolladores jóvenes muestren sus habilidades, que incluye muchas de gama alta, los diseños de primera calidad.

impresionante colección del sitio de plantillas gratuitas son perfectos para las agencias, fotógrafos, desarrolladores de aplicaciones, y otros creativos. Lleno de javascript y CSS efectos y animaciones, puede personalizar los sitios, aunque a menudo son tan agradable es posible que no desee.

Además, Freebiesbug.com incluye todo tipo de recursos gratuitos para diseñadores web, incluyendo fuentes, fotografías de archivo, bocetos de Illustrator y PSD, y más.No pague por Adobe Illustrator: Esta alternativa libre es grandeNo pague por Adobe Illustrator: Esta alternativa libre es grandeAdobe Illustrator es impresionante pero cuesta un poco debido a la suscripción de Creative Cloud. Esta alternativa aplicación web es casi tan bueno y no cuesta nada!Lee mas

5. Free-CSS.com

Free-CSS.com es una oferta de bajo coste web - en el momento de la escritura - 2503 algunas plantillas gratuitas, además de un montón de las primas también, en caso de que todavía no puede encontrar lo que estás buscando.

Con tantos para elegir, puede ser un poco difícil de resolver sobre el diseño perfecto. La calidad es buena en general, aunque 10 años de existencia del sitio significa que todavía recibe las plantillas escritas en XHTML. Usted querrá evitar estos. La otra cosa es que asegúrese de comprobar la licencia para la plantilla elegida. Son todos gratuitos, pero algunos son de dominio público, algunos idea, y algunos utilizan una licencia específica autor.

6. OS-Templates.com

28 páginas de plantillas CSS libres, sobre todo con los diseños modernos, basados ​​en la red en una sola página. Si lo simple es lo que está buscando, entonces este es el lugar para buscar. Los diseños están limpios, atractivos y fáciles de personalizar.

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

7. boag.online

Levitación magnética es una única plantilla de página web una página que puede ser descargado desde Github o previsualizar en acción en boag.online.

Es una plantilla limpia rápido, ideal para una página de producto. El diseño minimalista se ve aumentada por unos pocos efectos jQuery para ayudarle a desplazarse entre las secciones. El diseño simple trabaja en su propio derecho, sino que también lo convierte en un gran punto de partida para sus propias personalizaciones.

8. Pixel Buda

plantillas de píxel de Buda no se limita sólo a los sitios web, que incluyen algunos de boletines de correo electrónico también.

De cualquier manera, todos están diseñados con HTML 5 y CSS 3, y son sensibles por lo que ven muy bien en cualquier dispositivo. Destacan Howdy HTML, una hermosa cartera / plantilla del curriculum vitae, y SOHO HTML, una página de comercio electrónico en busca impresionante que incluye la fuente de los archivos PSD en la parte superior del HTML y CSS.Los últimos 5 Aplicaciones de reanudación de construcción y sitios que usted necesitará siempreLos últimos 5 Aplicaciones de reanudación de construcción y sitios que usted necesitará siempreUtilice estas fantásticas obras de construcción del curriculum vitae y aplicaciones cuando se necesita para hacer que tu CV destaque entre la multitud. Con las herramientas adecuadas, se puede construir un curriculum vitae único rápidamente incluso sin conocimientos de diseño.Lee mas

9. Templatemo.com

Cerca de 500 plantillas gratuitas están disponibles en Templatemo. Algunos de los mejores son los que se liberan desde el sistema de red de estilo Bootstrap para probar algo diferente.

La mayoría de las plantillas son simples y sin complicaciones, a pesar de las características como Mesas de luz y carruseles de contenido se incluyen donde se necesitan. También nos gusta el hecho de que varias de las plantillas están configurados para trabajar con hasta seis páginas por defecto. 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 front-end más popular, que permite crear sitios web de alta calidad en ningún momento a todos. Sin embargo, hace falta un poco de tiempo para aprender, que es donde entra en juego de inicio Bootstrap.

Esta colección de plantillas, de código abierto están construidos utilizando sistema de red de Bootstrap. 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 le esperan para darle estilo a.La creación de interfaces web: Por dónde empezarLa creación de interfaces web: Por dónde empezarLe mostraremos cómo las interfaces web se descomponen, a continuación, señalamos los conceptos clave, las herramientas y los bloques de construcción necesarios para hacerse un diseñador de páginas web siglo 21.Lee mas

11. Bootswatch.com

Por último, algo un poco más práctico. Bootswatch ofrece 16 temas de código abierto para los sitios de estilo construidas usando Bootstrap.

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

Es fácil juntar un sitio web básico con Bootstrap, y Bootswatch le da un cierto pulimento instantánea.

Cómo utilizar plantillas CSS

En términos generales, hay dos maneras de utilizar las plantillas. O se los utiliza como está o usarlos como base para su propio diseño.

El peligro cuando el uso de plantillas es que usted termina con un sitio web que es idéntica a la de otra persona. Elija una plantilla popular y podría ser, literalmente, decenas de miles de sitios idénticos. Este es el principal argumento a favor de la personalización de ellos.

Vídeo: Curso Basico de CSS desde 0 - Introduccion

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 a peinar hacia arriba.

También son perfectos para cualquier persona nueva en el diseño web. Si sabe que su camino alrededor de HTML y CSS, pero todavía no tiene la confianza o el conocimiento para construir un sitio desde cero a continuación una plantilla CSS sirve como una manera fácil de conseguir un sitio de gran apariencia, y una herramienta de aprendizaje increíble.

Se puede tratar como un trabajo en progreso. Comience por cambiar las fuentes y cambiar la combinación de colores, y con el tiempo se puede rediseñar los elementos existentes, añadir otros nuevos, y así sucesivamente. No hay mejor manera de aprender algo que no sea a través de la experiencia práctica, con manos.¿Quieres magnífico Fuentes gratuito? Esto es más de 25 sitios en los que las vas a encontrar¿Quieres magnífico Fuentes gratuito? Esto es más de 25 sitios en los que las vas a encontrarEn lugar de vadear a través de cientos de fuentes, aquí hay algunos sitios que te ayudarán a mantenerse al día con todos los nuevos tipos de letra que usted desea utilizar en su próximo diseño.Lee mas

¿Utiliza plantillas CSS en la construcción de sitios web? ¿Cuáles son sus lugares favoritos para encontrarlos? Compartir sus experiencias y consejos con nosotros en los comentarios.