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