[Avaliação]Meu Primeiro Projeto/Website

C

CabrestoSexy

Power Member
Ora boas pessoal :D

Bem é assim estava eu a conversa com um amigo quando ele disse que estava a pensar em mudar de site e então, eu ofereci a minha ajuda, dado que tenho experiencia na area e ele aceitou a ajuda :P Então deu me um layout em .psd para eu codar :P

Mas a pessoa desistiu da ideia, so que eu fiquei com o psd na mesma... Então como nao tenho nada para fazer, decidi entreter me e fui coda lo na mesma só mesmo porque sim, porque me apeteceu xDDD

Bem este foi o primeiro site que fiz DESDE O ZERO, ou seja agarrar num psd e coda lo, foi a primeira vez. Antes so brincava com sites já feitos. Dado isso postei aqui para voces avaliarem como ficou, darem opinioes, sugestoes ou criticas sobre esta minha "primeira vez " e o mais importante ou nao, avaliarem ela claro :D de 1/10 se for possivel :P xD



O Logotipo não é bem esse que usei :c mas pronto como postei noutro lado onde nao se pode fazer referencias a sv's privados pronto ... xD

O Layout que me deram para eu codar foi este:
http://i.gyazo.com/9fa4c3ed6562a13f10cc0e7dbf8380b4.png

O trabalho final em html foi este:
http://servidorteste.site50.net

O projeto foi iniciado em 15 de outubro, e desde então tenho feito bastantes updates até á data de hoje ao site porque quero que o meu primeiro trabalho um prototipo de site, para que me possa seguir, em projetos futuros :)

Atualmente o mesmo se encontra assim :
http://mvpcabeleireiros.freeiz.com/

Vao reparar que o site atualmente está já um pouco diferente do psd, ou seja do site original, mas isto deve se ao seguinte: Se eu me agarrar só ao psd que me deram para trabalhar, nao vou evoluir muito. E uma pessoa tem de dar sempre o seu toque proprio ao seu trabalho e nao ficar agarrado só ao que está estipulado :P
Temos de inovar, e ser dinamicos no nossos proprios trabalhos e dar o nosso cunho proprio :P
Basicamente o que vao notar mais diferença, basicamente é a imagem de fundo xD

Particularidades do site:
-Layout adaptado a 100% por mim a todos os tipos de ecrãs de dispositivos, desde ecrã de smartphones até ecrãs 1980px

- Menu do site fixo no topo, quando o principal deixa de aparecer

- Forum adicionado de maneira dinamica, sem ir para outra paginas ou outros links externos (Apenas vai aparecer um video em mp4 a exemplificar como se fosse um forum, porque o host onde tem o site hospedado, não suporta a versao atual do php do forum que fiz)

PS: O "Enviar Ticket" voces não vao conseguir inserir nada no campo 1 porque esses dados já sao inseridos automaticamente. Por isso se quiserem testar esse sistema de tickets feito por mim tambem, teem de se registar no site e fazerem login no site :D

A Parte do registo está engraçada tambem xD

E pronto pessoal, penso que por agora é só :P

Digam o que acho do site, tendo em conta que é o meu primeiro site que desenvolvi sozinha e desde o ZERO :D

Cumprimentos e Obrigado
 
A meu ver tens aí algumas coisas fora do lugar e outras que não ficaram lá muito userfriendly.

Como podes ver no meu print screen, há aqui coisas centradas de forma estranha como margens laterais muito grandes, e os ícones ali em baixo das redes sociais também ficaram estranhos.
- http://prntscr.com/5oif8s

O fundo castanho do menu devia ser do mesmo tamanho que o container principal:
- http://prntscr.com/5oig6u

Não sei se é só a mim, mas o site ao fazer scroll parece que está muito lento humm. Sobrecarregado se calhar, tens de ter em atenção os tamanhos das imagens.

Tens ainda alguns erros de javascript:
- http://prntscr.com/5oih0v

Se eu fosse a ti, para primeiro site começava com algo mais simples de se fazer, em muitas "mariquices" (não leves a mal a expressão), que fosse um site directo humm, algum template flat design por exemplo. Já servia para aprenderes coisas simples mas úteis e que usas em quase tudo.

Outra sugestão que de dou é não usares as tags <center></center>, já existem alguns browsers que não suportam estas tags, por ser uma tag que define a apresentação do conteúdo e não uma tag que descreva o conteúdo não sei se me faço entender. Mas basicamente, algo que defina a apresentação de um conteúdo deve ser CSS, ou seja não deve ser uma tag HMTL a fazê-lo.

O que podes fazer é usar as margens do css para centrar uma div por exemplo:

HTML: 
<div class="testes">
    <p>Este div contém um paragrafo</p>
    <img src="e_uma_imagem.jpg" "Imagem Bonita"/>
</div>

<!-- CSS: -->
.testes{
    margin-left: auto;
    margin-right: auto;
}

Vou-te deixar ainda um site onde podes arranjar templates em .PSD simples e gratuitos para ires aprendendo com coisas mais simples. Qualquer outra dúvida que tenhas terei todo o gosto em ajudar-te.
- http://freebiesbug.com/psd-freebies/website-template/

Espero ter sido útil, abraço
 
a minha nota seria 5/10. Foi uma boa representação do mockup referido, mas tem algum barulho visual e não acho que seja sério suficiente para uma comunidade gaming.

Claro que é um excelente primeiro site, e mostra bastante capacidade.

