Hay bastantes áreas relacionadas con el diseño en la industria de TI. Los más comunes son los diseñadores, escondidos detrás de las siglas UX y UI. Bueno, algunas personas incluso logran incluir desarrolladores front-end como diseñadores. Intentemos descubrir quiénes son los diseñadores en el mundo de TI, cuál es la diferencia entre UI y UX y qué relación tienen los ingenieros de front-end con el diseño.
Diseñadores
Desarrollar la interfaz de aplicaciones, sitios web o juegos es un proceso bastante complejo y requiere la aplicación de conocimientos de diferentes campos: ingeniería, psicología y diseño. Los diseñadores de interfaces de usuario (en inglés - User Interface o UI) se centran en la forma en que se muestra la funcionalidad del sitio (búsqueda, pestañas, menús) y los detalles de la interacción entre el cliente y la interfaz. El objetivo de un diseñador de UI es un diseño de producto moderno y estéticamente aceptable . UX significa Experiencia de Usuario, que significa "experiencia de usuario". Un diseñador UX se centra más en la usabilidad y la comprensión de la interfaz por parte del usuario potencial. Un especialista de este tipo a menudo realizará investigaciones y estudios que formarán la base para crear un concepto de diseño y también probará conceptos durante y después del desarrollo. Por lo general, se centra en la estructura, el contenido, la navegación y cómo el usuario interactúa con estos elementos.
Produce mapas de sitio, prototipos, que son la estructura básica a la hora de crear software. El objetivo del trabajo de un diseñador UX es que el usuario obtenga del sitio de forma rápida y sencilla aquello a lo que vino aquí . Sin embargo, hoy en día es muy común ver estas dos especializaciones escritas con una barra. Es decir, las tareas en ambas direcciones las realiza un solo especialista. Un diseñador UX/UI diseña la interacción del usuario con la interfaz, decide qué debe hacer exactamente y es responsable del aspecto que tendrá esta interfaz como resultado.
Lo que un diseñador UX/UI necesita saber
Editor gráfico . Las herramientas más populares del mercado son Adobe Photoshop, Adobe Illustrator, así como Sketch, Figma. Elija un editor que le resulte conveniente y primero intente dibujar capturas de pantalla de un sitio web o aplicación, modernizándolas un poco.
Herramientas de creación de prototipos (Mockplus, Axure) . Una herramienta de creación de prototipos es el vínculo entre una idea y su implementación. No importa qué herramienta uses. Puedes probar varios y decidirte por el que se adapta a tu estilo y preferencias.
Psicología del usuario. Ya en la etapa de diseño, debe pensar si será conveniente para usted o para otra persona utilizar esta interfaz. Ponte en el lugar del cliente, construye una conexión fuerte con él y esté atento a sus necesidades. Después de todo, un producto tendrá éxito si existe demanda.
También necesitarás conocimientos de teoría del color . Sabemos algunas cosas desde la infancia, especialmente aquellos que fueron a la escuela de arte. Sin embargo, existen ciertas particularidades con respecto al trabajo de los diseñadores. Los conocimientos básicos se pueden obtener de libros o artículos en Internet.
Dependiendo de los detalles específicos del trabajo, es posible que necesite conocimientos de HTML y CSS o (algunos) lenguajes de programación (los enlaces a los recursos se pueden encontrar a continuación, en la sección "Lo que debe saber un desarrollador front-end").
desarrollador front-end
La tarea principal de un desarrollador front-end es desarrollar la parte del cliente de la interfaz. Es decir, un especialista así "revitaliza" lo que diseñaron los diseñadores. Es responsable del funcionamiento y funcionamiento de la interfaz y menos del contenido visual. Un desarrollador front-end a menudo necesita encontrar una buena solución para la interfaz de usuario durante su etapa de desarrollo, por lo que a menudo colabora con un diseñador UX/UI. El código escrito por el desarrollador front-end se ejecuta en el navegador del usuario (como dicen, "en el lado del cliente"). Además, una de las tareas más importantes es garantizar que el sitio o la aplicación web tenga el mismo aspecto en todas las plataformas y navegadores.
Lo que debe saber un desarrollador front-end
Como regla general, el front-end se basa en tres pilares: el lenguaje de marcado de páginas HTML, las hojas de estilo CSS y el lenguaje de programación JavaScript. Además, el desarrollador front-end debe comprender los principios de funcionamiento del protocolo HTTP, servidores y navegadores, y las características de visualización de la interfaz en varios dispositivos que se encuentran actualmente en el mercado. Las herramientas y métodos para crear interfaces web evolucionan y cambian constantemente, por lo que el desarrollador debe monitorear esto constantemente.
HTML y CSS (diseño)
Este es el diseño, los mismos ladrillos con los que se construye el sitio. El lenguaje de marcado HTML dicta la organización del sitio, el contenido y todas las interacciones entre ellos. Le permite designar la parte superior de la página, la parte inferior, los bloques laterales con contenido, títulos, visualización de texto y elementos multimedia. Las hojas de estilo CSS se utilizan para decorar elementos HTML. Determinan exactamente cómo se muestra cada elemento gráfico que se ubica en la página. Con las últimas versiones de HTML5 y CSS3, puede colocar componentes de video y audio en la página, crear imágenes y animaciones 2D e incluso escribir juegos simples. No es necesario que intentes recordar todas las etiquetas y estilos a la vez. Será útil aprender los conceptos básicos y ponerlos en práctica de inmediato. Un muy buen sitio donde puedes aprender los conceptos básicos de HTML y CSS es W3School. Pero sólo si tienes al menos conocimientos básicos de inglés.
Además, el desarrollador front-end debe comprender el desarrollo entre navegadores y plataformas, así como el diseño adaptable y responsivo.
Oreja
Es un marco para HTML, CSS y JavaScript. Es decir, determinadas plantillas a partir de las cuales, como desde un constructor, se pueden montar sitios mucho más rápido que sin ellas. Pero, por supuesto, usted mismo debe personalizarlo para que se adapte a sus necesidades. Si sabes inglés te recomendamos la web getbootstrap y la misma w3schools .
javascript
Javascript es el núcleo del desarrollo front-end. Este es el primer y más extendido lenguaje de programación de interfaz. Puede agregar muchas funciones al sitio. En un nivel básico, este lenguaje te permite agregar elementos interactivos a una página. Se utiliza para crear mapas que se actualizan en tiempo real, juegos interactivos en línea y películas. En nuestros cursos senior de JavaRush, aprendemos un poco de JavaScript. También puedes estudiarlo en la misma W3School o leer sobre él en ruso en el sitio web javascript.ru .
jQuery
jQuery es una biblioteca de Javascript que contiene complementos y extensiones que pueden hacer que el desarrollo sea aún más fácil y rápido. En lugar de escribir código desde cero, las bibliotecas le permiten agregar componentes ya preparados, que luego se pueden personalizar para un proyecto específico. Puede utilizar las funciones de autocompletar formularios de búsqueda, reorganizar y cambiar el tamaño de la cuadrícula y configurar temporizadores de cuenta regresiva. Curso práctico de jQuery en w3school
Marcos de JavaScript
Hay diferentes tipos de marcos, pero puede elegir uno que le resulte más cómodo de usar. Los más famosos son Angular, Backbone, Ember y React. Representan una estructura preparada para el código. Ayudan a acelerar el desarrollo. Y en combinación con bibliotecas pueden minimizar el desarrollo de un sitio web o una aplicación desde cero. Revisión de los 5 frameworks y bibliotecas de JavaScript más populares de 2017
Sistema de control de versiones Git
Los sistemas de control de versiones pueden rastrear los cambios realizados en el código a lo largo del tiempo. También le permiten volver a una versión anterior del proyecto. Git es el sistema de control de versiones más utilizado. Saber cómo trabajar con Git es una habilidad importante para todo desarrollador. Tutorial de Git en ruso
Breves conclusiones
UI significa interfaz de usuario, que significa "interfaz de usuario". Es decir, el diseñador de UI es el principal responsable de cómo se presenta el producto al usuario. Desarrolla botones, íconos, selecciona fuentes y prepara un diseño. UX significa Experiencia de Usuario. Entonces, un diseñador de UX diseña el diseño de un sitio web, una aplicación, o cualquier cosa, de modo que el usuario se sienta cómodo y comprenda qué es qué, y pueda obtener lo que necesita del sitio con el mínimo esfuerzo. Muy a menudo, ambos tipos de trabajo son realizados por un solo hombre: un diseñador UI/UX. El desarrollador front-end anima el trabajo de los diseñadores al introducirle dinámica: comienzan a presionar botones y la imagen comienza a cambiar. Debe conocer lenguajes de programación, aderezado con frameworks, preprocesadores y bibliotecas.
GO TO FULL VERSION