Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rede Social com Layout Responsivo - TCC

561 views

Published on

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.

Published in: 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.

×