Projeto do curso
Meu projeto do curso de web design: seja responsivo!
Mi Proyecto del curso Diseño web: Be Responsive!
de Francisco Aveledo @fad
- 4,667
- 55
- 19
(Traduzido automaticamente de espanhol)
Este é o projeto que criei para o curso de Web Design Responsivo[/url] visual). É uma reformulação do meu portfólio digital. Ao longo do curso [url=https://www.domestika.org/es/courses/34-diseno-web-be-responsive]explico o processo, desde a concepção da ideia até a preparação dos arquivos para uso por um programador.
Este es el proyecto que he realizado para el curso de Diseño Web Responsive (visual). Se trata del rediseño de mi portafolio digital. A lo largo del curso explico el proceso desde la concepción de la idea hasta la preparación de los ficheros para ser usados por un programador.
Design de desktop
Desktop design
Design de tablet
Tablet design
Design móvel
Mobile design
19 comentários
luispinalopes
Parabéns Francisco, adoro o seu trabalho. A experiência visual do usuário é ótima com os gráficos.
fad
Professor PlusOlá Luis,
Obrigado por seus comentários, é apreciado!
microbians
StaffBonito!
myteachingcrew
Que legal o projeto @fad Parabéns!
fad
Professor PlusObrigado rapazes! Tenho feito de forma simples para que o processo seja bem compreendido. Será interessante ver os projetos dos alunos.
juan_guillermo_rodriguez
Gostaria de aprender como programar este tipo de site, qual programa você recomenda usar?
fad
Professor PlusOlá Juan,
Depende da linguagem de programação que você usa. Existem muitos aplicativos visuais para programar, embora um programador puro e simples geralmente use um editor de texto e pouco mais.
Existem também programas com os quais você não precisa saber muito sobre código, como Adobe Muse, Macaw, Webflow e recentemente (ainda em período de teste) Adobe Edge Reflow. São programas visuais com os quais você pode configurar um site sem saber programação.
edusaenz
Parabéns pelo projeto @fad
Seguindo o tópico dos comentários anteriores ... qual programa você usa para fazer o layout das webs? Ou você os prepara com o photoshop para que outra pessoa os programe?
O photoshop é realmente o programa mais adequado para criar websites? Que tal sketch3, fireworks (sabendo que ele desaparece), ilustrador ... ou qualquer um dos que você mencionou acima?
Eu sei que são todas questões :)
fad
Professor PlusOlá @edusaenz ,
Eu parei de projetar (construir) sites há muito tempo, costumava usar o Dreamweaver e hoje ainda uso para fazer algumas modificações no código, CSS e coisas assim. Acho que este tópico pode ser melhor respondido por um programador.
O Photoshop é uma opção típica para quem vem do mundo do design visual, mas é cada vez menos usado para criar sites *. O que acontece é que é cada vez mais comum o web designer vir de uma formação técnica, de desenvolvimento, para a qual muitos web designers atuais estão projetando diretamente no aplicativo onde montam, mesmo que o estágio anterior do design visual às vezes seja suprimido. de alguma forma e é por isso que vemos tantos sites semelhantes e com estruturas muito semelhantes. É aqui que argumento que é necessário aprofundar na parte do design puro, antes de entrar na parte técnica. Isso é feito por muitos, outros nem tanto, depende também de cada projeto.
Sketch é uma opção, embora eu tenha entendido que era mais focado em aplicativos, mas para ser sincero não o conheço bem. Muitos designers estão projetando sites no Illustrator porque com o HTML5 você pode usar elementos do formato SVG, que é o formato vetorial e, portanto, os elementos podem ser redimensionados em qualquer tamanho sem perder qualidade. Acho que essa é uma boa opção.
Em princípio, o Fireworks é mais prático do que o Photoshop, pois foi projetado para fazer a web. Se outro desaparecer, ele o substituirá. Você tem que pensar que o Photoshop para tudo isso não é um aplicativo para design, mas é tão importante no mundo do design que tem sido usado em muitas áreas que não correspondem a ele, como fazer logotipos. Certa vez, conheci um designer que montou uma revista inteira no Photoshop, puff! :)
* O motivo pelo qual o Photoshop foi escolhido para este curso foi para facilitar o processo para muitos designers gráficos que já conhecem este aplicativo, mas não é vital fazer sites com PS, não há nada de errado em usá-lo, no final é simplesmente a ferramenta que nós o usamos para capturar uma ideia visual que mais tarde será montada de outra maneira.
unmedia
Olá @edusaenz ,
E que tal a Indesign para criar um site ? Pessoalmente, me sinto muito confortável com isso, mas não costumo encontrar grades tão facilmente quanto no photoshop.
Eu queria saber se é correto trabalhar com a indesign para criar um site e se você conhece algum site onde haja Grids for Indesign.
Obrigado e parabéns pelo curso, acho que vai me ajudar muito.
fad
Professor PlusOlá @unmedia
Ouvi dizer que algumas pessoas usam o InDesign para webs, pois também tem opções de saída para HTML e CSS, mas entendo que essas funções não são confiáveis.
A grande vantagem do InDesign é que você tem uma série de recursos práticos quando se trata de criar páginas mestras e objetos que podem ser facilmente repetidos nas bibliotecas. Isso pode ajudá-lo a fazer o esboço de um site inteiro de uma forma prática e fácil de reeditar. Pode ser uma boa ferramenta para fazer wireframes digitais, ou o esboço preliminar de um site a ser montado.
Acredito que qualquer opção que seja prática para cada um é válida. No final das contas, sites não são montados cortando todos os elementos de outro aplicativo, então não importa se você os monta no Photoshop, InDesign, Illustrator, etc. O que você fizer nesses programas será sempre um esboço antes da montagem, o importante é seguir uma estrutura lógica que seja fácil de desenvolver levando em consideração os princípios técnicos das teias.
Aqui estão alguns links para artigos (em inglês) sobre o tema InDesign para webs:
https://www.oss-usa.com/blog/best-web-design-tool-indesign-vs-photoshop
http://www.creativebloq.com/indesign/build-websites-61412106
http://dingdigital.co.uk/building-a-web-page-from-an-indesign-file
http://indesignsecrets.com/indesign-create-uxui-designs.php
edusaenz
Olá @unmedia e @fad , @fad por não ter respondido antes, mas entre as partes ... Etc etc ...
Eu pessoalmente uso o Illustrator para projetar sites, no estúdio fazemos sites sob medida para o cliente, wireframes em balsamiq, pousos personalizados, conteúdo muito focado em SEO, etc. Mas não sei até que ponto é lucrativo, hoje você pode modificar templates prontos e a verdade é muito vistosa.
Não vejo no photoshop uma ferramenta ótima para fazer sites, pelo menos não sites que tenham muitas páginas, se isso é bom para sites (uma página). Indesign é uma boa opção para criar páginas-mestre, biblioteca de ícones, etc.
Enfim, cada professor tem sua apostila.
De qualquer forma, continuo procurando o programa que me permite desenhar sites com sua versão responsiva, etc.
Obrigado por responder a ambos e pelas informações enviadas.
fad
Professor Plus@danielpechugas Muito obrigado pelo seu comentário Daniel! Felicidades
nattibortega
Olá Francisco, Acabei de me envolver com tudo que é Domestika, estou interessado neste curso, e gostaria de saber se isso me ajuda a fazer páginas web? além de gerar portfólio ... Muito obrigado !!
fad
Professor Plus@ortega-natalia-b Olá, sim, neste curso eu ensino os princípios básicos de web design. O projeto que realizo para o curso é um portfólio, mas os princípios vão te ajudar a enfrentar os sites em geral. Leve em consideração que o curso cobre apenas a fase de design visual, não aborda a programação. A ideia deste curso é que qualquer designer tenha a capacidade de desenvolver o design visual de um site, mas este terá que ser montado por um programador, a menos que tenha conhecimentos técnicos.
O Domestika provavelmente lançará um curso sobre programação ou modificação de modelos WordPress nos próximos meses. Esses cursos serão um complemento perfeito para esta parte visual.
Se você tiver mais perguntas ou quiser me perguntar outra coisa, pode escrever para mim em: design @fa-d .com
Felicidades!
fa
lluna
Olá @fad ,
Acho interessante o seu projeto para o curso de Web Design Responsivo (as capturas de tela que você mostra aqui, na Domestika), embora não as veja aplicadas online. Ou seja, fui para o seu portfólio online (www.fa-d.com), mas não vejo que seja responsivo ... não é?
Saudações.
fad
Professor Plus@la_m Olá Marta, isso mesmo! Infelizmente tenho andado tão ocupado com outras coisas que não tive tempo de montar o meu próprio site, na casa do ferreiro ... O site que eu desenhei há 5 anos e não o atualizo há muito tempo.
No início, eu queria fazer isso com um aplicativo de montagem sem conhecer o código, como Webflow ou Adobe Muse. A ideia era testar esses aplicativos para ver como são simples, para que eu possa fazer uma revisão para meus alunos, mas não tenho conseguido fazer isso e talvez precise contratar um programador para criá-los.
De qualquer forma, preciso ter meu site em breve, possivelmente para janeiro ou fevereiro.
viajeradelaluz
Olá, venho aqui porque estou procurando um curso de web design puro, ou seja, deixando de lado a parte de desenvolvimento já que estou trabalhando nisso em outros workshops. Mas queria saber, dada a idade do curso, se teria uma atualização em relação à ferramenta utilizada, ou seja, o PS. Estou começando neste mundo da Web e pelo menos onde tenho consultado, usar PS é mal visto. É considerado perda de tempo porque (dizem) o verdadeiro design da web começa no seu desenvolvimento, isto é, sem mais ou menos código. Cada vez que me atrevo a trazer o assunto à tona, a solução parece ser aprender código a níveis avançados para alcançar os resultados desejados, ou projetar a Web usando programas que escrevem o código em trabalho interno como o Muse, ou projetar apenas esboços muito rápidos. para ir imediatamente para o código. De repente, tenho problemas.
fad
Professor PlusOlá @jonna ,
Faço o curso usando Photoshop, não tem atualização. É verdade que o Photoshop foi descontinuado nos últimos anos e que a parte de desenvolvimento de um site cobriu todo o processo desde o início. Mas o próprio Photoshop foi atualizado para permanecer útil no design da web. Também é verdade que o destaque do código levou o web design ao seu estágio mais enfadonho e simples, onde a grande maioria dos sites hoje são praticamente os mesmos. É difícil encontrar um bom programador que projete bem ou vice-versa.
O ideal é dominar ambas as áreas, mas a programação não é algo que qualquer designer visual queira dominar ou apreciar, são duas disciplinas diferentes e a programação é uma área bastante complexa se você quiser dominá-la bem. Depende também de como você trabalha, sempre ofereço design visual sem programação e sempre haverá clientes que se saem bem assim. Leve em consideração que encontrar um bom designer visual é mais complicado do que um bom programador, por isso muitas empresas tendem a buscar o design visual separadamente e resolver a programação internamente ou sabem que será mais fácil encontrar um programador. Eles valorizam mais a parte visual.
Eu recomendaria o uso de programas como Muse ou Webflow. Para mim são a verdadeira ferramenta atual de um designer visual, pois permitem montar sites sem ter que se tornar um especialista em programação. Pelo menos com esses programas você pode criar maquetes funcionais para que os clientes tenham uma ideia melhor do projeto e, se precisarem de uma programação mais complexa, podem contratar um especialista nessa área. Se você pode iniciar projetos diretamente nesses aplicativos ou começar a esboçar no Photoshop, dependerá do seu processo de design. É melhor para mim começar com o Photoshop porque já o dominei e lá posso fazer muitas alterações. Isso é pessoal, cada um será diferente. Prefiro me concentrar puramente no visual e depois no código para me adaptar ao design, e não o contrário, que é o que está acontecendo muito hoje.
Meu curso tenta ensinar os princípios do design visual e como criar um portfólio web (algo simples) em seu estágio visual. É um curso simples para iniciantes em web design e ajuda a visualizar essa fase do design. Nesse sentido, você se sairá bem e poderá complementá-lo aprendendo o Muse ou qualquer programa semelhante.
Para qualquer outra dúvida, você pode me enviar uma mensagem.
Felicidades!
Francisco
Faça login ou cadastre-se Gratuitamente para comentar