Superlist
Шүрэн цогтой шөнийн ажлын байр - чимээгүй хаш маягийн аппликейшн гадаргуу бөгөөд ганцхан дулаан улбар шар оч нь үйлдэл бүрийг дохио өгдөг
Superlist нь шөнө дундын нил ягаан өнгөөр бүтээмжийн хэлийг ашигладаг: гүн хаш, цорын ганц үндсэн өнгө болгон дулаан шүрэн өнгө, бүхэл бүтэн уур амьсгалыг буулгасан том санс-сериф гарчиг. Интерфэйс нь шөнө оройн төвлөрсөн ажлын мэдрэмжийг төрүүлдэг - чимээгүй, давхаргатай, өөртөө итгэлтэй, өнгийг зөвхөн үйлдэлд уриалга, идэвхтэй төлөв байдал, гол цэгүүдэд функциональ цэг таслал болгон ашигладаг. Гадаргууг нил ягаан өнгийн далд өнгөөр (#181824 → #26253b) нарийн бараан өнгөөр давхарласан бөгөөд гүн нь ариутгасан биш харин дулаан мэдрэгдэхийн тулд цэвэр хар өнгөнөөс зайлсхийдэг. Бүрэлдэхүүн хэсгүүд нь өргөн бөөрөнхий хэлбэртэй (20 пикселийн карт, эмийн товчлуур), зөөлөн сүүдэртэй бөгөөд нягт торны оронд 10-16 пикселийн тухтай зайгаар "амьсгалах" боломжийг олгодог. Гарчгийн дуу хоолой бол бүх зүйл юм: 70-88 пикселийн хэмжээтэй, -0.02em нягт үсгийн зайтай 600 цэгийн жин нь текстийг UI гэхээсээ илүү хэвлэлийн гэж үздэг - энэ нь SaaS-ээс илүү редакцийн хуулбартай ойр байдаг.
Харанхуй хэсгүүд нь хуудасны бүх өргөнийг хамарсан бөгөөд төвлөрсөн, хамгийн их өргөнтэй контентын контейнеруудтай. Үндсэн хэсэг нь босоо байдлаар төвлөрсөн бөгөөд гарчиг, дэд текст, үйлдэлд уриалга (CTA) агуулсан бөгөөд дараа нь дараагийн хэсгийг давхцуулсан том бүтээгдэхүүний дэлгэцийн агшин байна. Дараагийн хэсгүүд нь төвлөрсөн текст блокууд болон картын торнуудын хооронд ээлжлэн байрладаг. Тойм хэсэгт тойм картууд болон 16 ус зайлуулах хоолой бүхий гурван баганатай тор ашигладаг. Навигаци нь зүүн талд лого, баруун талд төвлөрсөн холбоосууд болон нэвтрэх үйлдэл бүхий нэг дээд талын мөр юм - тогтмол хажуугийн самбар эсвэл мега цэс байхгүй. Хэсгүүдийн хоорондох ус зайлуулах хоолойнууд нь өгөөмөр (16 ус зайлуулах хоолой) бөгөөд нягт бүтээгдэхүүний торноос илүү өргөн, редакцийн хэмнэлийг бий болгодог.
Харааны орон зайд бүтээгдэхүүний дэлгэцийн агшин давамгайлдаг - аппликейшны бодит интерфэйсийг харуулсан бөөрөнхий булантай том хүрээ нь үндсэн болон хоёрдогч хэсгүүдийг дүүргэдэг. Зураг нь хамгийн бага бөгөөд зөвхөн хэрэглэгчийн аватар эсвэл апп доторх медиагийн урьдчилсан харагдац болгон ашигладаг (жишээлбэл, бүтээгдэхүүний загварын баруун самбар дахь концертын зураг). Итгэмжлэлийн самбар дээрх лого нь хавтгай, бүдэг цагаан текст тэмдэг юм. Чимэглэлийн чимэглэл, хийсвэр график, 3D дүрслэл байхгүй. Харааны стратеги нь бүтээгдэхүүнийг масштабаар харуулах, хэвлэлт нь сэтгэл хөдлөлийн ажлыг хийх, шүрэн өнгийг цорын ганц өргөлтийн өнгө болгон ашиглах явдал юм.
Палетт
Брэнд
- Coral Ember
#ff4a36— Улбар шар өнгийг гоёл чимэглэлийн нарийн ширийн зүйлсийн хоёрдогч өргөлт болон ховор тохиолддог дохиог тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй.
Төвийг сахисан
- Aubergine Canvas
#181824— Хуудасны дэвсгэр хэсэг болох гол зураг нь цэвэр хар өнгийг орлосон дулаан, бараан өнгө бөгөөд хэрэглэгчийн интерфэйсийг хавтгай биш харин давхарласан харагдуулдаг. - Elevated Plum
#26253b— Картын гадаргуу, оролтын талбарууд, навигацийн контейнерууд—үзэгдэх хил хязгааргүйгээр гүн үүсгэх нь зотон цааснаас нэг алхам хялбар. - Pure White
#ffffff— Үндсэн гарчиг, товчлуурын текст, дүрсний тоймууд - бараан өнгийн зураг дээрх хамгийн их ялгаатай байдал. - Fog Text
#696f81— Үндсэн текст, хоёрдогч гарчиг, бүдэг хүрээ нь бүгд хаш өнгийн дэвсгэр дээр уншихад эвтэйхэн байхын тулд 7:1 харьцаатай. - Ash Text
#8e8da0— Хоёрдогч UI элементүүд, хуваагч болон дуугүй шошгоны хувьд төвийг сахисан өнгө дэмжигддэг. Үүнийг үйлдэл хийх дуудлагын үндсэн өнгө болгон ашиглаж болохгүй. - Mist Highlight
#a3a3a7— Нарийн хүрээ, хуваагч болон идэвхгүй навигацийн элементүүд нь зотон даавууны эсрэг тод харагдах нарийн төвийг сахисан өнгө аясыг бий болгодог.
Типографи
12-оос 88 пиксел хүртэл · 9 алхам
- sans-serif — солих: Inter · тоймууд 400 · sans-serif - гаргаж авсан өгөгдөлд байдаг боловч хиймэл оюун ухаанаар тайлбарлагдаагүй.
- Haffer XH SemiBold — солих: Inter Tight · тоймууд 400, 600 · Дэлгэц болон гарчгийн үндсэн фонт. Үүнийг үсгийн хоорондох зай -0.02em, жин нь 600 баатрын гарчгийн хувьд 70–88 пикселийн хэмжээтэйгээр ашигладаг. Нарийн үсгийн зай болон том үсгийн өндөр нь гарчгийг редакцийн жинтэй болгож, бараан интерфэйсийг хянах самбараас илүү сэтгүүлийн хавтас шиг харагдуулдаг. Тод жинтэй Inter Tight эсвэл General Sans-аар солино уу.
- Jersey 10 — солих: Anybody · тоймууд 400 · Тоон болон тодруулгад зориулсан том хэмжээтэй, гоёл чимэглэлийн фонт. Маш том хэмжээтэй фонтуудад үсгийн өргөлт үүсгэхэд бага хэмжээгээр ашиглагддаг. Anybody эсвэл Cabinet Grotesk фонтоор сольж болно.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 10-16px |
| Товчлуурын радиус | 100px |
| Картын радиус | 20px |
| Сүүдэр | зөөлөн сүүдэр |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Superlist хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- DNA — Бөөмийн линзээр харсан шөнө дундын ажиглалтын төв
- Abetterlou — Эмээлийн арьсан дээрх оч - Гүн кофе шиг хар дэвсгэр дээр гэрэлтсэн дулаан, өтгөн фонт, хуудсан дээр халуун металл шиг мэдрэгдэх хув алтан шаргал өнгийн товчнууд.
- Galileo-ft — Цахилгаан цэнхэр дохиотой гүний сансрын командлалын тавцан
- Decide AI — Шөнө дундын ажиглалтын төв - гаа дохио
- Redis Agency — Ажлын бус цагаар ажилладаг редакцийн цех нь харанхуй газар бөгөөд брэндийн бүх ажлыг сериф фонт болон ганц улаан луувангаар хийдэг.
- Spellbook — Шөнө дундын шүүхийн танхим шүрэн бэхээр гэрэлтсэн - зөвхөн дулаан улбар шар үзэгний цохилт л сонсогддог харанхуй редакцийн гадаргуу
- Linear — шөнө дундын нарийвчлалтай багаж хэрэгсэл
- Origin Financial — Чимээгүй тансаг байдлын шөнө дундын галерей. Том сериф фонтууд болон хэдэн гэрэлтсэн өнгийн самбарууд нь санхүү бол нямбайлан боловсруулсан урлагийн бүтээл гэсэн мэдрэмжийг төрүүлдэг нам гүм, бараг харанхуй өрөө.
- Hyperstudio — Зураг нь обсидиан өнгөөр зурагдсан. Текст болон нарийн шугамууд нь цэвэр хар цагаан зайг хүрээлж, хааяа алтан луужингийн тэмдэгнүүд замыг заана.
- Air — "Шөнө дундын тэнгэрийг шилээр нэвтлэн" баримал
- Raycast — Шөнө дундын командлалын төв, Корал Неон
- dope.security — Нил ягаан өнгийн гэрэлт цамхагтай шөнө дундын терминал