Diseño front end

Herramienta de diseño front-end

Recientemente, algunas personas se acercaron a mí pidiendo consejo sobre cómo empezar como desarrollador front-end.  Con sus tecnologías y frameworks siempre cambiantes, puede ser bastante difícil y abrumador empezar en el campo del desarrollo front-end.

Cuando uno se inicia en el front-end, puede no estar seguro de por dónde empezar. Hay muchas opciones disponibles, no sólo en cuanto a lenguaje de programación, sino también en cuanto a herramientas, marcos y tecnologías.

Hay todo tipo de cursos en línea disponibles sobre cómo empezar con HTML y CSS. Lo primero es lo primero. Inscríbete en cursos online como Coursera o Team Treehouse. Después de terminar algunos cursos iniciales, sigue adelante y crea algunas páginas web estáticas e itera una y otra vez.

También recomiendo desarrollar algunos pequeños elementos de interfaz de usuario para practicar tus habilidades de HTML y CSS recién aprendidas. Codepen.io es un gran patio de recreo para eso. Navega por los proyectos de otras personas y participa en la comunidad.

Juntando estas dos cosas, ¡construye para aprender! No hay mejor manera de aprender que ensuciarse las manos. Seguramente ya habrás oído esto cientos de veces, pero por algo es el consejo que más se repite.

Diseño de páginas web

El objetivo del diseño de un sitio web es garantizar que cuando los usuarios abran el sitio vean la información en un formato que sea fácil de leer y relevante. Esto se complica aún más por el hecho de que los usuarios utilizan hoy en día una gran variedad de dispositivos con diferentes tamaños y resoluciones de pantalla, lo que obliga al diseñador a tener en cuenta estos aspectos al diseñar el sitio. El diseñador tiene que asegurarse de que su sitio se vea correctamente en diferentes navegadores (cross-browser), diferentes sistemas operativos (cross-platform) y diferentes dispositivos (cross-device), lo que requiere una cuidadosa planificación por parte del desarrollador.

->  Para que sirve java script

Un navegador web es un software que se utiliza para recuperar, presentar y recorrer información en la WWW. Normalmente, los navegadores se ejecutan en un ordenador de sobremesa o portátil, en una tableta o en un teléfono, pero últimamente se puede encontrar un navegador en casi cualquier cosa (por ejemplo, en una nevera, en los coches, etc.).

Los navegadores sin cabeza son navegadores web sin interfaz gráfica de usuario que pueden controlarse desde una interfaz de línea de comandos mediante programación con el fin de automatizar páginas web (por ejemplo, pruebas funcionales, scraping, pruebas unitarias, etc.). Piensa en los navegadores sin cabeza como un navegador que puedes ejecutar desde la línea de comandos y que puede recuperar y recorrer páginas web.

Software de diseño frontal

Parece que hoy en día todo el mundo está conectado. Internet no sólo facilita la comunicación interpersonal entre los usuarios (por ejemplo, el correo electrónico, las redes sociales); también es una fuente muy fiable de todo tipo de información. Y un medio cómodo para pagar facturas y hacer compras.

Todas las aplicaciones en línea tienen esa parte con la que los usuarios interactúan. Cuando uno entra en un sitio web, es recibido por la página de bienvenida, el menú, el mapa del sitio y otros elementos que facilitan la navegación y la utilidad. Todos esos elementos se engloban bajo el término colectivo de «front end». El front end incluye la interfaz de usuario, que es la parte del sitio web o de la aplicación diseñada para el uso del consumidor.

->  Los negocios mas rentables del mundo

Deberíamos detenernos un momento para aclarar las diferencias entre un desarrollador de front end, un desarrollador de back end y un desarrollador de full stack. Pongámoslo en términos sencillos: un desarrollador de front end es responsable de las partes de una app o sitio web que los usuarios ven y con las que interactúan. Un desarrollador de back end se encarga de los asuntos «entre bastidores», como la infraestructura y las bases de datos. El desarrollador full-stack es una mezcla de ambos, un experto que puede encargarse de todo el proceso de diseño, desde el principio hasta el final.

Ejemplos de diseño de front-end

¿Te has dado cuenta de que dos productos diferentes de la misma empresa pueden tener dos experiencias de usuario completamente diferentes? La incoherencia en el diseño puede provenir a menudo de dos equipos de diseño distintos que no están sincronizados y construyen su propio conjunto de interfaces de usuario de forma independiente.

Ahí es donde un sistema de diseño puede ayudar. El objetivo de un sistema de diseño debería ser permitir a los desarrolladores y diseñadores crear experiencias de producto atractivas proporcionando una experiencia de usuario coherente en todos los productos. Empresas tecnológicas como Salesforce, Stack Overflow y Microsoft comparten públicamente su sistema de diseño y sus principios de diseño.

->  Funcionamiento de whatsapp

Sobre todo, un sistema de diseño no es sólo una biblioteca de componentes de interfaz de usuario, sino la documentación de las normas y directrices, el lenguaje visual y el apoyo a la accesibilidad, así como la información sobre cómo empezar a aplicar el sistema. Por supuesto, esta lista no es exhaustiva, pero un sistema de diseño completo no se limita a crear una biblioteca de IU.

Además, los sistemas de diseño benefician a los desarrolladores. Como ingeniero, puedes centrarte en resolver problemas técnicos o aprender nuevas tecnologías en lugar de construir interfaces de usuario redundantes. Si eres un desarrollador de front-end, puede que te sientas frustrado cuando se te pide que construyas los mismos componentes de interfaz de usuario varias veces. Con un sistema de diseño, el componente se construye una vez, y tú lo implementas. Veamos cómo un sistema de diseño puede ayudar a los equipos de ingeniería a escalar.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad