Universidad

 Tecnológica  
Equinoccial    
 
Facultad  de  Comunicación  Artes  
y  Humanidades  
 
Diseño  Gráfico  Publicitario  

Docente:  Diego  Maldonado  Villacís    

LA  TECNOLOGÍA  
EN  EL  DISEÑO  
GRÁFICO  
Qué  es  el  Diseño?  
El  diseño  se  refiere  a  componer,  designar,  decidir  y  hacer  que  algo  funcione  y  
se  vea  bien.  Para  diseñar  se  requiere  un  buen  número  de  habilidades  y  
recursos,  ya  sea  para  crear  una  maqueta  editorial  o  un  proyecto  web,  basados  
en  diferentes  fundamentos  de  simetría,  color,  balance,  forma  y  textura.  

Diseño  gráfico,  diseño  mulNmedia,  diseño  editorial,  diseño  web,  diseño  

industrial,  diseño  texNl  y  un  gran  número  de  disciplinas  que  Nenen  el  diseño  
como  su  punto  de  parNda.    

Más  allá  del  arte,  el  diseño  respeta  jerarquías  de  información,  comunica  una  
idea  específica  a  un  target  específico  de  una  forma  específica.  
La  tecnología  actual  es  la  Web  ó  Word  Wide  
Web  –  www  
Es  un  sistema  de  documentos  de  hipertexto  intervinculados,    alcanzables  a  
través  de  los  navegadores.    

Estos  documentos  pueden  contener  texto,  imagen,  video,  animación,  sonido,  

formularios,  etc.  Es  cualquier  clase  de  información  dependiendo  de  las  
necesidades  del  proyecto  y  el  objeNvo  alcanzar.  

La  web  es  la  parte  visual  de  Internet  que  ha  crecido  de  manera  espectacular  
desde  que  nació,  se  puede  pensar  en  un  si9o  web  como  un  punto  de  venta,  o  
una  herramienta  de  comunicación  para  una  compañía,  persona  en9dad  u  
organización,  con  obje9vos  muy  específicos.  
Historia  
Web  1.0  /  Desarrollo  tecnológico  uso  de  lenguajes  Web  1.0  

HTML,  creado  por  ingenieros.  Los  diseñadores  entonces  tuvieron  que  aprender  
HTML.  El  diseño  era  súper  plano,  había  principalmente  texto,  algunas  
imágenes,  la  información  se  presentaba  en  tablas.  Había  realmente  pocas  
posibilidades  de  diseñar.    

Era  diRcil  el  desarrollo  y  las  páginas  web  de  ese  entonces  se  enfocaban  en  la  
funcionalidad,  no  en  el  diseño.    
Historia  
Web  2.0  /  Desarrollo  tecnológico  uso  de  lenguajes  Web  2.0  
web  colaboraNva,  blogs,    las  redes  sociales,  Wikis,  folksonomías,  CMS,  etc.  
Desarrollo  tecnológico  uso  de  lenguajes  Web  3.0  
CSS  Y  mulNmedia  
 
Web  3.0  
La  web  semánNca,  Web  data,  inteligencia  arNficial  y  base  de  datos  

Desarrollo  tecnológico  uso  de  lenguajes  Web  4.0  

Front  End  –  Back  End  
Responsive  design  
 
CMS  

Con  ellos,  podemos  manejar,  editar  y  publicar  fácilmente  grandes  estructuras  

de  contenidos.  Son  uNlizados  para  correr  websites,  blogs,  siNos  de  noNcias  y  
compras.    
 
Se  basan  en  la  creación  colaboraNva  de  contenidos  y  hacen  un  uso  intensivo  de  
base  de  datos.  Como  ejemplos  podemos  anotar  Joomla,  Moodle,  WordPress  es  
el  sistema  para  creación  de  blogs  más  uNlizado  en  la  actualidad.      
Diseñar  web  

Es  el  proceso  relacionado  a  la  creación  del  look  de  un  grupo  de  información  que  
necesita  ser  alcanzable,  entendible  y  usable  a  través  de  la  www  

§  Organización  de  información.    

§  Diseño  de  interfaz  y  experiencia  de  usuario.  
§  Generación  y  opNmización  de  recursos.  
§  Capacidades  de  maquetación.  
Desarrollar  web  

Combinación  de  tecnologías  tanto  del  lado  de  servidor  como  del  cliente,  donde  
a  través  de  la  escritura  de  código  se  consiga  la  comunicación  entre  sistemas  de  
almacenamiento  de  información  con  el  uso  del  navegador  para  la  realización  de  
tareas  y  el  despliegue  de  información.  

§  Programación  en  diversos  lenguajes  

§  Creación  y  administración  de  base  de  datos  
§  Análisis  e  integración  
PERFILES  

Los  diseñadores  Nenen  una  formación  creaNva.    

 
Los  desarrolladores  cuentan  con  una  formación  sobre  código.    
 
Designlopers  son  diseñadores  con  formación  en  código  o  desarrolladores  con  
formación  en  diseño.  
COMPETENCIAS  
 
CAPACIDADES  
Podemos  decir  que  una  capacidad  es  aquel  recurso  que  Nene  un  individuo  de  
forma  natural  para  realizar  algo,  dentro  de  sus  limitantes  Rsicas  y  mentales;  
digamos,  un  primer  estado  de  recursos  con  los  que  nacemos.    

HABILIDADES  
Una  habilidad  es  cierta  capacidad  llevada  a  un  siguiente  nivel,  ya  sea  por  
talento  natural  como  por  prácNca  constante,  que  puedan  potenciar  el  resto  de  
nuestras  competencias  e  incluso  destrezas.  

