Codificación para el no codificador: los diseñadores pueden pensar como los desarrolladores

Ha habido una división no escrita entre diseñadores y desarrolladores desde que creamos sitios web. Gente que hace que las cosas se vean bien versus personas que hacen que funcione. Esos días han terminado.

Todo diseñador necesita aprender cómo funciona el desarrollo en el panorama digital. Y cada desarrollador debe comprender las teorías básicas de diseño. Aquí, ayudaremos a los diseñadores a comprender mejor el lenguaje de los desarrolladores, una habilidad esencial en el mercado actual. (Como beneficio adicional, todos los ejemplos de diseño se crean utilizando marcos CSS).

Explore los elementos de Envato

Interfaces de usuario y diseño

La columna vertebral detrás de cada sitio web es una cadena de 1s y 0s. Eso no es muy emocionante cuando se trata de diseño. Pero la interfaz real y la conexión con un usuario es.

Cada pequeño detalle incluye elementos de diseño con los que se supone que alguien debe involucrarse, desde botones hasta elementos de navegación, formas, mirar un video o comprar un par de zapatos. El objetivo es crear algo que se vea agradable, atractivo y fácil de usar. Ahí es donde se encuentran el diseño y el desarrollo.

Palabras que necesitas saber:

• Ajax: el uso de JavaScript asíncrono y XML crea una experiencia interactiva en la que puede completarse nueva información en el extremo del usuario de un sitio web sin actualizar. Un ejemplo común es la carga continua de publicaciones a medida que un usuario se desplaza por una página de Twitter.
• API: al proporcionar especificaciones para rutinas, datos, clases de objetos y variables, y la interfaz de programación de aplicaciones permite que diferentes sitios web o software se "comuniquen" entre sí y trabajen juntos. Piense en ello como un conjunto virtual de bloques de construcción.
• CSS: las hojas de estilo en cascada son la columna vertebral del lenguaje utilizado para diseñar sitios web y mostrar elementos HTML visualmente.
• Consulta de medios: un elemento CSS que crea reglas específicas para ciertos dispositivos cuando se trata de cómo se representarán las imágenes. (Es la magia que hace que la misma foto se renderice con una relación de aspecto y recorte en un sitio de escritorio y de otra manera en un dispositivo móvil).
• Diseño web receptivo (RWD): una técnica de diseño web que utiliza una cuadrícula flexible e imágenes, medios y texto para que un único sitio web se ajuste a múltiples tamaños de dispositivos. (Este es posiblemente uno de los factores más importantes en el diseño web en este momento).
• UI: La interfaz de usuario es todo lo que el usuario ve e interactúa en un diseño. Esto puede ser todo, desde cómo usan el sitio web y el dispositivo hasta cada elemento individual en la pantalla.
• UX: La experiencia del usuario es lo que cada usuario individual elimina de las interacciones con el sitio. Esto tiende a expresarse como una conexión emocional y se relaciona con el valor general percibido.

Piensa en preguntas

"Cada una de estas interacciones debería sentirse como una conversación entre dos personas que confían mutuamente y merecen la confianza mutua".

Cada parte de un sitio web pide a los usuarios que participen o continúen interactuando con otra parte del sitio. Ya sea que esté jugando un juego, leyendo un artículo o comprando un regalo, cada acción lo lleva a otra cosa. ¿Pero cómo llegas allí?

Ahí es donde entran las preguntas. Si hace preguntas en el proceso de diseño, puede hacer enlaces entre acciones, creando un diseño más fluido con un flujo lógico.

"Nicely Said" de Nicole Fenton y Kate Kiefer Lee es un manual para escribir en la web. También proporciona un marco de preguntas que funcionan para cada parte de la experiencia de diseño web.

Preguntas para hacer en el camino (además de muchas más de la guía de recursos del libro):

• ¿Cómo usan las personas este contenido o característica ahora?
• ¿Quién está hablando aquí?
• ¿Qué problemas estamos tratando de resolver?
• ¿Cómo sirve este contenido a nuestros objetivos? ¿Cuál es su propósito?
• ¿Cuáles son las características del sitio web? Como se comporta
• ¿Cuál es el formato final?
• ¿Hay restricciones técnicas o límites de caracteres?

Fenton escribió aún más sobre otras preguntas que los sitios web "hacen" todo el tiempo. Estamos hablando de los detalles personales que ayudan a los usuarios a relacionarse con los sitios con los que interactúan. "Cada una de estas interacciones debe sentirse como una conversación entre dos personas que confían mutuamente y merecen la confianza mutua", escribe.

Algunas de esas preguntas incluyen:

• como podemos ayudarte?
• ¿Dónde estás ahora mismo?
• ¿Estás dispuesto a pagar por esto?

La respuesta a estas preguntas establece la naturaleza de la relación interfaz-usuario y tiene un gran impacto en el diseño. Piénselo de esta manera: si un usuario no está dispuesto a decirle su ubicación, el diseño y la interfaz de usuario no serán efectivos si se basa en la geolocalización; El diseño debe acercarse al usuario de otra manera.

Piensa en simplicidad y dirección

Cuando los sitios web se unen, todo tiende a caer en algún lugar del mapa. Puede trazar el curso de una interacción de usuario a la siguiente. (Lo cual es excelente para los pensadores visuales). Así que piense en el proceso de diseño / desarrollo en términos de A vs. B: ¿Cuál es el siguiente paso, A o B?

Cada elemento debe tener un propósito simple que sea fácil de definir y describir. (Haga clic para reproducir; haga clic para desplazarse). Si no puede hacer que sea comprensible en una oración, es posible que desee repensar la estrategia de diseño.

Código de aprendizaje

Ahora que está pensando en las cosas de la metodología de un desarrollador, necesita salir y desarrollar algunas habilidades de codificación. Esto no quiere decir que necesite ser un codificador maestro, pero debe comprenderlo lo suficiente como para hacer cambios simples y hablar con otros diseñadores y desarrolladores de manera coherente. (Además, realmente puedes crear algunos efectos geniales, como los anteriores).

Personalmente, comencé con un poco de HTML con propósito. Hice una lista de cosas que quería saber cómo hacer y las aprendí de adentro hacia afuera (es decir, cómo cambiar el color de un elemento del sitio utilizando un valor HEX en el CSS en lugar de hacer clic en un cuadro en un selector de color). Hay muchas herramientas disponibles, desde clases en línea y tutoriales hasta capacitación en persona en su área. Todo lo que tienes que hacer es registrarte y comenzar.

Cuatro grandes recursos de desarrollo de código:

1. Tuts +
2. CodeAcademy
3. Código escolar
4. academia Khan

Conclusión

Aprender desarrollo web no es solo aprender sobre frameworks y código. Se trata del proceso de pensamiento. Los diseñadores pueden pensar como desarrolladores en el camino hacia la creación de un sitio web exitoso. Solo tienes que estar abierto a la idea.

Comprender que algunos de los procesos de pensamiento son similares (pensamiento visual y sopesar soluciones y resultados) son parte de cualquier proyecto de diseño o desarrollo. Todos somos diseñadores / desarrolladores en el mercado actual.

Fuente de la imagen: Marjan Krebelj.