Electronic Materials Office
Күмер белән бизәлгән галереядә якты күмер
Электрон материаллар офисы - төнге остаханә: мат кара төстәге полотно, бер генә ялтырап торган кызгылт сары төстәге күмер һәм игълан итү урынына пышылдап сөйләүче шрифт. Интерфейс һәр экранны караңгы студия кебек карый - клавиатура фотосурәтләре бердәнбер чын яктылык чыганагы, һәм UI аңа буйсына. 200 авырлыктагы GT-Flexa'да урнаштырылган башлыклар зур негатив киңлектә йөзә; төп текст махсус кечкенә һәм гуманистик (Times). Төс үлчәнә: шрифт өчен саф ак, сылтамалар өчен тонык шәмәхә (#9e9eff) һәм үзенең 30px нуры белән балкыган биттә бер кызгылт сары (#f45500) гамәл чакыруы. Компонентлар 20px радиуста тыгыз урнашкан, #9d9d9d'да чикләр сизелми диярлек, һәм системадагы бердәнбер күләгәләр - төп гамәл тирәсендәге ике төсле гало.
Тулы киңлектәге, күмер төсендәге полотно, үзәкләштерелгән, максималь киңлектәге эчтәлек (~1200 пиксель). Төп экран 20 пиксель радиусы булган медиа-карта белән башлана, анда продукт видеосы урнаштырылган, ул карау мәйданы киңлегенең якынча 80% ын били, аннары күп юллы GT-Flexa 200 башлыгы килә, ул тулы эчтәлек киңлегенә диярлек уратып ала. Бүлек ритмы: Tobias стилендәге баш хәрефләр белән язылган бер продукт тасвирламасы бүлеге, аннары 2x2 челтәр (эш өстәлендә) продукт тасвирламасы карточкалары. Карточкаларда 1 пиксель #9d9d9d чикләре һәм алар арасында 24 пиксель суүткәргечләр кулланыла. Юмарт вертикаль сулыш алу - бүлекләр бүлгечләр урынына 48–128 пиксель күмер тискәре бушлыгы белән аерылган. Навигация - өске өлештә беркетелгән бер үтә күренмәле панель, анда яшерен сылтамалар кластеры һәм бер Ember чакыруы бар. Ян панель юк, мега-меню юк, икенчел навигация юк.
Рәсемнәр продуктны күрсәтү максатыннан гына бирелә — Altar I клавиатурасының тулысынча кара фонда якыннан макросурәте, өстән яктыртылган, бу корпусның балкып торуына һәм клавиатура капкачларының кырыйлар буйлап яктылыкны чагылдыруына китерә. Яшәү рәвеше юк, кеше куллары юк, әйләнә-тирә мохит контексты юк. Рәсемнәр югары контрастлы һәм караңгы; монохром палитрадан тыш бердәнбер төс — клавиатураның үзендәге кызгылт сары көчәйткеч, ул Ember Orange чакыруын чагылдыра. Рәсемнәр квадрат яки 16:9, һәрвакыт 20 пиксель радиусы булган һәм карточка кырыйларыннан читтәрәк сузылган карточкаларга урнаштырыла (фото тирәсендә эчлек юк, һәм текст кырый астында). Иконка стиле: бердәнбер иконография — логотип алдындагы кечкенә тутырылган түгәрәк (●) — бер кызгылт сары нокта, ~6 пиксель калынлыкта.
Палитра
Бренд
- Ember Orange
#f45500— Тутыру белән төп гамәл төймәсе - UI'дагы бердәнбер хроматик өслек, ул һәрвакыт 30 пиксельле кызгылт сары гало белән озатыла, бу аны җеп кебек балкыта; төп чакыру төймәсендәге 30 пиксельле тышкы балкыш "Кара кызгылт сары" алтыпочмак символын кабатлый, ләкин тутыру урынына күләгә буларак бар, бу төймәнең эчтән яктыртылган кебек күренүен тәэмин итә.
Нейтраль
- Studio Charcoal
#202020— Киез һәм картон өслекләр караңгы галерея идәне кебек, беркайчан да тулысынча кара түгел, шуңа күрә күз йомшак кырыйларга тия ала. - Bone White
#ffffff— Төп текст, рәсемнәрдәге нечкә чикләр һәм сирәк очрый торган кире өслек. Шрифт иерархиясе тулысынча бәйсез рәвештә саклана. - Ash Gray
#9d9d9d— Тыныч текст, нечкә карточка чикләре һәм актив булмаган язмалар - төс схемасында ак төс бик көчле булганда кулланыла торган бердәнбер урта соры төс. - Mid Felt
#eaeaea— Инверсияләнгән панельләр яки модаль челтәрләр өчен җиңел өслек юу - беж һәм караңгы тукыма арасында урнашкан ак төсмер. - Carbon
#000000— Күмер төсендәге холст формасын яхшы тота алмаслык дәрәҗәдә җиңел булганлыктан, иконалардагы сызыклар һәм контрастлы рамнар иң гаҗәп акцент булып тора. - Lavender Link
#9e9eff— Кертелгән сылтаманың төсе һәм өстәмә хәрәкәт кадрының контуры җылы кызгылт сары төскә каршы тонык, салкын контраст булып тора, бу исә хәрәкәтләрнең күмер фонында укылышлы булуын тәэмин итә.
Типография
16дан 86 пиксельгә кадәр · 8 адым
- GT-Flexa — алыштыру: Inter (200/400) or Manrope (200/400) · контурлар 200, 400 · Башлыклар һәм декоратив элементлар өчен төп шрифт. 200 калынлыгы 24 пиксельдән югарырак булган һәр башлыкны кулланырга мөмкинлек бирә - бу үзенчәлекле стиль: 68 пиксель һәм 86 пиксель зурлыкларда хәрефләр кычкырып түгел, ә атмосферада эреп китә кебек. 400 калынлыгы аста башлыклар һәм открыткалар өчен яраклы, алар бик аз ишетелә. Иң зур зурлыкларда юл арасы 1.0 гә кадәр киметелә, шуңа күрә декоратив шрифт бер-берсе өстенә һава баганасы кебек тезелә.
- Tobias-light — алыштыру: Söhne Buch or Inter Tight · контурлар 400 · Бүлек башлыклары һәм аскы колонтитул логотибы өчен икенчел типография стиле. Ул тональ контраст булдыру өчен GT-Flexa 200 белән чагыштырганда бер адым түбәнрәк кулланыла - Tobias архитектура һәм экспрессиврак хис бирә, ә GT-Flexa атмосфералырак. Тискәре хәрефләр арасы Tobias Lightның киң пропорцияләрен тарайта.
- Times — алыштыру: Source Serif 4 or PT Serif · контурлар 400 · Төп текст һәм баш абзацлар серифлар кулланылган геометрик, декоратив шрифтларга каршы махсус ясалган. Серифлар төп текстның зурлыгыннан артмыйча, продукт тасвирламаларына җылылык һәм редакция абруе өсти.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | тыгыз |
| Төп адым | 4-8px |
| Төймә радиусы | 20px |
| Карта радиусы | 20px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 48-128px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Electronic Materials Office стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- OFFFICE : — монолит шрифт белән тулган нуар галереясе
- Bibliothèque — Прожектор астындагы кара куб формасындагы галерея – зур, караңгы залда яктыртылган ялгыз тәлинкә
- 21 TSI — Кып-кызыл бушлык, бер силуэт – кулланучы интерфейсы атмосферага чумып киткән югары модалы редакция.
- Structured — Пластилинга охшаган кәгазьдә Яңарыш галереясе
- CHAIBOY — Кара галерея стенасы, арткы якты бер фотосурәт белән
- Holiday 100 — Төн уртасында бүләкләр галереясе — сериф шрифтлы башлык прожектор, кара тукыма бәрхет стена, һәм һәр продукт рәсеме җентекләп сайланган рам кебек эленеп тора.
- Apple (España) — Йомшак көндезге яктылыкта музей галереясе - бер, җәлеп итүче, авырлыксыз ак киңлек, һәр экспонат җиңел төстәге диварга фонарь белән яктыртылган.
- Analogue — Кара галерея витриналары – товарлар бушлыкта йөзеп йөри
- Apple (España) — Обсидиан галереясе күргәзмәсе - караңгы күргәзмә залы, анда кап-кара фонда бер титан әйбер балкый.
- Studio Oker — Караңгы галерея, кызыл төстәге бизәкләр белән бизәлгән — кара стеналар белән бизәлгән портфолио бүлмәсе, анда ак хәрефләр йөзеп йөргән кебек, ә тынлыкны кызыл пышылдау гына бүлеп куя.
- 099 SUPPLY — Кара һәм ак әйберләр белән тулы галерея стенасы
- Retool — Җылы обсидиан остаханәсе - төгәл кораллар өчен өслек, анда барысы да ясалган, янып торган күмер белән яктыртылган