வடிவமைப்பு அமைப்பு

Scoutello சூடான, திறன்மிக்க, தயாரிப்பை மையமாகக் கொண்டதாகத் தோன்ற வேண்டும். விரும்பப்படும் தோற்றம் வெளிச்சமானது, விசாலமானது, வட்டமானது மற்றும் எடிட்டோரியல் பாணியுடையது: முதலில் தெளிவான உள்ளடக்கம், பின்னர் நுட்பமான பிராண்ட் நிறம், மென்மையான மேற்பரப்புகள் மற்றும் அலங்காரச் சத்தமாக மாறாமல் தயாரிப்பு பதிலளிப்பதாக உணரச் செய்யும் அமைதியான இயக்கம்.

தற்போதைய காட்சி திசைக்கான தெளிவான பொதுக் குறிப்பாக மார்க்கெட்டிங் லேண்டிங் பக்கத்தைப் பயன்படுத்தலாம். பகிரப்பட்ட வடிவமைப்பு டோக்கன்களை இயன்றவரை தயாரிப்பு மேற்பரப்புகளில் மீண்டும் பயன்படுத்த வேண்டும். அந்த மேற்பரப்பு வெளிப்படையாகப் பிராண்ட் அல்லது மார்க்கெட்டிங் நோக்கத்திற்கானதாக இருக்கும்போது மட்டுமே கூடுதல் வெளிப்பாட்டைச் சேர்க்க வேண்டும்.

லோகோ மற்றும் பிராண்ட் சொத்துகள்

ஏஜென்ட், ஒருங்கிணைப்பு அல்லது உருவாக்கப்பட்ட பக்கத்திற்கு மீண்டும் பயன்படுத்தக்கூடிய பிராண்ட் குறியீடு தேவைப்படும்போது, பொதுவில் கிடைக்கும் docs asset URL-இலிருந்து Scoutello லோகோவைப் பயன்படுத்தவும்:

• SVG லோகோ: https://docs.scoutello.com/img/scoutello-logo.svg
• PNG லோகோ: https://docs.scoutello.com/img/scoutello-logo.png

திரை அளவுகள் அனைத்திலும் தெளிவான காட்சிக்காக SVG பதிப்பை முன்னுரிமையுடன் பயன்படுத்தவும். ஒரு கருவி அல்லது இலக்கு SVG-ஐக் கையாள முடியாதபோது PNG பதிப்பைப் பயன்படுத்தவும். குறியீட்டைச் சுற்றி போதுமான வெற்றிடத்தை விடவும்; அதை நீட்டிக்கவோ நிறம் மாற்றவோ வேண்டாம். மாறுபாடு தெளிவாக இருக்கும் வெள்ளை, வெப்பமான கிரீம் அல்லது பிற அமைதியான மேற்பரப்புகளில் வைக்கவும்.

பிராண்ட் நிறங்கள்

முதன்மை நிறம்: #ff8d49

முதன்மை ஆரஞ்சு நிறத்தை Scoutello-வின் சிறப்பம்ச நிறமாகப் பயன்படுத்தவும்: முதன்மை அழைப்புச் செயல்கள், கவனம் செலுத்தப்பட்ட நிலைகள், செயலில் உள்ள வழிசெலுத்தல், சிறிய ஐகான் பின்னணிகள், சிறப்பிப்புக் குறிப்பு உரை, மென்மையான ஒளிர்வுகள் மற்றும் வெப்பமான கிரேடியன்ட்கள். தயாரிப்பு குறியீட்டில் இது --primary: 24 100% 64% ஆகவும், bg-primary, text-primary, border-primary/15 மற்றும் shadow-primary/10 போன்ற Tailwind வகுப்புகளாகவும் பொருந்துகிறது.

இரண்டாம் நிலை நிறம்: #145466

ஆழமான டீல் நிறத்தை அடித்தளமளிக்கும் நிறமாகப் பயன்படுத்தவும். இது முதன்மை ஆரஞ்சுடன் கூடிய கிரேடியன்ட்கள், இருண்ட அழைப்புச் செயல் பேனல்கள், காட்சி ஆழம் மற்றும் அவ்வப்போது அதிக முக்கியத்துவம் கொண்ட பிராண்ட் தருணங்களுக்கு சிறப்பாகப் பொருந்தும். இயல்புநிலைச் செயல் நிறமாக முதன்மை ஆரஞ்சுக்குப் பதிலாக இதைப் பயன்படுத்தக்கூடாது.

துணை நிறங்கள்:

