• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desenvolvimento para a web
 

Desenvolvimento para a web

on

  • 457 views

Designing for the web

Designing for the web

Statistics

Views

Total Views
457
Views on SlideShare
414
Embed Views
43

Actions

Likes
0
Downloads
15
Comments
0

4 Embeds 43

http://videostie.tumblr.com 29
http://www.linkedin.com 11
https://www.linkedin.com 2
http://www.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desenvolvimento para a web Desenvolvimento para a web Presentation Transcript

    • 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 & UI Design Consultant XHTML/CSS/Jquery Freelancer OpenSource
    • 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 • Dicas & Ferramentas
    • As 3 camadas • Conteúdo • Estilo • Comportamento HTML + CSS + JAVASCRIPT/PHP/ROR
    • Vantagens • Partilha de Recursos • Rapidez • Acessibilidade • Manutenção • Compatibilidade • Flexibilidade • Longevidade
    • 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
    • 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 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
    • 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 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
    • 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
    • Usabilidade
    • 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
    • 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
    • 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.
    • 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
    • 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”
    • 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?
    • 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?
    • Atingir a usabilidade através de Design de Interacção • Reduzir o barulho • Uso eficiente de Whitespace • Criar hierarquias visuais • Reduzir texto ao essencial
    • 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
    • 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
    • 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
    • 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
    • Site ID Sections Utilities Subsections “You are here” indicator > Page name > > Local navigation (Things at the current level) > www.gap.com Small text version
    • 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.
    • 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 ]
    • 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
    • A importancia do Design web n a • Comunicação • Branding , Identificação e reconhecimento • Para destacar e diferenciar
    • 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 Ajuste Lançamento
    • 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.
    • Briefing Pesquisa Desenhos, cores, Design tipografia, elementos, Ajuste conceitos, Arquitectura de Lançamento Informação.
    • 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 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
    • Dicas & Fe amentas
    • 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
    • Tipografia Typechart (www.typechart.com/) MyFonts (new.myfonts.com/) Dafont (dafont.com/) Cufon (cufon.shoqolate.com/generate/) Typester (www.typetester.org/)
    • 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
    • Magia >> Javascript Jquery (jquery.com/) JqueryUI (jqueryui.com/) Mootols (mootools.net/) Prototype (http://www.prototypejs.org/) Yahoo! UI Library (eveloper.yahoo.com/yui/)
    • Imagens •Flickr Color Picker (krazydad.com/ colrpickr) •iStockphoto (istockphoto.com) •Flickr “gomedia” Group (flickr.com/groups/ gomedia)
    • 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. 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.
    • Gestão de Projecto e Conteúdos GoPlan (goplan.com/) Basecamp (basecamphq.com/) Wordpress (wordpress.org/) Drupal (drupal.org/) Magento (magentocommerce.com/)
    • 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