Diseño y comunicación digital

Del wireframing estático al wireframing interactivo

Resumen

En el presente artículo se describe el proceso del wireframing orientado a la integración de interactividad; se revisa el concepto de wireframe y se exponen sus características, luego se contextualiza y diferencian los términos de “affordances” y “significantes”1. Asimismo, se comenta el rol de las anotaciones en dichos bocetos como factores permisivos de interactividad y se explica cómo incluirlos con la aplicación Web MockFlow. También se explica cómo se forma el lenguaje interactivo entre los usuarios y los elementos de contenido interactivos, que se representan en un wireframe. 

Palabras clave 

Interfaz gráfica, wireframe, interactividad, affordance, significante. 

Abstract 

This article describes the wireframing process oriented to the integration of interactivity. Therefore, the concept of wireframe is reviewed and its characteristics are exposed. Then the terms «affordances» and «signifiers» are contextualized and differentiated. It also discusses the role of annotations in such schemes as permissive interactivity factors, and briefly exemplifies how to include them with the MockFlow Web application. 

It also explains how the interactive language is formed between users and interactive content elements that are represented in a wireframe. 

Thus, this work seeks that a «non-designer individual» understands the importance and transcendence of the development of static and interactive wireframes. 

Keywords 

Graphical interface, wireframe, interactivity, affordance, signifier. 

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , ,


El cambio de los sitios WEB a través del tiempo

Resumen

El objetivo de este artículo es describir cómo ha cambiado la estructura y el diseño de los sitios WEB a través del tiempo, con el fin de identificar lo que ha mejorado y lo que ha quedado obsoleto.
Se hace hincapié en los momentos donde hubo cambios de diseño o de estructura, que modificaron a los sitios subsecuentes.

Se pretende responder ¿qué cambios estructurales y de diseño han tenido los sitios WEB, hasta la época actual? Y ¿cómo esto ha contribuido a su desarrollo? Para alcanzar una respuesta, se
requiere de la revisión de las estructuras iniciales y conocer las razones de los diversos cambios que ha tenido el diseño de sitios.

Palabras clave

sitios WEB, página WEB, cambios, programación, HTML, CSS, diseño, estructura, PHP, navegadores,
AJAX.

Abstract

The purpose of this article is to describe how the WEBSITES are going to change from design and structure into the time, in order to identify what is going to better, emphasis in the moments in time when they high a high change of design or architecture and what they produce after that.

The questions that need and answer are ¿what changes from design and architecture had the WEBSITES until this time? & ¿how that changes are helping in the development of the sites?
To reach an answer we need to make a revision of the initial structures & know the reasons from the changes that they had in the WEBSITES.

Keywords

WEB site, WEB page, changes, programming, HTML, CSS, design, structure, PHP, browsers, AJAX.

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , , , , , , , ,


Topología, clasificación e influencia de las Redes Sociales

Resumen

Las redes sociales son grupos de personas que se mantienen unidos por relaciones que entablan entre ellos; cuando se habla de redes sociales online, se refiere a esos grupos que mantienen contacto mediante una conexión digital. En los últimos años las redes sociales son relevantes, para la actividad cotidiana, en estos medios se difunden una gran cantidad de materiales y sus integrantes participan activamente entre ellos. Se ha elaborado el presente artículo con la finalidad de comprender como es la estructura y comportamiento de una red social online y así responder a la pregunta ¿Qué funciones tienen las redes sociales online?

Palabras Clave

Redes sociales, topología, redes online.

Abstract

The social networks are a group of persons that keep them jointly due the relationships they establish, when we talk about social networks on line, we target to the groups that keep in contact on line through a digital connection. In the last years social networks has become relevant, for each daily activity, by this networks is deployed a huge amount of materials where they member participate actively between them. The present article has been wrote with the main purpose of understand how come a social network behavior and structure are finally understanding this well be a way to answer what a social networks is created to?

Keyword

Social media, topology, online net Works.

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , ,


La práctica de diseño con artesanos del tejido en México: una reflexión ética y estética sobre un modelo de co-diseño

Resumen

El diseño en México lleva un largo recorrido en la creación de textiles y en ese camino, varios diseñadores han vinculado directamente sus creaciones con el trabajo artesanal. En el proceso, se han presentado problemáticas diversas relacionadas con la autoría de los diseños y la influencia del diseño en el artesano. El desarrollo de estas prácticas ha planteado nuevas perspectivas frente a los efectos de la globalización. Al respecto, se muestra una reflexión enfocada en el tejido acerca de los valores éticos y estéticos que conciernen a este tipo de colaboraciones que aquí se denominan co-diseño.

PALABRAS CLAVE: diseño, artesanía, tejidos, autoría, globalización, axiología, ética, estética

Abstract

The mexican design has been long connected with textile sector. However, there have been many conflicts related to the authorship of the designs. This has affected the work of many designers and the craftsmen. The development of these practices has raised new perspectives against the effects of globalization. In this regard, this work focuses on the weave, about the ethical and the aesthetics values within the textile designs collaborations that in this text are named as co-design.

