O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Rede Social com Layout Responsivo - TCC

546 visualizações

Publicada em

Meu Trabalho de Conclusão de Curso, onde abordo a criação de um layout desde sketches, wireframes, mockups e o código funcional, buscando alguns diferenciais como ser adaptavel tanto para desktops quanto para dispositivos móveis; opção de mudar o contraste para melhor acessibilidade e um player de musica que funcione no browser como music player nativo nos smartphones.

Publicada em: Design

Rede Social com Layout Responsivo - TCC

  1. 1. 'l
  2. 2. A *T1 1
  3. 3. l ll l) ll llltlllõiltõil
  4. 4. Os Tempos @kda/ tam
  5. 5. S ' l . ' / . I -s * I s. y e _ . J - x V ' 1 ' ) I = V) ' ¡q-x ' › ' 3x4) . - ~u . .. 4 . __, . _ __ __ , _ «, I. HI 1( u - e à' I QI . A' . . a* . ~ I “i -was- JI g . -' . ! vw '-1 4 M” t v . .. - r _ ' J. . , k , , 'A l , I 'i 'ü V '› o . x _ ; Imara «Igrçsrraygs l I ' 'u V: I 'I II. .. , ' . .. , .A-
  6. 6. Os Meios AUMENTARAM
  7. 7. O Design Preciso SEGUIR IIs 9' a** o
  8. 8. IÀNHÍII* Í_Í_; "a e ~- x -~-« ~- ~ 5"; Your Luxury ”| _ 1.974 23.168 423 ' U. Vs= a ” - ~ ~' › À›, ..: ç. LL' , E . tam. ; a» ny-vv*crc . .n g A! ; mam usual-hq Now bgnn-Pfc . I~ÁIÁ. ¡.I-¡ , .u q. .. ,O2~UK 'à ? Tê 15:14 - 2: 149m4¡ ' : and: 1' E I Alll pa: 79°. . 5°" Top Weekly Artists v ol Montreal › T°P MIS" ; gy A' . I II; - ÉÔUND , TopAlbums . » _ P J l_ ' ' . ., W ü I* PÊ°'I'°°I › Top Tracks mf, 1 “ rsgflaffgk'Mñpnmlg' A M°'° › Recently Played x ' f' 'JI 5 «I Recently Listened Tracks » "leads I l . H 'WIÍIÊ- ' A _+7 V , é ! Ilêi-tlyr I l 13H ~'
  9. 9. .iiiillllllll , 0i, ,.. ... ... .., ... . rdrlnli 'kun . ... ... .., ,i . .. i,xic. i.. ,.. i O i--ianzum mas. .m, .in. -› -. 4a. » . as u. . | tr. .v . -.. + 12-. . . . . F§o. .--: .-. ».o 0,. , , , , .i. ... ... ,.i~. ... i.. ,.. l n rg_ v , --, _.__ ___. . i. . í . . , . . i- . .. a ¡llA'lIl'll¡ L- _ - A¡nh›¡. |ÉÀ'_lI: -'LÍ¡L . › _ r n als-r u s c E E . .,, M, ' *RI ' '". Iridê! !. .-. rI. - 'aum-i' : :fu 'o N¡ ye. : ^ . . ^ a Wcious ! Jess-Dm crous I ' ' ' By Popularity ! Rihanna u f ~ 1 ' 9 (j › Rumors F ÇÃWIÍÍÚIIÍÍÓDÍHIJWYQITA9I iiieliiant-iini . . '“ ' ; nai- '- ; mam 91-21¡ . -, , «d »she "me, Me-. g¡g somem_ en: : __ 1000001) _ u. ._. .._, ... .,, ,_. _._, ... ._. ._, ... hWRnni- " - - -~ - à: 'In 'nie A' - Big Bol (tem. Ludacrls 8. TJ. ) Õ Ú v1 Ú tir'. A" ' a) i3- unou-nuunvih-omu-i _ gs . . . i . .aka f_ ' r 'hi J_ A. , . . v Siri goes to Hawaii al W I Vnllcy f . . 4' . _à . .I))I m II _I
  10. 10. .~ . d _ ; ' , . E . ... ... .. 1+ l” : rr- Ç hnIbin-_nn-A-nn. ?i ceiebrate 'ii : trt-s: um 90m . ... .__ a v_ r_ Anniversary 5 ",171": “" n . . ' ofllisney -----›-- : gun. .. . .i 4"» &Intl-raca; .. ... .. _ -a. -. . I y u. .. v. f 'r “tr-- ? a2 f. ; i. ..i_. ... ... ... . . gw m** . e. @mg . . . . raiar-w. . u'- í' ' ' 5:00 I Gel Lucky - Radio Edil X Rihanna n [fz [Mfk h V/ t ' '4 I , &Taxi; 4'/ . Ii * 4.. à can't Stop Won't Stop , , ¡, ,._ , um ›! / . MÀII 7h . s iii II 'É'
  11. 11. TAElElTIÍl TL lÍílÍl lslllt. T' AAA tl Wi. Ti lÍlÍA
  12. 12. Í É HTÍÕÍ E. A Í Í Ã , a l 7 É ' A. A Experiência do usuário [acessibilidade
  13. 13. .if
  14. 14. ?TJ-T Í *a c-_› <--› Í I l, A . comem; NOMG. scene a «Joc at» t_ -y ? Kelvin D: nar/ JM'
  15. 15. 53,*
  16. 16. sá x u: un : :no extinguir iniciam nom-A b vê de . ..é x na: x m: x m: @NOFWOCDNAAIAMO TIO? ? 8x33? uoavnsooutumvodtnn iixlÉw I wanna Mansur: u GMTIRIÔÍICA P : at: rm I conormociounriaoio n00' signs. ) notruoomnovocttvn . Alm a ouça In oii-Lenta won / x vam-ml boçrnooinno-odl-n
  17. 17. NOME COMPLETO e «one »à 0 Ame-ow @www l 'Q w' ; A A A; °“' NOME COMPLETO ADICIONAR m o GALERIA AMIGOS e BLOQUEAR E GALERIA g, AMIGOS a ATIVIDADES E EVENTOS FNIOIIVOI v RANKING FAVORITOS
  18. 18. NOME COMPLETO NOME COMPLETO NOME COMPLETO
  19. 19. ro io i op
  20. 20. _m_ . ... . . _ -M- uosmouloouumovealm r** a . .u. »meo- em; »ETs-nã vonmoa CONOIIRICIONAAIADOOQOM nnuwu DÓSVRÍGIIOOVÀNWVOCÍÍIÀ¡ . › Í. .. 1 »moon OUQEHOUMGXRWCÀI quam-mm¡ ¡monocu- 'onnonl . amou-o mu. . 'oonwl cantam-uma¡
  21. 21. 4 0925125169' 3 ' _É_ _ J 13x l L 3% ›ínI= Ia|1-ft= !(§)~úh“~. / - a . . . A . /». ** k_Ff1%**v2:n. ¡;t! ›:-g(-§~rv= ~. 7 A í GALERIA í . r-v v ~ V Wi/ : ovos votos »us-us mnsmcmus A-I GALERIA : ovos voqos »usas ums ncvcns A-z / o|1''. :meo < e o' 'o Z n fissã- E . A : Mil Hlíllñf . ':IIl›ñf. -' u-: u «mu _ _ uum- : '.*. 'v. <'1(~ : nm-y '*“""' › : ›_~. ~.. '.43 __ f 4-1 5;¡ v» : u-u. Lv 1 >. - a m». -: . -› : :uz- - -. .' « , Í) IÍNÍ l X 'IILÍ$ KMÍIÍÀÍ' Ilni( I ›
  22. 22. III 1|I . ..uv- M. np: r1. . .-. ..-. 'uxcrco 'Q-Qxoo 'o-vwco MATHEUS COSTA MATHEUS COSTA u-uzn- K"" . n. -g oo: J ' WPF' «mn-L . und-r : r _ _ ; I| 'A| '7;"2$'« Uilliüf- : ELWHIIKV . Í l ú PH 'T â' _ ' nüzut-L* axu-naun; - . ua-u . nun . MOM . co-uno uno-a : maos unsvn non¡ mma. »uma . nehum . ..um . uu . ..-93 mu. lutou-c um. ; u. .. naun'. warm. .. .mm . ..mu . nn-o sem na non sem : An amo -Ruums <ONI›VO uno'. human (octuvo nuno'. anxnn
  23. 23. Detalhes Fazem TllDA A dtfwlenw
  24. 24. 'U0 MATHEUS COSTA OC III MATHEUS COSTA o, N , . pagam nowun _our A l t' V à' - o OO E o- O0 ¡ r r~ x scan: (uma: musas ç n n à Í Í O v, .s '. - E x' â
  25. 25. DhuEIIIe-iIErIa aIIc-#L-MI' fI-síñiñsnw línwq-Xflbflrtm' Contatos Online "aiqIIgvuüñ-. II : WL-I-. wIh-Õlfvxafr. : Qãílúlmlub-'lilni-F -tInnraveiél-Irztaar
  26. 26. Illânr--q-: un-Lsu-nltnni-uru lmunnnszàuummmôfe ! í.'i'¡'í, tei.9íantíll~í ' IJé
  27. 27. Maior Problema:
  28. 28. BIJNHM, Cilene. Diferença entre JIPJ e Pixels. 2013. Disponível em: <http: //chnewspJuscom/ diferenca entre-doi-e-pixeIs/ HñillibAcessoem:21nov.20l3. UEVHUPRIUJÍJ-UÍSPDHÍVIJEmidlttlli/ /developerandroiicom/ guiIJe/ practices/ screens_supoorLhfmJ>Acessoem:09 __. I lr” _I"l. -*”§, ¡."", f-, I;' setlllll ' ” i 1' r-v *rn J. FIJWLEJJ, Martin. IIuIt¡ Mobile Disponível em: <JIftp: //martinfowlercom/ articles / multiMoJIiIe/ > Acesso em: on nov. 2013. ' "m" "° "'°'°' JOHNSON. Steven. Cultura IJa interface como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: 7 é Jorge Zahar, ZIJIJI. É, , _a_ _a_ _A LASMAZIJB. Disponível em: <htfp: //wvIw. |astfm. com. hr/ homD Acesso em: IJ5 noII. 2013. Gerado pelo autor. r 'I B o O LS | _ c. ; p [ASM B, ZIJIZJ. Disponivel em: <htfps: //itun. appIecom/ us/ app/ Iastfmñdla-[SJ5 G13> Acesso em: IJ5 nov. 2013. _ A [ASM c, 2013. Disponivel em: <htfps'. //n| ay. gnogJe. com/ sfore/ apns/ detai| s?iIJ= fm . Iastandro¡IJ> Acesso en: IJ5 noII. 2013. [ASM [I, 2013. Disponível em: (MTPÍ/ /WWVLWÍJJJÍJJWSIIJJOIIEIDJJJ/ DÍ-JIf/ SÍIJFBÍBPP/ 'BSÍ-Ím/ 'f' " »U »AQ ~'^'›"-? B"Í" I_Í[, ];_l'_-' BJIJMBJJGeBdJI-IJJII-aBM-UU23iIJe2dhBe> Acesso em: 05 nov. 2013. MEMÓRIA, felipe. [lesign para a intemet pmjetanoo a experiência perfeita Rio IJe Janeiro: Elsevier, 2005. MIJLTIMUBILE, 2013. [Iisponivel em: <htto: //martinfowIer. com/ articIes/ muItiMohiIe/ > Acesso em: IJ5 nov. 2013. 'lira-Morello ! fonlcdfzreilgleruál TOJWÊÍOXOIHÍHJ! NBENEWS. 2013. Disponível em: <JIftp: //nhcnewsfumhlrcom/ nost/ ASSSIJIZABTD Acesso em: ill set 2013. E ça E H-rm l_ JBEIIJJEJJIJ, Raquel. Redes Sociais na Jntemet Considerações Iniciais 2005. Disponível em: <http: //pontomidia. com. hr/ raquellintercom2llliípdf> Acesso em: D4 nov. 2013. SOUNDCLOUD A, 2013. Disponível em: <htto: //vrww. soundc| oud. com/ stream> Acesso em: IJ5 nov. 2013. Gerado pelo autor. SJJIJNDIILIJJID B, 2013. Disponível em: <httoslñtunesapoIecom/ JIr/ app/ sounrlcloud-music-audio -discoIIeryñd33Ii35315|? mf=8> Acesso em: IJ5 nov. 2013. SUIJNDIILUJJI) C. 2013. Disponível en: <ntfn$/ / IIJaygoogJecom/ store/ a p ps/ Iletails ? id= com. soundcIourJanIJmid> Acesso em: IJ5 noII. 2013. SOUNDCLOUD D, 2013. Disponivel em: <htto: //www. windowsphonecom/ ot-hr/ store/ ano/ soundcIouIJ / ZMSJIBBJI-JIIZHJBZ-bhBHU9da2c71U5I> Acesso em: IJ5 nov. 2013. SPIJTIFY A, 2013. Disponível em: <http: //communifyspotifyocom/ tãñmage/ senIerpage/ image-id/ ZJIBZJETJUBZAIJIBDBBFZ Mmage-size/ oIigina| ?v= mphI-1&px= l> Acesso em: 05 nov. 2013. SPIJTIFY B, 2013. Disponível em: <hftpszlfrtunesappIecom/ us/ app/ spotifm624684 5BlI> Acesso em: IJ5 nov. 2013. SPIJTIFY c, 2013. Disponível em: <https: //oJaygoogfecom/ store/ apps/ detai| s?id= co mspotify. mohile. androidnri> Acesso em: IJ5 noII. 2013.

×