Layout and UI/UX Designing

-
படி 4: Layout மற்றும் UI/UX Design

படி 4: Layout மற்றும் UI/UX Design

பயனருக்கு அனுபவமளிக்கும் அழகான மற்றும் செயல்பாடான வடிவமைப்பு

Layout என்றால் என்ன?

Layout என்பது உங்கள் வெப்சைட்டில் உள்ள பகுதிகள் எவ்வாறு ஒழுங்கமைக்கப்படுகின்றன என்பதை குறிக்கிறது. உதா: Header, Navigation, Content, Sidebar, Footer போன்றவை.

UI & UX என்ன?

  • UI (User Interface): பயனர் பார்ப்பது — படங்கள், பொத்தான்கள், நிறங்கள், Font
  • UX (User Experience): பயனரின் அனுபவம் — எளிமை, வேகம், structure

Responsive Layout மாதிரி Code:

கீழே ஒரு எளிய layout structure HTML + CSS மூலம் காணப்படுகிறது:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; margin: 0; }
    header, footer { background: #003366; color: white; padding: 20px; text-align: center; }
    nav { background: #eee; padding: 10px; text-align: center; }
    main { padding: 20px; }
    @media (max-width: 600px) {
      header, footer, nav, main { font-size: 14px; }
    }
  </style>
</head>
<body>

  <header>முகப்பு பகுதி (Header)</header>
  <nav>வழிசெலுத்தல் பட்டி (Navigation Bar)</nav>
  <main>மைய உள்ளடக்கம் (Main Content)</main>
  <footer>கீழ்புறம் தகவல் (Footer)</footer>

</body>
</html>

Layout மற்றும் UX மேம்படுத்தும் குறிப்புகள்:

  • Mobile-first design யை முன்னிலைப்படுத்துங்கள்
  • Font size readable இருக்கட்டும் (16px+)
  • Buttons நன்றாக spacing-உடன் இருக்கட்டும்
  • Color contrast சரியாக இருக்கட்டும் (dark text on light bg)
  • Navigation எளிதாக இருக்க வேண்டும்

© 2025 sakthibalaweb

Comments

Post a Comment

Popular posts from this blog

Offline ai

-
Offline AI: Operating with Built-in Knowledge This AI operates offline , functioning solely on its fundamental, pre-existing information . It doesn't require an internet connection, relying instead on its internal database and algorithms to process requests and provide responses. Essentially, it's an AI that works without web access , utilizing only the data it was initially trained on and stored within its system . This codeing: Tamil ai download codeing Tamil ai
Read more

Termux comment

-
Termux: உங்கள் ஆண்ட்ராய்டு ஃபோனில் ஒரு Linux சூழல் 📱 Termux: உங்கள் ஆண்ட்ராய்டு ஃபோனில் ஒரு Linux சூழல் ஸ்மார்ட்போன்கள் நம் அன்றாட வாழ்க்கையின் ஒரு பகுதியாகிவிட்டன. கேம்கள் விளையாடுவது, சமூக ஊடகங்களைப் பார்ப்பது எனப் பலவற்றிற்கும் அதைப் பயன்படுத்துகிறோம். ஆனால் உங்கள் ஆண்ட்ராய்டு ஃபோனை ஒரு சக்திவாய்ந்த Linux மெஷினாக மாற்ற முடியும் என்று சொன்னால் நம்புவீர்களா? ஆம், Termux என்ற செயலி மூலம் இது சாத்தியமாகும்! Termux என்றால் என்ன? Termux என்பது ஒரு இலவச மற்றும் ஓப்பன் சோர்ஸ் ஆண்ட்ராய்டு செயலியாகும். இது உங்கள் சாதனத்தில் ஒரு குறைந்தபட்ச Linux கட்டளை வரி சூழலை (command-line environment) நிறுவ அனுமதிக்கிறது. Non-rooted phone-களில் கூட வேலை செய்யும் Linux commands மற்றும் tools-ஐ இயக்க முடியும் Termux ஏன் தேவை? கற்றல் மற்றும் பயிற்சி: Linux கட்டளைகளைக் கற்றுக்கொள்ள பயன்பாட்டு வளர்ச்சி: Python, Ruby போன்ற மொழிகளில் வேலை நெட்வொர்க்கிங்: SSH, rsync போன்ற கருவிகள் கோப்பு மேலாண்மை: Storage-access கட்டளைகள் ஹேக்கிங் / பாதுகாப்பு: Tools கற்றல்...
Read more

GitHub கணக்கை துவங்குவது எப்படி?

-
GitHub கணக்கை துவங்குவது எப்படி? GitHub கணக்கை துவங்குவது எப்படி? (தமிழில்) GitHub என்பது நிரலாளர்களுக்கான ஒரு இணையதளம். இதில் நிரல்கள் (code) சேமிக்க, பகிர மற்றும் கூட்டாக வேலை செய்ய முடியும். 1. GitHub என்றால் என்ன? GitHub = Git + Cloud + Collaboration Tools GitHub-இல் நிரல்கள் version history-யுடன் பாதுகாக்கப்படலாம் Open source project-களில் பங்கு பெறலாம் 2. GitHub கணக்கை தொடங்குவது எப்படி? GitHub இணையதளத்திற்கு செல்லவும்: https://github.com Sign Up பொத்தானை கிளிக் செய்யவும் Username, Email, Password உள்ளிட்ட விவரங்களை நிரப்பவும் CAPTCHA மற்றும் email verification முடிக்கவும் உங்கள் GitHub account தயார்! 3. Repository உருவாக்குவது எப்படி? Dashboard-இல் "➕" → New Repository தேர்வு செய்யவும் Repository name: உதா: my-first-project Initialize with README என்பதை தேர்வு செய்து உருவாக்கவும் 4. முக்கிய GitHub சொற்கள் சொல் விளக்கம் Repository Project கோப...
Read more