Key words: design, craft, textile, authorship, globalization, axiology, ethics, aesthetics

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , , , , ,


Requisitos para la accesibilidad en sitios Web para adultos mayores

Resumen

 

El objetivo de este trabajo es proponer una serie de elementos indispensables, para el diseño de sitios Web dirigidos a adultos mayores, desde la perspectiva de la accesibilidad. Esta última condición surge al reconocer las discapacidades físicas y tecnológicas que estos usuarios tienen y se manifiestan como dificultades para acceder al contenido en Internet. Cabe agregar que también será de interés la visualización en tabletas, además de los teléfonos inteligentes. Para lograrlo, se revisarán los planteamientos que hacen por medio de pautas de accesibilidad, la W3C y Mark Pilgrim para el desarrollo del contenido en sitio Web, las cuales constituyen los principios generales de la Web accesible.

Palabras Clave: accesibilidad, Web, adultos mayores.

Abstract:

This aim of this work is to propose a number of essential elements needed for Website design focused on the elderly, from the accessibility perspective. The latter condition comes from recognizing the physical and technological impairments that these users have, which are translated into difficulties for accessing online content. It is a matter of interest the visualization of information through tablets and smarthphones. In order to achieve this, the approaches made through accesibility guidelines, the W3C and Mark Pilgrim for Web content development will be reviewed, which constitute the general principles for Accessible Web.

Keywords: Accesibility, Web, Elderly

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , ,


La importancia de una interfaz usable en un sistema de administración

Resumen

Este trabajo expone la importancia de una interfaz usable en un sistema de administración. La interfaz es el medio que nos conecta con los objetos que utilizamos a diario, por eso es importante que sean fáciles de utilizar, para que el usuario cumpla con la meta que se proponga. En este artículo se muestran los elementos principales que conforman la interfaz y la función que desempeñan dentro de la misma, sin dejar de lado la usabilidad, que es la medida mediante la cual el consumidor determinará la facilidad de empleo del sistema; para así determinar cuales son los elementos más adecuados para el desarrollo de un sistema de administración.

Palabras clave Interfaz, hipertextos, usuario, usabilidad, experiencia de usuario (UX)- arquitectura de la información.

Abstract This paper discusses the importance of a usable interface management system. The interface is the medium that connects us with objects or systems we use every day; so it is important that they are easy to use, so the user reach the goal purposed. This article describes the main elements of the interface and the role within it is. Without neglecting the usability, which is the measure by which the user determine the usability of the system. To determine which are most suitable for the development of a management system elements.

Keywords Interface, hipertext, user, usability, user experience UX, information architecture.

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , , ,


Identificación de variables en la percepción cromática en estudiantes de una universidad de la Ciudad de México

Resumen

El nivel de discriminación tonal en los individuos con visión tricrómata dentro del rango considerado normal, puede variar en relación a los fotorreceptores Largos, Medios y Cortos (L, M, S) alojados en el glóbulo ocular y al óptimo funcionamiento de éstos. Para determinar si la visión está dentro de los estándares y a que nivel funciona se realizan pruebas de discriminación cromática. Con este estudio se busca identificar si los estudiantes de diseño poseen alguna deficiencia y/o defecto de percepción cromática que pueda llegar a afectar su desempeño profesional y que deba tomarse en cuenta, así como, encontrar factores que puedan mejorar esas condiciones.

Palabras clave: visión cromática, discriminación tonal, percepción de color, pruebas de color

Abstract

The tonal discrimination level in people with normal trichromacy view can vary in relation with the optimum functioning of photoreceptors Large, Medium and Short (L, M, S) hosted in the ocular globe. To determine if color visión is within normal parameters and determine its functioning level, there are special chromatic discrimination tests that can be applied. This study pursuit identify if design students have a chromatic perception deficiency or a color visión defect that can affect his profesional performance and what should be consider as well to find factors that can improve these conditions.

Key words: Chromatic visión, Tonal discrimination, Color perception, Color test

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , ,


Representación de Sombras con Realidad Virtual

Resumen

 

La Realidad Virtual (RV) se ha desarrollado en diferentes ámbitos y recientemente se ha implementado en el área educativa. Y se presume que desde el diseño, es posible utilizarla como material educativo para los estudiantes de la Universidad Autónoma Metropolitana (UAM), que cursan la materia de Taller de Representación y Expresión Digital Bidimensional.

El objetivo de este material es que el estudiante experimente las proyecciones de sombras de un volumen tridimensional y aplicarlas posteriormente en un dibujo bidimensional, utilizando la RV como medio de transmisión informativa.

Esta herramienta digital será construida por medio de varios softwares (Maya, Unity, Photoshop), usando como elementos base las figuras primitivas, luces y las sombras proyectadas. Dicho objeto se entregará al principio del curso, a los alumnos para su utilización.

