Enroll Now

Learn to Build Beautiful and Functional Websites with No-coding Tool

Learn to Transform a Figma Design into The Pixel-Perfect, Mobile Friendly and Functional Website with WordPress + Elementor

Enroll Now
Watch Full Video
Start Date & Duration

February, 24
6 Months
(220 Hours)

Batch Timings

9 - 11 PM (IST)
Monday - Friday

Language

Hindi

Overview _

Elevate your skills as learn to craft mobile-friendly and fully functional websites, ensuring every pixel aligns with perfection.

From Figma's canvas to WordPress reality, empower yourself with the expertise to bring designs to life. Perfect for aspiring designers, junior developers and IT students; this course is a gateway to creating visually stunning, responsive, and user-friendly websites that leave a lasting impression.

Tools _

Learn the latest & trending tools which are became skills in current scenario

Figma

Figma is a powerful design tool that helps you to create UI design for websites and mobile applications; wire-frames and interactive prototypes.

Canva

Canva is a free-to-use online graphic design tool. Use it to create social media posts, presentations, posters, videos, logos and more.

WordPress

WordPress is a free and open-source software to create and manage websites, blogs, and other types of web content. It is one of the most popular CMS (Content Management System) in the world.

Elementor is a leading site builder for WordPress websites that allows you to create and customize your WordPress website without coding.

XAMPP is a cross-platform web server that allows programmers to test their code on a local machine or laptop.

FileZilla

FileZilla Client is a free and open-source FTP client that supports various protocols. It helps you to move files between local machine to live server.

Skills _

Learn the skills which are essential to boost-up your professional growth

Website UI Design

You will learn to understand project specifications and convert it into design solution. Website design, landing pages design and many other things.

Mobile UI Design

You will learn Mobile UI Design including with device specific design using platform specific guidelines. Wireframing, prototyping and many other things.

Figma to WordPress Transformation

You will learn how to convert a Figma design in to a dynamic and responsive website using WordPress and Elementor.

Hosting & Domain

You will learn how to connect domain into hosting, how to create emails on hosting, how to migrate website localhost to live server.

Website Migration & Launch

You will learn how to migrate website localhost to live server. How to edit files from live server.

Create & Maintain Your Portfolio

You will learn to create a professional portfolio on Behance. You will also learn how to create your personal portfolio website.

Learn _

Learn the complete process of building website from scratch to final execution

Design

  • Understand the project brief / requirement.
  • Research and explore ideas.
  • Structure the design; create wire-frames.
  • Select typography, colors and set design style.
  • Start designing in Figma.
  • Create mock-ups, present design.
  • Make design development ready.

Implantation

  • Setup XAMPP local server.
  • Install and Setup WordPress.
  • Install and setup theme and required plugins.
  • Install & setup Elementor.
  • Create pages, menu etc.
  • Setup design style.
  • Start design implantation.
  • Make it mobile responsive.
  • Launch website.

Portfolio

  • Create your online portfolio on Behance.
  • Setup your profile.
  • Create mock-ups of projects and publish on Behance.
  • Write case-studies.
  • Portfolio best practices.
Syllabus _

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.

Bonus _

You'll get many bonuses during the course and even after the course.

100+ Design Resources

High-quality resources of Fonts, Icons, Images, Videos, Backgrounds, Vectors, Color-pellets, Inspirations any many more, free for commercial use.

WordPress Essentials

List of essential plugins according to project types, which will help you to complete different types of projects i.e. portfolio, e-commerce, news, blog etc.

Job Search Support

6 months support for job search after successfully completion of the course including mock interviews and LinkedIn recommendations.

Behance Portfolio Setup

Support, guidance and best practices to setup hire-ready portfolio on Behance.

Instructor _

Ashok L. Luhar

