Записки Лулу
Привіт, Джон і Клер!
Мета цієї плитки стилю — концептуалізувати візуальний напрямок для вашого нового веб-сайту, а також запропонувати деякі ідеї щодо того, як функціональні можливості можна використовувати для відображення вмісту зручним для користувача способом.
Це лише відправна точка, яка буде використана для стимулювання ідей, тому, будь ласка, не бійтеся робити коментарі (до цього завдання ради Asana).
ПРИМІТКИ ДИЗАЙНУ:
- Існуючий зовнішній вигляд WCMHS досить «корпоративний», те, що ви зазвичай уявляєте на веб-сайті банку минулих років. Це надає сайту важкої, серйозної та непривітної поведінки, яка, можливо, не є характерною для вашої організації.
- У цьому стилі плитки я намагався полегшити відчуття, щоб дати відчуття:
- Дружній і гостинний
- Наповнює енергією
- Яскраво, весело, але професійно
- Сучасний
- Пам'ятний
- Використання яскраво-рожевого кольору від PNS — це сміливість і сміливість, яка додає унікальності дизайну, але якщо вам занадто багато, рожевий можна замінити помаранчевим (менш запам’ятовується, але все ж ефектно).
- Ви можете використовувати наявну кольорову палітру (див. нижче) як візуальний путівник-карту по всьому сайту (кожного разу, коли я бачу лаванду, наприклад, я знаю, що перебуваю на сторінці чи розділі, пов’язаному з CDS). Ця палітра кольорів не дуже добре поєднується, але ми можемо використовувати відтінки кожного відтінку, щоб налаштувати та поєднати.
- Я створив новий елемент «включення, а не виключення» для розваги під час очікування прапора — приймай або залишай за бажанням.
- Мені подобається підхід до того, щоб все було яскраво.
Поточна палітра кольорів
логотип
НЕ ВИКЛЮЧЕННЯ
КОРОТКИЙ ЗАГОЛОВОК ДРУГИЙ
Це приклад заголовка у Fjalla One
Це основна копія шрифтом Nunito Sans, який є привабливим і легким для читання. Це текст абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати його дизайн, використовуючи різні кольори, шрифти, розміри шрифтів і маркери. Просто виділіть слова, які ви хочете оформити, і виберіть один із варіантів на панелі редагування тексту. Це текстова область для цього абзацу.
Текст посилання.
РОЗДІЛ ТРЕТІЙ В NUNITO SANS
Додатковий шрифт підпису
Якщо використовувати його економно, ви можете додати сайту трохи більше стилю. Це лише приклад шрифту – ми можемо вибрати із сотні!
РЕКОМЕНДАЦІЇ ЩОДО КОМПОНУВАННЯ
Ширина текстового контейнера - не більше 730 px (очевидно менше для мобільних пристроїв).
Висота рядка - 1,5 - 2 для основного тексту/абзацу
Розмір шрифту - 18 пт або більше для комп'ютера / 16 для мобільного
Вирівнювання - вирівнювання по лівому краю
СОЦІАЛЬНИЙ
КНОПКИ
Функція «Натисни для виклику».
ПРИКЛАДИ ЗНАКІВ
Приклад текстового повзунка
Добре підходить для відображення коротких відгуків подібної довжини.
КОРОТКИЙ ЗАГОЛОВОК ДРУГИЙ
Приклад кольорової колонки
Це основна копія шрифтом Nunito Sans, який є привабливим і легким для читання. Це текст абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати його дизайн, використовуючи різні кольори, шрифти, розміри шрифтів і маркери. Просто виділіть слова, які ви хочете оформити, і виберіть один із варіантів на панелі редагування тексту. Це текстова область для цього абзацу.
Текст посилання.
КОРОТКИЙ ЗАГОЛОВОК ДРУГИЙ
Приклад кольорової колонки
Це основна копія шрифтом Nunito Sans, який є привабливим і легким для читання. Це текст абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати його дизайн, використовуючи різні кольори, шрифти, розміри шрифтів і маркери. Просто виділіть слова, які ви хочете оформити, і виберіть один із варіантів на панелі редагування тексту. Це текстова область для цього абзацу.
Текст посилання.
Ми розуміємо, що це таке...
Цей розділ необов'язковий. Ви можете використовувати його для переходу до наступного розділу. Використання висловлювань про співчуття, щоб показати, що ви розумієте та дбаєте, — це чудовий спосіб показати, що ви розумієте та дбаєте.
Цей розділ необов'язковий. Ви можете використовувати його для переходу до наступного розділу. Використання висловлювань про співчуття, щоб показати, що ви розумієте та дбаєте, — це чудовий спосіб показати, що ви розумієте та дбаєте.
Пункт теми 1
Підзаголовок
Це текстова область для цього абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати дизайн за допомогою різних кольорів, шрифтів, розмірів шрифтів і маркерів.
Пункт теми 2
Підзаголовок
Це текстова область для цього абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати дизайн за допомогою різних кольорів, шрифтів, розмірів шрифтів і маркерів.
Пункт 3 теми
Підзаголовок
Це текстова область для цього абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати дизайн за допомогою різних кольорів, шрифтів, розмірів шрифтів і маркерів.
Пункт теми 4
Підзаголовок
Це текстова область для цього абзацу. Щоб змінити його, просто натисніть і почніть вводити. Додавши свій вміст, ви можете налаштувати дизайн за допомогою різних кольорів, шрифтів, розмірів шрифтів і маркерів.
АКОРДЕОН
Макет у дві колонки
Додатковий абзац вступу. Примітки Лулу: піктограми в акордеоні поки що лише покажчики місця заповнення, але ви можете вибрати будь-яку піктограму SVG, щоб замінити їх АБО взагалі видалити. Я включив кілька зображень, щоб дати вам уявлення про те, що тут може працювати (коли ви виберете зображення, ми вимкнемо повзунок). Зображення можна було обрізати та переставляти для кращої роботи.
Додатковий абзац вступу. Примітки Лулу: піктограми в акордеоні поки що лише покажчики місця заповнення, але ви можете вибрати будь-яку піктограму SVG, щоб замінити їх АБО взагалі видалити. Я включив кілька зображень, щоб дати вам уявлення про те, що тут може працювати (коли ви виберете зображення, ми вимкнемо повзунок). Зображення можна було обрізати та переставляти для кращої роботи.
Додатковий абзац вступу. Примітки Лулу: піктограми в акордеоні поки що лише покажчики місця заповнення, але ви можете вибрати будь-яку піктограму SVG, щоб замінити їх АБО взагалі видалити. Я включив кілька зображень, щоб дати вам уявлення про те, що тут може працювати (коли ви виберете зображення, ми вимкнемо повзунок). Зображення можна було обрізати та переставляти для кращої роботи.
Приклад анімованих панелей
Добре, коли ви хочете відобразити релевантні числа тощо. Ви можете змінити мітки стовпців і % міток за бажанням.
Приклад розділу з логотипом партнера
Сіті горизонт
День народження Спаркс
Модний журнал
Розмиті лінії
Типографіка як
ДИЗАЙН
ПОСЛУГИ ІНТЕНСИВНОЇ ТЕРАПІЇ
Великий шрифт, жирний фон і монохроматична схема дуже добре підходять для виділення вмісту без використання зображень. Цей розділ має колір ICS.
Приклад функціональності панелі з вкладками
Дослідження та аналітика
Напишіть опис цієї вкладки та додайте інформацію, яка зацікавить відвідувачів сайту. Наприклад, якщо ви використовуєте вкладки для показу різних служб, напишіть, що робить кожну службу унікальною. Якщо ви використовуєте вкладки для відображення продуктів ресторану, напишіть про те, що робить конкретну страву особливо вартою або смачною.
Стратегія планування
Напишіть опис цієї вкладки та додайте інформацію, яка зацікавить відвідувачів сайту. Наприклад, якщо ви використовуєте вкладки для показу різних служб, напишіть, що робить кожну службу унікальною. Якщо ви використовуєте вкладки для відображення продуктів ресторану, напишіть про те, що робить конкретну страву особливо вартою або смачною.
Створення концепції
Напишіть опис цієї вкладки та додайте інформацію, яка зацікавить відвідувачів сайту. Наприклад, якщо ви використовуєте вкладки для показу різних служб, напишіть, що робить кожну службу унікальною. Якщо ви використовуєте вкладки для відображення продуктів ресторану, напишіть про те, що робить конкретну страву особливо вартою або смачною.
Випробування в польових умовах
Напишіть опис цієї вкладки та додайте інформацію, яка зацікавить відвідувачів сайту. Наприклад, якщо ви використовуєте вкладки для показу різних служб, напишіть, що робить кожну службу унікальною. Якщо ви використовуєте вкладки для відображення продуктів ресторану, напишіть про те, що робить конкретну страву особливо вартою або смачною.
Успіх гарантований
Напишіть опис цієї вкладки та додайте інформацію, яка зацікавить відвідувачів сайту. Наприклад, якщо ви використовуєте вкладки для показу різних служб, напишіть, що робить кожну службу унікальною. Якщо ви використовуєте вкладки для відображення продуктів ресторану, напишіть про те, що робить конкретну страву особливо вартою або смачною.
Приклад функціональності акордеона
Використовуйте для поширених запитань або будь-чого іншого, де ви хотіли б стиснути простір.
Приклад розділу відео
Музика - це терапія. Це заспокоює вашу душу, приносить радість, змушує вас рухатися тощо. Музика впливає на те, як ваше серце б'ється і як ви дихаєте, як ви спите і як ви прокидаєтеся. Музика настільки важлива для життя, хіба ви не заслуговуєте музичної свободи?
Типографіка як
ДИЗАЙН
CFYS
Великий шрифт, жирний фон і монохроматична схема дуже добре підходять для виділення вмісту без використання зображень. Цей розділ має колір CFYS.
Програми для жителів округу Вашингтон
Це один із прикладів того, як ви можете надати огляд програм, які пропонуються на домашній сторінці. Натискання кнопки «Дізнатися більше» переведе відвідувача веб-сайту до додаткової інформації (до підсторінки чи розділу сторінки). Наразі фонові кольори є лише заповнювачами, але я подумав, що було б добре використовувати кольори бренду для кожного постачальника послуг (нам потрібно було б створити прості фонові кольори, які ми завантажуємо до галереї нижче).
Функціональність календаря
Це ваш календар Tockify, який інтегровано з вашим календарем Google. Я додав теги для кожного розділу в кольорах розділу, тому, якщо ви додаєте подію до Tockify, не забудьте позначити її належним чином, щоб відображалися кольори.
приклад
Календар Google
Ви можете інтегрувати будь-який календар Google на веб-сайт.
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
Типографіка як
ДИЗАЙН
CDS
Великий шрифт, жирний фон і монохроматична схема дуже добре підходять для виділення вмісту без використання зображень. Цей розділ має колір CDS, який я трохи освітлив.
Функціональність шкали часу
Ця функція є чудовим способом показати часову шкалу або процес. Він має багато варіантів стилю, тому його можна узгодити з вашим брендом.
Соціальні мережі та відео
Хороший спосіб підтримувати динамічність і цікавість вашого веб-сайту – це інтеграція ваших соціальних каналів безпосередньо на сайт. Ось кілька прикладів.
ВІДЖЕТ СТРІЧКИ FACEBOOK
ВІДЖЕТ СЛАЙДЕР ВІДЕО
Віджет перегляду документів
Віджет «Перегляд документів» дозволяє відображати різноманітні документи безпосередньо на вашому сайті. Документи можна додавати через завантаження файлів, активну URL-адресу або такі веб-платформи, як Dropbox, Google Drive або Google Mail. Його можна підібрати до будь-якого розміру.
Віджет iFrame
Цей віджет дозволяє відображати веб-сайт на веб-сайті, щоб ви могли включати дані та інструменти з інших сайтів або сторонніх служб.
Розгляньте можливість використання цього віджета, якщо вам потрібно включити складну службу, керовану даними, з іншого сайту, наприклад пошук нерухомості або форму бронювання. Цей підхід є швидким, дешевим і не потребує вбудовування коду HTML. Я включив приклад зі сторінки подій onecarevt.org.
Вибір зображення
Зображення, які ви вибираєте для веб-сайту, можуть змінити або змінити дизайн. Виберіть зображення, які відображають стиль і колір вашого бренду, а також відчуття, які ви хочете викликати. Тримайтеся подалі від зображень із великою кількістю темних кольорів, оскільки вони додають сайту важкості. Ось кілька прикладів, обраних для вирівнювання кольорів, але не фактичного вмісту.
Приклад CTA
ДЛЯ НИЖНЬОЇ ЧАСТИНИ ВСІХ СТОРІНОК НАД НИЖНІМ КОЛОНТОМ
Рекомендується завершувати кожну сторінку веб-сайту одним CTA. Нижче лише кілька прикладів.
Зв'яжіться з нами
Залишайтеся на зв'язку
Читайте наші останні оновлення
Ніколи не пропустіть повідомлення
ДОПОМОЖІТЬ НАМ
ДОПОМОГАТИ ІНШИМ
Підтримуйте наших студентів, щоб вони могли процвітати та досягати своїх цілей
200 доларів США
Ваша пожертва йде безпосередньо на підтримку студентів
Служби для дітей, молоді та сім'ї
Програми охоплюють широкий спектр офісних і громадських послуг, а також шкільних і домашніх послуг для дітей та їхніх сімей, які живуть з психічними захворюваннями. Послуги доступні для майбутніх мам і батьків до 22 років включно.
Програма підтримки громади
Комплексні послуги підтримки на базі громади для людей з важкими та стійкими психічними захворюваннями. Наші послуги є індивідуальними та акцентують увагу на здоров’ї, самопочутті та відновленні. Ми орієнтовані на аутрич і забезпечуємо більшу частину роботи з клієнтами в громаді.
Центр консультативно-психологічних послуг
Амбулаторні послуги для дорослих і дітей у важкі випробування та стреси повсякденного життя. Індивідуальна, парна, сімейна та групова терапія, оцінювання, координація послуг і громадська підтримка пропонуються в різних підходах до лікування, орієнтованих на задоволення потреб клієнта.
Служби розвитку громад
Цей абзац узагальнить мету цього підрозділу та його програми замість переліку всіх програм. Клацнувши будь-де в цьому полі, ви перейдете на сторінку веб-сайту.
Послуги інтенсивної терапії
Служба інтенсивної терапії (ICS) — це комбінована служба, яка надає цілодобову невідкладну допомогу окремим особам і сім’ям. Основна мета полягає в тому, щоб зменшити безпосередні тривожні наслідки кризи та сприяти стабілізації.
Психіатричні та медсестринські послуги
Цей абзац узагальнить мету цього підрозділу та його програми замість переліку всіх програм. Клацнувши будь-де в цьому полі, ви перейдете на сторінку веб-сайту.
У спільноті
Цей абзац узагальнить мету цього підрозділу та його програми замість переліку всіх програм. Клацнувши будь-де в цьому полі, ви перейдете на сторінку веб-сайту.
Як до нас доїхати
Ви можете включити тут інформацію про те, як отримати доступ до програм WCMHS