Palabras clave: no inmersivo,  realidad virtual, Iluminación, Perspectiva, 3D.

Abstract

The Virtual Reality (VR) has been developing in different areas and recently being implemented in education. From a design perspective, it is possible to implement it as educational material for students of the Universidad Autónoma Metropolitana (UAM), who attend the Taller de Representación y Expresión Digital Bidimensional.
  
The purpose of this material is that students experience the shadow projections of a three-dimensional volume and then apply them in a two-dimensional drawing, using the RV as a means of information transfer.

This digital tool will be built through several software (Maya, Unity, Photoshop), using as a base primitive elements figures, lights and shadows. This object will be delivered at the beginning of the course, for students use.

Keywords: Keywords: not immersive, virtual reality, Lighting, Perspective 3D.

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , ,


Alegorización del Contexto Mexicano en el Cartel del Festival de Rock y ruedas en Avándaro ‘71

Resumen

Un mensaje visual, independientemente de las palabras que contenga, es en sí mismo un discurso. Los discursos, en términos generales, están determinados por las circunstancias que los rodean, es decir, por su contexto. Si se comprende que el contexto es, precisamente, un entretejido de textos (como se dice de la cultura) y si se suma la estructura de construcción del discurso, el análisis de un mensaje visual (sobre todo uno ampliamente aceptado, como el que contiene un cartel) comprende dos grandes áreas: la transtextualidad y las operaciones retóricas. De esta forma, se encuentran puntos de toque entre ambas partes, se observa el mensaje desde la producción y lo producido, se estudia el contexto de su creación y se hallan los significados latentes que contiene. En el presente artículo se analiza el mensaje visual del cartel de Avándaro 71, debido a que el contexto de ese momento es ampliamente conocido, es relevante en la historia nacional y el impacto en el ámbito musical fue profundo. Se busca comprobar si este contexto se encuentra reflejado en la imagen, cómo funcionan las operaciones retóricas en un discurso visual, qué textos son los que permiten dar con el contexto del cartel y cómo se interrelacionan, y finalmente, al ser una representación no-literal, qué figuras retóricas utiliza dicha representación.

Palabras Clave: discurso visual, contexto, transtextualidad, retórica, Avándaro, rock, cartel, festival, alegoría.

Abstract

A visual message, apart from the linguistic message it contains, is a discourse itself. Discourses, in general terms, are determined by the circumstances that surround them, this means: by their context. If we understand that the context is, precisely, composed by interwoven texts (such as culture is) and if we add up the structure of a speech construction, the analysis of a visual message (specially one that is widely accepted, such as the one in a poster) includes two main areas: transtextuality and rhetorical canons. So, we can find attachment points between these two, we can observe the message from its production and what is finally produced, we can study the context of its creation and we can find dormant meanings in a visual message. In this article, the visual message of Avándaro 71 poster will be analyzed, because the context of that time is widely known, it is an important part in national history and the impact in the musical field was profound. We seek proving if the context is reflected on the image, also how rhetorical canons work in a visual discourse, which texts are those that allow us to deduct the context of the poster and how they are interrelated, and finally, as it is a non-literal representation, which figure of speech is used in the representation.

Keywords: visual discourse, context, speech, transtextuality, rhetoric, Avándaro, rock, poster, festival, allegory.

PDF

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , , , , , ,


Aprendizaje visual en la pantalla: el uso del lenguaje visual en la capacitación e-learning para el trabajo

Resumen

El presente artículo resume las ideas principales de una investigación, que argumenta sobre la aportación del lenguaje visual en la construcción de materiales e-learning orientados a la capacitación para el trabajo. El e-learning en este contexto es un espacio predominantemente visual, donde la experiencia de aprendizaje se lleva a cabo en la pantalla. Así, la imagen digital, con su correspondiente lenguaje visual, actúan como enlace entre el aprendiz y el contenido.

La imagen en el e-learning cumple múltiples funciones, por ejemplo, facilita la comprensión de conceptos complejos y promueve la creación de modelos mentales. El empleo de imágenes ayuda a reducir la carga cognitiva de los aprendices, lo que permite la ejecución de otros procesamientos cognitivos y contribuye al logro de los objetivos de aprendizaje de todo proyecto e-learning.

Palabras clave

Aprendizaje, capacitación, e-learning, imagen digital, lenguaje visual.

Abstract

This article summarizes a more thorough research about the contributions of the visual language for corporate training through e-learning. In this context, the e-learning space is profoundly visual, for the learning experience occurs precisely within the screen. Thus, a didactic image, with its corresponding visual language, acts as a bond between the learner and the content.

 Images on e-learning perform various functions, such as facilitating the comprehension of complex concepts and promoting the development of mental models. By using images on an e-learning project, we can reduce the learner’s cognitive load, which in turn gives room to other learning processes and contributes to the fulfillment of the project’s learning objectives.

Keywords

Learning, training, e-learning, digital image, visual language.

Leer más →


Por en Diseño y comunicación digital

Palabras clave: , , , ,