Cuidado com a marca do twitter: https://about.twitter.com/press/brand-assets
Na publicação online é preciso ter atenção à propriedade intelectual, especialmente quando se tratam de empresas grandes com departamentos de advogados.
 
Lod disse:
A meu ver tens aí algumas coisas fora do lugar e outras que não ficaram lá muito userfriendly.

Como podes ver no meu print screen, há aqui coisas centradas de forma estranha como margens laterais muito grandes, e os ícones ali em baixo das redes sociais também ficaram estranhos.
- http://prntscr.com/5oif8s

O fundo castanho do menu devia ser do mesmo tamanho que o container principal:
- http://prntscr.com/5oig6u

Não sei se é só a mim, mas o site ao fazer scroll parece que está muito lento humm. Sobrecarregado se calhar, tens de ter em atenção os tamanhos das imagens.

Tens ainda alguns erros de javascript:
- http://prntscr.com/5oih0v

Se eu fosse a ti, para primeiro site começava com algo mais simples de se fazer, em muitas "mariquices" (não leves a mal a expressão), que fosse um site directo humm, algum template flat design por exemplo. Já servia para aprenderes coisas simples mas úteis e que usas em quase tudo.

Outra sugestão que de dou é não usares as tags <center></center>, já existem alguns browsers que não suportam estas tags, por ser uma tag que define a apresentação do conteúdo e não uma tag que descreva o conteúdo não sei se me faço entender. Mas basicamente, algo que defina a apresentação de um conteúdo deve ser CSS, ou seja não deve ser uma tag HMTL a fazê-lo.


Vou-te deixar ainda um site onde podes arranjar templates em .PSD simples e gratuitos para ires aprendendo com coisas mais simples. Qualquer outra dúvida que tenhas terei todo o gosto em ajudar-te.
- http://freebiesbug.com/psd-freebies/website-template/

Espero ter sido útil, abraço
Clicar para expandir...

Boa noite Lod :P
Antes demais obrigado pelo tempo aqui que dedicas te a ler o meu post e a analisares o meu trabalho :)
Agora dando uns exclarecimentos quanto ao que escreveste :P

Realmente essa coisa das redes sociais, eu sempre pensei em tirar xD visto bem até nem só estava mesmo ai por estar... Acabei por tirar, e atualmente está sem isso visto que a falta que isso faz é 0 xD
Quanto ás margens exageradas que dizes de estarem exageradas, basicamente elas não estão exageradas, simplesmente o teu ecrã é de 1980 por 1080 se não estou em erro, logo como a largura meus elementos estão definidas em percentagem, 70% de largura de ecrã no meu PC é diferente de 70% de largura do teu :P Por isso é que no teu, o container fica mais largo e dá uma sensação de muita largura de margem, mas não xD Simplesmente os teus 70% sao maiores que os meus xD
http://i.gyazo.com/ddb0334ec32639c1c9dc21f3a7dd9d92.png No meu ecrã já aparece certinho, basta só por igual no teu xD
Eu não trabalhei muito a largura dele, para ecrãs de 1980 :x
Mas nada que não se resolva facilmente :D

Quanto ao menu, sim até és capaz de ter razão xD mas como no psd estava assim, então eu limitei me a faze lo assim :P Nem sequer tinha pensado em mudar, mas obrigado pelo reparo :P

Quanto á lentidão a scrollar não tem a ver com as imagens, por se existe coisa com que eu tenha cuidado é principalmente com isso :)
Quando vejo que elas estão demasiado pesadas, antes de as colocar, passo elas pelo photoshop e escolho a opção de "salvar para a web" para o tamanho delas ficar mais levezinho :P

Quanto aos erros de javascript, sim eu sei que tem, mas como se diz no mundo da web, foi uma "gambiarra" que eu tive de fazer :)

De resto, era agradecer o teu contributo e o teu comentario, pois é sempre bom ouvir opinioes novas :P


sketxz disse:
a minha nota seria 5/10. Foi uma boa representação do mockup referido, mas tem algum barulho visual e não acho que seja sério suficiente para uma comunidade gaming.

Claro que é um excelente primeiro site, e mostra bastante capacidade.

Cuidado com a marca do twitter: https://about.twitter.com/press/brand-assets
Na publicação online é preciso ter atenção à propriedade intelectual, especialmente quando se tratam de empresas grandes com departamentos de advogados.
Clicar para expandir...

Boa noite Sketxz :P
Pode explicar um bocado melhor, o que queres dizer com "barulho visual" ? xD
Quanto ao nao ser "serio" para uma comunidade gaming, sim eu sei xDDD (isto se estiveres a falar do design em si) acho que é isso :P
Mas sim tens razão, alias eu tambem não o fiz com um intuito disso, porque eu não sei fazer praticamente nada em photoshop :| Então vou agarrando umas imagens daqui, outras dali e pronto xD

Ahhh e já agora muitooo obrigado quanto a essa cena do simbolo do twitter :) Por acaso desconhecida mesmo totalmente dessa regra digamos assim, foi muito util saber isso :)

Quanto ao resto, quem quiser mais comentar está á vontade :D
 
Barulho visual("visual noise") é qualquer coisa que possa distorcer, transformar, bloquear ou adicionar algo ao que estamos a ver.
Referia-me ao efeito de transição do slider, estraga um pouco a leitura, e também ao esquema de cores no geral que não ajuda muito.

Hoje em dia existe também o chamado "banner-blindness", que é a habilidade de ignorar propagandas, anúncios ou qualquer outro elemento visual que não se encaixe na página.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo