
Fundamentals of Web Design
Understand web layout, user experience (UX), and visual design essentials to build attractive, functional websites.

Track
Digital Designing
Level
Foundation
Language
English
Duration
30 hours
Learning Mode
Learn at ALC or at Home
Introduction
- In this activity, you will be able to:
- Classify fundamental concepts in design, such as color theory and typography, into appropriate categories to enhance understanding and application.
- Describe client briefs and design projects comprehensively to ensure precise understanding and communication among team members.
- Identify essential design elements like fonts and colors to establish cohesive and impactful compositions.
- Organize design assets and project files systematically for streamlined workflow and easier access.
- Reorganize design layouts and structures to optimize visual flow and user engagement.
- Summarize the outcomes of color scheme evaluations to support informed design choices.
- Explain the advantages and limitations of various design methodologies to steer project strategies effectively.
- Explain the process of developing user interfaces with tools like Figma, emphasizing crucial techniques and best practices.
- Compare different design tools and software to select the best options tailored to specific project needs.
- Report on the performance of design projects, highlighting key achievements and identifying potential improvements.
What you'll learn ?
- By the end of this activity, you will be able to:
- Interpret and illustrate fundamental concepts in the world of design including color theory and typography.
- Review and reinterpret client briefs into compelling narratives for effective communication in design projects.
- Compare and contrast various design elements such as fonts, colors, and shapes, to create visually appealing compositions.
- Examine and assess different color schemes and combinations to enhance the aesthetic appeal of design projects.
- Construct and develop web layouts using Adobe Photoshop, utilizing various effects to create engaging visuals.
- Identify and utilize appropriate tools such as Adobe Bridge for efficient management of design assets.
- Construct and devise sitemaps and wireframes to plan and prepare website structures effectively.
- Develop and generate user interfaces using Figma, incorporating components and constraints for streamlined design processes.
- Assess and evaluate design projects for efficiency and effectiveness in achieving desired outcomes.
- Formulate some recommend improvements in design processes to enhance efficiency and creativity in design projects.
Syllabus
Understanding world of Designing
- Understanding colors and related concepts
- Getting introduced to typography and colors
- Font Essence and color dynamics
- Learning how to write and build content
- Understanding what Client Briefs, Storyboards,
- Visual Mind Maps, and Marketing Plans are
- Clear and Captivating Narratives
- Learning more about client briefs, storyboards, visual mind maps, etc.
Designs and shapes
- Learning about various designs and shapes
Basics of designs and shapes
- Understanding the basics of designs and shapes
- Shapes in Design
Basics of web designing
- Learning the basics of web designing
- Learning to create a few websites elements
- Demystifying Web Design
Typography
- Understanding the rules and guidelines for typography
- Using Fonts and optimizing typography
- Mastering Web Fonts
Color schemes
- Identifying color schemes and combinations
- Exploring more about colors and the trends
- Types of Color Schemes
Introduction to File Management Essentials
- Foundations of Digital Asset Management
Web Image Crafting Essentials
- Creating web-ready images by applying various effects
- Learning about a tool and creating a web layout
- Learning to automate and mask an image
Sitemap and wireframe:
- Learning to create a sitemap and wireframe for a website
- Identifying how and where to use a website wireframe
Copyright-free images
- Searching, downloading, and using free and copyright-free images
- Exploring stock platforms for images
Figma
- Designing a user interface
- Creating and working on a project
- Adding content in the user interface
- Working with components and applying constraints
- Working with plugins
- Learning to prototype, share, and export a file
- Executing to prototype, share, and export a file
Work-Centric Approach
The academic approach of the course focuses on ‘work-centric’ education. With this hands-on approach, derive knowledge from and while working to make it more wholesome, delightful and useful. The ultimate objective is to empower learners to also engage in socially useful and productive work. It aims at bringing learners closer to their rewarding careers as well as to the development of the community.
- Step 1: Learners are given an overview of the course and its connection to life and work
- Step 2: Learners are exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
- Step 3: Learners are acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
- Step 4: Learners are acquainted with the architecture of the tool or tool map so as to appreciate various parts of the tool, their functions, utility and inter-relations.
- Step 5: Learners are exposed to simple application development methodology by using the tool at the beginner’s level.
- Step 6: Learners perform the differential skills related to the use of the tool to improve the given ready-made industry-standard outputs.
- Step 7: Learners are engaged in appreciation of real-life case studies developed by the experts.
- Step 8: Learners are encouraged to proceed from appreciation to imitation of the experts.
- Step 9: After the imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
- Step 10: Emulation is taken a level further from working with differential skills towards the visualization and creation of a complete output according to the requirements provided. (Long Assignments)
- Step 11: Understanding the requirements, communicating one’s own thoughts and presenting are important skills required in facing an interview for securing a work order/job. For instilling these skills, learners are presented with various subject-specific technical as well as HR-oriented questions and encouraged to answer them.
- Step 12: Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression, from self-expression to self-confidence and from self-confidence to self-reliance and self-esteem!