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 оновчлол.
Төстэй хэв маяг
- Ui — царцсан цаасан дээрх клиник төлөвлөгөө
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- monopo saigon — Редакцийн нам гүм байдлын цаана шингэн, солонгорсон гэрэл тодорч байна - хайлсан гэрэлд хөвж буй монохром редакцийн галерей
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- Dub — Линкийн царцсан будааны цаасан удирдлагын самбар
- Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
- Ventriloc — Дулаан цаасан дээрх өгөгдлийн редакцийн ажиглалтын төв - дан улбар шар өнгийн хул нь монохром нарийвчлалыг онцолсон
- Duolingo — Цагаан цаасан дээрх тоглоомтой ангийн сахиус
- Stripe — Царцсан шилэн дээр индиго бэхээр бичсэн дансны дэвтэр
- Notion — Үдийн наран дор дулаахан цаасан дэвтэр
- Hyer Aviation — Илгэн цаасан дээр бүхээгт үдшийн бүрий. Цэлмэг үүрийн тэнгэр их биеийн хэмжээтэй сериф логотой нийлж, ганцхан дулаан шавар өнгө нь монохром хязгаарыг эвдэнэ.