• வெப்பமான கிரீம் பின்னணிகள்: #fff8f1, #fff4ea, #fcf6f1 மற்றும் மென்மையான orange-50 / amber-50 மேற்பரப்புகள்.
• தயாரிப்பு நடுநிலை நிறங்கள்: வெள்ளை கார்டுகள், இருண்ட முன்னணி உரை, சுமார் 70–75% ஒளிபுகாநிலையுடன் கூடிய மங்கலான உரை மற்றும் வெளிர் எல்லைகள்.
• மூன்றாம் நிலை நீலம்: hsl(205 100% 51%) துணை டோக்கனாகக் கிடைக்கிறது. ஆனால் ஆரஞ்சும் டீலும் பிராண்டின் இணை நிறங்களாகத் தெளிவாகத் தொடர, இதை அளவோடு பயன்படுத்த வேண்டும்.

காட்சி பாணி

பொதுவானதாகத் தோன்றாமல் போதுமான வெப்பத்தைக் கொண்ட, சுத்தமான மற்றும் பிரீமியம் SaaS தோற்றத்தை முன்னுரிமையுடன் பயன்படுத்தவும். லேண்டிங் பக்கம் கிரீம் மெஷ் பின்னணிகள், வெள்ளை கார்டுகள், பெரிய தயாரிப்பு ஸ்கிரீன்ஷாட்கள், வட்டமான மூலைகள் மற்றும் கட்டுப்படுத்தப்பட்ட கிரேடியன்ட்களை இணைக்கிறது.

பயன்படுத்தவும்:

• பொதுவாக rounded-2xl முதல் rounded-[2rem] வரையிலான வட்டமான கார்டுகள் மற்றும் பேனல்கள்.
• border-primary/10, border-primary/15, ring-black/5 போன்ற மென்மையான எல்லைகள் மற்றும் வெளிர் நடுநிலை எல்லைகள்.
• அதிகமாக நிறமூட்டப்பட்ட தொகுதிகளுக்குப் பதிலாக அடுக்கப்பட்ட வெள்ளை அல்லது கிரீம் மேற்பரப்புகள்.
• shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 போன்ற நுட்பமான நிழல்கள் அல்லது தனிப்பயன் குறைந்த ஒளிபுகாநிலை நிழல்கள்.
• குறிப்பாக மார்க்கெட்டிங் மற்றும் அம்ச விளக்கங்களில் ஆதாரமாகப் பயன்படுத்தப்படும் பெரிய தயாரிப்பு ஸ்கிரீன்ஷாட்கள் அல்லது UI மாதிரிகள்.
• ஆரஞ்சு சிறப்பிப்புக் குறிப்பு உரை, ஐகான் சிப்கள், வளையங்கள், ஒளிர்வுகள் மற்றும் கிரேடியன்ட் CTA-கள் போன்ற சிறிய பிராண்ட் தருணங்கள்.

தவிர்க்கவும்:

• முழுப் பக்கத்தையும் நிரப்பும் பிரகாசமான ஆரஞ்சு பின்னணிகள்.
• சாதாரண கட்டுப்பாடுகளில் டீல் நிறத்தை அதிகமாகப் பயன்படுத்துதல்.
• அடர்த்தியான, நெருக்கமான தளவமைப்புகள்.
• கடுமையான நிழல்கள், கூர்மையான செவ்வகங்கள் அல்லது குளிர்ச்சியான ஒரேநிற டாஷ்போர்டுகள்.
• வாசிப்பதற்கோ பணியை நிறைவு செய்வதற்கோ இடையூறாக இருக்கும் அலங்கார இயக்கம்.

எழுத்துரு

மார்க்கெட்டிங் தளம் பயன்படுத்துவது:

• landing-display வகுப்பின் மூலம் தலைப்புகளுக்கான Space Grotesk.
• மார்க்கெட்டிங் உட்பொருள் உரைக்கு Manrope.

பகிரப்பட்ட ஆப் மற்றும் docs மேற்பரப்புகள், தற்போது Inter-க்கு நெருக்கமான, கணினி அமைப்புடன் ஒத்திசைந்த UI எழுத்துருவைப் பயன்படுத்துகின்றன. அனைத்து மேற்பரப்புகளிலும் பாணி இலக்கு ஒன்றே: நம்பிக்கையூட்டும் தலைப்புகள், இறுக்கமான தலைப்பு எழுத்து இடைவெளி, வாசிக்க எளிதான உட்பொருள் உரை மற்றும் விசாலமான வரி உயரம்.

தலைப்பு வழிகாட்டுதல்:

