Телеграм, WhatsApp+380637610482
Валерий Данюк
Валерий ДанюкхөгжүүлэгчБизнест зориулсан хиймэл оюун ухааны хэрэгслүүдийг хөгжүүлэх. Өндөр чанартай. Боломжийн үнэтэй.Telegram руу бичих
Allbirds — энэ хэв маягтай сайтын урьдчилсан харагдац

Allbirds

Цагаан маалинган даавуун дээрх байгалийн материалууд

Allbirds нь тайван, байгалийн өөртөө итгэлтэйгээр ажилладаг - бараг бүхэлдээ өнгөгүй зотон даавуу бөгөөд бүтээгдэхүүний гэрэл зургаас шууд авсан дулаан элс (#e0dacf) болон бүдэг шороон өнгөнүүдээр баяжуулсан. Хэрэглэгчийн интерфэйс нь бүтээгдэхүүний туршлагад саад учруулдаггүй: цагаан гадаргуу, нимгэн хүрээ, том үсгээр бичсэн навигаци, вэб элементүүдээс илүү физик товчлуур шиг санагддаг эм хэлбэртэй удирдлага. Self Modern (захиалгат serif фонт)-ийг редакцийн анхаарал шаарддаг цөөн хэдэн чухал мөчид - гарчиг, цуглуулгын нэрсэд ашигладаг бол Geograph-ийг үсэг, үндсэн хэсэг, товчлуур бүрт гурван тэнцвэртэй жинд ашигладаг. Ангиллын картууд нь өнгөний систем болдог: тус бүр нь онцолсон бүтээгдэхүүнээс дэвсгэр өнгийг нь авч, навигацийг амьд Pantone палитр болгон хувиргадаг.

Хамгийн их өргөн нь ~1200 пиксел бөгөөд төв хэсэгт нь өгөөмөр хажуугийн зөөлөвчтэй. Гол элемент нь дулаан элсэн дэвсгэр дээр бүрэн өргөнтэй редакцийн тууз бөгөөд төвөөс нь том бүтээгдэхүүний тойрог гэрэлтдэг. Ангиллын навигаци нь дөрвөн багана дахь дөрвөн ижил өнгийн картын тор бөгөөд тус бүр нь нэг төвтэй гутлын загварыг агуулдаг. Нугалаасны доор байршил нь бүрэн өргөнтэй хуваасан самбарууд (зүүн талд амьдралын хэв маягийн зураг + баруун талд бүтээгдэхүүний дээж) болон жижиг, доогуур нь зураастай хэсгийн гарчгийн доор төвлөрсөн бүтээгдэхүүний тойрог хооронд ээлжлэн байрладаг. Нийт хэмнэл нь: бүрэн өргөнтэй редакцийн самбар → дөрвөн баганатай тор → төвлөрсөн бүтээгдэхүүний тойрог → хоёр баганатай хуваасан → төвлөрсөн бүтээгдэхүүний тойрог. Хэсгүүдийн хоорондох зай нь 40-56 пиксел бөгөөд агаартай боловч хэт их шилжилт үүсгэдэггүй. Навигаци нь төвлөрсөн үндсэн холбоосууд бүхий минималист, тогтмол дээд баар юм.

Гэрэл зураг бол бүхэл бүтэн харааны систем юм. Бүтээгдэхүүний бүх зургийг гутлын өнгөнд тохирсон эсвэл нөхсөн хатуу дэвсгэр дээр, бага зэрэг өнцгөөс ойрын зайнаас авсан бөгөөд энэ нь зураг бүрийг өнгөний судалгаа болгон хувиргадаг. Амьдралын хэв маягийн зургуудыг дулаан, нарлаг өнгөөр, байгалийн орчинд (агава талбай, модон тавцан, бартаат газар), бүдэг палитртай тохируулахын тулд бага зэрэг бүдэг болгосон. Зураг чимэглэл, 3D дүрслэл, хийсвэр график байхгүй. Pantone-той хамтран шууд утгаараа өнгөний палитрыг график элемент болгон ашигласан. Иконографи нь минималист ба монохром (навигаци болон туслах байрлал дахь тойм дүрсүүд).

Палетт

Төвийг сахисан

  • Canvas White #ffffff — Хуудасны дэвсгэр зураг, картын гадаргуу, бүтээгдэхүүний картын дэвсгэр зураг.
  • Charcoal #212121 — Хоёрдогч UI элементүүд, хуваагч болон дуугүй шошгоны хувьд төвийг сахисан өнгө дэмжигддэг. Үүнийг үйлдэл хийх дуудлагын үндсэн өнгө болгон ашиглаж болохгүй.
  • True Black #000000 — Гарчиг, дүрс, өндөр тодосгогчтой хүрээ, навигацийн текст.
  • Warm Sand #e0dacf — Үндсэн хэсгийн дэвсгэр, нэмэлт гадаргуугийн сүүдэр, том редакцийн самбарууд.
  • Olive Char #222519 — Хоёрдогч UI элементүүд, хуваагч болон дуугүй шошгоны хувьд төвийг сахисан өнгө дэмжигддэг. Үүнийг үйлдэл хийх дуудлагын үндсэн өнгө болгон ашиглаж болохгүй.
  • Iron Gray #525252 — Хоёрдогч текст, туслах текст, анзаарагдамгүй хүрээнүүд.

Типографи

12-оос 40 пиксел хүртэл · 6 алхам

  • Self Modern — солих: Playfair Display · тоймууд 400 · Гарчиг болон редакцийн өгүүллийг цөөн ашигладаг бөгөөд гол хэллэгүүд болон цуглуулгын гарчгийг онцолдог. Сериф болон налуу фонтууд нь sans-serif фонтын нэгэн хэвийн байдлыг эвдэж, "Энэ бол түүхийн мөн чанар" гэсэн мессежийг дамжуулдаг.
  • Geograph — солих: Inter · тоймууд 400, 500, 700 · Хэрэглэгчийн интерфэйсийн үндсэн фонт нь үндсэн текст, навигацийн шошго, товчлуур, бүтээгдэхүүний гарчиг, хөл хэсэг, оролтын талбар болон дүрсүүдийг агуулдаг. Тодруулсан гарчигуудад 500, бүтээгдэхүүний нэрэнд 700. Навигацийн шошго болон ангилалд том үсгээр бичсэн өргөн зай (0.025em–0.10em) нь брэндийн тогтвортой хэв маягийг бий болгодог.
  • HurmeGeometricSans3 — солих: Inter · тоймууд 400 · Товчлуурын нөөц эсвэл тусгай шошго болгон ховор ашигладаг. Geograph энэ системийг өдөр бүр ашигладаг.

Интервал ба хэлбэр

ЗорилгоУтга
Нягтралнягт
Үндсэн алхам8-16px
Товчлуурын радиус9999px (pill)
Картын радиус16px
Сүүдэрсүүдрийн оронд хил хязгаар байхгүй
Хэсгүүдийн хооронд40-56px
Хуудасны өргөн1200px

Хиймэл оюун ухаан таны вэбсайтыг Allbirds хэв маягаар бүтээж, дүүргэх болно

  • 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 — Цагаан гантиг дээр музейн үзмэрийн тавиур