Desenvolvimento
   para a web
Porque está a
Célia a dar a
aula??
Percebe alguma
coisa disto?
http://pt.linkedin.com/in/cleocadio

Vive no Montijo
Mais de 10 anos de (paixão) experiência em
Design & Web
Usability & U...
Do que é que vou falar
hoje?
•   Design
•   A importância da usabilidade e do design
•   O Processo de Design
•   Melhores Prácticas
•   As tendências
...
As 3 camadas

• Conteúdo
• Estilo
• Comportamento



  HTML + CSS + JAVASCRIPT/PHP/ROR
Vantagens

•   Partilha de Recursos
•   Rapidez
•   Acessibilidade
•   Manutenção
•   Compatibilidade
•   Flexibilidade
• ...
Vantagens
• Separar sempre o Conteúdo do design
• Utilização de CMS sempre que possível
• Tornar a manutenção fácil e desc...
O que é o Design?
Design envolve a busca de soluções que se ajustam ao
utilizador, tarefa e contexto de utilização

Os objectos que são dese...
http://www.flickr.com/photos/habdelra/1234877976/
                                              12
http://www.flickr.com/photos/23098699@N05/3984955013/sizes/o/
                                                        13
14
15
Design Centrado no Utilizador

User Interface Design

Os Designers precisam de equilibrar equilibrar uma
variedade de cons...
Usabilidade
"[Usabilidade refere-se] na medida em que um produto
   pode ser usado por utilizadores específicos para atingi...
Usabilidade
Atingir a usabilidade através de Design
             de Interacção

