29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Startyourfree10daytrialofEnvatoTuts+today! JoinNow

WI RE F RAM I NG

GuiaSobreWireframingPara
Iniciantes
byWinnieLim 18Jun2012 1Comment English

ThispostispartofaseriescalledUXFoundations.

FirstStepsinYourUserExperienceWorkflow:NascentUX

ABeginnersGuidetoWireframinginOmnigraffle

Portuguese(Portugus)translationbyHugoCarlosBorgesPinto(youcanalsoviewthe
originalEnglisharticle)

Wireframingumimportantepassonoprocessodedesign.Elepermitequevoc
definaahieraquiadainformaonoseudesign,fazendocomquesejamaisfcil
planejarolayoutdeacordocomamaneiranaqualvocesperaqueousurio
processeainformao.Sevocaindanousewireframes,horadecolocaramo
namassa.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 1/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

comosefosseumaplantaarquitetnicavocprecisaverdiagramasbi
dimensionaisempretoebrancoantesdeentendercomoconstruiracasadefato.
Similarmenteemumdesignparatelas,vocnopodecomearaconstruir
camadasdepixelnoPhotoshop,ouescreverblocosdecdigo,semsaberondea
informaoserposicionada.

Emumnvelmaisprodundo,umwireframetambmmuitotilparadeterminar
comoousuriointeragecomainterface.Porexemplo,wireframespodemconter
vriosestadosdebotesoucomportamentodemenus.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 2/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Fazerwireframesimportanteporquepermitequeodesignerplanejeolayouteas
interaesemumainterfacesemserdistradoporcores,escolhasdetipografiaou
mesmocpia.Eugostodeexplicarparameusclientesqueseumusuriono
conseguesaberparaondeiremumwireframeempretoebranco,ascoresque
eventualmenteserousadasnoimportam.Umbotoprecisaserbviomesmoque
elenosejabrilhanteoucolorido.

Comoafundaodeumaconstruo,eleprecisaserfundamentalmenteforteantes
quevocdecidadaraeleumacaracamadadetinta.

Passo1:Inspirandose
Antesdeentraremmaioresdetalhes,considerandoqueumaimagemvalepor
milharesdepalavras,dumaolhadaemIwirefames.Vocvaipoderteruma
visogeraleentendimentovisualdecomooutrosdesignersestoconduzindoseus
processosdewireframing.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 3/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Talvezpeguetambmestebookmarkletparaseunavegador,Wirifyquepermiteque
vocvejaumaverso"wireframezada"dequalquersitereal.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 4/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Sevoccontinuamenteobservaoqueoutrosdesignersousitesestofazendoem
seuswireframes,vocvailentamenteterumavisoemsuamentedecomoum
wireframeajudanaorganizaodeinformaesparatelas.

Passo2:FazendooDesigndoseuProcesso
Designumprocessoorgnicoediferentesdesignersencaramwireframesesuas
traduesparavisuaisecdigodemaneiradiferente.Vocprecisaencontraro
processoquedestacaseuspontosfortesecomoqualvocficamaisconfortvel.
Abaixoestumdiagramamostrandodiversosprocessostpicos:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 5/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

37signalsconhecidapordefenderousodeesboosepartindodiretoparao
cdigo,emboraalgunsdosseusdesignersutilizemmodelosvisuaisnosseus
processostambm.

Paramim,eujpasseipordiversosciclosdesignparacdigoparaterumprocesso
relativamentesimplificado.Esteumpassosobreoqualalgumaspessoasno
pensam,maseutambmconsideroqualquerframeworkhtml/cssqueeupoderei
usarnoprojeto.

Porexemplo,eucostumavacriarvriossitesnaframeworkBlueprint,portantoeu
configuravatantomeuswireframesquantoaBlueprintparaamesmagradede12
colunas.Istoaceleraotempodefazerprottiposedesenvolvimento
consideravelmente,poisaoinvsdeterqueescreveralarguradecadaelemento
nomeuarquivocss,elesagorasoprdefinidosdeumaadozecolunasde
largura.Euagorausoacssgridnolugardevidoaoseusuporteparadesign
responsivo,maselaaindaconfiguradaparaumagradede12colunasquevoc
podebaixarcomoummodelodophotoshop.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 6/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Comoeudisse,dependedevocescolherqualprocessotedeixamaisconfortvel,
algumasvezesvocpodeterquetestardiversasvezesantesderealizarqualo
maisefetivo.Algumaspessoaspodemserrealmentemuitoboasparafazeresboos
epreferemnousarwireframes.Outrosdesignerspodemquererterquantos
passosforemnecessriosparaminimizardivergnciasoupermitirqueeles
consideremcadaiteraoenquantoodesigncomeaatomarforma.

