¿Hay algún tutorial de desarrollo web front-end sobre CSS / JavaScript / Angular creado por diseñadores experimentados?

El diseño y diseño de la página web / sitio web es muy parecido a pintar una imagen, no a programar. AngularJS es un marco de JavaScript que se ha utilizado recientemente para cosas como páginas de administración para servidores. No muy bonitas tampoco.

Creo que debe retroceder aquí y comprender que con páginas web hermosas y sitios web hermosos, está siendo muy creativo. Le sugiero que consulte el sitio web de CSS Zen Garden: The Beauty of CSS Design para obtener ideas de diseño . Creo que comenzarás a ver lo que estoy tratando de decir.

También necesitará comprender el poder de los colores como un visitante del sitio los percibirá y lo que significarán para ellos: el significado de los colores
Hay algunas diferencias culturales que los visitantes de su sitio web tendrán, así que tenga en cuenta esto. Lo que se considera un color de pureza en una cultura puede significar llorar por la muerte de uno en otra.

Cualquiera puede crear una página web “agradable” o un sitio web “receptivo”, pero para que sea hermoso, debes tener la visión de un artista. Por lo tanto, mi sugerencia es que ingrese el término de búsqueda “plantilla de sitio web” en Google y simplemente comience a navegar por los muchos sitios web de plantillas ofrecidas. Después de ver varios miles de plantillas de sitios web ofrecidos, comenzará a comprender el color, el diseño y el tema de cada plantilla, y cómo las imágenes juegan un papel importante en el “atractivo visual”. Esta es probablemente la única forma en que apreciará los hermosos diseños de páginas web que se encuentran en el CSS Zen Garden y se volverá muy cansado en cuanto al diseño. Esta es la única forma en que “sabrá” que el diseño de un sitio web es elegante y hermoso, además de receptivo.

Ahora, si desea un diseño web receptivo, que responda maravillosamente en todos los dispositivos (escritorio, tableta, móvil), entonces está hablando de Bootstrap CSS, jQuery y la interfaz de usuario móvil. Todas las partes básicas del edificio ya están codificadas en su sitio web: Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivos. Echa un vistazo y aprende de ello. Hay mucho para aprender.

Cuando tenga una idea sobre un buen diseño web, después de mirar los principales sitios web de Fortune 500 (solo busque los nombres importantes como Sony, Nike, etc.), que generalmente tienen equipos separados de personas que diseñan el aspecto de la página web y interacción con el sitio web, le sugiero que esté listo para usar una herramienta de estructura de alambre llamada Axure Interactive Wireframe Software & Mockup Tool. La versión Pro (que es costosa) producirá HTML5, CSS3 y JavaScript interactivo una vez que haya terminado de desarrollar su estructura alámbrica y su maqueta. Gran herramienta prototipo!

Ahora, si no puede permitirse Axure como herramienta prototipo, le sugiero que diseñe su diseño en un programa gráfico. Hay muchos por ahí que son gratuitos. Mire el diseño de su página web de esta manera y vea si su combinación de colores está funcionando. La paleta de colores no debe tener más de 4 colores además del blanco y negro. Adobe Color Wheel Adobe Color CC (gratis) debería ayudarlo a ver rápidamente qué colores se ven bien juntos antes de pasar horas armando un gráfico de página web. También hay muchos temas de colores públicos que quizás desee ver: Adobe Color CC

Después de todo este estudio del diseño de la página web, el uso del color y la navegación en el sitio web, podrá aplicar AngularJS a la página / sitio web para hacer el uso más común de AngularJS: una aplicación de sitio web de una sola página receptiva. Hay varios libros sobre esto en Amazon que puede navegar. Lea los comentarios y vea si alguno de estos está cerca de lo que está buscando. Sí, este es el uso común que conozco para AngularJS en el desarrollo web.

¡Ahí lo tienes! No es fácil hacer que una página web o un sitio web se vean “bonitos”, mucho menos hermosos. Es un talento. Y como cualquier talento, tienes que desarrollarlo. ¡Espero que esto ayude!

En AngularJS se trata de aplicaciones web dinámicas, por lo que el diseño a menudo no se aborda en dichos tutoriales. Simplemente supone que usted sabe cómo diseñar sitios con CSS.

Sin embargo, los resultados de los siguientes tutoriales de AngularJS tienen un diseño web real:

  • Tutorial de AngularJS: creación de una aplicación web en 5 minutos (usando el Framework CSS Bootstrap)
  • Tutorial: Cómo crear un sitio web receptivo con AngularJS (escribió su propio diseño CSS)

Espero que te ayude más.