Apple
Ганц цэнхэр унтраалгатай цагаан өрөө
Apple-ийн дизайн бол хязгаарлалтын загвар юм: бараг цагаан өнгийн даавуу, өргөн цагаан зай, үйлдэл бүрийг зориудаар мэдрүүлдэг ганц тод цэнхэр өнгийн өргөлт. Гол анхаарал нь хэвлэмэл зураг юм - хэмжээ нэмэгдэх тусам багасдаг сөрөг үсгийн зайтай SF Pro нь хэт хүнд биш харин архитектурын тод байдлыг өгдөг. Бүтээгдэхүүн бол дизайн юм: том бүтээгдэхүүний зураг, амьдралын хэв маягийн зургууд давамгайлж, хром элементүүд нь нимгэн хүрээ, тунгалаг навигаци, нарийн шугамууд болж хувирдаг. Хэсгүүд нь цайвар саарал дэвсгэр дээр ээлжлэн солигддог бөгөөд сурталчилгааны материалын бүрэн өнгийн блокууд нь гоёл чимэглэлийн элементүүдийн оронд масштабын өөрчлөлтөөр хэмнэлийг бий болгодог.
Хуудасны зохион байгуулалт нь тогтмол дээд контейнерийн өргөнгүй, бүрэн өргөнтэй хуудас юм - хэсгүүд нь ирмэгээс ирмэг хүртэл сунаж, текст блокууд нь ойролцоогоор 980 пикселийн дотор төвлөрсөн байна. Навигаци нь гүйлгэх дээр гарч ирэх бүтээгдэхүүн бүрийн нэмэлт дэд хавтастай ганц, тогтмол дэлхийн мөр юм. Үндсэн зохион байгуулалт нь үргэлж төвлөрсөн байдаг: том бүтээгдэхүүний нэр, нэг мөртэй уриа лоозон, хоёр товчлуур, дараа нь үлдсэн харах цонхыг дүүргэдэг бүтээгдэхүүний зураг. Хэсгүүдийг босоо байдлаар өгөөмөр босоо хэмнэлтэй (хэсгүүдийн хооронд 64 пиксел+), #f5f5f7 болон өнгөт дэвсгэрүүдээр ээлжлэн байрлуулсан байна. Доод хуудас нь бүрэн өргөнтэй үйлчилгээний картуудын (Apple TV+, Fitness+, Music, Arcade) нэг хэвтээ эгнээ бөгөөд тус бүр нь давхарласан текст болон товчлууртай зургийн блок юм. Хажуугийн мөр байхгүй, олон баганын контентын зохион байгуулалт байхгүй, тэгш бус найрлага байхгүй - бүх зүйл төвлөрсөн, давхарласан, тэгш хэмтэй байна.
Гэрэл зураг бол давамгайлсан харааны хэл юм. Бүтээгдэхүүний зургийг цэвэр цагаан эсвэл зөөлөн саарал дэвсгэр дээр, ямар ч нөхцөлгүйгээр авдаг - төхөөрөмж бол од бөгөөд тусгаарлагдсан, гэрэлтдэг. Амьдралын хэв маягийн зургуудыг бүрэн өргөн баннер хэлбэрээр, ихэвчлэн нягт тайрсан объектуудтай харуулдаг. Өнгөний градиент (пастел цэнхэр, ягаан, ногоон) нь бүтээгдэхүүний хэсгүүдийн дэвсгэр болж үйлчилдэг бөгөөд чимэглэл биш юм. Дүрс бичлэг нь минималист бөгөөд шугаман дээр суурилсан, 1-2 пикселийн зузаантай, тексттэй ижил саарал өнгөтэй. Бүтээгдэхүүний зургуудаас бусад тохиолдолд чимэглэл, хийсвэр график, 3D дүрслэл байхгүй.
Палетт
Брэнд
- Apple Blue
#0071e3— Дүүргэсэн үйлдлийн товчлуурууд, сонгосон төлөвүүд - гадаад төрхийг утга учиртай болгохын тулд бага хэмжээгээр ашигладаг цорын ганц интерактив хроматик өнгө. - Link Blue
#0066cc— Тодруулсан үйлдлийн хүрээ, суулгагдсан холбоосууд - дүүргэсэн таблет хэтэрхий гялгар байх үед Apple Blue-г ашигласнаас илүү ханасан өнгө. - Signal Blue
#2997ff— Чимэглэлийн хүрээ, зургийн тойм, дүрс тэмдгийн хүрээ - систем дэх хамгийн цайвар цэнхэр өнгө бөгөөд хэрэглэгчийн харилцан үйлчлэлд бус харин агаар мандалд ашиглагддаг.
Төвийг сахисан
- Carbon
#1d1d1f— Үндсэн текст, гарчгийн хүрээ, навигацийн шугам, картын хүрээ - зонхилох бэхний өнгө нь бараг хар өнгөтэй бөгөөд бага зэрэг дулаан өнгө аястай. - Frost
#f5f5f7— Хуудасны зураг, үндсэн текстийн дэвсгэр болон хөлийн гадаргуу нь Apple-ийн өвөрмөц цайвар саарал өнгөтэй бөгөөд цэвэр цагаанаас арай хүйтэн юм. - Ice
#f4f8fb— Илэрхийлэм гадаргуугийн дүүргэлт, нарийн өнгөнүүд, бараан дэвсгэр дээрх товчлуурын текст—энэ хэсгийг онцгой харагдуулахгүйгээр сэргээж өгдөг нарийн цэнхэр өнгө. - Smoke
#333333— Хоёрдогч текст, навигацийн дүүргэлт, товчлуурын хүрээ - Дунд зэргийн саарал өнгөнөөс илүү тод өнгө шаарддаг хүрээ болон дүрс тэмдгүүдэд зориулсан олон талын төвийг сахисан өнгө. - Graphite
#474747— Навигацийн текст, навигацийн хил хязгаар, холбоосын хил хязгаар - элементийн шатлалд Нүүрстөрөгч ба Утааны хооронд завсрын байрлалыг эзэлдэг. - Ash
#707070— Доод хэсгийн текст, жагсаалтын хүрээ, навигацийн хүрээ, дуугүй үндсэн текст - Байршуулах шаардлагатай боловч тод харагдахгүй контентын хувьд дунд зэргийн саарал өнгө.
Типографи
12-оос 56 пиксел хүртэл · 8 алхам
- SF Pro Display — солих: Inter · тоймууд 400, 600, 700 · Гарчиг болон том текст—40 пикселээс дээш хэмжээтэй нь илүү нарийхан диафрагм болон илүү хүчтэй сөрөг хяналтыг хангахын тулд дэлгэцийн форматыг ашигладаг; 700 нь зар сурталчилгааны зохион байгуулалтад, 400 нь редакцийн контент дахь бүтээгдэхүүний нэрэнд зориулагдсан.
- SF Pro Text — солих: Inter · тоймууд 300, 400, 600 · Үндсэн текст, навигаци, товчлуурууд, дэд гарчгууд — ажиллах фонт; Үндсэн текстэд 400, дэд гарчиг болон мэргэшсэн шошгод 300, навигацийн элементүүд болон товчлуурын текстэд 600; сөрөг үсгийн зай нь хэмжээтэй пропорциональ байдлаар буурдаг (-0.022em-ээс 12px хүртэл -0.01em-ээс 44px хүртэл).
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 12px |
| Товчлуурын радиус | 980px |
| Картын радиус | 8px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг Apple хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Studio — Хөдөлгөөнтэй галерейн хана. Дэлгэц бүр нь хэвлэлийн материал болон давхцаж буй бүтээлч бүтээлүүд анхаарал татахын тулд өрсөлдөж буй чимээгүй, саарал үзэсгэлэнгийн гадаргууг илэрхийлдэг.
- Mollie — Ноолуурын лангуу, бараан өнгийн дэвтэр. Хар текстийн эргэн тойронд редакцийн дизайн хийхэд хангалттай цагаан зай үлдээгээд, бүтээгдэхүүнтэй холбоотой санаануудыг бүлээн тос, эспрессо бор шар айраг, бодит төлбөрийн аргуудын хүрэлцэхүйц зургуудаар бататга.
- Basis Theory — Дизайн студи дэх төлбөрийн терминалууд. Цагаан техникийн цаас, давхарласан тунгалаг гүйлгээний давхаргууд болон ганц оюу өнгийн хяналтын элемент нь харааны чиглэлийг тодорхойлдог.
- CleanShot X — Цэнхэр гэрэлтэй ширээний компьютертэй студи. Авсаархан хар текстийн эргэн тойронд тайван цагаан зай үүсгээд, дараа нь баялаг цэнхэр удирдлага болон давхарласан Mac бүтээгдэхүүний зургуудыг гол байранд нь тавь.
- Modern Treasury — График цаасан дээрх төрийн сангийн дэвтэр. Чимээгүй, цагаан үйл ажиллагааны хуудастай төстэй хуудсуудыг үүсгэ, тэнд мөнгөн гүйлгээг нарийн шугам, шошготой зангилаа, нарийн, далд хяналтаар харуул.
- Basha-Franklin — Цагаан өнгийн ялтсан доор байрлах галерейн тор. Хэвлэмэл архитектурын портфолио шиг харагдах гэрэл зургууд дээр үндэслэсэн дулаан #f4ede6 өнгө, нарийн хар бүтэц, тэгш бус багана ашиглана уу.
- Bajgart Office — Редакцийн галерейн хана. Хром бүрсэн интерфэйсийн элементүүдээс илүү нарийн сериф фонтууд болон портфолио хэсгүүд нь илүү их харагдах жинтэй байх том цагаан зайг ашиглаарай.
- Heptabase — Нарны гэрэлтэй ширээ. Дулаан, цаас шиг гадаргуу, нүүрсний өнгөтэй удирдлага, судалгааны зориулалттай хөвөгч цонхнууд нь програм хангамжийн удирдлагын самбараас илүү зохион байгуулалттай ажлын орон зай мэт мэдрэмжийг төрүүлдэг.
- Bejamas — Хар шилээр дамжин өнгөрдөг хүчиллэг шохойн унтлагын хувцас. Бүдэг ногоон гэрлийн судал гадаргуу дээр огтлолцсон хар өнгийн самбараар тасалдсан тайван, цайвар саарал өнгийн редакцийн хуудсуудыг бүтээгээрэй.
- Baba — Улаан нарны гэрэлд анхаарал халамж тавих тэмдэглэл. Хүмүүсийн зургийг сэтгэл хөдлөлийн төв болгон ашиглан дотно цагаан, ягаан, цөцгий өнгийн мэдээллийн гадаргууг тойруулан өргөн улаан судал үүсгээрэй.
- Grafana Labs — Нар мандах дохиоллын станцын удирдлагын өрөө. Чимээгүй саарал цагаан ажлын орон зай нь өргөн, дөрвөн өнгийн тэнгэрийн хаяаны градиент болон нарийн цэнхэр интерфэйсийн дохионуудтай хосолсон.
- Kagi — Тусдаа уншлагын өрөө. Тод графит текстийн эргэн тойронд задгай цагаан зай гаргаж, нарийн нил ягаан өнгийн өргөлт болон дулаан пастел гадаргууг ашиглан амар амгаланг эвдээрэй.