001 webdesign

234 visualizações

Publicada em

Primeiro conteúdo da disciplina de Web Design do curso de Publicidade e Propaganda da Estácio.

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
234
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

001 webdesign

  1. 1. -- -. c_ n
  2. 2. iruíêuililmbq_ : |EJlI-vt(ñ-Ó[: Ç~*'ILI_| | into. Ár= r": ›:«= o:o: ¡¡: <«u: :uqpñ(= uu¡r: ..a. ›: Ísgiülllhpj-SÍO, Itcnhnllohíclz, Saves' R” * tá. : 1134311' í é billiÍÊuLüumf *s a m' ! ILIIEI : :uma
  3. 3. lluáufzlozz, gplnunünasf. um: : e1'III=4T¡'1a›v-o. '=ís›1¡¡¡r: :: gm . IPS": n' ____ Trhülzlrlllç¡ ¡tfgrgg- w . .nur , eu -rr N' ¡nâ nu a I'm Inmunínnçàxrn *rZhÊVRPÉEfW-à'
  4. 4. Cisrrzrg torno trabaiho cia (iesàgw. @Ve e um prçnero, e rvcesssrta uma anairse nnfr: g-zrrrre^au, rnai, a DEHÍH' de um bzzeíirzg. ' var COHÉrtãlTâlíÍe o Objãíivfñ do prqagto e v-'gessencsesl para um bom pfarwv. ¡am›3n¡o. de ¡rzodo que as 9.. as sejam humacias de norma correta.
  5. 5. ampse rñ3cessar'¡r: > defmrr o [JLJJÊHLO aivo da site. o objetivo, " r ¡. t os seat/ raros CJÍBIQLSICÍOS. o (írferertceal ; Jara o párblico. ,'__ t r . L A pamr desses e de outros etemerttos que sejam 757 _ i_ especificamente refevantes ao projeto, será definida 4 _ 'A A a estrutura do site (Arquitetura de informação). e '_~ ' "E » ° A_ atecnologia empregadae o layout. * 'ff " › ng; t' ¡ _- ›, ' g . .u 's L mí'. ví , 1 _ ' -Jf S: . _L _. __, . . A
  6. 6. Há uma diferença conceitual marcante entre design nos meios tradicionais, como no grañco e o design aplicado / , " na web. Na web, a estética deve ser o . moldada ao dispositivo que acessa , i¡ ao site ou mesmo desabilitada caso . _ j . .a não seja necessária no contexto de , jk _. _. utilização. No meio gráñco é possivel prever como o usuário final verá a ã - X estética do produto, já na web isto ' ' ' , l j não é possível, pois a aparência pode - j e deve mudar radicalmente de acordo , _ 'I i com o sistema operacional UÍÍÍÍZadO, “ _ ' / configurações pessoais, navegadores, resoluções de tela e dispositivos, como x celular, TV, impressora, leitores de telas etc. o / Por este motivo, a informação (HTML) deve trabalhar independente da formatação (CSS) e do comportamento (scripts), que são recomendações do W3C.
  7. 7. "u , ' _responsàveuaorreoornendarpadrõesde , . * i' desenvolvimento para e_ internet, Pot 'meiadestes «padrões se pode "classificam websites de. aõordo _ . › corn súasçcãiacteristicíats técnlcasfindoalém do ' visual e; navegadores, dé acordo com sua . - capacidade ém atender aos padrões definidos. o ; A - . v " . nv _. ' ' o' . A 3-. Í , o É A. _g5 m 33| v. C' 1 , , ' . .. _ . . ' . *. " . ' i - e" ' . › ' ; É . . " ' , ' , › . . í 7 ; gixà , ' j* *Í. ›' - 2. v . WoildÍideWjVebÇqnscrtium (wsc) éoórgãç . ° › o N , a *yr . . "crf 1,' f* "'. :J "' ü 1x27:: b * ~ »va . . 'r f' "' ' t' Í7"" . M "f d ›_, 'ã e c¡ O_ I .
  8. 8. WEBDESIGN O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuario, que sua linguagem seja condizente com o objetivo dó site. Conhecer usabilidade é fundamental para se gerar layouts para a web.
  9. 9. .n ; um çlñlllmpr inizéátviaii: v : cznit-. Ííiafe Ver: “I n *Jide : wii-L z. imitar-his: : : a : Llfizl' nmnãll". ÍlfnllÍn' laiiaingll. uma_ m: , : :já pair: 'rnb' tfzeÍvir Cífàill Ill_ ' 311' : Í ? CRH '$l§22 r' ^ *Grs *n11 v 'à v - r. - n' . riu.
  10. 10. uma¡ MC W' "g" PADRÕES PARTlClFE nussa SGBFEOWJC , nomes WEB - Conheça os vencedores do Todosêweb 2014 na de ueznmwu ae 20v¡ m. ;mu . s, u um_ . .i: «,. ›.. .csv. _.taexaoun›om. iz; ae4 a won Detran e Animações Nau ! atum Web Conheça¡ os vmcukxu da lrclila ediçao no mmio Nac anal de #cassia HGJIÚE n. Wet), que romm nov-mino; na Carmona ue pmmiaçác . ' mm nialdeoezambvo em seus. .., MC s " V5“°^'°“ n Wen Semântica ' V, 5""? Temolcgia XML Categoria Pessoas l Instituições PUBLICÀÇÓES Wx BNÀSÍL W” t" “Mw” i 'i iugu ~ ? mimo ou Aeussih mada vr-. us ao lFRS E won de aispoeiiivos r lugar Pen-anca Lucena P“°““°°'° °° W3C BW* '“'°'"““3°“ 5°” 3. M, _ HW, m_ › and/ ões weu, mim pa mem de nançàa. a ITHlK a Navegador: : e remix-mtas de . mma c t _ P _ ' W b Docaogo : :a WM) amam: mais a egona rcje os e Riblicsções mc amei pci-a nomeou “ums D¡ “namo W3C “NASAL emi- -l. amo : a #uma : . lÍñlJE' im. GWS a, Memo_ , WML _C35 Win91! sam Amsslvnl "m" “u” m n"" w” T 'na-v r SF¡ W r Sin Mes-WN Àooshlas e mmmis u: limcns nos cursos mc Brasi Dados Amam Gcvema e Sociedade 3* 'wav Cursos MMO c, ... mui: mc Momentos mm la! " nglbs] V°°“°““"°“ ' °'"°'°°'” cazegma Gcruevrirrerulis vqa tambem os Cursos W3C Blnsll aux¡ wac gugu_ w Iugg . Cursor! eMAG Noncus 2' ioga QUE rui-amo Acassimi um : no bom para l acusam uma weo no Brasil nov Ranma : um em 21 i2 ? cu 5m wac B'asi4 um¡ win u ; vogais sm ços. o L ; armou “WC” N" Daao pra toco saco' Ndlcla 20V] lWugvaSauoaAmssli/ el mrvasow-F* owoicamwzc msiiaim n( or r iugm Casa Jau Portal lmoni ima “GQVDHM “Wc” 2°' 3 : r lupa! - Lagenaa sonora Homenagem ao mesve - mu: Nam. , ; ou D0! Pemaluu Ferraz em 23 : e ? cvs em mc aqui pow was u izx-oggm imi . mim ~ mmicrii-min ru ma. L-. i-. caçx. 'Rings Nmicias ? OlC VIUHDS CIJPÁKLJII conteudo ADC! !! mas mu”, W3C mas. , l i iugw - sELun - Situ ocassivoi mr Reuniao »um um : u e . iomniismo em m¡ ooawiçao mu aiuq W3C mu¡ um: wa: m Noticias W3C lnlamaaonal httpJ/ vwvw. w3c. br/ [H1 1I l o 0mm¡
  11. 11. › »i vmloixam. Í-Tlinnialpi; ¡WÁYÍÍÂÍ M652; Erimitgicieãiagxqiniziíviox Í'3'¡3§-°Ítg_| lii? )h| li! g #i -e , iiizinílf tnsàmaiziutá¡ t? &iiii-*Éfa : #3 'ÃKIÍÍIÇIEUOÍÉUÉÃÍIÍ ' É ? ioiiaigçaiígiulciíiytiitH ? ksflaiiiiamí/ Úniloàai" 5a' . L . E S. 1-. É V¡ É S. EqQEQçtHaIaIEÃMlIIÇÍOÇYÊ”
  12. 12. ' l . › ' . ¡¡j; _¡ _ _L- p, mu. ; L4, í milan. "hum ãsilsuí-«llnnis. =~: ílloieiciílauilvdlazngungurupiu: nnlolvmannnnigmondral¡tam»imunomalltdmdta . ilsarallnulsuilz. @Kaliñilofaurgllts-s~dIuSIQJInUEIO-*ialllpltolíllll¡llõlãldlà-¡Ílllicllltflolllzll anal-vn» -ílupu-Jtàian : llalllmiíownQllluslalízltillu-Qlllã*Vuiüê-prozdlà-*iñãllílâ : anumo-muialutâa-loie. o-ílwilglllglfillh 'Ioliiaulo~tmmzlimiiãleiltoNlz-gifãíluoie oíillàmõiillilalnllàlê. lounraieupiílncñílvlatt. ,z l ÍOIOlIFF-*l at». V v
  13. 13. clblllinnii. : : m: v¡ lift : L ; vlnlsçlíi wmuuunn-mm-cm. . lnlnnntnLuimvn-ml-r¡ u: : ; ill-anime . LCÉ, Clip I um** 'vw-n duhv ml ami-i. ranwrrl-: ur . m ¡Çñltlng nm. sun rtn a luSmDd (amam mui¡ dunl . u 'suma el nulo ic rmgnaa que. Ut c Hull . oil mirim¡ vvçnwn _v_ 3% Details $ Download
  14. 14. 1 I“1I= ::4'“"í lí' il- r . Elis ! Lllãl-fívr-vlpr-iaile-dlo-itaim-l: :mara v1. à Ílnlrln 'f' $34.11» v: l. ~°“ ~ 1;. : liilâllh-ilânlplnoçiñVloizuâ-yñfíñàs-t olll: tn: l 1.1.' «zw fr: ' 'í iuinlllofzudlawlslnnral, s~'»: .': ,'~: o;'ãlf, " Lx : ~- (buglblplllfalíldfalilài: , vzélñw: m; ›: nlniumlil: Hâltíâlllüvllllqllí: :
  15. 15. 'Ill = i«= iI: '2iu: ~2iiplill:4.¡-' 'f-WW” ^* qllr_ *fan 5~w-¡_. _e)q1': r , .. llrznrta : Ipllíàeiü : fsfzllik: of: ;J-zl ol: ›_: v. _lllftlfolzlalz lll^llí: lll? ›Í' »r: .:~. r l , '¡›V I~ ÍÍÍJ. ;
  16. 16. - l , 'L . . ' " ›Il; V-l, .'~', Fl-Íllglll lülaliur 'Falulbzãnunoplclilãblüfo-muu “inibir-mui _giqglljgggr_ zaiãlgu" : iêlíã-MIHÕÍBKÍÍUÍCÍ ilãlãtlllvloltvlliltlgtcll: lvllteusmuiamlona; armazenam«unemdlomgmzálvltamdlausiunlplrasjç; Hoiílnlcjpnnzdls ; g (análisis-NivaÊlílãplnliíanplñõlllmus*(mit: Wlnlãllfcfñlêãílill'“HW»diaçlhlràrl: viram. uruguai(- íuinlmiaaiziulm, cylcllclí' taum*Iwle-Rlsralee-gglnnna41m: lll(âx'iklivl°w_7°l. irg¡lífílík'upñlñu3 : :Em iii¡jifexzila"Ilí! ÉÍÍaF: ñ5'~'h-':1
  17. 17. C I palm “e once¡ OS e . t* ". ;¡g¡g¡r¡fl_, ll; ¡í¡ç' É” . . w'“Év'll(ÔlT1ñ“n. fl'rQf'lhlQll"lwl ' desenvolvido o: íund c- ~- D . _ í “í 1 , . 44.
  18. 18. 7 , , _RH à; 71 Ínti_ rala-l' a 'ágggíñâíóiu m ; pgzõktasgtn vltilllqlal-fl- ' . iüãtaâ. sg; anracnur. .q. .l llIIlâiIÍ= l~7íÍl! ñ|IÊ= l 4-'. !IÇ'I= .I= I.= §§ÍÍOÍ'AÍVÍ&Qͧ'Pʧ! ilollletglslanu: um , . . tQIIaMiÊÍOX-'llplíãlífdalã'? Éltgr-Jnitslllíta : to ; um ihclelgl, _ xrifsglnnngãtslqgtflqg "klrlãânailawqlrlz anrannttãzanunlqnilàloílêazwnúiíaühtaa ugllililqh
  19. 19. ¡ANE BANKS . a PHOTOGRAPHER «w «~ xm<r~~ : tl (WMÊC-¡ÍÍÍ 4p uma ezãtruttllzfl í JÕÇHS parati: s grmil O resulted: :ltalílcêltt um ! NJ I' l/ 'laterorooels 4-.
  20. 20. Conceitos de Web Design "Acima da Dobra": Este é um termo importante tanto para designers como para profissionais de marketing que trabalham com plataformas online. Ele é tirado do jargão de jornais impressos onde a noticia importante seria impressa na primeira página e “acima da dobra”, para que os leitores pudessem nota-las em primeiro lugar. Em web design, “acima da dobra" refere-se à seção da tela que é vista sem que o usuário tenhaquerálar para baixo. O ideal é que seu conteúdo mais importante esteja posicionadora espaco.
  21. 21. ., a . . 'r3ÍÍ. .ñ: ¡1'lrl: Í null”- AcirmdaDnha numa Ihaíísoúntnv AbahoodnDobra “ ' _f_ ' , t7 l . . m» l z' .
  22. 22. Conceitos de Web Design Rolagem Infinita: Embora soe como uma técnica antiga de tortura, rolagem infinita é na verdade uma tendência popular no cenário de web design hoje. Este termo é bastante autoexplicativc e se refere a layouts com páginas muito longas que requerem bastante rolagem.
  23. 23. zcnica antiga ra tendência e termo é ts com páginas am.
  24. 24. Sites de Página Única: A maioria dos usuários de intemet estão familiarizados com sites que são divididos em várias páginas e usam um menu de navegação para se deslocar de uma página para outra. Um site de página única, literalmente, tem apenas uma página Há muitas razões pelas quais o dono de um site possa preferir ter uma única página, em vez de um site com várias delas. Para o processo de design, o layout de página única requer planejamento para atingir uma hierarquia de conteúdo efetiva. e '
  25. 25. -- ; tantas ; rituais ' V ' Ma n; › m<i, ~_ç<›sJ›-za. w~r n' 3'** “Líilx r4c__; i_›wr›_c u¡ -awç-. ítcl-. urr E › x V * ; de intemet ps em várias 1 se deslocar única, tas razões v r É' ñ z 4*" : r uma c: : . ' - t r l: :~ a elas. 1 única A lia de
  26. 26. ãtlpnlg_ -clu : lutam: 'F-i clizâacumalnlilavfídto-m lo ": i:5g›= _L§o~ nlsggifivlly** ; í-3-t: í,. ."= lfí'l"3illl 'olninlstmàs-: mpnigc-: lniiraoi: :llcmlâull ze. =ll: ~~rn'-›: n=ls: a-p›= _in : montar uiíilmidtol praia: min IIHIQLãIl-*Iz-dhl [stillcitsuã #tuning l -siqgrgjgo-: na: X 'citar-leao»util-nai-â-nlnklidlantdlo-¡utilit-rslzltâíiozo-anuudtaitgjni, : eram llutauàzçptalñãIlolhuqlullzlllâlio- ~ 'i l .
  27. 27. g) de a ü n E ¡ “espaço N l re OS I , para [S OO N] -o em design, Í. 'l USUÉHO l l l 'ill' i Í _ _ ri. c_ , I 'l - m. .- - - . __ __ I v* 4:'- ' A "ü . l Q t Ã' . P"f'| n-1' . ... .-. __-. _.. ._ . , _. ._, _. ____ _ V __ _. , . ._ _ _ _ . D . :~. -›-_-1+-›-. --. Y É' ' ' 9'” ' ' E ' l ' v

×