Cómo pasar de ‘promedio’ a ‘excelente’ con CSS

Es fácil pasar de promedio a excelente en CSS, y todo lo que se necesita es un truco. Listo? ¡Necesitas amarlo!

Una vez que lo hagas, comenzarás a leer sobre él, comenzarás a practicarlo más, intentarás superar tus límites y su límite al mismo tiempo, comenzarás a buscar sitios web y ver su código en su lugar y la mayoría De todos modos, harás todo lo posible para defender el idioma cada vez que alguien lo critique.

También debe aprender sobre estos temas. Si los conoce bien, lo consideraría excelente en CSS.

• Unidades.
• Soporte de navegador.
• Propiedades CSS más utilizadas.
• Fondo.
• Fronteras
• Formas
• Posicionamiento
• Selectores
• Tipografía.
• Funciones
• Animación.

Hubo un tiempo en que todo lo que construí tenía sombras. Solo porque sabía cómo hacerlos, los apliqué (y esto se remonta a cortar imágenes de Photoshop para crear sombras en los fondos).

He visto a muchos constructores y diseñadores influenciados por lo que ‘pueden hacer’ en CSS, y esto los obstaculiza creativamente. Oliver hace un buen punto, si un marco da forma a tu diseño, no estás diseñando, solo estás construyendo. Aunque no hay nada inherentemente malo en usar un marco para construir. Serías un carpintero terrible si usaras un espacio diferente entre tus postes en cada casa que construiste.

El diseño es realmente algo difícil de aprender: se basa en la inspiración combinada con su visión individual combinada con una observación aguda combinada con los aspectos prácticos de tomar decisiones de diseño.

Si nos atenemos a lo práctico y usamos el ejemplo de las sombras, ¿por qué usarías una sombra? ¿Qué transmite al usuario? En el mundo físico, ¿qué hace que una sombra se vea de cierta manera?

Técnicamente, puedes aplicar una sombra, pero si puedes aprender a aplicarlas para lograr el efecto deseado, así es como te vuelves genial.

Sobre el tema de las sombras, eche un vistazo a Diseño de materiales: pautas de diseño de Google, para ver cómo Material Design, el marco visual de Google, utiliza luces y sombras como indicadores visuales en las interfaces web y de aplicaciones. Obtendrá una comprensión de ‘cómo usarlos’.

No digo que debas usar ese ‘marco’ o no, solo para entender el ‘por qué’ detrás de él para formar tus propias decisiones de diseño.

Parece que tus habilidades de CSS están bien; en lo que necesita trabajar es en diseño gráfico: seleccionar elementos que sean visualmente atractivos.

Si te gusta el aprendizaje estilo aula, es posible que desees consultar tu centro comunitario local o colegio comunitario para ver las clases de diseño. También puede buscar clases de Diseño 101 filmadas en YouTube o iTunes U.

También hay toneladas de excelentes recursos en línea para aprender habilidades de diseño. Aquí hay una buena compilación: cómo convertirse en diseñador sin ir a la escuela de diseño. Lifehacker también organizó un curso intensivo: Aprenda los conceptos básicos del diseño este fin de semana.

Más allá de eso, necesitas práctica, pero debe ser una práctica dirigida y enfocada. Elija un elemento a la vez, como el color, y trabaje solo en eso. Si es posible, obtenga comentarios sobre sus intentos de diseñadores experimentados, en persona o en línea.

¡Buena suerte!

Es importante mantenerse al día con las últimas tendencias de diseño, visitando con frecuencia sitios como Dribbble, Behance, Awwwards. Hay muchos diseños hermosos en estas páginas que pueden ayudar a inspirar, reforzar la creatividad y apreciar grandes ideas y composiciones.

Un problema común es cómo elegir la paleta de colores adecuada. Una forma es utilizar servicios como Adobe Color CC o Perfect Colors. Le ayudan a seleccionar colores y tonalidades relacionados matemáticamente, por lo que el resultado final generalmente es bastante bueno.

