Desarrollo frontend (html, css, javascript)
Un buen maquetador web ha de incluir en su cinturón de herramientas flexbox y grid si quiere crear diseños interesantes y complejos y no morir en el intento. Estas herramientas están aquí para quedarse, y solventan todos los problemas comunes (y no tan comunes) de la maquetación y dan al desarrollador la libertad de no tener que elegir una biblioteca de CSS para poder maquetar a gusto.
Por ejemplo, supongamos que tenemos una página. La estructura y el layout se haría con grid mientras que las celdas de la grilla bien podrían ser elementos de flexbox ya que podemos anidarlos sin ningún tipo de problema.
- Github CSS3 Hover effect A collection of CSS3 powered HOVER effects to be applied to links, buttons, logos, SVG, featured images, and so on.
Cómo crear un header con flexbox
Maquetación con CSS grid se utiliza para maquetar en dos dimensiones (estructura y layout de una web).
Maquetación con flexbox se utiliza para maquetar en una dimensión (celdas del grid).
Tutoriales Layout Land técnicas CSS Grid y Flexbox para crear páginas web adaptables.
How You Can Improve UX with Microinteractions
Web Performance Optimization with webpack will show how to effectively optimize site resources using webpack. This can help users load and interact with your sites more quickly. Modern web applications often use a bundling tool to create a production "bundle" of files (scripts, stylesheets, etc.) that is optimized, minified and can be downloaded in less time by your users.
- Making front-end smaller
- Improving caching
- Monitoring it to stay fast
Why we chose Flutter and how it’s changed our company for the better Google’s Flutter is a mobile app development framework that allows you to quickly build applications for iOS and Android. Why Flutter:
- The opensource UI Framework (api, navigation, reactive, modern and fast tooling, write once and share platforms)
- The fast development cycle (1/8 from compile full and incremental)
- Unit testing (good support, fast testing time cycle)
- Code sharing (95% mobile app, 60% web app, one architecture change, reduce implementations details)
- QA Testing (confidence in unique tests for ios/android/web, platform QA limited to use native components, 50% reduction in QA time)
- Team Scalability (easier to hire, reduce 3 teams to one, Knowledge sharing)
Diez consejos rápidos a la hora de crear diseños de contenidos e interfaces de usuario
- Si el texto es importante que vaya en grande
- No utilizar varios niveles de grises sobre blanco, variar la opacidad
- Calcular bien las paletas de colores (HSB)
- Usar espacio en blanco para separar grupos de información
- Usar colores para separar filas
- Usar fusión/multiplicar en vez de sombras (texto sobre imágenes)
- La longitud ideal de las líneas: 45–65 caracteres
- No reinventar la rueda: reciclar diseños válidos
- Usar «colores de marca» en algunos elementos, no «ocupando mucho»
- Alinear visualmente el texto de las listas con boliches
Que aprender si empiezas frontend Muy buena seleccion de temas
What Differentiates User Experience and User Interface? While UI is a valuable part of UX, they are far from one and the same. Check your knowledge of what differentiates one from the other.
- UX is more about solving a problem and UI works on the appearance and functioning of a product.
- UI creates emotional connections and UX aids the users to achieve their goals.
- UX is a wide concept. UI is a narrow concept.
- UI Design is conducted after UX Design.
- UI is limited to the visual and information designing over the screens, whereas UX is much more.
Top Usability Testing Tools For Your Website
Tools and Resources An ever growing list of design and development tools and plugins to help you build, maintain, and organize your own design system.
Todo lo que podemos hacer con Inspeccionar Elemento en Navegador
5 Crucial Tools for Web Designers (Part One) Web Design Ledger
Grab BUILD FASTER WEBSITES. Grav is a modern open source flat-file CMS
Figma Turn Ideas Into Products Faster Design, prototype, and gather feedback all in one place with Figma.
PostCSS A tool for transforming CSS with JavaScript
Free 10-part course to learn Bootstrap 4?
How to Build a Website the Easy Way – Simbla Review
Pixelify, una nueva forma de compartir y descargar recursos gratuitos de diseño
Your key to success as a designer 15 tools or resources, what you can expect to improve your frontend.
How To Make Netflix-Like Swipers in Vue Frontend en un minuto