• மார்க்கெட்டிங் பக்கங்களில் பெரிய, சமநிலையான தலைப்புகளைப் பயன்படுத்தவும்.
• முக்கியமான சொற்றொடரை மட்டும் முதன்மை ஆரஞ்சு நிறத்தில் சிறப்பிக்கவும்.
• கிடைக்கும் இடங்களில் max-w-* மற்றும் text-balance மூலம் வரி நீளத்தைக் கட்டுப்படுத்தவும்.

உட்பொருள் உரை வழிகாட்டுதல்:

• பத்திகளை அமைதியாகவும் நேரடியாகவும் வைத்திருக்கவும்.
• விளக்கங்களுக்கு மங்கலான முன்னணி உரையைப் பயன்படுத்தவும்; பொதுவாக text-foreground/70 அல்லது text-foreground/75.
• விரைவாக ஸ்கேன் செய்யக்கூடிய பிரிவுகள், குறுகிய பத்திகள் மற்றும் தெளிவான லேபிள்களுக்கு முன்னுரிமை அளிக்கவும்.

தளவமைப்பு மற்றும் இடைவெளி

தளவமைப்புகள் விசாலமாகவும் நிலையாகவும் உணரப்பட வேண்டும். லேண்டிங் பக்கம் max-w-7xl கண்டெய்னரைப் பயன்படுத்துகிறது; இதில் பதிலளிக்கும் கிடைமட்ட உள்ளக இடைவெளியும் பெரிய செங்குத்துப் பிரிவுகளும் உள்ளன.

பொதுவான வடிவங்கள்:

• py-16, py-20 அல்லது முக்கிய மார்க்கெட்டிங் பிரிவுகளுக்கு அதைவிட அதிகமான பிரிவு உள்ளக இடைவெளி.
• ஒரே மாதிரியான இடைவெளிகளுடன் பதிலளிக்கும் கிரிட்களில் அமைக்கப்பட்ட கார்டுகள்.
• வலுவான இடது உள்ளடக்கப் பத்தியும் வலதுபுறத்தில் தயாரிப்பு ஸ்கிரீன்ஷாட்கள் அல்லது சாதன அமைப்புகளும் கொண்ட ஹீரோ பிரிவுகள்.
• பரந்த தயாரிப்பு வாக்குறுதிகளுக்கான மையப்படுத்தப்பட்ட பிரிவு தலைப்புகள்; கதை அல்லது பணிச்செயல்முறைப் பிரிவுகளுக்கான இடதுசார்ந்த தலைப்புகள்.
• பெரிய திரைகளில் பல நெடுவரிசைகளாக மாறுவதற்கு முன், மொபைல்-முதலில் சுத்தமாக அடுக்கப்படும் தளவமைப்புகள்.

வெற்றிடத்தையும் வடிவமைப்பின் ஒரு பகுதியாகப் பயன்படுத்தவும். ஒரு பிரிவு தெளிவற்றதாகத் தோன்றினால், கூடுதல் அலங்காரத்தைச் சேர்ப்பதற்கு முன் உள்ளடக்கத்தை எளிமைப்படுத்தி சுவாசிக்க இடத்தை அதிகரிக்கவும்.

கூறுகள் மற்றும் மேற்பரப்புகள்

Scoutello மேற்பரப்புகள் தொடு உணர்வைத் தரும், அதேசமயம் இலகுவாகவும் இருக்க வேண்டும்:

• பொத்தான்கள்: முக்கியமான மார்க்கெட்டிங் CTA-களுக்கு வட்டமான பில் வடிவங்கள்; பிற இடங்களில் நிலையான தயாரிப்பு பொத்தான்கள்.
• கார்டுகள்: வெள்ளை அல்லது கிரீம் நிறம், வட்டமானவை, எல்லையுடன் கூடியவை மற்றும் மென்மையாக உயர்த்தப்பட்டவை.
• ஐகான்கள்: ஆரஞ்சு நிறத் தொனியுள்ள சிப்களில் சிறிய, எளிய கோடு ஐகான்கள்.
• புள்ளிவிவரங்கள் மற்றும் நம்பிக்கை கூறுகள்: ஆரஞ்சு நிறத் தொனியுள்ள எல்லைகள் அல்லது கிரேடியன்ட்களுடன் கட்டுப்படுத்தப்பட்ட கார்டுகள்.
• படிவங்கள்: தெளிவான லேபிள்கள், நேரடியான உதவி உரை மற்றும் மொபைல் பயன்பாட்டிற்கு போதுமான இடைவெளி.
• ஸ்கிரீன்ஷாட்கள்: பெரியவை, தெளிவானவை மற்றும் சற்றே உயர்த்தப்பட்டவை. அவற்றை தயாரிப்புக்கான தெளிவான ஆதாரமாகப் பயன்படுத்தவும்.

