Guía de diseño web para desarrolladores

El autor del artículo, cuya traducción publicamos hoy, dice que creó su primer sitio web cuando tenía 14 años, en forma de un proyecto escolar. Luego tuvo una tarea simple: desarrollar un sitio web que contuviera texto, imágenes y una tabla. Por lo general, se relacionaba con los proyectos escolares de esta manera: al principio se olvidó de ellos, y cuando llegó la fecha límite, los hizo en el último momento. Sin embargo, esa vez no fue así en absoluto. Estaba particularmente interesado en cómo se vería su primer sitio. Luego, para hacer todo como debería, hizo lo mejor que pudo. El autor del material dice que, desde aquellos tiempos antiguos, se esforzó por asegurarse de que lo que hace se vea lo más atractivo posible. Este deseo todavía está vivo en él. Aquí quiere compartir consejos sobre diseño de páginas web.

Diseño

Puede ser reconocido, puede que no sea reconocido, pero la gente juzga cualquier cosa por su apariencia. Si lo que haces se ve bien, entonces las posibilidades de que tu proyecto gane la confianza de los demás están creciendo, naturalmente, si la palabra "bueno" puede describir no solo su apariencia, sino también su funcionalidad.

Durante muchos años creé mis propios proyectos diferentes y durante este tiempo presté más y más atención al desarrollo de mis habilidades de diseño, y no solo a mejorar mis habilidades de programación. El código es importante, pero si desea crear su propio proyecto rentable, debe resolver muchos problemas, uno de los cuales es el diseño. Un desarrollador solitario, para lograr algo, tiene que desarrollarse de manera integral.

Un gran diseño no es algo que pueda reunir muchos likes en Dribbble . Esto es algo que ni siquiera se nota al principio. Es un equilibrio entre la simplicidad total y algo que es impresionante. El diseño puede ser tanto una ventaja competitiva del proyecto como una de las razones de su fracaso.

No se trata de talento

Cuando era más joven, jugaba mucho a Minecraft. Miré lo hermoso que otros crean, pero cuando traté de construir algo propio, todo parecía una caja. Ni belleza ni estilo. ¿Y cómo puedes hacer algo hermoso en Minecraft?

Luego encontré un video blogger en YouTube y construí una copia de lo que estaba construyendo. Después de algunas semanas, formé mi propio estilo y ya podía crear algo propio. De repente, mis diseños dejaron de parecer que no estaba claro qué. ¿Qué puedo decir? Incluso gané un concurso.

En realidad, le conté esta historia al hecho de que el diseño es una habilidad y, como en el caso de cualquier otra habilidad, el diseño puede ser dominado.

Selección de herramienta

En la programación, puede tomar un Bloc de notas normal y usarlo para escribir una aplicación que no sea inferior a la creada con un IDE potente, aunque la programación en el Bloc de notas puede no ser la tarea más agradable, y probablemente el proceso de desarrollo llevará mucho más tiempo que con utilizando las herramientas adecuadas Si hablamos de diseño web, MS Paint puede desempeñar el papel de Notepad aquí, y espero que, como en el ejemplo con Notepad y la programación, muy pocos lo usen para resolver problemas de diseño.


Herramientas de diseño web populares

Estas son algunas herramientas populares de diseño web:

• Sketch es una herramienta exclusiva para MacOS. Si trazas un paralelo con el mundo de la programación web, será algo así como React for design. Existe la sensación de que la mención de Sketch está presente en cada vacante del diseñador. Esto cuesta $ 99 por año.
• Adobe XD es una herramienta gratuita multiplataforma que, continuando su analogía de programación, es similar a Vue. Alrededor de Adobe XD, una comunidad no está formada tan grande como Sketch, pero dominar esta herramienta es muy simple.
• Adobe Photoshop es algo así como un cuchillo suizo en el mundo del diseño, que todos conocen y que se puede comparar con jQuery. Puede usar Adobe Photoshop por $ 9.99 por mes.

Prácticamente no hay diferencia si usa Sublime o VS Code para escribir código. Lo mismo se puede decir acerca de si elige React o Vue para el desarrollo de la interfaz. Esto es cuestión de gustos. Lo mismo puede decirse de las herramientas de diseño. Cada uno de ellos tiene sus propias ventajas y desventajas.

