frontend

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.

8 UX Writing Best Practices

herramientas

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.