Cómo hacer que esta página web se vea mejor

¡Oye! Gracias por la pregunta

  1. ¡No ciegue a los usuarios con colores innecesarios! El color es poderoso para resaltar información clave . Ver más sobre color. Recomiendo obtener una paleta de colores consistente. Use rojo por una razón, por ejemplo.
  2. Veo que está utilizando un estilo de Office 365 para los elementos de forma plana, iconos y controles. Intenta hacerlo uniforme si puedes. No arrojes iconos por aquí y por allá. Mantenlo ordenado .
  3. Use una cuadrícula! Si está codificando esto, recomendaría mantener su contenido dentro de una cuadrícula estructurada [1] y si esto es solo una maqueta en Photoshop, puede usar el uso de cuadrículas. Asegúrate de que todo esté alineado; de lo contrario, enloquecerá tu cerebro. ¡Por ejemplo, ese cuadro de búsqueda es enorme!
  4. Haga algunas pruebas de usuario: haga que los usuarios lo prueben. ¿Es complejo? ¿Fácil de comprender? Haga que un usuario haga una tarea (desde el punto A -> punto B) y luego mírelos.
  5. No te distraigas con contenido no deseado. Maximice el contenido que ve el usuario , así que no hinche la página ni use el color para interponerse en una tarea. Tu cerebro funciona mejor si hace una cosa. Echa un vistazo a las micro interacciones [2]

Creo que su concepto es excelente, pero necesita hacer un poco de limpieza para que el diseño sea consistente. Intenta que los usuarios lo usen (si necesitas decirles cómo usarlo, ¡lo estás haciendo mal!) Y finalmente concéntrate en la tarea en lugar del diseño general. (¡Haz las cosas bonitas al final!)

¡Espero que ayude!

Notas al pie

[1] CSS · Bootstrap

[2] ¿Qué es una microinteracción?

1. La foto superior está pixelada.
(edite por el diseñador del hogar: la imagen está pixelada, pero esto podría ser una función del tamaño de la imagen demasiado grande en la página. Considere reducir el tamaño, o usar una resolución más alta, o una imagen más corta por encima de la imagen doblada).
2. El bloque Meet Raba / Asher’s Story tiene texto redundante debajo
esto repite:

Todo está codificado a mano y cada pequeño detalle recibe atención. Haremos un esfuerzo adicional para que su producto sea perfecto.

(editar por el diseñador del hogar: presione para obtener la copia final. Una vez que se reemplaza este relleno, esta sección se ve realmente decente.

De mi esposa que es artista gráfica:
3. Posicionamiento estático de la navegación horizontal superior.
4. Lo que otros ven como opciones de fuente inconsistentes, yo no. Veo que nos está intentando utilizar la misma fuente principal que el logotipo y está usando Comic sans para el texto secundario. ¿Está esto dentro de las pautas de marca de esta empresa? De lo contrario, averiguaría su verdadera primaria y secundaria y usaría las etiquetas @font (css) para que pueda usar su verdadera fuente primaria y secundaria en la página.
5. Alinee a la derecha las palabras clave RISEUP en su propio div a la izquierda del párrafo RISEUP. Una vez más, presione para obtener la copia verdadera en lugar del relleno.
Use la fuente primaria (probablemente la que se muestra en el logotipo) para las palabras clave RISEUP, y la fuente secundaria (que lamentablemente parece ser comic san) para el párrafo RISEUP.
6. Disminuya la barra gris superior por encima de la imagen del doblez. Se ve bien, pero se vería mucho mejor si fuera más delgado.
7. corrija sus enlaces de documentos anclados u opte por enlaces para separar las páginas. Si va a usar los enlaces anclados, creo que tal vez deba cambiar el formato de su página, de modo que todo el contenido esté dentro de un div de desplazamiento a la izquierda o a la derecha de la imagen de encabezado reducida que está fija en posición. Pero esa es tu elección estilística.
8. Reduzca la escala en los tres disparos a la cabeza y agregue algo de relleno entre los tres hombres y el texto a la derecha de ellos. Reduce el texto a la derecha de ellos. Use sus nombres, alineados a la izquierda, en una fuente ligeramente más grande. Ponga su biografía debajo de eso en el texto un poco más pequeño. Use divs separados para la biografía de cada hombre; esto lo ayudará a condensar el contenido en esta área de la página.
9. ¿Qué es esta área naranja con el texto “Hoja de ruta” y la foto grupal? Pierda eso, eso no tiene ninguna importancia para el sitio en su conjunto. Mantenga el texto de la declaración de misión. Sugiero que si necesita tener un título, use el texto de Roadmap sin el bit de desplazamiento horizontal (porque su desplazamiento horizontal no funciona), hágalo solo un cuadrado naranja con texto de Roadmap justificado en un div a la izquierda de la misión texto de la declaración en un div a la derecha, arregle la posición de ambos.

Utiliza un tema de arranque.
(Editado por el diseñador de la casa: dado que el sitio web específicamente expresa orgullo por la codificación manual, ignore lo anterior. Le está yendo perfectamente bien con el código manual, que está comenzando a ser un arte perdido. Yo también comparto su amor por la codificación manual. Sigan con el buen trabajo. A menos que quieran canibalizar el código en bootstrap para su sitio, lo cual no creo que sea su intención o deseo).

Mi esposa, que es diseñadora gráfica, dijo que lo vería más tarde.
(Hecho, feliz codificación!)

1. visualmente no me gusta dónde se coloca el botón de menú en la esquina superior casi oculto (cuando el tamaño del navegador es más pequeño).
2. No sé cómo se verá, pero las palabras naranjas debajo de todo el texto (“respeto”, “lealtad”) se verían bien si lo tienes en su propia sección donde realmente pueden brillar, en lugar de llenar el texto correctamente sobre eso.
3. el texto gris de pie de página es muy difícil de ver, el blanco se vería limpio o incluso el naranja del logotipo le daría ese aspecto temático único.
4. No sé si es solo por mi navegador, pero parecía que cuando comienzas a desplazarte hacia abajo, la barra de navegación quiere ir a una posición fija pero un color azulado oscuro lo cubre hasta que la barra de navegación no es visible.
5. consultas de medios como ninguna otra para asegurarse de que todo esté centrado y se vea perfecto en cada punto de interrupción.

Me alegra poder ayudar 🙂

Demasiados estilos de fuentes. Al igual que lo que has hecho en la parte superior, se rompe hacia la parte inferior de la página de inicio. Mantenga el tamaño de fuente y el estilo consistentes. El menú que tiene la historia de Asher, etc. hacia el medio debe estar separado entre los elementos.