Notas de Lulu
¡Hola John y Clare!
El propósito de este mosaico de estilo es conceptualizar la dirección visual de su nuevo sitio web, así como generar algunas ideas sobre cómo se puede usar la funcionalidad para mostrar contenido de una manera fácil de usar.
Este es sólo un punto de partida que se utilizará para estimular ideas, así que no tengas miedo de hacer comentarios (sobre esta tarea del Tablero de Asana).
NOTAS DE DISEÑO:
- La apariencia actual de WCMHS es bastante corporativa, algo que uno normalmente imaginaría en un sitio web bancario de antaño. Le da al sitio una imagen pesada, seria y poco atractiva que quizás no sea representativa de su organización.
- En este estilo de mosaico, intenté aligerar la sensación para dar una sensación de:
- Amable y acogedor
- Energizante
- Brillante, alegre, pero profesional.
- Moderno
- Memorable
- Usar el rosa brillante de PNS es atrevido y audaz y agrega singularidad al diseño, pero si es demasiado para ti, el rosa se puede reemplazar con naranja (menos memorable, pero aún efectivo).
- Puedes usar la paleta de colores existente (ver más abajo) como guía visual en todo el sitio (por ejemplo, cuando veo lavanda, sé que estoy en una página o sección relacionada con CDS). Esta paleta de colores no combina bien, pero podemos usar matices de cada tono para ajustarlos y combinarlos.
- He creado un nuevo elemento de "inclusión, no exclusión" para divertirnos mientras esperamos la bandera: tómalo o déjalo como desees.
- Me gusta el enfoque de mantener todo brillante.
Paleta de colores actual
Logo
NO EXCLUSIÓN
TÍTULO CORTO DOS
Este es un ejemplo de encabezado en Fjalla One
Este es el cuerpo del texto en Nunito Sans, una fuente atractiva y fácil de leer. Este es el texto de un párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar su diseño con diferentes colores, fuentes, tamaños de fuente y viñetas. Simplemente selecciona las palabras que quieres diseñar y elige entre las distintas opciones en la barra de edición de texto. Esta es el área de texto de este párrafo.
Texto del enlace.
TITULAR TRES EN NUNITO SANS
Fuente de firma opcional
Si se usa con moderación, puede añadir un toque especial al sitio. Esta es solo una fuente de ejemplo; ¡podemos elegir entre cientos!
RECOMENDACIONES DE DISEÑO
Ancho del contenedor de texto: no más de 730 px (obviamente menos para dispositivos móviles).
Altura de línea: 1,5 - 2 para texto del cuerpo/párrafo
Tamaño de fuente: 18 pt o más para computadoras de escritorio / 16 para dispositivos móviles
Alineación: justificada a la izquierda
SOCIAL
BOTONES
Funcionalidad de clic para llamar
ICONOS DE EJEMPLO
Ejemplo de control deslizante de texto
Bueno para mostrar testimonios breves de longitud similar.
TÍTULO CORTO DOS
Ejemplo de columna coloreada
Este es el cuerpo del texto en Nunito Sans, una fuente atractiva y fácil de leer. Este es el texto de un párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar su diseño con diferentes colores, fuentes, tamaños de fuente y viñetas. Simplemente selecciona las palabras que quieres diseñar y elige entre las distintas opciones en la barra de edición de texto. Esta es el área de texto de este párrafo.
Texto del enlace.
TÍTULO CORTO DOS
Ejemplo de columna coloreada
Este es el cuerpo del texto en Nunito Sans, una fuente atractiva y fácil de leer. Este es el texto de un párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar su diseño con diferentes colores, fuentes, tamaños de fuente y viñetas. Simplemente selecciona las palabras que quieres diseñar y elige entre las distintas opciones en la barra de edición de texto. Esta es el área de texto de este párrafo.
Texto del enlace.
Entendemos cómo es...
Esta sección es opcional. Puedes usarla para pasar a la siguiente. Usar frases de empatía para demostrar comprensión y preocupación es una excelente manera de demostrarlo.
Esta sección es opcional. Puedes usarla para pasar a la siguiente. Usar frases de empatía para demostrar comprensión y preocupación es una excelente manera de demostrarlo.
Punto temático 1
Subtitular
Este es un área de texto para este párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar el diseño con diferentes colores, fuentes, tamaños de fuente y viñetas.
Punto temático 2
Subtitular
Este es un área de texto para este párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar el diseño con diferentes colores, fuentes, tamaños de fuente y viñetas.
Punto temático 3
Subtitular
Este es un área de texto para este párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar el diseño con diferentes colores, fuentes, tamaños de fuente y viñetas.
Punto temático 4
Subtitular
Este es un área de texto para este párrafo. Para cambiarlo, simplemente haz clic y empieza a escribir. Una vez que hayas añadido el contenido, puedes personalizar el diseño con diferentes colores, fuentes, tamaños de fuente y viñetas.
ACORDEÓN
Diseño de dos columnas
Párrafo de introducción opcional. Notas de Lulu: Los íconos del acordeón son solo marcadores por ahora, pero puedes elegir cualquier ícono SVG para reemplazarlos o eliminarlos por completo. He incluido algunas imágenes para que te hagas una idea de lo que podría funcionar (una vez que elijas una imagen, desactivaremos el control deslizante). Las imágenes se pueden recortar y reposicionar para que funcionen mejor.
Párrafo de introducción opcional. Notas de Lulu: Los íconos del acordeón son solo marcadores por ahora, pero puedes elegir cualquier ícono SVG para reemplazarlos o eliminarlos por completo. He incluido algunas imágenes para que te hagas una idea de lo que podría funcionar (una vez que elijas una imagen, desactivaremos el control deslizante). Las imágenes se pueden recortar y reposicionar para que funcionen mejor.
Párrafo de introducción opcional. Notas de Lulu: Los íconos del acordeón son solo marcadores por ahora, pero puedes elegir cualquier ícono SVG para reemplazarlos o eliminarlos por completo. He incluido algunas imágenes para que te hagas una idea de lo que podría funcionar (una vez que elijas una imagen, desactivaremos el control deslizante). Las imágenes se pueden recortar y reposicionar para que funcionen mejor.
Ejemplo de barras animadas
Es útil cuando desea mostrar números relevantes, etc. Puede cambiar las etiquetas de las barras y las etiquetas de porcentaje según lo desee.
Ejemplo de sección de logotipo de afiliado
horizonte de la ciudad
Chispas de cumpleaños
Revista de modas
Líneas borrosas
La tipografía como
DISEÑO
SERVICIOS DE CUIDADOS INTENSIVOS
Una fuente grande, fondos llamativos y un diseño monocromático son ideales para resaltar el contenido sin necesidad de imágenes. Esta sección está en el color ICS.
Ejemplo de funcionalidad del panel con pestañas
Investigación y análisis
Escribe una descripción para esta pestaña e incluye información que interese a los visitantes del sitio. Por ejemplo, si usas pestañas para mostrar diferentes servicios, describe qué hace que cada uno sea único. Si usas pestañas para mostrar platos de restaurantes, describe qué hace que un plato específico sea particularmente interesante o delicioso.
Estrategia de planificación
Escribe una descripción para esta pestaña e incluye información que interese a los visitantes del sitio. Por ejemplo, si usas pestañas para mostrar diferentes servicios, describe qué hace que cada uno sea único. Si usas pestañas para mostrar platos de restaurantes, describe qué hace que un plato específico sea particularmente interesante o delicioso.
Creación de conceptos
Escribe una descripción para esta pestaña e incluye información que interese a los visitantes del sitio. Por ejemplo, si usas pestañas para mostrar diferentes servicios, describe qué hace que cada uno sea único. Si usas pestañas para mostrar platos de restaurantes, describe qué hace que un plato específico sea particularmente interesante o delicioso.
Prueba en el campo
Escribe una descripción para esta pestaña e incluye información que interese a los visitantes del sitio. Por ejemplo, si usas pestañas para mostrar diferentes servicios, describe qué hace que cada uno sea único. Si usas pestañas para mostrar platos de restaurantes, describe qué hace que un plato específico sea particularmente interesante o delicioso.
Éxito garantizado
Escribe una descripción para esta pestaña e incluye información que interese a los visitantes del sitio. Por ejemplo, si usas pestañas para mostrar diferentes servicios, describe qué hace que cada uno sea único. Si usas pestañas para mostrar platos de restaurantes, describe qué hace que un plato específico sea particularmente interesante o delicioso.
Ejemplo de funcionalidad de acordeón
Úselo para preguntas frecuentes o cualquier otra cosa donde le gustaría condensar el espacio.
Ejemplo de sección de vídeo
La música es terapia. Calma el alma, te trae alegría, te motiva y mucho más. La música influye en cómo late tu corazón, cómo respiras, cómo duermes y cómo despiertas. Siendo la música tan importante para la vida, ¿no te mereces la libertad musical?
La tipografía como
DISEÑO
CFYS
La fuente grande, los fondos llamativos y un diseño monocromático son ideales para resaltar el contenido sin necesidad de imágenes. Esta sección está en el color CFYS.
Programas para la gente de la comunidad del condado de Washington
Este es un ejemplo de cómo se podría ofrecer una descripción general de los programas ofrecidos desde la página principal. Al hacer clic en el botón "Más información", el visitante del sitio web accederá a más información (ya sea una subpágina o una sección de una página). Los colores de fondo son solo provisionales por ahora, pero pensé que sería útil usar los colores de la marca de cada proveedor de servicios (necesitaríamos crear colores de fondo sencillos que subiríamos a la galería a continuación).
Funcionalidad del calendario
Este es tu calendario de Tockify, integrado con tu calendario de Google. Agregué etiquetas para cada división con sus colores, así que si agregas un evento a Tockify, recuerda etiquetarlo correctamente para que se muestren los colores.
Ejemplo
Calendario de Google
Puede integrar cualquier calendario de Google en el sitio web.
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
La tipografía como
DISEÑO
CDS
Una fuente grande, fondos llamativos y un esquema monocromático funcionan muy bien para resaltar el contenido sin necesidad de imágenes. Esta sección está en el color CDS, que realcé ligeramente.
Funcionalidad de línea de tiempo
Esta función es ideal para mostrar una línea de tiempo o un proceso. Ofrece numerosas opciones de estilo, por lo que se adapta a tu marca.
Social y vídeo
Una buena manera de mantener tu sitio web dinámico e interesante es integrar tus redes sociales directamente en él. Aquí tienes algunos ejemplos.
WIDGET DEL FEED DE FACEBOOK
WIDGET DESLIZADOR DE VÍDEO
Widget del visor de documentos
El widget Visor de Documentos le permite mostrar diversos documentos directamente en su sitio. Puede agregarlos mediante la carga de archivos, una URL activa o plataformas web como Dropbox, Google Drive o Google Mail. Puede ajustar su tamaño a cualquier tamaño.
Widget iFrame
Este widget le permite mostrar esencialmente un sitio web dentro de un sitio web, de modo que pueda incorporar datos y herramientas de otros sitios o servicios de terceros.
Considere usar este widget cuando necesite incorporar un servicio complejo basado en datos de otro sitio, como una búsqueda de inmuebles o un formulario de reservas. Este método es rápido, económico y no requiere código HTML para incrustar. He incluido un ejemplo de la página de Eventos de onecarevt.org.
Selección de imágenes
Las imágenes que elijas para un sitio web pueden ser clave para el éxito o el fracaso de un diseño. Elige imágenes que reflejen el estilo y el color de tu marca, así como la sensación que deseas transmitir. Evita las imágenes con muchos colores oscuros, ya que añaden peso al sitio. Aquí tienes algunos ejemplos, seleccionados por su alineación de colores, pero no por su contenido.
Ejemplo de CTA
PARA LA PARTE INFERIOR DE TODAS LAS PÁGINAS ARRIBA DEL PIE DE PÁGINA
Es recomendable terminar cada página del sitio web con una sola llamada a la acción. A continuación, se muestran algunos ejemplos.
Contáctenos
Mantente conectado
Lea nuestras últimas actualizaciones
No te pierdas ningún mensaje
AYÚDANOS
AYUDAR A LOS DEMÁS
Apoyar a nuestros estudiantes para que puedan prosperar y alcanzar sus metas.
$200
Su donación se destina directamente a apoyar a los estudiantes.
Servicios para niños, jóvenes y familias
Los programas abarcan una amplia gama de servicios en consultorio y en la comunidad, así como servicios escolares y domiciliarios para niños y sus familias que viven con enfermedades mentales. Los servicios están disponibles para futuras madres y padres hasta los 22 años de edad, inclusive.
Programa de Apoyo Comunitario
Servicios integrales de apoyo comunitario para personas con enfermedades mentales graves y persistentes. Nuestros servicios son individualizados y priorizan la salud, el bienestar y la recuperación. Trabajamos con personas de la comunidad y trabajamos principalmente con ellas.
Centro de Asesoramiento y Servicios Psicológicos
Servicios ambulatorios para adultos y niños que enfrentan dificultades graves y el estrés de la vida diaria. Ofrecemos terapias individuales, de pareja, familiares y grupales, evaluaciones, coordinación de servicios y apoyo comunitario con diversos enfoques terapéuticos enfocados en satisfacer las necesidades del cliente.
Servicios de desarrollo comunitario
Este párrafo resumiría el propósito de esta división y sus programas en lugar de enumerarlos todos. Al hacer clic en cualquier parte de este cuadro, accederá a la página del sitio web.
Servicios de cuidados intensivos
Los Servicios de Cuidados Intensivos (SCI) son un servicio combinado que brinda servicios de emergencia las 24 horas para personas y familias. El objetivo principal es reducir los efectos angustiantes inmediatos de la crisis y promover la estabilización.
Servicios psiquiátricos y de enfermería
Este párrafo resumiría el propósito de esta división y sus programas en lugar de enumerarlos todos. Al hacer clic en cualquier parte de este cuadro, accederá a la página del sitio web.
En la comunidad
Este párrafo resumiría el propósito de esta división y sus programas en lugar de enumerarlos todos. Al hacer clic en cualquier parte de este cuadro, accederá a la página del sitio web.
Cómo llegar a nosotros
Podrías incluir aquí información sobre cómo acceder a los programas de WCMHS