Yo uso Adobe XD. La razón principal de esta elección es multiplataforma, como resultado, como lo haría si eligiera Sketch, no soy un rehén del ecosistema de Apple. Además, Adobe XD es compatible con Adobe, por lo que puede esperar que este proyecto exista durante mucho tiempo. Y será especialmente agradable para los principiantes que desde mayo de 2018 Adobe XD se pueda usar de forma gratuita, aunque con algunas restricciones (aunque es poco probable que interfieran con usted de todos modos).

Sobre el estado de ánimo correcto

El principal problema que tuve que resolver al ingresar al mundo del diseño web fue desarrollar la actitud correcta. Anteriormente, participé en el proceso de diseño del sitio. Pensé que todo debería estar organizado en un cierto orden. Los elementos se colocan de izquierda a derecha y de arriba a abajo. Es cierto que este enfoque es una forma segura de convertirse en un terrible diseñador.

Las herramientas de diseño te hacen trabajar como si cada elemento tuviera un posicionamiento absoluto. Después de las construcciones claras que se pueden ver en el código del programa, las construcciones operadas por el diseñador pueden parecer desorganizadas y desordenadas. Pero debe ser aceptado. Esto le da libertad, la capacidad de cambiar todo rápidamente y experimentar mucho. Y esto es quizás lo más importante, ya que el diseño es un proceso continuo. En el diseño, se espera completamente que antes de obtener un resultado excelente, a menudo tendrá que rehacer todo.

Herramientas de aprendizaje

Al escribir código para páginas web, se utilizan elementos HTML, como div , span , campos de entrada de datos, lo que permite al navegador convertirlos en algo que se puede ver en la pantalla. Al trabajar con herramientas de diseño, tiene la oportunidad de deshacerse de la mediación y usar elementos visuales, como formas geométricas o fragmentos de texto, directamente.

Elegí las cuatro herramientas de diseño más utilizadas, no es tanto, por lo que no puede pasar demasiado tiempo desarrollando estas herramientas. El tiempo se gasta mejor, de hecho, en el diseño. Es decir, si comprende rápidamente los conceptos básicos, puede comenzar a practicar de inmediato. Hablemos de estas herramientas usando Adobe XD como ejemplo.

▍ Herramienta Rectángulo - Rectángulos

Un rectángulo es la figura geométrica más utilizada en el diseño. Mientras diseña, se encontrará trabajando constantemente con ellos. Piense en el rectángulo como si fuera un elemento div HTML. Los rectángulos se utilizan en el diseño de una variedad de elementos de página, desde campos de texto hasta contenedores.


Rectángulo

▍Texto de herramienta: etiquetas de línea única

A primera vista, parece que trabajar con textos es muy simple. Sin embargo, hay una característica, que consiste en el hecho de que la herramienta para trabajar con textos tiene dos modos de operación. Una de ellas está diseñada para crear inscripciones de una sola línea, la segunda, para crear bloques de prueba de varias líneas. Afortunadamente, a pesar de esta característica, la herramienta para trabajar con textos es fácil de aprender y usar.

En el primer modo, que está diseñado para trabajar con inscripciones de una sola línea, el tamaño del contenedor de texto se ajusta al tamaño del texto contenido en él. Esto es similar a la etiqueta span , excepto que el texto en dicho contenedor no se ajustará automáticamente a una nueva línea a menos que use explícitamente saltos de línea. La fortaleza de este modo de operación es que el tamaño del contenedor se ajusta automáticamente a los parámetros del texto que contiene.

Para crear un fragmento de texto de una línea, seleccione la herramienta Texto en la barra de herramientas de Adobe XD, haga clic donde debe ubicarse el texto e ingréselo. Se debe tomar como regla que este modo se debe usar para inscripciones de una sola línea, cuyo ancho se puede seleccionar automáticamente. Estos son encabezados y etiquetas de objetos de una sola línea.


Herramienta de texto: etiquetas de una sola línea

▍Herramienta de texto: grandes fragmentos de texto

El segundo modo de la herramienta para trabajar con texto se utiliza para formar contenedores de texto de un tamaño determinado, que se comportan como una etiqueta p con un ancho determinado, o como una etiqueta p ubicada en una celda de cuadrícula. La fortaleza de este estado es que puede controlar el tamaño del bloque de texto. Para crear un fragmento de texto, debe seleccionar la herramienta Texto y seleccionar el área que debe ocupar el fragmento. En realidad, este modo debe usarse para fragmentos de texto de varias líneas.


Herramienta de texto: fragmentos de texto de varias líneas

▍ Seleccionar herramienta - selección de objetos