NOTA:  Habilidades  como  recursos  fundamentales  que  nos  permi_rán  fundar  

las  bases  tanto  del  diseño  como  del  desarrollo  de  un  proyecto  web.  Estos  
recursos  están  ligados  a  tecnologías  o  soaware  específico.  
Lenguajes  vitales  para  el  desarrollo  web  

HTML  

CSS  

Java  Script  
Consideraciones  generales  

Medidas  

Fotogradas  

Tamaños  
Vectores  
HERRAMIENTAS  
 
PERFIL  DEL  DISEÑADOR  
Les  permiten  organizar  los  contenidos  y  darles  el  aspecto  que  se  necesita  
Adobe,  Fireworks,  Photoshop,  Illustrator  y  Adobe  Muse  

PERFIL  DEL  DESARROLLADOR  

Adobe  Dreamweaver  ,  Brackets  y  Sublime  Text.    

PERFIL  HÍBRIDO  
Se  dedican  tanto  al  diseño  como  al  desarrollo,  los  frameworks  y  el  uso  de  
librerías  como  JQuery  suponen  una  ayuda  inesNmable.    
 APLICACIÓN  
PROFESIONAL  
DEL  PERFIL  
Generalista  
Diseñador  que  Nene  una  buena  base  de  los  conceptos  y  habilidades  de  diseño  
web,  experiencia  en  la  planificación,  construcción  y  fases  de  testeo.  
HTML  -­‐  JS  -­‐  CSS  –  UX  
Visual  Designer  
Diseñador  que  está  principalmente  relacionado  con  el  apartado  visual  del  
mundo  web.  El  color,  NpograRa,  diseño  de  estructuras  y  creación  de  la  parte  
gráfica.  
HTML  -­‐  CSS  -­‐  TIPOGRAFIA  -­‐  PS  –  AI  
UX  Designer  
Diseñador  que  se  centra  en  el  comportamiento  humano  y  el  diseño  de  
interacción  para  crear  experiencias  de  usuario  buenas  y  posiNvas.  
HTML  -­‐  CSS  –  UX  
Diseñador  Interac_vo  
Crea  interfaces  y  entornos  interacNvos  buscando  las  soluciones  que  respondan  
ante  el  usuario  de  la  forma  más  eficaz.  
HTML  -­‐  CSS  -­‐  JS  -­‐  JS  Frameworks  –  UX  
Diseñador  Mo_on  Graphics  
Dedicado  al  mundo  de  la  animación,  crean  contenido  visual  animado  en  forma  
de  juegos,  interfaces,  video,  etc.  
Desarrollador  Front  End  
Diseñador  /  Desarrollador  o  perfil  híbrido  que  se  encarga  de  la  parte  cliente.  
HTML  -­‐  CSS  -­‐  JS  -­‐  JS  Frameworks  –  CSS  
Especialista  CMS  
Desarrollador  que  se  encarga  de  la  programación  de  la  parte  de  servidor.  
HTML  -­‐  CSS  -­‐  JS  -­‐  CMS  –  PHP  
Diseño  Front  End  
Desarrollo  de  la  parte  visual  del  siNo  web  
Control  sobre  NpograRa,  maquetación,  color  y  gráficos  
Responsable  de  planificar  el  siNo,  manejo  de  la  interacción,  experiencia  de  
usuario  y  scripNng  del  lado  del  cliente  
Debe  poseer  conocimientos  de  las  áreas:  CMS  -­‐  JAVASCRIPT  -­‐  HTML/CSS  -­‐  
ANGULAR.JS(e)  -­‐  NODE.JS(e)  
Una  empresa  que  se  dedica  a  la  elaboración  y  comercialización  de  
cursos  virtuales  offline,  le  contratan  para  que  desarrolle  el  
proyecto  de  su  portal  web,  entre  otros  requerimientos  se  
encuentra  como  principales  los  siguientes:  Nenda  online  para  
compra  de  cursos,  lista  de  distribución  para  mensajes  y  enlace  a  
redes  sociales.  Analice  y  determine  ¿qué  herramienta  base  
seleccionaría  para  el  desarrollo  del  proyecto?  

§  a)  Frameworks  
§  b)  LMS  (Sistema  de  administración  de  aprendizaje)  
§  c)  CMS  (Sistema  administración  de  contenidos)  
§  d)  SDK  (Aplicado  a  Plataformas)  
Una  empresa  que  se  dedica  a  la  prestación  de  servicios  en  el  
campo  del  diseño  editorial,  requiere  contratar  un  perfil  de  
diseñador  gráfico  para  el  diseño  y  desarrollo  de  sus  contenidos,  
los  mismos  que  serán  publicados  en  su  portal  web  que  se  
distribuye  en  múlNples  disposiNvos  (computadores,  tablets,  
celulares).  IdenNfique  ¿qué  perfil  debe  poseer  el  profesional  a  ser  
contratado?  

§  a)  Visual  Designer  

§  b)  UX  Designer  
§  c)  Diseñador  InteracNvo  
§  d)  Diseñador  MoNon  Graphics  
Un  cliente  requiere  elaborar  un  juego  interacNvo  para  PC  y  que  
uNlice  lenguajes  de  programación  y  estándares  para  que  se  
ejecute  en  cualquier  navegador  instalado  en  un  computador  
personal.  IdenNfique  ¿qué  lenguajes  de  programación  podría  
uNlizar  para  la  construcción?  

§  a)  HTML  –  CSS  –  JavaScript  

§  b)  HTML  –  CSS  -­‐  Flash  
§  c)  HTML  –  CSS  –  CMS  
§  d)  HTML  –  CSS  –  PHP