IKEA
задалсан хэлбэрээр наранд гэрэлтсэн Шведийн тавилгын үзэсгэлэнгийн танхим
IKEA-ийн интерфэйс нь өндөр тодосгогчтой редакцийн тархалт шиг харагдаж байна: дулаан цагаан дэвсгэр дээр бараг хар өнгийн фонт, үйлдэлд дуудах бүс болгон ашигладаг хавтгай шар өнгийн самбараар нэмэлт хийгдсэн. Систем нь зориудаар минималист - ердөө хоёр жинтэй (400 ба 700) нэг өөрчлөн тохируулсан sans-serif фонт (Noto IKEA), бүрэлдэхүүн хэсэг бүрийн хувьд нэг булангийн радиус, сүүдэр эсвэл градиент байхгүй. Энэхүү авсаархан байдал нь бүтцийн шинж чанартай бөгөөд минималист чиг хандлага биш юм: сөрөг үсгийн зай (гарчигт -0.029em, үндсэн хэсэгт -0.027em) нь 13px шошгонд ч архитектурын мэдрэмжийг өгдөг. Картууд нь том бөгөөд медиа контент дээр төвлөрсөн бөгөөд унших чадварыг сайжруулахын тулд градиентээс хар хүртэлх текст давхаргатай том хоёр баганатай блокуудад байрлуулсан. Шар фонт #ffdb00 нь интерфэйсийн бүх ажлыг хийдэг - энэ нь чимэглэдэггүй, зүгээр л идэвхжүүлдэг.
Ойролцоогоор 1440 пикселээр хязгаарлагдсан төвлөрсөн контент контейнер бүхий бүрэн өргөнтэй дизайн. Навигаци нь энгийн, наалддаггүй дээд мөр юм. Хуудсыг ойролцоогоор 80 пикселийн зайтай босоо байдлаар давхарласан хэвтээ картуудаас бүтээсэн. "Баатар" байрлал нь хуваагдсан байрлал юм - 2/3 медиа карт (зураг) + 1/3 үйлдэл хийхийг уриалсан шар карт. Хуудасны үндсэн хэсэг нь хоёр баганатай картын торыг ашигладаг бөгөөд зураг болон текстийн блокуудыг ээлжлэн байрлуулдаг. Агуулгын нягтрал нь өргөн цар хүрээтэй, хэзээ ч авсаархан биш. Картууд нь том хэмжээтэй (ойролцоогоор хамгийн багадаа 600x400 пиксел) бөгөөд өгөөмөр зөөлөвчтэй. "Цаг хугацааны шугам/Түүх" хэсэг нь торыг олон тоогоор хуваадаг. Хажуугийн самбар, мега цэс, нарийн төвөгтэй навигацийн архитектур байхгүй.
Дүрслэх хэл нь голчлон бүтээгдэхүүн болон амьдралын хэв маягийн гэрэл зураг юм. Засвар: тод, байгалийн гэрэлтэй, дулаахан Скандинавын интерьерүүд нь студийн цагаан өнгө биш, харин амьд мэдрэмж төрүүлдэг. Хүмүүс бүтээгдэхүүнтэй харьцах (барих, угсрах, ашиглах) хэсгүүдэд гарч ирдэг. Зураг нь үргэлж картын бүх өргөнийг эзэлдэг бөгөөд органик хэлбэрт хэзээ ч тайрдаггүй. Тексттэй картын доод хэсэгт градиент хар давхаргууд гарч ирдэг. Хавтгай чимэглэлийг хааяа онцолсон байдаг (жишээлбэл, оюу, ногоон, улбар шар өнгийн соёлын дүрс тэмдэг бүхий Германы газрын зураг). Гэрэл зургуудыг редакцийн хэв маягаар хийсэн: гялгар фото эффектгүй, хэт загварлаг өнгөний залруулгагүй.
Палетт
Брэнд
- IKEA Yellow
#ffdb00— Үйлдэлд уриалгыг бөглөх гол элементүүд, онцлох зурагтай картуудын дэвсгэр зураг, үндсэн цонхон дахь өргөлтийн самбарууд - системийн өвөрмөц өнгөт элемент.
Төвийг сахисан
- Ink Black
#111111— Үндсэн текст, үндсэн текст, гарчиг, үндсэн хүрээ (851 удаагийн тохиолдол), дүрс тэмдгийн тойм. - Pure White
#ffffff— Хуудасны дэвсгэр, картын гадаргуу, навигацийн дэвсгэр, бараан дэвсгэр дээр товчлуурын текст. - Warm White
#fffefb— Товчлуур болон ил захидлын хувьд бага зэрэг өтгөн өнгө нь цэвэр цагаанаас арай дулаан бөгөөд дижитал хүйтэн мэдрэмжийг арилгана. - Steel Gray
#818181— Хоёрдогч текст, хаалттай хүрээ, идэвхгүй дүрс тэмдгийн төлөвүүд - True Black
#000000— SVG дүрс дүүргэлт, оролтын талбарын хил хязгаар, хамгийн их тодосголт шаардлагатай гүн хар өргөлт. - Link Blue
#0159a3— Навигаци болон үндсэн холбоосуудад өргөн хэрэглэгддэг текстийн холбоосын өнгө нь систем дэх цорын ганц цэнхэр өнгө юм.
Типографи
13-аас 51 пиксел хүртэл · 5 алхам
- Noto IKEA — солих: Inter · тоймууд 400, 700 · Ашигласан цорын ганц фонт нь IKEA-ийн гарын үсэгтэй Noto юм. Хоёр жинтэй систем (400 энгийн, 700 тод) нь зориудаар хязгаарлагдсан: налуу, дунд эсвэл хөнгөн жингүй. 700 цэгийн гарчиг, 36–51 пикселийн нягтрал нь брэндийн бүхэл бүтэн хэв маягийг илэрхийлдэг; 16 пикселийн үндсэн хэсэг нь төвийг сахисан хэвээр байна. Хэмжээ нэмэгдэхийн хэрээр үсгийн зай багасч, гарчиг нь товч бөгөөд архитектурын мэдрэмжийг төрүүлдэг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 24px |
| Товчлуурын радиус | 8px |
| Картын радиус | 8px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг IKEA хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- MindMarket — Тослог цаасан дээр бичсэн тухтай үлгэрийн ном - нарны гэрэлд норсон, наалт шиг зөөлөн гадаргуу дээр том Интер гарчиг болон хайчилж авсан цаасан дүрүүд зэрэгцэн орших найрсаг редакцийн зураг.
- Lamborghini — Үзэсгэлэнгийн танхимд, гэрлийн доор хар өнгийн кузов - нэг шар машин
- amp — Сэрүүн цагаан дэвсгэр дээр дулаан улбар шар өнгө. Энэхүү загвар нь наранд гэрэлтсэн мансардад авсан дээд зэрэглэлийн фитнесс бүтээгдэхүүнийг санагдуулж байна: нэг зүйл, нэг өргөлт, бүх ажлыг хийдэг нэг өөртөө итгэлтэй фонт.
- LUNCH — дулаан илгэн дээрх хилэн индэр
- Microsoft — Жижиглэнгийн каталог нь өвөрмөц цэнхэр өнгийг ашигладаг - цагаан үзэсгэлэнгийн танхимын шалан дээр дөрвөлжин лого байгаа бөгөөд дизайны бүх элемент нь цэнхэр өнгөтэй байна гэж төсөөлөөд үз дээ.
- Vibrants — Цагаан гантиг дээрх Skyborne эмийн сан - хар хөх бэх нь зуурмаг, солонгон спектр нь эм юм
- Isla Beauty — Мэс заслын улаан өнгөний чимэглэлтэй цөцгий шиг эмийн сангийн хэв маяг - дулаан илгэн хана, хуван өнгийн шил, шошго бүр дээр ганц улаан тамга байгааг бодоорой.
- Swap — Гаа редакцийн галерей: Тод шохойн өнгийн чимэглэл болон нарийн сериф бүхий өрөөнд цайвар мэргэн өнгийн сүүдэр
- Cursor — Утаатай нүүрсээр гэрэлтдэг тухтай илгэн цаасны цех
- Structured — Пластилин шиг цаасан дээрх Сэргэн мандалтын үеийн галерей
- Apple (España) — Зөөлөн өдрийн гэрэлд музейн галерей нь ганцхан, сэтгэл татам, жингүй цагаан орон зай бөгөөд үзмэр бүрийг цайвар өнгийн хананы эсрэг прожектороор гэрэлтүүлдэг.
- Amplemarket — Наранд шарсан ажлын байр нь конфеттигээр хучигдсан