Voceventualmenteirdesenvolverseuprprioprocessopreferidomasparaos
finsdestetutorialeuvouusarmeuprocessotpicocomoexemplo:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 7/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

ArazopelaqualeuusooIllustratorcomominhaferramentadewiregraming
principalmenteportrsmotivos:

1.Estilosvocpodesalvarestilosdefonteseobjetosereutilizlosem
qualquerparte,exatamentecomonoCSS.
2.fcildemodificar,moverouescalarparamltiplosobjetos.
3.ElepermiteumafciltransioparaoPhotoshopposteriormente.

Entretanto,euutilizoalgumasoutrasferramentaseistodependedocenriodo
projeto.Euvoudemonstrarbrevementealgumasferramentaspopulares,seus
pontospositivosenegativosnaprximaseo.

Passo3:EscolhaSuasFerramentas

Aquiestoalgumasferramentaspopularessemordemespecfica:

Balsamiq
BalsamiqsetornoupopularporquewireframesproduzidoscomoBalsamiqlembram
http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 8/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

esboos,deixandobvioimediatamentequeowireframenoumprodutofinal
masumtrabalhoemprogresso.Balsamiqtambmpossuiumaimensabibliotecade
componentesreutilizveisquevocpodearrastaresoltarfacilmenteparafazero
designdeseuswireframes.

Voctambmpodeutilizloempraticamentequalquerplataforma,comverses
paradesktopdisponveisparaMac,WindowseLinux,eaindahumaversoweb
sevocpreferetrabalharnanuvem.AplicativosdeterceirosparaiOScomoo
iMockupstambmsuportamoformatodeexportaodoBalsamiq.

Omnigraffle
UmvelhofavoritodoMac,Omnigraffletambmtemumaamplabibliotecade
componentesreusveissuportadaporusuriosGraffletopia.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 9/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Comofoidesenvolvidoespecificamentecomoumaplicativodediagramas,o
Omnigraffletambmpossuirecursoscomplexoscomolayoutautomtico,suportede
estilosdeobjetoscustomizveis,guiasinteligenteseferramentasdegrficos.
AlgunsdestesrecursostambmestodisponveisnopacoteAdobeCS,masse
vocnotemopacoteCS,oOmnigrafflepossuiumbomcusto(~US$100)para
produzirwireframesdetalhados.

Axure
Quasecomooavdasferramentasdewireframe,Axurefoiumadasprimeiras
ferramentasdewireframe/protpicosdenvelprofissional.Atrecentemente,estava
disponvelapenasparaWindows.Eupessoalmentenotenhomuitaexperincia
comele,masconhecidoporserumaferramentaamplamenteutilizadaentre
http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 10/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

profissionaisdaindstria.

Flairbuilder
Umanovacriananopedao,Flairbuilderpossuigrandesuporteainteraes.

Eletambmsuportaumagrandebibliotecadecomponentes,pginasmestrase
vocpodeexportaroprottipoparaservistoonline.

Aplicativosonline
Seaplicativosparacomputadoresdemesanososuapreferncia,existem
ferramentascomomockflow,hotglooemockingbird.

Keynote/Powerpoint
Keynotopia"transformaseuaplicativodeapresentaesfavoritonamelhor
ferramentaparaprottiposrpidosdeaplicativosparadispositivosmveis,webe
computadoresdemesa".ParausuriosquenopossuemMac,nose
desesperem,poisaKeynotopiatambmoferecemodelosparaPowerpoint.

EupessoalmenterecomendoaltamenteoKeynotopiasevocprecisafazer
wireframesouprottiposdeaplicativosmveisrapidamente.Outraboaalternativa
KeynoteKungfu.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 11/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

AdobeCS
ParaaquelesjfamiliarizadoscomopacoteAdobe,Fireworks,IllustratoreInDesign
soferramentasparawireframesmuitocapazescomsuasvantagense
desvantgensindividuais.

Fireworks
VocpodetrabalharoprocessodedesigninteironoFireworks,dewireframes
bsicosparaovisualcompleto.OFireworkssuportapginasmestras(pensenestas
comomodelosreutilizveisnosquaiscadaedionomodelomestrepodeser
aplicadoemtodasaspginasderivadasdele),bibliotecadeelementosevocpode
fazerprottiposinterativoscomoFireworksrelativamentefcil.

Illustrator
Estaumadasminhasferramentasfavoritasporquejestoumuitofamiliarizado
comoIllustratoretenhocertezaquemuitosdesignersaquitambm.Euusoo
Illustratorquandoestoutentandofazerrapidamentewireframesrpidosmas
complexos,semnecessidadedeinteraes.

