Intentando arreglar el diseño de una página de inicio

Estoy tratando de ejecutar un tema tipo cuadro para mi página de inicio/Preguntas frecuentes. Sin embargo, en este momento, las cajas solo hacen que la página se vea terrible. ¿Podría alguien ofrecerme algunos sitios de ejemplo que usen cuadros/bloques para obtener información, o sugerirme alguna paleta de colores diferente para usar?

Principalmente programo, así que no soy muy fuerte en el diseño visual en sí.

Aquí hay una captura de pantalla y una URL a la página de inicio. (esto se relaciona SOLO con la página de inicio, no con otras páginas)

¡Gracias!

URL: aawebapps (Tenga en cuenta que los botones expandirán el cuadro debido al aumento/disminución del texto según las preguntas frecuentes)

ingrese la descripción de la imagen aquí

Me temo que esta pregunta podría cerrarse ya que está muy basada en opiniones. Sin embargo, un par de cosas: ¿Cómo construiste esto? Todo está envuelto en muchas tablas y esa no es una buena manera de construir sitios web modernos. También carga muy lentamente. Además, para sus necesidades de búsqueda de paleta de colores, puedo recomendar Kuler .
@burnso sí, no estaba seguro de dónde más hacer esta pregunta. Está en las tablas simplemente por bootstrapedad de uso, pero esto siempre se puede cambiar. Solo estoy tratando de encontrar algo que utilice cajas sin que todo parezca incómodo. Gracias por el enlace, lo revisaré.
Entiendo. Podría considerar publicarlo en www.reddit.com/r/design_critiques. La comunidad tiene sus fallas, pero sobre todo recibirás algunas críticas decentes.
@burnso De acuerdo, podría hacerlo más tarde, ya que estoy seguro de que todo tipo de personas acechan allí para desglosar sitios también, así que soy escéptico de publicar una URL pública, pero ¿crees que una imagen será suficiente para ellos?
@Austin Agregue la etiqueta "crítica" a su pregunta. estará expuesto a las personas relevantes de esa manera.
@Austin Claro, si ofrece enviar un mensaje privado al enlace del sitio web. De lo contrario, las críticas podrían no ser tan valiosas.

Respuestas (1)

En primer lugar, diría que debes seguir el principio KISS (Mantenlo simple, estúpido) siempre que tengas dudas. Tienes mucho texto que cubrir y la fantasía de la página hace que se vea horrible. Además, tu texto es demasiado grande para leer.

Lo que desea es un sitio web basado en Gird. Hay muchas plantillas (tanto gratuitas como de pago) que puede consultar. Aquí hay dos ejemplos de ello:

RichGRID M5 Theme ,
30 otras plantillas de estilo de cuadrícula y si desea un ejemplo en ejecución, hay Cracked

Como usted es programador, mi primera preocupación es resolver su problema en lugar de decirle los principios básicos del diseño de sitios web. Aquí hay una forma de hacerlo (Descargue la imagen, he puesto algunos otros consejos útiles para usted allí)

Un mejor Gridstyle para su sitio web

1) Tienes dos menús, uno primario y otro secundario, presiona el logo del centro hacia el extremo izquierdo .

2) Deberá decidir cuántas columnas desea mostrar en la resolución completa del sitio (en el ejemplo, he hecho 3), en resoluciones más bajas/móviles, las reducirá a dos o una columna según corresponda. Divida la página de acuerdo con esas columnas y use una unidad estándar de espaciado, por ejemplo, 25 px, etc.

Aquí hay una instantánea de la página con las Directrices:Instantánea con pautas

3) Siga otro blog exitoso para ver cómo usan los diferentes tamaños de fuente para diferentes tipos de títulos . Recomendaré TechCrunch para ello. Sus tamaños de texto son mucho más grandes de lo que deberían ser.

4) Reemplace el fondo con un tono monótono o muy sutil . que contrasta bastante con sus cajas. Es demasiado desordenado para leer.

5) Mantenga la navegación primaria y secundaria fácilmente distinguibles y fáciles de encontrar . En mi diseño, es posible que haya intercambiado la navegación principal con la secundaria, pero mi punto es mantener ambas diferentes, dar importancia a la principal.

Y, por último, si alguna vez se enfrenta a un problema de diseño de un sitio web y no tiene experiencia al respecto. El uso de plantillas ya disponibles es el camino a seguir.

@Simaar_Charms ¡Muchas gracias! Echaré un buen vistazo a esto esta noche/mañana y te responderé. :)
Un par de preguntas, pero primero muchas gracias, ¡esto es muy hermoso e informativo! Pregunta 1. Estamos tratando de emular ligeramente el tema y el diseño del juego para mantener las cosas familiares y comprensibles, por lo que el logotipo se desplaza sobre los botones y está centrado. El menú de navegación secundario es simplemente mi forma de tratar de "condensar" la información. Cada botón solo AJAX actualiza el texto, así que solo estaba tratando de hacer el sitio más pequeño/condensado con esto, no es realmente una segunda barra de navegación. Sabiendo eso, ¿aún cambiarías la barra de navegación así? Consulte el sitio y vea cómo funcionan esos btns.
Pregunta 2: Desafortunadamente, debido a los widgets de creación automática de Twitter, "creo" que el alto/ancho están bloqueados en esa franja vertical larga, si no puedo forzar el CSS para que sea más pequeño, ¿dónde debería ir? Esas son mis dos preguntas principales hasta ahora. Además, esta es una implementación web, lo que significa que la primera carga demora un segundo, pero luego la aplicación debe cargarse por usted.
@Austin Sí, aún debe mantener el menú de navegación secundario, lo que hizo no es un estándar. esos cuadros están destinados a un solo tipo de información, no para actuar como una mini página. En segundo lugar, la condensación no ayudará si al final aumenta la confusión para el usuario. En lo que respecta a la pregunta dos, empújela hacia el extremo inferior derecho y deje que ocupe el espacio que necesita. De esa manera, el resto de la página se verá simétrica.
Intentando arreglar el diseño de una página de inicio
RespuestasAquíPolítica de privacidad1y, 0v