Arquitectura de la información para diseño de páginas Web

2. Vamos a explicar de una forma sencilla y
esquemática cómo diseñamos la arquitectura
de la información de una página web.

3. Es...
¿Qué es la arquitectura de
la información de una
página web?

4. ¿Porqué es tan importante
para el diseño web.y qué se
define durante su desarrollo?
./ El objato,p"'óslto yfilas del slst.ua dalnfll'mDin osltiJ
./ Ladafll**in daiiÜJito objatlvo yDI asbdol dala a~llancia.
./ La raalzaciin da análsis -.titivos.
./El diseño dala iltaracciíll.
./El diseño dala navagacüJ, BIIPDI daorgalizaciill YIIIIQIItaciío da
Dlcootdos
./ El a-tadoorotu1111o daDIcontlllilospn aadar ala ilfoi'III8CÜL
./La !DIIf1Caclón.1188tlill yll88aiT* da.-os.
./La faclbd da bís'llllla yaiiiSeño da la rmtartaz da búsiJIBda.
./ La usdMad.
./ Laaaslftdad
./ El fa811Jack del raUtado ylos !l"asos da raiUii111a del sitio

5. Pero antes hay que diferenciar...
.¡Esquema oestrvctura inicial del
cual se realizará el Diseño Web
.¡Diseño web definitivo (aspecto finall
.¡Presentación de los elementos en la
página
.¡Presentación de la información
..¡Disposición de los menús
..¡Diseño de formularios
..¡Botones de llamada a la acción
.¡Barras laterales
..¡,..

6. Una vez hecha esta aclaración entremos en
materia y veamos cómo organizar correctamente
la información para crear nuestra web
•

7. • OpUmlzaclón de tlaii• da B)reuclón an fase da dlsBño
web.
.. FdiMII8 pn 11-111111"8UU:b .. 111 Qll8 biiCl
• Evitar el Efecto Rebote (abandonarlapájnapor falta d8
entamlniaotol
11añm llllrlcldl•tlldlllll•·ai'PIIII•nilllllltil al
........111111118 atnñn ..tldllllltl.
• Peni•ts organizar yestructurar ros cootenidos de 111
sitio wab pensando en elllStlal'kl.
• No diiJa • IUial ala atrll:bl'a 1111111•aa pn si
.-;.. raláiiL
• Ayuda a ordenar lnfonnaclóo y croa ardan RBcasariJ
parasucomprensión.
• EVItacontanMII•ca-.
• La Información sa oroanlza en menús fácinente
COIJIII'8nslblespara al usuario.
• Ayllla al Pasllilnamlanto SEO. Pulla i1¡prtma si
.......vllbal•.....t ÜlllalainJ

8. Lin.
o
.
al
-
Jor-ávquica
001Ro.
d
±Ei '='""'

9. Características do laEstructura Linoal
(j) Navaoaci'ln111881
(j) lhiPiUinalavaaotra mallantaaraca
@ Cilla _.. aatá a1* más alejada da la
página da illllil lr8com8nllaOO 3ele máx.J
@ Los buscaoores dlll más •rtancla ala
págila da illllil coo utallstama.
@ Eatructlra 1111Y cerrada 1P1 88
CIQiamanta con laaatrll:braJarir~Pea

10. 2.EstructuraJerárquica
111rMvll
......
crecmentohorizootalmás complicado
(dafirir hiloBII'IIIDÚ BD tasa disaiil80 larMval1
sepuadancreartantos!fielescomose•eslta
lrecomsndado3clics máxJ
Crecllmentoverucalmenos
com¡dlcado
lasfácl ...tar los~.
sarvi:los,II'Odootos...an
cuaQiar etapadlllproyacto1

11. 111rNIYIII
.......
3trNIYIII
J8rlriPa
...1111••
•SIdlflllll .."'b' • flaliclllllliiD wa
·CJ-',r¡,¡.ro11111--.
•Ciwtrr.t-ID 1111tllirtallllllltll'llrl•r1E fr.
•S1811allla,. . .JI'IIUtDI._
•J:iICiriÍliiiD bui-tzliltai YVMii:a! 111
;rtllUIIa..,_....
•SI- a- 111¡nbil-8 ¡riJrl bniD
:.rtzlltll-vwth 1 bi
·•u ""•••IIVI!
·S-.nia,•vloila.[ll'lllbtDL. ~
•t:nálllliiiD liDrlzliit8l YVMii:a! sil 1
:nr:-10,_....
•SI-~~~ a IC8I' lii~ 8¡ll'iJri bntD
:.rtzllbi - VM'IIi: 1 bi
•DZQ jl¡¡¡llai2JIIVII
Características de la EstructuraJerárquica
CID
®
@
@
@
@
(jf)
®
Navagaciín ancascada.
Fiel do antandor y aagui'por alu•II'ID
Est!'tlctlra IJaljtuaiiiJiasa1fii'8SII.
fa:ldad para II'UIIizar PJ131tilad da
loformaciliJ ID1dll)a.
Est!'tlctlra lógica: da lo 11111•111 a lo
prUcullroaspacínco.
sa •do mazcllr • al siltama da
astructlra 111881.
SI raparte la _.... da las PÜ'IBS a
:ivlllda ildoxaclán paraloslllscadiii'IS.
Fa:ldad paracr&CII'III al futll'o

12. ~
~ j
fl Ewnplo de niveles de la P4gina Neser ideas.
~ En éste caso se ha l.ltilizado 2 menús deler Nivel En elprimermenú se podría
crecer horizontalmente a posteriori del diseflo inicial. pero en el segvndo
menú queda claro la compl~idad de crecimiento horizontaluna vez acabado el
díseflo.

13. ---
~ ...--......-·-~-­
_....---.....¡ ..........--....
--.....··----.......-
---<-.....- ....- .....
.....- ...to......... ._...
-·---·-·-··
..--·-..--.....- ..
_..,........¡.-........-...........-~
__..........,. ........-
--...-~----
....,.....___,__
--~·--........··-
_,____.......___
..
--
-·..
-"--""·-"
-...~:..._
-
--
-~·
--~
......-.
--
- ...._
-
:u -
t·--
- ....-
-·-,-
-·---
- --
¿Quierew liren la
mera páglPm de Googl
..._,.
T_ _ .,.
__..._
--~
-..-----
--
-
_,_,......,.
..,;o~.,___
--·
--
·--
---
-
---
--~
--·-
~- ...
·--
·
-
-
--
---
- ·-
-··
----
,..,..,._
....__
---....
__....,...
_,.......
- ·--
18rflv8l
rl Eíemplo de niveles de la página Neserideas.
~ Oentro del grvpo de ler Nivel f/!Jarketing
OnlíneJ. encontramos grvpos de 2° nivel en
este case: Servidos. Oentro de éstospodemos
crecer en mímero fFJntos como necesitemosy
en cualquiermomento.

14. Características de la EstructuraenRed
CID Navagaclln111'8yfiBxiJIB.
® PlBia IJIDr&r collfllüín y daiiii'IIBII para
81 usualtl si noatáblanlllllliiala
@ sa 1118118 accadllr a c•lillr siiiDIJ o
IIBii dBSdaa••parta11111 ~
@ Laspáginas181'81acillln811tra si llldanta
BIDG8s ilbmJS Y Bllto faVOI'IICB la
mdaxaclón1181sitio wab

15. Entonces... ¿Cuál es el m~or sistema para
estructurar una página web?

16. Cada página se debe diseñar en función de las
necesidades que requiera la web. pero la unión
de las 3 estructuras es la m~or solución.

17. ~~~~~~·~+---........- Grupo de ler Nivel
Esf1vaturs Unes/
(facilita la navegación por el
sttey I'"IVeSh-o posicionamiento)
Grupo de 3er niVel
(Estructura Jerárqvícal
t:a:l --- - - - -
·- -·-- ---
;_;_________f?~ 1
_._ ___..___
- ---·--·---
-~----
--... _
_.___... ---
------------
-..-----~----
------
-
=~ ..-::-
=::...--- ..
~
fEsf1vaturs Jertirr:¡uica)
Grupo de 2° n1vel
fEsf1vaturs Jerárquica)
::.:=- 250e ~=-·-
Esf1vaturs en Red --.....,~=
(poder acceder a cualqvier
sección del stte Uery 2°
nivell gracias al footerl
--- !r1
-·1-
..Jln.. Visita NeserIc/essP!J.rs
..) probllr/s ntf'legaclón
~ Grupo de 2° nivel
fEsfrvcturs Jehirr:¡uicaJ

18. Queda todo claro. pero...
¿una vez estructurada la arquitectura de la
información.ya se puede diseñar la página web?

19. La arquitectura de a información es uno de os
primeros pasos para alcanzar e diseño definitivo
de la web.
En a próxima diapositiva podemos ver e
Esquema de Proceso de Diseño Web

20. Tocio loque se elisefla11ene
que serevaluado altavés
ele los rnt21í~ hasta
conseguir el eliseño
deflnlliVo.
PLANIICAall4
Iden11filcación ele los
req.¡erimientosdel pr~to
(clientey VSVIltiosl
ffioclelaQo del l!suetio
Diselk> Concep11Jal
Definir Estilo
Diseño ViSVIll
Diseño de Contenielos
lllétoclos de Inspección +---......~
lllétoclo ele Testeo
IVIPI.MNTACI)N
YLANZAPtmlrD
'f
MANTENIMmD
YSEGUimTD
(
Prototlpado
8oJja Pldelklacl
Alta Fideliclacl
(
(
e ,
)
)
AIUTECTUIA liLA
...MAGíN
Setiene
en aventa
USABI.II
AJ
ACCimUAI