تصویر و گرافیک

وضعیت: در حال بازبینی

تصویر در هارمونیک کمتر از متن و داده حرف می‌زند، اما باید راست بگوید: کار واقعی، آدم‌های واقعی، جای واقعی. گرافیک‌های برند فقط دو تا هستند، موج و Q، و هرکدام قاعدهٔ روشن دارد.

بخش‌هایی که با «(پیشنهاد)» مشخص شده‌اند هنوز در برندبوک نیامده‌اند و تا تایید برند پیشنهادند.

عکاسی

اصل‌ها (از برندبوک)

عکس‌های واقعی از کار واقعی: کارگاه‌ها، تیم‌ها، محل کار کارفرما.
نور طبیعی و بدون فیلترهای سنگین.
تصویرهای قاب‌دار گوشهٔ radius-md دارند.
متن روی عکس همیشه روی لایهٔ brand-deep با شفافیت حدود ۷۵٪ می‌نشیند.
بدون عکس‌های کلیشه‌ای (دست دادن، مهرهٔ شطرنج، لامپ)، بدون واترمارک، بدون عکس بی‌مجوز و بدون چهره بدون رضایت.

انجام بدهتیم مشتری دور میز کارگاه، با یادداشت‌های واقعی روی دیوار، در نور روز.

انجام ندهعکس استوک دو دست در حال دست دادن، یا مهرهٔ شطرنج روی صفحه به نشانهٔ «استراتژی».

دسته‌ها (پیشنهاد)

دسته	چه چیزی	کجا
کارگاه	تیم مشتری در حال کار، دیوار یادداشت، تخته	صفحهٔ خدمت، نمونه‌کار، اسلاید
محل کار مشتری	کارخانه، فروشگاه، دفتر؛ جایی که تغییر اتفاق می‌افتد	نمونه‌کار، گزارش
چهره	مشاوران هارمونیک، با زمینهٔ ساده و نور نرم	دربارهٔ ما، امضای مقاله، رویداد
جزییات	دست‌ها روی نقشه، صفحهٔ گزارش، ابزار کار	مقاله، شبکه‌های اجتماعی

نسبت و قاب (پیشنهاد)

۱۶:۹ — سربرگ صفحه، مقاله

۴:۳ — کارت، نمونه‌کار

۱:۱ — چهره، شبکهٔ اجتماعی

۴:۵ — پست و کاروسل

<div class="hq-cards" style="inline-size:100%">
  <figure class="hq-frame"><div class="hq-frame__placeholder">۱۶:۹ — سربرگ صفحه، مقاله</div></figure>
  <figure class="hq-frame hq-frame--4x3"><div class="hq-frame__placeholder">۴:۳ — کارت، نمونه‌کار</div></figure>
  <figure class="hq-frame hq-frame--1x1"><div class="hq-frame__placeholder">۱:۱ — چهره، شبکهٔ اجتماعی</div></figure>
  <figure class="hq-frame hq-frame--4x5"><div class="hq-frame__placeholder">۴:۵ — پست و کاروسل</div></figure>
</div>

متن روی عکس

متن فقط روی لایهٔ brand-deep با شفافیت opacity-overlay می‌نشیند؛ نه روی خود عکس، نه روی سایهٔ متن و نه روی نوار سیاه. کلاس hq-cover همین لایه را می‌سازد.

جای عکس واقعی

کارگاه طراحی مدل کسب‌وکار

دو روز با تیم مدیریت یک تولیدکنندهٔ پوشاک؛ از نقشهٔ ارزش تا برنامهٔ اجرا.

<div class="hq-cover">
  <div class="hq-frame__placeholder">جای عکس واقعی</div>
  <div class="hq-cover__body">
    <h2 class="hq-cover__title">کارگاه طراحی مدل کسب‌وکار</h2>
    <p class="hq-cover__text">دو روز با تیم مدیریت یک تولیدکنندهٔ پوشاک؛ از نقشهٔ ارزش تا برنامهٔ اجرا.</p>
  </div>
</div>

توکن	مقدار	کاربرد
`--hq-opacity-overlay`	0.75	لایهٔ brand-deep زیر متن روی عکس (برندبوک: حدود ۷۵٪).
`--hq-opacity-supergraphic`	0.5	گرافیک Q به رنگ Cyan 80 روی گرادیان سرمه‌ای (برندبوک: ۵۰٪).

چهره و رضایت (پیشنهاد)

پیش از انتشار عکس هر فرد، رضایت کتبی او (و برای عکس محل کار مشتری، رضایت سازمان) گرفته می‌شود.
اسناد، صفحه‌های نمایش و تخته‌ها در عکس نباید اطلاعات محرمانهٔ مشتری را نشان دهند؛ پیش از انتشار تار یا حذف شوند.
چهرهٔ مشاوران با زمینهٔ ساده و قاب ۱:۱، از شانه به بالا.