தயாரிப்பின் UI-ஐ உருவாக்கும்போது, தனிப்பயன் ஒருமுறைப் பயன்பாட்டு ஸ்டைலிங்கிற்குப் பதிலாக ஏற்கனவே உள்ள பகிரப்பட்ட UI கூறுகள் மற்றும் டோக்கன்களில் இருந்து தொடங்குங்கள். மார்க்கெட்டிங் UI-ஐ உருவாக்கும்போது, பொருத்தமான இடங்களில் landing primitives மற்றும் landing classes-ஐப் பயன்படுத்துங்கள்.

இயக்கம்

இயக்கம், இடைமுகத்தை சீர்மையானதாக உணரச் செய்ய வேண்டும்; பரபரப்பாக அல்ல. landing page-ல் குறுகிய reveal animations, device rise effects, glow bloom effects மற்றும் சிறிய hover lifts பயன்படுத்தப்படுகின்றன.

பரிந்துரைக்கப்படும் இயக்கங்கள்:

• மென்மையான opacity-யுடன் 12–24px மேல்நோக்கி வெளிப்படுதல்.
• Hover செய்யும்போது கார்டுகள் சில pixels மட்டுமே மேலெழுதல்.
• CTA-வை hover செய்யும்போது சிறிதளவு மேலெழுந்து, shadow ஆழமாதல்.
• உள்ளடக்கத்தை வரிசையாகப் பார்ப்பதற்கு உதவும் இடங்களில், தாமதப்படுத்தப்பட்ட section entrances.

Reduced-motion விருப்பங்களை எப்போதும் மதிக்கவும். உள்ளடக்கத்தை மறைக்கக்கூடிய, interaction-ஐத் தடுக்கக்கூடிய அல்லது பக்கத்தைப் புரிந்துகொள்ள அவசியமானதாகத் தோன்றக்கூடிய animations-ஐத் தவிர்க்கவும்.

குரல் மற்றும் உள்ளடக்க வடிவமைப்பு

நேரடியான, தெளிவான copy-யுடன் visual system சிறப்பாகச் செயல்படுகிறது. Scoutello-வில் ஒரு நிறுவனம் எதை வெளியிடலாம், நிர்வகிக்கலாம் அல்லது தானியக்கமாக்கலாம் என்பதை விளக்கும் மொழிக்கு முன்னுரிமை அளிக்கவும்.

பயன்படுத்தவும்:

• தயாரிப்புக்கே உரிய பெயர்ச்சொற்கள்: landing pages, tiles, tours, events, organizations, dashboard, guests, QR codes, translations.
• விருந்தினர் அனுபவங்களை operator workflows-உடன் இணைக்கும் முடிவுநோக்கு விளக்கங்கள்.
• ஜெர்மன் மற்றும் பிற உள்ளூர்மயமாக்கப்பட்ட copy-யில் பாலின நடுநிலை மொழி.

தவிர்க்கவும்:

• எடுத்துக்காட்டுகள் இல்லாத தெளிவற்ற platform மொழி.
• அளவுக்கு மீறிய முறையான enterprise jargon.
• எளிதில் ஸ்கேன் செய்யக்கூடிய section போதுமான இடங்களில் நீண்ட பத்திகள்.

நடைமுறை விதிகள்

• #ff8d49-ஐ முதன்மை brand accent ஆகவும், #145466-ஐ இரண்டாம் நிலை அடிப்படை நிறமாகவும் பயன்படுத்தவும்.
• Product surfaces-ல் hard-coded colors-க்குப் பதிலாக tokenized classes (primary, secondary, foreground, muted, border)-க்கு முன்னுரிமை அளிக்கவும்.
• Marketing pages-ஐ வெப்பமான, விசாலமான, rounded, screenshot-led மற்றும் மென்மையாக animated-ஆக வைத்திருக்கவும்.
• Dashboard மற்றும் operational surfaces-ஐ அமைதியான, தேவையான இடங்களில் மட்டுமே அடர்த்தியான, மேலும் task-focused-ஆக வைத்திருக்கவும்.
• தயாரிப்பு ஏற்கனவே branding controls-ஐ வழங்கும் இடங்களில், customer-க்கு சொந்தமான guest experiences நிறுவனத்தின் branding-ஐ ஆதரிக்கட்டும்; ஆனால் Scoutello-க்கு சொந்தமான surfaces இந்த system-உடன் ஒத்திசைவாக இருக்க வேண்டும்.

தொடர்புடைய கருத்துகள்: Routes and surfaces, Landing pages and tiles, Browser-first guest experiences.