• Produtos bem desenhados são mais fáceis
  de usar (e...
Think of it this way:

When I’m looking at a page that doesn’t make me think, all the thought balloons


     Não me façam...
But when I’m looking at a page that makes me think, all the thought balloons
over my head have question marks in them.
   ...
names of things, for example. Typical culprits are cute or clever names, marketing-
induced names, company-specific names,...
c h a pt e r 1


  Hummm, deixa cá ver....
     Another example: On most bookstore sites, before I search for a book I fir...
Hummm, deixa cá ver....t m a k e m e t h i n k !
                            d o n’



Amazon.com, on the other hand, does...
Não perder tempo a pensar:

•   Onde é que eu estou?
•   Onde é que começo?
•   Onde é que eles puseram____?
•   Afinal o q...
Atingir a usabilidade através de Design
             de Interacção

•   Reduzir o barulho
•   Uso eficiente de Whitespace
•...
Enter
                                                           Basically, you use the store’s
                          ...
Enter
                                           store
                                                                   ...
c h a pt e r 6



                Uilizadores 101
                  Web Navigation
                      In many ways, you...
Here’s what the process looks like:


                                                    Enter site




                 ...
Site ID             Sections         Utilities




                                                     Subsections


    ...
Onde é que eu estou mesmo?
c h a pt e r 6



     Now, I’ll admit I’m a sucker for this kind of treatment because I come f...
start out with a reservoir of goodwill. Each problem we encounter on the site
lowers the level of that reservoir. Here, fo...
O custo da Usabilidade

• A usabilidade não é apenas sobre pesquisa
  e melhoramentos, ela tem um impacto real
  e financei...
A importancia do Design

                              web
                          n a
• Comunicação
• Branding , Identi...
Tipos de Design
UI (User Interface)
UX (User Experience)
Visual Design
Information Architecture
Database
System
Interaction
...
Proce o de Design
Briefing     É o que o Cliente nos dá.
             É o documento que define
 Pesquisa    as suas expectativas.
  Design

  ...
Briefing


 Pesquisa    Visão/Percepção que nos
             ajuda a gerar ideias para o
  Design     design e para a Arqui...
Briefing


 Pesquisa

              Desenhos, cores,
  Design
             tipografia, elementos,
  Ajuste     conceitos, Ar...
Briefing


 Pesquisa

  Design
             Revisões e
  Ajuste
             melhoramentos.
Lançamento
Briefing


 Pesquisa

  Design

  Ajuste

Lançamento   Rocket launch! Party!
Briefing

             Oi, cadê os testes de
 Pesquisa
             usabilidade?
  Design

  Ajuste

Lançamento
Melhores Prácticas para um projecto de
             Webdesign
Definir Objectivos
Benchmarking
Inspiração
Informação
Organiz...
Dicas & Fe amentas
Inspiração

•   CSSMania (cssmania.com)
•   CSS Awards (www.thecssawards.com/)
•   Design Shack (designshack.co.uk)
•   Co...
Tipografia

Typechart (www.typechart.com/)
MyFonts (new.myfonts.com/)
Dafont (dafont.com/)
Cufon (cufon.shoqolate.com/gener...
Software

•   Aptana Studio (aptana.org)
•   Gimp (gimp.org)
•   TopStyle lite (topstyle.en.softonic.com/)
•   Xampp (Apac...
Magia >> Javascript

Jquery (jquery.com/)
JqueryUI (jqueryui.com/)
Mootols (mootools.net/)
Prototype (http://www.prototype...
Imagens
  •Flickr Color Picker (krazydad.com/
  colrpickr)

•iStockphoto (istockphoto.com)

•Flickr “gomedia” Group (flickr...
CSS Frameworks

960 Grid System (960.gs)
Blueprint (blueprintcss.org/)
YUI Grids (developer.yahoo.com/yui/grids/)
CSS Frameworks ??
Conjunto de ficheiros que constituem um modelo definido para o
desenvolvimento rápido de layouts html.
Lim...
Gestão de Projecto e
        Conteúdos
GoPlan (goplan.com/)
Basecamp (basecamphq.com/)

Wordpress (wordpress.org/)
Drupal ...
As tendências
Ilustrações
Menus
Gigantes
Tipografia
Forms
        68
Ícones


         72
Mu as Gracias!!
Célia Leocádio
cleocadio@gmail.com
http://delicious.com/wedesignit
wedesignit.org
projectosweb.com
wdesign-it.com
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Desenvolvimento para a web
Upcoming SlideShare
Loading in …5
×

Desenvolvimento para a web

520 views

Published on

Designing for the web

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
520
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento para a web

  1. 1. Desenvolvimento para a web
  2. 2. Porque está a Célia a dar a aula?? Percebe alguma coisa disto?
  3. 3. http://pt.linkedin.com/in/cleocadio Vive no Montijo Mais de 10 anos de (paixão) experiência em Design & Web Usability & UI Design Consultant XHTML/CSS/Jquery Freelancer OpenSource
  4. 4. Do que é que vou falar hoje?
  5. 5. • Design • A importância da usabilidade e do design • O Processo de Design • Melhores Prácticas • As tendências • Dicas & Ferramentas
  6. 6. As 3 camadas • Conteúdo • Estilo • Comportamento HTML + CSS + JAVASCRIPT/PHP/ROR
  7. 7. Vantagens • Partilha de Recursos • Rapidez • Acessibilidade • Manutenção • Compatibilidade • Flexibilidade • Longevidade
  8. 8. Vantagens • Separar sempre o Conteúdo do design • Utilização de CMS sempre que possível • Tornar a manutenção fácil e descentralizada • O vosso site manter-se-á actual por mais tempo • Usando as melhores prácticas com css, estamos a usar standards que já foram testados e resultam com a passagem do tempo e da evolução dos novos browsers
  9. 9. O que é o Design?
  10. 10. Design envolve a busca de soluções que se ajustam ao utilizador, tarefa e contexto de utilização Os objectos que são desenhados de forma adequada - incluindo software, ferramentas e sites web - ajustam o seu contexto tão bem que são fáceis de usar e uma mais valia para o utilizador Uma disciplina que explora o diálogo entre os produtos, pessoas e contextos Um processo que define uma solução para ajudar as pessoas a atingir seus objectivos
  11. 11. http://www.flickr.com/photos/habdelra/1234877976/ 12
  12. 12. http://www.flickr.com/photos/23098699@N05/3984955013/sizes/o/ 13
  13. 13. 14
  14. 14. 15
  15. 15. Design Centrado no Utilizador User Interface Design Os Designers precisam de equilibrar equilibrar uma variedade de considerações, incluindo as necessidades e objectivos dos utilizadores, as limitações impostas pelo contexto de uso e os desafios que surgem naturalmente da interacção entre humanos e máquinas, para conceber soluções O processo de design é interactivo , o que significa que as soluções propostas são refinadas e melhoradas através de repetidos ciclos de avaliação do protótipo
  16. 16. Usabilidade "[Usabilidade refere-se] na medida em que um produto pode ser usado por utilizadores específicos para atingir metas especificas com eficácia, eficiência e satisfação num contexto de uso especificado". - ISO 9241-11 - ISO 9241-11 Usabilidade é uma abordagem para o desenvolvimento do produto que incorpora o feedback do utilizador directo em todo o ciclo de desenvolvimento, a fim de reduzir custos e criar produtos e ferramentas que atendam às necessidades do utilizador
  17. 17. Usabilidade
  18. 18. Atingir a usabilidade através de Design de Interacção • Produtos bem desenhados são mais fáceis de usar (e / ou aprender a usar) e são mais benéficos para o utilizador do que os mal desenhados • Um bom design pode aumentar a produtividade, satisfação e aceitação do utilizador
  19. 19. Think of it this way: When I’m looking at a page that doesn’t make me think, all the thought balloons Não me façam pensar! over my head say things like “OK, there’s the _____. And that’s a _____. And there’s the thing that I want.” NOT THINKING OK. This looks like the product categories... ...and these are today’s special deals. Memory, Modems... There it is: Monitors. Click
  20. 20. But when I’m looking at a page that makes me think, all the thought balloons over my head have question marks in them. Hummm, deixa cá ver.... THINKING Hmm. Pretty Is that the busy. Where navigation? Or should I start? is that it over there? Hmm. Why did Why did they they call it put that there? that? Those two links Can I click on seem like they’re that? the same thing. Are they really? When you’re creating a site, your job is to get rid of the question marks.
  21. 21. names of things, for example. Typical culprits are cute or clever names, marketing- induced names, company-specific names, and unfamiliar technical names. Hummm, deixa cá ver.... For instance, suppose a friend tells me that XYZ Corp is looking to hire someone with my exact qualifications, so I head off to their Web site. As I scan the page for something to click, the name they’ve chosen for their job listings section makes a difference. < Óbvio Pensar>> < OBVIOUS REQUIRES THOUGHT > Hmm. [Milliseconds of thought] Hmm. Could be Jobs. Jobs! Jobs. But it sounds like more than that. Click Click Should I click or keep looking? Empregos Oportunidades de Trabalho Oportunidades Note that these things are always on a continuum somewhere between “Obvious to everybody” and “Truly obscure,” and there are always tradeoffs involved. For instance, “Jobs” may sound too undignified for XYZ Corp, or they may be locked into “Job-o-Rama” because of some complicated internal politics, or because that’s what it’s always been called in their company newsletter. My main
  22. 22. c h a pt e r 1 Hummm, deixa cá ver.... Another example: On most bookstore sites, before I search for a book I first have to think about how I want to search.2 MOST BOOKSTORE SITES Let’s see. “Quick Search.” That must be the same as “Search,” right? Do I have to click on that drop-down menu thing? All I know about the book is that it’s by Tom Clancy. Is Clancy a keyword? (What is a keyword, anyway?) I guess I have to use the menu. Clicks on the arrow “ Title. Author. Keyword.” OK. I want “Author.” Clicks “Author” Types “Tom Clancy” Clicks “Search”
  23. 23. Hummm, deixa cá ver....t m a k e m e t h i n k ! d o n’ Amazon.com, on the other hand, doesn’t even mention the Author-Title-Keyword distinction. They just look at what you type and do whatever makes the most sense. AMAZON.COM OK. “Search books for _____.” Types “Tom Clancy” Clicks “Go” After all, why should I have to think about how I want to search? And even worse, why should I have to think about how the site’s search engine wants me to phrase the question, as though it were some ornery troll guarding a bridge? (“You forgot to say ‘May I?’”) I could list dozens of other things that visitors to a site shouldn’t spend their time thinking about, like: > Where am I?
  24. 24. Não perder tempo a pensar: • Onde é que eu estou? • Onde é que começo? • Onde é que eles puseram____? • Afinal o que é o destaque? • Porque é que lhe chamaram isto? • Isto é um link?
  25. 25. Atingir a usabilidade através de Design de Interacção • Reduzir o barulho • Uso eficiente de Whitespace • Criar hierarquias visuais • Reduzir texto ao essencial
  26. 26. Enter Basically, you use the store’s store navigation systems (the signs and the organizing hierarchy that the > signs embody) and your ability to > Look for the right department scan shelves full of products to find what you’re looking for. > Of course, the actual process is a NO YES > Look for the right aisle little more complex. For one thing, c h a pt e r 6 as you walk in the door you usually > devote a few microseconds to a Look for the product crucial decision: Are you going to Still think you’re in the right When you think you’ve got the start by looking for chainsaws on department? right aisle, you start looking at the own or are you going to ask > your > NO Find it? someone where they are? individual products. > NOT YET It’s a decision based on a number of If it turns out you’ve guessed wrong, you try another aisle, or you may back up and YES variables—how familiar you are start over again in the Lawn and Garden department. By the time you’re done, the > with the store, how much you trust THOROUGHLY FRUSTRATED? $ cash registers process looks Look for the like this: something their ability to organize things sensibly, how much of a hurry you’re in, and even how sociable use the store’s Basically, you > Enter YES Pay up store you are. navigation systems (the signs and the organizing hierarchy that the > signs embody) and your ability to > > Look for exit sign > Look for the right department scan shelves full of products to find what you’re looking for. > Of course, the actual process is a
  27. 27. Enter store BROWSE > ASK Ask someone first? YES > > > Look for the right department > Find a clerk > > Ask > NO YES > Look for the right aisle > > Find a smarter > Credible answer? NO looking clerk Look for the product > Still think you’re in the right YES department? > > > NO Find it? Look for the aisle NOT YET NOT YET > > YES ALMOST Look for > the product THOROUGHLY $ cash registers Look for the > FRUSTRATED? Find it? NO > > YES Pay up HAD ENOUGH? YES > > Look for exit sign > Notice that even if you start looking on your own, if things don’t pan out there’s a
  28. 28. c h a pt e r 6 Uilizadores 101 Web Navigation In many ways, you go through the same process when you enter a Web site. > You’re usually trying to find something. In the “real” world it might be the emergency room or a can of baked beans. On the Web, it might be the cheapest 4-head VCR with Commercial Advance or the name of the actor in Casablanca who played the headwaiter at Rick’s.1 > You decide whether to ask first or browse first. The difference is that on a • Pesquisador Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching—typing a description of what you’re looking for in a search box and getting back a list of links to places where it might be. results Some people (Jakob Nielsen calls them “search-dominant” users)2 will almost • Clicador always look for a search box as soon as they enter a site. (These may be the same people who look for the nearest clerk as soon as they enter a store.) 1
  29. 29. Here’s what the process looks like: Enter site > Feel like browsing? YES NO > > > Click on a section > Find a search box > > Click on a Type > > subsection your query > > NO YES Look for Credible whatever it is results? NO Think you’re in > the right section? > Devise a YES better query > Find it? > > NO Scan results for YES > likely matches NOT YET ALMOST > THOROUGHLY Check them out FRUSTRATED? NOT YET > > YES > > YES Find it? NO YES LEAVE HAPPY > HAD ENOUGH? > LEAVE UNHAPPY
  30. 30. Site ID Sections Utilities Subsections “You are here” indicator > Page name > > Local navigation (Things at the current level) > www.gap.com Small text version
  31. 31. Onde é que eu estou mesmo? c h a pt e r 6 Now, I’ll admit I’m a sucker for this kind of treatment because I come from Boston, where you consider yourself lucky if you can manage to read the street sign while there’s still time to make the turn. Covington Road Russett Rd Los Angeles Boston The result? When I’m driving in L.A., I devote less energy and attention to dealing with where I am and more to traffic, conversation, and listening to All • Todas as páginas devem ter nome Things Considered. I love driving in L.A. Page names are the street signs of the Web. Just as with street signs, when things • O Nome tem de estar no Sitio Certo! are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings. There are four things you need to know about page names: > Every page needs a name. Just as every corner should have a street sign, every page should have a name. I’m at the corner of Auctions and Sell an Item. Designers sometimes think, “Well, we’ve highlighted the page name in the navigation.9 That’s good enough.” It’s a tempting idea because it can save space, and it’s one less element to work into the page layout, but it’s not enough. You need a page name, too.
  32. 32. start out with a reservoir of goodwill. Each problem we encounter on the site lowers the level of that reservoir. Here, for example, is what my visit to the airline site might have looked like: I enter the site. I glance around the There's no mention of There's a list of five My goodwill is a little low, Home page. the strike on the links to News stories because I'm not happy It feels well organized, Home page. on the Home page but that their negotiations so I relax a little. I'm I don’t like the fact none are relevant. may seriously confident that if the that it feels like I click on the Press inconvenience me. information is here, I'll business as usual. Releases link at the be able to find it. bottom of the list. Latest press release is five No promising links, but I search for “strike” and find I look through their FAQ days old. plenty of promotions, two press releases about a lists, then leave. I go to the About Us page. which is very annoying. strike a year ago, and pages Why are they trying to from the corporate history sell me more tickets about a strike in the 1950s. when I'm not sure At this point, I would like to they're going to fly me leave, but they're the sole tomorrow? source for this information. [ 162 ]
  33. 33. O custo da Usabilidade • A usabilidade não é apenas sobre pesquisa e melhoramentos, ela tem um impacto real e financeiro • Alterações de última hora no design • Aumento nas vendas • Diminuição dos custos de formação e apoio • Redução dos custos de manutenção • Maior vida útil do mercado
  34. 34. A importancia do Design web n a • Comunicação • Branding , Identificação e reconhecimento • Para destacar e diferenciar
  35. 35. Tipos de Design
  36. 36. UI (User Interface) UX (User Experience) Visual Design Information Architecture Database System Interaction ...
  37. 37. Proce o de Design
  38. 38. Briefing É o que o Cliente nos dá. É o documento que define Pesquisa as suas expectativas. Design Ajuste Lançamento
  39. 39. Briefing Pesquisa Visão/Percepção que nos ajuda a gerar ideias para o Design design e para a Arquitectura Ajuste de Informação. Envolve benchmarking e Lançamento prototipagem.
  40. 40. Briefing Pesquisa Desenhos, cores, Design tipografia, elementos, Ajuste conceitos, Arquitectura de Lançamento Informação.
  41. 41. Briefing Pesquisa Design Revisões e Ajuste melhoramentos. Lançamento
  42. 42. Briefing Pesquisa Design Ajuste Lançamento Rocket launch! Party!
  43. 43. Briefing Oi, cadê os testes de Pesquisa usabilidade? Design Ajuste Lançamento
  44. 44. Melhores Prácticas para um projecto de Webdesign Definir Objectivos Benchmarking Inspiração Informação Organização Anotar Requisitos / Objectivos Preparar e planear as tarefas de desenvolvimento Gestão do projecto Prototipar Testes de Usabilidade durante todo o projecto Verificar checklist antes de lançar
  45. 45. Dicas & Fe amentas
  46. 46. Inspiração • CSSMania (cssmania.com) • CSS Awards (www.thecssawards.com/) • Design Shack (designshack.co.uk) • Colourlovers (www.colourlovers.com//) • Kuler (kuler.adobe.com/) • A Janela
  47. 47. Tipografia Typechart (www.typechart.com/) MyFonts (new.myfonts.com/) Dafont (dafont.com/) Cufon (cufon.shoqolate.com/generate/) Typester (www.typetester.org/)
  48. 48. Software • Aptana Studio (aptana.org) • Gimp (gimp.org) • TopStyle lite (topstyle.en.softonic.com/) • Xampp (Apache + php + Mysql) • Firebug (extensão Firefox) • FIlezilla (filzilla-project.org) • IETester
  49. 49. Magia >> Javascript Jquery (jquery.com/) JqueryUI (jqueryui.com/) Mootols (mootools.net/) Prototype (http://www.prototypejs.org/) Yahoo! UI Library (eveloper.yahoo.com/yui/)
  50. 50. Imagens •Flickr Color Picker (krazydad.com/ colrpickr) •iStockphoto (istockphoto.com) •Flickr “gomedia” Group (flickr.com/groups/ gomedia)
  51. 51. CSS Frameworks 960 Grid System (960.gs) Blueprint (blueprintcss.org/) YUI Grids (developer.yahoo.com/yui/grids/)
  52. 52. CSS Frameworks ?? Conjunto de ficheiros que constituem um modelo definido para o desenvolvimento rápido de layouts html. Limitam  a necessidade de utilizar tabelas e dão coesão visual entre os elementos da página. È mais fácil de aplicar a "regra dos terços", o que resulta num layout visualmente atraente para os olhos humanos. Produzir layouts assimétricos para textura visual. Redução do esforço de futuro, se for necessário reposicionar elementos ou características que as tornam mudanças (tipografia, margens, etc) para os elementos relacionados. Suporte transversal a browsers (Sim, inclusive ao IE6) Reduzido esforço para a produção de layouts de página web, em comparação com a codificação da CSS necessário partir do zero. Mais flexibilidade e rapidez na criação dos Layouts.
  53. 53. Gestão de Projecto e Conteúdos GoPlan (goplan.com/) Basecamp (basecamphq.com/) Wordpress (wordpress.org/) Drupal (drupal.org/) Magento (magentocommerce.com/)
  54. 54. As tendências
  55. 55. Ilustrações
  56. 56. Menus Gigantes
  57. 57. Tipografia
  58. 58. Forms 68
  59. 59. Ícones 72
  60. 60. Mu as Gracias!!
  61. 61. Célia Leocádio cleocadio@gmail.com http://delicious.com/wedesignit wedesignit.org projectosweb.com wdesign-it.com

×