Mô tả thiết kế

MÔTẢ THI ẾTKẾ WEBSI TE

NOOD’ sDes i gn be. net / nooveet i i

NOOD ACADEMY PRODUCETHEBESTTHI NKI NG OFART& DESI GN

THÔNGTI NSƠBỘ T ê nwe b s i t e : NOODACADEMY www. noodacademy. edu. com

Thi ế tk ế :NGUYỄNVĂNTHUỶ Lớp:D1 2PT02-N3 Chủđề : Websi t et hôngt i ngi áodục

NOODACADEMY

THÔNGĐI ỆPTRUYỀNTẢI NOODACADEMY-t r ườngđạihọcđầut i ênđàot ạov ềl ĩ nhv ựcnghệt huậtv àt hi ếtk ế; Họcv i ệnđượct hànhl ậpcáchđây33năm v àt r ụsởđượcđặtt ại79New Mont gomer y St .

SanFr anci sco.

Với hệt hốnghơn100cơsởt r ênk hắpcácchâul ục.

Hi ệnnay , chúngt ôi l àmộtt r ongcác t r ườngdẫnđầut hếgi ới t r ongl ĩ nhv ựcđàot ạot ổnghợpv ới 12ngànht huộc2nhóm l ĩ nh v ựcl ànghệt huậtv àt hi ếtk ế, t ừdi ễnx uất , hội họa, chot ới cácl ĩ nhv ựct r uy ềnt hông, công nghệđaphươngt i ện. . .

Cùngv ớiđól àđộingũgi ảngv i ên, nghi êncứusi nhnăngđộng, sángt ạo, gi àuchuy ên môn.Chúngt ôik hôngchỉl ànơihọct ậpk i ếnt hứcmàcònl àmộtdoanhnghi ệpcót ầm nhì n.

Mỗi si nhv i ênt ại đâyđềuđượccócơhội t i ếpx úcv ới cácđối t áccủahọcv i ệnl àcác t ậpđoànl ớnt r ênt hếgi ớinhưMi cr osof t ,Ver sace,BBC,I nt el ,Yamaha,Uni v er sal , . . . ;gi úp si nhv i êncómộtcái nhì nt hi ếtt hựcnhấtv ềngànhnghềmàmì nhđangt heohọc. Đểcót hêm nhi ềuhơnnữat hôngt i ncủahọcv i ện, mờibạnt r uycậpv àowebst i ecủa chúngt ôi t ại : www. noodac ade my . e du. c om.

Tại đây , bạnsẽđượccungcấpđầyđủt hôngt i n v ềcácchuy ênngànhđàot ạo, chi phí , đi ềuk i ệnhọct ậphaybấtcứcâuhỏi nàobạnmuốn bi ếtv ềchúngt ôi .

1

NOODACADEMY

SƠĐỒTỔCHỨCWEBSI TE

HOMEPAGE

St udywi t hus

St udent s

Fi nances

Aboutus

Under gr aduat e

MyAcademy

Appl yf orFi nanci al

Appl yf orFi nanci al

Gr aduat e

Housi ng

Ty pesofFi nanci al

Ty pesofFi nanci al

Onl i neEducat i on

Faci l i t i es

Schol ar shi ps

Schol ar shi ps

St udyAbr oad

At hl et i cs

I mpor t antFor ms

I mpor t antFor ms

Cl assDemos

Ci t yLi f e

Fi nanci al Of fice

Fi nanci al Of fice

3

NOODACADEMY

THUYẾTMI NHTHI ẾTKẾ 1.Bốcục

Cácdạngbốcụcđượcwebsi t esửdụng: Looki ngr oom

1 2

Tr angwebsửdụngbốcụcl ook i ngr oom chobannerv àcácv ùngt hôngt i nt ươngt ác,gi úpt ạo đượchi ệuứngđị nhhướnghướngnhì nmắtngười dùng.

Nhưbannersố1v à2sửdụngv i ệcsắpđặt ảnhv àchữt heođườngmắtnhì ncósẵncủaảnh, t r ongk hi đóbannersố3t ạohi ệuứngt hôngqua hì nhk hối , cụt hểởđâyl àsửdụng3hì nht am gi ácv ới t am gi áct r ungt âm chĩ ađỉ nhnhọnv ềphí a v ùngt ươngt ácl ànútnhấndẫnt ới1t r angl i ênk ết , gi ốngnhưv i ệcmộtmũit ênđangchỉdẫnt ới đi ểm đí chcầnđến.

4

NOODACADEMY Bốcụchì nht am gi ác

Bốcụct am gi ácđượcsửdụngcho2bannernhằm k hai t háct ối đacácđí chnhì ncủangười dùng, hướnghọt ới cácphầnquant r ọng, cót hểt ươngt ác, hayphầnđem l ại t hôngt i nhữuí ch, . . .

