Peak Design
Галерейн хана, хэсэгчлэн гэрэлтүүлэгтэй
Peak Design нь галерейн чанартай арилжааны туршлага юм: бараг монохром зураг бөгөөд редакцийн типографи болон бүтээгдэхүүний гэрэл зураг нь бүх ажлыг гүйцэтгэдэг. Систем нь тод цагаан гадаргууг гүн, бараг хар өнгийн самбаруудтай ээлжлэн байрлуулж, нэг талд нь налуу үсгийн сериф гарчиг, нөгөө талд нь бүтэн дэлгэцийн бүтээгдэхүүн эсвэл амьдралын хэв маягийн зургийг байрлуулсан гайхалтай хуваагдмал байрлалыг бий болгодог. Типографи нь брэндийн гол дуу хоолой юм: гарчгийн хувьд өндөр, товчилсон, гоёл чимэглэлийн сериф фонт (Exposure хэв маягаар), хэрэглэгчийн интерфэйсийн хувьд төвийг сахисан гротеск фонт (Geist), үсэг, хөмсөг, товчлуурын хувьд товчилсон sans-serif фонт (bryant)-тай хослуулсан. Интерфэйс нь цэвэр хэвээр байна: хроматик UI элементүүд, гоёл чимэглэлийн градиентууд, сүүдэр байхгүй - зөвхөн нарийн хүрээ, хоёр булангийн радиус (4 ба 8), зөвхөн хааяа онцлох зорилгоор ашигладаг ганц улаан өргөлт. Бүрэлдэхүүн хэсгүүд нь гоёл чимэглэлийн гэхээсээ илүү бодолтой харагдаж байна: нимгэн хуваагч, хавтгай бүтээгдэхүүний картууд, эм хэлбэртэй шүүлтүүрүүд, архитектурын тэмдэглэл мэт санагдах үл үзэгдэх товчлуурууд.
Бүтэн өргөнтэй хуудасны хэсгүүд нь цагаан болон бараг хар өнгийн хооронд ээлжлэн солигддог; хэсэг бүр нь харах цонхны бүхэл өргөний хэмжээг эзэлдэг бөгөөд хэсгийн түвшинд хамгийн их өргөний хязгаар байхгүй. Хэсгүүд доторх контент нь хамгийн ихдээ ~1440 пиксел өргөнтэй бөгөөд төвд байрладаг. Толгой хэсгийн зонхилох хэв маяг нь 50/50 хуваагдалтай: нэг талд нь текст блок (хайх + гарчиг + дэд текст + товчлуурууд), нөгөө талд нь бүрэн өргөнтэй бүтээгдэхүүн эсвэл амьдралын хэв маягийн зураг байрладаг. Нугалаасны доор бүтээгдэхүүний сүлжээ нь 24-32 пикселийн өргөн ус зайлуулах хоолойтой тэнцүү өргөнтэй бүтээгдэхүүний картын дөрвөн багана ашигладаг. Ангиллын шүүлтүүрийн самбарууд нь үндсэн навигацийн доор "эм" гэсэн хэвтээ эгнээнд байрладаг. Хэсгүүдийн хэмнэлийг хэсгүүдийн хооронд 80 пикселийн босоо доголтой цайвар/бараан судалтай ээлжлэн тодорхойлж, редакцийн сэтгүүлийн хэмнэлийг бий болгодог. Навигаци нь дээр нь нимгэн зар сурталчилгааны зурвас бүхий тогтмол дээд баар юм.
Харааны хэл нь бүтээгдэхүүний гэрэл зурагт давамгайлдаг: цүнх, бүс, камерны тоног төхөөрөмжийг өдөр тутмын амьдралын нөхцөлгүйгээр цэвэр цагаан дэвсгэр дээр гэрэл зураг авдаг бөгөөд гэрэлтүүлэг нь материалын бүтэц болон техник хангамжийн нарийн ширийн зүйлийг тодруулдаг. Өдөр тутмын зургууд зөвхөн бүтэн дэлгэцийн редакцийн хэсгүүдэд (жишээлбэл, тойрог хэлбэрээр камер барьсан гар) гарч ирдэг бөгөөд хуваасан самбарын нэг талд байрлах харах цонхны бүх өргөнийг эзэлдэг. Зургууд нь үндсэн зурагт булангийн радиусгүй (тэдгээр нь ирмэгүүдтэй ижил байна), картын зурагт булангийн радиусгүй. Функциональ UI дүрсээс өөр ямар ч чимэглэл, хийсвэр график, дүрсний чимэглэл байхгүй. Бүтээгдэхүүн бол гол анхаарал хандуулдаг зүйл юм - студийн чанартай гэрэл зургууд, тогтвортой өнцөг, тогтвортой гэрэлтүүлэг, тогтвортой цагаан дэвсгэртэй - харин UI нь дэвсгэр рүү бүдгэрч, объектууд өөрсдөө ярих боломжийг олгодог.
Палетт
Төвийг сахисан
- Carbon Ink
#1a211e— Үндсэн текст, бараан хажуугийн самбар, үндсэн текст, дүрс тэмдэг, цайвар гадаргуу дээрх жааз - гарчиг бүрийн суурь болж, хуваагдсан хэсгүүдийн бараан дэвсгэр хавтанг бүрдүүлдэг бараг хар өнгө. - Paper White
#ffffff— Анзааралгүй дэвсгэр үүсгэх, хэсгүүдийг ялгах зориулалттай хөнгөн тулгуур гадаргуу. Үүнийг үйлдэлд уриалахын үндсэн өнгө болгон ашиглаж болохгүй. - True Black
#000000— Цагаан дэвсгэр дээрх толгой хэсгийг дүүргэх, зарлалын мөр, хөлийн загвар, дүрсний бүрэн тойм зэрэг хамгийн их ялгаатай элементүүдийг загвар нь хамгийн тод шугам шаарддаг газруудад байрлуулсан. - Obsidian
#0c0c0c— Гүн самбарын гадаргуу болон зургийн давхарга - жинхэнэ хар өнгөнөөс арай зөөлөн, дэлгэцийн гадаргууг бүхэлд нь эзэлдэг бараан хэсгүүдэд ашигладаг бөгөөд хавтгай хар шиг хатуу боловч хатуу биш мэдрэгдэх ёстой. - Fog
#eef1f0— Анзааралгүй дэвсгэр үүсгэх, хэсгүүдийг ялгах зориулалттай хөнгөн тулгуур гадаргуу. Үүнийг үйлдэлд уриалахын үндсэн өнгө болгон ашиглаж болохгүй. - Mist
#e0e0e0— Хуваах шугамууд, идэвхгүй төлөвүүд, нарийн бүтцийн хуваагчид - цагаан зураг дээрх хэсгүүдийн хоорондох хил хязгаарыг тодорхойлсон дунд зэргийн цайвар саарал өнгө.
Типографи
14-өөс 80 пиксел хүртэл · 6 алхам
- Geist — солих: Inter · тоймууд 400, 600, 700 · Үндсэн текст, бүтээгдэхүүний гарчиг, тайлбар, маягтын талбарууд, холбоос текст болон хөл хэсгийн контент. Фонтын зузаан: Үндсэн текстэд 400, тодруулгад 600, бүтээгдэхүүний гарчиг болон чухал тэмдэглэлд 700. Төвийг сахисан Grotesque фонт нь Display Serif болон Condensed Sans фонтуудад брэндийн хэв маягийг тусгах боломжийг олгодог бол Geist нь функциональ байдал болон уншигдахуйц байдлыг хангадаг.
- Exposure-style serif (Exposure-10) — солих: Playfair Display · тоймууд 400 · Гарчиг болон гол гарчиг. Налуу сериф фонтоор хийсэн ганц жин (400) нь редакцийн нэр хүндийг бий болгодог - эдгээр үгс нь брэндийн өнгө аясыг тогтоож, хуудасны бүх өргөнийг хамарсан бараан өнгийн самбар дээр болон гол хэсгүүдийн эхэнд бага хэмжээгээр ашиглагддаг. Үсгийн зай багатай (-0.025em) нь том үсгийг хөнгөн биш харин хязгаарлагдмал харагдуулах боломжийг олгодог.
- Bryant-style condensed sans (bryant) — солих: Druk Wide · тоймууд 700 · Навигацийн шошго, ангиллын шүүлтүүрийн товчлуурууд, товчлуурын текст, "хөмсөг", хэсгийн шошго болон нэмэлт гарчгууд. Эерэг үсгийн зайтай шахагдсан том үсгүүд нь аж үйлдвэрийн, шошготой төстэй хэв маягийг бий болгодог - эдгээр үгс нь тодорхойлж, зааварчилдаг боловч хэзээ ч тайлбарладаггүй.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 24px |
| Товчлуурын радиус | 4px |
| Картын радиус | 8px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг Peak Design хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Arsenijs Fabrica — Редакцийн контентын төрөлхийн гоо үзэсгэлэн галерейн гэрлийн дор илэрч байна. Галерейн тод цагаан хана, монохром дэвсгэр дээр улбар шар өнгөөр анивчих ганц дулаан стробоскоп гэрэл, шилэн нимгэн үсэг, элбэг дэлбэг цагаан орон зай.
- 21 TSI — Час улаан хоосон орон зай, ганц дүрс – хэрэглэгчийн интерфэйс нь уур амьсгалд ууссан өндөр загварын редакцийн бүтээл
- Aevi Wellness — Скандинавын эмийн сангийн хэв маяг, жингүй фонт. Бүдэг саарал цэнхэр өнгийн аялга нь редакцийн материалын ерөнхий өнгө аясгүй, агаартай зохион байгуулалтыг эвддэг бөгөөд бүтээгдэхүүний зургуудыг дулаан цагаан дэвсгэр дээр нимгэн хүрээтэй ил захидлууд дээр давхарлан байрлуулсан байдаг.
- Palmer — Зөөлөн өдрийн гэрэлд керамик галерей - харилцан үйлчлэл нь ханатай явагддаг бөгөөд эд зүйлс нь урлаг юм.
- PLATFORM — Цагаан куб галерей анхаарлын төвд байна
- Assembly Coffee London — Харанхуй шарах зууханд байгаа нүүрс. Дулаан, бүдэг гэрэлтэй бүтээгдэхүүний зураг, курсортой сериф үсэг бүхий бараг хар өнгийн даавуу - шөнө дундын самиздатаар хэвлэсэн тусгай кофены цэсний мэдрэмжийг төрүүлдэг.
- ARTWORLD — Цагаан даавуун дээрх загварын сэтгүүлийн гарчиг
- Structured — Пластилин шиг цаасан дээрх Сэргэн мандалтын үеийн галерей
- Airbnb — Ганц шүрэн улаан хавчуургатай чимээгүй цагаан галерейн хана
- VISIONNAIRE — Цэвэр цагаан дэвсгэр дээрх гудамжны хувцасны редакцийн галерей. Брэнд нь хэвлэмэл лого ном шиг ажилладаг: хавтгай цагаан даавуу, тод хар бэх, бүтээгдэхүүн эсвэл логог харуулах өнгөт блок болгон ашигладаг ганц бүлээн тостой самбар.
- Letter — Агуулахаас гялалзсан эд өлгийн зүйлсийг харуулсан хувийн галерей. Галерейн өнгөт ханан дээрх хром баримлуудын дээгүүр серифийн гарчиг хөвдөг хар ханатай үзэсгэлэнгийн талбай.
- Ramp — Редакцийн санхүүгийн хэлтэс, ганц неон маркертай хар цагаан хуудсууд. Хэвлэлийн бараг монохром гадаргуу нь ганц тод ногоон зураас нь бүх харилцан үйлчлэлийг мөнгөний дохио болгон хувиргадаг.