56a6e2da93
- src/dist 산출물 분리 원칙 정리(.gitignore, .gitattributes) - 루트 및 주요 폴더(config/scripts/prompts/tests/src, 런타임 폴더 5종)에 안내용 README.md 추가 - CHANGELOG.md, LICENSE, docs/ops/05-release-and-versioning.md 추가 - docs/README.md 문서 지도 갱신
1704 lines
122 KiB
HTML
1704 lines
122 KiB
HTML
|
||
|
||
|
||
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<script src="//media.nngroup.com/static/bundles/consent.js"></script><!-- Google Consent Mode --><script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
gtag("consent", "default", {
|
||
ad_storage: "denied",
|
||
ad_user_data: "denied",
|
||
ad_personalization: "denied",
|
||
analytics_storage: "denied",
|
||
functionality_storage: "denied",
|
||
personalization_storage: "denied",
|
||
security_storage: "granted",
|
||
wait_for_update: 2000,
|
||
});
|
||
gtag("set", "ads_data_redaction", true);
|
||
gtag("set", "url_passthrough", false);
|
||
</script><!-- End Google Consent Mode --><!-- Google Tag Manager --><script async data-cookieyes="cookieyes-analytics">
|
||
(
|
||
function(w, d, s, l, i) {
|
||
w[l] = w[l] || [];
|
||
w[l].push({
|
||
"gtm.start": new Date().getTime(),
|
||
"event": "gtm.js",
|
||
});
|
||
var f = d.getElementsByTagName(s)[0],
|
||
j = d.createElement(s),
|
||
dl = l != "dataLayer" ? "&l=" + l : "";
|
||
j.async = true;
|
||
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
|
||
f.parentNode.insertBefore(j, f);
|
||
}
|
||
)(window, document, "script", "dataLayer", "GTM-THJDDHK");
|
||
</script><!-- End Google Tag Manager --><script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/1a1cf80aa4378be78f10d807/script.js"></script><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title>Good Visual Design, Explained - NN/G</title><meta name="description" content="To create appealing designs, align type and elements to a grid, build a clear visual hierarchy, use color intentionally, and stay consistent with every design choice."/><meta name="keywords" content="visual design, visual principles, principles, visual ux, design elements, emotional design, beautiful design, aesthetic design, typography, visual hierarchy, color, grid"/><meta property="og:site_name" content="Nielsen Norman Group"/><meta property="og:url" content="https://www.nngroup.com/articles/good-visual-design/"/><meta property="og:title" content="Good Visual Design, Explained"/><meta property="og:type" content="article"><meta property="og:description" content="To create appealing designs, align type and elements to a grid, build a clear visual hierarchy, use color intentionally, and stay consistent with every design choice."/><meta property="og:image" content="https://media.nngroup.com/media/articles/opengraph_images/Opengraph_IuLgGu7.png"><meta name="robots" content=""/><meta name="twitter:dnt" content="on"/><meta name="twitter:site" content="@nngroup"/><meta name="twitter:card" content="summary_large_image"><script>(function(){
|
||
var FLAGS = {
|
||
'enable_team_training_pages': true,'use_server_algolia_search_flag': false,'enable_lot_vs_sp': true,'enable_us_oscar_tax_exemption': false,'enable_eu_oscar_tax_exemption': true,'enable_reportcart_dataclass': true,'banner_sales': false,'enable_2025_lot_catalog': true,'enable_2025_lot_description': true,'enable_2025_lot_upcoming': true
|
||
},
|
||
SWITCHES = {
|
||
'fastspring_exam_transaction_credits': true,'enable_reports_watermarking': false,'release-internal-calendar-integration': true,'training-session-calendar-integration': true,'release-event-marquee-sync': true,'stripe_invoice_auto_send': false,'allow_to_download_attendance_confirmation': true,'enable_event_onboarding_email': true,'enable_adaptive_tax_rates': true,'use_teamdesk_class_feedback_etl': true,'release_training_session_migration': true,'training-session-class-allow-editing': true,'instructor-config-admin-write': true,'uxc_rebranding_2026': true,'allow_first_class_reminder_scheduler_to_run': true,'allow_to_bulk_update_exam_deadline': true,'enable_request_class_override': true,'instructor-config-autopopulate': true,'group-invoice-allow-bank-transfer': true,'allow_to_create_payment_from_cms': true,'use_course_calendar_redesign': false,'void_exam_attempt': true,'enable_event_first_class_reminder_email': true,'use_cms_feedback': true,'enable_pending_seat_requests_email': true,'inhouse_rebranding_2026': true,'release_training_session_attendance': true,'selfpaced_nav_card': true,'allow_exam_credit_transaction_creation': true,'slack-unknown-user-self-service': false,'reprocess_td_attendees': false,'allow-event-new-fields-editing': true,'use_homepage_rebranding': false,'use_teamdesk_class_link_etl': true
|
||
},
|
||
SAMPLES = {
|
||
|
||
};
|
||
window.waffle = {
|
||
"flag_is_active": function waffle_flag(flag_name) {
|
||
|
||
return !!FLAGS[flag_name];
|
||
},
|
||
"switch_is_active": function waffle_switch(switch_name) {
|
||
|
||
return !!SWITCHES[switch_name];
|
||
},
|
||
"sample_is_active": function waffle_sample(sample_name) {
|
||
|
||
return !!SAMPLES[sample_name];
|
||
},
|
||
"FLAGS": FLAGS,
|
||
"SWITCHES": SWITCHES,
|
||
"SAMPLES": SAMPLES
|
||
};
|
||
})();
|
||
</script><link rel="preconnect" href="https://media.nngroup.com/"/><link rel="preconnect" href="https://www.googletagmanager.com/"/><link rel="preconnect" href="https://dnn506yrbagrg.cloudfront.net/"/><script src="https://media.nngroup.com/static/js/output.b325de4e1141.js" async></script><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.e9c610b5facf.css" type="text/css"><link rel="canonical" href="https://www.nngroup.com/articles/good-visual-design/"><link rel="search" type="application/opensearchdescription+xml" title="NN/g Search" href="/opensearch.xml"/><link rel="shortcut icon" href="https://media.nngroup.com/static/img/favicon.ico"/><link rel="stylesheet" href="https://media.nngroup.com/static/css/output.f5dbb0e58514.css" type="text/css"><script async defer data-cookieyes="cookieyes-analytics" src="https://tools.luckyorange.com/core/lo.js?site-id=e5c040f4"></script>
|
||
|
||
|
||
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
"headline": "Good Visual Design, Explained",
|
||
"image": [
|
||
"https://media.nngroup.com/media/articles/opengraph_images/Opengraph_IuLgGu7.png"
|
||
],
|
||
"datePublished": "2025-11-14T18:00:00+0000",
|
||
"dateModified": "2026-04-09T13:46:55+0000",
|
||
"author": [
|
||
|
||
{
|
||
"@type": "Person",
|
||
"name": "Kelley Gordon"
|
||
|
||
,"url": "https://www.nngroup.com/articles/author/kelley-gordon/"
|
||
|
||
}
|
||
|
||
|
||
]
|
||
}
|
||
</script>
|
||
|
||
|
||
</head>
|
||
<body class=" article-detail " >
|
||
|
||
<div class="skip"><a href="#main">Skip to content</a></div>
|
||
|
||
|
||
|
||
|
||
<div class="banner-sales paragraph-xs-400 hidden" data-banner-id="4">
|
||
<div class="banner-sales__content">
|
||
<p class="banner-sales__text">
|
||
September Exclusive | Buy 2, Get 3rd Free on Live Online Courses
|
||
</p>
|
||
|
||
<a class="banner-sales__action" href="https://www.nngroup.com/training/september/?utm_campaign=live-online-courses&utm_source=website&utm_medium=banner&utm_content=b2g1">
|
||
Enroll Today
|
||
</a>
|
||
|
||
</div>
|
||
<button aria-label="Close promotion banner">
|
||
<svg class="open-nav" aria-hidden="true" width="22" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-close" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="svg-definitions">
|
||
<svg
|
||
width="0"
|
||
id="icon-error-svg"
|
||
viewbox="0 0 16 16"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g id="icon-error">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 3C8.55228 3 9 3.44772 9 4V9C9 9.55228 8.55229 10 8 10C7.44772 10 7 9.55228 7 9V4C7 3.44772 7.44772 3 8 3ZM8 13.5833C8.55229 13.5833 9 13.1356 9 12.5833C9 12.031 8.55229 11.5833 8 11.5833C7.44772 11.5833 7 12.031 7 12.5833C7 13.1356 7.44772 13.5833 8 13.5833Z" fill="currentColor"/>
|
||
</g>
|
||
</svg>
|
||
<svg
|
||
width="0"
|
||
id="icon-error-svg-outlined"
|
||
viewBox="0 0 24 25"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g id="icon-error-outlined">
|
||
<circle cx="12" cy="12" r="11" fill="currentColor" stroke="black" stroke-width="2"/>
|
||
<circle cx="12" cy="18.625" r="1.5" fill="black"/>
|
||
<path d="M12 6L12 13.5" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
|
||
</g>
|
||
</svg>
|
||
<svg
|
||
width="0"
|
||
id="icon-confirm-svg"
|
||
viewBox="0 0 32 32"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M3.52197 18.3985L10.5027 25.3792C10.9079 25.7844 11.5699 25.767 11.9532 25.3411L28 7.50989L27.0315 6.63916L11.1992 24.2311L4.44338 17.4753L3.52197 18.3985Z" fill="currentColor" stroke="black"/>
|
||
</svg>
|
||
<svg
|
||
width="0"
|
||
viewBox="0 0 17 17"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g id="icon-information">
|
||
<circle cx="8" cy="8.08008" r="7.25" fill="currentColor" stroke="black" stroke-width="1.5"/>
|
||
<path d="M7.24718 11.7468V6.64511H8.75918V11.7468H7.24718ZM7.99804 5.89425C7.74433 5.89425 7.53861 5.82225 7.3809 5.67825C7.22318 5.53425 7.14433 5.34225 7.14433 5.10225C7.14433 4.86225 7.22318 4.67025 7.3809 4.52625C7.53861 4.38225 7.74433 4.31025 7.99804 4.31025C8.25176 4.31025 8.45747 4.38225 8.61518 4.52625C8.7729 4.67025 8.85176 4.86225 8.85176 5.10225C8.85176 5.34225 8.7729 5.53425 8.61518 5.67825C8.45747 5.82225 8.25176 5.89425 7.99804 5.89425Z" fill="black"/>
|
||
</g>
|
||
<g id="icon-success-outlined">
|
||
<circle cx="12.5" cy="12.1602" r="11.125" fill="currentColor" stroke="black" stroke-width="1.75"/>
|
||
<path d="M7.5 13.0322L10.701 16.2332L17.6415 8.52091L17.2402 8.16016L10.6807 15.4487L7.88175 12.6497L7.5 13.0322Z" fill="black" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||
</g>
|
||
</svg>
|
||
<svg
|
||
width="0"
|
||
viewBox="0 0 18 18"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g id="icon-check">
|
||
<path d="M1.98022 10.349L5.95349 14.3223C6.15606 14.5248 6.48707 14.5161 6.6787 14.3032L15.7491 4.22416L15.2044 3.73438L6.29866 13.6298L2.49852 9.82967L1.98022 10.349Z" fill="currentColor" stroke="currentColor"/>
|
||
</g>
|
||
</svg>
|
||
<svg width="0" xmlns="http://www.w3.org/2000/svg">
|
||
<symbol id="icon-price-tag" viewBox="0 0 32 32" fill="none">
|
||
<path d="M6.86136 17.1751C6.4355 16.7492 6.22422 16.1541 6.28619 15.5551L7.08168 7.86528C7.17911 6.92353 7.92352 6.17912 8.86527 6.0817L16.5551 5.2862C17.1541 5.22423 17.7492 5.43551 18.1751 5.86137L26.6943 14.3806C27.4753 15.1616 27.4753 16.428 26.6943 17.209L18.209 25.6943C17.428 26.4754 16.1616 26.4754 15.3806 25.6943L6.86136 17.1751Z" stroke="currentColor" stroke-width="1.5"/>
|
||
<circle cx="10.9611" cy="9.9613" r="1" transform="rotate(-45 10.9611 9.9613)" fill="currentColor"/>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<svg width="0" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g id="logo">
|
||
<path d="M0 26.8755V3.69629H4.93343L11.244 17.4356H11.3146V3.69629H15.4258V26.8755H11.1128L4.18181 11.9141H4.11623V26.8755H0Z" fill="currentColor" />
|
||
<path d="M23.2194 26.8755V3.69629H28.1579L34.4684 17.4356H34.534V3.69629H38.6503V26.8755H34.3373L27.4012 11.9141H27.3357V26.8755H23.2194Z" fill="currentColor" />
|
||
<path d="M65.1485 15.8523C65.1485 18.0045 64.1699 19.0682 62.2177 19.0682C60.1646 19.0682 59.0902 18.0094 59.0902 15.9513C59.0902 13.7348 60.1343 12.7057 62.1521 12.7057C64.301 12.7057 65.1485 13.6705 65.1485 15.8573V15.8523ZM67.1713 11.4738C65.1838 11.4738 64.6945 10.5684 62.2177 10.5684C58.6664 10.5684 56.2098 12.7651 56.2098 15.981C56.2098 18.1034 57.6828 19.9241 59.872 20.597C57.6525 21.2649 56.9311 22.0318 56.9311 23.3132C56.9311 24.7678 58.0813 25.6385 60.0032 25.6385C60.5228 25.6385 61.8595 25.6088 62.5103 25.6088C64.1043 25.6088 65.0829 25.7672 65.7034 26.1877C66.2885 26.5736 66.5811 27.2514 66.5811 28.1172C66.5811 30.1111 65.1485 30.9175 62.6414 30.9175C61.34 30.9175 60.1343 30.6306 59.3525 30.1754C58.7673 29.8241 58.4092 29.1463 58.4092 28.3102C58.4092 27.7956 58.6362 27.2168 58.8682 26.8606L56.1846 27.0882C55.9525 27.7313 55.8567 28.2162 55.8567 28.795C55.8567 31.0759 57.824 32.8619 62.9088 32.8619C66.8484 32.8619 69.3707 31.3034 69.3707 27.8303C69.3707 26.445 68.846 25.3169 67.5698 24.4462C66.5861 23.7684 65.547 23.5408 63.6553 23.5408H61.0524C60.2403 23.5408 59.751 23.2538 59.751 22.7739C59.751 22.2297 60.4975 21.6855 62.6818 20.9186C63.8521 20.9186 64.8963 20.7256 65.7084 20.221C67.2066 19.2958 68.1247 17.6285 68.1247 15.8276C68.1247 14.7985 67.7968 13.898 67.141 13.0965C67.4386 13.2252 67.8321 13.2895 68.2558 13.2895C69.2395 13.2895 69.9911 13.0322 71.005 12.3198L69.4362 10.7712C68.6493 11.2858 68.0288 11.4837 67.1763 11.4837L67.1713 11.4738Z" fill="currentColor" />
|
||
<path d="M44.1991 33.5001C44.1184 33.5001 44.0326 33.4852 43.9519 33.4605C43.5282 33.3269 43.2962 32.8767 43.4374 32.4611L53.8642 1.04428C54.0004 0.62869 54.4544 0.401103 54.8781 0.539634C55.3018 0.673217 55.5288 1.11849 55.3926 1.53409L44.9608 32.9509C44.8498 33.2824 44.5371 33.4951 44.1941 33.4951L44.1991 33.5001Z" fill="currentColor" />
|
||
</g>
|
||
<g id="rebrand-25-logo-black">
|
||
<g fill="var(--logo-red, #FF3921)">
|
||
<path d="M132.642 32V7.58598H136.07V10.1036H136.12C137.23 8.18226 139.267 7.23816 141.536 7.23816C146.058 7.23816 149.105 10.9317 149.105 16.3313C149.105 21.7475 146.074 25.4245 141.519 25.4245C139.234 25.4245 137.362 24.4473 136.186 22.4431H136.136V32H132.642ZM140.807 22.41C143.623 22.41 145.561 20.2733 145.561 16.3313C145.561 12.3727 143.623 10.2361 140.807 10.2361C137.826 10.2361 135.905 12.6543 135.905 16.3313C135.905 20.0083 137.826 22.41 140.807 22.41Z" />
|
||
<path d="M121.005 25.4244C117.411 25.4244 114.678 23.0559 114.678 18.4845V7.58594H118.173V18.0538C118.173 20.853 119.58 22.294 122.015 22.294C124.384 22.294 126.222 20.9027 126.222 17.6563V7.58594H129.717V25.0766H126.288V22.4431C125.096 24.4306 123.324 25.4244 121.005 25.4244Z" />
|
||
<path d="M103.895 25.4742C98.8926 25.4742 95.5137 21.7475 95.5137 16.3645C95.5137 10.9483 98.8926 7.18848 103.895 7.18848C108.897 7.18848 112.259 10.9483 112.259 16.3645C112.259 21.7475 108.897 25.4742 103.895 25.4742ZM103.895 22.4597C106.893 22.4597 108.731 20.0746 108.731 16.3645C108.731 12.6046 106.876 10.203 103.895 10.203C100.913 10.203 99.0582 12.6046 99.0582 16.3645C99.0582 20.0912 100.897 22.4597 103.895 22.4597Z" />
|
||
<path d="M85.791 25.0766V7.58593H89.1368V10.4182H89.203C89.849 8.51346 91.2072 7.37061 93.4266 7.37061C93.9566 7.37061 94.4204 7.42029 94.702 7.45342V10.7164C94.437 10.6667 93.6751 10.5507 92.8635 10.5507C90.8925 10.5507 89.2858 11.8923 89.2858 14.7412V25.0766H85.791Z" />
|
||
<path d="M72.4237 25.4741C65.7322 25.4741 60.9951 20.2401 60.9951 12.7536C60.9951 5.15113 65.7984 0 72.4071 0C77.7736 0 82.08 3.46169 82.8585 8.48032H79.1317C78.4361 5.43271 75.8522 3.36232 72.4568 3.36232C67.7694 3.36232 64.6887 7.12215 64.6887 12.7536C64.6887 18.3519 67.786 22.1118 72.4734 22.1118C76.3491 22.1118 79.3636 19.4617 79.3968 15.5362H73.285V12.472H83.0241V15.3043C83.0241 21.1842 78.4858 25.4741 72.4237 25.4741Z" />
|
||
<path d="M47.7232 25.1331H43.7197L59.2071 0.427124H63.2106L47.7232 25.1331Z" />
|
||
</g>
|
||
<g fill="var(--logo-black, #000)">
|
||
<path d="M22.5527 25.0765V0.397461H26.6273L36.0517 15.3208C36.6314 16.2484 37.7246 18.12 38.7184 19.8757C38.6521 18.0869 38.619 15.9834 38.619 15.089V0.397461H42.3126V25.0765H38.2049L29.7743 11.7432C29.0786 10.65 27.737 8.41402 26.0972 5.59828C26.2132 8.49683 26.2297 10.6335 26.2297 11.7266V25.0765H22.5527Z" />
|
||
<path d="M0 25.0768V0.397705H4.07453L13.499 15.3211C14.0787 16.2486 15.1718 18.1203 16.1656 19.8759C16.0994 18.0871 16.0662 15.9836 16.0662 15.0892V0.397705H19.7598V25.0768H15.6522L7.22153 11.7435C6.52587 10.6503 5.18426 8.41426 3.54451 5.59853C3.66045 8.49708 3.67702 10.6337 3.67702 11.7269V25.0768H0Z" />
|
||
</g>
|
||
</g>
|
||
<symbol id="rebrand-25-logo-compact" viewBox="0 0 79 24">
|
||
<g fill="var(--logo-red, #FF3921)">
|
||
<path d="M68.2331 24C61.9288 24 57.4658 19.0689 57.4658 12.0156C57.4658 4.85306 61.9912 0 68.2174 0C73.2734 0 77.3306 3.26138 78.064 7.9896H74.5529C73.8976 5.11834 71.4632 3.16775 68.2643 3.16775C63.8481 3.16775 60.9457 6.71001 60.9457 12.0156C60.9457 17.29 63.8637 20.8323 68.2799 20.8323C71.9314 20.8323 74.7714 18.3355 74.8026 14.6372H69.0445V11.7503H78.22V14.4187C78.22 19.9584 73.9444 24 68.2331 24Z" />
|
||
<path d="M44.8552 23.6787H41.0834L55.6745 0.402344H59.4463L44.8552 23.6787Z" />
|
||
</g>
|
||
<g fill="var(--logo-black, #000)">
|
||
<path d="M21.1409 23.6255V0.374512H24.9796L33.8587 14.4343C34.4049 15.3082 35.4348 17.0715 36.371 18.7256C36.3086 17.0403 36.2774 15.0585 36.2774 14.2159V0.374512H39.7573V23.6255H35.8873L27.9445 11.0637C27.2891 10.0338 26.0251 7.92718 24.4803 5.27438C24.5895 8.0052 24.6051 10.0182 24.6051 11.0481V23.6255H21.1409Z" />
|
||
<path d="M0 23.6255V0.374512H3.83875L12.7178 14.4343C13.264 15.3082 14.2939 17.0715 15.2302 18.7256C15.1678 17.0403 15.1365 15.0585 15.1365 14.2159V0.374512H18.6164V23.6255H14.7464L6.80364 11.0637C6.14825 10.0338 4.88427 7.92718 3.3394 5.27438C3.44863 8.0052 3.46424 10.0182 3.46424 11.0481V23.6255H0Z" />
|
||
</g>
|
||
</symbol>
|
||
<g id="icon-external-link">
|
||
<path d="M11.957 10.0216V12.5113C11.957 13.0636 11.5092 13.5113 10.957 13.5113H2.48779C1.93551 13.5113 1.48779 13.0636 1.48779 12.5113V4.04212C1.48779 3.48983 1.93551 3.04211 2.48779 3.04211H4.97751" stroke="currentColor" />
|
||
<path d="M4.49951 10.4561L12.8277 2.12795" stroke="currentColor" />
|
||
<path d="M12.8374 6.46273L12.8374 2.15118H8.52587" stroke="currentColor" />
|
||
</g>
|
||
<g id="icon-burger">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C4.82824e-08 0.947715 0.447715 0.5 1 0.5L19 0.500002C19.5523 0.500002 20 0.947717 20 1.5C20 2.05229 19.5523 2.5 19 2.5L1 2.5C0.447715 2.5 -4.82821e-08 2.05228 0 1.5Z" fill="currentColor" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 17.5C4.82824e-08 16.9477 0.447715 16.5 1 16.5L19 16.5C19.5523 16.5 20 16.9477 20 17.5C20 18.0523 19.5523 18.5 19 18.5L1 18.5C0.447715 18.5 -4.82821e-08 18.0523 0 17.5Z" fill="currentColor" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.5C4.82824e-08 8.94772 0.447715 8.5 1 8.5L19 8.5C19.5523 8.5 20 8.94772 20 9.5C20 10.0523 19.5523 10.5 19 10.5L1 10.5C0.447715 10.5 -4.82821e-08 10.0523 0 9.5Z" fill="currentColor" />
|
||
</g>
|
||
<path id="icon-search" d="M29.921 27.5861L22.1292 20.034C24.0015 17.8554 24.9351 15.061 24.7359 12.2322C24.5367 9.40331 23.2199 6.75782 21.0594 4.84601C18.899 2.9342 16.0613 1.90327 13.1366 1.96769C10.2119 2.03211 7.42541 3.1869 5.3568 5.19186C3.2882 7.19681 2.09674 9.89755 2.03028 12.7322C1.96382 15.5669 3.02747 18.3173 4.99997 20.4113C6.97248 22.5053 9.70196 23.7815 12.6206 23.9747C15.5393 24.1678 18.4224 23.2629 20.6702 21.4481L28.462 29.0002L29.921 27.5861ZM4.12735 13.0002C4.12735 11.2202 4.67195 9.48015 5.69228 8.0001C6.71261 6.52006 8.16284 5.36651 9.85958 4.68532C11.5563 4.00413 13.4234 3.8259 15.2246 4.17317C17.0259 4.52044 18.6804 5.3776 19.9791 6.63628C21.2777 7.89495 22.1621 9.49859 22.5204 11.2444C22.8787 12.9903 22.6948 14.7999 21.992 16.4444C21.2891 18.0889 20.099 19.4945 18.5719 20.4835C17.0449 21.4724 15.2496 22.0002 13.4131 22.0002C10.9512 21.9976 8.59091 21.0485 6.85009 19.3613C5.10928 17.674 4.13008 15.3864 4.12735 13.0002Z" fill="currentColor" />
|
||
<path id="icon-open-nav" fill-rule="evenodd" clip-rule="evenodd" d="M8.19398 11.5945C7.85227 11.9362 7.29825 11.9362 6.95654 11.5945L1.29969 5.93763L2.53712 4.7002L7.57526 9.73833L12.6134 4.7002L13.8508 5.93764L8.19398 11.5945Z" fill="currentColor" />
|
||
<g id="icon-search-rebrand">
|
||
<circle cx="7.88514" cy="7.88514" r="7.13514" stroke="currentColor" stroke-width="1.125" />
|
||
<path d="M12.3447 13.2366L16.3582 17.2501" stroke="currentColor" stroke-width="1.125" />
|
||
</g>
|
||
<g id="icon-cart">
|
||
<circle cx="11.3124" cy="22.5204" r="1.83485" fill="currentColor" />
|
||
<circle cx="25.5299" cy="22.5204" r="1.83485" fill="currentColor" />
|
||
<path d="M7.56201 3.11621H28.2498C28.8012 3.11621 29.2054 3.63495 29.0707 4.16965L27.1371 11.8434C27.0424 12.2195 26.7041 12.4832 26.3162 12.4832H10.6505" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
|
||
<path d="M1.82202 1H5.3761C5.74546 1 6.07219 1.23947 6.1834 1.59169L11.2469 17.6284C11.3581 17.9806 11.6848 18.2201 12.0542 18.2201H25.8257" stroke="currentColor" stroke-width="1.75" stroke-linecap="square" />
|
||
</g>
|
||
<g id="icon-cart-rebrand-25">
|
||
<circle cx="9.88586" cy="18.1255" r="0.880005" stroke="currentColor" stroke-width="1.125" />
|
||
<circle cx="16.1823" cy="18.1255" r="0.880005" stroke="currentColor" stroke-width="1.125" />
|
||
<path d="M6.20752 6.87976H18.757C19.1374 6.87976 19.4192 7.2333 19.3343 7.60416L18.1646 12.7161C18.1029 12.9853 17.8634 13.1762 17.5872 13.1762H8.09295" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" />
|
||
<path d="M2.5874 5.00232H5.06447C5.32736 5.00232 5.5588 5.17561 5.6328 5.42787L8.60949 15.5746C8.6835 15.8269 8.91493 16.0002 9.17782 16.0002H17.7511" stroke="currentColor" stroke-width="1.125" stroke-linecap="square" />
|
||
</g>
|
||
<g id="icon-download">
|
||
<path d="M13 11.875H12.875V12V13.875H3.125V12V11.875H3H2H1.875V12V14C1.875 14.2984 1.99353 14.5845 2.2045 14.7955C2.41548 15.0065 2.70163 15.125 3 15.125H13C13.2984 15.125 13.5845 15.0065 13.7955 14.7955C14.0065 14.5845 14.125 14.2984 14.125 14V12V11.875H14H13Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" />
|
||
<path d="M13.0884 7.08839L13.1768 7L13.0884 6.91161L12.3834 6.20661L12.2951 6.11828L12.2067 6.20655L8.625 9.7835V1V0.875H8.5H7.5H7.375V1V9.7835L3.79333 6.20655L3.70494 6.11828L3.61661 6.20661L2.91161 6.91161L2.82322 7L2.91161 7.08839L7.91161 12.0884L8 12.1768L8.08839 12.0884L13.0884 7.08839Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" />
|
||
</g>
|
||
<g id="icon-new-window">
|
||
<path d="M14 8.5V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5" stroke="currentColor" stroke-width="1.25" />
|
||
<path d="M6.55806 8.55806L6.11612 9L7 9.88388L7.44194 9.44194L6.55806 8.55806ZM14.4419 2.44194C14.686 2.19786 14.686 1.80214 14.4419 1.55806C14.1979 1.31398 13.8021 1.31398 13.5581 1.55806L14.4419 2.44194ZM7.44194 9.44194L14.4419 2.44194L13.5581 1.55806L6.55806 8.55806L7.44194 9.44194Z" fill="currentColor" />
|
||
<path d="M14 6V2H10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
|
||
</g>
|
||
<g id="icon-arrow">
|
||
<path d="M11.3431 0V20" stroke="currentColor" stroke-width="1.5" />
|
||
<path d="M0.999936 10.3535L11.3536 20.7071L21.7071 10.3535" stroke="currentColor" stroke-width="1.5" />
|
||
</g>
|
||
<g id="icon-arrow-long">
|
||
<path d="M0 5.59961L20.25 5.59961" stroke="currentColor" stroke-width="1.125"/>
|
||
<path d="M14.9917 10.8814L20.2335 5.63959L14.9918 0.397826" stroke="currentColor" stroke-width="1.125"/>
|
||
</g>
|
||
<g id="rebrand-25-logo">
|
||
<path d="M116.054 52.6263C112.539 52.6263 109.425 51.7738 106.711 50.0689C103.997 48.3639 101.875 46.0066 100.344 42.9968C98.8129 39.987 98.0474 36.5162 98.0474 32.5844C98.0474 28.583 98.8216 25.0774 100.37 22.0676C101.918 19.0579 104.041 16.7092 106.737 15.0216C109.451 13.3341 112.548 12.4903 116.028 12.4903C118.846 12.4903 121.421 13.0557 123.752 14.1866C126.101 15.3174 128.041 16.8832 129.572 18.8839C131.12 20.8846 132.094 23.2072 132.494 25.8516H126.623C126.083 23.4507 124.866 21.5109 122.969 20.0321C121.073 18.5359 118.785 17.7878 116.106 17.7878C113.653 17.7878 111.504 18.4055 109.66 19.6407C107.833 20.8759 106.407 22.607 105.38 24.8338C104.371 27.0433 103.867 29.6268 103.867 32.5844C103.867 35.5246 104.371 38.1081 105.38 40.335C106.407 42.5445 107.833 44.2668 109.66 45.502C111.504 46.7199 113.662 47.3288 116.132 47.3288C118.168 47.3288 120.003 46.8938 121.638 46.024C123.291 45.1541 124.596 43.945 125.553 42.3966C126.527 40.8308 127.023 39.0215 127.04 36.9686H117.411V32.1408H132.755V36.6032C132.755 39.7 132.025 42.4575 130.563 44.8757C129.102 47.2766 127.11 49.1729 124.587 50.5647C122.082 51.9391 119.238 52.6263 116.054 52.6263ZM137.114 52V24.4424H142.386V28.9048H142.49C142.995 27.3913 143.786 26.2169 144.865 25.3818C145.961 24.5294 147.388 24.1031 149.145 24.1031C149.562 24.1031 149.945 24.1205 150.293 24.1553C150.641 24.1901 150.928 24.2162 151.154 24.2336V29.3746C150.945 29.3224 150.571 29.2702 150.032 29.218C149.493 29.1484 148.901 29.1136 148.258 29.1136C146.709 29.1136 145.378 29.6529 144.265 30.7316C143.169 31.8102 142.621 33.4717 142.621 35.716V52H137.114ZM165.639 52.6263C163.012 52.6263 160.707 52.0174 158.723 50.7996C156.74 49.5817 155.192 47.8942 154.078 45.7369C152.982 43.5796 152.434 41.0918 152.434 38.2734C152.434 35.4202 152.982 32.915 154.078 30.7577C155.192 28.583 156.74 26.8867 158.723 25.6689C160.707 24.4337 163.012 23.8161 165.639 23.8161C168.266 23.8161 170.562 24.4337 172.528 25.6689C174.511 26.8867 176.051 28.583 177.147 30.7577C178.261 32.915 178.817 35.4202 178.817 38.2734C178.817 41.0918 178.261 43.5796 177.147 45.7369C176.051 47.8942 174.511 49.5817 172.528 50.7996C170.562 52.0174 168.266 52.6263 165.639 52.6263ZM165.639 47.8768C168.005 47.8768 169.866 47.0069 171.223 45.2672C172.58 43.5274 173.259 41.1962 173.259 38.2734C173.259 35.3158 172.572 32.9585 171.197 31.2013C169.84 29.4442 167.987 28.5656 165.639 28.5656C163.29 28.5656 161.429 29.4442 160.054 31.2013C158.697 32.9411 158.019 35.2984 158.019 38.2734C158.019 41.2136 158.697 43.5535 160.054 45.2933C161.411 47.0156 163.273 47.8768 165.639 47.8768ZM192.597 52.548C190.718 52.548 189.022 52.1392 187.508 51.3215C186.012 50.4864 184.82 49.2599 183.933 47.6419C183.063 46.024 182.628 44.0146 182.628 41.6137V24.4424H188.135V40.9352C188.135 43.1447 188.665 44.8148 189.727 45.9457C190.788 47.0591 192.275 47.6158 194.189 47.6158C196.051 47.6158 197.616 47.0417 198.886 45.8935C200.174 44.7279 200.817 42.8663 200.817 40.3089V24.4424H206.324V52H200.922V47.8507C199.043 50.9822 196.268 52.548 192.597 52.548ZM210.931 62.9082V24.4424H216.333V28.409H216.412C217.281 26.8954 218.473 25.7646 219.987 25.0165C221.5 24.2684 223.153 23.8944 224.945 23.8944C227.311 23.8944 229.39 24.5033 231.182 25.7211C232.974 26.9215 234.366 28.6004 235.357 30.7577C236.366 32.8976 236.871 35.3854 236.871 38.2212C236.871 41.057 236.375 43.5535 235.383 45.7108C234.392 47.8507 233 49.5296 231.208 50.7474C229.416 51.9478 227.32 52.548 224.919 52.548C223.127 52.548 221.509 52.1566 220.065 51.3737C218.621 50.5908 217.438 49.4165 216.516 47.8507H216.438V62.9082H210.931ZM223.797 47.7985C226.024 47.7985 227.824 46.9808 229.199 45.3455C230.59 43.7101 231.286 41.3353 231.286 38.2212C231.286 35.107 230.59 32.7323 229.199 31.0969C227.824 29.4442 226.024 28.6178 223.797 28.6178C221.448 28.6178 219.569 29.4964 218.16 31.2535C216.768 32.9932 216.072 35.3158 216.072 38.2212C216.072 41.1092 216.768 43.4317 218.16 45.1889C219.569 46.9286 221.448 47.7985 223.797 47.7985Z" fill="#FF5148" />
|
||
<path d="M3.54909 52V13.1166H9.96876L24.8175 36.6293C25.2698 37.36 25.8875 38.3952 26.6703 39.7348C27.4532 41.0744 28.2361 42.4314 29.019 43.8058C28.9668 42.3966 28.9233 40.97 28.8885 39.526C28.8711 38.0646 28.8624 36.9773 28.8624 36.264V13.1166H34.6819V52H28.21L14.927 30.9925C14.3877 30.1401 13.6048 28.87 12.5784 27.1825C11.5693 25.4775 10.4211 23.5203 9.13368 21.3108C9.22067 23.5899 9.27286 25.5558 9.29026 27.2086C9.32505 28.8439 9.34245 30.0966 9.34245 30.9664V52H3.54909ZM38.0128 52V13.1166H44.4325L59.2812 36.6293C59.7336 37.36 60.3512 38.3952 61.1341 39.7348C61.917 41.0744 62.6998 42.4314 63.4827 43.8058C63.4305 42.3966 63.387 40.97 63.3522 39.526C63.3348 38.0646 63.3261 36.9773 63.3261 36.264V13.1166H69.1456V52H62.6737L49.3908 30.9925C48.8514 30.1401 48.0686 28.87 47.0421 27.1825C46.033 25.4775 44.8848 23.5203 43.5974 21.3108C43.6844 23.5899 43.7366 25.5558 43.754 27.2086C43.7888 28.8439 43.8062 30.0966 43.8062 30.9664V52H38.0128Z" fill="white" />
|
||
<path d="M77.6709 51.8398H71.3633L95.7646 12.9131H102.073L77.6709 51.8398Z" fill="#FF5148" />
|
||
</g>
|
||
<g id="icon-comment">
|
||
<path d="M24 22.6666V21.9166C23.5858 21.9166 23.25 22.2524 23.25 22.6666H24ZM24 27.3336L23.4697 27.8639C23.6842 28.0784 24.0068 28.1426 24.287 28.0265C24.5673 27.9104 24.75 27.637 24.75 27.3336H24ZM19.333 22.6666L19.8633 22.1363C19.7227 21.9956 19.5319 21.9166 19.333 21.9166V22.6666ZM25 6.66663V7.41663C26.2426 7.41663 27.25 8.42399 27.25 9.66663H28H28.75C28.75 7.59556 27.0711 5.91663 25 5.91663V6.66663ZM28 9.66663H27.25V19.6666H28H28.75V9.66663H28ZM28 19.6666H27.25C27.25 20.9093 26.2426 21.9166 25 21.9166V22.6666V23.4166C27.0711 23.4166 28.75 21.7377 28.75 19.6666H28ZM25 22.6666V21.9166H24V22.6666V23.4166H25V22.6666ZM24 22.6666H23.25V27.3336H24H24.75V22.6666H24ZM24 27.3336L24.5303 26.8033L19.8633 22.1363L19.333 22.6666L18.8027 23.197L23.4697 27.8639L24 27.3336ZM19.333 22.6666V21.9166H7V22.6666V23.4166H19.333V22.6666ZM7 22.6666V21.9166C5.75736 21.9166 4.75 20.9093 4.75 19.6666H4H3.25C3.25 21.7377 4.92893 23.4166 7 23.4166V22.6666ZM4 19.6666H4.75V9.66663H4H3.25V19.6666H4ZM4 9.66663H4.75C4.75 8.42399 5.75736 7.41663 7 7.41663V6.66663V5.91663C4.92893 5.91663 3.25 7.59556 3.25 9.66663H4ZM7 6.66663V7.41663H25V6.66663V5.91663H7V6.66663Z" fill="#79272D" />
|
||
<path d="M8 11.3334H21.3333M8 14.6667H24M8 18H18.6667" stroke="#79272D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||
</g>
|
||
<g id="icon-bug-report">
|
||
<path d="M6.99995 8.16671V13.5M6.99995 13.5V13.5C9.10318 13.5 10.7115 11.6253 10.3917 9.54655L9.83771 5.94545C9.73928 5.30566 9.18878 4.83337 8.54146 4.83337H5.45845C4.81113 4.83337 4.26063 5.30566 4.1622 5.94545L3.60818 9.54655C3.28837 11.6253 4.89673 13.5 6.99995 13.5V13.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
|
||
<path d="M7.66662 3.50004C8.403 3.50004 9.03058 2.87905 8.74612 2.19983C8.65701 1.98708 8.5457 1.78979 8.41417 1.61442C8.0391 1.11433 7.53039 0.833374 6.99995 0.833374C6.46952 0.833374 5.96081 1.11433 5.58574 1.61442C5.45421 1.78979 5.3429 1.98708 5.25379 2.19983C4.96933 2.87905 5.59691 3.50004 6.33329 3.50004L6.99995 3.50004H7.66662Z" stroke="currentColor" />
|
||
<path d="M9.66663 5.5L10.9861 4.73818C11.5461 4.4149 12.262 4.60674 12.5853 5.16667V5.16667" stroke="currentColor" stroke-linecap="round" />
|
||
<path d="M4.2056 5.5L2.88609 4.73818C2.32617 4.4149 1.6102 4.60674 1.28693 5.16667V5.16667" stroke="currentColor" stroke-linecap="round" />
|
||
<path d="M10.3333 8.09519L11.8361 7.84383C12.4738 7.73717 13.0772 8.16766 13.1838 8.80534V8.80534" stroke="currentColor" stroke-linecap="round" />
|
||
<path d="M3.53891 8.09519L2.03615 7.84383C1.39847 7.73717 0.795054 8.16766 0.688397 8.80534V8.80534" stroke="currentColor" stroke-linecap="round" />
|
||
<path d="M10.3333 10.9138L11.699 11.5894C12.2785 11.8761 12.5159 12.5782 12.2292 13.1578V13.1578" stroke="currentColor" stroke-linecap="round" />
|
||
<path d="M3.5389 10.9138L2.17323 11.5894C1.59371 11.8761 1.35632 12.5782 1.643 13.1578V13.1578" stroke="currentColor" stroke-linecap="round" />
|
||
</g>
|
||
<g id="icon-collapse-menu">
|
||
<path d="M8.52174 4.41602H3.73913C2.77864 4.41602 2 5.19465 2 6.15515V17.4595C2 18.42 2.77863 19.1986 3.73913 19.1986H8.52174M8.52174 4.41602H20.2609C21.2214 4.41602 22 5.19465 22 6.15515V17.4595C22 18.42 21.2214 19.1986 20.2609 19.1986H8.52174M8.52174 4.41602V19.1986" stroke="currentColor" stroke-width="1.5" />
|
||
<path d="M19 12H12M12 12L15 9M12 12L15 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||
</g>
|
||
<g id="icon-expand-menu">
|
||
<path d="M8.52174 4.41602H3.73913C2.77864 4.41602 2 5.19465 2 6.15515V17.4595C2 18.42 2.77863 19.1986 3.73913 19.1986H8.52174M8.52174 4.41602H20.2609C21.2214 4.41602 22 5.19465 22 6.15515V17.4595C22 18.42 21.2214 19.1986 20.2609 19.1986H8.52174M8.52174 4.41602V19.1986" stroke="currentColor" stroke-width="1.5" />
|
||
<path d="M12 12L19 12M19 12L16 15M19 12L16 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||
</g>
|
||
<g id="icon-slack">
|
||
<path d="M24 48.0801C37.2548 48.0801 48 37.3349 48 24.0801C48 10.8252 37.2548 0.0800781 24 0.0800781C10.7452 0.0800781 0 10.8252 0 24.0801C0 37.3349 10.7452 48.0801 24 48.0801Z" fill="#3F1D47" />
|
||
<path d="M15.4016 23.1874C13.9832 23.1874 12.5672 23.1874 11.1488 23.1874C10.688 23.1874 10.2368 23.1154 9.80964 22.9354C8.67684 22.453 7.96644 21.613 7.72164 20.4058C7.51044 19.3642 7.75284 18.4138 8.41524 17.5858C8.93124 16.9426 9.60324 16.5298 10.4192 16.3738C10.6448 16.3306 10.8776 16.309 11.108 16.309C13.9736 16.3042 16.8416 16.309 19.7072 16.3066C20.4344 16.3066 21.0992 16.5082 21.692 16.9258C22.4768 17.4826 22.9592 18.2362 23.1104 19.189C23.2952 20.3482 22.9592 21.3538 22.1432 22.189C21.6104 22.7338 20.9504 23.0482 20.1968 23.1562C20 23.185 19.8008 23.1898 19.6016 23.1898C18.2 23.1922 16.7984 23.1898 15.3992 23.1898L15.4016 23.1874Z" fill="#37C5EF" />
|
||
<path d="M31.797 15.43C31.797 16.8244 31.797 18.2212 31.797 19.6156C31.797 19.9828 31.7682 20.3476 31.6554 20.7004C31.257 21.958 30.4218 22.774 29.1426 23.086C27.2874 23.5396 25.4442 22.3876 25.005 20.53C24.9522 20.3068 24.9234 20.074 24.921 19.8436C24.909 19.0948 24.9162 18.346 24.9162 17.5972C24.9162 15.454 24.9186 13.3084 24.9162 11.1652C24.9162 10.366 25.1394 9.64596 25.629 9.01476C26.2146 8.26116 26.9874 7.82196 27.9354 7.69956C29.6922 7.47396 31.389 8.64756 31.7322 10.474C31.7778 10.7212 31.7946 10.978 31.797 11.23C31.8018 12.6316 31.7994 14.0308 31.7994 15.4324L31.797 15.43Z" fill="#2EB67D" />
|
||
<path d="M16.2827 32.6593C16.2827 31.2265 16.2803 29.7937 16.2827 28.3609C16.2851 27.3793 16.6451 26.5417 17.3555 25.8673C17.9843 25.2697 18.7427 24.9601 19.6139 24.9289C21.2963 24.8689 22.7627 26.0497 23.0867 27.6697C23.1347 27.9049 23.1611 28.1497 23.1611 28.3897C23.1659 31.2385 23.1683 34.0897 23.1611 36.9385C23.1587 38.4529 22.2299 39.7585 20.8211 40.2265C18.7859 40.9033 16.7147 39.6193 16.3427 37.6153C16.2995 37.3777 16.2827 37.1353 16.2803 36.8929C16.2755 35.4817 16.2779 34.0705 16.2779 32.6593H16.2827Z" fill="#E01D5A" />
|
||
<path d="M32.6474 31.8018C31.2314 31.8018 29.813 31.797 28.397 31.8018C27.7226 31.8042 27.0938 31.6434 26.5274 31.281C25.6394 30.7122 25.1018 29.9058 24.9506 28.857C24.8162 27.9306 25.025 27.0786 25.5818 26.325C26.1458 25.5642 26.9042 25.1058 27.845 24.9666C28.0346 24.9378 28.2314 24.9306 28.4234 24.9306C31.2506 24.9306 34.0802 24.9306 36.9074 24.9258C37.7786 24.9258 38.549 25.1826 39.2114 25.7466C39.8546 26.2962 40.2506 26.9922 40.373 27.8298C40.5242 28.8666 40.2722 29.7978 39.5906 30.5994C39.0482 31.2378 38.3546 31.629 37.5218 31.7562C37.3058 31.7898 37.0826 31.797 36.8618 31.797C35.4554 31.7994 34.049 31.797 32.6426 31.797L32.6474 31.8018Z" fill="#ECB22D" />
|
||
<path d="M23.1623 14.5569C23.0999 14.5569 23.0567 14.5569 23.0135 14.5569C21.9095 14.5569 20.8031 14.5569 19.6991 14.5569C19.1567 14.5569 18.6407 14.4345 18.1607 14.1825C17.1527 13.6521 16.5239 12.8217 16.3319 11.7009C16.0199 9.87208 17.1551 8.22088 18.8567 7.78888C20.0015 7.49848 21.0455 7.74088 21.9551 8.50408C22.6295 9.06808 23.0063 9.80248 23.1335 10.6641C23.1575 10.8273 23.1671 10.9977 23.1671 11.1633C23.1695 12.2361 23.1671 13.3089 23.1671 14.3793C23.1671 14.4321 23.1623 14.4849 23.1599 14.5593L23.1623 14.5569Z" fill="#37C5EF" />
|
||
<path d="M33.5156 23.1849C33.5156 23.1081 33.5156 23.0553 33.5156 23.0025C33.5156 21.9249 33.5156 20.8473 33.5156 19.7721C33.5156 18.8577 33.818 18.0633 34.4396 17.3937C34.9772 16.8129 35.6444 16.4529 36.4268 16.3425C37.598 16.1769 38.6132 16.5153 39.4388 17.3649C40.0076 17.9481 40.3196 18.6585 40.3796 19.4745C40.4564 20.4993 40.1372 21.3873 39.4316 22.1289C38.846 22.7433 38.1188 23.0913 37.2668 23.1657C37.0796 23.1825 36.89 23.1873 36.7028 23.1873C35.7068 23.1873 34.7108 23.1873 33.7148 23.1873C33.6572 23.1873 33.5972 23.1873 33.5156 23.1873V23.1849Z" fill="#2EB67D" />
|
||
<path d="M14.5628 24.9367C14.5628 24.9943 14.5628 25.0471 14.5628 25.0999C14.5628 26.1727 14.5772 27.2431 14.558 28.3159C14.5316 29.7943 13.862 30.8935 12.5108 31.5055C10.4948 32.4175 8.18603 31.2055 7.74923 29.0551C7.36283 27.1519 8.60363 25.3231 10.5116 24.9799C10.718 24.9439 10.9292 24.9319 11.138 24.9295C12.23 24.9247 13.3244 24.9271 14.4188 24.9295C14.462 24.9295 14.5028 24.9343 14.5652 24.9367H14.5628Z" fill="#E01D5A" />
|
||
<path d="M24.924 33.5312C24.9888 33.5312 25.0368 33.5312 25.0848 33.5312C26.1792 33.5312 27.2712 33.5312 28.3656 33.5312C28.9896 33.5312 29.5704 33.6824 30.1032 34.0064C31.0224 34.5632 31.584 35.3745 31.7472 36.4376C32.0184 38.1873 30.972 39.752 29.3952 40.2464C27.4488 40.856 25.4616 39.7016 24.9984 37.7456C24.9504 37.5488 24.9216 37.3424 24.9192 37.1384C24.912 35.9744 24.9144 34.8104 24.9144 33.6488C24.9144 33.6176 24.9192 33.5864 24.924 33.5312Z" fill="#ECB22D" />
|
||
</g>
|
||
<g id="icon-check-star">
|
||
<path d="M14.0098 4.60888C14.7631 2.86431 17.2369 2.86431 17.9902 4.60888C18.5081 5.80827 19.9614 6.28047 21.0854 5.61457C22.7203 4.64599 24.7216 6.10002 24.3057 7.95422C24.0197 9.22897 24.9178 10.4652 26.2186 10.5871C28.1106 10.7645 28.875 13.1172 27.4486 14.3728C26.468 15.236 26.468 16.764 27.4486 17.6272C28.875 18.8828 28.1106 21.2355 26.2186 21.4129C24.9179 21.5348 24.0197 22.771 24.3057 24.0458C24.7216 25.9 22.7203 27.354 21.0854 26.3854C19.9614 25.7195 18.5081 26.1917 17.9902 27.3911C17.2369 29.1357 14.7631 29.1357 14.0098 27.3911C13.4919 26.1917 12.0386 25.7195 10.9146 26.3854C9.27969 27.354 7.27838 25.9 7.69435 24.0458C7.98032 22.771 7.08215 21.5348 5.78141 21.4129C3.88943 21.2355 3.125 18.8828 4.55139 17.6272C5.53203 16.764 5.53203 15.236 4.55139 14.3728C3.125 13.1172 3.88943 10.7645 5.78141 10.5871C7.08215 10.4652 7.98032 9.22897 7.69435 7.95421C7.27838 6.10002 9.27969 4.64599 10.9146 5.61457C12.0386 6.28047 13.4919 5.80827 14.0098 4.60888Z" fill="var(--icon-fill, #fff)" />
|
||
<path d="M10.5 17.75L13.75 21L22.25 12.5" stroke="var(--icon-stroke, #000)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
||
</g>
|
||
<g id="icon-warning">
|
||
<circle cx="15.9865" cy="15.9865" r="11.9865" fill="currentColor" />
|
||
<path d="M16.1557 19.0767C15.7346 19.0767 15.3809 18.7601 15.3344 18.3416L14.856 14.0383L14.5014 10.8484C14.3918 9.86236 15.1636 9 16.1557 9C17.1477 9 17.9195 9.86236 17.8099 10.8484L16.9769 18.3416C16.9304 18.7601 16.5767 19.0767 16.1557 19.0767ZM16.1557 22.9317C15.8352 22.9317 15.5609 22.8208 15.3329 22.5989C15.111 22.3708 15.0001 22.0966 15.0001 21.7761C15.0001 21.4495 15.111 21.1752 15.3329 20.9533C15.5609 20.7315 15.8352 20.6205 16.1557 20.6205C16.4823 20.6205 16.7566 20.7315 16.9784 20.9533C17.2003 21.1752 17.3112 21.4495 17.3112 21.7761C17.3112 22.0966 17.2003 22.3708 16.9784 22.5989C16.7566 22.8208 16.4823 22.9317 16.1557 22.9317Z" fill="white" />
|
||
</g>
|
||
<g id="icon-info">
|
||
<circle cx="15.9865" cy="15.9865" r="11.9865" fill="var(--icon-info-bg)" />
|
||
<path d="M16.1733 22.1572C15.6612 22.1572 15.2461 21.7421 15.2461 21.23V13.8032C15.2461 13.2911 15.6612 12.876 16.1733 12.876C16.6854 12.876 17.1006 13.2911 17.1006 13.8032V21.23C17.1006 21.7421 16.6854 22.1572 16.1733 22.1572ZM16.1689 11.2764C15.8408 11.2764 15.5625 11.168 15.334 10.9512C15.1113 10.7285 15 10.459 15 10.1426C15 9.82031 15.1113 9.55078 15.334 9.33398C15.5625 9.11133 15.8408 9 16.1689 9C16.4971 9 16.7754 9.11133 17.0039 9.33398C17.2324 9.55078 17.3467 9.82031 17.3467 10.1426C17.3467 10.459 17.2324 10.7285 17.0039 10.9512C16.7754 11.168 16.4971 11.2764 16.1689 11.2764Z" fill="var(--icon-info-color)" />
|
||
</g>
|
||
<g id="icon-close-star">
|
||
<path d="M14.0098 4.60888C14.7631 2.86431 17.2369 2.86431 17.9902 4.60888C18.5081 5.80827 19.9614 6.28047 21.0854 5.61457C22.7203 4.64599 24.7216 6.10002 24.3057 7.95422C24.0197 9.22897 24.9178 10.4652 26.2186 10.5871C28.1106 10.7645 28.875 13.1172 27.4486 14.3728C26.468 15.236 26.468 16.764 27.4486 17.6272C28.875 18.8828 28.1106 21.2355 26.2186 21.4129C24.9179 21.5348 24.0197 22.771 24.3057 24.0458C24.7216 25.9 22.7203 27.354 21.0854 26.3854C19.9614 25.7195 18.5081 26.1917 17.9902 27.3911C17.2369 29.1357 14.7631 29.1357 14.0098 27.3911C13.4919 26.1917 12.0386 25.7195 10.9146 26.3854C9.27969 27.354 7.27838 25.9 7.69435 24.0458C7.98032 22.771 7.08215 21.5348 5.78141 21.4129C3.88943 21.2355 3.125 18.8828 4.55139 17.6272C5.53203 16.764 5.53203 15.236 4.55139 14.3728C3.125 13.1172 3.88943 10.7645 5.78141 10.5871C7.08215 10.4652 7.98032 9.22897 7.69435 7.95421C7.27838 6.10002 9.27969 4.64599 10.9146 5.61457C12.0386 6.28047 13.4919 5.80827 14.0098 4.60888Z" fill="#FDD5D5" />
|
||
<rect width="16" height="16" transform="translate(8 8)" fill="#FDD5D5" />
|
||
<line x1="20.4825" y1="11.7579" x2="11.7202" y2="20.5201" stroke="black" />
|
||
<line x1="20.2793" y1="20.5205" x2="11.517" y2="11.7583" stroke="black" />
|
||
</g>
|
||
<g id="icon-live-broadcast">
|
||
<path d="M16.1247 19.4118C17.6666 19.4118 18.9165 18.1618 18.9165 16.6199C18.9165 15.078 17.6666 13.8281 16.1247 13.8281C14.5828 13.8281 13.3328 15.078 13.3328 16.6199C13.3328 18.1618 14.5828 19.4118 16.1247 19.4118Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M20.1522 22.284C22.0639 20.9917 23.3196 18.8021 23.3196 16.3223C23.3196 13.8426 22.0639 11.653 20.1522 10.3607" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M12.0963 10.3607C10.1846 11.653 8.92889 13.8426 8.92889 16.3223C8.92889 18.8021 10.1846 20.9917 12.0963 22.284" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M23.6733 25.0237C26.1091 22.9097 27.6501 19.7935 27.6501 16.3165C27.6501 12.8394 26.1091 9.72083 23.6733 7.60925" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M8.64636 7.54907C6.17147 9.66309 4.6012 12.8061 4.6012 16.3172C4.6012 19.8284 6.091 22.8105 8.45861 24.922" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</g>
|
||
<g id="icon-clock">
|
||
<circle cx="16" cy="16.5" r="14.25" fill="none" stroke="black" stroke-width="1.5"/>
|
||
<path d="M16 8.0625V17.9062H24.9062" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||
</g>
|
||
<g id="icon-close-32">
|
||
<line x1="24.7913" y1="7.33905" x2="7.26682" y2="24.8635" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="24.7329" y1="24.8637" x2="7.20836" y2="7.33921" stroke="currentColor" stroke-width="1.5"/>
|
||
</g>
|
||
<symbol id="icon-ai">
|
||
<path d="M9.96193 19.4152C10.2235 19.444 10.4272 19.2962 10.5267 19.0736C10.8957 18.2483 11.0881 17.0218 11.3932 16.1242C11.9454 14.4979 12.9128 13.1358 14.3559 12.139C15.9447 11.0418 17.8597 10.7609 19.6876 10.2139C20.1627 9.97204 20.1641 9.49028 19.6876 9.24781C17.3068 8.59523 15.0188 8.2024 13.2337 6.39693C11.5421 4.68679 11.1698 2.54288 10.5201 0.346502C10.271 -0.114782 9.77479 -0.116062 9.52504 0.346502C8.85355 2.65996 8.4496 4.87873 6.58868 6.61254C4.82529 8.25678 2.62302 8.61506 0.356831 9.24717C-0.118284 9.48901 -0.119602 9.97076 0.356831 10.2132C2.2026 10.7647 4.11953 11.0405 5.71687 12.1588C7.14683 13.1601 8.10101 14.5017 8.65125 16.1236C8.95569 17.0199 9.14877 18.2496 9.51779 19.073C9.60214 19.2617 9.74118 19.3903 9.96127 19.4146L9.96193 19.4152Z" fill="#6F8EE9"/>
|
||
</symbol>
|
||
<symbol id="icon-interaction" viewBox="0 0 24 24">
|
||
<path d="M21.1024 19.295L11.8227 4.92407L2.54297 19.295H21.1024Z" fill="#E2B44B"/>
|
||
</symbol>
|
||
<symbol id="icon-research" viewBox="0 0 24 24">
|
||
<rect x="3.74902" y="4.03638" width="16.1464" height="16.1464" rx="8.07318" fill="#9D7CF5"/>
|
||
</symbol>
|
||
<symbol id="icon-management" viewBox="0 0 24 24">
|
||
<rect x="3.74805" y="4.03638" width="16.1464" height="16.1464" fill="#6FAF94"/>
|
||
</symbol>
|
||
</svg>
|
||
<svg id="icon-close-svg" width="0">
|
||
<g id="icon-close">
|
||
<line x1="13.5935" y1="0.504315" x2="0.450175" y2="13.6477" stroke="currentColor" stroke-width="1.125" />
|
||
<line x1="13.5498" y1="13.6477" x2="0.406391" y2="0.504374" stroke="currentColor" stroke-width="1.125" />
|
||
</g>
|
||
</svg>
|
||
|
||
<svg
|
||
width="0"
|
||
viewBox="0 0 32 32"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g id="icon-social-x">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 30H26.5C28.432 30 30 28.432 30 26.5V5.5C30 3.568 28.432 2 26.5 2H5.5C3.568 2 2 3.568 2 5.5V26.5C2 28.432 3.568 30 5.5 30ZM24.3975 6.54919L17.5164 14.5479H17.516L25 25.4395H19.4959L14.4562 18.1051L8.14657 25.4395H6.51587L13.7323 17.0516L6.51587 6.54919H12.0199L16.7921 13.4944L22.7669 6.54919H24.3975ZM14.5518 16.0983L15.283 17.1441V17.1445L20.2631 24.2678H22.7677L16.6649 15.5383L15.9337 14.4925L11.2388 7.77676H8.73413L14.5518 16.0983Z" fill="currentColor"/>
|
||
</g>
|
||
<g id="icon-social-linkedin">
|
||
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" fill="currentColor"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="141" height="74" viewBox="0 0 141 74" fill="none">
|
||
<g id="visa-logo">
|
||
<path d="M54.4463 20.6144L40.4982 54.112H31.3991L24.536 27.3787C24.1199 25.7309 23.7593 25.1277 22.4887 24.4351C20.4193 23.3067 17.0016 22.2455 14 21.5863L14.2053 20.6144H28.8525C30.7167 20.6144 32.3978 21.8656 32.8195 24.0329L36.4424 43.4153L45.4028 20.6144H54.4463ZM90.099 43.1751C90.1378 34.333 77.954 33.847 78.0372 29.8979C78.0649 28.697 79.2023 27.4178 81.6879 27.0939C82.9196 26.9319 86.3207 26.809 90.1711 28.5908L91.6802 21.4858C89.6163 20.7261 86.9531 20 83.6353 20C75.13 20 69.1379 24.5524 69.088 31.0709C69.0325 35.8914 73.3601 38.5837 76.6224 40.1868C79.9791 41.829 81.1053 42.8847 81.0887 44.3481C81.0665 46.5936 78.4145 47.5879 75.9344 47.627C71.6069 47.694 69.0991 46.4484 67.0962 45.51L65.5371 52.8496C67.5456 53.7768 71.2629 54.5868 75.1078 54.6315C84.1569 54.637 90.0712 50.1405 90.099 43.1751ZM112.564 54.112H120.525L113.579 20.6144H106.233C104.58 20.6144 103.187 21.5808 102.571 23.0721L89.6551 54.112H98.6931L100.485 49.1072H111.532L112.564 54.112ZM102.96 42.2423L107.493 29.6633L110.1 42.2423H102.96ZM66.7466 20.6144L59.6283 54.112H51.0175L58.1414 20.6144H66.7466Z" fill="currentColor" />
|
||
</g>
|
||
<g id="pg-logo">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.1314 14.2651H34.5589C34.5589 14.2651 35.4671 15.0592 35.5796 15.6764C35.7497 16.6139 35.3236 17.5462 35.3236 17.5462L24.5791 51.9319C24.5791 51.9319 24.0985 53.1772 23.496 53.7331C23.0092 54.1828 22.0188 54.5733 22.0188 54.5733H37.1081C37.1081 54.5733 36.1135 54.0619 35.8345 53.4651C35.5875 52.9364 35.7304 51.9753 35.7304 51.9753L39.4606 39.1537C39.4606 39.1537 57.2352 41.7699 62.6238 28.4651C67.1491 17.2955 58.2701 14.2651 55.1314 14.2651ZM53.2428 27.7841C49.6115 38.4376 40.274 36.5688 40.274 36.5688L46.1619 17.3803H49.589C49.5896 17.3803 56.9918 16.784 53.2428 27.7841Z" fill="currentColor" />
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.343 30.0925C98.9792 30.9593 90.9482 33.9263 90.9482 33.9263L90.0107 38.0245C90.0107 38.0245 92.8112 36.7096 94.7025 36.161C96.364 35.6799 99.0519 35.2899 99.0519 35.2899L94.5277 51.5895C94.5277 51.5895 81.8232 54.401 88.8188 32.7339C90.3666 27.9379 95.6667 20.165 101.012 18.402C107.015 16.4217 113.214 20.9586 113.214 20.9586L115.003 15.5905C115.003 15.5905 108.297 13.8306 103.944 14.0133C95.338 14.3745 89.6861 16.6515 83.6967 22.8415C76.1054 30.6892 76.7927 42.3363 76.7927 42.3363L73.8943 44.5997L71.0525 46.8192C71.0525 46.8192 69.2334 44.0354 68.5948 42.0384C68.0792 40.4282 67.8321 37.7701 67.8321 37.7701C67.8321 37.7701 72.6878 35.3454 75.169 33.3306C80.1099 29.3172 78.326 24.6307 75.035 24.1543C71.232 23.6037 69.3685 23.8554 66.5685 26.0802C62.2803 29.4879 62.1143 36.6536 62.1143 36.6536C62.1143 36.6536 48.0379 40.0697 49.8104 50.2547C50.3344 53.2677 54.8895 55.0679 58.6124 54.9993C64.415 54.7428 68.3718 52.1418 68.3718 52.1418C68.3718 52.1418 71.9486 57.0848 80.8852 59.2677C92.3972 62.0792 103.923 56.2761 103.923 56.2761L104.599 54.4869C104.599 54.4869 96.0698 59.0122 86.3868 57.1675C77.3937 55.4553 72.6888 49.5365 72.6888 49.5365C72.6888 49.5365 74.2754 48.3168 75.2569 47.496C76.1342 46.7621 77.4633 45.5639 77.4633 45.5639C77.4633 45.5639 79.1923 50.953 83.8736 53.1468C94.1864 57.9805 105.365 52.3574 105.365 52.3574L110.828 34.2676C110.828 34.2676 113.112 34.0499 114.576 34.0577C116.179 34.0656 118.676 34.3529 118.676 34.3529L119.954 29.5722C119.953 29.5722 110.322 29.1257 104.343 30.0925ZM61.1768 51.2487C58.9615 51.388 56.5295 50.4808 55.9705 48.4288C54.4362 42.7964 62.4546 39.9849 62.4546 39.9849C62.4546 39.9849 63.0435 43.1581 63.8036 45.0598C64.5552 46.9412 66.289 49.6208 66.289 49.6208C66.289 49.6208 63.8344 51.0833 61.1768 51.2487ZM73.0285 26.6753C74.5408 26.8973 74.1451 30.2631 72.0685 31.7681C70.4489 33.4903 67.661 34.2671 67.661 34.2671C67.661 34.2671 67.3186 25.8378 73.0285 26.6753Z" fill="currentColor" />
|
||
</g>
|
||
<g id="vimeo-logo">
|
||
<g clip-path="url(#clip0_2933_1928)">
|
||
<path d="M105.743 34.4294C103.367 34.2728 101.519 33.5357 100.062 32.1624C99.4695 31.604 98.8435 30.7602 98.4816 30.0298C98.4207 29.9057 98.3624 29.8049 98.352 29.8049C98.3424 29.8049 98.191 29.8935 98.016 30.0025C97.6301 30.2425 96.4658 30.9113 95.9713 31.1768C92.728 32.9212 89.3897 33.9523 86.019 34.2506C84.9407 34.3466 83.6748 34.3633 82.8997 34.2916C81.1752 34.1321 79.7741 33.6395 78.6408 32.7927C78.3572 32.5808 77.6837 31.9242 77.4673 31.648C77.2499 31.3666 77.0496 31.0725 76.8672 30.7673L76.7461 30.5568L76.3805 30.8714C74.3775 32.5963 72.2989 33.6746 70.2402 34.0564C69.2476 34.241 68.1844 34.2613 67.4411 34.1099C66.4064 33.9002 65.6552 33.3625 65.228 32.5265C64.7369 31.5664 64.6187 30.2613 64.8535 28.3869C64.9939 27.2658 65.1146 26.6661 65.6106 24.6166C65.8753 23.5265 66.1069 22.2614 66.1914 21.4456C66.242 20.9619 66.242 20.2529 66.1925 19.9231C66.0825 19.193 65.8114 18.7713 65.3284 18.5771C65.1571 18.5077 64.7202 18.4936 64.5035 18.5498C63.6058 18.7828 62.5648 19.8744 61.3923 21.8119C59.7749 24.4848 58.8875 26.994 58.6468 29.5726C58.5965 30.1118 58.6039 31.6325 58.6589 32.1255C58.7214 32.6831 58.838 33.2396 58.9747 33.6339C59.0386 33.8178 59.098 33.991 59.1065 34.018C59.122 34.066 59.0999 34.0667 58.2996 34.0516C57.4089 34.0353 56.8473 33.9914 56.2339 33.8899C54.0138 33.5228 52.7568 32.6325 52.2088 31.0379C51.8783 30.0771 51.7871 29.0394 51.8971 27.4973C51.9728 26.4349 52.1231 25.5579 52.4499 24.2739C52.752 23.0867 52.8979 22.3404 52.9943 21.4896C53.0482 21.011 53.0559 20.1181 53.0075 19.8795C52.8506 19.1004 52.4861 18.6845 51.8395 18.5472C51.7084 18.5195 51.5637 18.5106 51.3669 18.5184C51.1283 18.5276 51.0515 18.5416 50.8846 18.6074C50.046 18.9379 49.1505 20.0317 48.2095 21.8769C47.1627 23.929 46.5131 26.1162 46.2875 28.3478C46.1652 29.5557 46.1663 31.2761 46.2897 32.4091C46.3558 33.0165 46.4924 33.6727 46.625 34.018C46.6434 34.066 46.625 34.0664 45.9241 34.0505C44.8754 34.0272 44.1907 33.9445 43.4252 33.7499C42.2912 33.4619 41.3772 32.95 40.748 32.2517C40.3203 31.7772 39.9514 31.0723 39.7373 30.3204C39.7145 30.2344 39.6881 30.1494 39.6582 30.0656C39.6531 30.0601 39.5415 30.1531 39.4101 30.2732C37.5257 31.991 35.8163 33.0693 34.0017 33.6845C32.9987 34.0246 31.9016 34.2137 30.9311 34.2137C29.5006 34.2137 28.4747 33.7181 27.8071 32.7056C27.5412 32.3023 27.3935 31.9611 27.2594 31.4404C27.0009 30.4379 27.0478 29.2137 27.4178 27.3167C27.6608 26.0715 27.909 25.0667 28.4847 22.9984C28.8983 21.5114 29.1819 20.467 29.3551 19.7883C29.4913 19.254 29.4998 19.2041 29.4976 18.9246C29.4902 18.0103 29.1206 17.4792 28.4847 17.4704C28.3063 17.4682 28.2753 17.4763 28.0833 17.5749C27.7989 17.7207 27.5737 17.8666 27.0223 18.2606L26.5526 18.5967L26.4836 18.8057C26.1003 19.9641 25.2591 21.6495 24.2882 23.2037C23.2188 24.9161 21.5851 27.1568 20.1826 28.8382C17.4367 32.1277 15.0803 33.9135 13.0021 34.2791C12.6139 34.3477 12.0364 34.3437 11.7447 34.2706C10.4566 33.9493 9.38722 32.6465 8.45996 30.2691C8.38168 30.0678 7.99098 28.6605 7.24874 25.8983C6.85291 24.4193 6.45335 22.9412 6.05007 21.4641C5.67636 20.1624 5.18523 18.9685 4.7565 18.3216C4.4271 17.8238 4.01425 17.4999 3.66455 17.4648C3.52275 17.4504 3.49985 17.4574 3.27976 17.5671C3.04971 17.6831 2.38612 18.11 1.81743 18.5077C1.65864 18.6188 1.51463 18.7174 1.49801 18.7274C1.47807 18.7385 1.25207 18.4645 0.868762 17.9648C0.658949 17.6897 0.447721 17.4157 0.235085 17.1428C0.203697 17.1063 0.252441 17.0542 0.657906 16.6916C1.57504 15.8681 2.48802 15.0401 3.39682 14.2074C4.64128 13.0638 5.36285 12.4767 6.19557 11.9301C7.08552 11.3456 7.64903 11.1229 8.30967 11.0941C9.97215 11.0206 11.0763 12.0176 11.6745 14.1321C11.8174 14.6373 11.882 14.9744 12.1003 16.3478C12.669 19.9305 12.9097 21.2222 13.2849 22.7141C13.7314 24.4888 14.2277 25.5243 14.7561 25.7846C14.8983 25.8548 14.9419 25.864 15.07 25.8548C15.6483 25.8105 16.4747 24.908 17.6084 23.0826C18.5427 21.5775 19.1088 20.3659 19.3097 19.4382C19.3599 19.2067 19.3684 19.0911 19.3695 18.6148C19.3702 18.1539 19.3621 18.032 19.3237 17.8928C19.1915 17.4213 18.9444 17.1063 18.5585 16.9165C18.2465 16.7628 18.0368 16.7233 17.5401 16.7233C16.9585 16.7233 16.4481 16.8193 15.8669 17.0387C15.7037 17.1004 15.6036 17.1262 15.5992 17.1081C15.5951 17.0926 15.6557 16.8921 15.7332 16.6631C16.2 15.2883 16.7476 14.2263 17.4648 13.3042C17.7247 12.97 18.2388 12.4412 18.5427 12.1953C19.0501 11.7846 19.7262 11.398 20.32 11.1783C21.6213 10.6975 23.3887 10.6151 24.5142 10.9829C26.0445 11.4829 26.8529 12.7654 27.029 14.973L27.046 15.1857L27.1671 15.0764C27.2336 15.0158 27.6878 14.5989 28.1763 14.1495C30.187 12.2994 31.3569 11.4637 32.3388 11.1761C32.5286 11.1207 32.6442 11.1059 32.9729 11.0933C34.2014 11.0483 35.053 11.4412 35.6409 12.3241C36.1763 13.1292 36.4189 14.1746 36.3469 15.3729C36.3266 15.7163 36.2875 15.949 36.0659 17.0571C35.6549 19.114 35.2347 21.4874 34.7734 24.3511C34.6206 25.3042 34.6165 25.3407 34.6313 25.682C34.6682 26.5387 34.8491 27.069 35.2384 27.4604C35.3846 27.6074 35.4806 27.679 35.6261 27.7484C35.971 27.9124 36.4651 27.9689 36.8004 27.8814C36.9943 27.8308 37.3972 27.6399 37.7147 27.4464C38.2897 27.0967 39.5349 26.1402 39.5559 26.032C39.5622 26.0003 39.6036 25.6904 39.6483 25.3433C39.6926 24.9962 39.8436 24.0272 39.9832 23.1905C40.252 21.5771 40.3901 20.6203 40.4717 19.7998C40.5378 19.1354 40.5862 18.3127 40.5703 18.1151C40.5341 17.6635 40.2417 17.4235 39.8739 17.5431C39.618 17.6266 39.0814 17.9549 38.337 18.4848C38.0294 18.7038 37.961 18.7425 37.9337 18.713C37.7812 18.5512 36.529 17.1085 36.5305 17.0959C36.5319 17.0871 36.5988 17.0228 36.6789 16.953C36.9023 16.7591 38.0334 15.7049 39.3905 14.4246C41.0497 12.8596 41.5449 12.4202 42.2339 11.9017C42.7565 11.5092 43.1615 11.2717 43.5053 11.158C43.656 11.1081 43.735 11.0993 44.0186 11.1011C44.2206 11.1022 44.4256 11.1188 44.5341 11.1432C45.2494 11.3024 45.8104 11.7086 46.2745 12.4032C46.7531 13.1196 47.0456 13.8784 47.1815 14.7573C47.2553 15.2355 47.2624 16.1701 47.1948 16.5571C47.1708 16.6953 47.1505 16.8223 47.1505 16.8393C47.1505 16.8563 47.2291 16.7551 47.3248 16.614C47.9883 15.6362 48.9197 14.6661 49.9573 13.8729C50.248 13.6506 50.916 13.2067 51.2114 13.0391C52.6837 12.2045 54.317 11.7374 55.9426 11.686C57.4566 11.6384 58.594 12.0029 59.3717 12.7854C59.6644 13.0804 59.9044 13.4233 60.0814 13.7994C60.4311 14.5287 60.5958 15.3171 60.6312 16.4286L60.6479 16.9626L61.0995 16.5656C61.3894 16.3108 61.6519 16.0509 61.8343 15.8385C62.1852 15.4298 62.8672 14.7278 63.2778 14.3526C64.9293 12.843 66.6744 11.9833 68.5766 11.7425C69.0345 11.6846 69.8114 11.6654 70.2007 11.7023C71.3247 11.8094 72.1892 12.1809 72.7926 12.8175C73.7221 13.7964 74.1083 15.1052 74.016 16.9608C73.9495 18.2916 73.7457 19.5328 73.1881 21.9922C72.488 25.0823 72.3853 25.7329 72.4676 26.5756C72.5326 27.2433 72.6719 27.5331 73.0149 27.7167C73.2675 27.8503 73.4872 27.8987 73.9259 27.9146C74.2967 27.9279 74.321 27.9257 74.519 27.8592C74.7616 27.778 75.0958 27.6066 75.4289 27.3924C75.622 27.2684 75.6652 27.23 75.656 27.1875C75.6153 27.0165 75.5836 26.1092 75.5976 25.5501C75.6419 23.7433 76.0315 22.1805 76.8524 20.5095C77.4122 19.3699 78.0806 18.3518 78.9691 17.2865C81.5662 14.1735 84.6633 12.2503 88.1449 11.59C89.5673 11.3205 91.2413 11.251 92.4765 11.4098C94.8206 11.7115 96.2867 12.7252 96.9395 14.4962C97.1526 15.0738 97.2704 15.7156 97.2904 16.4113C97.3118 17.1425 97.2438 17.6107 97.0152 18.3046C96.5056 19.8518 95.3491 21.391 93.4724 23.0191C91.269 24.9308 88.5522 26.265 85.4636 26.9504C85.0407 27.0442 84.2579 27.2 84.2077 27.2C84.1766 27.2 84.4691 27.5372 84.6508 27.7119C85.2342 28.2732 85.9558 28.5952 86.8561 28.6978C87.201 28.7362 88.4565 28.7141 89.0478 28.6587C91.5234 28.4242 93.9495 27.7606 96.8007 26.5383L97.3812 26.2894L97.3661 26.1454C97.2867 25.395 97.2848 24.3267 97.3624 23.5775C97.5651 21.6026 98.2435 19.7458 99.4056 17.9829C99.8745 17.2706 100.294 16.7318 100.961 15.9844C102.387 14.3858 103.741 13.3182 105.407 12.4763C107.305 11.5176 109.308 11.0376 111.608 10.9907C112.586 10.9704 113.25 11.0224 114.03 11.1801C115.13 11.4028 116.143 11.8485 116.991 12.4829C117.502 12.8659 118.137 13.542 118.607 14.2056C119.74 15.8046 120.302 17.905 120.236 20.3031C120.176 22.4907 119.738 24.443 118.892 26.2994C118.135 27.9611 116.892 29.6768 115.506 30.9722C113.365 32.9737 110.92 34.0797 107.971 34.3814C107.591 34.4212 106.1 34.4526 105.743 34.4294ZM107.573 29.261C109.126 29.0726 110.497 27.9958 111.668 26.0446C112.868 24.0468 113.461 21.9161 113.405 19.8142C113.382 18.9611 113.277 18.326 113.04 17.6188C112.825 16.9744 112.606 16.5848 112.312 16.3216C111.999 16.0427 111.715 15.9685 111.12 16.0114C110.445 16.0594 109.851 16.2163 109.275 16.4988C108.18 17.0346 107.274 17.9401 106.426 19.3441C105.328 21.1635 104.749 22.9914 104.62 25.0483C104.551 26.1487 104.719 27.063 105.149 27.9231C105.45 28.5239 105.839 28.9508 106.262 29.1391C106.579 29.2809 107.047 29.3241 107.573 29.261H107.573ZM83.6054 24.7351C85.9946 23.7802 88.1541 22.0896 89.43 20.1757C89.8273 19.5793 90.0784 19.0139 90.1574 18.5372C90.1955 18.3112 90.1766 17.8836 90.1187 17.6413C90.0729 17.4482 89.9551 17.2067 89.8472 17.0841C89.7398 16.9622 89.5441 16.8408 89.3513 16.7776C89.1585 16.7137 88.6157 16.7008 88.365 16.754C87.2989 16.9796 86.249 17.7953 85.1929 19.2207C84.0455 20.7684 83.4185 22.2285 83.2738 23.6905C83.2361 24.0671 83.2383 24.854 83.2771 24.854C83.2933 24.8544 83.441 24.8005 83.6054 24.7351ZM32.4444 7.52799C31.8525 7.47481 31.2517 7.30679 30.8639 7.08633C30.6497 6.96447 30.3185 6.66942 30.1734 6.4726C29.9655 6.18862 29.813 5.80052 29.7358 5.35295C29.6752 5.0051 29.6819 4.34335 29.7495 4.01322C29.8868 3.33929 30.2524 2.70488 30.8754 2.05975C32.0375 0.855913 33.4138 0.161674 34.9138 0.0235652C35.8359 -0.0613683 36.5024 0.0911426 37.0667 0.516179C37.6003 0.917951 38.0847 1.60924 38.272 2.23516C38.3639 2.54203 38.3857 3.07046 38.3226 3.44454C38.1756 4.3116 37.6922 5.13397 36.8443 5.96004C35.9444 6.8367 34.9832 7.32304 33.8218 7.48995C33.4821 7.5387 32.7805 7.5579 32.4444 7.52799Z"
|
||
fill="currentColor" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_2933_1928">
|
||
<rect width="120.071" height="34.4364" fill="white" transform="translate(0.199951)" />
|
||
</clipPath>
|
||
</defs>
|
||
</g>
|
||
<g id="samsung-logo">
|
||
<path d="M127.521 10.241C125.788 0.288344 95.8832 -2.81758 60.7252 3.30347C45.96 5.87544 32.6278 9.66896 22.2453 13.9367C23.8401 13.9717 25.023 14.3374 25.7417 15.0542C26.3035 15.6167 26.5873 16.3887 26.5873 17.3506V18.3378H23.1398V17.4661C23.1398 16.7398 22.7043 16.2897 21.9329 16.2897C21.2847 16.2897 20.8853 16.5824 20.7564 17.1588C20.7132 17.3867 20.718 17.6211 20.7704 17.8471C21.1393 19.355 26.2585 20.2914 26.8153 23.0742C26.8883 23.4323 26.9873 24.1986 26.8311 25.2951C26.5118 27.5394 24.5398 28.4054 22.0294 28.4054C18.5254 28.4054 17.102 26.7458 17.102 24.4576L17.1045 23.3751H20.8002L20.8022 24.7236C20.8022 25.4817 21.3532 25.9001 22.1037 25.9001C22.8148 25.9001 23.23 25.6138 23.3735 25.0284C23.4402 24.7592 23.4694 24.3624 23.3481 24.0589C22.6643 22.3434 17.8842 21.5422 17.2956 18.7683C17.1642 18.1448 17.1534 17.6141 17.2626 16.943C17.3186 16.6103 17.4217 16.2873 17.5686 15.9836C6.05221 21.3695 -0.684685 27.2956 0.205441 32.4123C1.94062 42.3662 31.8443 45.4689 67.0017 39.3479C82.4564 36.6578 96.3505 32.6307 106.925 28.1178C106.772 28.1254 106.623 28.1419 106.464 28.1419C104.058 28.1419 101.91 27.2404 101.687 24.7808C101.647 24.3332 101.64 24.1459 101.639 23.8907L101.64 18.2363C101.64 17.9925 101.669 17.5645 101.696 17.3436C101.981 14.9665 103.861 13.9863 106.466 13.9863C108.482 13.9863 110.953 14.5647 111.225 17.3455C111.261 17.6947 111.257 18.0674 111.257 18.1899V18.7239H107.775V17.9271C107.775 17.9099 107.77 17.6122 107.732 17.4261C107.675 17.1423 107.433 16.4846 106.441 16.4846C105.461 16.4846 105.207 17.1436 105.144 17.4268C105.108 17.5823 105.091 17.8058 105.091 18.0534V24.1986C105.087 24.4119 105.098 24.5789 105.12 24.7014C105.137 24.7979 105.313 25.6449 106.453 25.6449C107.585 25.6449 107.76 24.7979 107.776 24.7014C107.806 24.5351 107.81 24.337 107.809 24.1986V22.2945H106.438V20.2438H111.283V23.8919C111.282 24.1402 111.278 24.3237 111.236 24.7808C111.178 25.4258 110.975 25.9719 110.656 26.4385C121.87 21.1136 128.4 15.2834 127.521 10.241ZM36.3571 27.8804L34.5934 15.896H34.5299L32.7211 27.8804H29.0038L31.504 14.3462H37.5692L40.0542 27.8804H36.3571ZM54.2371 27.8804L54.1552 16.1278H54.0956L51.9083 27.8804H48.4196L46.2431 16.1278H46.1809L46.1016 27.8804H42.6445L42.9442 14.3462H48.5046L50.1236 24.3999H50.203L51.8264 14.3462H57.3843L57.6827 27.8804H54.2371ZM70.5165 25.2576C70.1445 27.8791 67.5763 28.3375 65.7612 28.3375C62.7473 28.3375 60.8832 27.0493 60.8832 24.4278L60.8851 23.3586H64.5364L64.539 24.6906C64.539 25.4138 65.0488 25.8563 65.8361 25.8563C66.5383 25.8563 66.9497 25.5744 67.0925 24.9954C67.1586 24.7256 67.1859 24.3319 67.0691 24.0348C66.3961 22.3517 61.6534 21.5269 61.0769 18.7962C60.9448 18.1772 60.9353 17.6515 61.0439 16.9874C61.4451 14.512 63.8209 13.9977 65.7332 13.9977C67.4436 13.9977 68.6887 14.371 69.4353 15.1176C69.9921 15.6751 70.274 16.4401 70.274 17.3918V18.3683H66.8595V17.5068C66.8595 16.769 66.4018 16.3424 65.6659 16.3424C65.0132 16.3424 64.6183 16.6325 64.4888 17.2033C64.4468 17.4288 64.4524 17.6607 64.5053 17.8839C64.871 19.3848 69.9451 20.3022 70.5007 23.0589C70.5724 23.4107 70.6708 24.1656 70.5165 25.2576ZM83.1624 24.0278C83.1675 24.2818 83.1427 24.789 83.1288 24.9192C82.9205 27.149 81.3257 28.2822 78.4007 28.2822C75.4643 28.2822 73.8682 27.149 73.6612 24.9192C73.6377 24.6235 73.6265 24.327 73.6275 24.0303V14.3431H77.1207V24.3357C77.1169 24.5592 77.1284 24.7243 77.1506 24.8392C77.1938 25.0614 77.4147 25.7827 78.4007 25.7827C79.3835 25.7827 79.6045 25.0608 79.6508 24.8417C79.6705 24.7236 79.6826 24.5503 79.6826 24.3351V14.3431H83.1624V24.0278ZM98.2127 27.7426H93.3519L90.0892 17.0223H90.0346L90.2155 27.7426H86.8277V14.3462H91.8923L94.908 24.6443H94.9785L94.8001 14.3462H98.2127V27.7426Z" fill="currentColor" />
|
||
</g>
|
||
<g id="citi-logo">
|
||
<g clip-path="url(#clip0_2933_1934)">
|
||
<path d="M27.1453 46.501L26.9817 46.6596C24.4113 49.2787 21.4369 50.6623 18.3729 50.6623C11.9742 50.6623 7.33206 45.8619 7.33206 39.2403C7.33206 32.6293 11.9742 27.8211 18.3729 27.8211C21.4369 27.8211 24.4113 29.2122 26.9817 31.8412L27.1453 31.9976L31.2606 27.0204L31.1505 26.8875C27.7282 22.8435 23.6212 20.8774 18.5726 20.8774C13.5112 20.8774 8.87684 22.5831 5.54185 25.6546C1.91028 28.9845 -0.000244141 33.6805 -0.000244141 39.2403C-0.000244141 44.8002 1.91028 49.5061 5.54185 52.8363C8.87684 55.9255 13.5112 57.6186 18.5726 57.6186C23.6212 57.6186 27.7282 55.6494 31.1505 51.6034L31.2606 51.4807L27.1453 46.501ZM35.4167 56.9401H42.6852V21.4516H35.4167V56.9401ZM71.162 49.2252C69.2208 50.4066 67.4177 51.0028 65.7962 51.0028C63.4459 51.0028 62.3818 49.7596 62.3818 46.9976V28.1664H69.7911V21.4861H62.3818V10.4429L55.2594 14.2585V21.4861H49.111V28.1664H55.2591V48.1971C55.2591 53.6523 58.4919 57.3861 63.3205 57.4833C66.5966 57.5473 68.5712 56.5704 69.7679 55.8543L69.8446 55.8055L71.5915 48.9617L71.162 49.2252ZM77.1787 56.9401H84.4575V21.4516H77.1787V56.9401Z" fill="currentColor" />
|
||
<path d="M88.6982 15.2311C82.0562 5.82465 71.0283 0.213379 59.8081 0.213379C48.591 0.213379 37.5604 5.82465 30.9313 15.2311L30.5884 15.7144H38.9517L39.0438 15.6149C44.7345 9.73774 52.1666 6.63283 59.8081 6.63283C67.4496 6.63283 74.877 9.73774 80.5806 15.6149L80.6726 15.7144H89.0306L88.6982 15.2311Z" fill="currentColor" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_2933_1934">
|
||
<rect width="89.0296" height="57.8336" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</g>
|
||
</svg>
|
||
|
||
</div>
|
||
<header
|
||
class="banner-image header"
|
||
|
||
>
|
||
<nav class="nav-main desktop" aria-label="main">
|
||
<div class="ds-wrapper header-content">
|
||
|
||
<div class="nav-menu">
|
||
|
||
|
||
<button
|
||
class="burger-button"
|
||
aria-label="Open main navigation"
|
||
aria-expanded="false"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="19" viewBox="0 0 21 19" fill="none">
|
||
<use href="#icon-burger" />
|
||
</svg>
|
||
</button>
|
||
<a href="/" class="rebrand-logo" aria-label="Nielsen Norman Group - Home">
|
||
<svg class="logo-full" xmlns="http://www.w3.org/2000/svg" width="150" height="32" viewBox="0 0 150 32" fill="none">
|
||
<title>Nielsen Norman Group</title>
|
||
<use href="#rebrand-25-logo-black"></use>
|
||
</svg>
|
||
<svg class="logo-compact" xmlns="http://www.w3.org/2000/svg" width="79" height="24" viewBox="0 0 79 24" fill="none">
|
||
<title>Nielsen Norman Group</title>
|
||
<use href="#rebrand-25-logo-compact"></use>
|
||
</svg>
|
||
</a>
|
||
|
||
<ul>
|
||
|
||
<li class=" has-subnav">
|
||
|
||
<button class="label-m-500" aria-controls="nav-live-courses" aria-expanded="false">
|
||
UX Training & Courses
|
||
<svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-open-nav" />
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
|
||
<ul id="nav-live-courses" class="submenu">
|
||
|
||
|
||
|
||
<li class="menu-section">
|
||
|
||
<h3 class="label-xl-700">Live Online</h3>
|
||
|
||
|
||
<ul class="menu-section-list">
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/courses/"
|
||
>
|
||
All Live Online Courses
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/training/live-courses/"
|
||
>
|
||
Upcoming Live Online Training
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-item-group">
|
||
|
||
<a class="label-m-500" href="/contents/train-your-team/" >Train Your Team</a>
|
||
|
||
|
||
<ul class="menu-item-group-list">
|
||
|
||
<li class="">
|
||
<a class="label-s-400" href="/contents/train-your-team/group-discount-pricing/" >Group-Discount Pricing</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a class="label-s-400" href="/contents/train-your-team/private-team-training-ux-certification/" >Private Team Training</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/ux-certification/"
|
||
>
|
||
UX Certification
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-section">
|
||
|
||
<h3 class="label-xl-700">Self-Paced</h3>
|
||
|
||
|
||
<ul class="menu-section-list">
|
||
|
||
|
||
|
||
<li class="">
|
||
<a class="nav-card"
|
||
href="/contents/self-paced-courses/"
|
||
>
|
||
<div class="nav-card__header">
|
||
<span class="label-m-500">Self-Paced Courses</span>
|
||
|
||
<span class="ds-pill-small label-xs-400">New</span>
|
||
|
||
</div>
|
||
|
||
|
||
<img src="https://media.nngroup.com/media/images/SP-Banner_93isepZ.width-260.png" alt="" class="nav-card__image">
|
||
|
||
</a>
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="menu-section menu-section--promo">
|
||
<div class="nav-promo__text">
|
||
<h3 class="nav-promo__title label-xl-600">Deciding Between Formats?</h3>
|
||
<p class="paragraph-s-400">Find the training option that fits your learning style.</p>
|
||
</div>
|
||
|
||
<a class="nav-promo__link" href="/contents/right-nng-training-format/">
|
||
<span class="label-s-400">Which Format Is Right For Me?</span>
|
||
<svg class="nav-promo__arrow" aria-hidden="true" width="16" height="16" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-arrow" />
|
||
</svg>
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li class="selected has-subnav">
|
||
|
||
<button class="label-m-500" aria-controls="nav-" aria-expanded="false">
|
||
Articles & Resources
|
||
<svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-open-nav" />
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
|
||
<ul id="nav-" class="submenu">
|
||
|
||
|
||
|
||
<li class="menu-section">
|
||
|
||
|
||
<ul class="menu-section-list">
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/articles/"
|
||
>
|
||
Articles & Videos
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/reports/"
|
||
>
|
||
Reports & Books
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500 external-link" href="https://podcasters.spotify.com/pod/show/nngroup" target="_blank" rel="noopener noreferrer">
|
||
The NN/G UX Podcast
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
|
||
<use href="#icon-external-link" />
|
||
</svg>
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li class=" has-subnav">
|
||
|
||
<button class="label-m-500" aria-controls="nav-" aria-expanded="false">
|
||
Consulting
|
||
<svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-open-nav" />
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
|
||
<ul id="nav-" class="submenu">
|
||
|
||
|
||
|
||
<li class="menu-section">
|
||
|
||
|
||
<ul class="menu-section-list">
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/"
|
||
>
|
||
All Consulting Services
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/user-research/"
|
||
>
|
||
Customized Research
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/expert-review/"
|
||
>
|
||
Expert Review
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/applied-workshops/"
|
||
>
|
||
Intensive Applied Workshops
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/keynote-speaking/"
|
||
>
|
||
Keynote Speaking
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/user-testing/"
|
||
>
|
||
User Testing
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/consulting/ux-maturity-assessment/"
|
||
>
|
||
UX Maturity Assessment
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li class=" has-subnav">
|
||
|
||
<button class="label-m-500" aria-controls="nav-" aria-expanded="false">
|
||
About Us
|
||
<svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-open-nav" />
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
|
||
<ul id="nav-" class="submenu">
|
||
|
||
|
||
|
||
<li class="menu-section">
|
||
|
||
|
||
<ul class="menu-section-list">
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/about/"
|
||
>
|
||
About NNGroup
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/people/"
|
||
>
|
||
People
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/about/about-client-list/"
|
||
>
|
||
Clients
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/news/"
|
||
>
|
||
News & Careers
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/faqs/"
|
||
>
|
||
FAQs
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a class="label-m-500"
|
||
href="/about/contact/"
|
||
>
|
||
Contact Us
|
||
</a>
|
||
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div class="search-and-profile">
|
||
|
||
|
||
|
||
<button type="button" class="search-toggle-button" aria-expanded="false" aria-label="Search">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17 18" fill="none">
|
||
<use href="#icon-search-rebrand" />
|
||
</svg>
|
||
</button>
|
||
<form class="search-rebrand" role="search" action="/search/" method="get" data-algolia-app-id="ORI4VVAEA5" data-algolia-search-api-key="562fc62a44f3e67b0e9b1d7a40fb17e2" data-index="Document_production_query_suggestions">
|
||
<div class="search-rebrand__field">
|
||
<label class="visually-hidden paragraph-s-400" for="search">Search</label>
|
||
|
||
<div class="search-rebrand__input">
|
||
<input id="search" name="q" type="search" autocomplete="off" />
|
||
</div>
|
||
|
||
<button type="reset" class="reset-button empty" aria-label="Clear" disabled>
|
||
<svg viewBox="0 0 14 14" aria-hidden="true">
|
||
<use href="#icon-close" />
|
||
</svg>
|
||
</button>
|
||
<button type="submit" class="search-rebrand__submit" aria-label="Search" tabindex="0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 18" fill="none">
|
||
<use href="#icon-search-rebrand" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
|
||
<div class="cart-and-profile">
|
||
|
||
<div class="cart empty" aria-hidden>
|
||
<a href=/cart/>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<use href="#icon-cart-rebrand-25" />
|
||
</svg>
|
||
<span class="label-s-600"></span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<div class="profile has-subnav">
|
||
<button class="loading label-m-500" aria-expanded="false">Profile
|
||
<svg class="open-nav" aria-hidden="true" width="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-open-nav" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
</header>
|
||
|
||
|
||
|
||
<main id="main">
|
||
<section class="padded">
|
||
<div class="wrapper">
|
||
<article>
|
||
<span id="gaDataLength" class="ga-data-layer" aria-hidden="true">5</span>
|
||
|
||
<div class="article-header">
|
||
<h1 class="article-h1">Good Visual Design, Explained</h1>
|
||
<div class="article-authors">
|
||
|
||
<span id="gaDataAuthors" class="ga-data-layer" aria-hidden="true">Kelley Gordon</span>
|
||
|
||
<div class="author-tile multiple body-small">
|
||
<div class="author-photos">
|
||
|
||
<img height="64" width="64" class="author-photo fluid" src="https://media.nngroup.com/media/people/photos/2022-Portrait-Kelley.jpg.256x256_q75_autocrop_crop-smart_upscale.jpg" alt="">
|
||
|
||
</div>
|
||
<div class="author-meta">
|
||
|
||
<span class="authors-list"><a class="ga-article-author" href="/articles/author/kelley-gordon/">
|
||
Kelley Gordon</a></span>
|
||
|
||
<p class="publication-date">
|
||
November 14, 2025
|
||
|
||
<span id="gaDataPubDate" class="ga-data-layer" aria-hidden="true">2025-11-14</span>
|
||
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="article-share">
|
||
<a class="article-share-title ga-share" href="#">
|
||
<span class="article-share-icon"></span>
|
||
<p class="article-share-label body-medium">Share</p>
|
||
</a>
|
||
<div class="share-links tooltip">
|
||
<div class="tip-arrow"></div>
|
||
<ul>
|
||
<li class="body-medium">
|
||
<a class="ga-share-email" target="_blank" href="mailto:?subject=NN/g Article: Good Visual Design, Explained&body=https://www.nngroup.com/articles/good-visual-design/" data-share-type="Email">
|
||
<svg
|
||
width="24"
|
||
viewbox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="icon"
|
||
>
|
||
<rect x="2.375" y="5" width="19.25" height="14" rx="0.65625" stroke="currentColor" stroke-width="1.3125"/>
|
||
<path d="M21.625 6.75L12.4156 14.285C12.1738 14.4828 11.8262 14.4828 11.5844 14.285L2.375 6.75" stroke="currentColor" stroke-width="1.3125"/>
|
||
</svg>Email article
|
||
</a>
|
||
</li>
|
||
<li class="body-medium">
|
||
<a class="ga-share-linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.nngroup.com/articles/good-visual-design/&title=Good Visual Design, Explained&source=Nielsen%20Norman%20Group" data-share-type="LinkedIn">
|
||
<svg fill="none" aria-hidden="true" width="24" class="icon" viewBox="1 0 23 23" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-social-linkedin" />
|
||
</svg>
|
||
Share on LinkedIn
|
||
</a>
|
||
</li>
|
||
<li class="body-medium">
|
||
<a class="ga-share-twitter" target="_blank" href="https://twitter.com/intent/tweet?url=http://www.nngroup.com/articles/good-visual-design/&text=Good Visual Design, Explained&via=nngroup" data-share-type="Twitter">
|
||
<svg fill="none" aria-hidden="true" width="24" class="icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-social-x" />
|
||
</svg>
|
||
Share on Twitter
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="article-container">
|
||
<div class="article-content">
|
||
|
||
<div class="article-summary article-heading-small-light">
|
||
<span class="article-summary-label">
|
||
Summary:
|
||
</span>To create appealing designs, align type and elements to a grid, build a clear visual hierarchy, use color intentionally, and stay consistent with every design choice.
|
||
</div>
|
||
|
||
<div class="article-body">
|
||
<p>In this 3rd article in the <a href="https://www.nngroup.com/articles/why-does-a-design-look-good-part2/">anatomy-of-good-design series</a>, I explain visual-design principles that contribute to good-looking designs, with real-site examples. <a href="https://www.nngroup.com/articles/aesthetic-usability-effect/">How something looks does affect the perception of how well it functions.</a></p>
|
||
<div class="table-of-contents">
|
||
<div class="content">
|
||
<div class="header">
|
||
<div class="toc-header">
|
||
<h2 class="toc-title article-heading-small">
|
||
In This Article:
|
||
</h2>
|
||
<span class="expand-icon"></span>
|
||
</div>
|
||
<a class="current-element" href="#"></a>
|
||
</div>
|
||
<ul class="toc-items">
|
||
<li class="article-table-of-content">
|
||
<a class="ga-article-toc-item" href="#toc-visual-principle-grid-use-and-alignment-1">Visual Principle: Grid Use and Alignment</a>
|
||
</li>
|
||
<li class="article-table-of-content">
|
||
<a class="ga-article-toc-item" href="#toc-visual-principle-use-of-a-typographic-system-2">Visual Principle: Use of a Typographic System</a>
|
||
</li>
|
||
<li class="article-table-of-content">
|
||
<a class="ga-article-toc-item" href="#toc-visual-principle-strategic-color-palette-3">Visual Principle: Strategic Color Palette</a>
|
||
</li>
|
||
<li class="article-table-of-content">
|
||
<a class="ga-article-toc-item" href="#toc-visual-principle-useful-imagery-4">Visual Principle: Useful Imagery</a>
|
||
</li>
|
||
<li class="article-table-of-content">
|
||
<a class="ga-article-toc-item" href="#toc-designs-dont-look-good-by-chance-5">Designs Don’t Look Good by Chance</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div><h2 id="toc-visual-principle-grid-use-and-alignment-1">Visual Principle: Grid Use and Alignment</h2>
|
||
<p><a href="https://www.nngroup.com/articles/using-grids-in-interface-designs/">Grids</a> help designers create cohesive layouts, allowing end users to easily scan interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms. Grids are made up of columns with <strong>gutters</strong> between them. While there is no ideal gutter size, different gutter sizes are suited to different purposes.</p>
|
||
<h3>Example: 3-Column Grid Base with Thin Gutters</h3>
|
||
<p>This page from <a href="https://flamingoestate.com/pages/the-soap-shop-2">Flamingo Estate</a> uses a 3-column grid, with thin gutters.</p>
|
||
<p>The product images and content align to the columns, providing a predictable and organized shopping experience for end users. The thin gutters provide just enough space to distinguish between the products, and work well because the product images are quite airy.</p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="Flamingo Estate's product page, split into a 3 using a purple 3 column overlay. " height="687" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/flamingo-7.jpg" width="870"/>
|
||
<figcaption><em>Flamingo Estate uses a 3-column grid with narrow gutters to organize elements.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3>Example: 4-Column Grid Base with Wide Gutters</h3>
|
||
<p>This page from <a href="https://www.figma.com/blog/"><u>Figma Shortcut</u></a> uses a 4-column grid with wide gutters. Text and other elements can span multiple columns, making them appear as one wide column. It's common for content to extend into the gutter when spanning multiple columns.</p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="A article page split by a 4 column grid overlay revealing the text lines up with the center two columns and the gutter with the outer two. " height="370" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/figma-blog-6.jpg" width="870"/>
|
||
<figcaption><em>Figma Shortcut uses a 4-column grid with wide gutters to organize elements.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>The main body text is aligned to the middle two columns, while extra text (like callouts) is anchored in the left and right columns (in the image below, the left column has been cropped out, as it does not contain any callouts). This ample separation between callouts on the right and the main body text in the center helps create a readable design. </p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="In the 4 column grid layout, the right-most column (which is also the gutter) holds call out text. " height="351" loading="lazy" src="https://media.nngroup.com/media/editor/2025/11/04/figma-blog-8.jpg" width="870"/>
|
||
<figcaption><em>Figma Shortcut: Callouts are aligned in the right column.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>Be sure to use a grid in your designs to keep alignment consistent across different pages and elements.</p>
|
||
<h2 id="toc-visual-principle-use-of-a-typographic-system-2">Visual Principle: Use of a Typographic System</h2>
|
||
<p><a href="https://www.nngroup.com/articles/typography-terms-ux/"><u>Typography</u></a> is a key component of every design. It not only can increase webpage legibility (and therefore, usability) but can also make a design feel polished. Let’s break down a couple of examples. </p>
|
||
<h3>Example: Hierarchy Created Through Typography</h3>
|
||
<p>This example is from <a href="http://seed.com"><u>Seed.com</u></a>, a probiotic company. Except for the phrase <em>Viacap technology</em>, this design uses one font family (small caps, medium, regular) and uses white for all text color. The font is clean and easy to read, allowing the user to focus on the content, rather than the typography. </p>
|
||
<p>Despite using only one text color and a font family with minimal visual differences across regular and medium weights, the design still achieves text hierarchy. This is accomplished through size. </p>
|
||
<ul>
|
||
<li aria-level="1" style="list-style-type:disc"><span style="color:#000000">The </span><span style="color:#000000"><strong>largest</strong></span><span style="color:#000000"> size (</span><span style="color:#000000"><em>Most probiotics don’t survive digestion</em></span><span style="color:#000000">) calls the most attention and, therefore, is the element your eye reads first. </span></li>
|
||
<li aria-level="1" style="list-style-type:disc"><span style="color:#000000">The </span><span style="color:#000000"><strong>middle</strong></span><span style="color:#000000"> size, which signals medium importance, is the text </span><span style="color:#000000"><em>Increases healthy digestion by 4.6x.</em></span></li>
|
||
<li aria-level="1" style="list-style-type:disc"><span style="color:#000000">The </span><span style="color:#000000"><strong>smallest</strong></span><span style="color:#000000"> text size, which breaks down the capsule design, is less vital to be read by the user. </span></li>
|
||
</ul>
|
||
<p>As a rule of thumb, <strong>limiting your designs to 3 type sizes </strong>will establish a strong hierarchy without overwhelming the design or user.</p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="A product page with three different text sizes highlighted with overlays that indicate the hierarchy with the largest text being the most dominant, and the smallest the least. " height="655" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/seed.jpg" width="870"/>
|
||
<figcaption><em>Seeds.com uses 3 type sizes to establish a strong hierarchy.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3>Example: Typography for Reading</h3>
|
||
<p>Just like in our previous example, three text styles are present in Figma Shortcut’s design. They establish a clear visual hierarchy: </p>
|
||
<ul>
|
||
<li>A larger, bold style used for the introduction of the article </li>
|
||
<li>The medium style for the main body-copy text</li>
|
||
<li>A smaller style for captions and callouts</li>
|
||
</ul>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="An article with 3 different text sizes. They're highlighted to show the hierarchy with the largest text as the most dominant. " height="606" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/figma-blog-4.jpg" width="870"/>
|
||
<figcaption><em>Figma Shortcut: Three text styles establish a clear visual hierarchy.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>However, even more important in this example is that the type system was designed and used with reading in mind. Shorter lines of text and just <a href="https://www.nngroup.com/articles/typography-terms-ux/">right <strong>leading</strong></a> (i.e., the distance between the baselines of two consecutive text line) make reading easier, as the eye can quickly go from one text line to the next, without accidentally skipping a line. </p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="Text with overlays showing that the line lengths and leading are ideal for reading. " height="401" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/figma-blog-5.jpg" width="870"/>
|
||
<figcaption><em>Figma Shortcut: The slightly increased leading — combined with shorter line lengths — creates a not-too-dense text block.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p><strong>Consider slightly increasing the default leading</strong> if you have a lot of text (either several paragraphs or longer paragraphs), as walls of text can feel overwhelming.</p>
|
||
<h2 id="toc-visual-principle-strategic-color-palette-3">Visual Principle: Strategic Color Palette</h2>
|
||
<p>Aside from the grid and typography,<strong> </strong><a href="https://www.nngroup.com/articles/color-enhance-design/">color</a> is one of the most important design tools. Color can set the brand tone and influence brand perception, draw users’ attention, affect their emotions, and increase usability. Using color strategically can be challenging. Let’s break down how color is used in a couple of examples.</p>
|
||
<h3>Example: Monochromatic Color Palette</h3>
|
||
<p>Seed.com’s color palette is limited to shades of green and white. This monochromatic color palette (i.e., tones and shades of a single hue or color) creates a pleasant and polished experience, while emphasizing the content. Monochromatic palettes are the easiest to work with and create, and are the most accessible to novice visual designers. (The ability to strategically select and combine colors is a complex skill that’s often underestimated by nondesigners.)</p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="A product page in soft, natural greens and creams. " height="546" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/seed-color-palette.jpg" width="870"/>
|
||
<figcaption><em>Seed.com uses a monochromatic color palette to create a polished experience.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>The shades of green are sophisticated and refined — neither too bright nor overly saturated. When choosing color shades for your design, exercise caution with neon colors (such as highlighter yellow), as they may distract users and affect the overall effectiveness of the design.</p>
|
||
<h3>Example: Color Reserved for Product Photos</h3>
|
||
<p>In the example from Flamingo Estate, the color palette is also <a href="https://www.nngroup.com/articles/color-enhance-design/">monochromatic, relying mostly on</a> shades of white and cream for the page’s background color, as well as for some button text (e.g., <em>Add to Basket)</em>. Refined green colors are also used in the palette but are reserved mostly for text backgrounds or for typography. </p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="A product page that uses soft white and green. " height="483" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/flamingo-5.jpg" width="870"/>
|
||
<figcaption><em>Flamingo Estate: The use of a monochromatic and simple color palette allows the product photos to stand out without overwhelming users.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>Because this design relies on just two main colors, white and green, the product photos can take center stage, without overwhelming users. </p>
|
||
<p>In your own designs, limiting your color palette to just two colors will create balance and enforce visual hierarchy. Only if you have extensive color experience should you experiment with more complex color harmonies.</p>
|
||
<h2 id="toc-visual-principle-useful-imagery-4">Visual Principle: Useful Imagery</h2>
|
||
<p>The use of <a href="https://www.nngroup.com/articles/imagery-in-visual-design/">imagery</a> in visual design plays a critical role in engaging users and conveying brand identity. Let’s look at a couple of examples.<strong> </strong></p>
|
||
<h3>Example: Intentional Imagery</h3>
|
||
<p>Imagery is used purposefully in Seed.com. </p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="A product page with a probiotic split open revealing two capsules. In the background is a image that looks like cells under a microscope. " height="566" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/seed-imagery.jpg" width="870"/>
|
||
<figcaption><em>Seed.com: Imagery is used with intent, providing insight into the product being sold.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>The image in the right column adds valuable information about the product being sold. This image is direct, with no visual clutter to distract from the product. The background image creates an interesting pattern reminiscent of viewing cells under a microscope. To keep the background from becoming too distracting for reading, a <a href="https://www.nngroup.com/articles/glassmorphism/">glassmorphic</a> element is placed between the type and image background.</p>
|
||
<p>The imagery subtly contributes to the impression that Seed.com’s designers are surely looking to achieve — that the company’s product is backed by scientific research.</p>
|
||
<h3>Example: Balanced, Direct Imagery</h3>
|
||
<p>In Flamingo Estate’s product photos, the actual products are in the center of the photograph. There is no additional, potentially distracting visual clutter. The resulting image is a balanced and direct image. The product photos are centered within the grid columns, further enhancing the sense of balance and symmetry.</p>
|
||
<div style="text-align:center">
|
||
<figure class="caption" style="display:inline-block"><img alt="Images are aligned with the center of their columns. " height="553" loading="lazy" src="https://media.nngroup.com/media/editor/2025/10/28/flamingo-6.jpg" width="870"/>
|
||
<figcaption><em>Flamingo Estate: The products are centered in the product photos, which are centered in the grid columns, providing a sense of balance.</em></figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>On hover, the image changes, revealing additional information about the product (in this case, the inclusion of a tomato alludes to the composition and fragrance of the soap). The <em>Add to Basket </em>button is also center-aligned, further adding to the design's sense of balance.</p>
|
||
<h2 id="toc-designs-dont-look-good-by-chance-5">Designs Don’t Look Good by Chance</h2>
|
||
<p>Be intentional about decisions you make in your design by relying on well-established visual-design principles. Align typography and other elements to a grid, establish a clear visual hierarchy, use color strategically, and be consistent in your application of various design elements. These core principles will create the foundation for a beautiful, usable design.</p>
|
||
</div>
|
||
</div>
|
||
<div class="article-sidebar">
|
||
<div class="sidebar-wrapper">
|
||
|
||
|
||
|
||
<div class="sidebar-item related-courses">
|
||
<h2 class="article-heading-small">Related Courses</h2>
|
||
<ul>
|
||
|
||
<li>
|
||
|
||
<a class="tile ga-article-related-course" data-course-title="Visual Design Fundamentals" href="/courses/visual-design/?lm=good-visual-design&pt=article">
|
||
<h4 class="title heading-small">Visual Design Fundamentals</h4>
|
||
<p id="visual-design-fundamentals" class="description body-small">
|
||
Create user interfaces using essential principles, techniques, and methods of visual design
|
||
</p>
|
||
<div class="ux-specialties">
|
||
|
||
<div class="ux-specialty-item">
|
||
<svg width="16" height="16" viewBox="0 0 21 21" aria-hidden="true">
|
||
<use href="#icon-interaction" />
|
||
</svg>
|
||
<p class="ux-specialty interaction-design">Interaction</p>
|
||
</div>
|
||
|
||
</div>
|
||
</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
|
||
<a class="tile ga-article-related-course" data-course-title="Web Page UX Design" href="/courses/web-page-design/?lm=good-visual-design&pt=article">
|
||
<h4 class="title heading-small">Web Page UX Design</h4>
|
||
<p id="web-page-ux-design" class="description body-small">
|
||
Strategically combine content, visuals, and interactive components to design successful web pages
|
||
</p>
|
||
<div class="ux-specialties">
|
||
|
||
<div class="ux-specialty-item">
|
||
<svg width="16" height="16" viewBox="0 0 21 21" aria-hidden="true">
|
||
<use href="#icon-interaction" />
|
||
</svg>
|
||
<p class="ux-specialty interaction-design">Interaction</p>
|
||
</div>
|
||
|
||
</div>
|
||
</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
|
||
<a class="tile ga-article-related-course" data-course-title="Design Tradeoffs and UX Decision-Making" href="/courses/design-tradeoffs/?lm=good-visual-design&pt=article">
|
||
<h4 class="title heading-small">Design Tradeoffs and UX Decision-Making</h4>
|
||
<p id="design-tradeoffs-and-ux-decision-making" class="description body-small">
|
||
Enhance your judgment and resolve tough design challenges
|
||
</p>
|
||
<div class="ux-specialties">
|
||
|
||
<div class="ux-specialty-item">
|
||
<svg width="16" height="16" viewBox="0 0 21 21" aria-hidden="true">
|
||
<use href="#icon-management" />
|
||
</svg>
|
||
<p class="ux-specialty ux-management">Management</p>
|
||
</div>
|
||
|
||
</div>
|
||
</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
<span id="gaDataAllTopics" class="ga-data-layer" aria-hidden="true">Visual Design,design principles,emotional design</span>
|
||
|
||
<div class="sidebar-item related-topics">
|
||
<h2 class="article-heading-small">Related Topics</h2>
|
||
<ul>
|
||
|
||
<li>
|
||
<span id="gaDataTopic" class="ga-data-layer" aria-hidden="true">Visual Design</span>
|
||
|
||
<a class="ga-article-related-topic" href="/topic/visual-design/">Visual Design</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</section>
|
||
<section class="learn-more">
|
||
<div class="wrapper">
|
||
<div class="related-content-container padded">
|
||
<h2 class="article-heading-small learn-more-title">Learn More:</h2>
|
||
|
||
<div class="article-videos">
|
||
|
||
|
||
|
||
<div class="cookieyes-consent-optin" data-cookieyes-category="advertisement">
|
||
<div class="youtube-embed video-youtube">
|
||
<iframe
|
||
allowfullscreen
|
||
allow="encrypted-media"
|
||
data-cookieconsent="marketing"
|
||
data-cookieyes="cookieyes-advertisement"
|
||
data-cookieblock-src="https://www.youtube.com/embed/q1QKE9XOS0M"
|
||
frameborder="0"></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="cookieyes-consent-optout" data-cookieyes-category="advertisement">
|
||
<a class="video-placeholder " href="https://www.youtube.com/watch?v=q1QKE9XOS0M" target="_blank" title="Analyzing Good Designs: Figma’s Shortcut on YouTube (new window)">
|
||
<div class="play"></div>
|
||
|
||
<img
|
||
src="https://media.nngroup.com/media/videos/thumbnails/Kelley_Analyzing_Good_Designs__Figmas_Shortcut.png.1300x728_q75_autocrop_crop-smart_upscale.png"
|
||
srcset="https://media.nngroup.com/media/videos/thumbnails/Kelley_Analyzing_Good_Designs__Figmas_Shortcut.png.650x364_q75_autocrop_crop-smart_upscale.png, https://media.nngroup.com/media/videos/thumbnails/Kelley_Analyzing_Good_Designs__Figmas_Shortcut.png.1300x728_q75_autocrop_crop-smart_upscale.png x2"
|
||
alt="Analyzing Good Designs: Figma’s Shortcut"
|
||
loading="lazy"
|
||
>
|
||
</a>
|
||
|
||
<p class="no-cookie-video-message">
|
||
<button class="link cookie-button cky-banner-element">Enable cookies</button>
|
||
to watch NN/g videos
|
||
</p>
|
||
|
||
</div>
|
||
|
||
<div class="article-video-details">
|
||
<p class="article-video-title label-large-light">
|
||
Analyzing Good Designs: Figma’s Shortcut
|
||
</p>
|
||
|
||
<span class="article-video-authors body-small"> Kelley Gordon</span>
|
||
·
|
||
<span class="article-video-duration body-small">3 min</span>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="related-content related-videos">
|
||
<ul class="no-bullet three column grid">
|
||
|
||
<li>
|
||
<div class="tile video">
|
||
<div class="media">
|
||
<a class="ga-article-related-video" data-video-title="Grids 101" href="/videos/grids-101/?lm=good-visual-design&pt=article" tabindex="-1" aria-hidden="true">
|
||
<div class="thumbnail-image">
|
||
|
||
<img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Grids_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Grids_101_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Grids_101_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt="">
|
||
|
||
<div class="overlay">
|
||
<span class="color icon fab fa-youtube"></span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<p class="related-content-title">
|
||
Grids 101
|
||
</p>
|
||
<p class="related-content-details">
|
||
|
||
<span class="related-content-authors body-small">
|
||
Kelley Gordon
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">4 min</span>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div class="tile video">
|
||
<div class="media">
|
||
<a class="ga-article-related-video" data-video-title="Visual Design Principles in Action" href="/videos/visual-design-principles-in-action/?lm=good-visual-design&pt=article" tabindex="-1" aria-hidden="true">
|
||
<div class="thumbnail-image">
|
||
|
||
<img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principles_in_Action_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principles_in_Action_Thumbnail.jpg.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/Visual_Design_Principles_in_Action_Thumbnail.jpg.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt="">
|
||
|
||
<div class="overlay">
|
||
<span class="color icon fab fa-youtube"></span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<p class="related-content-title">
|
||
Visual Design Principles in Action
|
||
</p>
|
||
<p class="related-content-details">
|
||
|
||
<span class="related-content-authors body-small">
|
||
Rachel Krause
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">6 min</span>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div class="tile video">
|
||
<div class="media">
|
||
<a class="ga-article-related-video" data-video-title="Why 90’s Designs Are Coming Back" href="/videos/cyclical-design-trends/?lm=good-visual-design&pt=article" tabindex="-1" aria-hidden="true">
|
||
<div class="thumbnail-image">
|
||
|
||
<img loading="lazy" src="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg" srcset="https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.650x364_q75_autocrop_crop-smart_upscale.jpg, https://media.nngroup.com/media/videos/thumbnails/maxresdefault_2.webp.1300x728_q75_autocrop_crop-smart_upscale.jpg 2x" alt="">
|
||
|
||
<div class="overlay">
|
||
<span class="color icon fab fa-youtube"></span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<p class="related-content-title">
|
||
Why 90’s Designs Are Coming Back
|
||
</p>
|
||
<p class="related-content-details">
|
||
|
||
<span class="related-content-authors body-small">
|
||
Megan Chan
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">4 min</span>
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="related-content related-articles">
|
||
<h2 class="article-heading-small related-articles-title">Related Articles:</h2>
|
||
<ul class="no-bullet three column grid">
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="The Anatomy of a Good Design: An Analysis of 4 Sites" href="/articles/why-does-a-design-look-good-part2/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">The Anatomy of a Good Design: An Analysis of 4 Sites</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Sarah Gibbons and Kelley Gordon
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">8 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="Using Color to Enhance Your Design" href="/articles/color-enhance-design/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">Using Color to Enhance Your Design</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Kelley Gordon
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">6 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="Why Does a Design Look Good?" href="/articles/why-does-design-look-good/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">Why Does a Design Look Good?</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Sarah Gibbons and Kelley Gordon
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">8 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="Testing Visual Design: A Comprehensive Guide" href="/articles/testing-visual-design/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">Testing Visual Design: A Comprehensive Guide</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Megan Chan
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">10 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="Visual Hierarchy in UX: Definition" href="/articles/visual-hierarchy-ux-definition/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">Visual Hierarchy in UX: Definition</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Kelley Gordon
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">6 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="tile ga-article-related-article" data-article-title="Skeuomorphism" href="/articles/skeuomorphism/?lm=good-visual-design&pt=article">
|
||
<p class="related-content-title">Skeuomorphism</p>
|
||
<p class="related-content-details">
|
||
|
||
|
||
<span class="related-content-authors body-small">
|
||
Megan Chan
|
||
</span>
|
||
|
||
·
|
||
<span class="related-content-duration body-small">4 min</span>
|
||
|
||
</p>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
|
||
|
||
|
||
<footer class="footer">
|
||
<section class="top-footer ds-wrapper">
|
||
<svg aria-hidden="true" width="239" height="65" viewBox="0 0 239 65" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#rebrand-25-logo" />
|
||
</svg>
|
||
<div class="newsletter">
|
||
<div class="newsletter-text">
|
||
<h2 class="subhead-s-500">Never miss an update</h2>
|
||
<p class="paragraph-s-400">Get weekly UX articles, videos, upcoming courses, and job openings straight to your inbox with our newsletter.</p>
|
||
</div>
|
||
|
||
<form class="form-field form-validated subscribe-form" action="https://nngroup.us4.list-manage.com/subscribe/post?u=538d934a891681a5d850bb4e5&id=7f29a2b335" method="post" name="mc-embedded-subscribe-form" novalidate>
|
||
<div class="subscribe-wrap" role="group" aria-label="Newsletter subscribe">
|
||
<label class="paragraph-s-400" for="newsletter-email">Email</label>
|
||
<span class="subscribe-divider" aria-hidden="true"></span>
|
||
<input name="email" type="email" class="newsletter-email paragraph-s-400" autocomplete="email" id="newsletter-email" required />
|
||
<button type="submit" name="subscribe" class="subscribe-btn label-s-600">Subscribe</button>
|
||
</div>
|
||
<div class="error-local label-xs-400"></div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section class="navigation ds-wrapper">
|
||
<div class="links-list">
|
||
<ul>
|
||
<li>
|
||
<h3 class="paragraph-m-700">Courses</h3>
|
||
<ul>
|
||
|
||
|
||
|
||
<li class="paragraph-s-400">
|
||
<a href="/courses/">Live Online Training Events</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/contents/train-your-team/group-discount-pricing/">Group-Discount Pricing</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/contents/train-your-team/private-team-training-ux-certification/">Private Team Training</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="paragraph-s-400">
|
||
<a href="/contents/self-paced-courses/">Self-Paced Courses</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h3 class="paragraph-m-700">Consulting</h3>
|
||
<ul>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/applied-workshops/">Intensive Applied Workshops</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/user-research/">Customized Research</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/expert-review/">Expert Review</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/keynote-speaking/">Keynote Speaking</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/user-testing/">User Testing</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/consulting/ux-maturity-assessment/">UX Maturity Assessment</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h3 class="paragraph-m-700">Help</h3>
|
||
<ul>
|
||
<li class="paragraph-s-400">
|
||
<a href="/terms-and-conditions/">Terms & Conditions</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/privacy-policy/">Privacy Policy</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/virtual-help">Live Course Tech Support</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/faqs/">FAQs</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h3 class="paragraph-m-700">Company</h3>
|
||
<ul>
|
||
<li class="paragraph-s-400">
|
||
<a href="/about/">About NNGroup</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/people/">People</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/news/">News & Careers</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="/about/contact/">Contact Us</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bottom-footer ds-wrapper">
|
||
<div class="copyright-rebrand">
|
||
<p class="paragraph-s-400 m-0">
|
||
Copyright © 1998-2026 Nielsen Norman Group, All Rights Reserved.
|
||
</p>
|
||
|
||
<ul class="legal-links paragraph-s-400 m-0">
|
||
<li>
|
||
<button id="cookie-preferences" class="cookie-button cky-banner-element paragraph-s-400">Cookie Preferences</button>
|
||
</li>
|
||
<li>
|
||
<a href="/cookie-declaration/">Cookie Declaration</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="follow-us">
|
||
<h2 class="subhead-s-500">Follow Us</h2>
|
||
<ul class="social">
|
||
<li class="paragraph-s-400">
|
||
<a href="https://www.youtube.com/channel/UC2oCugzU6W8-h95W7eBTUEg">Youtube</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://www.linkedin.com/company/nielsen-norman-group">LinkedIn</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://www.instagram.com/nngux">Instagram</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://www.threads.com/@nngux">Threads</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://bsky.app/profile/nngroupux.bsky.social">Bluesky</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://x.com/nngroup">X</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://www.facebook.com/nngux">Facebook</a>
|
||
</li>
|
||
<li class="paragraph-s-400">
|
||
<a href="https://podcasters.spotify.com/pod/show/nngroup">Spotify</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
|
||
<button class="back-to-top ds-button-medium ds-button-gray label-m-500">
|
||
Back to Top
|
||
<svg aria-hidden="true" width="16" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<use href="#icon-arrow" />
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://media.nngroup.com/static/js/output.c44aec5e0128.js" defer></script>
|
||
|
||
|
||
|
||
|
||
<script src="https://media.nngroup.com/static/js/article-detail.22e733ee040b.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|