Con la herramienta Seleccionar, los objetos se mueven, cambian de tamaño y se copian. En la figura siguiente, puede ver los elementos auxiliares de esta herramienta, es decir, líneas de color rosa que ayudan a determinar la distancia entre los objetos y líneas azules con las que es conveniente alinear los objetos.


Seleccionar herramienta

▍Tool Line - líneas

A veces las líneas son muy útiles, por ejemplo, para separar elementos de la página. Por lo tanto, estamos hablando aquí sobre la herramienta Línea. Desde un punto de vista técnico, puede usar la herramienta Rectángulo para la misma cosa, pero qué puede hacer, el elemento div HTML se puede usar para implementar cualquier cosa.


Herramienta de línea

Diseño: recomendaciones y trucos.

▍ Diseño

En el desarrollo web, el diseño suele estar representado por el encabezado, el menú, el contenido de la página y el pie de página. Todas estas son partes del diseño, pero el diseño en sí es algo más que la suma de estas partes. El diseño es cómo se organizan los elementos en una página.

Por ejemplo, cuando diseñé la página de información para Sidemail , coloqué los elementos de manera uniforme dentro del contenedor. La siguiente figura, en su parte inferior, muestra exactamente esta opción de diseño, que considero exitosa, y en la parte superior hay una opción fallida. Como resultado, lo que sucedió se percibió, en comparación con otra opción, como algo más integral, esta opción se veía con mayor precisión que la que consideré infructuosa.


Ejemplos de diseño fallido y exitoso

▍Colores

Al elegir colores para su próximo proyecto, tenga en cuenta un concepto como la psicología del color . Para encontrar buenas combinaciones de colores basadas en el color primario, puede usar el proyecto Paletton .

Para crear una jerarquía visual de páginas, use sombras de primer plano y colores de texto. Cuando utilice un fondo de color, experimente con sombras del color utilizado para el texto.


Ejemplos de trabajo con colores y texto.

▍Tipografía

Las fuentes utilizadas para las diferentes etiquetas afectan fuertemente la percepción de las páginas, así que tenga cuidado con su elección. Por lo general, las fuentes comerciales se ven mejor que las que se encuentran en Google Fonts, pero si recién está comenzando como diseñador web, no debe desperdiciar dinero comprando fuentes. Incluso entre lo que hay en Google Fonts, puedes encontrar excelentes opciones.

Para separar visualmente los fragmentos de texto, a menudo utilizo la técnica, que consiste en el hecho de que los textos de las inscripciones se hacen en mayúsculas con una mayor distancia entre los caracteres. Los textos en mayúscula son simétricos, se ven atractivos, sin embargo, son más difíciles de leer, así que no te dejes llevar por ellos.


Ejemplos de texto en mayúsculas

Diseño de página de inicio (o aterrizaje)

Siempre trato de evitar la tentación de crear un diseño de moda, y luego exprimir lo que quiero comunicar a través de la página. En cambio, destaco las ventajas del proyecto (y no sus características funcionales), creo una historia a partir de ellos y cuento esta historia usando una página visualmente atractiva.

Después de entender qué historia quiero contar a través de la página, generalmente empiezo a buscar inspiración. Una gran fuente de inspiración para mí es el proyecto land-book.com , que es un extenso catálogo de excelentes diseños para diseños de páginas de destino por los que puede votar. Otro proyecto donde puedes buscar inspiración es interfaces.pro . Le permite seleccionar páginas de ciertos tipos, por ejemplo, pueden ser páginas con información sobre precios, páginas 404 o páginas con información sobre sitios. Solo veo todo esto hasta que logro encontrar suficientes sitios que me gustan, y la apariencia de las páginas corresponde a mis ideas sobre el estilo del proyecto que hago.


Página de aterrizaje

Después de haber formado una idea general de lo que necesito, llega el momento de resolver la difícil tarea de reunir todo. Lamentablemente, no hay formas fáciles. Para crear algo bueno, necesitas experimentar mucho, haciendo esto hasta que te guste lo que obtienes.

Tal vez se esté preguntando si esto es normal si el diseño que le conviene por completo hace una semana de repente comenzó a parecerle no tan bueno, pero tal vez completamente inaceptable. Esto es completamente normal y, de hecho, si experimentas tales sensaciones, incluso es bueno. Esto se debe al hecho de que usted crece, estudia y mejora en el campo del diseño. Como resultado, lo que parecía una tarea desalentadora ayer no parece tan complicado hoy. Tenga esto en cuenta y no se sentirá como una ardilla en una rueda.

▍ Conclusiones y recomendaciones

