Edici贸n 24 Noviembre / 2011
Diagramaci贸n en interfaces descubra que es y para que sirve.
Diagramacion l铆quida
conozca una mejor forma de hacer sus paginas y cual es su uso.
Dise帽o web de respuesta
como mejora y facilita la creacion de paginas web para diferentes resoluciones
5
D
ise単o web
a pag 6-7
D 2-15
iv sta pag 1
Entre
iD agramaci
liquid n o
1 a pag 0-1
espuest r e d
1
Edi
ag 2
torial P
pag aces 3-
a m c a io r g ai
n i t e n rf e n
L
a revista Typo nace con el objetivo de mostrar las distintas o nuevas formas de diagramar y usar las retículas en muchas áreas del diseño, ya sea digital o físicamente. En esta edición nos adentraremos principalmente en el tema digital, mostrándoles lo que es la llamada diagramación liquida, cuáles son sus usos, qué problemas corrige a las formas anteriores y otros datos adicionales. También hablaremos acerca del por qué se debe hacer un buen uso de la diagramación y cómo influye esto en el lector. Por último tendremos entrevista exclusiva a un diseñador y programador web, que nos hablará de todo lo que tiene que ver con su oficio y de cómo considera que será su futuro en el mercado gracias a lo
El el diseño de primer paso en presentación esos es la re ncionaobjetos o proc estructura, fu su de as m ra s primeras mediante diag retando así la nc co o, nt ie , que es la portam nguaje visual miento y com le l ra de és av tr as a s gráficos pa ideas abstract enes y objeto ág de im so de ca to el s. En un conjun es disponible , esta on utilización de ci eb ac w y s n tio ió formac plo los si in em la r ej r ta po en o es m co repr será la con interfaz, cificando cuál os iv pe ct es ra n, te ió in s ac producto de diagram es elementos. én es objeto de los diferent al su vi interfaz tambi ón ci y estructura que será la organización concreta de lo y a ar cl ón ci an páginas ifica el diseño ya se hacer una plan án te ar an gr rt te po in e im También es elementos qu cosas. los objetos o muchas otras de y s, ón la organizaci ne io za ni ac orga anim una retícula y de ón ci ta web, menús, en plem lo deseado de rá pasó a la im n ella se logre comunicar da se o, ch co de múltiples Con el plan he ella, para que ar la pantalla up en s oc r to je ita ob ev sy importante. ción de dichos ia a los usuario es realmente br e so qu y lo a ct de re estra atención una manera di en desviar nu ed pu e qu s to : obje ra diagramar s software pa ne io ac lic ap Algunas Smart Draw io Microsoft Vis ter ar iGrafx Flowch
a-
fic eadas especí e no fueron id qu e ar ftw so : Aplicaciones cer diagramar mente para ha Corel Draw or Adobe Illustrat
l fu
tur o
Microsoft Visio
d In t e r f a c e s
e
min ima iz
Pagina web
al se r
a ad
vas formas de diagram e u n s a ar nl o c nta e u yc
Una correcta hara diagramacion o o comque el usuari de de prador, entien sencilla y manera mas el dise単ae u q lo a id p ra munidor quiere co car
La s páginas mayoría de la e en deben hacers s a d a it lic o na s webs interesante u e c a h e u q lo ue s, los flash, dado q s animacione la , s to c fe e s iones en ella. página son lo ic s n a tr s la y ados botones anim ieran ramadores qu g ro p s lo h s a r fl sh ocupe e al desarrolla cir, que el fla e d s e , Es común qu h s a s ya fl gina web full trae problema á s p e a c n e u v r a e c to a s h dor, e o puede lla del explora os diferentes ñ a m ta e d s toda la panta ando la diagra tiene pantalla rm o fo ri e a d u s to u s a u d g a que c uida" na a su gramación Liq ño de la venta ia a m "D ta la l e a s r u ia b e cam to que s sh, es por es a fl l e d n ió c a s m ara adaptar lo p o ig d ó c e d el uso , entonión líquida es del programa c a a m re á ra l g a ia a d m a L eño se n progra ntenidos de u ue nuestro dis o q c r e s c to a n h e l a m por s le e que logramo tallas, ya sea to n c a p fe e s l la e s s a e d , ces icaión de to n por su reub ato y resoluc ie b rm o fo s l a to je te b p o a ad los uidos, elementos en de con los líq e c u s o m o el cambio de c l ta ido se e la pantalla; nte, este líqu ie ip c ción dentro d re l e s o odificam nar toda cuando, si m zando a relle n a lc a e s o d n urrié expande esc el área.
do
se
nte
E l li q ui
ac o
pla a
cual q u
ie p i c ie r r e
Esta diagramacion ha tenido una gran acojida por parte de los usuarios y es de las mas utilizadas para la programacion de paginas web.
Forma en la cua l se m inimi za u na pag
n o c a eh ch ina
Los elementos que se expanden pueden hacerlo horizontal y/o verticalmente, por ejemplo una barra de tareas va acoplada arriba (A) y solo se estira horizontalmente, un menĂş lateral (B) solo se estira verticalmente y el fondo de la aplicaciĂłn (C) se estira horizontal y verticalmente de manera de usar siempre todo el ĂĄrea de la pagina.
n liquida o i c a m a diagr
Actualmente y gracias al desarrollo y ava nces tecnológicos, los sitios w eb ya no son vis tos solo desde un monit or de computad or, sino también desde mó viles, smartpho nes, netbooks, tablets y demás dispositivos, to dos con una gra variedad de res n oluciones y tam años de pantall rentes que com a difeplican un poco el trabajo de lo dores al crear u s diseñan producto. La idea de dar sop múltiples resolu orte para ciones ofrecien do la presentac ta en cada situa ión corrección, no es nue v a . Todo empieza diseño de sitios con el estáticos, con a nchos e imágen después vino la es fijas, creación de sitio s líquidos y flex donde las área ibles s se basan en p orcentajes y las genes se escala imán según la reso lución de la pan lla. Todas esas taadaptaciones s o n posibles al hacer un buen trabajo de CSS para determinar ancho m ínimo y orienta ción del dispositivo. Antes de continuar, ¿Qué es CSS? Hojas de estilo en cascada o Cascading Style Sheets por sus siglas en inglés, es un lenguaje usado para la presentación de un documento estructurado escrito en HTML o XML.
diferen tes re sol usio nes e
os v i t i s po s i d tes n e id fer n
Un primer paso puede ser crear una versi贸n m贸vil, seguido de buscar la mejor soluci贸n para personalizar el dise帽o para una serie de resoluciones. Y que no afecte su legibilidad ni organizacion
Julian DAvid Sanchez
o
tu trabajo e d a t s u g co e t El s m á m poder ingeniar y dise-
qu e ¿Qué es lo
r web? ñado dise
ñar los ambientes virtuales que la gente usará en Internet utilizando para ese objetivo mucha creatividad y conocimiento; cada nuevo sitio tiene sus propios objetivos, audiencia y contenido, por lo que mentenemos en el constante reto de satisfacer al cliente dependiendo de sus necesidades. Y esto es lo mas gratificante, el poder crear la imagen e interacción que tendra el usuario frente al producto, de lo que es el medio de comunicación más importante de la historia.
Julian DAvid Sanchez
mo
o l u v e ciona e u q r á r El al r d n e diseño web es uno it t b
evoluciona Inter n e que t ?
e l d e u i s eñado q e d e e rw r C ¿ e
de los campos que tiene una gran demanda hoy en dia. Asi que el diseñador debe estar actualizandose constantemente para poder lograr ser exitoso en esta área que cada vez es más exigente y salen cosas mas nuevas, el que no se adapte a este ritmo se atrasara y pondra en riesgo su carrera.
Voodoo Tel: 2101665 Calle 16 # 1 n 44
Nuevo Nokia Lumia Dise単ado para ti
n u diseñad e b i c e r e Muchas veces el des- or u q p a conocimiento del mercado por g parte de los clientes los hace poco o
un sitio web, te p a r e rear c e rc l
pa
Julian DAvid Sanchez
s e áu l
a
n acerca d ó i n i p e la tu o
conocedores de los precios, así mismo las empresas de dudosa calidad que ofrecen paquetes de diseño web por muy bajos precios dañan el mercado; sin embargo si se aprende a diferenciar y llegar a los buenos clientes, la renumeración queda a juicio de uno mismo; esto también depende del costo de vida del país y de otros factores. En mi caso la renumeración ha sido la que he solicitado; a excepción de algunas ocasiones en las que el cliente insiste en un descuento o en bajar las características del proyecto. Otro aspecto que se debe considerar es la necesidad de establecer contratos, que es lo que al principio me ha ocasionado problemas en cuestión de tiempos al cobrar la remuneración.
¿C
a r b t a l j e o o d r e u l di t u f se a Como ya lo dije antes señ
web? or ad
v
Julian DAvid Sanchez
¿Có mo
el diseñador web tendrá que evolucionar al ritmo que evoluciona Internet de hecho tiene que intentar anticiparse; el diseñador web de ahora o mas adelante requiere de muchos conocimientos como diseño, mercadotecnia, programación, posicionamiento y psicología ya que con la mezcla de todos estos podra crear un mejor producto y pensar de una sola vez en todas las necesidas del usuario. Es una actividad en la que se necesitan diferentes y variados conocimientos y eso es algo que debemos tener en cuenta. Así mismo, el futuro está lleno de oportunidades si se cuenta con la disponibilidad y y estas habilidades que son necesarias.
Para mas informacion de la revista agreganos al pin
Y si quieres estar enterado de todos nuestros premios o noticias puedes buscarnos en @typomagazine