A UX/UI designer, who identify user problems by creating an empathy map. Provide quick solutions by using wireframes and prototypes. Review project-specific requirements and convert them into a design solution by using Figma. Manage website design & development projects from start to finish. A WordPress Developer, who develop fully functional website from scratch, as well as customize any WordPress theme as per the project-specific requirement. Convert Figma designs into a pixel-perfect functional website. A Front-end Coder who writes mobile-first responsive HTML+CSS code using Bootstrap and other popular CSS frameworks as per the project-specific requirement. A OnJob Trainer (OJT) who has taught Graphic Design and User Experience Design to 100+ B.Voc. students of R.N.G. Patel Institute of Technology, Bardoli during Nov. – Dec. 2022; and Aug. – Oct. 2023.

IMG_20231126_185906

18+ Years

of Industry Experience as a Graphic & UI/UX Designer

500+ Projects

Designed & Developed Successfully

40+ Projects

Brand Identity Design Projects

100+ Students

trained during OnJob Training in RNGPTIT

Google Certified

Successfully Completed Google UX Designer Specialization Course

Interested! but, still confused?
Start Your FREE Trial

Start the course and learn for 4 WEEKS ABSOLUTELY FREE,
after four weeks you either continue for the full course or all learnings are yours. :)

Enroll Now

“Build Beautiful and Functional Websites with No-coding Tool” Course Starts from 5th Feb. 2024

Course start date is 5th February, 2024. Timing is 09:00PM to 11:00PM (Monday to Friday). The course has only 25 seats. Book your seat today.

Course Fee

45,000/-

60% Off

17,999/-

for registration & pay
before 31st Jan., 2024

50% Off

7,499/- x 3

for registration & pay first installment before 31st Jan., 2024

Book My Seat

If you have any question, call me on +91 9909 776 494 or send message on WhatsApp.

30 Day Money Back Guarantee !

Join the course and start your learning; within 30 days, if you feel that this course is not for you or you are not getting what I want to deliver, you can simply get refund by putting an email on ashok@mauxui.com. Without asking a single question, your registration amount will be refunded within 3 working days.

Any question? call me on +91 9909 776 494 or send message on WhatsApp.

FAQs _

Frequently Asked Questions

This course is, learn website design and mobile application design in Figma and build a dynamic and functional website with no-coding tool. Create a portfolio on Behance to become job interview ready.

No, you don’t need to have any prior experience of design or development. You will learn from basic to advance level.

You will learn Figma and Canva design tools.

Figma is a very popular design tool for user interface design and user experience design. It is also useful to creating clickable interactive prototypes.

Canva is a graphic design tool to create social medial posts, website banners, logos, brochures and so many other types of graphics.

You will learn WordPress, Elementor, XAMPP and FileZilla.

WordPress is very popular open-source (free) CMS (Content Management System), it is easy to learn for non-technical person.

Elementor is very popular drag-n-drop tool, you can build a dynamic and functional website without writing a single line of code.

XAMPP is a local server to run web server in local machine. We will use the XAMPP server to run WordPress and build website on our local machine (PC / Laptop).

FileZilla is FTP (File Transfer Protocol) client which help us to upload and download file from web server to our local machine

You will lean website UI (user interface) design, mobile UI design, Figma to WordPress transformation, all basics about hosting and domain, website migration from local machine to live server, create portfolio as designer, become ready for job interviews and many other things which will help you to boost your career.

Design resources are any materials, tools, or assets that can help designers to create websites, apps, logos, posters, etc. Design resources can include things like fonts, icons, illustrations, images, videos, vectors, mock-ups, templates, and more. You will get access of 100+ design resources during the course.

You will get Job Search Support after successfully completion of the course. It will be up to 6 months. During the support you will get informed about job opportunities, guidance for interview, portfolio creation and presentation tips and many other things which help you to get job.

Connect with me

Linkedin-in Dribbble Instagram Skype Envelope
Copyright © 2022 by MA UX/UI

FREE Master Class Registration

Mobile number is required to communication and get updates by WhatsApp.
We promise, we will not send spam or any other ads on your mobile.