Oqueotornaumavencedora?AhabilitadedeexportarcomoumarquivoPSDcom
camadaseditveis,amplosuporteparacopiarecolarparaoPhotoshop,e
excelentescontrolesdetipografia,comestilosdefontesquevocpodesalvar,
editarereutilizar,quasecomoCSS.

Indesign
SimilarmentesvantagensdoIllustratorcomsuporteaindamaisforteacontroles
deestilostipogrficos,timosuporteapginasmestraserecentehabilidadede
fazerprottiposinterativos.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 12/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

EuescolhoIndesignquandoeutenhoquefazerprottiposmultipgina,interativos
edealtafidelidade.Onicoproblemaparamimofracosuporteparaexportao
paraoPhotoshopparadesignsvisuais.

ProtoShare
"ProttiposPoderososFcilmente."Averso9lanadarecentementepossuiuma
novapaletaWYSIWYG.Valeapenaconferir.

Passo4:ConfigurandoumaGrade

Existemmuitasteoriascomrelaoasistemasdegrades,massementrarem
muitosdetalhes,euvouexplicloscomo"umamaneirasimpleseestruturadapara
posicionarelementos".

EuestouutilizandooIllustratorparaestetutorialmasestespassospodemser
seguidoscomqualquerferramenta.

Primeiramente,determineumtamanhodedocumento.Euusei1280x900porque
euvouusarcssgridoquevaipermitirquemeuwebsiteescaloneentreresolues
http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 13/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

mobileatummximode1140pixelsfacilmente.

Posicioneomodelobaixadodocssgridnoseudocumento.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 14/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Dica:
Existeminmerosmodelosdegradesdisponveisparadownload,massevocest
interessadoemcustomizarseuprpriomodelodumaolhadaemresponsify.it.

Passo5:DetemineoLayoutComBlocos
Comecedesenhandoblocosnagrade.Pensenaordemdainformaoquevoc
desejaapresentarparaseusvisitantes,dotopoparabaixomaisfcil,seguidoda
esquerdaparaadireita.Abaixoumexemplodeumwireframequepossuiumlayout
comumenteutilizadoporempresasdesoftwareatualmente:

Algumasvezes,dependendodosseusobjetivosedainstituioparaaqualvoc
estfazendoodesign,vocpodesercriativocomolayout,emboraaindamantendo
ahierarquiavisualdainformaoemmente.Esteumexemplorealdeumdos
meusclientesnoqualeuestavarompendocomolayouttradicionaldewebsitepara
empresasdesoftware:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 15/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Aquiestumlayoutparaumblog,comblocosdeanncioscuidadosamente
posicionadoseinstruesespecficasparaocliente:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 16/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 17/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Passo6:DefinaaHierarquiadeInformaes
ComTipografia

Depoisqueestiversatisfeitocomcomoosblocosestoposicionados,comecea
posicionarpequenospedaosdoseucontedoparasentirseainformaoest
bemestruturada.Aregrageralamesma:ainformaoquevocdesejaentregar
parasuaaudinciadeveserclara,mesmoemumwireframepretoebranco.

Simplesmenteusandotamanhosdefontesdiferentescomocomeoumagrande
maneiradediferenciarentreosdiferentesnveisdeinformao.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 18/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Notenhamedodeexperimentarnesteestgio.Algumasvezes,enquantovoc
completamaisdetalhes,vocpodeperceberqueolayoutoriginalnoest
funcionandodireito.Esteoprincipalpontonoprocessodefazerwireframesfazer
quantasiteraesforemnecessriasparaselecionaramelhormaneirade
representarainformaoquevocesttentandocomunicar.

Noexemploabaixo,eudecidiquequeriaqueascapturasdetelativessemmais
impactoetambmcomeceiausarcaixaspretasparadefinirasreasqueteriam
importnciavisualparaowebsite:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 19/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Passo7:AjustandoDetalhescomTonsdeCinza

Usartodooespectrodetonsdecinzapodeteajudaradeterminaraforavisualdos
seuselementossemterqueescolherumapaletadecores.Naverdade,istopodete
ajudarduranteoprocessodedesignvisualposteriormente.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 20/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Passo8:WireframedeAltaFidelidade

Esteumpassoopcional,massevocdesejaconduzirascoisas
incrementalmentevocpodequerertestaristo.Fazerumwireframedealta
definiosignificaapenasadicionarmaisdetalhes,tantosquantopossveis,sem
entrardemaisnosmnimosdetalhes.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 21/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Tambmpodeenvolvercores:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 22/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 23/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Aideiageralquenoestgiovisual/cdigovocvquererestarnomodode
requinteenomaisnomododeexperinciaouesboo.Faaosciclosdeiterao
(opinies<>wireframing)omaisrapidamentepossvelemumaplicativode
wireframeconfortvelparavoc,aoinvsdeficaralterandocamadasepixelsno
Photoshop.