متن جایگزین

هر عکسی که معنا دارد alt دارد و همان چیزی را می‌گوید که عکس نشان می‌دهد: «تیم مدیریت یک تولیدکنندهٔ پوشاک در کارگاه نقشهٔ ارزش».
عکس تزیینی و گرافیک‌های برند (موج، Q) alt="" می‌گیرند.
متن جایگزین با «عکسِ» یا «تصویرِ» شروع نمی‌شود.

موج

موج گرافیک امضای هارمونیک است: خط‌های موازی و ظریف در حرکت، نماد رشد متوازن.

روی زمینهٔ تیره نسخهٔ Cyan 80 (wave.svg) و روی زمینهٔ روشن نسخهٔ Cyan 20 (wave-cyan20.svg).
به‌صورت افقی در نیمهٔ پایین یا وسط، و از هر دو لبه بیرون‌زده.
هرگز چرخانده، با رنگی بیرون از خانوادهٔ Cyan رنگ‌آمیزی، کوچک و شناور، با جلوه (سایه، درخشش) یا دوتایی روی هم استفاده نمی‌شود.
برای ابزارهایی که SVG نمی‌پذیرند، نسخهٔ PNG هر دو در پوشهٔ graphics/png هست.
موج متحرک قاعدهٔ خودش را در حرکت دارد.

فایل‌ها همان‌طور که از برندبوک آمده‌اند در دانلودها هستند و دست‌کاری نمی‌شوند.

Cyan 80 روی زمینهٔ تیره

<div style="inline-size:100%;aspect-ratio:3/1;overflow:hidden;display:flex;align-items:flex-end;background:var(--hq-brand-deep);border-radius:var(--hq-radius-md)">
  <img src="/dist/brand/graphics/wave.svg" alt="" style="inline-size:120%;max-inline-size:none;margin-inline:-10%" />
</div>

Cyan 20 روی زمینهٔ روشن

<div style="inline-size:100%;aspect-ratio:3/1;overflow:hidden;display:flex;align-items:flex-end;background:var(--hq-white);border:1px solid var(--hq-border);border-radius:var(--hq-radius-md)">
  <img src="/dist/brand/graphics/wave-cyan20.svg" alt="" style="inline-size:120%;max-inline-size:none;margin-inline:-10%" />
</div>

گرافیک Q

Q لوگو، بسیار بزرگ و بریده‌شده با لبهٔ صفحه: Cyan 80 با شفافیت opacity-supergraphic (۵۰٪) روی گرادیان سرمه‌ای، یا Cyan 10 روی سفید. یکی در هر صفحه، و هرگز همراه موج روی زمینهٔ روشن.

زمینه‌ها

زمینه	کاربرد
`surface` (سفید)	صفحه‌ها و اسلایدهای محتوا
`surface-alt` (Cool Gray 10)	اسلایدها و پنل‌های جایگزین؛ کارت روی آن سفید است
گرادیان سرمه‌ای	جلد، جداکنندهٔ بخش، نقل‌قول و اسلاید پایانی
گرادیان سرمه‌ای با موج	جلد و جداکنندهٔ بخش
سفید یا خاکستری با موج	جلد و جداکنندهٔ روشن
گرافیک Q	جلد و صفحهٔ پایانی؛ یکی در هر صفحه
`accent` تمام‌صفحه	یک جملهٔ کلیدی یا نقشه؛ حداکثر یک بار در هر مجموعه

زمینه‌های آمادهٔ قالب اسلاید، به اندازهٔ ۱۹۲۰×۱۰۸۰:

گرادیان سرمه‌ای

سرمه‌ای با موج

سفید با موج Cyan 20

خاکستری با موج

گرافیک Q روی سرمه‌ای

گرافیک Q روی سفید

<div class="hq-cards" style="inline-size:100%">
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-dark-plain.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">گرادیان سرمه‌ای</figcaption>
</figure>
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-dark-wave.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">سرمه‌ای با موج</figcaption>
</figure>
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-light-wave.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">سفید با موج Cyan 20</figcaption>
</figure>
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-gray-wave.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">خاکستری با موج</figcaption>
</figure>
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-q-dark.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">گرافیک Q روی سرمه‌ای</figcaption>
</figure>
  <figure class="hq-frame" style="display:grid;gap:var(--hq-space-1);aspect-ratio:auto;background:none;border-radius:0">
  <img src="/dist/brand/graphics/slides/backgrounds/bg-q-light.png" alt="" style="aspect-ratio:16/9;border-radius:var(--hq-radius-md);border:1px solid var(--hq-border)" />
  <figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">گرافیک Q روی سفید</figcaption>
</figure>
</div>