Criação de wireframes para design de sites: curso para iniciantes

1. Introdução: bem-vindo o enquadramento de fio para designers nesta classe, você vai aprender os conceitos básicos de enquadramento de arame. Vamos explorar os estilos analógicos, baixos e hi fi. Você vai ser capaz de trabalhar em papel, lápis e livros de esboço,notas postadas, notas postadas loja de fotos ilustrador e atos de navegador da Web on-line. Você verá as ferramentas de variedade que você pode usar e como esse estilo de trabalho pode realmente beneficiar e melhorar suas habilidades de design. O enquadramento de arame permite que você lide com a estrutura esquelética do design do seu site em vez ficar atolado pelos detalhes imediatamente, que eu sei que às vezes estamos aptos a dio. Então, nesta aula você vai aprender o básico de como rebocar arame, quando usá-lo e como usá-lo como de costume com a minha classe, eu quero que você explore e se divirta 2. Materiais de curso: Certo, vamos em frente e dar uma olhada em que suprimentos você vai precisar para enquadramento de arame para um tipo de arame, você só precisa de algum tipo de papel. Isso pode ser apenas, você sabe, papel básico de desenho tablet computador, postar notas e algum tipo de marcador de lápis de caneta. Um utensílio de escrita. Se você é mais um trabalhador digital, você pode usar o computador para essa classe também. ilustrador ou o Photoshopped funcionarão perfeitamente para isso. Se você gosta de design, você pode substituir isso em uma ondulação, mas eu vou estar mostrando ilustrador e foto comprada para isso, e eu forneci modelos para cada um deles para você, para este projeto de classe também. Você pode usar sites de arame on-line, como Besame IQ. Eles funcionam muito bem. Aquele tem um julgamento de um mês. Alguns deles são livres. Alguns deles não são eso. Basta descobrir quais você foi experimentar em qual deles se é suas necessidades econômicas e ver o que eles diram. Mas os livres são decentes. Então eu diria Comece por aí. Tudo bem, vamos em frente e começar 3. O projeto!: Tudo bem. Hora do projeto da turma. Neste projeto, você vai projetar quadros de fios de sites. Agora, este pode ser um que você acabou de inventar. Este pode ser o seu próprio site. Ou pode ser um redesenho de um site que você sente que precisa apenas de um pouco de amor por isso . Vamos desenhar três de suas páginas. Dessa forma, podemos ver sua consistência e sua unidade em todas as três páginas. O que você vai fazer é verde, escolher qual estilo você parece mais interessado. Gosta do analógico? Esboçar. Pegue seu papel, pegue seus lápis, pegue seu caderno de esboços e veja como suas páginas podem se parecer. Com isso Você gosta de postá-lo notas. Vá para ele. Você tem um quadro-negro ou um quadro branco? Esboçá-lo ali. Gosta do sistema Lo Fi? Não estamos muito preocupados com muitas das grades ainda. Em seguida, experimente ilustrador ou loja de fotos e veja o que acontece lá. Talvez estivesse interessado em aprender metade. Construí-lo no estilo de navegador on-line em que, Explorar um par daqueles e ver qual deles funciona melhor para você. Como de costume, a exploração é sempre fundamental. Talvez nesta fase, você nem sabe do que gosta. Se for esse o caso, experimente um pouco de todos eles. Lembre-se, não estamos ficando atolados pelas cores. Não estamos ficando atolados pelo tipo. Não estamos ficando atolados por detalhes finitos. Só estamos preocupados com o sistema esquelético. E como essa estrutura interage e transmite a mensagem na sua página? Então não vamos colocar uma mensagem de verdade, vamos usá-la. Lauren, está dentro. Se você está desenhando, pode ser apenas a caixa com alguns rabiscos nele. Então não se preocupe com a carne e as batatas quando você está se preocupando com o que o prato realmente é. Então, para isso, relaxe e divirta-se. Experimente e veja qual estilo funciona melhor para você. Sempre que você tiver suas três páginas completas e qualquer estilo em que você estava interessado, vá em frente e faça o upload para o projeto da classe. Você também pode mostrar algumas das etapas que você tomou para isso. Eu sempre acho que ver o processo sempre ajuda, e o que é ótimo com compartilhamento de habilidades é quando você vê o que todos estão fazendo, você tem uma idéia mais ampla das opções que estão lá fora para compartilhar. Compartilhe seu projeto e compartilhe seu processo. E, em seguida, nos projetos do curso abaixo, podemos ver seu trabalho e ver como seus projetos se parecem. Como sempre, divirta-se. 4. O que é um wireframe?: Tudo bem. Então, o que exatamente é por que você está armando? Você pode estar fazendo uma boa pergunta, e é por isso que estamos aqui. O enquadramento de arame é uma ferramenta incrível para o design. E para os Web designers, isso nos dá o tempo que precisamos para pensar em nossos pensamentos e descobrir nosso plano de ação , por assim dizer. Eu sei que há essa tentação que você sempre sabe, tem que ser essa cara apertada. Tem que ser essa cor que eu adoraria ter X, y e Z tudo isso empurrá-lo para o lado. Não estamos nos preocupando com os detalhes. Estamos preocupados com a funcionalidade disso. Então pense nisso como uma planta. Então, se você está construindo uma casa, as chances são que você não vai pular direto e dizer, esta é a bola. Esta é a outra parede ali. Vai ser uma assinatura rosa e amarela. Oh, vai ser lindo. Não se preocupe com os detalhes. Não se preocupe com a estrutura real de apenas vamos fazer com que pareça muito bem, não é assim que funciona. Você tem que ter as plantas para que você saiba como funcionar e mapear tudo. Qual é o seu tamanho? Qual é o seu conteúdo, etc. Então, em vez de se preocupar com a cor da tinta da casa, vamos nos preocupar com a base real e a subestrutura dela. Então este é o nosso sistema esquelético. Nós temos que construir sobre isso eventualmente. Mas esta é a primeira parte. Esta é a parte que lhe dará a coluna vertebral e a estrutura. Então, para isso, pense nisso como o que eu vou chamar carinhosamente é o esboço chique. Você pode começar com um par de miniaturas lee rabiscos só para começar suas idéias iniciais indo. Mas para entrar na estrutura de arame real no palco, você vai trabalhar com os detalhes básicos para que você possa construir a estrutura em torno disso . Então, sem cor, sem tipo. Vou dizer muito isso, então não se preocupe com os detalhes. Preocupe-se com a casca. Então, para isso, há algumas maneiras que você pode, claro, ir sobre este estilo analógico onde você apenas se sentar no drawl, não elaborado. Você pode fazê-lo o lo fi, que é Photoshopped ilustrador esboço ups e, bem, você pode ir Oi fi, que é um pouco mais chique para ilustrador e Photoshopped. É aqui que estamos lidando mais com colunas e grades e também. São ferramentas online para arame. Vou entrar em cada um desses em profundidade em suas próprias seções nos próximos capítulos . Mas agora pense no enquadramento do fio como aquele esboço o esboço inicial que vai permitir que você veja como tudo vai fluir? O que se conecta com o quê? Para onde você está indo? Como é que a vista vai ser manipulada através da casa do local? O seu fluxo? É fácil de usar? É óbvio um design intuitivo? Ou há soluços? Este é o estágio que você pode pré-trabalhar isso para que quando você realmente entrar na parte de codificação disso, esses soluços, na maior parte, já devem ser trabalhados. Então, em vez de ir ao código esboçado, talvez seja bom ter um passo entre lá, que é o quadro de arame. Então, para isso, vamos explorar uma variedade de opções e estilo de trabalho para que você possa encontrar o que é certo para você. 5. Tipos de frames: Vamos dar uma olhada nos diferentes tipos de opções de arame que você tem. Um deles vai se adequar ao seu melhor. E como sempre, se você fez minhas outras aulas, você sabe o que eu vou dizer a seguir. Como sempre experimentar, tentar cada um deles e descobrir qual deles realmente afundar o melhor para você e seu estilo de trabalho. O 1º 1 com o qual vamos lidar é o analógico para analógico. Você pode usar uma variedade de materiais para isso, e tudo isso vai ser mãos no estilo para que você possa ir com o papel clássico e lápis . Não fica muito mais simples do que isso. Eu sempre gosto de começar com algumas notas postar ou as notas pegajosas para que eu possa tipo de rearranjado e embaralhar as coisas ao redor. Quadros funcionam muito bem. Você também pode usar recortes de papel que tipo de semelhante às notas pegajosas. Algumas pessoas gostam de usar estênceis. Isto é mais para se você entrar no quadro de arame U. S. S. U X tão design móvel, etc. Embarque branco, que é, você sabe, como o chop boarding. Mas, você sabe, apenas colocá-lo lá em cima e você sabe, é um pouco mais interativo do que você pode trabalhar com sua equipe nisso. O Eso vai depender do seu estilo de trabalho, do papel e do lápis. Normalmente , vai ser você. Tão baixo, pegajoso observa a costeleta em direção às tábuas brancas, etc. Isso é provavelmente ser mais trabalho baseado em equipe após analógico, vamos lidar com baixo Fi em. Este é apenas um pouco, eu vou dizer versão mais sofisticada do analógico. Mas ainda estamos mantendo-o solto, áspero e um pouco gestual para isso. Ah, você pode usar o Illustrator. Você também pode usar a loja de fotos para isso. E se você ou sua empresa tem esboço, você pode usar esboço também para esta classe. Eu só vou ser ilustrador de demonstração e foto comprada para isso. Uh, se você está fazendo isso no tipo de ponto de vista mais lo fi, você não vai ficar atolado com grades sobre isso. Você está apenas organizando os elementos da página e vendo como eles funcionam. Quando entramos na alta, foi quando você começou a lidar com os apertos e agora é hora da multa alta enquanto você está armando. Quando entramos na alta, foi quando você começou a lidar com os apertos e agora é hora da multa alta enquanto você está Uh, este aqui. Você está indo, Teoh, lide com as grades. Você vai ter um sistema modular de coluna que você vai basear-lo fora de. Eu construí um modelo para você uma versão e Illustrator One vai estar na loja de fotos para que você quer experimentar o hi fi. A concha já existirá para você. Então o que vamos estar lidando com curso com oi, Fi. Eu só dei aqueles dois. Nós ainda vamos estar lidando com isso através de ilustrador e loja de fotos. Você também pode usar alguns mapas online para isso. Hum e eu vou demonstrar isso também. Em uma seção que vale a pena vir dessa maneira, você pode ver como você sabe que APS funciona para isso versus construí-lo e Photoshopped um ilustrador também. Isto pagou por software de arame por isso. Eu recomendaria se você estivesse realmente começando nisso. É quando você vai se comprometer com isso. Ah, um. Boa coisa que eu vou adicionar, um Adobe Creative Cloud acabou de lançar fora do beta, o x d, que é um eu vou chamá-lo mais de uma simulação em vez de um enquadramento de fio, porque você está lidando mais com os detalhes sobre Aquele. Mas se você já tem a nuvem criativa, não rastrear esse aplicativo para que você possa tipo de ver como você pode usar isso para simulações ásperas também. Mas para o oi fi, vamos lidar com um pouco mais de construção de grade e obter os elementos do lugar para fora, ficando atolados pelos detalhes, como tipos de cores, etc. Tudo bem, então quando você realmente arame quadro ou, você sabe, você sabe, quando você usa seus armações de arame? Uh, normalmente, se eu fosse passar por, você sabe, você sabe, o fluxo de trabalho. Sabe, você começaria com um esboço rápido e então você vai pensar que esse é o plano? Você está construindo uma casa, mas você tem que ter essa planta primeiro. Você não iria simplesmente saltar para a direita porque muitos eram paredes e combinam e tudo seria torto. Precisamos rodar para sabermos onde estão as portas nos rodapés, etc. Antes de construirmos antes de decidirmos, sabe se era uma casa antes de decidirmos qual é a cor, qual tapete? Então você sabe, como vamos pintar, mendigo? Você precisa descobrir, você sabe, você sabe, onde é que realmente vai ser qualquer saber, como o quadro esquelético está funcionando? algo Além disso, a ter em mente é apenas ter uma boa comunicação de equipe. Se você está trabalhando em uma equipe, hum, se todos virem o projeto, você sabe que você pode reorganizar peças, você pode descobrir o que vai para onde, e ainda está naquele estágio flexível. Uma vez que você entrar no estágio de código, você vai ficar um pouco mais trancado. Então, se você não está trabalhando sozinho, sabe, se você está trabalhando sozinho, é só você e seu cliente estão no palco. Você não precisa se preocupar tanto com comunicação com uma equipe. Ainda há uma equipe no entanto, mas com uma equipe de casal de pessoas, você sabe que este estágio é um super útil porque ele recebe todos na mesma página e lembre-se todas as coisas e comunicação de design vai ser fundamental 6. Métodos de trabalho de wireframe: como acontece com todas as coisas e design, precisamos descobrir qual sistema funciona melhor para você, que vai ser aquele que é o mais eficiente em tempo e aquele que vai lhe dar os melhores resultados. Então o que precisamos fazer é descobrir qual sistema funciona melhor e experimentar para que possamos descobrir isso. O mais básico seria começar com um esboço simples. Acabe com a tua ideia. Você pode pensar nisso como uma aula de desenho. Seria considerado o desenho gestual. A partir daí, você poderia ir em frente e saltar para o código. Esta seria a versão mais simples e direta da geração de ideias para o seu trabalho . Esse passo seria começar com o enquadramento de arame real, se e alta definição para baixa definição, e então começar a lavar em alguns desses elementos visuais apenas para dar um pouco mais consistência. O que são as imagens? Se o texto, quais são os cabeçalhos? Uma vez que você tenha descoberto isso, então você pode ir em frente e saltar para a parte de codificação do seu projeto. Tudo bem, para a nossa terceira versão, você adivinhou. Vamos começar com aquele esboço. Talvez também adicionar alguma lista a esta lista. Fazer poderia ser uma ótima maneira de ter geração de ideias para seus projetos. Depois disso, suba no reboque. Armação de arame, alta definição Baixa. Def. De qualquer forma , o que funciona melhor para você e, em seguida, adicione alguns desses elementos visuais. Quais são as imagens? Quais são as partes de texto para o seu site? Uma vez que você tem que descartado um pouco, você adivinhou. Você pode entrar e começar o código. Eu só queria tocar brevemente sobre os elementos visuais que o ar, os detalhes que vão entrar em jogo assim que começarmos a nos envolver um pouco mais em nosso processo. Um desses detalhes que precisamos prestar especial atenção quando chegamos ao estágio orientado para detalhes é a tipografia do site. O que você vai usar para o cabeçalho? O que vai usar para o corpo, etc? Você tem alguma fonte da Web que você precisa rastrear? Como é que isto volta à marca? Estes pequenos detalhes vão entrar em jogo depois que o enquadramento do seu fio é terminado , bem não ficar atolado para baixo pela cor. A cor virá depois da moldura do fio também. Você vai usar um gerador de esquema de cores para isso? Eles já têm uma identidade de cor de marca preexistente à qual já associam sua marca? E com que tipo de imagens você vai estar lidando para o seu site ou eles vão ser maiores? Eles vão mais ao quadrado em uma espécie de estilo blawg? Você sabe? Eles ligam ao artigo ou são conhecidos ligados a outras fontes? Estes ar, os detalhes que você tem que pensar quando se trata das imagens? Talvez parte das imagens seja que você vai ter que lidar com a criação de todos os seus botões e rádios e todos os bits e bobs que vai para isso. Vou colocar isso na bela pilha de etcetera, sabe? Vai ter vídeo? Você tem links de mídia social, etc? Os contatos, as assinaturas. Isso vai entrar naquele pequeno, você sabe, pote de miscelany. Eu Então, os detalhes que você vai estar se preocupando, mas não se preocupe com o tipo de detalhe finito deles, porque com arame, você está apenas procurando os ossos nuos. Você está procurando o esqueleto. Depois de passar por esse estágio, então você pode começar a ficar exigente com seu design. 7. Considerações de design do site: antes de começarmos em qualquer projeto de design, temos algumas considerações que precisamos prestar atenção antes de entrarmos. O que você precisa pensar é em quem o quê? Por que e como de seu projeto de design. O primeiro 1 quem é o seu público-alvo? Quem virá a esse site e quem é o foco? A próxima área para se concentrar é o quê? Qual é o objetivo do site e o que você vai fazer para realizar essa tarefa? O porquê é um elemento na página que não estamos projetando aleatoriamente e não estamos despejando elementos para baixo apenas para risos. Por quê? Por que está na página? Por que você ancorando o ar naquele lugar? Que propósito está servindo? Nós entregamos com sua decisão, esta seção permite que você descubra essa parte . E por último, mas não menos importante, como estão todos os elementos em sua página e em seu site? Unificada. Como você vai amarrar tudo juntos? Como você vai usar esses elementos e princípios? Qual é o objetivo final da unidade? Este é o momento de dissecar esta parte e descobrir como você vai realmente fazer essa tarefa 8. Considerações de elementos: uma vez que você tem o quem, o quê, o porquê e como descobriu. Agora é hora de cavar ainda mais fundo. Então, quais são as considerações sobre o site que você precisa pensar primeiro? Qual é a sua navegação? Qual é o seu cabeçalho? Qual é o seu rodapé? Qual será o conteúdo real na página? De onde está vindo? E que prazos você precisa definir para essas imagens? Você está fornecendo as imagens? Seu cliente está fornecendo as imagens? Você vai ter uma barra lateral? Uma busca? Longe. E os elementos interativos? Então, sempre que você estiver quebrando isso para o seu enquadramento de arame, mantenha essas partes em mente também e pense sobre onde eles estarão? Como eles vão se conectar uns aos outros e como eles vão ser unificados em todo o site? Então, se você tivesse certeza de quais elementos você precisava lidar primeiro, esta é uma boa lista de iniciantes para você. Para aqueles de vocês que são novos para Web design usado, estes é um cara para descobrir qual parte fazer você precisa para criar todo o seu 9. Lo de fio (de a de te a somar): Tudo bem. Hora de começar a usar esta seção. Vamos lidar com o que eu chamo de analógico. Então o papel, o poste, ele observa os marcadores. Tudo o que você tem mãos em que você pode usar, você pode usar os quadros e você pode usar as tábuas brancas. Além disso, se forem eles, você está disponível para a minha demo. Vou lidar com o jornal porque está bem aqui na nossa frente. Certo, então vamos pegar meu marcador de Sharpie para que seja mais fácil de ver. Mas você pode ficar com seus lápis. Você pode ter marcadores de tópico, os marcadores de sinalização. Qualquer coisa que deixe uma marca vai fazer o trabalho. Então, tipicamente, qualquer coisa que gira ao redor do mundo, desenhar tende a assustar as pessoas. Então o que precisamos fazer é tirar algum desse tipo de mito. Quando você está fazendo um esboço, seus esboços não se baseiam no conceito de perfeição. O que você vai estar trabalhando é apenas lidar com isso de ter a idéia daqui para cá. Portanto, não se preocupe em ter tudo perfeito e alinhado. Lembra-te, é por isso que estás a incriminar. Só estamos tirando as ideias para ver se elas vão fluir e se vão funcionar. Então, para o primeiro 1 em desenho, você pode fazer o que é chamado de esboço de gesto. Então desenhar gestos é apenas, você sabe, você não está se preocupando necessariamente sobre tudo ser bom, limpo e perfeito. Você está se preocupando em deixar a idéia para baixo e apenas capturar aquele momento difícil no tempo. Então, se estas são nossas três páginas, isso seria dizer, por exemplo, a página inicial que eles fizeram sobre no contato. Então vamos começar com o que eu carinhosamente me referirei como os três Basics. Então, se para o seu projeto de classe quando estamos fazendo nossas três páginas e então você não tem certeza em quais trabalhar, faça a casa sobre em contato porque eles são praticamente padrão e estável em qualquer página inicial da Web. Este é o que eles vão ver primeiro, que vai ser o único imediatamente. Então, para o nosso, neste caso , estilo gestual, talvez eu tenha meu cabeçalho no topo, e eu vou ter as histórias de rolagem aqui. Talvez uma foto e outra história, e haveria uma barra de rolagem e então teríamos talvez links de mídia social aqui vídeos . Ou vamos colocar um vídeo aqui porque estamos anunciando algo ou o que você tem? E isso é muito bom, porque você está tipo, OK, eu sei onde você sabe. Estou pensando que isso precisa ir em que, você sabe, você sabe, talvez nosso cardápio. Talvez coloquemos nosso menu embaixo da barra de cabeçalho. E assim, para a nossa página sobre, sabemos que temos essa parte que precisa traduzir para baixo para ela. Então, nosso cabeçalho de imagem e, em seguida, nosso menu. Ok, então para o sobre, nós meio que ganhamos eco o mesmo tipo de postura porque nós queríamos parecer que é unificado eso para isso. Vou ter a mensagem a contar a história da cerca. E talvez esta seja uma foto. Aqui está uma bela foto. E talvez esta seja uma imagem de seus produtos, seja lá o que for. Então não estou a ser exacta. Não estou a ser, sabes, deliberado com a minha marca. Só estou a começar a ideia para poder ver, sabes. Ok, talvez eu não esteja gostando de como essas fotos funcionam no ar. Você sabe o que? Se, em vez disso, eu virar ou eu fizer esta parte dois coluna. Então é um pouco mais fácil de ler. Dá-lhe a oportunidade de vê-lo e começar a trabalhar em torno dele. E você começa para a página de contato. Ali está a nossa grande bandeira, e o nosso menu. E, em seguida, para a página de contato provavelmente terá uma manchete. Um aqui. Estamos tipo, estamos felizes em ajudá-lo. E então teremos nossos campos de entrada. Então, nome, endereço, você sabe, cheque. Sim. Se você quiser se inscrever em um botão de envio e, em seguida, talvez para isso eu vou apenas deixá-lo em branco, porque nós queremos ver um pouco do branco, a página, então não é muito esmagador com o design que você vai notar imediatamente. Há uma coisa que não me preocupo. Não estou preocupado com a cor. Eu não me importo com o que está acontecendo lá ainda. Ainda não estamos nessa fase. Não me preocupo com os detalhes. Tipo, como esse cabeçalho realmente se parece? O que fazem os meus botões “Não “, Aviadores. Você realmente parece e eu não estou preocupado com minhas fontes. Não vamos fazer os detalhes. Estávamos pensando sobre isso em uma estrutura esquelética rápida . Ponto de vista. Certo, então este é o nosso estilo gestual vai jogá-lo para o lado. E se você quiser ser um pouco mais preciso, você pode pegar nosso amigo a régua. Agora, eu também tenho papéis de rastreamento e comprimidos de desenho. Eu realmente gosto do trabalho do dedo do pé no papel de rastreamento também, porque ele vai lhe dar a capacidade de fazer camadas em cima dele. Então, se você quiser tentar o papel de rastreamento, isso também é muito bom, e é útil. Certo, então para a próxima parte, vamos ser um pouco mais precisos. Então isso será para aqueles de vocês que vocês conhecem, como um pouco mais de estilo exigente forno quando vocês trabalham. E eu só vou Teoh, fazer uma caixa, vai servir como minha página. Eu vou apenas um em cada página, então eu vou dificar uma pequena marca agradável para que eu basicamente poderia obter o meu framework o mesmo, que seria o mesmo em todos eles, e eu vou apenas didio talvez um centímetro acima. Então, assim eu tenho uniformidade. Então, para este, eu só vou demo com um, mas será o mesmo para todas as três páginas. Então, sempre que tiveres esta concha, monta um reino. Fotocopiá-lo se você quiser ou construir a caixa na loja de fotos são ilustrados e apenas imprimi-los . E basta usá-lo como um guia de ID de modelo que isso funciona muito bem também. Então construa essas linhas para a caixa. E para isso nós vamos ficar um pouco mais, você sabe, você sabe, exigente versus você sabe, apenas o estilo áspero à mão livre do gesto. Este aqui, vamos ser mais uma espécie de desenhista, como com o nosso estilo de trabalho. Tudo bem, dirigindo isto. Tudo bem. Então agora temos nosso show, e isso vai tocar esta página inicial direita para que eu possa manter o controle de você sabe, onde eu estou com isso. Faça por quantas, muitas páginas que você está procurando com ele. Eu vou ficar com os mesmos conceitos que você pode vê-lo neste, você sabe, você sabe, diferentes estilos de trabalho. Mas para este, vamos fazer isso. Vamos ter o cabeçalho da imagem no topo de algum tipo. Então vamos em frente e construir isso. Então eu vou para o meu, e eu acho que eu vou como meia polegada. Desculpe trimestre Greenwich e, em seguida, 3/4 por polegada apenas para manter uma boa proporção e novamente ecoar com o que estávamos fazendo lá. E eu só vou para este, ter arco lado a lado. Então vai preencher a página sempre que eu estou indo para fazer o meu trabalho de design. Agora, sempre que eu estou dizendo espaço de chapeleiro, então qualquer que seja o meu banner ou o que está acontecendo aqui em cima como o nome da página inicial ou o nome do site, o que você tem? Hum, ele não necessariamente tem que ocupar tudo isso graficamente. Só vai viver neste contentor. Este é o espaço em que está fazendo sua casa para isso. Queremos mostrar que esta é uma imagem de algum tipo. Então precisamos fazer um “X”. O X está aparecendo e você vai notar. Este também é um ilustrador e no design, sempre que estávamos trabalhando com uma caixa de imagem, ele tem este X através dele, ele está mostrando que o recipiente está segurando algo, e que algo está, neste caso, uma imagem. Tudo bem, então do nosso outro, então tivemos nosso menu, e eu vou fazer uma fila para isso também. Agora, isso deve ser suficiente. E então o menu, é claro, permaneceria consistente ao longo de cada uma de nossas páginas. E você sabe, você pode sombrear esta parte se você quiser, porque ele fica bem perto disso. Ou você pode fazer o seu ex. Algumas pessoas aqui vão mudar as cores. É por isso que eu tenho os copticos fora. Além disso, isso vai depender de você. Você pode, você sabe, talvez navegações ar vai ser de uma cor. Imagens vão ser outra e Texas outra, então vai depender de qual sistema você está trabalhando. Eu só vou preenchê-lo, já que o tempo é uma espécie de essência aqui. Mas, novamente, depende do seu estilo de trabalho. Certo, então sabemos que isso vai estar no menu e no outro. O que tínhamos era a nossa manchete e vou usar o canto da minha régua para esta parte. Muito bem, aqui está a nossa manchete. Um sobre isso é talvez isso vai ser uma página blawg. Então, para o nosso blawg, você sabe, nós queremos que nossos artigos sejam o líder em nossa página para nossos espectadores, para o público, para os leitores. Então, para isso pode ser fora este tipo tem o meu um, porque para o nosso mais alto sabemos H um é o mais alto. Ele precisamos de um escolher o próximo. Então por diante e assim por diante eso dessa forma eu sei para esse espaço que vai ser qualquer que seja a manchete, e então nós vamos ter nosso artigo real. Então vamos em frente e rascunho isso aqui. Tudo bem, vá em frente e lembre-se que este ia ser o nosso tipo de rolagem. Então eu só vou Teoh fazer parecer que está sangrando fora do que seria considerado a dobra da página web A dobra que significa como um jornal onde você vira-lo. Mas neste caso, o primeiro percorrer. Então, a segunda rolagem através de levar para o resto. E eu vou dar a mão livre isso por tempo, e esta seria a nossa barra de rolagem. Lá vamos nós. Então, para texto, você tem um par de opções diferentes com isso, você pode dio outro ficou aqui abaixo as linhas de rabiscos como você veria em quadrinhos para desenhos animados de modo que parece que ele está implicando a linha para você pode apenas fazer linhas retas para implicar que o texto estaria lá. E acho que decidimos tentar a coluna duas para esta. Então nosso contêiner vai ter duas colunas de texto. Então, para o meu, eu só vou fazer a reta e repetir. Um. A Segunda Coluna. Não nos preocupamos com os detalhes. Sabemos sobre a cor. Não estamos preocupados com o tipo, mas queremos ver como isso vai fluir? E então eu vou colocar no dinheiro de uma imagem que tínhamos acontecendo. Tínhamos um vídeo aqui, então vamos em frente e aproximar isso. E você pode usar papel ralado para isso. Além disso, isso funciona muito bem para isso. Assim você pode deixar tudo o que sabe um pouco mais correto do que o que eu estou mais envolvido com isso. Esta parte, esta parte do jogo e como antes, com o que está acontecendo de nossa imagem Header, nós vamos fazer o X para que o X vai mostrar imagem ou posicionamento de vídeo. O que você tem então para este, se estamos fazendo uma caixa que tem uma foto de algum tipo nela. É a caixa e você faz seu ex se é texto rabiscando alinhado ou apenas linhas retas. Então, para isso, você sabe, marcadores, papel, papel, qualquer coisa com que você se sinta confortável. Eu até tenho das minhas almofadas de notas amarelas favoritas que eu gosto de trabalhar com também, modo que sempre que eu estou trabalhando, então vamos dizer que eu vou apenas gestalizar esta outra vez. Mesmas prateleiras. Aí está o nosso cabeçalho. Aí está o nosso cardápio, e eu vou rabiscar isso porque eu não vou tomar tempo para esta demo fazer todo o detalhe. Muito Então, há o nosso vídeo ou manchete um e, em seguida, o nosso artigo real com as nossas duas colunas de texto. Então, o que é bom quando você está trabalhando como um caderno de esboços ou um bloco de notas? Então você pode começar a fazer anotações como Ok, então talvez a Unidade Um vai ser um vídeo no YouTube sobre isso vai ser o Blawg. Blawg publica artigos, e eles vão ser cronológicos, etc. Então você pode cronológica. Desculpe, cronológico. Lá vamos nós. Então podemos começar a fazer anotações sobre ele e construí-lo para o próximo tipo de camada de detalhe. Então nós temos a concha e então podemos começar a rastrear você sabe o que estamos pensando . Então podemos começar a dizer “Ok, talvez para o fundo, você sabe, eles querem o cliente quer o número de código hexadecimal do cliente. Seja o que for para isso, para a cor no fundo. Isto dá-lhe uma maneira de começar a preencher os detalhes em torno dele sem chegar ao fundo nos detalhes do esboço. E então todo mundo pode ver isso se você estiver trabalhando em uma equipe e adicionar seus bits e bobs a ele. Além disso, outro sistema que é bom para trabalhar é postar notas. Então, estão furando. Notas são muito legais para isso também, porque você pode dividi-lo nos sistemas que você está procurando. Tudo bem, então temos uma página inicial agora, basta colocar a página lá para que possamos ver e depois o quê? Precisamos ir ao menu da página inicial. E, em seguida, quaisquer itens estão no menu e apenas, você sabe, sobre artigos de contato, baby, um portfólio links, eu não sei. Seja qual for. Seja lá o que for que o seu projeto vai implicar. Você pode escrever isso em seu post Nota. Além disso, vamos abaixar um pouco para que eles não se sobreponham. Manchete um. Então isso seria para o artigo principal. O que? E então você pode começar a entrar em detalhes como, Quais são os artigos que seu cliente está procurando? Novo? Eu não consigo nem pensar em nenhum off-hand como códigos de cupom de compras de férias, etc. Coloque o próximo post anote o vídeo do YouTube de que estamos falando, e este poderia ter sido o único vídeo de introdução para que você não soubesse exatamente qual é , e isso vai ficar ao lado daqui. Agora, quando eu estou trabalhando com Post ele observa, eu tendem a gostar do trabalho do dedo do pé em uma parede para que eu possa tipo de colocar tudo para fora e ter reorganizar as partes móveis de ervas com isso sobre. E então também alguém é como Bem, você sabe, eu gosto do vídeo do YouTube, mas o que eu acho que precisa acontecer é que ele precisa ir aqui, e o artigo vai ser do outro lado para que você possa embaralhar as coisas e talvez fazer um esboço solto depois. Uma vez que você tenha todas as partes móveis planejadas como um grupo. Supostas notas são incríveis com grupos. Sempre tenho pilhas de notas postadas nas minhas salas de aula. E então sempre que chegarmos a este estágio, basta pegar um pote inteiro deles e ir para a cidade e gostar e ajudá-lo a descobrir quais partes você precisa. Quantos artigos, Onde eles vão ser posicionados? O que vai na página do portfólio? Quais imagens você precisa tirar ou você já tem? Então ele ajuda você a organizar postado que o sistema é realmente bom, porque então a equipe pode trabalhar em conjunto, e então você pode ver tudo colocado para fora na frente de você e reorganizar conforme necessário, então este provavelmente virá primeiro. Isso é mais do que eu vou dizer, essa idéia gerando fase de quais partes nós realmente precisamos e então você pode entrar e apenas trabalhar em parte esboço dele. Então, se você estiver usando o quadro-negro ou o método do quadro branco, vai depender de qual você sabe que você está pronto na minha casa, no meu escritório, eu tenho uma das paredes pintadas com a pintura do quadro-negro e sempre que eu estou trabalhando, eu posso apenas sentar e escrever ou desenhar o que é que eu preciso e, em seguida, apagá-lo quando esses projetos feitos e, em seguida, no trabalho na sala de aula, eu tenho o quadro branco e o quadro-negro. Assim, os alunos, dependendo de qual deles eles estão mais confortáveis, eles podem usar qualquer um deles. E muitos dos nossos projetos são orientados para o web design. Então isso é muito mais fácil quando eles estão trabalhando em equipes. Então o que eu vou recomendar é, como sempre, qual deles você acha que vai gostar mais? Qual deles você tem as ferramentas que você já conhece, para experimentar. Então comece por aí. Então, se você se sentir confortável com esboços, vá em frente e esboçar. Se você não tem nenhuma curiosidade sobre o que o quadro branco é como e você quer tentar listar e desenhar em sua tentativa que também, não importa o que você faça, o que eu vou recomendar, tirar fotos de qualquer é que você está trabalhando e compartilhando em nossos projetos de classe abaixo, para que possamos ver o que você experimentou. E você também pode nos dizer qual você acha que funciona melhor e qual você acha que pode avançar no futuro para seus projetos. Então, como sempre, compartilhe para que possamos ver o que está acontecendo. E então, dessa forma, você pode explorar todos os métodos de enquadramento de fio analógico para que você possa descobrir qual deles funciona melhor para você e sua eficiência de trabalho. 10. Hi de de Fi com o Illustrator e Photoshop: Tudo bem. Agora é hora de explorar as opções de enquadramento de fios do site de alta definição. E para isso, vamos aparecer no ilustrador, e também vamos conferir a loja de fotos. E para isso, eu fiz modelos para vocês, e eles vão estar na nossa área de projeto de classe. Então, se você quiser usar um shell pré-existente, um estará pronto para você. Tudo bem? Então, alta definição vai ser um pouco mais envolvido do que nossa baixa definição, onde estamos tentando apenas obter o básico, você sabe, descobrir. Mas vamos usar nossas colunas e usar mais de um sistema de organização para isso, assim como nosso tempo analógico. Vou usar o mesmo conceito que estávamos fazendo lá. Então isso não é reescrever no volante. Tudo bem, então, para o meu, estávamos começando com o nosso cabeçalho. Se este é o site, digaum banner. Se este é o site, diga Este é o espaço onde a informação principal para o seu site está realmente indo para ir agora para isso , o que eu vou recomendar é obter um sistema Ah, muito cedo. Semelhante ao nosso analógico. Então, um analógico, falamos sobre nossos marcadores. Então talvez uma cor fosse ser, você sabe, manchetes representativos. Um ia ser o tipo um ia ser caixas de imagem, etc. Então você tinha algum tipo de sistema para ele. A mesma coisa aqui, sabe, qual seria o seu sistema? Talvez neste caso, eu não quero um esboço. Talvez neste caso, Eu só quero ser capaz de ver a cor da caixa. E então talvez minhas caixas, uh, talvez eu faça cabelo escuro grisalho como um cinza médio. E então essas seriam as minhas caixas de imagem. E então meu tipo será outro. Então eu vou dizer que esta cor vai ser a nossa imagem. Eu vou voltar para a minha seleção regular e como nós tivemos. Waas Nós tivemos o nosso menu por baixo, então eu vou apenas copiar, e eu vou colá-lo. Tudo bem, Transforma Livre. Vou acertar minha letra E. E dessa forma, eu poderia entender, a escala um pouco mais em proporção a isso e, novamente, você sabe, isso vai ser um bar? As cruzes sagradas foram embora? Está certo? Sabe, talvez seu naff quando estiver fazendo isso vai ser deixado agora, um, um, então se esse for o caso, aqui é onde estamos brincando com ele, vendo o que parece bom, o que é bom, talvez seu naff quando estiver fazendo isso vai ser deixado agora, um, então se esse for o caso, aqui é onde estamos brincando com ele, vendo o que parece bom,o que é bom, se sente bem na página para nós e para o nosso design. Tomamos muito café e colamos uma imagem aqui, então vamos em frente e colocamos isso em seu lugar e tivemos outra embaixo dela. Só vou deixar aquele pouquinho passar por baixo. Então, não vou me preocupar com esse pequeno detalhe, já que está passando por cima só um pouquinho . Então não se preocupe com isso. Certo, então há nossas imagens, e se quisermos desligar nossos caras para que possamos ver o que está acontecendo, isso é o que temos. Temos nossas caixas de imagem no lugar. Agora precisamos começar a pensar no nosso tipo. Então eu vou usar a mesma quantidade de espaço para a maior parte aqui, e este vai ser para o nosso tipo, deslizá-lo para baixo apenas um pouco para que eles estejam em alinhamento. Se você quiser ficar um pouco exigente aqui, você pode. Vai ser com você. Tudo bem. E então para isso não queremos que seja da mesma cor, porque isso vai ficar muito confuso. Então, talvez para o meu tipo, eu vou ter um pouco de isqueiro. Cinza. Muito bem, então este vai ser o meu “H”. Então o H, como sabemos, vai ser a forma mais alta de nossa hierarquia, tamanho sábio, tamanho sábio, e então nosso artigo ou subcabeçalho vai para lá e, em seguida, nosso artigo, e então nós apenas continuar construindo Daqui. Então essa é a imagem que estava indo para o nosso YouTube, então eu não vou realmente conectá-la a essa linha de grade. Mas, em seguida, o próximo artigo que tínhamos estaria vindo por baixo aqui, e então nós tínhamos outro artigo sob ele. E a coisa boa com a loja de fotos e ilustrador é que você pode, você sabe, construir seus conceitos muito rapidamente com esses eso que você sabe para onde eles estão indo, imediatamente. Diminua o zoom só um pouco. Então, provavelmente ele agora é que estamos trabalhando em certo sentido, bem contra o limite. Talvez eu não queira isso então eu vou selecionar todos esses, e eu vou empurrá-los para cima. E também, eu queria ter espaço para nossa barra de rolagem, e isso parece melhor logo. Então esta é a nossa hora de brincar. O que espacialmente parece bom. Como está a vista? Vamos ficar flutuando, sabe, sabe, qual é o fluxo para o espectador? O que vai tornar mais fácil para eles navegarem? Certo, por isso, vou esconder o guia de novo para vermos o que está acontecendo. Nós temos algum tipo de espaço estranho lá no meio. Então o que eu faria é passar um limite mais tempo mexendo entre, você sabe, talvez em vez disso, eu gostaria de ter que subir, ou este seria subdividido. E talvez isto seja uma imagem. Mas aqui vai ser uma transmissão ao vivo dos nossos instagrams. E assim as pessoas podem ver o que nosso mais novo post waas. Hum, então isso vai ajudar que a estrutura logo fora do bastão já parece melhor. Então, com grades, este é o básico. O que? Direi de qualquer projeto com grade. Então, neste caso, as colunas, mas é uma grade como sistema. Está nos dando esse senso de ordem, e através disso podemos realmente dialogar a dança na página e ver o que parece bom estruturalmente para nós e para nossos espectadores. Então isso nos dá aquele tempo de jogo que normalmente precisamos para descobrir o que está acontecendo. E como podemos fazer disso um site que é realmente bom e utilizável para quem quer que venha visitar o nosso ilustrador se você vai fazer a morte alta ou loja de fotos, estamos olhando para três páginas. Então este era um representante da nossa página inicial e eu iria em frente. E como eu disse, que o contato e sobre os padrões, se você não tem certeza de quais construir de você nem tem que ter cabeçalho até aqui . Apenas brinque e veja quais espaços funcionam melhor para você e para o site que você tem em mente. Este é um design muito simplista. Você pode enlouquecer com este aqui, então brinque com o ilustrador Um, se você quiser, você pode entrar, e talvez em uma nomenclatura de casal seja para ele. Para que saibamos que esta é a manchete. Talvez pudéssemos ter um que diga, você sabe o artigo, e eu vou apenas duplicar isso. Não duplicou o errado. , E assim, você sabe, você sabe, se você estiver olhando para frente mais tarde, especialmente quando tivemos as mudanças aqui. Então este era agora o nosso feed do Instagram. Hum o quê? Sim, acho que vou mudar isso. Vou manter isso como o cinza mais escuro desde para alimentar. E talvez sejam anúncios ou algo assim. Então vamos colocar anúncios aqui e a primeira introdução do YouTube. Assim, podemos lembrar onde estávamos com tudo. Você também, no verdadeiro e no nosso menu. Então, para a alta definição, você pode obter um pouco mais lee rótulo e estrutura orientada, mas as caixas vão nos dar uma espécie de pré-forma para começar. Torna um pouco mais fácil para este s o brincar com ele e ver o que funciona para você. E eu também vou aparecer brevemente e mostrar a vocês o que isso parece e ainda mais comprar . Antes de entrarmos na loja Feder, embora eu quisesse mostrar-lhe alguns exemplos de alguns projetos estudantis s O que você poderia ter uma idéia de onde isso poderia levar para seus próprios projetos. Cada um desses que eu vou mostrar que terminamos em um de nossos métodos. Este primeiro 1 foi realmente vai ser feito em que ostenta Tomic, que nós vamos chegar com a nossa seção online. Uh, este aqui tem um tipo mais de desenhista de rabiscos como aparência para ele. Este também foi feito on-line usando ferramentas de enquadramento de fio on-line para que você possa ver que você pode obter uma grande variedade com o resultado real e saída. Com isso, vai depender do seu estilo de trabalho. Então, como de costume, certifique-se de experimentar e ver qual deles você mais gosta para este. Estávamos trabalhando no Illustrator. Então você pode ver, você sabe, este aqui tem os companheiros texanos. Vamos mostrar-te como fazer isso a seguir, por isso dá-te uma ideia do que pode parecer quando tiver alguma coisa na página. E isso é para este. Este foi feito em lojas de fotos que isso vai nos Segway em nossa demo novamente. Está usando o texto de preenchimento. Temos as nossas caixas, este estudante, mas os ex nelas em vez de usar, uh, as grandes caixas para que você possa ver que há uma variedade de maneiras de fazer isso. Experimentos ver qual deles funciona melhor para você. Você foi, sabe, caixas codificadas por cores. Deseja usar preenchimento, texto e imagens para ser o excesso? Descubra qual deles funciona melhor para você. Então agora vamos começar a receber texto de preenchimento e ver o que podemos fazer em uma loja de fotos. Tudo bem, então agora vamos fazer outra versão do Ah, oi fi. Técnica de arame. Com esse tempo, vamos a uma loja de fotos. Mas primeiro eu quero pegar um pouco aprender ipsum texto. Então, para isso, vá em frente. Digite Lauren Epsom e na primeira busca, você provavelmente vai ter a mesma coisa surgir. Você quer os lábios do gerador, vá em frente e clique sobre isso, e rolar para baixo apenas um pouco. Vendo ensino de C diz quantos parágrafos você quer ou palavras ou mordidas ou listas, e você quer que comece com a Lauren. É, hum então eu vou dizer que dois parágrafos devem ser suficientes e, em seguida, ir em frente, gerar e, em seguida, selecioná-lo e copiá-lo dessa forma. Está no seu quadro de arte para sempre que eu sinto muito, não no seu quadro de arte sua prancheta para quando você estiver pronto para usá-lo. Certo, agora estamos prontos para entrar na loja de fotos, como um ilustrador. Eu já tenho um modelo configurado para você. Este é 1200 por milhares. É apenas um tamanho ligeiramente diferente. Dessa forma, você tem diferentes opções para trabalhar, que você também possa ver como seu design funciona em diferentes escalas, certo? Então vai ser basicamente a mesma coisa. Eu vou usar o mesmo estilo que estávamos fazendo em, hum, versão analógica. Então vamos em frente e construir uma simulação aqui em cima. Vamos precisar de construtores moldados. Então eu vou pegar minha ferramenta de retângulo e ir em frente, e este vai ser aquele espaço para o qual, hum, nós vamos ocupar para o nosso nome do site, ou vai ser, você sabe, uma imagem vai ser centrada. Será que vai ser deixado? Está certo? Não temos certeza. Mas este é o recipiente em que ele está indo para o pé ao vivo. Vou dar o dedo do pé. Mude também a cor. Vamos com talvez um azul escuro e isso vai ser representativo de, você sabe, qualquer imagem que vamos usar vai ser tão azul. Tudo bem, nós também vamos precisar do nosso menu, e nós temos isso sentado bem sob onde o nome do nosso site vai estar. E então, dessa forma, é consistente em todos eles. E lembre-se de fazer nossas três páginas para um projeto, praticamente a navegação e o nome do site no topo manterão uma posição estável porque queremos ter unidade dentro do nosso design. Ok, então a partir daí, o que nós vamos precisar para dialogar é descobrir onde eu acho que nós temos nosso YouTube, então vamos colocar nosso vídeo no YouTube. Talvez ele vá viver aqui, e eu só vou mudar para a minha seleção regular e eu vou segurar e quero um Mac. Vou usar a minha chave de opção. Ah, isso pode ser um feed para, um Instagram. Assim poderíamos ter nossas mídias sociais aqui também. Daqui , vamos em frente. Volte para a nossa ferramenta de retângulo. Uh, talvez para este, eu vou separá-lo apenas um bocadinho. Nós temos muito espaço. Então eu acho que para este, o que nós vamos difundir é a nossa manchete, e eu vou mudar a cor. Então o azul ia ser nossas imagens. E vamos torná-lo um azul claro para texto dessa forma, é meio semelhante, mas um pouco diferente também. Hum, então dessa forma, você sabe, nossas manchetes vão ter uma boa consistência através dele e você será capaz de dizer a diferença entre os dois vão manter pressionada a tecla de opção porque este ar vai ser lado a lado lendo artigos e vamos em frente e fazer a caixa para o nosso texto. Então é aí que o contêiner para o nosso texto vai duplicá-lo sobre Beautiful. Então estamos colocando nossos artigos nele. Talvez aqui em baixo, eu não vou passar por tudo isso, mas talvez lá embaixo nós vamos continuar indo e descobrir, você sabe, como, porque eles vão ser mais Talvez aqui em baixo, eu não vou passar por tudo isso, mas talvez lá embaixo nós vamos continuar indo e descobrir, você sabe, como, Artigos, fotos, sabe? É apenas uma página espalhada ou vamos continuar rolando. Estas são todas as coisas em que você vai estar pensando quando você está no processo de design . Tudo bem, então nós tivemos nosso texto de preenchimento, então vamos em frente. Vou pegar minhas ferramentas de tipo. Eu vou fazer uma nova camada no topo, então eu não vou em nada disso, e ele vai fazer uma caixa de texto, e eu vou colocar meu texto Lauren ipsum lá para que possamos ver tipo de como ele se parece uma vez que o texto é na verdade lá e eu só vou duplicá-lo e fiz este também, uh, uh, quando eu rolar para trás através de minhas camadas e eu desliguei nossos guias e eu vou apenas fazer uma caixa simples em cima disso. Dessa forma, seremos capazes de vê-lo. Então vamos fazer um recheio de branco. Tudo bem, lá vamos nós. Dessa forma, podemos ter uma noção de onde está indo agora. Nós temos um pouco de espaço estranho aqui, então eu não estou gostando disso, então eu não quero descobrir isso. As caixas de texto em si estão parecendo realmente bastante decente. Então, usando apenas suas formas e despejando em algum texto de preenchimento, você está tendo uma idéia do que este site poderia sentir para quem está visitando. Eso Se você estiver confortável com a loja de fotos, tente aversão e loja de fotos, se quiser. Illustrator, vá em frente e crie uma versão e ilustrador como de costume, vá em frente e salve seus arquivos e carregue esses pegs J para nosso projeto de classe para que possamos ver que você está trabalhando. 11. Opções em que o wireframe: bem como nossas opções de loja de fotos e ilustrador. Existem alguns sites gratuitos que permitirão que você faça simulações lá. Além disso, eu só vou passar por alguns deles para que você possa vê-los. E então, se quiser, tente a montagem. Veja qual funciona melhor para você novamente. Este ar, o congelamento ou as demos grátis. Alguns deles terão custos, mas os que vou mostrar não têm custos. O 1º 1 do show é o fluxo simulado. Este está no plano básico. Portanto, há, é claro, algumas limitações a ele. Mas se quisesses, podias ter puxado a mão. Estou usando teias. Veja, os bootstraps, maçãs, APS, etc, ou apenas espaços em branco podem depender das necessidades que você tem. Hum, se você quiser, apenas vá em frente e comece em um e apenas faça um teste para que sempre que você aparecer nele, nós podemos ver o que acontece. Não, na maior parte, todos estes são intuitivos . Então o que você vê é o que você ganha com isso. Então, como sempre, eu recomendaria brincar com ele e ver, você sabe, como isso funcionaria para você e fazer o seu fio enquadrando iria salvá-lo, pop através do próximo elemento. Talvez eu vá adicionar um botão lá. E o que é bom com estes é com os elementos pré-existentes. Você pode, você sabe, apenas tipo de brincadeira e não ter que se preocupar com o palco de construção, porque na maior parte, você sabe que eles vão estar lá para você. Vamos colocar um texto e brincar com ele. Talvez isto seja como uma página de galeria, etc. Então, eu só vou aparecer nos elementos. Você pode ver. Temos quadros de navegador, círculos de texto, imagens, botões, banners, barras de rolagem, botões de rádio, colchetes e assim por diante. Diferentes páginas adicionando suas imagens, você pode ver o seu fluxo. E como sempre, brinque e veja onde tudo isso te leva de novo. E como sempre, Esta é apenas a versão básica, tudo bem. Nosso próximo site de brindes que eu vou apenas meio que rapidamente passar por essas simulações. Um, e novamente, todos os links estarão em nossas folhas em nossa área de projeto de classe neste aqui é um brinde também. Então você pode ver que você tem novos contornos de páginas. Você pode começar com modelos, imagens , ícones , etc. E funciona muito semelhante ao último. Você pode ver que tem os cabeçalhos, os rótulos, os parágrafos, botões, cheques, rádios, textos. Eu não vou mostrar isso, você sabe, o detalhe real de funcionamento. Mas só que você pode ver quais elementos existem lá dentro. Havia alguns elementos de forma desenhada agora de peças, um, espetáculos, drop downs , botões, lotes e lotes e lotes e muitas opções para escolher entre este também. E assim como o último, apenas brinque e veja o que ele faz. Tudo bem, outro é ir Mockingbird Dot com e você vai notar uma tendência. Há, na maior parte, muitas semelhanças entre todos estes. Você vai ter seu espaço de trabalho e suas gotas de dragão que você pode puxar para fora do lado esquerdo s para que você possa obter sua página em um belo esboço necessidade, por assim dizer. É um botão. Nós temos os botões aqui, então assim você poderia ter alguns dos elementos na página para que você possa descobrir como eles se conectam? - Outro é arame frame dot cc, e você pode ver a versão gratuita. Você só tem um quadro de fio de página, mas terá as mesmas ferramentas que os outros têm. Este que você pode pop entre dispositivos móveis para as janelas normais do navegador. E só vai depender. Qual é o seu projeto e quais são as necessidades do seu projeto? Então é bom, mas este é Você pode escolher. Você sabe com qual base você quer começar. A partir daí, é praticamente o mesmo estilo de enxaguamento e repetição. Uh, você sabe, você tem sua forma pode ganhar ferramentas. Uh, você tem o seu tipo de enchimento. Você pode ajustar de acordo. Vou deixar tudo por defeito para esta demonstração. Você pode colocar suas imagens. Você pode colocar seus botões, etc. Depende do seu estilo de trabalho. O próximo é glitzy dot com. Você pode dizer logo de cara. Já temos semelhanças. Você sabe, nós temos formas diferentes neste caso, então ele são construtores moldados nas relações. Formas básicas. Hum, eles vão funcionar. Exatamente. Você sabe, o mesmo. Este. Você pode escolher entre uma forma ou a caixa de texto. Ou você pode adicionar um rótulo nele. Além disso, disso, redimensionar, , dependendo das suas necessidades. A coisa boa com isso é que ele tem, uh, os guias de régua com sua tomada vê tipo de caras inteligentes com ele, e você vai ter a mesma funcionalidade que você está acostumado. Se você estiver confortável com a suíte criativa, você pode fazer suas duplicatas. Você pode fazer suas cópias e colar. Ele tem um monte de comandos que você pode usar e navegar com. Hum, então para isso, eu só vou fazer algumas caixas repetidas para que você possa ver esse processo. Eu gosto dos guias desta vez. E como você poderia trabalhar com eles aqui tem boa capacidade de ajuste com ele. Você pode dizer todo tipo de ferramentas, formas, contêineres, formulários, botões, rádio,o que quiser. Você pode dizer todo tipo de ferramentas, formas, formas, contêineres, formulários, botões, rádio, Eles vão tê-lo. O último que vou fazer é Maçônico. Ambos tão mansos. Esforço. Ambos, um, encaminhe isso. Eu só vou deixar isso meio que velocidade, praga fundo. Por que falar sobre isso? Porque nesta fase, você está descobrindo. Todos eles têm uma espécie de padrão repetitivo. Isso foi agradável porque ele tem um mais tipo de, ou você pode dar-lhe a opção de ter em um tipo mais esboçado de olhar para o seu Parece mais gestural na mão desenhado, que é um bom tipo de estética com ele. Eles têm um teste gratuito deste, e então eles também pagaram pela versão eso. Este é um pouco diferente. Não é baseado em navegador, como os outros. Este, você vai ter que fazer um download primeiro e, em seguida, abri-lo como um software normal. Mas acredito que é uma avaliação gratuita de um mês e, em seguida, você paga por mês, semelhante à Creative Cloud. Então, para este é apenas o divertido para brincar. O que é tão certo, eu diria ir em frente e fazer o teste de um mês só para ver como ele se parece, e ele tem um monte de opções com ele. Além de apenas, você sabe, a página da Web que você pode ver no topo e todos os ativos eles têm botões o ícone de formulários de contêineres , que , uh, eu o s você está funcionando com marcações ? E essa parte é legal que você possa se comunicar com a equipe com este aqui? Pode-se ver cabeças, sem gráficos, etc. Então, há muitas opções e esta que não está nas outras. Então, Então, aproveite esse teste gratuito de um mês para que você possa ver o que ele tem a oferecer . E se isso é algo em que você entra, hum, mantê-lo em segundo plano com suas memórias para que você possa voltar para ele ou se você está trabalhando em uma equipe e você está procurando esse tipo de solução, ele tem um monte de as opções com o dedo do pé funcionam versus as outras. 12. Conclusão de wireframe: Eu realmente espero que você tenha gostado de sua exploração no analógico, o lo fi, as cinco versões altas de enquadramento de arame. Por que o enquadramento pode ser uma ferramenta tão boa para os estágios iniciais do seu site? Design irá ajudá-lo a organizar seus pensamentos. Veja o que precisa. Veja o que você tem. Não vê o que está perdendo. Então, apenas com lápis básico, seu papel postá-lo notas, loja de fotos ou ilustrador. Mesmo nossas ferramentas on-line Você pode construir uma estrutura para um site realmente bem sucedido. Espero que tenha gostado desta aula. Mal posso esperar para ver o que você projetou nos projetos abaixo. E vejo-te na próxima vez. Tchau.