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 оптимизациясе.
Охшаш стильләр
- Studio — Галерея стенасы хәрәкәттә. Һәр экран тыныч, соры күргәзмә өслеген чагылдыра, анда типографик материаллар һәм бер-берсен каплаган иҗади эшләр игътибар өчен көрәшә.
- Mollie — Кашемир счетчигы, караңгы реестр. Кара текст тирәсендә редакция дизайны өчен җитәрлек ак урын калдырыгыз, аннары продукт белән бәйле пунктларны җылы кремнар, эспрессо коктейльләре һәм чын түләү ысулларының тактиль фотолары белән ныгытыгыз.
- Basis Theory — Дизайн студиясендә түләү терминаллары. Ак техник кәгазь, капланган үтә күренмәле транзакция катламнары һәм бер зәңгәрсу контроль элементы визуаль юнәлешне билгели.
- CleanShot X — Зәңгәр яктыртылган эш өстәле булган студия. Компакт кара текст тирәсендә тыныч ак бушлык булдырыгыз, аннары бай зәңгәр идарә итү элементлары һәм катламлы Mac продукт рәсемнәре үзәк урынны алсын.
- Modern Treasury — График кәгазьдә казначылык журналы. Тыныч, ак операция кәгазенә охшаган битләр ясагыз, анда акча агымнары нечкә сызыклар, билгеләнгән төеннәр һәм төгәл, яшерен контроль элементлар белән күрсәтелә.
- Basha-Franklin — Ак линтель астындагы галерея рәшәткәсе. Басма архитектура портфолиосына охшаган фоторәсемнәргә нигезләнгән җылы #f4ede6 төсмерен, нечкә кара структураны һәм асимметрик колонналарны кулланыгыз.
- Bajgart Office — Редакция галереясе стенасы. Зур ак бушлык кулланыгыз, анда нечкә сериф шрифтлары һәм портфолио фрагментлары хром белән капланган интерфейс элементларына караганда күбрәк визуаль авырлык йөртә.
- Heptabase — Кояш нурлары белән яктыртылган өстәл. Җылы, кәгазьгә охшаган өслекләр, күмер төсендәге идарә итү элементлары һәм тикшеренүләр өчен йөзеп йөрүче тәрәзәләр программа тәэминаты белән идарә итү панеле түгел, ә оешкан эш урыны хисен тудыра.
- Bejamas — Пижама — кара пыяла аша үткән кислоталы известь. Тыныч, ачык соры редакция битләрен тонык яшел яктылык сызыклары өслек белән кисешкән җирләрдә кара панельләр белән бүлеп, аларны матур итеп бизәгез.
- Baba — Кызыл кояш нурларында кайгыртучанлык турында искәрмәләр. Кешеләрнең фотосурәтләрен эмоциональ үзәк итеп кулланып, якын ак, алсу һәм каймак төстәге мәгълүмат өслекләре тирәли киң кызыл хикәя полосалары ясагыз.
- Grafana Labs — Sunrise Signal Station идарә итү бүлмәсе. Тыныч соры-ак эш урыны киң, дүрт төсле горизонт градиенты һәм төгәл зәңгәр интерфейс сигналлары белән берләштерелә.
- Kagi — Аерым уку бүлмәсе. Калын графит текст тирәсендә ачык ак урын булдырыгыз, тынычлыкны бозу өчен нечкә шәмәхә төстәге акцентлар һәм җылы пастель өслекләр кулланыгыз.