← Desenvolvimento

Layouts

Lida 3256 vezes

Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Boa tarde,

Andava à procura de tutoriais de criação de layouts, mas os que encontrei não eram de grandes "palavras". Alguém sabe me indicar algum?

Cumprimentos
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Apenas design, ou também código?
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Ambos, quero aprender a realizar os layouts. Por completo.

Cumprimentos
Octávio Alves
Offline

João Pacheco 
Membro
Mensagens 226 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Viva :)

Se tiveres uma noção das estruturas fundamentais em um web-site o resto é dar asas á criatividade.

É para implementar em algum CMS?


João
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Eu vou explicar melhor o que pretendo...
Eu gosto de aprender, muito mesmo. E quero aprender, o nascer do site, desde o primeiro ponto em que surge na nossa mente. Não sei exatamente por onde se deve começar, por isso se me pudessem ajudar, agradecia. Quero aprender a fazer tudo.

Cumprimentos
Octávio Alves
Offline

João Pacheco 
Membro
Mensagens 226 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Na questão de código/estrutura tens algo por aqui totalmente em português, para teres a noção do que irás construir (isto é só um exemplo de estrutura, poderás sempre mudar)

http://www.webmasterajuda.com/web-design/html/as-bases-do-html-estruturar-um-site/

No design tens ai o edumicro para te ajudar  :)
Offline

apaulo 
Membro
Mensagens 345 Gostos 1
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

A minha sugestão é ires ainda mais atrás... mesmo ao "nascer do site", como dizes.

Para que vais construir um site? Quais os objectivos do site?
Para alcançar esses objectivos, que conteúdo deve ter? Que funcionalidades?

Quando tiveres respostas completas e abrangentes q.b. a essas questões, várias pessoas aqui poderão sugerir-te ferramentas de construção de sites para explorares.

Começar pelos "layouts" (pois foi assim que iniciaste este tópico) é um bocado como começar a desenhar um edíficio sem saber se é para habitação ou trabalho, quantas pessoas vão viver ou trabalhar lá dentro...
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

A minha sugestão é ires ainda mais atrás... mesmo ao "nascer do site", como dizes.

Para que vais construir um site? Quais os objectivos do site?
Para alcançar esses objectivos, que conteúdo deve ter? Que funcionalidades?

Quando tiveres respostas completas e abrangentes q.b. a essas questões, várias pessoas aqui poderão sugerir-te ferramentas de construção de sites para explorares.

Começar pelos "layouts" (pois foi assim que iniciaste este tópico) é um bocado como começar a desenhar um edíficio sem saber se é para habitação ou trabalho, quantas pessoas vão viver ou trabalhar lá dentro...


Obrigado pela sugestão. Eu tenho várias ideias, mas para as realizar necessito de ter a noção (pelo menos) básica do necessário para as fazer.

Cumprimentos
Octávio Alves
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Basicamente, de um forma bastante simplificada. (sem determinados procedimentos).

Isto claro que nem todos fazem isto tudo por esta ordem, muita gente pega logo no Photoshop e faz conforme lhe vem a inspiração à cabeça. (para projectos de lazer e treino resulta, mas para projectos sérios convém seguir a lista em baixo).

- Estudo do "mercado", de forma a criar um design que se enquadre bem no tema/nicho do projecto.

- Criar uma "To-do" list, como uma forma de planear todo o processo, juntamente com uma boa lista de inspiração.

- Criação de uma Wireframe em papel e/ou utilizando software para o efeito.

- Desenho de todos os elementos gráficos do website no Adobe Photoshop, de forma ao desenho ficar visualmente muito próximo do que ficará na forma "codada".

- "Slice" dos elementos gráficos presentes no .psd.

- Codificação do website em linguagens de marcação (html/css), e validar o código.

#Opções

- Integração num CMS, como Wordpress, Joomla, Drupal, etc...

...

Isto claro que está explicado de uma forma muito SIMPLES, e que existem muitos mais passos entre os principais.
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Basicamente, de um forma bastante simplificada. (sem determinados procedimentos).

Isto claro que nem todos fazem isto tudo por esta ordem, muita gente pega logo no Photoshop e faz conforme lhe vem a inspiração à cabeça. (para projectos de lazer e treino resulta, mas para projectos sérios convém seguir a lista em baixo).