• La selección cuidadosa de las fuentes es una de esas pequeñas cosas que distinguen el buen diseño del mal.
• Las imágenes son importantes Intente utilizar ilustraciones o fotografías apropiadas en sus páginas, al menos en pequeñas cantidades.
• Construya una jerarquía visual de elementos usando sombras de colores. No es suficiente usar solo un par de colores, uno de los cuales es el principal y el segundo es el color del texto.
• No use recipientes que sean demasiado anchos. Un ancho de 1.100 píxeles suele ser suficiente.
• El espacio vacío entre los elementos es un elemento de diseño importante.
• La historia que cuenta la página web debe basarse en los méritos del proyecto y no en sus características funcionales.
• Si siente que sus ideas están agotadas, busque inspiración en otros proyectos.

Diseño de aplicaciones web (o panel de control)

Al igual que en el caso del diseño de la página de destino, al crear una aplicación web, no es necesario que agarre de inmediato la disposición de los elementos en la página. La situación bajo consideración difiere de la anterior en que aquí no le cuenta la historia al visitante. Esta vez está creando una herramienta, y su objetivo principal es hacer que esta herramienta sea conveniente. Tome un pedazo de papel y un lápiz y dibuje un plan de trabajo para su aplicación. Piense de qué depende, cómo facilitar el trabajo con esta aplicación.

Si es necesario, haga algunos bocetos o diseños. Explore el diseño de proyectos competitivos, piense en lo que les falta. Quizás decida hacer algo que ellos no tienen, y esto puede convertirse en la ventaja competitiva de su proyecto. Tenga en cuenta que a veces, antes de dibujar diseños y descubrir opciones de diseño, debe darse tiempo para pensar.

El mejor consejo que no está vinculado a las características específicas de varios proyectos que puedo dar aquí es elegir un diseño de página adecuado. Por lo general, las aplicaciones web utilizan dos enfoques para los diseños de página. La elección de uno u otro depende de los objetivos de la aplicación. Estamos hablando de contenedores de ancho fijo y de contenedores flexibles que llenan toda la pantalla.


Aplicación web

▍ Contenedores de ancho fijo

Prefiero usar contenedores de ancho fijo, ya que es más fácil para el usuario concentrarse en un área limitada debido al hecho de que para ver lo que se encuentra en esta área, no necesita movimientos oculares innecesarios. Además, las aplicaciones que usan contenedores fijos, por lo general, se ven más ordenadas, y los nuevos usuarios de tales aplicaciones son más fáciles de navegar. Cabe señalar que tales aplicaciones, debido al ancho limitado de los contenedores, son más difíciles de diseñar.

Aquí hay algunos ejemplos de aplicaciones web que usan contenedores fijos: Twitter , Buffer , DigitalOcean , Netlify , GitHub .

▍ Contenedores flexibles

Los contenedores flexibles son excelentes para proyectos web como chats, aplicaciones de hojas de cálculo o con grandes cantidades de información presentada en otros formatos. Por lo general, al diseñar tales aplicaciones, es importante que se coloque la mayor cantidad de datos posible en la pantalla. La desventaja de los contenedores flexibles es el hecho de que la gran cantidad de datos que se muestran en la pantalla puede confundir al usuario.

Ejemplos de aplicaciones que usan contenedores flexibles incluyen Slack , Intercom , Hotjar , Google Sheets , Trello , Spotify .

▍ Conclusiones y recomendaciones

• Elegir los contenedores correctos para el contenido de la aplicación es importante por dos razones. En primer lugar, el diseño de la página dependerá de esto. En segundo lugar, para cambiar a contenedores de otros tipos, se requerirá un trabajo serio. Cada proyecto es único y requiere soluciones únicas, así que no tengas miedo de experimentar.
• Lucha por la simplicidad.
• Use fuentes cuyas etiquetas sean fáciles de leer.
• Al generar grandes cantidades de datos, use una jerarquía visual.
• Analice las decisiones de los competidores y, al encontrar fallas, no permita que aparezcan en su proyecto o, en base a dicho análisis, equipe su proyecto con oportunidades que se convertirán en sus ventajas competitivas.

Resumen

Un desarrollador que está acostumbrado a trabajar con código en lugar de imágenes visuales puede tener dificultades para cambiar a la ola de diseño. Pero el diseño es algo que puedes aprender bastante. Recuerde que el diseño puede ser una ventaja competitiva de su proyecto, así que preste atención y cree sitios atractivos que sean convenientes y agradables para trabajar.

Estimados lectores! ¿Crees que un programador solitario puede lograr buenos resultados de diseño?