Cácđi ểm mútcủat am gi ácđượcl i ênk ếtl ại v ới nhaut hôngquasựt ươngđồngv ềmàusắc( màuđỏ) .

Ví dụ: t r ongbannersố1, phạm v i gócnhì ncủanhânv ậtgameđềuđi qua2phầnt ươngt ácquan t r ọngcủabanner , đóchí nhl àcácnútchạysl i dev ànútmởl i ênk ết“ Readmor e” , chúngk ếtnối v ới nhaut ạot hành1hì nht am gi áct ưởngt ượng.

Bốcụccânbằng

5

NOODACADEMY

Vềmặtt ổngquancủawebsi t e, cácphầnnội dungk hácnhauđượcđặtt r ên1l ay outl ớnt heobố cụccânbằng.

Mỗi phầnđượct áchbi ệtv ới nhaubằngv i ệccânchỉ nh, sắpđặtt hi ếtk ếsaochocó t í nhngăncácht heochi ềudọct ừt r ênx uốngdưới .Ngoàir a, mỗiphầnnhỏ, đặcbi ệtl àcácphần chứat hôngt i n, phầnt ươngt ácl ựachọnt ươngđồngđềuđượcsắpx ếpt heobốcụccânbằngđối x ứngdạngcộthayl ưới . Đi ểnhì nhnhưcácmẫuảnht r ênđây .

Vídụ:phầnt hôngt i nDepar t ment schứanộidungv ềv i ệcgi ớit hi ệu12chuy ênngànhhọc, được sắpt heocácôv uôngk í cht hước4x 3( ôhì nhảnh) .

Gi úpchongười dùngcócảm gi ácv ềt í nhk hoa học, ngănnắpt r ongcáchbốt r í t hôngt i n, t ừđóv i ệcphânl oại , t ì m đếnphầncầnt ươngt áccũng nhanhchóngv àt huậnl ợi hơn.

Hệt hốngl ưới

Với hệt hốngl ưới 960củaNat hanSmi t hđãmangl ại chowebsi t esựant oànv ềphạm v i đặtnội dungv àhì nhảnhk hiduy ệtwebt ạicáck í cht hướcmànhì nhk hácnhau.Cácphầnt i êuđềchí nh hayảnhđềuđượccânchỉ nhđốix ứngv ớinhaut heol ưới , ưut i ênđặtv ừav àk hớpv ớicácđường bi êncủal ưới ( nhưmôt ảt heomũi t ênx anhphí at r ên) .

6

NOODACADEMY

2.Màusắc Tr angwebđượcx âydựngdựat r ênsựphối t ừmàusắccủal ogohọcv i ện: Màuđen: #222222 Màuđỏ: #be3334

Sắcđộcủamàuđen

*Kế tc ầu: Cácphầncầnl àm nổibật ,cácphầncót ươngt ác,đườngl i nkđềuđượcdùng chủđạomàu đỏ/ đen đểt hểhi ện, gi úpt huhútv àsựchúýcủangười x em, t ạođượct í nht hốngnhấtt oàndi ện chot r angweb.

Nềnwebsi t esửdụngt ôngx ám nhẹ.

Gi úpt áchr ak hỏi 1sốnội dungcónềnmàut r ắng.

Cácsl i debannersửdụngnềnx anh-nhấnđỏ: t heonguy ênt ắccặpmàut ươnghỗ, gi úpmàuđỏ nổi bậtk èm t heot í nhhài hòat r ongbốcụcmàul ẫnbốcụchì nh.

Tươngphảnmàuởmứcđột r ungt í nh, đi t heox uhướngt hi ếtk ết r ungcủacácnăm gầnđây , nhất l àx uhướngf l atdesi gnđangbùngnổt r ongnăm nay . * Ýnghĩ a: Sửdụngmàul ogol àm màuchủđạot ạor at í nht hốngnhấtt r ongbộnhậndi ệnt hươnghi ệucủa họcv i ện.

Ngoài r a, y ếut ốđencònđượcsửdụngl i nhhoạtt heosắcđộđậm nhạt , t ạor asựphùhợp chocácnội dungt r ì nhbàyk hácnhaumàv ẫnđảm bảođượct ôngmàuchủđạocủat r ang. *Xé tv ềýnghĩ amàuc ủal ogo: Màuđỏv ới đột ươngphảnt r ungt í nh, l àmàucủasựhấpdẫn, gâychúý .

Kếthợpv ới màuđent ạo sựt ươngphảnsángt ối ; cộngl ại đặct í nhcủamàunàyl àsựt hanhnhã, t r angt r ọngv àđẳngcấp, r ấtphùhợpchohọcv i ệnNOODacademy -t r ườngđại họchàngđầucuảt hếgi ới , v ới v i ệcđàot ạo cácchuy ênngànhmangt í nhsángt ạov àt i nht ế.

