Diseño de sitios web en el navegador (¡jadeo!) [Cerrado]

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

  •  10-07-2019
  •  | 
  •  

Pregunta

Estoy interesado en las opiniones de las personas sobre los pros y los contras, o francamente "no hay" sobre el diseño de sitios web en el navegador y alejarse de Photoshop, Fireworks, etc.

He estado diseñando un relanzamiento para mi sitio web y probándolo en el navegador, y no estoy mirando hacia atrás.

Por ejemplo (uso una cuadrícula de 960 px con 12 columnas): 

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

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

No solo el diseño se ha vuelto divertido de nuevo, sino que usar cuadrículas, ritmo vertical, incluso la proporción áurea, nunca ha sido tan fácil. Sin mencionar que aniquila completamente la brecha entre el diseño y la codificación estática.

¿Qué te parece?

¿Fue útil?

Solución

¿Estás diciendo que primero haces tramas de páginas en el navegador (por HTML / CSS) y luego aplicas un diseño? Eso es lo que hago (y 37Signals sigue ese pensamiento también).

En mi opinión, es bueno para los desarrolladores hacer wireframes estáticos sin tocar Photoshop ya que el sitio se puede usar instantáneamente y no se pierde tiempo en hacer que las cosas se vean bien.

Además, no suele haber una gran racha de diseño entre los programadores; me gusta dejar eso a las personas que conocen cada comando de PS bajo el sol :)

También utilizo el YUI Grids marco CSS para crear diseños rápidamente.

Otros consejos

Bueno, trabajar con el navegador no es lo peor del mundo, pero hay un par de "infiernos":

1) NO diseñe su aplicación con IE. Utiliza Chrome o Firefox. El comportamiento no conforme de IE puede engañarlo para que piense que su CSS es válido cuando realmente no lo es. Su caso de uso principal para IE es probar su sitio en IE.

2) No nombre sus clases por cómo aparecen, como lo hizo en su ejemplo.

¡No lo hagas!

Si iDesign Steve aprende a diseñar directamente en el navegador,

  1. La innovación sufrirá: a Steve no le importan las limitaciones de CSS / HTML / whatnot. Es libre de repartir el sitio más impresionante que la humanidad aún tiene que ver. El deber del programador promedio, Joe, es estirar los límites de CSS / HTML / lo que sea para llenar ese diseño aprobado a tiempo, y verlo destrozado por algún estúpido navegador, que tiene un buen tamaño de cuota de mercado, justo antes de la fecha límite. Acéptelo, escribir CSS se siente como escribir código de ensamblaje. Lograr incluso las cosas más básicas (¿diseño de columnas múltiples fluido para alguien?) Es ridículamente difícil y te hace drogar por un tiempo.
  2. El factor de frialdad de Steve disminuirá: ni un solo desarrollador que conozco utiliza una herramienta WYSIWYG para generar HTML / CSS o lo considera aceptable. Cuando todo lo que necesitas es un editor de texto, no te ves tan bien. Cuando un cliente mira el monitor de Steve y ve un montón de texto en lugar de varias ventanas, cien pequeños iconos divertidos y un borrador colorido a medio terminar, también puede pensar "Mi nieto de 7 años también puede escribir cosas". ... " ;.
  3. Joe tiene aún más limitaciones que Steve: el sitio debe ser accesible, el diseño debe ser lo suficientemente fluido como para acomodar todo tipo de salida, jugar bien con javascript ... Si CSS / HTML se reescribirá de todos modos, no tiene sentido luchar .

Sé un buen compañero de equipo y enciende Photoshop ahora. Joe necesita su trabajo para pagar sus cuentas.

Bueno, para alguien con mi nivel de incompetencia de diseño, es un boceto de pizarra y luego directamente a HTML y CSS.

Todavía mis sitios web se ven horribles ...

En los últimos sitios que he hecho, he adoptado ambos enfoques. Cada vez, la página diseñada directamente en HTML / CSS ha llevado mucho menos trabajo, pero ha sido un sitio web mucho menos atractivo. Si le interesa crear una página atractiva, comience en Photoshop, de lo contrario, con demasiada frecuencia tomará atajos en su CSS. Una idea se puede crear más rápido y es mucho más flexible en Photoshop, lo que lo llevará a experimentar con sus ideas y obtendrá un sitio visualmente mejor.

Nunca diseño sitios web en Photoshop; Voy directamente de bocetos físicos a HTML y CSS. Lo encuentro más rápido y no terminas tirando algo en lo que has estado trabajando durante horas (el archivo de Photoshop).

Elegí quedarme con wireframes y diseñar desde papel directamente en el navegador. Por supuesto, es para lo que me funciona, y me ha convertido en un diseñador mucho más creativo.

Aunque me gusta usar mis propias bibliotecas CSS para ello, eche un vistazo a Google Blueprint , y consulte este artículo del diseñador web Mark Boulton.

diablos no!

  • estás rehaciendo el error 'tablas para todo', solo usando clases en lugar de tablas.
  • estás mezclando presentación (donde pongo esto) con contenido. sus clases no dicen qué es esto, dicen dónde poner.
  • su diseño es de tamaño fijo. no fluirá con el tamaño de las ventanas, por lo que necesitaría desplazamiento horizontal o un gran espacio en blanco a la derecha.

pero no entiendo por qué alguien menciona PhotoShop. es casi la última herramienta para el diseño web, tal vez Illustrator es la única menos apropiada para esto.

He descubierto que, aunque un boceto físico puede ayudarlo a comenzar en el camino correcto para un diseño, puede hacer diseños con una mejor apariencia dentro de Adobe Illustrator (que es mucho más fácil mover elementos que Photoshop). Una vez que su diseño esté completo, use Photoshop para cortarlo.

Una opinión a considerar es para quién está diseñando. Si está diseñando un sitio para un cliente, puede ser útil realizar maquetas rápidas en Photoshop para que conozcan el diseño y puedan firmar su diseño. Una vez que el cliente ha acordado un diseño, crea un marco de alambre que se ajustará a los elementos de su maqueta y luego puede empalmar los elementos que requieren imágenes reales directamente de su maqueta.

Al seguir este método, debe tener en cuenta todos los elementos de diseño disponibles que puede usar para implementar su simulación y asegurarse de reunirlos en una naturaleza semántica y bien diseñada, no solo algo que haga el trabajo. .

Brújula, especialmente blueprint / semántica, ayuda mucho cuando diseña en el navegador. También me gusta mantener el diseño y los estilos en diferentes archivos, para poder deshacerme más fácilmente de los estilos que no me gustan y mantener la estructura metálica en un solo lugar. También recomendaría usar paletas de colores y componer a una escala de fuente, ambas son útiles y más fáciles de lograr usando variables SASS.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top