Superhuman
алтан цагийн редакцийн самбар
Супер хүн нь редакцийн гэрэл зураг болон програм хангамжийн хэрэглэгчийн интерфэйсийн огтлолцол дээр байрладаг - дулаан, илгэн цаас шиг даавуу (хэзээ ч цэвэр цагаан биш) нь хүрэн улаан өнгийн брэндийн элементүүд болон тод ягаан өнгийн өргөлтийг хүрээлдэг. 460 фонтоор байрлуулсан гарчиг нь хашгирахаас илүү шивнэх нь бүтэн хуудастай киноны гэрэл зурагт хүнд ачааг үүрэх боломжийг олгодог бол тунгалаг бүтээгдэхүүний хэрэглэгчийн интерфэйсийн картууд нь дүрслэлийн дээгүүр шил шиг хөвдөг. Палитр нь ихэнхдээ тайван, редакцийн шинж чанартай хэвээр байна: цөцгий гадаргуу, нүүрсний текст, нарийн дулаан саарал хүрээ, элементүүдийн хоорондох зай ихтэй, брэндийн цэг таслалд зориулагдсан өнгө - ганц хүрэн улаан өнгийн уриалга, нил ягаан холбоос, цайвар голт бор өнгийн нэмэлт товчлуур. Систем нь хэрэглэгчийн интерфэйсийн гадаргуу дээрх хүчтэй сүүдэр, градиентаас санаатайгаар зайлсхийдэг; Гүнийг давхарлах эффектээр биш харин гарчигт давхарласан гэрэл зураг болон нарийн дэвсгэр бүдгэрүүлснээр олж авдаг.
Үндсэн элемент нь төвд байрлуулсан гарчиг (48-64 пиксел/460) болон дарсны дүрсээр дүүрэн нэг үйлдэлд уриалсан бүрэн өргөн гэрэл зураг бөгөөд зүүн ба баруун ирмэг дээр хөвөгч тунгалаг бүтээгдэхүүний UI картууд давхарлагдсан байна. Үндсэн элементийн доор цагаан судалтай лого зурвас (мөр бүрт 6 нүд, хамгийн их өргөн хязгаарлагдмал), дараа нь илгэн даавуун дээр цагаан картын гадаргуутай таб хэсэг байна. Хар оюу өнгийн судал нь хуудасны гуравны хоёр орчимд хэмнэлийг эвдэж, бүтэн өргөнтэй, хоёр багана (зүүн талд зураг, баруун талд текст) нь гүйлгэх үед цорын ганц өнгөний ялгааг бий болгодог. Дараа нь градиент агаар мандлын судал байна. Хэсгүүдийн хоорондох босоо зай нь 64-96 пиксел байна. Агуулгын хамгийн их өргөн нь ~1200 пиксел бөгөөд гол элемент болон бараан судал нь харах цонхны бүтэн өргөнийг хамарна. Навигаци нь бүдгэрсэн дэвсгэр бүхий нэг тогтмол толгой хэсэг юм; хажуугийн самбар байхгүй, мега цэс байхгүй. Доод хэсэг нь холбоосуудын олон баганын зохион байгуулалттай бүрэн өргөнтэй burgundy хуудас юм. Нийт хэмнэл нь: үндсэн кадр → тайван цагаан/цөцгий өнгийн агуулга → үндсэн дүрстэй бараан судал → агаар мандлын градиент → улаан хүрэн өнгийн хөл хэсэг, цайвар ба бараан судлуудыг ээлжлэн редакцийн хэмнэлийг бий болгоно.
Үндсэн харааны элемент нь кино зургийн гэрэл зураг юм: задгай тэнгэрийн эсрэг бүтэн өргөнтэй хөрөг нь гол цэг болж, хуудасны доод хэсэгт хоёр дахь агаар мандлын зурвас байрладаг. Зураг нь дулаан өнгө аястай, бага зэрэг бүдэг, профайлаар авсан нь алтан цагийг санагдуулж, корпорацийн мэдрэмжээс илүү редакторын мэдрэмжийг төрүүлдэг. Тунгалаг геометрийн тэгш өнцөгтүүд болон гар бичмэлүүдтэй бараан судал нь бодолд автсан хүний гэрэл зураг дээр давхарлагдсан байдаг - ганц зураг биш харин гадаргуугийн коллаж. Хэрэглэгчийн интерфэйсийг тусдаа дэлгэцийн агшин биш харин гэрэл зураг дээр шууд давхарласан хөвөгч шилэн карт хэлбэрээр харуулсан болно. Агаар мандлын градиент зурвасаас бусад тохиолдолд ямар ч хувьцааны чимэглэл, 3D дүрслэл, хийсвэр чимэглэлийн хэлбэр байхгүй. Дүрсүүд нь минималист монохром шугаман дүрсүүд бөгөөд ~16-20 пиксел өргөн, нэг өргөн нь 460 цэгийн текстийн жинтэй тохирч байна.
Палетт
Брэнд
- Midnight Wine
#421d24— Үндсэн үйлдлийн товчлуурууд, зар сурталчилгааны баннер болон хөл хэсэг нь улаан гэхээсээ илүү бэхтэй төстэй дулаан, бараг хар улаан өнгөтэй бөгөөд өнгөний палитрыг хэт хүчтэй биш харин ч илүү сайн зохицуулж байна. - Royal Violet
#714cb6— Нил ягаан өнгийг холбоос, шошго болон богино хэллэгийг тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй.
Төвийг сахисан
- Lilac Mist
#d4c7ff— Хоёрдогч гадаргуугийн дүүргэлт, гэрлийн дүрс, хий үзэгдэлтэй товчлуурын дэвсгэр нь бүгд брэндийн хэв маягийг илтгэх бүдэг ягаан өнгийг агуулсан бөгөөд өөртөө хэт их анхаарал татахгүйгээр. - Deep Lagoon
#0c4243— Үндсэн хүүрнэлийн элемент болгон ашигласан туузны бараан дэвсгэр нь систем дэх цорын ганц бараан гадаргуу бөгөөд давхарласан геометрийн хээтэй хосолсон байдаг. - Warm Parchment
#f2f0eb— Хуудасны ажлын гадаргуу нь давамгайлсан элемент юм; дулаан цөцгий өнгө нь цагаан өнгийг суурь болгон орлож, системд бүхэлд нь редакцийн дулаан мэдрэмж төрүүлдэг. - Soft Mist
#e3e3e2— Нарийн хүрээ, картын тойм, хуваах шугам—илгэн цаастай ууссан ч ирмэгийг нь тод тодорхойлсон дулаан, цайвар саарал өнгө. - Ink Charcoal
#292827— Үндсэн текст, гарчиг, дүрсний тойм - дулаан, бараг хар өнгө, цаасан дээр бэх шиг мэдрэгдэхээр хангалттай бор өнгөтэй, хэзээ ч хүйтэн байдаггүй #000 - Stone Gray
#666666— Хоёрдогч үндсэн текст, туслах текстүүд, тодорхой тайлбарууд - үндсэн тексттэй хэзээ ч өрсөлдөхгүйн тулд бага зэрэг ашиглагддаг дунд зэргийн саарал өнгийг ашиглана.
Типографи
12-оос 64 пиксел хүртэл · 8 алхам
- Super Sans VF — солих: Inter (closest open equivalent for variable weight range) · тоймууд 460, 500, 540, 600, 700 · Системийн бүх хэсэгт нэг фонт. Тэнхлэгийн хувьсагчид 460 (том гарчгийн бүх текстэд зориулсан гарын үсэгтэй, бага зэрэг тайрсан фонт)-аас 540 (тодруулсан үндсэн текст) болон 700 (жижиг, тод тайлбар) хүртэлх хүрээг хамардаг. Тусгайлан боловсруулсан VF нь 460 жинтэй гарчгийг санамсаргүй биш харин илүү санаатай харагдуулдаг - 48-64 пикселийн нягтралтай, үсэг хоорондын зай багатай үед "бага зэрэг тайрсан" эффектийг нимгэн биш харин өөртөө итгэлтэй гэж үздэг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 16px |
| Картын радиус | 16px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64-96px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Superhuman хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- AI for Business — Дулаан саарал өнгийн харгис үзүүлбэрийн танхим
- Jeton — Дулаан гантиг дээрх финтекийн тухай редакцийн нийтлэл
- Airtable — Төрөл бүрийн өнгөөр тэмдэглэгдсэн бүлгүүдтэй тухтай семинар
- Osmo — Саарал бетон дээрх Хөгжүүлэгчдийн музей
- Linktr — Редакцийн постерууд чихэр шиг давхарлан овоолсон байна. Вэбсайтыг өнгөт блокоор бүтээсэн бөгөөд кобальт цэнхэр хананы эсрэг тод ногоон гарчиг байрлуулсан бөгөөд улаан өнгийн талбайн дээгүүр цагаан эм хэлбэртэй навигацийн элементүүд хөвж байна.
- Outsource Consultants — Ясны цаасан дээрх том хэмжээтэй архитектурын хуудас. Индиго өнгийн ганцхан тод хэсэг нь дулаахан, хэвлэлийн хувьд максималист сүлжээг тасалдуулсан монографик гоо зүй.
- Streamtime — Мэдрэмжтэй бүтээлч сэтгэлгээний самбар - Дизайнерын скрапбукинг ширээ
- Switch-Lit — Цөцгийтэй цаасан дээр бэхээр хэвлэсэн редакцийн тор
- HubSpot — Дулаан цөцгийтэй цаасан өнгөтэй, ганц улбар шар өнгийн аялгатай. HubSpot нь зузаан цаасан дээр хэвлэгдсэн дизайнерын сэтгүүлтэй төстэй - сериф гарчиг, дулаан цөцгийтэй хуудас, зөвхөн хамгийн чухал зүйлийг онцолсон ганц галт улбар шар өнгийн аялга.
- Granola — Дулаан илгэн дээрх тэмдэглэлүүд—Гранола нь нарны гэрэлд ширээн дээр нээгдсэн элэгдсэн Молескин дэвтэр шиг уншигддаг: сериф гарчиг нь бат бөх мэдрэмж төрүүлдэг, ургамлын гаралтай бэх шиг органик ногоон өнгө аястай, картын захад гараар бичсэн тэмдэглэлтэй төстэй нарийн шугамууд байдаг.
- Secure — Зөөлөн өдрийн гэрэлд Европын кафед болсон яриа нь видео дуудлагын дулаан, загварлаг хувилбар бөгөөд сериф гарчиг нь технологийн бүтээгдэхүүний хуудас гэхээсээ илүү сэтгүүлийн нийтлэл шиг уншигддаг.
- Mockups made easy — Цагаан цаасан дээрх редакцийн дизайны студи