Ditoisto,emcertoscenriospodesermaisadequadopularoestgiodedefinir
muitosdetalheseirdiretoparaoestgiodeprottiposinterativos(comona
37signals).Oargumentoafavordistoquecertosdetalhesdeinteraono
podemsercomunicadoscompletamenteemumaimagemesttica.

Sevoctrabalhacomumtimededesenvolvedores,vocpodequererenviaros
wireframesaprovadosparaosdesenvolvedoresgeraremoscdigosbsicosda
frameworkenquantovoctrabalhanovisual.

Passo9:TransformandoumWireframeemum
Visual
Mencionadaanteriormente,arazopelaqualeutendoapreferirusaroIllustrator
parawireframesporqueeupossoexportloparaumarquivo.psdcomamaioria
dascamadaseditveis.QuandoeuestounoPhotoshopnovouprecisareditara
tipografiatanto(Photoshoptemcontrolesdetipografiainteriores,masmuito
melhoradosnaCS6):

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 24/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Aquiestumexemplodeumwireframetransformadoemumvisual.Aespinha
dorsaldowireframeestpraticamenteintacta,emborahajaalgunsajustesvisuais.
Voctambmpodeverestewebsiteaovivo:

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 25/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Concluso
Assimchegamosaofinaldestetutorial.Euesperoqueeletenhainspiradovoca
comearaexperimentar!Assimcomoemqualquerprocessodedesign,notenha
medodeiterar,iterareiterar.

Tambm,faaquestodepassaralgumtempoexperimentandodiferentes
ferramentaseprocessos.Vocvaiverquevaicompensaroinvestimentodetempo
paraacharumaferramentaquepareaintuitivaparavoc.

Sintasevontadeparafazerqualquerperguntanoscomentrios,obrigadoporler!

RecursosAdicionais

Sevocquersabermaissobrewireframing,vocpodequererconferirestes
recursos(emingls).

35ExcellentWireframingResources
Wireframing&PrototypingwithAdobeFireworksResourcesandTutorials
Gooddesignfaster(slidesonsketchingwireframes)
50FreeUIandWebDesignWireframingKits,ResourcesandSourceFiles

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 26/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Yahoo!DesignStencilKit
wireframes.linowski.ca
Quora:Whatarethebesttoolsforwireframing?

Sejaoprimeiroasabersobrenovastraduessiga@tutsplus_ptnoTwitter!

Categories:

Wireframing UIDesign Grids AdobeIllustrator AdobePhotoshop

Translations:
English
Deutsch
Espaol
Franais

EnvatoTuts+tutorialsaretranslatedintootherlanguagesbyourcommunitymembersyoucanbeinvolved
too!

Translatethispost Poweredby

DownloadAttachment

AboutWinnieLim
Integratedvisualdesignerspecializinginsimple,usercentricdesignsolutions.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 27/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

SuggestedEnvatoTuts+Course

MobileUIDesignforBeginners $9

RelatedTutorials
10 Best Bootstrap Landing Page TemplatesWith Responsive Designs
Business

How to Create a Keynote Presentation Template Design

Business

Web Designers: Roll up Your Sleeves and Sketch!

WebDesign

EnvatoMarketItem

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 28/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

WhatWouldYouLiketoLearn?

SuggestanideatothecontenteditorialteamatEnvatoTuts+.

1COMENTRIO Webdesigntuts+
1 Iniciarsesso

Recomendar Partilhar Mostrarprimeiroosmaisvotados

Deixeoseucomentrio...

MiguelLeandro h10meses
Excelenteartigo,estastemticasdeviamtambmserabordadasemCursosdeWeb
Design
Responder Partilhar

Subscrever d SabermaisacercadoDisqusAdicionaroDisqusAdicionar

Teaching skills to millions worldwide.

21,369 Tutorials 736 Video Courses

Meet Envato

Join our Community

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 29/30
29/02/2016 GuiaSobreWireframingParaIniciantesEnvatoTuts+WebDesignArticle

Help and Support

Email Newsletters

Get Envato Tuts+ updates, news, surveys & offers.

Email Address

Subscribe

Privacy Policy

Check out Envato Browse Top-Selling

Studio Themes

Follow Envato Tuts+

2015 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

http://webdesign.tutsplus.com/pt/articles/abeginnersguidetowireframingwebdesign7399 30/30