Overview
With our state-of-the-art “Modern Web Design Diploma,” take a revolutionary step into the digital world. This exciting course goes beyond conventional web design concepts, engrossing students in an engaging curriculum that skillfully combines technical mastery with creativity. This certification reveals the techniques for building visually attractive and flawlessly functional websites, from analyzing customer demands to grasping the nuances of the 8point Grid system.
You will explore the nuances of project management in this course, crafting a story that melds smoothly with your client’s goals. Each module opens a new area of knowledge, from the first sketches to the finishing touches of prototyping with the Invision app. Learn the ins and outs of responsive web design and overcome the difficulties presented by various platforms. In conclusion, you will have acquired the ability to create engaging online experiences and be recognized as a web designer and digital storyteller.
Unleash your potential in modern web design, where innovation meets aesthetics and functionality dances with creativity. Join the “Modern Web Design Diploma” and redefine the boundaries of digital craftsmanship.
Learning Outcomes:
- Master the art of deciphering client requirements and organizing web design projects effectively.
- Explore the intricacies of the 8-point Grid system, sketching, wireframing, and the Atomic Design approach.
- Gain expertise in creating style guides, selecting colors, and crafting typographic scales for impactful web designs.
- Navigate the complexities of designing for desktop, tablet, and mobile views through the Wstudio Web Design Project.
- Acquire hands-on experience in prototyping using the Invision app, and integrate SVGs and Icon Fonts seamlessly into web design.
Who Is This Course For?
- Aspiring web designers seeking to blend creativity with technical proficiency.
- Marketing professionals aiming to enhance their understanding of web design principles.
- Entrepreneurs looking to develop in-house web design capabilities for their businesses.
- Students are eager to enter the dynamic field of digital design.
- Small business owners want to create and manage their online presence effectively.
Certification
Once you finish the course, you can get a certificate to show your success. The PDF version costs just £3.99, while a printed one is £7.99. If you’d like both, it’s £10. For students outside the UK, there’s an extra £10 for delivery.
Requirements
This course is available to all learners of all academic backgrounds.
Learners should be aged 16 or over to undertake the course.
A strong grasp of English, numeracy, and ICT is necessary for enrollment in this course.
Career Path: Crafting Digital Excellence
- Web Designer: £25,000 – £40,000 per annum
- UX/UI Designer: £30,000 – £50,000 per annum
- Front-End Developer: £35,000 – £55,000 per annum
- Digital Marketing Specialist: £25,000 – £45,000 per annum
- E-commerce Manager: £30,000 – £50,000 per annum
- Creative Director: £40,000 – £70,000 per annum
Course Curriculum
Introduction | |||
0.1 promo-workflow | 00:03:00 | ||
0.2 what we will cover in this course | 00:03:00 | ||
Requirements to take this course | |||
1.1 skills-and-apps-you-need-to-take-this-courseautogenerated | 00:02:00 | ||
1.2. Photoshop extensions We Need | 00:07:00 | ||
Organizing your Web Design Project | |||
2.1.how To Organize A Design Project | 00:05:00 | ||
2.2 client’s Sketches | 00:04:00 | ||
2.2 naming psd layers and groups | 00:06:00 | ||
2.3.naming Conventions To Help Developers | 00:03:00 | ||
Gathering project information from client | |||
3.1.design Briefs | 00:10:00 | ||
3.3 getting More Info On Project | 00:05:00 | ||
3.4.content_template for gathering information | 00:03:00 | ||
Sketching, Wireframing, Atomic Design & 8point Grid system | |||
4.1.moodboards | 00:06:00 | ||
4.2.ideation Phase | 00:05:00 | ||
4.3.introduction To Balsamiq | 00:10:00 | ||
4.4desining Wireframes Part 1 | 00:08:00 | ||
4.5.desining Wireframes Part 2 | 00:14:00 | ||
4.6.atomic Design | 00:08:00 | ||
4.7.8pt Grid | 00:09:00 | ||
Style Guides, colors and typographics scales | |||
5.1.typeface And Color Combinations | 00:04:00 | ||
5.2.ui Style Guides | 00:08:00 | ||
5.3.examples Of Ui Style Guides | 00:03:00 | ||
5.4.how I Created My Style Guide | 00:07:00 | ||
5.5.styleguide-typescale Explained | 00:03:00 | ||
5.6.Styleguide-assignment | 00:01:00 | ||
Designing for Desktop/Large View (Wstudio Web Design Project) | |||
6.1.online tools for grid calcuations | 00:13:00 | ||
6.2.planning your grid | 00:05:00 | ||
6.3.whitespace-plan | 00:06:00 | ||
6.4.setting Up Artboard For Desktop Design | 00:07:00 | ||
6.5.designing Header And Hero Part 1 | 00:12:00 | ||
6.6 designing Header And Hero Part 2 | 00:09:00 | ||
6.7.designing Steps Area Part 1 | 00:10:00 | ||
6.8.designing Step Area Part 2 | 00:09:00 | ||
6.9.userreviews Area Design | 00:09:00 | ||
6.10.adjusting White Space And Vertical Rhythem | 00:06:00 | ||
6.11.desining Team Part1 | 00:11:00 | ||
6.12.desining Team Part2 | 00:07:00 | ||
6.13.footer Design Part1 | 00:08:00 | ||
6.14.footer Design Part2 | 00:11:00 | ||
Planning Responsive Web Design | |||
7.1.Responsive Design Considerations Part 1 | 00:07:00 | ||
7.2.Responsive Design Considerations Part 2 | 00:06:00 | ||
Designing for Tablet/Medium View (Wstudio Web Design Project) | |||
7.3.Establishing Grid For Tablets | 00:07:00 | ||
7.4.Header Area For Tablet View | 00:11:00 | ||
7.5.Section how it work – steps | 00:10:00 | ||
7.6.Section team Tablet View | 00:09:00 | ||
7.7 footer Design | 00:09:00 | ||
Designing for Mobile/Small View (Wstudio Web Design Project) | |||
8.1.mobile Artboard And Grids | 00:04:00 | ||
8.2.header Mobile View | 00:11:00 | ||
8.3.steps Section-mobile | 00:09:00 | ||
8.4.section 2 Team Members For Mobile | 00:09:00 | ||
8.5.footer And Final Adjustments | 00:08:00 | ||
Designing for Developers | |||
9.1.what Developes Needs To Know | 00:05:00 | ||
9.2.Red Line Document with Ink 1 | 00:10:00 | ||
9.3.Red Line Document with Ink 2 | 00:06:00 | ||
9.4.which layer styles you can use photoshop | 00:08:00 | ||
9.5.installing Using Zeplin | 00:10:00 | ||
9.6.style Guides With Zeplin | 00:14:00 | ||
9.7.tools-zeplin-avocode-1 | 00:04:00 | ||
9.8.avocode And Sympli | 00:06:00 | ||
Prototyping with Invision app | |||
10.1. What Are Prototypes | 00:04:00 | ||
10.2.getting Familiar With Invision App For Prototyping | 00:07:00 | ||
10.3.creating First Prototype With Invision App | 00:06:00 | ||
SVGs and Icon Fonts in Web Design | |||
11.1 using iconmoon app to create custom icon fonts set | 00:08:00 | ||
11.2 Using SVG in Web design | 00:10:00 |