Glossier
Нарны гэрэлтэй зураг авалт - цагаан цаас, хар бэх, нэг тод шар өнгийн чимэглэл
Гялгар өнгө нь дижитал гоо сайхны сэтгүүл шиг ажилладаг: цагаан, хар өнгийн бараг монохром зураг бөгөөд брэндийн лого болон үйлдэлд уриалсан цорын ганц тод шар өнгийн өргөлтөөр чимэглэгдсэн байдаг. Систем нь редакторын хувьд хязгаарлагдмал - том хэмжээтэй Apercu гарчиг, хангалттай текстийн зай, сэтгэл хөдлөлийн жингийн дийлэнх хэсгийг эзэлдэг бүтэн хуудастай амьдралын хэв маягийн гэрэл зураг - мөн гүйцэтгэлийн хувьд хэрэглээний шинж чанартай: хавтгай бүтээгдэхүүний картууд, нимгэн хүрээ, чимэглэл огт байхгүй. Шар бол хоёрдогч брэндийн өнгө биш; энэ бол БҮХ брэндийг бага хэмжээгээр хэрэглэдэг тул гадаад төрх бүр нь камерын гэрэл шиг мэдрэгддэг. Бусад бүх зүйл арын дэвсгэр дээр бүдгэрэх зориулалттай: төвийг сахисан өнгө нь дулаан саарал өнгөтэй, нарийн ичимхий өнгө, хүрээ нь нарийн, хэв маяг нь нягт, өтгөн байдаг. Үр дүн нь өөртөө итгэлтэй, даруухан, эвлэршгүй орчин үеийн мэдрэмж төрүүлдэг дэлгүүрийн витрина юм.
Хуудас нь босоо байрлалтай, бүтэн дэлгэцийн хэсгүүдийн цувралыг агуулсан бөгөөд тус бүрийг нь бие даасан редакцийн хэсэг болгон бүтээсэн. Үндсэн хэсэг нь хөвөгч цагаан давхаргатай (зүүн дээд талд), хуудасны доод хэсгийг бүхэлд нь эзэлсэн асар том шар лого бүхий бүтэн өргөнтэй зураг юм. Үндсэн хэсгийн доор хэсгүүд нь бүтэн дэлгэцийн зургууд болон тусдаа картуудын тор хооронд ээлжлэн байрлана. Ангилалуудыг (арьс арчилгаа/нүүр будалт) хоёр багана болгон хуваах нь харагдахуйц хил хязгааргүйгээр явагддаг - зөвхөн зургуудыг холбосон шугам нь тэдгээрийг тусгаарладаг. Бүтээгдэхүүний каталог нь #f7f7f7 зотон дээр дөрвөлжин картуудын дөрвөн баганатай тор ашигладаг. Навигаци нь дээд талын хоёрдогч зар сурталчилгааны зурвастай минималист самбар юм. Хэсгүүдийн хоорондох зай нэлээд том (64 пиксел) боловч хэсгүүдийн хоорондох шилжилт нь жигд байдаг - дулаан хөлөөс бусад тохиолдолд хуваагч эсвэл дэвсгэр өнгөний ээлжлэн солигдохгүй. Нийт хэмнэл нь: гэрэл зураг, текст, гэрэл зураг, тор, гэрэл зураг - загварын сэтгүүл эргүүлж байгаа мэт.
Гэрэл зураг бол давамгайлсан харааны хэл юм. Үзэх хэсэг бүхэлдээ амьдралын хэв маягийн зураг, хөрөг зургуудаар дүүрэн байдаг - дулаан алтан цагийн гэрэлтүүлэг, арьсны зөөлөн ойрын зураг, нарны хурц гэрэлд бүтээгдэхүүний сав барьсан гар. Гэрэл зургуудын өнгөний палитр нь дулаан бөгөөд ханаагүй: тоорын тэнгэр, терракотта арьсны өнгө, гүн далайн цэнхэр өнгө. Цагаан текст карт эсвэл шар логоноос бусад тохиолдолд зургууд нь бөөрөнхий булан, хүрээ, давхаргагүйгээр хуудасны бүх гадаргууг үргэлж эзэлдэг. Каталог карт дээрх бүтээгдэхүүний зургуудыг цэвэр цагаан, жигд гэрэлтүүлэгтэй, жигд дэвсгэр дээр авдаг. Зураг-текстийн харьцаа ойролцоогоор 70/30 байдаг - зургууд нь сэтгэл хөдлөл, текст, функцийг илэрхийлдэг. Зураг чимэглэлгүй, хийсвэр графикгүй, 3D дүрслэлгүй.
Палетт
Брэнд
- Glossier Yellow
#fff116— Шар өнгийг гоёл чимэглэлийн нарийн ширийн зүйлсийн хоёрдогч өргөлт болон бага ашиглагддаг хайлтын асуулгыг тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахын тулд үндсэн өнгө болгон ашиглаж болохгүй.
Төвийг сахисан
- Ink
#000000— Үндсэн текст, навигацийн холбоосууд, үндсэн текст, хөлийн текст, дүрс тэмдгийн тойм, нимгэн хүрээ; давамгайлсан хэв маяг болон бүтцийн өнгө. - Paper
#ffffff— Бүтээгдэхүүний картын гадаргуу, дүүргэх хэсэг, өргөгдсөн хавтан; овоолгын хамгийн тод гадаргуугийн түвшин. - Fog
#f7f7f7— Хуудасны зураг, хэсгийн дэвсгэр зураг, хуудсан дээрх зургуудын хоорондох шилжилт; вэбсайт бүхэлдээ байрладаг суурь гадаргуу. - Blush
#faf2f4— Доод талын дэвсгэр, зөөлөн дулаан хуваагч; нарийн ягаан-цагаан өнгө нь хуудасны доод хэсэгт дулаан мэдрэмж нэмнэ. - Mist
#f0f0f0— Анзааралгүй дэвсгэр үүсгэх, хэсгүүдийг ялгах зориулалттай хөнгөн тулгуур гадаргуу. Үүнийг үйлдэлд уриалахын үндсэн өнгө болгон ашиглаж болохгүй. - Ash
#e8e8e8— Оролтын талбарын хил хязгаар, дүрс тэмдгийн дэвсгэр, нимгэн тусгаарлагч шугам; карт болон маягтын элементүүдийн бүтцийн хилийн өнгө.
Типографи
12-оос 32 пиксел хүртэл · 5 алхам
- Apercu — солих: Inter · тоймууд 400, 500, 700 · Үндсэн фонтыг хэрэглэгчийн интерфэйс даяар ашигладаг - үндсэн текст нь 16px/400, навигаци болон тайлбар нь 12–14px/500, дэд гарчиг нь 20px/500, редакцийн гарчиг нь 32px/700. Apercu-ийн геометрийн, хүмүүнлэг дизайн нь брэндийг товчилсон, орчин үеийн хэв маягтай болгодог; бараг тэг үсгийн зай (0.002–0.003em) нь фонтыг агаартай эсвэл ээлтэй биш харин авсаархан, сэтгүүл шиг болгодог. 700 жин нь UI элементүүдэд биш, харин редакцийн дэлгэцийн элементүүдэд зориулагдсан байдаг.
- Apercu Mono — солих: JetBrains Mono or IBM Plex Mono · тоймууд 400 · Захиалгын мета өгөгдөл, мөрдөх дугаар, кодын хажууд байгаа шошгоны микро-хэрэглээний типографи; нэг зайтай хувилбар нь пропорциональ биеийн хэлбэрийн эсрэг техникийн бүтэц үүсгэдэг.
- GTStandard-M — солих: Inter · тоймууд 400 · GTStandard-M - Олборлосон өгөгдөлд олдсон боловч хиймэл оюун ухаанаар тайлбарлагдаагүй.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 0px |
| Картын радиус | 0px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг Glossier хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Lightship — Нээлттэй замын киноны диорама. Ойрын зайд байрлуулсан том ландшафтын зургуудаар чимэглэсэн дулаан цөцгий өнгийн галерейн хана, жааз дээр бараг харагдахгүй нимгэн хар үсэг, нугад асаж буй түүдэг гал мэт монохромыг эвдэж буй ганц тод улбар шар өнгийн аялга.
- Faire ES — бүлээн кремний бөөний каталог
- Adanola — Цагаан цаасан дээрх редакцийн лого дэвтэр. Цэвэр цагаан гадаргуу дээр хэвлэмэл болон гэрэл зургийг амьсгалж, фонтыг хар бэхээр будаж, брэндийн ерөнхий хэв маягийг тусгасан нарийн гарын үсэг бүхий sans-serif фонт (Favorit)-аар чимэглэсэн загварын зураг авалт.
- Oura Ring — Зөөлөн өдрийн гэрэлд умбасан тухтай овьёосны будаа хийх цех
- Stykka — Цагаан гэрэлд Скандинавын семинар – чимээгүй, гар урлалын үзэсгэлэнгийн танхим бөгөөд зөвхөн гэрэл зураг л дуу хоолойг нь татдаг.
- DJI — нэг цахилгаан цэнхэр өнгийн тодруулгатай сансрын хар өнгийн даавуу
- Altitude Beverages — Монохром сэтгүүлийн хуудас. Хөдөлгөөнгүй зургуудаас бусад бүх өнгөө алдсан загварын сэтгүүлийн хуудас гээд төсөөлөөд үз дээ - текст болон цагаан зай нь бүхэл бүтэн түүхийг өгүүлдэг.
- AATHER — Нээлттэй алга, ганц дөл - нам гүм байдалд агуулагдах нам гүм тансаг байдал
- Cowboy — Цасан цагаан шаазан орчинд байрлах Бельгийн дугуйн галерей. Царцсан гадаргуу, редакцийн материалд ашигласан том фонтууд, бараг чимэглэлгүй байдал нь дугуй болон түүний доторх зүйлсийг анхаарал татдаг үзэсгэлэнгийн танхим.
- Refero — Цагаан гантиг дээрх редакцийн зохион байгуулалт - хэвлэгчээр бүтээсэн бүтээгдэхүүний хуудас бөгөөд сериф гарчиг нь брэндийн дуудлагын хуудас бөгөөд бусад бүх зүйл анзаарагдахгүй байна.
- Face Formula — Скандинавын редакцийн хөрөг зураг. Тайван, сэтгүүлийн хэв маягийн зураг, загвар өмсөгчийн харц болон товчилсон сериф фонтоор бичсэн гарчиг нь сэрүүн, манантай дэвсгэр дээр өөрийнхөө төлөө өгүүлж байна.
- Shupatto — Цагаан гантиг дээр музейн үзмэрийн тавиур