7

NOODACADEMY

3.Phôngchữ Sửdụng2l oại phông #PhôngROBOTOSLABSERI Fchocácphầnt i êuđề, t extchứal i ênkết , . . .

Robot oSl abThi n Li ght

Regul ar

Bol d

FontRobot oSl abSer i ft ăngphầncứngcápchocácđềmục, phầnnộidungt r êncác banner ; t ạot í nhkhoahọc, chỉ nhchut r ongvi ệct r ì nhbàychomộtt r angwebvềđàot ạo gi áodục. #PhôngROBOTOSANSSERI Fchophầnnội dungcủacácbài vi ết , nội dungmangt í nh t r ì nhbàyt hôngt i n, . . .

d ar Bol Robot oThi n Li ght Regul FontRobot ohi ệnđangl àf ontchữđượcgoogl esửdụngchophongcáchMat er i alDesi gn t r ongphi ênbảnAndr oi d5củamì nh.Đâyl àphôngchữcủax uhướngt hi ếtk ếphẳngđang t hị nhhành, nól àm mọi nội dungđượchi ểnt hị mộtcáchr õr àngv àt hẩm mỹhơnbaogi ờhết . Đượcchọnđểt r ì nhbàychocácnội dungmàngười dùngcầnphải bỏr amộtk hoảngt hời gi an nhấtđị nhđểđọc, nógi úpgi ảm t hi ểuđượcsựmấtt ậpt r ung, hayt ì nht r ạngnhứcmỏi mắtk hi đọcmộtt hôngt i nht r ongt hời gi andài .

4.Hì nhảnh Hì nhảnhđượcsửdụngmộtcáchchọnl ọcđểđảm bảocáct i êuchí sau: t hốngnhấtv ới t ôngmàuv àphongcácht hi ếtk ế đảm bảot í nhmi nhhọar õr àngchonội dungt hôngt i nđượct r ì nhbàyk èm t heo v ậndụngđượct r ongbốcụct hi ếtk ếv àt ươngt ácngười dùng a/Hì nhảnhc hos l i de banne r

Bannert r angchủl àv ùnghi ểnt hị đặcbi ệtquant r ọngcủat r angweb.

Nóchứacácnội dung gi ớit hi ệuv ềhọcv i ệnhaycácsựk i ệnl ớnđượct ổchức.Hì nhảnht r ênđâyl àbannerchosự k i ệndoNOODAcademyk ếthợpv ới hãnggameđì nhđám EASpor t st hựchi ện, nhằm r amắt gamemới Cr y si s3củahãngdưới dạng1buổi t est i ng.

8

NOODACADEMY

Bannerđượct hi ếtk ếhướngt ới sựđơngi ảnv àt i nht ế, đảm bảot hôngt i nngắngọn, súct í ch.

Thôngt i nđượct r ì nhbàyt hôngqua2đối t ượngchí nhl ànhânv ậtchí nhcủagameđặtphí at ay t r ái v àdòngt i t l enằm phí ađối di ện, v àk ếthợpv ới mộtnềnt r ời x anh, cặpmàuđỏx anht ương hỗnhaut ạocảm gi áchài hòat r ongbốcụcmàu.

Ngoài r a, ởđâycònđặcbi ệtk ếthợp2nguy ên t ắcbốcụcl àLook i ngr oom v àbốcụct am gi ác( đãđượcphânt í chởphầnt r ước) .

Bannert hứ2, sửdụngchot r angconv ới nội dunggi ới t hi ệuv ềquymôcủahệt hốnggi áodục củaNOODAcademy .

Hì nhảnhđượcchi al àm 2phần: phầnảnhnềnv àphầnảnht hi ếtk ếcho nội dung( k hi nhk hí cầuv àôghi t hôngt i n) ; Nhưt i êuchí đặtr a, chúngt ôi sửdụngảnhnềnl à ảnhđượcchụpt ừk huônv i êncủahọcv i ên, nhằm t ạocảm gi ácv ềsựt hựct ếchot hôngt i n đượccungcấp.

Vềphầnhì nhk hi nhk hí cầu, sửdụngmàuđỏđểt ạođi ểm nhấnv àt hốngnhất màusắct hươnghi ệu; dùngđểmi êut ảchot hôngt i nv ềcáchoạtđộngđàot ạocủamộtt r ường nghệt huậtv àt hi ếtk ếk hi ếnchongười dùngcócảm gi ácv ềsựchuy ểnđộng, muốnk hám phá, sángt ạov ànăngđộng, . . .

Ngoàir a, bannercònsửdụngbốcụct am nhưđãphânt í chởphần t r ước.

