A concepção de web Sites No Navegador (suspiro!) [fechado]

StackOverflow https://stackoverflow.com/questions/432849

  •  10-07-2019
  •  | 
  •  

Pergunta

Eu estou interessado em opiniões de pessoas sobre os prós e contras, ou simplesmente "o inferno não é" sobre a concepção de web sites no navegador, e afastar-se do Photoshop, Fireworks, etc.

Eu tenho vindo a conceber um relançamento para o meu site, e tentá-lo no navegador, e eu não estou olhando para trás.

Por exemplo (eu uso um 960px de grade com 12 colunas): 

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

Não só tem a concepção de se tornar divertido novamente, mas usando grades, vertical ritmo, até mesmo a razão de ouro, nunca foi mais fácil.Para não mencionar, que aniquila completamente a diferença entre a concepção e codificação estática.

O que você acha?

Foi útil?

Solução

Você está dizendo que faz wireframes de páginas no navegador (por HTML/CSS) primeiro e depois aplica um design? Isso é o que eu faço (e 37Signals segue esse pensamento também).

Na minha opinião, é bom que os desenvolvedores façam wireframes estáticos sem tocar no Photoshop, pois o site é instantaneamente utilizável e o tempo não é desperdiçado em fazer as coisas parecerem certas.

Também não tende a haver muita sequência de design com programadores - eu gosto de deixar isso para as pessoas que conhecem todos os comando do PS sob o sol :)

Eu também uso o Grades yui Estrutura CSS para criar rapidamente layouts.

Outras dicas

Bem, trabalhar usando o navegador não é a pior coisa do mundo, mas há alguns "inferno não":

1) Não faça projete seu aplicativo usando o IE. Use Chrome ou Firefox. O comportamento não conforme do IE pode enganá -lo a pensar que seu CSS é válido quando realmente não é. Seu caso de uso principal para o IE está testando seu site no IE.

2) Não nomeie suas aulas de como elas aparecem, como você fez no seu exemplo.

Não!!

Se Idesign Steve aprender a projetar diretamente no navegador,

  1. Inovação sofrerá: Steve não se importa com as limitações do CSS/HTML/Othathot. Ele está livre para distribuir o site mais impressionante que a humanidade ainda não viu. É o dever médio do programador Joe esticar os limites do CSS/HTML/Othtnot para amontoar o Deisgn a tempo e vê -lo rasgado a bits por algum navegador estúpido, que por acaso tem um bom tamanho de participação de mercado, pouco antes do prazo. Enfrente, escrever CSS parece escrever um código de montagem. Realizar até as coisas mais básicas (o layout de várias colunas fluidas de alguém?) É ridiculamente difícil e isso o torna alto por um tempo.
  2. O fator de frieza de Steve diminuirá: nem um único desenvolvedor que eu conheço usa uma ferramenta Wysiwyg para gerar HTML/CSS ou considera isso aceitável. Quando tudo o que você precisa é de um editor de texto, você não parece tão legal. Quando um cliente dá uma olhada no monitor de Steve e vê um monte de texto em vez de várias janelas, cem ícones engraçados e um rascunho colorido meio acabado, ele também pode pensar "meu neto de 7 anos também pode digitar coisas. .. ".
  3. Joe ainda tem mais restrições do que Steve: o site deve estar acessível, o layout deve ser fluido o suficiente para acomodar todos os tipos de saída, jogue bem com JavaScript ... se o CSS/HTML será reescrito de qualquer maneira, não há sentido em lutar.

Seja um bom companheiro de equipe e inicie o Photoshop agora. Joe precisa de seu trabalho para pagar suas contas.

Bem, para alguém com meu nível de incompetência, é um esboço de placa branca e depois direto para HTML e CSS.

Ainda meus sites parecem horríveis ...

Nos últimos sites que fiz, aproveitei as duas abordagens. Cada vez, a página projetada diretamente no HTML/CSS levou muito menos trabalho, mas tem sido um site muito menos atraente. Se você se preocupa em fazer uma página atraente, comece no Photoshop, caso contrário, você costuma usar atalhos no seu CSS. Uma idéia pode ser criada mais rápida e é muito mais flexível no Photoshop, o que o levará a experimentar suas idéias e você criará um site visualmente melhor.

Eu nunca designei sites no Photoshop; Eu vou direto de esboços físicos para HTML e CSS. Acho mais rápido e você não acaba jogando fora algo em que está trabalhando há horas (o arquivo do Photoshop).

Eu escolhi ficar com wireframes e projetar do papel direto para o navegador. Claro, é para isso que me funciona, e isso me tornou um designer muito mais criativo.

Embora eu goste de usar minhas próprias bibliotecas CSS, dê uma olhada Google Blueprint, e confira Este artigo por web designer, Mark Boulton.

de jeito nenhum!

  • Você está refazendo o erro 'Tabelas para tudo', apenas usando aulas em vez de tabelas.
  • Você está misturando a apresentação (onde eu coloco isso) com conteúdo. Suas aulas não dizem o que é isso, eles dizem onde colocar.
  • Seu design é de tamanho fixo. Não fluirá com o tamanho do Windows, por isso precisaria de rolagem horizontal ou grande espaço em branco à direita.

Mas não entendo por que alguém menciona o Photoshop. É quase a última ferramenta para web design, talvez o Illustrator seja o único ainda menos apropriado para isso.

Descobri que, embora um esboço físico possa começar o caminho certo para um design, você pode fazer layouts muito mais importantes no Adobe Illustrator (que é muito mais fácil de mover elementos do que o Photoshop). Quando o seu design estiver concluído, use o Photoshop para cortá -lo.

Uma opinião a considerar é para quem você está projetando. Se você estiver projetando um site para um cliente, pode ser útil fazer maquetes rápidos no Photoshop para que eles saibam o layout e possam assinar seu design. Depois que o cliente concordar com um design, você cria um quadro de arame que se encaixa nos elementos da sua simulação e, em seguida, poderá conspirar os elementos que exigem imagens reais diretamente da sua simulação.

Ao seguir esse método, você deve considerar todos os elementos de design disponíveis que você pode usar para implementar sua simulação e certifique -se de montá -los de uma natureza bem projetada e semântica, não apenas algo que fará o trabalho.

Bússola, especialmente blueprint/semântico, ajuda muito quando você está projetando no navegador.Eu também gostaria de manter o layout e estilos de arquivos diferentes, para que eu possa mais facilmente dispor de estilos que eu não gosto, mantendo a estrutura em um só lugar.Recomendo também usando a paleta de cores e a composição de uma escala de tipo de letra, ambos são úteis e fáceis de alcançar, utilizando SASS variáveis.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top