Fundamentos de Design Web no Illustrator | Dawid Tuminski | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Fundamentos de Design Web no Illustrator

teacher avatar Dawid Tuminski

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

20 aulas (1 h 22 min)
    • 1. Design de Web no Illustrator :Bem-vindo ao curso

      2:01
    • 2. Meu fluxo de trabalho de design Web

      5:46
    • 3. Princípios de bom design da web

      3:28
    • 4. 5 tendências de design da web mais importantes

      3:48
    • 5. Criar um espaço de trabalho de design web

      3:28
    • 6. Criar atalhos personalizados

      3:09
    • 7. Criar novo documento de design da web

      3:47
    • 8. Princípios de design de web responsivo

      5:19
    • 9. Construindo pranchetas de modelo responsivo

      5:32
    • 10. Pranchetas e camadas de redesenhe

      4:26
    • 11. O que é o Bbootstrap?

      1:51
    • 12. Grid de desktop responsivo

      3:55
    • 13. Grids móveis responsivos

      4:15
    • 14. O que é um wireframe?

      3:28
    • 15. Elementos de Wireframe: cores e imagens

      7:21
    • 16. Tipografia e botões flexíveis

      6:56
    • 17. 2 maneiras de usar biblioteca de wireframe

      2:51
    • 18. Como entregar o design a um cliente

      3:19
    • 19. Exportando para o Photoshop

      6:00
    • 20. Vamos resumir o que aprendemos

      0:59
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

892

Estudantes

5

Projetos

Sobre este curso

Este é um curso incrível. É bem estruturado e mostra um dos melhores fluxos de trabalho que um designer deve seguir.

Muito claro e completo, uma ótima explicação para estabelecer fluxos de trabalho saudáveis que vão avançar. Muito obrigado pelo grande curso Dawid, ansioso por mais!

Você é um iniciante de design da web?

Você já projetou sites de internet por algum tempo, mas nunca no Illustrator?

Ou talvez você tenha usado o Illustrator há algum tempo, mas nunca pensou que você poderia usá-lo para web design?

Pára de desperdiçar seu tempo com imaginar.

Graças a este curso, você vai ganhar todo o conhecimento de que você precisa começar a projetar sites incríveis de forma independente.

Dentro de você vai encontrar informações exclusivas em:

  • Como transformar o Illustrator em uma supertool. de design da web.
  • Como criar facilmente um wireframe e um site para além disso, rápido!
  • Como dominar desktop, tablet e design de web para smartphones - tudo em um arquivo, graças às pranchetas de arte do Illustrator
  • Como tornar seu projeto mais rápido e mais profissional com uma grade de 12 colunas personalizada.

O que você obtém é uma ocasião exclusiva para começar a criar sites maravilhosos, para os quais você pode cobrar milhares de dólares.

E sim, você pode fazer isso usando o Adobe Illustrator.

Então clique no botão Inscrever-se e dê seu primeiro passo para criar designs de web sensacionais no Illustrator.

Até logo.

Dawid

PS Se você gosta do curso, envie seu projeto de revisão e curso. Isso vai ajudar outros alunos, como você está interessado no tópico que ensino, na busca de meus cursos. Valeu!

Conheça seu professor

Teacher Profile Image

Dawid Tuminski

Professor

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Design de Web no Illustrator :Bem-vindo ao curso: Olá e bem-vindo ao curso. Meu nome é David para música, e neste curso eu quero mostrar-lhe os fundamentos de projetar sites bonitos e profissionais usando o Adobe Illustrator. Agora, este curso é para todos os novos designers que querem entender como ilustrador pode deixá-los projetar sites incríveis, mas também para aqueles que são novos para o conceito de ilustrador de ser uma ferramenta de Web design ou aqueles que estão fazendo uma transição do mundo impresso para o mundo digital. Mas antes de mergulharmos no curso, vamos ver rapidamente o que realmente está nele. Vamos começar com meu fluxo de trabalho de Web design em sua feira, e eu quero mostrar a vocês meu processo de criação de um site onde o processo de design real vem . No final, eles vão dar uma olhada em princípios de bom design e tendências contemporâneas da Web. Depois disso, é hora de configurar o Illustrator para um trabalho de Web design criará o espaço de trabalho certo e criará documentos adequados para o Web design. Nós também vamos descobrir princípios de Web design responsivo, e com base nesse projeto de lei, eles são modelo responsivo. Você aprende a simular rápida e sem esforço uma grade de bootstrap de 12 colunas dentro do Illustrator e salvá-la como um modelo. Veremos como configurar um fio no site Friend Illustrator aprenderá o que é um quadro de arame. Por que é uma boa prática usá-lo e como configurá-lo finalmente tornará nosso design adequado para um cliente para visualizar e que o desenvolvedor para desenvolver o site. Mas isso não é realmente tudo nas próximas palestras bônus. Vamos encontrar algumas ótimas dicas sobre como escolher o fundo certo para o seu projeto e como criar efetivamente uma fonte de notícias e estilos de personagem farão o mesmo com imagens e colares para Web design. Os trabalhos no final do curso terão todas as ferramentas e conhecimentos para começar a criar sites fantásticos no Adobe Illustrator. 2. Meu fluxo de trabalho de design Web: nesta seção, vamos dar uma olhada em um típico trabalho web design flutuante mais tarde, ele vai nos familiarizar com armas e princípios e descobrir as tendências mais importantes para conhecer ao projetar um site. Então vamos começar com o Web design. fluxo de trabalho veria detalhes sobre o processo saindo da inspiração para o design final . Vamos começar nossa aventura com Web design e ilustrador explorando meu fluxo de trabalho de Web design . Não é que eu queira me gabar, mas ao longo dos anos desenvolveu um padrão de trabalho que me permite projetar muito mais rápido e produzir sites mais coerentes. Isso é só sobre usar as ferramentas certas com os olhos fechados? Mas é mais sobre um padrão de trabalho, então vamos ver essas etapas em detalhes. O primeiro vem a inspiração. Nunca é ruim olhar para o que outros designers já fizeram. Serve dois propósitos principais. Ele permite que você esteja ciente das tendências, e também permite que você veja imediatamente o que funcionaria para o seu projeto e o que não funcionaria. E neste dia e idade, é impossível não procurar Web design, inspiração bem on-line. Há uma tonelada de ótimos sites com designs fantásticos para se inspirar. Meu fluxo de trabalho típico. Usei duas fontes principais, por assim dizer. O 1º 1 é floresta temática. Aqui você vai encontrar toneladas e toneladas de fantásticos temas WordPress envelhecidos em, bem , modelos, etc. Eu costumo ir para temas WordPress, mas principalmente porque a escolha das coisas aqui é enorme, e eu tenho tudo o que eu precisava. Um lugar. O outro lado para o qual me virei é, bem, Google. É tão fácil simplesmente digitar as tendências de Web design e obter toneladas de artigos, bloquear barcos e reunir todas as últimas e melhores em Web design até à data. Depois que a inspiração vem que o documento configurado, Eu costumo trabalhar com um modelo ou perfil bonito achado, e você vai aprender a cumprimentar um mais tarde no curso. O que é ótimo sobre iniciar um projeto para a partir de seu próprio modelo personalizado é que você não só tem as placas de arte e guias prontos para você, mas também as camadas e definir as variedades de camadas essenciais em um flutuador de trabalho de Web design suave . Vamos falar sobre as camadas configuradas na seção Web design responsivo do curso quando o documento é configurado, é hora de criar um blueprint de sites. Um ilustrador de arame permite criar elementos de marcação com facilidade. E em um fluxo de trabalho típico de Web design, isso vem como uma grande vantagem. Terá toda uma seção sobre arame em um ilustrador, By the way, e depois que o quadro de fio é feito, é hora de alguma fonte e inspiração cor, claro, quando se trabalha em um projeto seria Deve estar lidando com alguns clientes. Expectativas em relação às cores ou talvez os fundos mesmo. Mas existem algumas regras gerais sobre o uso de cores e França e Web design. Bem, primeiro lugar, é uma boa idéia usar o Google Fonts Senior Project. Eles são bons, gratuitos e fáceis de implementar pelo desenvolvedor. Claro, você não precisa se limitar aos fundos do Google. Por exemplo, você também poderia ter que encontrar esquilo e procurar fundos lá também. Eles têm alguns grandes fundos para escolher, e um desenvolvedor poderia gerar um garoto de fundos da Web facilmente. Mas se você quiser aproveitar os fundos do Google, mas não se afogar na escolha da fonte, existem ótimas ferramentas na Web que permitirão que você verifique como certos fundos se parecem em combinação com outros. E quanto às cores, você provavelmente está ciente das crianças projeto plano avaliar disponível na Web. Mas se você não quiser usar esses esquemas de cores, é uma boa idéia ver como outros sites utilizam certas combinações de cores. E, como regra geral, tente não sobrecarregar o usuário com muitos colares, tente mantê-los harmoniosos e deixe o maior contraste para pairar e estados ativos fora dos itens ou botões de menu. Agora, o uso adequado de fotos é crucial no Web design contemporâneo. Muitos projetos fazem grande, negrito segue as partes mais importantes do site. E em um cenário e armas típicos, você teria as fotos fornecidas pelo seu cliente ou você mesmo precisaria obtê-las . No segundo caso, uma maneira é ir para fotos de ações pagas de serviços comerciais. A outra maneira é ir para fotos stock grátis, e você pode encontrar uma tonelada fora de sites que oferecem alta qualidade, preso por horas de graça, e aqueles que eu particularmente gosto e achar útil são grátis pick dot com e pixels dot com. Depois de todos os preparativos. Finalmente é a hora de começar a desenhar. O conceito básico está pronto em nossa cabeça. Temos as fontes e cores que gostamos. Nós configuramos o quadro de arame, então agora é a hora de iniciar o processo de design real. E quando o design estiver concluído, pelo menos a primeira versão, é hora de entregá-lo ao cliente. Seria extremamente incomum se você fosse frases e fosse aceito imediatamente. Prepare-se para ajustes às vezes estranhos e quase sempre numerosos. Mas quando o design é finalmente aceito pelo cliente, ele está pronto para ser desenvolvido, como você admite, um processo bastante longo. Requer um certo nível de habilidades e conhecimento, mas é realmente uma coisa boa. Isso simplesmente significa que você pode cobrar mais pelo seu trabalho porque você não está nele apenas para o design, certo. Você também quer ser pago por isso, certo? Foi o que eu pensei. Agora, no próximo vídeo no próximo, os vídeos realmente vão dar uma olhada em princípios de bom design e tendências contemporâneas de Web design , então continue assistindo 3. Princípios de bom design da web: Diga-me algo quando quiser comprar uma certa coisa. Qual é o fator mais importante que faz você comprá-lo para mim? É o benefício que terei depois da compra. Em outras palavras, o que eu ganho com isso? Pense nisso quando o usuário olha para um layout de página e ele deve sentir que ele está realmente recebendo o que ele veio aqui para. Não importa se ele quer obter alguma informação de contato, realmente bloquear post ou comprar algo, porque tudo depende do que a página quer transmitir Ele sempre deve ter a habilidade de fazê-lo rapidamente sem pensar muito sobre isso. . Bem, isso nos leva à regra mais importante em web design hoje. Usabilidade através da simplicidade. É uma implementação fora de mais de uma regra de beijo de 50 anos, que significa mantê-lo simples, estúpido ou mantê-lo curto e simples. Então, em suma, um site bem projetado não deve ser barulhado, sobrecarregado com elementos desnecessários, e deve chegar direto ao ponto. Seja qual for esse ponto. Isso também se aplica aos colares e estilos encontrados. Ao projetar um site, você precisa se lembrar de manter um esquema de cores coerente em todo o lado. Não se trata apenas de manter cores harmoniosas em cada página, que é claro, é essencial, Mas também é sobre ser cauteloso sobre o uso de cores apropriadas para o tipo de projeto em que você está trabalhando. Por exemplo, não seria extremamente correto projetar um site de empresas de advocacia em rosa vivo e amarelo tonificado cinza azul. Que talvez tons de ouro seriam muito mais apropriados. Mas se você estivesse projetando um site do jardim de infância do que usando mistura de bonecas, as cores não mostrariam a experiência do jardim de infância fundo também, e o mesmo acontece com lagoas. Eles também devem ser consistentes em todo o site e páginas individuais. Os cabeçalhos devem usar a mesma fonte e diminuir de tamanho Gradualmente. A cópia do corpo deve usar a mesma frente em todas as páginas, etc. Hoje em dia, a escolha divertida que os designers têm é enorme. Costumava ser apenas aéreo. Verdana Times, New Roman e afins. Quando hoje o repositório do Google Fonts tem mais de 700 fundos sozinho. Olhe para a minha escolha nem sempre é uma coisa boa, mas felizmente, há tamanho que pode ajudá-lo a escolher o fundo certo, e vamos mostrar-lhe quais fundos vão bem juntos. Além disso, refiro-me novamente à firma de advocacia. Analogia do jardim de infância. Funky, brincalhão olhar frente provavelmente não vai ficar bom no site da firma de advocacia, mas será uma boa escolha para matar. As imagens do site do jardim de infância desempenham um papel importante no design contemporâneo da Web, por isso é vital escolher polegar Bem, quero dizer, lembre-se de mantê-los apropriados não só para o caráter do site, mas também equilibrar com o esquema de cores de sua escolha. Além disso, se o humor do site é edificante e animado, tente usar imagens que reflitam exatamente isso. Por outro lado, se decidiu supostamente transmitir profissionalismo e seriedade, encontrar as imagens de notícias que enfatizariam apenas isso. Mas, por favor, evite fotos encolhidas. Eles caem fora do bom design, um período de categoria. No próximo vídeo, vamos dar uma olhada nas cinco tendências mais importantes de Web design em 2015, então continue assistindo 4. 5 tendências de design da web mais importantes: Vamos passar alguns minutos agora para verificar as cinco tendências mais importantes para saber ao projetar o site. De acordo com o último relatório da TechCrunch, 80% do tráfego de dados móveis será gerado pelos usuários de smartphones até o final de 2020. Neste momento, cada terceiro visitante faz login em um site a partir de um dispositivo móvel, e se um site não oferece uma experiência móvel confortável, ele perde seus visitantes. E isso prejudica as taxas de conversão. Basta colocar um designer quer ele ou ela goste ou não. Ao projetar o layout deve pensar sobre a experiência móvel que ele está criando com o design que você deve responder. As perguntas como seriam visíveis o suficiente em um smartphone com rolagem facilmente será fácil tocar nele, etc. A melhor maneira de trazer foco para um determinado aspecto do site é não distrair o usuário dele. Não é apenas em uma forma sintética do menos é mais regra. Também é uma coisa de usabilidade. Quanto mais sofisticadamente simples decidir é o mawr. É mais fácil de receber pelo usuário. Simplificando, as últimas distrações. Quanto mais informações poderiam ser transmitidas ao lado porque o usuário sabe no que se concentrar . Ele ou ela não está confuso com o que eu quero dizer ou espero que ele faça. Você deve ter notado essa tendência. Está lá há algum tempo, e parece que não vai desaparecer. Pense cozido significa usar topografia grande, mesmo muito grande é a primeira coisa que o usuário vê no lado. Coloque-o contra um fundo grande, estique-o pela tela e termine todo o efeito. A ousada chamada à ação Esta tendência tem sido tão proeminente que é realmente estranho não ver um site usá-lo. Mas você pode encontrar designs que tentam seguir essa regra e alterá-la um pouco. E eu estou falando sobre o uso da linha ousada. Uma grande tipografia é o ponto focal do design, mas não está sendo trazido contra o completo com foto de fundo. Em vez disso, o plano de fundo explica não distrair o usuário da mensagem principal. Este está conosco há cerca de três anos e tornou-se a tendência mais importante e difundida em todo o mundo do design em geral, não apenas Web design. O aspecto chave do design plano é transformar a atenção do usuário para conteúdo sua simplicidade. Falamos sobre, mas de uma forma ligeiramente diferente quando o Android Lollipop chegou ao mercado. design de materiais do Google, que deriva do design plano, também se tornou amplamente adaptado, especialmente na indústria de desenvolvimento de APP móvel, que não é surpresa. Acontece que os usuários preferem rastejar em vez de clicar no site Scrabble. Ela também é mais fácil de navegar em um dispositivo móvel. O rabiscar parece mais natural e não está fazendo o usuário esperar que o conteúdo seja carregado após o link ter sido clicado. Os sites construídos no espírito de página única estão cheios de fundos, fotos grandes e tipografia apresentando informações em grandes pedaços que podem ser despercebidos. Então, lá vai você estas cinco tendências mais importantes da Air para saber ao projetar um site em 2015. Móvel primeira coisa simplicidade, grande design plano e design de página única. Há muitas outras tendências emergindo como novas ou recebendo tração, como menus reduzidos, narração histórias ou layouts de grade. A lista que acabamos de passar mostra as tendências que afetam os designers que trabalham mais agora, e no próximo vídeo, vamos começar a configurar o ilustrador para uma arma em empregos, então continue assistindo 5. Criar um espaço de trabalho de design web: nesta seção aprenderá como criar Web design, espaço de trabalho no ilustrador, Como criar seus próprios atalhos e Como criar um documento para um projeto de Web design. Então, vamos começar com a personalização do espaço de trabalho do ilustrador para que ele se adapte às nossas necessidades de design da Web . Antes de começar a tratar documentos Web design, perfis e modelos. É uma boa ideia configurar o espaço de trabalho do ilustrador, e não há certo ou errado aqui. Cabe a você. Quais painéis e torradas terão ligado. Cabe a você como você vai colocá-los em sua tela. Eu só queria mostrar como você pode configurar um espaço de trabalho para Web design com base no que eu uso . Mas, claro, espaço de trabalho é seu e personalize-o ao seu gosto. A primeira coisa que você pode querer notar lá é que o ilustrador realmente fornece um espaço de trabalho muito encontrar chamado Web, e isso é ilustradores idéia do que você pode querer usar ao projetar o layout. A maioria das ferramentas que eu vou manter, mas há realmente um monte de coisas que eu nunca uso, e algumas ferramentas que eu uso estão faltando. Primeiro de tudo. Acho que não vou precisar do painel de ações, então vou arrastá-lo para fora e fechá-lo. O mesmo vale para variáveis. Atributos. Atributos são mais ou mais de uma coisa de impressão. Também não vou usar pincéis. Certo, Certo, o resto parece bem. Há algumas inclinações que vou adicionar ao meu espaço de trabalho. Primeiro de tudo, a partir do menu da janela, eu escolherei. A ferramenta de alinhamento ocorre em um típico armas no fluxo de trabalho. Há muito alinhamento. Eu também vou para o Pathfinder. Você nunca sabe quando você pode querer usá-lo, então é uma boa idéia mantê-lo à mão, e eu vou tornar o Navigator ativo. Navigator realmente ajuda muito ao navegar em várias nossas portas. Vou mascarar esses caras com as outras ferramentas. Normalmente eu faço os painéis certos coluna única, mas para fins de gravação, eu vou mantê-los em duas colunas e apenas rapidamente dica aqui, pessoal, pessoal, se você não sabe o que se esconde por trás desses ícones, mas você está fazendo para expandir os painéis para que você tenha mais espaço para trabalhar, você pode simplesmente arrastar pela borda de um painel para revelar os nomes das ferramentas. Agora que temos todas as ferramentas no lugar. É uma boa ideia salvar um novo espaço de trabalho no alternador de espaços de trabalho. Então, vamos apenas escolher um novo espaço de trabalho. E nesta caixa, vamos digitar o nome do novo espaço de trabalho, e é um ticket de boa idéia com algum nome descritivo, apenas sabemos o que estamos salvando. Então eu vou nomear enquanto você trabalha espaço como meu espaço de trabalho Web design. Ok, e se você decidir que você encontra alguma outra ferramenta adicionada ao espaço de trabalho, basta escolhê-la no menu da janela e doc, ele encaixaria com os outros caras, e por algum motivo você acidentalmente massa seu espaço de trabalho. Basta ir para o switcher de espaço de trabalho e escolher redefinições e qualquer que seja o nome do seu espaço de trabalho. Então, agora que temos nosso espaço de trabalho criado, podemos dar um passo adiante e criar ou personalizar, disse atalhos, e é isso que vamos fazer no próximo vídeo 6. Criar atalhos personalizados: A coisa sobre atalhos personalizados é exatamente como onde eles custam espaço de trabalho. Tudo depende da sua preferência pessoal. Só mostrar quais atalhos. Eu usei meu fluxo de trabalho típico de Web design. Aposto que retângulos arredondados serão uma das formas que você vai criar muito. O Illustrator, como você pode ver, não nos fornece um atalho padrão para o retângulo arredondado. Então vamos consertar isso. Então vamos ter para o menu adicionado. Se você estiver em um Mac, basta acessar o Manual do Illustrator no canto superior esquerdo e escolher atalhos de teclado. Aqui, podemos adicionar atalhos personalizados para as ferramentas e comandos manu. Queremos adicionar um atalho para o retângulo arredondado. Então, na caixa de pesquisa, vou digitar arredondado. E para o atalho, vou digitar a letra N. Agora ilustrador vai me avisar que este caso já usado pela ferramenta lápis, mas como eu não usá-lo em minhas armas e fluxo de trabalho, eu simplesmente não vou me preocupar com isso agora. Eu gostaria de criar um curto personalizado, mas para o Comando do Menu Transformar, esse comando é extremamente útil ao criar menus. Basta criar um elemento de menu e, em seguida, clonar dinamicamente e movê-lo para criar um menu. Então eu vou escolher comandos de menu deste pequeno switcher. Vou datilografar e transformar. E é esse cara aqui que eu quero ter um atalho personalizado. E desta vez eu vou ser um pouco mais elaborado e tipo e mudança de controle e Q em imaculado para usar o comando em vez de controle. Isto é um atalho. Eu vim há muito tempo. Não vai entrar com nenhum outro atalho no Illustrator, e não machuca seus dedos para digitar. Agora, tudo o que resta a fazer é salvar meus atalhos personalizados. E eu vou fazê-lo clicando neste pequeno Eu venho e eles vão chamá-lo de meus atalhos de web design . Agora, quando damos uma olhada na ferramenta de retângulo arredondado, você pode ver que ele tem um atalho personalizado atribuído a ele e o no efeito distorcer e transformar menu. Você pode ver nosso elenco curto, mas também. Claro, estes foram apenas exemplos de como você pode criar suas próprias ferramentas e atalhos de comando manu. Tudo depende do seu fluxo de trabalho. Quais ferramentas você usa mais o que Manu comanda você mais usa. Então divirta-se com ele, e é uma boa idéia simplesmente pausar de vez em quando e perceber quais ferramentas ou comandos ativos. Eu compraria você ativar clicando, e se eles não têm um atalho padrão, basta criar um. E agora estamos realmente prontos para criar nosso primeiro documento de Web design no Illustrator Você está animado? Espero que esteja. Então, vamos começar. 7. Criar novo documento de design da web: Depois de configurarmos nosso espaço de trabalho e nossos atalhos, é hora de criarmos um novo documento para design de trabalho. Então, vamos até o menu de arquivo e escolher novo. Você também pode usar o controle e o atalho para criar um novo documento. E, claro, em um Mac você iria para o comando e e nesta caixa de diálogo, a primeira coisa a fazer é digitar o nome do projeto, claro, e você tenta escolher o perfil da Web do perfil switcher. Mas os tamanhos de arte que obtemos são realmente tamanhos de tela diferentes, e nenhum desses talvez, exceto 10 24 por 7 68 que é o tamanho do iPad corresponde ao tamanho do site Stander. A principal tendência hoje em dia é criar sites com 1200 pixels. Isso porque todos os monitores mãe suportam pelo menos 12 80 por 10 24. resolução de pixels mais 1200 é facilmente divisível, o que a torna altamente flexível. Quando eu crio um documento típico de Web design, Eu tenho em mente que a maior importância apoiar pelo menos 12 80 resolução de pixels, mas eu também penso sobre os maiores, mais utilizados gritos lá fora e comprar maior quero dizer a resolução mais alta que é 1920 por 10 80 pixels ou full HD, se você preferir. Claro, não estamos falando de cinco revistas K i ou quatro monitores K assed. Eles ainda não estão amplamente adaptados. Mas, claro, quando chegarmos à criação temperada responsiva verá como preparar o nosso documento para essas resoluções de tela também. Mas, por enquanto, vou manter a boa e velha resolução Full HD e certificar-me de que as minhas unidades de medida estão definidas para pixels. E no carimbo avançado, eu quero ir para o RGB como o modelo de cores. RGB significa vermelho, verde e azul e é o modelo de cores padrão no mundo digital em oposição a vê-lo y que, que é modelo de colar padrão em impressão? Não, no switcher de efeitos raster, você pode ir de 72 pp. Eu joguei 150 todo o caminho até 300 peopie I maioria dos casos vai ser totalmente irrelevante como todas as suas obras de arte quando uma web mais segura vai ser salvo em 72 pp. I definir os efeitos raster em 300 pessoas vai deixar você ver suas sombras cair e borrões como se eles estavam fora de resolução mais alta, mas eu geralmente vivê-lo como 72 pp. Eu visualizo o modo. Vou deixar como padrão e vou passar para a opção de alinhar novos objetos para grade de pixel. Este aqui, eu acho, eu acho, é a escolha mais importante a fazer ao projetar dentro do ilustrador o que esta opção dança é, ele encaixa todos os objetos para grade de pixel, preservando todas as dimensões e traçado com de quebra em frações de pixels. É suposto simular um ambiente de pixel para o seu trabalho artístico. Se você deixá-lo desmarcado, será capaz de criar objetos com qualquer tamanho que você quiser. Seu fundo, por exemplo, por exemplo, pode ter 156,5 89 pixels de largura. Mas gosto de ter esse tipo de liberdade criativa. Quando eu criar Ah você I elementos que eu sei que eu vou estar salvando para Web como P G ou J Banks ou como vegetais que mais tarde serão importados para o meu design layout real. Mas se eu quiser criar o layout em si, eu mantenho esta opção marcada, e isso é o que eu vou fazer neste caso, bem como e tudo o que resta a fazer é acertar ok e continuar trabalhando. Então, na próxima seção, vamos falar sobre Web design responsivo, e vamos definir um modelo responsivo para cima, então continue assistindo. 8. Princípios de design de web responsivo: nesta seção irá falar sobre Web design responsivo no contexto da criação de um site no Adobe Illustrator. Claro, vamos dar uma olhada em alguns princípios de Web design responsivo, mas nesta seção fora de foco na construção de um modelo responsivo, eu e sua própria grade. Então vamos ao trabalho. Você deve ter ouvido o termo web design responsivo um lance. É. Bem, o Web design e desenvolvimento Web tem sido tudo sobre há cerca de cinco anos. Mas pode haver alguma confusão, especialmente em termos de design o que Web design responsivo realmente é. Permitam-me que tente esclarecer algumas coisas. Em primeiro lugar, Web design responsivo não é sobre fazer um site olhar ideal para todos os dispositivos. Sim, não se trata de dispositivos em si, mas de uma experiência de barco que você obtém de um site em um determinado dispositivo. Então, ao projetar um site, o que você deve ter em mente não é o que o conteúdo vai se comportar em um iPhone ou galaxy tab, mas como ele vai se comportar em um desktop, um laptop, um tablet ou um smartphone. Em outras palavras, Web design responsivo é tudo sobre conteúdo orientado layout é o conteúdo que dita e a aparência do design, e o que isso significa é que um que está ligado quando o dispositivo é mudar. O conteúdo também deve mudar. Deve mudar. Deve reorganizar ou mesmo ir embora. Antes do design responsivo da Web, tínhamos layouts fixos. Os sites foram projetados e desenvolvidos com computadores desktop em mente. E ninguém esperava que em poucos anos todo mundo vai ficar online, olhar em um minúsculo telas de seus smartphones e mesmo com todo o hype responsivo do Web design , ainda muitos sites usam layouts fixos. Aquilo que prejudica sua experiência de conteúdo, diminui sua base de clientes em potencial e prejudica suas taxas de conversão. E a transição de um layout fixo para um layout responsivo é um processo que leva tempo e aparentemente, é mais sobre mudar a maneira como as pessoas pensam sobre a Internet. Então, apenas uma mudança na visão parece. Os primeiros esforços para melhorar as camadas em telas diferentes vieram com os layouts adaptativos e fluidos que tentaram usar porcentagens como unidades de medida em vez de pixels. Mas os resultados foram meramente no tamanho dos elementos da empresa não na própria estrutura, e foi web design responsivo, o reorientado, o processo de design e desenvolvimento para a entrega de conteúdo e visto como um semelhante experiência em diferentes dispositivos. E o resultado é uma maneira completamente diferente de pensar em contar a entrega. Alguns elementos podem ser ótimos no meu desktop e laptop, mas em smartphones eles podem precisar ser alterados ou até mesmo removidos. Tudo é dedicado a uma ótima experiência de usuário. Há mais uma coisa extremamente importante a ter em mente ao projetar camadas responsivas com a abundância de para diferentes dispositivos lá fora, você não pode controlar o que você não pode. Vai parecer com todos fora deles. E essa falta de controle pode ser especialmente para designers que muitas vezes sentem essa conexão especial com seus projetos. Pode ser assustador, mas infelizmente é inevitável. Agora, quando o seu design é finalmente entregue a um desenvolvedor ou você começa a colocar seu design para se mover com o HTML e CSS, as coisas podem começar a se comportar inesperadamente, pelo menos em alguns dispositivos, e isso é Totalmente bem. Na maioria dos casos, você vai ter que fazê-lo. É apenas o layout mais tarde no processo, talvez em algum espaço em branco ou removê-lo. Talvez você vai ter que se livrar de alguns elementos ou fazer o fundo é maior. Projetar uma camada responsiva é sobre tornar às vezes difícil do ponto de vista do design. Decisões. Então, como ilustra o ajuste neste tipo de cenário? E se não conseguirmos controlar o que o layout vai parecer em diferentes dispositivos, quero dizer, não podemos escrever HTML nem da CIA como ilustrador. Então, como podemos pelo menos simular a aparência do site em diferentes dispositivos? Bem, a resposta é simples. As portas Arctic Desde Illustrator CS cinco, podemos criar diferentes nossos barcos dentro de um documento, isso significa que podemos projetar um tablet desktop e experiência smartphone com, em seguida, apenas um arquivo, criar um conjunto de elementos e com ajustes adequados, use o polegar em todas as nossas placas para criar camadas responsivas. É simples assim. Então, em conclusão, Web design responsivo é sobre repensar como o conteúdo do site será entregue em diferentes dispositivos. Não se trata do tamanho da tela. Além disso, a falta de controle sobre uma aparência total do design em vários dispositivos pode realmente ser algo positivo. Ele pode fazer você focar seu design em torno dos aspectos mais importantes fora do conteúdo. E se você aceitar isso, nada de Frank vai impedi-lo de criar layouts fantásticos e responsivos de Web design no Illustrator. 9. Construindo pranchetas de modelo responsivo: quando uma história, Qualquer projeto Web design. É uma boa idéia ter um modelo de documento muito fino. Ele economiza um monte de tempo que você pode gastar no processo de design real. Neste vídeo, quero mostrar como posso criar um modelo de Web design responsivo no Illustrator. Vamos começar com a criação em seu documento. Eu vou para o menu de arquivos e escolher novo. A primeira coisa que eu quero fazer é, como sempre, nomear meu arquivo, e na verdade, esta é realmente uma boa prática para entrar em arquivo criativo, nomeá-lo e depois salvá-lo. Este processo diz muito tempo e é um grande hábito profissional. Então encontramos a criação de um modelo de Web design responsivo. Acho que lhe darei o nome do que é ou do que se tornará. Em última análise, eu quero um credo, nossa placa simulando uma experiência de mesa, uma experiência de tablet e uma experiência de smartphone. Então, o nome do modelo refletirá exatamente isso. Então, eu vou digitar em tablet tablet dash desktop responsivo, smartphone traço, modelo de traço. Sei que é meio longo, mas quero que o nome do arquivo seja claro e descritivo. E quanto ao perfil. Webbys, é claro, um bom lugar para começar, mas cria um grande problema à margem. Eu não consigo encontrar o que eu realmente estou procurando, e o valor que eu preciso é 1920 por 10 80 que já sabemos por que eu quero começar com este tamanho ou resolução, se você quiser, porque eu quero parecer como uma grande mesa de experiência. Ou pelo menos quero começar com isso rápido. Não ouçam caras que estou usando ilustradores, CIA. Seis. Se você estiver em um C C, você pode ter valores diferentes no carimbo de tamanho. Então, se você tem 1920 por 10 80 em você quer seguir junto. Basta escolher que o resto de nós vai apenas digitar em 1924 com e 10 84 altura assim, e notar que a orientação mudou automaticamente a paisagem dedo do pé porque a maioria das pessoas manter seus mineiros desktop horizontalmente. E já que você quer simular três tipos diferentes de experiência, precisamos que três não sejam placas para trabalhar. Então, no carimbo da nossa placa, tudo dito, as placas de arte contam até três, organizando-as por linha e espaçando-as bastante significativamente. Acho que 100 pixels ficará bem. Mas se você quiser mudar o espaço e o valor para outra coisa, vá em frente. É uma questão de preferência pessoal. O perfil da Web que escolhemos antes realmente cuida de todos os outros parâmetros que eu preciso. As unidades são definidas como pixels, o que eu quero. Obviamente, modelo colarinho é definido toe RGB raster afeta o 72 pp. modo de visualização I será definido como padrão e quero que novos objetos sejam alinhados à grade de pixels. Tudo o que resta a fazer é acertar bem, claro, e o que temos agora são três quadros de arte. Há 1920 por 10 80 pixels e 100 pixels de distância um do outro. Perfeito, isso é o que você queria. Então agora vamos subir um nível com nosso objetivo em mente, que é simular três tipos diferentes de experiência. Vamos mudar. Os sinais do não estão entediados, então eles correspondem a essas experiências. Vamos supor que minha primeira placa de arte será a grande área de trabalho, então eu vou deixá-lo, como é o próximo que podemos experimentar tablet. Então, com a minha ferramenta audível, que você pode acessar a partir do painel de ferramentas ou pelo Presidente Shift Oh Combinator no teclado. Vou selecionar o segundo cansado, entediado e no painel de controle respondeu 10 24 4 da altura e 7 68 para a semana. E isso é, na verdade, o primeiro iPad e iPad Mini. E muitos argumentam que eu barcos são a verdadeira experiência tablet, então vamos nos ater a isso. Ok, em seguida é o smartphone, e com o terceiro nosso conselho selecionado, vou inserir 11 36 para altura e 6 44 o com o qual, a propósito, é Theo iPhone cinco resolução. E como ainda tenho meu dedo do pé audível ativo, vou nomear minhas placas de arte como smartphone, tablet e desktop antes de seguirmos em frente. Vamos fazer uma pausa rápida e entender por que escolhi essas dimensões exatas para meus quadros de arte . Com a abundância de diferentes dispositivos que têm diferentes tamanhos de tela e resoluções, é impossível segmentar todos eles. Quero dizer, é fisicamente possível, mas não é o que se trata. Já mencionei a palavra experiência algumas vezes, e essa palavra é a chave para entender o bom responsivo Web design. Não é sobre os pixels e, a propósito, se você aprofundar o assunto, você vai eventualmente ter uma dor de cabeça de todas as resoluções e densidades de pixels lá fora. Trata-se de como um usuário interage com o conteúdo dos sites em um desktop, no laptop, em um tablet e em um smartphone. E com isso em mente, a resolução da tela se torna menos importante. Mas ainda tinha mais coisas para fazer. Responsive, modelo sábio, e vamos continuar construindo no próximo vídeo. 10. Pranchetas e camadas de redesenhe: neste vídeo, continuaremos criando um modelo responsivo e começaremos reorganizando nossos quadros de arte. Deixa-me mostrar-te o que quero dizer. Quando tivemos que a arte aborta painel a partir do menu do painel, podemos escolher esta última opção que diz, Reorganizar nossas placas novamente, assim como ao criar um novo documento. Enfraquecer. Defina o espaço em e eu vou configurá-lo para 100 pixels, e eu vou certificar-me de que organizado por linha está selecionado. E quando eu clicar em OK, tudo o que varia lindamente Se você gostaria de levá-los móvel primeira abordagem em seu design. Basta cabeça para o cume real são opção pássaros novamente e mudou o rearranjo da esquerda para a direita layout, que vai assange realmente exibir o seu cartão de arte smartphone como primeiro. Mas já que não quero isso, vou desfazer essa mudança. Agora vamos para o painel Camadas e aqui eu vou criar três camadas Lá irá corresponder com minhas placas de arte, então primeiro eu vou me certificar de que a área de trabalho nossa placa está selecionada e eu vou criar uma camada chamada Desktop com o Tablet Art Board selecionado, Vou criar uma camada chamada célula tablet, apenas um culto ou opção no Mac. Clique no ícone da nova camada e nomeie-a como tablet. E, claro, o mesmo vale para a arte do smartphone a bordo. Então, apenas selecionado antigo ou opção clique em seu novo ícone de camada e nomeado Layer Smartphone. Agora vou organizar minhas camadas corretamente e estamos quase terminando. Mas antes de salvar nosso modelo, vamos tornar nosso trabalho ainda mais fácil e melhor organizado. Eu acho que você poderia dizer que será mais fácil porque vamos organizá-lo melhor. O que eu quero fazer é que eu quero criar sub-camadas separadas para todos os componentes principais de um site típico, que geralmente são seção Cabeçalho, artigo e rodapé. Assim, os jogadores de área de trabalho selecionados Eu vou novamente Old Eruption, clique no credo Nova sub-camada. Eu Venho e todos o nomeiam como Cabeçalho. Agora, com os jogadores de desktop selecionados, isso é muito importante. Queremos criar um tristemente para o desktop player, não para a sub-camada de urze. Vou alterar ou opção clique em criar nova sub-camada e entrar na seção. Farei o mesmo para o artigo, e farei isso para o rodapé também. Agora vou reorganizar todas essas sub-camadas. Vou selecioná-los todos e a partir do menu libra escolher duplicado selecionado. E como você pode ver, nós obtemos todas as sub-camadas copiadas e o que podemos fazer agora é movê-las para a camada de tablet assim. E com todas essas cópias para Sabliere selecionadas, vou copiá-los mais uma vez e movê-los para a camada de smartphone. O realmente antigo que resta fazer agora é remover o apêndice de cópia. Mas acho que quer me ver fazer isso. Então, eu avançaria um pouco. Agora, realmente, tudo o que resta a fazer é salvar nosso arquivo como modelo. E para fazer isso, vou para o menu de arquivos e escolher Salvar como modelo. E como você pode ver, nós já temos o nome do modelo aqui, então nós só precisamos bater saver. E lá vamos nós. Temos nosso modelo criado agora, toda vez que queremos usá-lo, é tão fácil como ir para o menu de arquivos e escolher o novo do modelo e apenas escolher o modelo no próximo vídeo. Eu quero fazer algo especial com o nosso modelo. Eu quero simular um layout de grade bootstrap. É totalmente opcional. Isso só torna a criação de layout muito mais fácil. Então, se estiver interessado, continue assistindo. 11. O que é o Bbootstrap?: ao criar projetos de Web design. É uma boa idéia usar algum tipo de sistema de grade. Ele simplesmente torna o design mais fácil e rápido. O mais popular deles é a grade de 12 colunas. Ele é usado pelo Bootstrap, que é o quadro de desenvolvimento de front e website mais difundido lá fora. Cerca de cinco milhões de sites foram construídos usando bootstrap. Quero mostrar como você pode recriar o ambiente de bootstrap Inside Illustrator. Em outras palavras, vamos criar uma grade de 12 colunas que é baseada na grade de bootstrap. Mas antes de começar, precisamos aprender sobre alguns conceitos básicos que precisamos ter em mente ao criar um bootstrap como grade de 12 colunas. Quero começar com o layout da grade da área de trabalho. Será mais fácil para mim explicar-lhe visualmente. Então meu layout de desktop terá 1200 pixels de largura, e essa é a regra Número um Regra Número dois é que nosso layout de 1200 pixels terá 15 pixels de margem para a esquerda e para a direita, que acabará por fazer nosso trabalho no espaço 11 70 pixels de largura. 15 pixels é um valor de bootstrap padrão para o Marty esquerdo e direito. De acordo com a regra número três, vamos adicionar espaço de 30 pixels entre colunas em ambas as grades atingidas. Cada coluna tem uma margem de 15 pixels à esquerda e à direita, a regra número quatro. Usaremos 12 colunas para construir grits de tablet e smartphone, e o espaço entre colunas também será de três pixels. Mas, obviamente, por causa do dispositivo menor, as colunas de tamanho serão mais estreitas. E com todos esses princípios em mente, vamos começar a criar nossa primeira grade, e faremos isso no próximo vídeo. 12. Grid de desktop responsivo: Eu abri meu modelo anteriormente seguro, ea primeira coisa que eu quero fazer é rebocar realmente marcar meus projetos futuros com, como já sabemos, o que o com do layout é suposto ser. 1200 pixels. Soldados criam um retângulo humilde dado olhos pretos. Preencha sem traçado, e nós vamos torná-lo 1200 pixels de largura, e o coração está realmente à altura da sua preferência. Eu vou torná-lo tão grande quanto a arte a bordo, que é 10 80 mas você pode torná-lo menor ou maior. O que importa aqui é o desligado e deixe-me mostrar-lhe o porquê. Então eu vou me certificar de que meu retângulo está posicionado no centro da placa de arte, então eu vou alinhar. É corretamente e com meus governantes ligados. Se você não tiver réguas próprias, basta pressionar controle ou comando Plus estão no teclado. Vou arrastar um guia para fora para que ele se alinhe na posição com a borda esquerda do retângulo . Se você não tem certeza se ele se alinha corretamente, você pode sempre e eu acho que é uma ótima prática. By the way, clique no retângulo, vá para o painel de controle e apenas copie o valor dos atos, que agora você foi baseado como o valor X fora do primeiro guia. Claro, para este trabalho técnica do dedo do pé, você precisa ter certeza de que seus guias não estão bloqueados. Agora vamos fazer o mesmo com o guia de passeio. Vou trazer um para fora, garantir que aliados corretamente com a borda direita do retângulo. E lá vamos nós. Marcamos com nosso layout, então estamos um passo mais perto do sucesso. Tenho a certeza que te lembras da nossa regra número dois. Nós adicionamos 15 pixels. Preenchimento ou margem depende de como você olha para ele para a esquerda e para a direita. Então, realmente, tudo o que precisamos fazer é selecionar nosso retângulo. E no painel de controle, certifique-se de que o ponto de referência de transformação está definido como centro para que agora podemos simplesmente subtrair 30 pixels do com de nosso de um retângulo. E estamos subtraindo 30 pixels porque a última vez que verifiquei 15 mais 15 aera 30. Ok, agora temos o verdadeiro com fora do nosso design ou 11 e 70 pixels, 1170 pixels. Tudo o que resta a fazer é rebocar. Adicione 12 colunas com um tapinha de 30 pixels entre elas. E para fazer isso, Eu só tinha Teoh para o menu objeto, Escolher caminho e dividir em grade. E aqui eu quero ter 12 colunas com 30 pixels Ghadir, e eu vou ficar bem. O que acabamos com é uma bela coluna 12, bootstrap como grade e o que eu normalmente devido a terminar até que está fora do curso, eu torná-lo significativamente maior. Eu derrubo a opacidade e mudarei sua cor, talvez para algo assim. Se você quiser subir um nível, você pode selecionar todos os retângulos e ir para a exibição. menu e os sapatos fazem guias a partir do submenu Guias. Então agora transformamos nossos retângulos em duas guias, mas isso é realmente totalmente opcional. Tudo depende da sua preferência, e lá vamos nós. Criamos uma grade de 12 colunas para nossa mesa que simula o trid bootstrap . No bom vídeo, continuaremos com a grade para o tablet e smartphone. Então, se você estiver interessado, continue assistindo 13. Grids móveis responsivos: neste belo como prometido, vamos continuar a criar um bootstrap coluna responsivo 12 como grade foi assim que o tablet eo processo será exatamente o mesmo que era com a área de trabalho, as únicas diferenças no tamanho da referência retângulo, que, é claro, uma vez que se encaixam na arte menor a bordo. Então vamos começar com a criação do retângulo. E eu queria ter 768 pixels de largura, menos 30 pixels em causa total. Lembre-se, esse é o uso bootstrapped marcha como padrão. A altura será algo em torno de 1000 pixels. Uma oposição está indo para o centro da bordo, não trazer a orientação. Certificar-se de que a opção de ponto foi ajustada. Bem, apenas tornar a posição no guia muito mais fácil. Ok, e agora vamos dividir nosso retângulo em 12 colunas com um Ghadir de 30 pixels. Então, uma arma eu vou para o menu de objetos. Os judeus caminham e dividem-se em grade novamente. Tal como acontece com a área de trabalho, quero torná-lo 12 colunas e ter 30 pixels calha como então tudo o que resta a fazer é ajustar a altura sobre a capacidade e a cor, se você quiser , e então vamos, Temos nossos grãos de tablet configurado. É tão fácil assim que se conhece a técnica certa. Agora, a situação do smartphone é exatamente a mesma. Tudo o que precisamos fazer aqui é criar um retângulo com as dimensões certas nas armas e dividir o retângulo em grupo. Mas quer saber? Eu decidi que eu não vou fazer isso. Quero dizer, quero que faça você mesmo. Conhece as ferramentas. Você sabe o que fazer. Na verdade, eu encorajo você a compartilhar screenshots de seus grãos completos com o resto da comunidade estudantil . Claro, seu conteúdo em um smartphone provavelmente gastaria em todas as 12 colunas. Mas muitos elementos menores, como botões ou ações de cultura, são criados mais facilmente com a ajuda da coluna 12 no grau . Por isso, novamente, encorajo-vos a participar activamente nesta criação da grelha. Mas é claro que não seria eu mesmo se não te desse algo extra. Então eu queria mostrar a vocês como você pode tornar esse processo de criação bem trabalhoso um pouco mais rápido e aprender uma nova habilidade ao longo do caminho. Então, em vez de constante indo para esta divisão em grade e inserindo 12 colunas e 30 pixel Gardere. Vamos cumprimentar uma ação ou uma macro, se preferir. Agora as ações não são comumente usadas no ilustrador. Eles estão na loja de fotos, mas neste caso eles realmente tornarão nossa vida mais fácil. Então, a primeira coisa que precisamos fazer é tornar o painel de ações ativo indo para o menu da janela e ações, eu vou criar um novo conjunto de ações. Vou chamar de minhas ações. Por que não? E agora eu vou apenas criar um 1200 pixels, foram largos embrulhados e ir e fazê-lo muito rápido. E com o seu selecionado, vou criar uma nova ação. Eu vou chamá-lo 12 coluna Grade e apenas bater registro e ilustrador não vai gravar meus passos, então eu vou para a divisão em grade opção. Digite 12 para a contagem e 34 a sarjeta. Vou bater bem e vou parar de gravar. E agora cada vez em um criado 12 grão coluna com uma calha de 30 pixels, eu só vou tocar play e OK, e é assim que podemos simplificar o nosso trabalho dentro ilustrador. Então é isso para o 12 coluna bom processo de criação e ilustrador. Espero que tenham gostado e estejam ansiosos para ir para a próxima seção, que é sobre arame, então continue assistindo. 14. O que é um wireframe?: na palestra seccional sobre por que estão enquadrando um ilustrador. Quero mostrar-lhe o que é uma armação de arame e por que é aconselhável usar. Ele também irá construir nossa própria biblioteca de formas de arame que você pode usar em diferentes trabalhos de Web design Com estes primeiro, vamos entender o que um fio de é e a diferença entre quadros de arame e mais policiais. Bem, o mercado está quase que eles terminaram de projetar. Incorpora as cores da empresa. Ele usa imagens, topografia escolhida, etc. Em outras palavras, é uma representação visual do cliente. Breve. Este aqui é o mesmo design, mas você pode ver imediatamente que ele é muito simplificado. As cores desapareceram, as imagens foram substituídas por espaços reservados e tudo parece muito mais simples. E este é o propósito de uma armação de arame. É suposto dar-te um sentido geral fora do design. Bem, existem alguns princípios básicos ao montar quadros de arame, então vamos dar uma olhada neles agora. O meu arame armações cromáticas. Eu quero me distrair com a cor, então usei tons de cinza, coloquei pastagem mais clara em fundos mais escuros ou vice-versa. Para maior contraste, construí certa gradação. escuro significa mais importante e mais leve, mais malvado. Menos importante, é claro, você pode usar seu próprio esquema de cores. Ele não tem que ser tons de cinza usado ou o que você acha que é melhor suas necessidades e ajuda você a estabelecer o melhor contraste e relação entre os elementos U I I I I I 'll. Agora, a ideia-chave por trás dos quadros de arame é focar no conteúdo e mostrar como o usuário irá interagir com o conteúdo. Haverá espaço suficiente entre os botões? Então, para onde vão as imagens ou os ícones? O cultivado é grande o suficiente? É legível, etcetera? Trata-se de criar um projeto do site ou do aplicativo, não do design finalizado. Use formas simples como círculos ou quadrados que possam representar as imagens ou ícones. Também neste estágio usado texto de espaço reservado como Lauren Ipsum ou algum outro texto de espaço reservado de sua escolha apenas para obter uma noção de como os parágrafos vão olhar como quando você construir uma simulação acima do fio. Frank, você não poderia ir a milha extra para um cliente e na verdade substituiu Lauren Gibson por um texto mais adequado. Por exemplo, se um site é suposto ser sobre alimentos frescos. Crie alguns parágrafos simples sobre alimentos frescos. Isso fará com que a subida se sinta como você, como se você se importasse com o negócio dele ou dela. Crie um grupo de cores para o seu quadro de arame. Se você optar por trabalhar em forma é em tons de cinza ou algumas outras cores. Crie um grupo de cólera composto por 4 a 5 cores que você usará em sua armação de arame. E novamente, é melhor mantê-lo monocromático. Também é uma boa idéia para configurar a estrutura da camada direita para quadro de fio quando eu criar um quadro de fio, um uso camadas separadas ou sub-camadas para seções de cabeçalho. Barra lateral, rodapé, etcetera um separado rótulos ful mais tarde que explicaria o que certas partes dos U. Y são também vem em muito útil. E é particularmente útil quando se trabalha no projeto com outros designers ou desenvolvedores. Então agora que sabemos o que são armações e quais são os principais aspectos deles, eu acho que é o momento certo para aprender a construir um vai começar a fazer exatamente isso na próxima lição 15. Elementos de Wireframe: cores e imagens: neste vídeo, vamos dar uma olhada na criação de elementos de arame para nos ajudar a começar. Vamos dar uma olhada no layout da página de destino que montei para o propósito desta palestra. É um site simples para uma empresa falsa de nome, uma vida na cidade grande. E como você pode ver, nós temos uma grande urze com uma grande imagem de fundo semana acima das seções, e nós temos o rodapé com links. Agora, este design foi baseado nesta armação de arame, e eu acho que os elementos mais comuns para esse tipo de franjas de arame. Eu usei símbolos de imagem do menu de logotipo e notei que há imagens retangulares, elípticas e quadradas aqui de seus botões e fundos. O que também é importante notar aqui é a estrutura da camada, tanto o design quanto o quadro de arame usando convenção de nomenclatura que corresponde ao que você veria em uma estrutura típica do site. Então nós temos a cabeça uma camada, nós temos seções e o rodapé. Ok, agora que temos tudo isso explicado, vamos criar os elementos de arame mais comuns. Então eu fui movido para outro documento, e antes de eu começar a criar qualquer coisa em um make a arte a bordo muito mais alto do que é largo, e eu vou explicar por que no vídeo mais tarde. Por enquanto, vamos apenas cabeça para a arte da ferramenta placas e esticar o artigo para gostar de sabão. Acho que deve ser agora. Vou começar com as cores para o quadro da minha esposa, e eles também vão funcionar como meus fundos. Então eu vou pegar o retângulo e criar um retângulo, assim como eu vou torná-lo preto sem traçado, e agora eu vou duplicá-lo cinco vezes. Faça o certo, e o último deles terá um Phil branco. Claro, podemos agora ir ao painel de amostras e escolher os colares Grace Kate gostariam, mas eu quero mostrar uma técnica diferente. Pegue todos esses caras. Eu vou para o viciado cores adicionadas, e eu vou escolher misturar horizontalmente para obter uma boa gradação de preto para fora branco. Agora, o benefício desta técnica é dizer que se você não quer uma escala de cinza porque você é um grande fã da cor verde e você quer que seu quadro de fio pai seja verde agora o que, você pode fazê-lo em vez de descobrir com tons de verde para usar, você poderia simplesmente adicionar um verde escuro, falhou para o primeiro retângulo e verde mais claro para o último. E, uh, vá para a edição e cores e misture horizontalmente para entrar nos olhos. Escala verde. Sim, isso é o que é. É uma escala verde, mas acho que fiquei com os condomínios Grace em “Faça aquela última modificação”. Ok, agora vou criar imagens de paisagem para a moldura da esposa. Então, o que posso fazer? Eu é apenas Aiken duplicar este retângulo, e como você provavelmente sabe, maioria dos milers de computador contemporâneo exibir a imagem na proporção 16 por nove. Mas a imagem na tela tem tamanhos diferentes, certo? Então, para manter o aspecto Rachel intacto, mas também preservar a liberdade de imagens de tamanhos de imagem que queremos usar, Vamos no painel de controle. Certifique-se de que nosso retângulo de roupas tem seis e pixels de largura e nove pixels de pedágio. É como se estivéssemos simulando a proporção de 16 por 9, e agora a opção de restrição de proporções verificada. Vamos inserir algum valor como 100 e 50 pixels para obter um retângulo maior. Não, vou criar duas linhas de cruzamento e, ah, quero que sejam bem escuras. Vou agrupar todos esses caras e vesti-los para a direita. Tornar esse cara maior. Alguns gostam de 320 pixels de largura, talvez, e também criar o último. E esse cara vai parecer com 400 pixels de largura agora profundamente cortado. Provavelmente fazer as imagens maiores. Mas como eu estou gravando em apenas 77 20 p para sua conveniência, eu estou mantendo as imagens pequenas e outro rápido conhecido aqui. Se você quiser, você pode começar com apenas um retângulo. Você sempre pode ajustar seu tamanho mais tarde, realmente, dependendo de suas necessidades. Ok, agora vá em frente e crie uma imagem quadrada para o quadro da minha esposa, e eu vou fazer isso com a ferramenta de retângulo. Basta clicar em qualquer lugar do documento e entrar de 50 pixels para com e altura. Agora novamente criar duas linhas de cruzamento e eu estou usando o reflexo dito pelo caminho para criar este cruzamento, eu vou agrupar todos esses caras, e eu acho que eu vou ficar com apenas este quadrado. Eu queria ser um ávido tipo er de símbolo, e eles geralmente são bastante pequenos. Eu também poderia criar um avatar elíptico, símbolo de avatar ou um símbolo de ícone. E farei isso duplicando o quadrado. Vou fazer as linhas de cruzamento um pouco menores. Claro, eu preciso ter um grupo esses caras primeiro e com quadrado selecionado, eu vou para o menu Efeito. Eu vou escolher cantos redondos estilizados, e eu vou em torno dos cantos até que eles formam o círculo fora do meu quadrado. Claro, preciso expandir a aparência e agruparei esses caras de novo. Ok, ótimo. Mas é claro, sites contemporâneos são que não só com imagens, mas vídeos também, certo? Alguns também criam espaços reservados de vídeo . Tudo o que precisamos fazer é clonar um fora da nossa imagem, colocar os titulares em um grupo e excluir as linhas e com a ferramenta polígono, clique e arraste e também pressione a tecla de seta para baixo. Para obter um triângulo agora vai simplesmente girar até que pareça um botão play. E lá vamos nós. Temos as cores, imagens e vídeos prontos para a nossa esposa. O Frank. Na próxima palestra irá adicionar tipografia e botões flexíveis. Então, se você estiver interessado, continue assistindo 16. Tipografia e botões flexíveis: topografia. Elementos em nossa esposa da biblioteca conterão títulos ou títulos, frases simples e parágrafos únicos. Então eu começaria com os títulos. Vou pegar o clique Type dois e arrastar o documento para criar uma caixa de texto. Vou digitar o título um. Vou tornar o fundo consideravelmente grande. Algo como 42 pixels deve fazer, e eu também vou torná-lo em negrito, uma vez que os elementos de cabeçalho são geralmente bowled. Agora vamos clonar esse cara para baixo, mudar para o rumo e torná-lo menor para cerca de 32 pixels. Farei o mesmo para a rubrica três. Sem rumo quatro. E acho que vou parar aqui se você for. Se você quiser ir até a sexta posição, é com você. Agora eu quero criar frases e parágrafos únicos. Para isso, precisarei de um imposto como Lauren Gibson, certo? Bem, infelizmente, ilustrador não tem uma opção para apenas texto de espaço reservado baseado, como em uma loja de fotos ou em design. Então o que poderíamos fazer é usar as vistas do que fornecer texto de espaço reservado. Ou poderíamos usar um plug in para isso e o plug em que eu uso é gratuito e na verdade bastante útil. Infelizmente, você Timmy não permite que mais lhe mostre o link direto para ele. Então eu só tenho que aconselhá-lo ao Google. Pesquise o termo Lauren Gibson plugging illustrator e clique no primeiro resultado da pesquisa. Tudo o que você precisa fazer é instalá-lo e, em seguida, você pode encontrá-lo sob uma extensão de janela. E aqui vou gerar um pouco de Lauren Epsom e com o tipo. Vai criar uma caixa de texto, pegar uma frase de Lauren Epsom e colá-la. Agora eu quero ver parágrafo e três parágrafos também. Sair não vai ouvir caras ao adicionar parágrafos fora de texto como este, tentando não criar quebras entre os parágrafos pressionando, Enter ou retornar duas vezes hitter Andrew uma vez e, em seguida, ir para o painel de parágrafo e definir o espaço após parágrafo para o que você quiser. Ah, geralmente não vão mais de 20. Agora vamos passar para botões flexíveis. Vou clicar no verão aqui e apenas digitar algo genérico como botão. Acho que pode conseguir. Não há mais dinari do que isso, a propósito, se quiser usar essa técnica, não crie uma caixa tributada. Basta clicar e digitar. Caso contrário, esta técnica não funcionará. Então agora vamos para o painel de aparência e aqui vou criar para o Phil. O topo será o meu off branco, então apenas simples ele e o fundo um pode ficar preto agora com o preenchimento preto selecionado toda cabeça sobre este símbolo FX. Selecione, convertido em forma e escolha retângulo foi extremamente importante. Aqui está para deixar o tamanho como relativo, mas você pode definir os valores de largura e altura extras ao seu gosto. Agora deixem-me mostrar-vos o maior benefício desta abordagem. O que? Eu quero mudar o nome para outra coisa como enviar ou talvez ler mais. O fundo dos botões está mudando dinamicamente. Muito legal, não é? Mas eu vou levá-lo até um nível e criar espaço reservado local dinâmico. Vou carregar o botão, duplicar o preenchimento inferior e mudar a opção de forma convertida para elipse. Vou mudar o tamanho do dedo do pé absoluto e basta clicar em OK, nenhuma transformação senhora porque eu quero mover meus lábios para a esquerda. Então, em um valor negativo na opção de movimento horizontal. E aqui estão os meus lábios. Agora posso voltar às vidas. Posso mudar seu tamanho um pouco, e vou digitar algo como, um, um, empresa local, por exemplo. E lá vamos nós. Temos os botões flexíveis e locais criados. Claro, você pode mudar as cores se quiser ou brincar com o tamanho. Mas essa é a beleza dos botões flexíveis ou dinâmicos. Você pode alterá-los do jeito que quiser em um instante. O último fio do Elemento Eu quero mostrar-lhe Aqui é o menu, e criá-lo é tão fácil como simplesmente digitar no item de menu do que ir para o menu distorcer e transformar transformar e os anúncios proprietários, digamos, três cópias e mova-os horizontalmente. E eu quero mantê-lo dinâmico porque dependia do meu cenário de design, eu poderia querer aproximar os elementos deles, ou talvez colocá-los mais longe um do outro. Ou talvez adicionar ou subtrair elementos de menu. Certo, antes de terminarmos essa palestra, vamos organizar nossa biblioteca. Então primeiro temos cores e imagens, então vou digitar isso. Agora eu vou clonar esse cara, tipo e tipografia, e eu vou fazer o mesmo para os botões e menus. Claro, nossa biblioteca poderia ser expandida com elementos de forma ou mídias sociais. I armas ou prejudicar ícones de menu hambúrguer, e eu realmente encorajá-lo a fazer isso. Mas agora você deve entender o método e o propósito de construir uma biblioteca de arame . E no próximo vídeo, vamos explorar como realmente usá-lo em um projeto de Web design. 17. 2 maneiras de usar biblioteca de wireframe: neste vídeo, vamos nos concentrar em usar nossa biblioteca de molduras da esposa. Se você estiver trabalhando comigo, espero que você já tenha sua própria biblioteca criada ou esteja usando a que eu lhe forneci . Bem, há duas maneiras de usar uma biblioteca de arame. O 1º 1 é criar uma biblioteca de símbolos de todos os seus elementos, e o outro é o que eu chamo de um método de tela dividida. Se você quiser criar uma biblioteca de símbolos a partir dos elementos da sala de sua esposa, é tão fácil como selecionar qualquer um de seus objetos e ir para o painel de símbolos e no menu de batalha, escolhendo um novo símbolo. Basta dar-lhe um nome descritivo, e agora toda vez que você quiser usá-lo, você pode simplesmente arrastá-lo para o seu documento. Assim, depois de terminar de criar sua biblioteca, você pode salvá-la facilmente para que possa usá-la em qualquer um de seu futuro projeto de Web design. A maior vantagem dessa abordagem é o fato de que o uso de símbolos reduz o tamanho geral do arquivo, e a maior desvantagem é que você perde que efeitos dinâmicos se aplicam a seus objetos como os botões flexíveis. Agora, se você estiver usando qualquer versão de pílulas para CC, você pode tirar proveito de algo chamado bibliotecas. trabalho funciona da mesma forma que qualquer outra biblioteca no Illustrator, mas também preserva os efeitos dinâmicos dos seus objetos. Então vamos dar uma olhada agora no método de tela dividida que mencionei antes. Para isso, vou criar rapidamente um novo documento. E agora, a partir da guia organizar documentos, eu vou selecionar para cima para que eu possa dividir minha tela como sabão. Vou ajustar um pouco, e agora você pode ver por que eu fiz meu documento de biblioteca de quadros mais amplo um pouco mais alto. E agora tudo que preciso fazer é Dragon Element. Eu preciso para o meu documento quadro de arame e construir, digamos, um blawg gabar armação de arame, marcar com alguns cliques e arrasta assim. Então estes não são dois métodos fora. Usando a moldura da sua esposa. Escolha aquele que se adapte às suas necessidades que funcione melhor no seu fluxo de trabalho. Então, nesta seção, aprendemos o que é um quadro de arame e por que é importante ter que construir seu próprio quadro de arame e, por último, como usá-lo para construir elementos de layout da Web na próxima seção. vai dar uma olhada na finalização de um projeto de Web design, irá incorporar alguns arquivos de poupança de imagens, criar notas e especialista para arquivo para loja de fotos. 18. Como entregar o design a um cliente: nesta seção aprenda como finalizar nosso projeto de Web design antes de entregá-lo ao cliente ou o desenvolvedor da Web verá como salvar nosso arquivo, no entanto, incorporar imagens e como exportar um arquivo ilustrador para a loja de fotos depois de seu design brilhante está pronto, ou pelo menos a primeira versão do mesmo. É hora de entregá-lo ao cliente, e você tem duas opções aqui. Você pode salvar seu design como você salvaria qualquer imagem para uso da Internet. E é tão rápido e fácil como ir ao menu de arquivos e escolher seguro para Web. Você sempre pode usar o controle Antigo mais além do Shift Plus s no teclado e em um Mac você iria para a opção Command shift s aqui. Podemos escolher entre vários formatos de imagem, mas eu ficaria com apenas dois deles J, Pack e P e G 24. Se você for para J pad, você pode ajustar a qualidade da imagem. E, claro, má qualidade significa menor tamanho arquivado. Mas se o seu design contiver algumas imagens que usaram transparência, ele será perdido. Se você precisa de transparência, vá para P e G P e J é amplamente suportado, oferece boa qualidade e um espectro de cores completo. Mas o tamanho final é um pouco maior do que J pic, então tudo depende do tipo de design que você deseja apresentar ao cliente. Além disso, se for uma armação de arame, velho Jay Peak será suficiente. Este método tem uma grande desvantagem. Se o seu design contiver várias placas de arte com vários layouts, como layout de tablet ou layout de smartphone. Além de um layout de área de trabalho padrão do que salvar para a Web seria salvo, apenas um é pobre. Então, se você quiser obter o melhor de ambos os mundos, salve todos os mandris em um arquivo e preserve a alta qualidade do seu design. Basta ir para PDF. PDF é amplamente suportado, e nenhum de seus clientes deve ter quaisquer problemas de visualizá-lo, mesmo que eles não tenham Adobe Reader instalado navegadores da Web como Chrome ou Firefox handle. PDF está ótimo. Então salvar arquivo como um PDF. Basta ir para o menu de arquivo, salvar como e escolher. PDF e acima é aqui em baixo que você tem a opção de salvar todos os nossos álbuns ou escolher quais deles dizer. Agora, a partir das predefinições, vou escolher o menor tamanho de arquivo, que irá injetar a maioria das opções. E, na verdade, é uma coisa boa, porque nós realmente não temos. Você não precisa que nosso cliente tenha a capacidade de adicionar este arquivo ele mesmo. Eu não só acerto, ok? Ilustradores idéia do menor tamanho de arquivo não é realmente torná-lo o menor tamanho de arquivo possível. Deixe-me mostrar que você quer muito, muito útil site onde eu encolher meu PDF ainda mais agora. Este sinal é chamado de ponto com pequeno período, e aqui eu posso apenas arrastar meu arquivo, deixá-lo fazer sua magia, e os resultados são absolutamente de tirar o fôlego. Eu acho que a redução média de tamanho de arquivo que eu tenho aqui é em torno de 50%, o que é simplesmente incrível. Então, após a compactação, tudo que você precisa fazer é descer no arquivo, nomeá-lo corretamente como uma nova versão de design um. É sempre uma boa idéia fornecer versões de seus arquivos, enviá-lo para o cliente e aguardar o feedback. Agora, no próximo vídeo, vamos dar uma olhada em preparar nosso projetado para ser entregue a um desenvolvedor da Web. Então fique atento 19. Exportando para o Photoshop: Então, quando seu cliente está satisfeito com o design e desde que você não desenvolva o site sozinho, é hora de entregá-lo a um desenvolvedor. E para isso precisamos fazer algumas coisas. Primeiro, vamos para o menu da janela e escolher links. E aqui podemos ver todos os objetos de link em nosso design, e o comprimento da palavra é realmente importante aqui. Se entregássemos o arquivo assim, a pessoa que o abrisse receberia um aviso sobre imagens desaparecidas, e definitivamente não queremos isso. Então, se você clicar em qualquer imagem no canto superior esquerdo, você verá as palavras imagem vinculada. E o que queremos fazer é rebocá-los mal em nosso documento. Então, a maneira mais rápida de fazer isso é simplesmente selecionar todas as imagens no painel de links e manual do painel. Escolha em imagem ruim. Bom. Não ouço caras. Se você estiver em imagens ruins no Illustrator CS seis e versões anteriores, não será possível incorporá-las. Mas você pode fazer isso no Illustrator Assis. Agora que conseguimos, a imagem está embutida. Agora que conseguimos, Vamos criar algumas informações úteis para o desenvolvedor. Vou criar uma nova camada e chamá-la de notas, e o que eu quero fazer aqui é que eu quero indicar quais fontes e cores usadas. Então apenas digite os fundos e para o logotipo. Também usei lagosta para o corpo. Kobe são usados cabine e para os fundos são usados cabine, também. Quanto às cores, o que normalmente fez para tornar o fluxo de trabalho mais rápido. Eu crio retângulos simples com cores Phil correspondentes às cores usadas em todo o site, e é uma boa prática não ir ao mar com o número de cores. É ótimo mantê-lo abaixo de seis, então crie os retângulos e experimente as cores. Vou começar de cima, então uma amostra, a cor local. Então é essa cor do botão e esses ícones chamador, precisamos adicionar a cor da cópia do corpo, é claro. E esta parte da comida, o fundo de informação de direitos autorais é o mesmo. Cólera é a cópia corporal. Não que tenhamos tudo isso. O que eu quero fazer é selecionar um retângulo de cada vez, clicar duas vezes sobre o filme e apenas copiar o valor de cor de hacks realçado, e eu quero baseá-lo em como texto. Vou duplicar algumas vezes e começar a copiar o resto da cor. Inflexível. A razão pela qual estamos fazendo isso é que será muito mais fácil para o desenvolvedor ou você mesmo se você desenvolver ao lado de si mesmo apenas copiar as informações de cor e com base em código. Em vez de amostrar a cor para verificar o código hexadecimal e, em seguida, copiá-lo e colá-lo antes exportar o arquivo para um PSD, vamos organizar rapidamente o documento dela. Quando você manipular arquivo sobre a pessoa que recebe ele será capaz de trabalhar nele muito mais rápido se a convenção de nomeação do projeto é lógico e direto. Então, além de nomear corretamente as camadas principais, por assim dizer, vamos nomear os objetos também. Então, por exemplo, no grupo esses caras aqui e chamar essa câmera de grupo, esses caras serão chamados de chapéu e esses caras. Vamos chamá-los de café. Eu não continuo esse entendimento durante todo esse design, então quando exportamos o arquivo para a loja de fotos, será mais fácil distinguir o elemento do design. Então vamos fazer isso agora, sim? Vamos para o menu de arquivos, escolha exportar e meus últimos quatro meses serão Photoshopped PST. O modelo de cor, é claro, será a resolução RGB será definida para 72 pp I e para as opções que eu quero ir para a máxima credibilidade. Então eu quero montar as camadas e manter todo o resto verificado. Não só acertar. Ok? E agora vou para a loja de fotos e abri meu arquivo. Ok, então este é o nosso arquivo na loja de fotos foram rapidamente criadas camadas de fundo, para que você possa ver tudo melhor. Como você pode ver, Illustrator fez um bom trabalho exportando nosso design que temos tudo aqui. Recebemos nossas anotações. Temos nossas camadas com nomes próprios e ainda podemos adicioná-lo. O imposto se escolhermos Então, se você estiver trabalhando com um desenvolvedor que insiste absolutamente em receber um PSD de você, veja como você pode entregá-lo. Usando o ilustrador trabalhando desta forma dá-lhe o melhor de ambos os mundos. Você pode projetar livremente um layout usando ferramentas poderosas de ilustrador, mas você ainda pode exportar tudo para loja de fotos, se desejar. Então agora no próximo vídeo, vamos encerrar o curso, então fique atento 20. Vamos resumir o que aprendemos: Então aqui estamos nós. Nós fizemos isso através do curso. Espero que tenha gostado e aprendido muito. Então agora você deve pelo menos começar a desenvolver seu próprio Web design. Fluxo de trabalho Como demonstrado na primeira seção, você deve entender os princípios do bom design, saber como configurar ilustrador para um trabalho de Web design, como criar as armas e espaço de trabalho e um novo documento para Web design e como construir seu próprio modelo de Web design responsivo. Você deve saber a importância do enquadramento de fios e construir sua própria biblioteca de arame e saber como apresentar seu design final a um cliente e como preparar um documento para um desenvolvedor da Web . Então tudo o que você precisa fazer agora para começar o design. Mas se você não sabe como começar a fazer isso ou quiser ver a parte de design real no ilustrador, dê uma olhada em meus outros cursos onde eu mostro exatamente isso. Espero que gostem deste curso. Meu nome é David Tomaszewski e tem um belo design