- Estudo do "mercado", de forma a criar um design que se enquadre bem no tema/nicho do projecto.

- Criar uma "To-do" list, como uma forma de planear todo o processo, juntamente com uma boa lista de inspiração.

- Criação de uma Wireframe em papel e/ou utilizando software para o efeito.

- Desenho de todos os elementos gráficos do website no Adobe Photoshop, de forma ao desenho ficar visualmente muito próximo do que ficará na forma "codada".

- "Slice" dos elementos gráficos presentes no .psd.

- Codificação do website em linguagens de marcação (html/css), e validar o código.

#Opções

- Integração num CMS, como Wordpress, Joomla, Drupal, etc...

...

Isto claro que está explicado de uma forma muito SIMPLES, e que existem muitos mais passos entre os principais.


A ver se entendi.

Desenho o "site" como gostaria que ficasse, através do photoshop, depois faço um slice, ou seja, separo todos os elementos do desenho, depois codifico e integro. é isso?

Cumprimentos
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

A ver se entendi.

Desenho o "site" como gostaria que ficasse, através do photoshop, depois faço um slice, ou seja, separo todos os elementos do desenho, depois codifico e integro. é isso?

Cumprimentos
De uma forma bastante simplificada, basicamente é isso.

Mas claro muita gente prefere passar logo ao código e fazer "o design" "on the fly" sem fazer um estudo gráfico via Photoshop. Até porque tecnologias como CSS3 hoje em dia já conseguem replicar de uma forma bastante aceitável certos efeitos originários do Photoshop (e/ou outros programas bitmap). Ainda assim é bem difícil copiar na integra certos elementos gráficos, pois mesmo que as linguagens de marcação sejam bastante avançadas existem certos detalhes e pormenores que só um programa de desenho consegue alcançar. ;)

Não te querendo atrapalhar mais, caso queiras desenvolver mais as tuas "coding" skills, sugiro que comeces por criar simples websites. Agarras num papel e fazes uma wireframe (esboço gráfico em lápis do website) e este servirá de um "guia".

Assim enquanto codificas o mesmo, tentas implementar as tuas ideias originárias do papel.

Sugiro contudo que leias uns artigos sobre "design para developers".

Uma sugestão:
http://www.webdesignfordevelopers.com/
http://net.tutsplus.com/articles/lectures/design-for-developers/

---

Caso queiras desenvolver as tua aptidões gráficas, em design e não só, sugiro que faças na mesma "wireframes", mas que em vez de passares ao codigo imediatamente, que comeces com o Photoshop e/ou Fireworks (recomendo o Photoshop pois tem uma comunidade bem maior em relação ao Fireworks, e existem mais artigos e tutoriais para te ajudarem na iniciação).

Ao começares pelo Photoshop, vais desenvolver olho crítico relativamente ao design de uma forma que seria bem mais difícil do que se recorresses apenas ao código.

Antes de partir para o primeiro website codificado, talvez seja importante desenhar uns 3 websites primeiro no Photoshop e só após teres aprendido melhor algumas técnicas, e saberes estruturar bem um website, é que passavas então ao código.

Peço desculpa pelo texto grande, mas estou apenas a tentar ajudar, e talvez sirva de apoio a outras pessoas que queiram começar no web design.
Offline

Octávio Alves 
Membro
Mensagens 963 Gostos 36
Feedback +25

Troféus totais: 27
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Estou a responde ao edumicro, não irei citar para não "encher" o tópico, uma vez que o texto escrito por ele é um pouco grande, mas útil.

Agradeço imenso a tua ajuda edumicro. Irei então fazer alguns websites no photoshop e depois posto aqui, para darem as vossas opiniões, e depois, caso seja "aprovado" paço para o código.

Cumprimentos
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

@OAlves, quando responderes a um tópico podes fazer como eu fiz agora ex: "@username". :)

Quanto a postares as tuas wips, por mim tudo bem, eu depois passo por aqui e posso dar-te umas dicas e ajuda para melhorares os designs. Quanto ao código não te poderei ajudar tanto, mas de certeza que existe aqui muita gente que te poderá dar uma mão.