Ha habido esta división no escrita entre diseñadores y desarrolladores desde que hemos estado haciendo sitios web. Las personas que hacen que las cosas se vean bien en comparación con las personas que lo hacen funcionar. Esos días han terminado.
Cada diseñador debe aprender cómo funciona el desarrollo en el panorama digital. Y cada desarrollador debe entender 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 un bono adicional, todos los ejemplos de diseño se crean utilizando marcos CSS).
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 participar, desde botones hasta elementos de navegación, formas, ver 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 donde la información nueva puede aparecer en el extremo del usuario de un sitio web sin necesidad de actualización. 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 hablen. El uno al otro y trabajar 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 los elementos visuales. (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 responsivo (RWD): Una técnica de diseño web que utiliza una cuadrícula e imágenes flexibles, medios y texto para que un solo sitio web se ajuste a múltiples tamaños de dispositivos. (Podría decirse que este es uno de los factores más importantes en el diseño web en este momento).
- IU: 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 quita de las interacciones con el sitio. Esto tiende a expresarse como una conexión emocional y se relaciona con el valor global percibido.
Pensar en preguntas
"Cada una de estas interacciones debe sentirse como una conversación entre dos personas que confían entre sí y se merecen la confianza del otro".Cada parte de un sitio web está pidiendo a los usuarios que se involucren o continúen interactuando con otra parte del sitio. Ya sea que estés jugando, leyendo un artículo o comprando un regalo, cada acción te lleva a otra cosa. Pero ¿cómo hacer para llegar 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.
?¿Bien dicho? por Nicole Fenton y Kate Kiefer Lee es un manual para escribir para la web. También proporciona un marco de preguntas que funciona para cada parte de la experiencia de diseño web.
Preguntas para hacer en el camino (y muchas más de la guía de recursos del libro):
- ¿Cómo la gente usa este contenido o característica ahora?
- Quien esta hablando aqui
- ¿Qué problemas estamos tratando de resolver?
- ¿Cómo este contenido sirve a nuestros objetivos? ¿Cuál es su propósito?
- ¿Cuáles son las características del sitio web? ¿Cómo se comporta?
- ¿Cuál es el formato final?
- ¿Existen limitaciones técnicas o límites de carácter?
Fenton escribió aún más sobre otras preguntas que los sitios web? 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 entre sí y se merecen la confianza del otro ,? ella 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.
Piense en la simplicidad y la 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 que es genial para los pensadores visuales). Entonces 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 jugar; haga clic para desplazarse). Si no puede hacerlo comprensible en una oración, es posible que desee reconsiderar la estrategia de diseño.
Aprender codigo
Ahora que está pensando en cosas en 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 realizar cambios simples y hablar con otros diseñadores y desarrolladores de manera coherente. (Además, realmente puedes crear algunos efectos geniales, como los de arriba).
Personalmente, comencé con un poco de HTML con propósito. Hice una lista de cosas que quería saber y las aprendí de adentro hacia afuera (es decir,cómo cambiar el color de un elemento del sitio usando un valor HEX en el CSS en lugar de hacer clic en un recuadro en un selector de color. Hay muchas herramientas disponibles de clases en línea y tutoriales para la capacitación en persona en su área. Todo lo que tienes que hacer es registrarte y empezar.
Cuatro grandes recursos de desarrollo de código:
- Tuts +
- CodeAcademy
- Código de la escuela
- academia Khan
Conclusión
Aprender desarrollo web no es solo aprender sobre marcos y códigos. Se trata del proceso de pensamiento. Los diseñadores pueden pensar como desarrolladores en camino de crear 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 soluciones y resultados de pesaje) 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.