Apple
Жалғыз көк қосқышы бар ақ бөлме
Apple дизайны - ұстамдылықтың үлгісі: ақ түсті кенеп, кең ақ кеңістік және әрбір әрекетті саналы сезінуге мүмкіндік беретін бірыңғай ашық көк түсті екпін. Негізгі назар аударатын нәрсе - типография - SF Pro, өлшемі ұлғайған сайын кішірейетін теріс әріптер аралығымен, тақырыптарға тым ауыр болмай, сәулеттік айқындық береді. Өнім - дизайн: үлкен өнім фотосуреттері мен өмір салтының суреттері басым, ал хром элементтері жұқа жақтауларға, мөлдір навигацияға және нәзік сызықтарға оралады. Бөлімдер ашық сұр фонда кезектесіп, жарнамалық материалдарға арналған толық түсті блоктармен безендірілген элементтердің орнына масштабтың өзгеруі арқылы ырғақ жасайды.
Бет орналасуы - бекітілген максималды контейнер ені жоқ толық енді бет - бөлімдер шетінен шетіне дейін созылады, мәтін блоктары шамамен 980 пиксель ішінде орталықтандырылған. Навигация - бұл айналдыруда пайда болатын әрбір өнім үшін қосымша ішкі қалтасы бар бірыңғай, бекітілген жаһандық жолақ. Негізгі орналасу әрқашан орталықтандырылған: үлкен өнім атауы, бір жолды ұран, екі түйме, содан кейін қалған қарау терезесін толтыратын өнім суреті. Бөлімдер #f5f5f7 және түрлі-түсті фондармен кезектесіп, кең тік ырғақпен (бөлімдер арасында 64 пиксельден астам) тігінен қабаттастырылған. Төменгі бет - толық енді қызмет көрсету карталарының (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 — Бөлек оқу залы. Тыныштық сезімін бұзу үшін нәзік күлгін екпіндерді және жылы пастельді беттерді пайдаланып, қалың графит мәтінінің айналасында ашық ақ кеңістік жасаңыз.