CSS está evolucionando; Siempre hay algo nuevo que aprender. Encuentro que con mayor frecuencia aprendo y domino nuevas técnicas de CSS cuando intento implementar el diseño de otra persona. Si estoy trabajando en un proyecto con un equipo y debo construir en base a los archivos de Photoshop que me han dado, es cuando es más probable que encuentre algo que no haya tenido que hacer anteriormente.

Aprendo una nueva técnica, como el uso de unidades calc o viewport, cuando necesito resolver un problema. A veces, el CSS simplemente no puede hacerlo, en ese caso hablaré con el diseñador sobre soluciones alternativas. Pero a menudo puede, y simplemente necesito descubrir cómo hacerlo funcionar.

Como han sugerido los demás, creo que esto puede ser más un problema de diseño que un problema de CSS. Si está diseñando sus propios sitios, puede estar diseñando instintivamente cosas que ya sabe cómo codificar. O puede que necesite más inspiración de diseño.

En ese caso, lea sobre el diseño. Pasee por la Web en busca de inspiración para el diseño. Tome una cámara y camine dos horas afuera de su casa u oficina. Examina lo que ves y toma fotos de cualquier cosa interesante. Mira árboles, edificios, botes de basura, bancos, esculturas, cualquier cosa. Examina las texturas de los materiales. Medita en la forma en que la luz altera los colores, crea sombras, etc. Despierta tus ojos.

Durante su caminata notará algunas cosas que atraen y otras que no. Es posible que vea un costoso edificio de oficinas que le parece feo. ¿Porqué es eso? ¿Están las proporciones fuera? ¿Son las puertas demasiado pequeñas? ¿Están las ventanas en los lugares equivocados? ¿Escogieron un material superficial extraño como un color extraño de ladrillo? Mira los detritos y la basura. Tal vez encuentre un fragmento de vidrio roto en un charco que parece interesante. ¿Porqué es eso? ¿Es la forma en que la luz se refleja de manera diferente en el vidrio y el agua? ¿Por qué un poco de basura se ve genial, mientras que un edificio en particular se ve bla?

El diseño web es como otras formas de diseño. Un diseño funcionará o no dependiendo de los colores, las proporciones, la organización, etc. Cuando siempre estamos viendo la Web, podemos quedarnos atrapados en la rutina. Pero si miramos el mundo que nos rodea, podemos encontrar inspiración en cualquier cosa, desde el diseño de una silla hasta el diseño de una estación de metro.

Luego, reúna sus ideas de diseño antes de comenzar a codificar. Puede hacerlo con lápices de colores en papel cuadriculado, en Photoshop o con alguna otra herramienta. Luego comience a codificar solo cuando sienta que tiene un diseño completamente enjuagado. Puede descubrir que ha incluido cosas que lo obligarán a aprender algo nuevo.

En cuanto a las sombras de caja, no me preocuparía. A menudo se usan en exceso y se implementan de manera deficiente. Las personas hacen que la sombra sea grande, o usan gris oscuro cuando deberían usar una versión más oscura del color de fondo. Su caminata afuera ayudará con eso. Encontrará ejemplos de sombras de la vida real en las fotos que ha tomado.

¡Buena suerte!

Úsalo.

Construye muchos sitios web. Pruebe diferentes técnicas de CSS para hacer cosas en lugar de meterse en la rutina haciendo lo mismo de una manera cada vez que se sienta cómodo.

Utilice algunos de los marcos CSS comunes para crear algunos sitios web. Echa un vistazo a Skeleton, Bootstrap y quizás Foundation. Luego tome algunos de los componentes e intente reescribirlos usted mismo.

Puede ser que ya eres bueno en CSS pero simplemente no eres tan atractivo en diseño. A menudo, los desarrolladores web se asocian con diseñadores gráficos en los principales proyectos para obtener el mejor efecto. Tal vez deberías tomar una comisión de un diseñador para estirar tus habilidades. Además, cree un sitio totalmente receptivo, si aún no lo ha hecho, incluidas las nuevas reglas CSS3 y las consultas de medios, etc.

Puede obtener del promedio solo por medio de la práctica y más práctica. Perfecciona tus habilidades al máximo y serás un diseñador web maestro en unos pocos meses.