back to » Marketing

Imprimir esta página

Diseñadores web vs Desarrolladores web

Y ahora qué hacemos? Comunicarse es fácil cuando se habla el mismo idioma pero este no es el caso.

Dos perfiles con sus ventajas y sus desventajas. 

Diseñador = Creativo, intuitivo (viéndose a uno mismo), sin estética, maniático, culpable (pensando al desarrollador), web, agotador, satisfacer al cliente (punto de encuentro).

Desarrollador Web= Lógico, técnico (viéndose a uno mismo), sin contenido,  cool, facilista (pensando al diseñador),  web, agotador, satisfacer al cliente (punto de encuentro).

Entonces siendo objetiva voy a entrar en una leve comparación, si el diseñador es el artista, el creativo, el desarrollador es el pincel, el limitador y la web es el lienzo en sí misma, que depende de cada fabricante. Se entiende? Por lo tanto no podemos manejarnos igual en todos los lienzos (impresoras, navegadores, sistemas operativos).

Para solucionar este problema el desarrollador se ocupa de traducir al lenguaje de la web lo que el diseñador quiere hacer y de esta forma no entendemos todos... Entonces las reglas no las pone ni el diseñador ni el programador sino la web, así que basta de autoritarismo y ninguneos, solo debemos adaptarnos a losestándares web...

Principal diferencia y la raíz de todos los males

1.-IMAGEN

Imagen para el diseñador

Resolución, colores, formato.

Mientras más resolución tenga mejor calidad e imagen más pequeña

En una imagen de 640 x 480 su tamaño  final dependerá de los dpi. Cuantos más pixeles se prensan en cada centímetro de papel, menor será la imagen.

Imagen para el desarrollador

Peso, dimensiones, formato.

Mientras menos pese sin perder calidad, mejor rendimiento al cargarse.

En una imagen de 640 x 480 su tamaño final será de  640 x 480, lo dpi son invisibles a la web. Cada pixel de la imagen ocupa un pixel de la pantalla.

2.-TIPOGRAFIAS

Tipografía para el diseñador

Se pueden descargar y utilizar en todos los programas diferentes tipos de fuentes, hay de todos los tipos, se pueden crear propias inclusive, se ven iguales en todas las impresiones. Con la mezcla de más de una se consiguen resultados seductores para el cliente.

 Tipografía para el desarrollador

Se utilizan las Fuentes Web seguras (Cambria, Constantina, Times New Roman, Georgia, Arial Black, etc) o también se pueden encontrar en Google Font muchas más para elegir. Otra opción,que es la más conocida y la mejor para los diseñadores es que pueden bajarse y adjuntarse al servidor fuentes no seguras. Pero previo a esto se debería hacer un testeo en los diferentes navegadores.

En todos los casos como medida de seguridad por si el navegador no encuentra la fuente especificada se utilizan fuentes de respaldo a la que ya elegimos como fuente principal.

Los logos son siempre tratados como imágenes impresas así que no tenemos inconvenientes con esto.Pero en los contenidos de la web debemos limitarnos con los gustos de las fuentes, ya que una web cargada de imagenes en todo su contenido (menu, logo, pie de pagina, contenido principal, etc) se vuelve muy pesada.

Maquetación de la pantalla

Para pensar en el ancho de la pantalla se utilizaba más o menos el siguiente criterio, pensando como diseñador 1024px o más y pensando como desarrollador 960px o menos.

Hoy en día hay que adaptarse a las diferentes pantallas  iPads, widescreen iPads, iPhones, Samsung Galaxy, portátiles, monitores de 21" a 1024px, monitores de 27" a 2560px , ect . Es responsabilidad de los desarrolladores que una web pueda verse en todos los formatos digitales sin limitación. Hay que utilizar %, las medidas  EM, los @media screen.

Ejemplo práctico:

Por último dejo un ejemplo práctico y sencillo de cómo se hace un rectángulo rojo desde el lado del diseño y desde el lado del desarrollo.

Diseño utilizando CorelDraw

Seleccionamos Herramientas - Caja de Herramientas - Herramienta Rectángulo - Nos arrastramos con el mouse y definimos tamaño en la hoja virtual elegida - Luego elegimos color y borde desde los gráficos adecuados

Desarrollo utilizando lenguaje Web

En Html definimos el código del elemento

<div class= “rectangulo”> </div>

En Css definimos el diseño del elemento

.rectangulo { width: 100px;

                   heigth: 100px;

                   background: red;

                   border-color: red;}

Conclusión = Son distintos idiomas sin dudas, hay que encontrar el equilibrio y no abandonar en el intento.El resultado siempre sera mejor si se trabaja juntos!

 

 

comentarios

Inicia sesión para enviar comentarios