2009-02-06 17 views
7

Estoy frustrado por mi falta de juicio estético. Como desarrollador, tengo dificultades para crear un sitio web de aspecto decente.¿Cómo puedo mejorar mi HTML y CSS?

La pregunta es donde puedo aprender todas las habilidades CSS necesarias o hay cosas como "diseño CSS eficaz" que me permite

  1. Recoger CSS rápidamente
  2. utilizarlo para hacer hermoso sitio web de aspecto ?

Agradeceré cualquier diseñador de CSS y HTML que me permita obtener rápidamente hermosas páginas web de maquetas.

Editar: Tal vez debería ser más explícita. No tendría ni idea si me pidieran que presentara una página de inicio original para un clon de FaceBook. Parece muy difícil incluso hacer una maqueta de esa pantalla en mi cabeza. Una falta de imaginación, de hecho.

+0

La mejor manera para un no diseñador sería [twitters bootstrap] (http://getbootstrap.com/) en mi opinión. Tienen muchos componentes para botones, formularios, tablas, listas y mi favorito, el diseño Grid. También tienen un componente de JavaScript y algunas plantillas útiles para usar de forma GRATUITA. –

Respuesta

7

tratar este enlace Why developers suck at CSS design. Eso podría darte una buena base para tus proyectos.

Si combina algunas de las sugerencias en el enlace con un pequeño marco CSS (me gusta boilerplate), debería poder comenzar cada proyecto con una línea base visual bastante agradable. Y realmente te sorprenderá la diferencia que hace tu trabajo.

+0

Buen enlace, gracias – Misko

+0

No soy diseñador, pero con solo leer el primer enlace puedo ver algunos problemas ... como configurar el tamaño de fuente en 62.5%. El tamaño de la fuente ya es configurable por el usuario ; no suponga que sabe mejor que ellos para decidir cuál es el tamaño de fuente predeterminado. – Powerlord

2

http://www.w3schools.com/

Usted encontrará todo lo que hay, CSS/HTML, etc.

sitios web
+1

¡Pero no sabrá cómo hacer hermosos sitios web, el sitio en sí es bastante feo! –

10

hermosas a menudo existen de antemano en una aplicación de edición de imágenes o en papel y la parte CSS + HTML es el último paso, transformando su diseño a una versión amigable para la web.

+1

+1 Abordar el diseño antes de tocar el código –

+0

** prefiero ** que el diseño esté completo antes de comenzar el desarrollo, ¡pero a menudo no es el caso! :( – Wayne

0

Hay muchos buenos libros sobre CSS. Mi principal consejo es comenzar primero con un diseño algo coherente. Usualmente diseño la página de inicio de un sitio potencial completamente en photoshop, luego hago que el cliente apruebe ese diseño, antes de comenzar cualquier HTML o CSS.

Una vez que tenga una plantilla de diseño que todos están de acuerdo se ve bien, la CSS se convierte en una cuestión techincal simple de conseguir que se vea el mismo que su maqueta.

0

Dos consejos:

  1. obtener una copia de "De cabeza HTML y CSS". Esta será la introducción más fácil (y buena) a HTML y CSS. Comprenderá cuándo usar qué.

  2. mirada alrededor de la web (nytimes.com, Zen CSS ...) para obtener inspiración para grandes representaciones visuales.

1

Otros han respondido con algunos recursos, pero echa un vistazo a este sitio: http://www.csszengarden.com/

Muestra muchos diseños diferentes usando sólo CSS. Puede descargar la fuente y examinarlos. Además, consulte la sección de recursos para tutoriales y tutoriales.

0

Hay algunos recursos fantásticos en Smashing Magazine Siga sus guías sobre las mejores prácticas de CSS y use algunas de sus secciones "mejores" para inspirarse.Es una de mis primeras paradas cuando comienzo un nuevo proyecto de diseño web.

6

Me parece que las sugerencias técnicas de HTML y CSS no son lo que está buscando (todavía). Es posible que desee buscar recursos sobre principios básicos de diseño gráfico o sobre principios de diseño web en particular. Una vez que haya comprendido los conceptos básicos del diseño gráfico, puede comenzar a esbozar diseños para sus proyectos. Los diseños iniciales pueden ser tan simples como algunos bocetos realizados en una libreta. Solo entonces puede comenzar a diseñar los detalles de la página, y finalmente necesita tener las habilidades necesarias de HTML y CSS para implementar realmente el diseño.

Estoy más o menos en el mismo lugar: sé bastante sobre HTML y CSS, pero me cuesta mucho crear un diseño atractivo. Una vez que tengo eso (generalmente con mucha ayuda de otras personas), puedo construir el sitio web.

1

Esto no le ayudará a inventar diseños originales, pero podría ser útil, no obstante.

El aumento más significativo en mi comprensión del diseño de CSS se produjo con la función "inspeccionar" de Firebug. Poder ver el estilo calculado de un elemento en la pestaña "estilo" y su relleno/margen/desplazamiento en la pestaña "diseño" era (y sigue siendo) un gran activo.

En cuanto a aprender a diseñar como desarrollador, Robin Williams 'Non-Designer's Design Book es un gran punto de partida. Tengo una copia y definitivamente la recomendaría a cualquier desarrollador que quiera entender el diseño en términos menos abstractos.

+0

Sí, es un buen libro. Otra votación para ello. – AmbroseChapel

1

Suponiendo que usted es un desarrollador que quiere hacer el diseño bastante decente, esto es algo que hice cuando estaba en una posición similar:

  1. Learn XHTML y CSS, así: hay una gran cantidad de buenos recursos señaló en otras respuestas aquí. Básicamente, esto solo requiere habilidades de aprendizaje, ya que al ser un desarrollador, no debería tener muchos problemas.

  2. Comience copiando diseños minimalistas. Hay muchos de ellos alrededor. Un ejemplo: http://vandelaydesign.com/blog/design/minimalistic-web-design/ Debería ayudarlo a generar confianza y cierto sentido estético.

  3. ¡Una vez que haya construido varios, mezcle y combine! Asumiendo, no estás haciendo un diseño serio, te sorprenderá lo lejos que esto puede llevarte.

¡Buena suerte!

0

Creo que debe hacer una distinción entre su intención y su implementación. El material de CSS es solo un detalle de implementación, nada más que una herramienta del comercio. Si ya está creando sitios web visualmente atractivos pero no están basados ​​en CSS, entonces realmente vale la pena aprender CSS. Por otro lado, si no tiene experiencia en diseño de página y estética visual, entonces necesita leer y experimentar mucho sobre técnicas de diseño de página como uso de fuentes, espacios en blanco, equilibrio, etc.

El único sitio que guardo buscando inspiración para el diseño, y solo para leer algunos buenos hacks de CSS es http://www.csszengarden.com. Pero nunca tuve el valor de enviar nada a ese sitio. Disfrute y buena suerte :-)

0

Lea A List Apart. Obtuve algunos de mis mejores consejos y sugerencias a partir de ahí.

1

Una pregunta muy subjetiva. ¿Qué es un hermoso sitio web?Estudié arte en la universidad (bellas artes, no diseño) y odio mi diseño web. A la mayoría de las personas les gusta lo que hago, pero es un proceso muy tedioso para mí.

Trabajo con un programador incondicional con una licenciatura en informática y él tiende a hacer páginas web organizadas muy lógicas. Muchos colores (y, por supuesto, los colores significan algo) y descripciones emergentes para todo. Necesitas una clave para entender sus páginas. A algunas personas les gusta su trabajo de diseño, algunas personas no.

Aprender a codificar HTML y CSS es factible. Mi mejor consejo es encontrar algo que te guste y examinarlo. Desde una perspectiva de código, así como una perspectiva de diseño/estética.

Algunas personas nunca pasan de la etapa de imitación, pero creo que si realmente quieres ser un buen diseñador, absorberás las cosas que te gustan y no hay mejor manera de hacerlo que diseñando/desarrollando sitios mucho. Practica, practica, practica o trabaja, trabaja, trabaja !! Mejorará cuanto más trabaje y eventualmente su propio estilo surgirá.

0

Yo sugeriría que vive con su navegador web abrir en:

http://delicious.com/

Se actualiza regularmente con enlaces a tutoriales sobre CSS y diseño, que usted podría encontrarse pasar horas leyendo y usando.

Me encuentro mirando ejemplos de diferentes diseños y luego me voy y trato de usarlos, ya sea en sistemas de grillas o simplemente en esquemas de colores simples. Delicious es realmente un cofre del tesoro de inspiración y ayuda.

Cuestiones relacionadas