Desenvolvimento de Sistemas Wireframes: conceitos e utilizagao Conceitos O wireframe de website é 0 protétipo visual de uma pagina da web que se concentra no contetido, no /ayout e no comportamento Tipicamente no inclui nada de estilo, cores ou gréficos. Pode-se imaginar como a planta baixa de uma casa, que mostra todo o projeto de encanamento e de eletricidade, mas sem 0 projeto do seu interior. O wireframe de website também pode mostrar a relagao entre as paginas, permitindo que vocé navegue entre uma série de modelos, recursos e disposigdes com componentes clicdveis. Conforme jé discutido em outras unidades curriculares, o wireframe & construido usando caixas bsicas, linhas e outras formas para criar um esbogo das partes funcionais de uma pagina da web. Muito costumeiramente, é 0 primeito passo no proceso de design e desenvolvimento do website, ajudando a comunicar os conceitos de design para a equipe, os clientes e/ou o gerenciamento. Um wireframe permitiré que vocé ilustre aos seus clientes ou as partes interessadas 0 que vocé quer dizer, por exemplo, com uma imagem de herdi, uma caixa de luz, uma navegagao, e como esses elementos serao unidos em uma pagina.«7en Figura 1 — Wireframe para um blog Fonte: Oliver (2022) Por que fazer wireframes? Pode ser tentador e desafiador tentar pular a etapa do desenvolvimento do wireframe e fornecer aos clientes modelos de alla fidelidade do website, entretanto esse desenvolvimento oferece alguns beneficios importantes: Brainstorming de ideias de design e iterago rapida Feedback de todas as partes interessadas, como membros da equipe e clientes, antes de dedicar recursos a um esforgo de design mais refinado Garantia de que todos estejam na mesma pagina e compartilhem a mesma visdo ‘Tradugao da arquitetura de informagées do site em caminhos de design visual, definindo elementos de navegagao como cabegalhos, barras laterais, rodapés e botées Destaque de quaisquer problemas e falhas potenciais antes que eles possam se tornar obstaculos maioresEscopo do esforgo de desenvolvimento Colaboragdo para manter os projetos no caminho certo Validago de contetido e navegago Foco na interagao do usuario, na usabilidade e na experiéncia do usuario Construindo um wireframe Antes de comegar a desenvolver 0 wireframe, € aconselhdvel que vocé jé tenha realizado algumas reuniées e sessdes de brainstorming para discutir os requisitos de negécios e as necessidades do usuario. Nesta etapa, vocé podera criar um mapa do site existente ou projetar uma nova arquitetura de informagées, discutir a estratégia de contetido e criar personas. O mais importante para vocé e a equipe é 0 entendimento de qual deve ser 0 objetivo principal de cada pagina. A seguir, 6 possivel visualizar sete atividades que devem ser desenvolvidas para criar um wireframe da melhor forma Identifique 0 objetivo do site Pense naquilo que deseja que todos os visitantes vejam e fagam enquanto vocé chama a alengao deles. O objetivo pode ser uma venda, um dounload ou uma visita a uma pagina espectica Certifique-se de que sua equipe esteja alinhada em tomo do objetivo para que as etapas subsequentes fluam sem problemas até que vocé coloque seu site em produgao. Entenda 0 fluxo do usudrio Os wireframes ajudam a comunicar um fluxo esperado de agées do usuario na pagina, E interessante descrever 0 ponto de entrada de um visitante, as paginas pelas quais ele normalmente passaria e outros pontos principais que ele acessaria. Vale a pena descrever esse fluxo textualmente antes de desenhar em wireframe para evitar retrabalho. Determine o tamanho do wireframe do seu website Geralmente, recomenda-se considerar as dimensées, em pilxe/s, de 1080 x 1920 para simular uma tela de smartphone; 1200 x 1920 para tablet; e 768 x 7366 para desktop.Comece o design do wireframe do seu site Se vocé estiver usando caneta e papel fisicos, recomenda-se 0 uso de papel pontihado ou papel quadriculado para manter as coisas alinhadas. Se vocé estd usando uma plataforma digital, escolha uma ferramenta que funcione melhor para as suas necessidades de fidelidade de wireframe Determine os pontos de conversao Nesta fase, vocé determinara quais botdes, hipertinks, imagens ou outros elementos na pagina guiardo o leitor para a préxima etapa até atingir 0 objetivo final que discutimos na primeira etapa. Remova etapas redundantes Nesta etapa, sdo revistos os wireframes e corrigidos os elementos percebidos com a construgao do esqueleto do site, como paginas redundantes ou navegago inconsistente. ‘Sempre que houver uma oportunidade de simplificar seu wireframe, faga-o. Obtenha feedback sobre o wireframe Seu site passara por varias rodadas de testes e revises antes de entrar no ar, mas ainda @ uma boa ideia obter feedback sobre seus wireframes nos estagios iniciais. Considere observar criticamente esse trabalho sob a viséo de UX (user experience) e UI (user interface) E importante lembrar que, na criagdo wireframe, deve-se evitar o uso de cores ou imagens que desfoquem a ideia principal. O principal desejo é que o wireframe se concentre no layout ¢ no comportamento. Até mesmo a fonte que vocé usara deve ser genérica. As imagens devem ser representadas com uma caixa com um X através delas.(EOI RE f Boos Figura 2— Wireframe para pagina de videos or-iine Fonte: Visual Paradigm ({s. 4.]) Clique ou toque no botao para acessar o objeto interativo "Construtor de Wireframe": Construtor de Wireframe (obj-wireframe/indexhtm)) Recurso Ferramentas de construgao de wireframe Existem diversas ferramentas que auxiliam na construgao do wireframe disponiveis, elas podem ser utiizadas diretamente no navegador ou serem instaladas na sua maquina.A seguir, veja algumas ferramentas utilzadas que podem ser testadas e estudas. Adobe XD © Adobe XD ¢ uma ferramenta de design baseada em vetores e serve para qualquer pessoa que precise criar interfaces de usudrio intuitivas e wireframes interativos. Ela traz uma enorme quantidade de componentes de interface embutidos que ajudam os designers a criar wireframes, sendo possivel testa-los em diversos tipos de dispositivos. Figma Esta ferramenta foi estudada em unidades curriculares anteriores e ¢ uma poderosa ferramenta de design baseada na nuvem. Sua interface, com gestos simples de arrastar soltar, permite que vocé faca rapidamente projetos de design e protétipos de aplicativos. Ela tem um layout intuitivo e expansivo, que ajuda o usuario a construir miitiplos designs dentro de um mesmo projeto, tomando-o especialmente adequado para trabalho em equipe. [Link] E uma das melhores opgdes caso vocé precise de uma ferramenta simples e eficiente para criar maquetes de sites ou aplicativos méveis. Essa ferramenta de wireframes baseada na web tem uma interface amigavel e sem complicagdes. Balsamiq £ uma ferramenta que permite aos usudrios criar facilmente protétipos de baixa fidelidade, Em vez de focar detalhes complexos, essa ferramenta simplifica 0 processo de criagéo com wireframes em estilo de rascunho, que dao mais énfase ao contetxdo e a estrutura do seu projeto. Ainda existem muitas outras ferramentas que podem ser utilizadas na construgao de wireframes. Se quiser conhecer mais ferramentas disponiveis, basta fazer uma procura no seu buscador preferido. Usando o [Link]Apés digitar no seu navegador 0 enderego do [Link], vocé sera direcionado a pagina na qual podera, entéo, construir seus wireframes. Figura 3 — Pagina inicial do [Link] Fonte: Senac EAD (2023) No topo da pagina inicial a esquerda, pode-se escolher o /ayout do dispositive com que se pretende trabalhar e fazer a construgéo. Existe a opgao para documento em branco, sites, tablets e dispositivos méveis, conforme mostra a figura a seguir: Figura 4 — Escolhendo 0 tipo de dispositivo Fonte: Senac EAD (2023) Para inserir os objetos na drea destinada, basta vocé clicar com 0 mouse e arrastar. Logo que soltar o mouse, o espago selecionado ficara em evidéncia e abrir uma guia com ‘0's componentes que poderdo ser utllzados no espago, conforme mostra a figura a seguir:ane” Figura 5 — Inserindo objetos na tela Fonte: Senac EAD (2023) Veja, a seguir, os elementos da guia. O objeto da tela do wireframe sera um quadrado. O objeto da tela do wireframe sera um circulo. Utilizado para escolher icones. Utiizado para inserir uma imagem na tela do wireframe Utilizado para adicionar textos na tela do wireframe. Utiizado para alinhar textos..Util \do para fazer listas.. Utilizado para criar tépicos... Utilizado para caixas de texto.. Utilizado para comentarios. Esses so os principais recursos de utilizagéo no [Link], e a ferramenta 6 intuitiva e de facil utilizagao. Vocé montaré, agora, 0 seguinte wireframe para uma pagina empresarial: Loco Link Link2 Link 3 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet et delectus ‘accommodare his consul copiosae leg at vic ad putent delectus delicata usu, otto Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Figura 6 — Wireframe de pagina empresarial Fonte: Senac EAD (2023) Veja, na animagdo a seguir, 0 passo a passo da construgéo desse wireframe. E importante notar que os passos sao simples ¢ consistem basicamente em arrastar e clicar a direita para criar uma nova forma e selecionar que tipo de elemento quer representar. Usa-seclicar e arrastar 4 esquerda para selecionar itens. E possivel copiar e colar um ou varios itens no wireframe. & possivel, ainda, usar as linhas de guia que surgem na tela para alinhar elementos. Note que os elementos de texto vém com frases em latim, muito usadas para wireframes e testes em programagao com a intencéo de apenas representar uma area textual para a qual ainda ndo se tem o contetido real. Utilizando a ferramenta [Link], construa um protétipo do site do Senac EAD (< https:/[Link]. br/>), Lembre-se de utilizar Ul e UX e foque no principal objetivo do site, Encerramento Neste material, vocé estudou que o wireframe é uma ferramenta muito importante para o desenvolvimento de websites e aplicagdes e que, por meio dele, é possivel iniciar a fase de elaboragao e construgéo do seu projeto ja pensando e identificando todas as telas, interagées e disposigdes de objetos