Here is the step-by-step guide where you find what you learn during the course
Design
Understand: The types, forms and components of design.
Understand: What is Figma? How it is work? How to start?
Understand: Toolbar, menu, property bar and layers. Create and manage pages, create frames, dimensions for web and mobile apps.
Understand: Types of websites, Parts of website, and Type of pages.
Understand: What is layout? What is grid? What is 12 columns grid? How to use 12 columns grid?
Figma: Create 12 columns grid and use of the grid. Layout basics and common structures.
Understand: What is typography? What is the basic elements of typography? Best practices to use typography. Resources of free fonts.
Figma: Basics of typography. Create variables / re-usable components i.e. Titles, Labels, Text etc. with typography.
Understand: What is iconography? Types of icon? Best practices to use iconography. Resources free icons & icon-sets.
Figma: Understand difference between SVG and PNG icons. Project specific icon-set. Import & export icons.
Understand: Psychology of colors. What is color-palette? How to choose colors? Best practices for use of colors. Resources of colors and ready to use color-pellets.
Figma: Create variables of colors. Import & export color-palette.
Understand: What is imagery? Best practices for imagery. Resources of free images for commercial use.
Figma: Import & export images.
Understand: Fundamentals of user interface design. UI design best practices.
Understand: Layout measurements of mobile UI design. Components of mobile UI. Best practices of mobile UI design.
Figma: Understand flows, create screens and use 4 column grid.
Understand: What is design principles? How to use design principles?
- Re-usable components
- Component variations
- Buttons & form-fields
- Image thumbnails
- Layout management, auto-layouts
- Micro-animations
- Short-cuts
- Dark mode
- Plugins
- Design presentation.
- Export mock-ups.
Understand: What is wire-framing? How many types of wireframe? Where and when to use wireframes?
Figma: How to create low and high-fidelity wireframes?
Understand: What is prototyping? Types of prototypes.
Figma: How to create low, mid and high-fidelity interactive prototype? Share or present Figma prototypes.
Understand: What is responsive design? How to plan responsive design?
Figma: Create mobile version. Best practices of responsive design.
Understand: Project brief / requirements. Research according to project types. Explore ideas.
Design: Create wire-frames. Create desktop version. Create mobile version. Create prototype. Create mock-ups. Present design to client. Get feed-backs.
Handover: Make design development ready. Handover / share Figma files to developer.
Presentation: Create mock-ups for portfolio, export according to Behance guideline, create project on Behance to present.
Implementation
Understand: What is local host?
XAMPP: Download and Install XAMPP Server in local machine.
Understand: What is CMS? What is WordPress? Statistics of WordPress.
WordPress: Download & install WordPress in XAMPP Server. Basic setup of WordPress. Overview of Dashboard, Post, Pages, Media, Comments and Settings.
Understand: What is theme?
WordPress: Find, download or upload theme. Setup theme.
Understand: What is plugin? Necessary plugins.
WordPress: Find, download or upload plugins. Setup plugins.
Elementor: What is Elementor? Basic setup of Elementor.
Understand: What are the necessary steps before start implementation?
WordPress: Create all pages as per Figma design. Create navigation menu. Setup site identity.
Figma: Read design specifications i.e. color codes, font-family, font-styles, spacing, margins, structure etc.
Elementor: Basic design style setup i.e. global colors, global fonts, typography, buttons, form fields, layout etc.
Elementor: Create global header. Add logo, menu and CTA in header. Setup tablet & mobile header.
Elementor: Create global footer. Add content, links, social media icons and copyright text in footer.
Elementor: Start implementing home page section by section. Manage each section for tablet & mobile.
Elementor: Start implementing other pages I.e. about, services, contact etc.
Elementor: Set design of all pages for mobile.
WordPress: Make website ready for migration to live server.
Understand: What is domain? What is hosting? What are the DNS records? How to add/edit DNS records? How to create email on hosting? What is email client? How to setup email in mobile?
Portfolio
Behace: Create portfolio on Behance and setup profile.
Figma: Create mock-ups of project and export images.
Behance: Create project, upload images and publish project.
Understand: What is case study? How to write case study for portfolio.
Figma: Create case study in Figma and export images.
Behance: Create project, upload images of case study and publish case study project.