Tổngquanv ềhì nhảnhcủa2mụcLi f eatNOODv àNews&Ev ent s: Nhằm t ạođi ểm nhấnv ềmàusắct hươnghi ệuchowebsi t e, chúngt ôi đãsửdụng2hì nht am gi ácv átchéo2bênsườncủat r angweb.

Khôngchỉ t ạor asựchúýv ềmàusắcmànócònt ạo r ahi ệuứngmởr a( mởr èm)k hi bạnt haot áccuộnt r angx uốngdưới . Đi ềunàycóýnghĩ amở r anhữngđi ềumới , hấpdẫnk hi đi ểm k ếtt húccủahi ệuứngnàyl àphầnt i nt ứcv àsựk i ện.

9

NOODACADEMY

Phầnhì nhảnhcủaNews&Ev ent sđượct hi ếtk ếdưới dạngmỗi t i nl àmộthì nhmũi t ênhướng t ừt r ái quaphải ; k hi người dùngt haot ácnhấnnútcuộnx em cáct i nk háct r ongdanhsácht i n sẽt ạođượchi ệuứngdi chuy ểnl ạmắt( x e mv i de omôt ảt ươngt ác ) .

Hì nhảnhcủamụcDepar t ment s: Đượct ổchứct heodạngl ưới 4x 3, mỗi chuy ênngànhđượcdi ễnt ảt hôngquamộthì nhcót í nh đặct r ưngchongànhđó.Vàmỗihàngngangl ạiđượcsắpđặthì nhảnht heocùngmộtt ông mànhưnhau.

5.Cáct hànhphầnđaphươngt i ệnkhác

Websi t esửdụngcácv i deoonl i ne, mi nhhọachocáchoạtđộngđàot ạov àgi ảngdạyt ại học v i ện.

10

NOOD ACADEMY 6. Khảnăng sửdụng: Nội dung Nộidung website

Dấu ấn thương hiệu

UX

Usability

Phâ n tí ch

Đ ánh giá/ Minh họa

Website cung cấp thông tin về hoạt Nhìn tổng thểnộidung, ngườidùng dễdàng nhận biết được động đào tạo tại học viện NooD acade- mục đích sửdụng của web-cảkhi chưa biết đến thương my. Bao gồm thông tin như: chuyên hiệu ngành, chi phí, cơ sởvật chất, sựkiện, tin mới,...

Tông màu chủđạo là đỏ-đen.

Kết hợp cùng vớicác sắc độđậm nhạt.

Màu sắc thống nhất theo màu của logo tạo sựghi nhớvề màu sắc thương hiệu của học viện.

Mang trải nghiệm mới mẻkhi giao diện Ngườidùng sẽthích thúhơn khi duyệt web so vớicác website được thiết kếtheo xu hướng phẳng hóa. sửdụng kiểu thiết kếcũ.

Mọi thứtrởnên tối ưu và đơn giản hóa, dễdàng cho sửdụng Cung cấp thông tin đúng chủđề,hỗtrợcác công cụnhư tìm kiếm, gừi yêu cầu thông tin,... Đ ặc biệt với Roll navigation xuất hiện khi bạn cuộn web từdưới lên giúp truy cập các mục trong menu nhanh chóng mà không cần quay lạimenu chính.

Khảnăng ghi nhớ

-Sốmục nộidung của thanh điều hướng là: 4. Đ ảm bảo nguyên tắc 7+/- 2.

Sốmục không quá nhiều hay quá ít, nội dung tập trung, người dùng sẽdễdàng nhớđược các thông tin này.

-Đ ối với phần chuyên ngành Departments, được trình bày dướidạng bốcục lưới 12 ô; đểngười dùng dễdàng sử dụng, website cung cấp phần phâ n loại tìm kiếm theo phâ n loạinộidung.

Khảnăng di chuyển

Website được thiết kếduyệt trang theo hình thức cuộn chuột, các phần nội dung được chia tách rõrang theo chiều dọc từtrên xuống dưới.

Phạm vi di chuyển chuột bốtríhợp lý , giúp giảm thiểu việc di chuyển chuột; các nút liên kết trang được đặt cốđị nh theo trục chính giữa.

Siêu điểm ảnh

Đ ược áp dụng đểthiết kếcho banner(đã Giúp tạo sựchúýcủa ngườidùng đến các phần nộidung được phâ n tích ởcác phần trước) và các quan trọng. Nhận biết các vùng tương tác, chứa liên kết phần nội dung khác được đặt theo bố một các nhanh nhất. cục câ n đối, đốixứng.

Nguyên tắc 3 click

Đ ảm bảo nguyên tắc và có site map Tạicác trang con đều có thanh site map ngay dưới thanh giúp người dùng đị nh hướng được mình menu chính. đang ởvị trínào của trang web

HẾT

11