Explore the steps to create a modern website design with the Modern Web Design: From Wireframes to Style Guide course. This course will guide you through making modern web design with Wireframes, Style guides, Photoshop, Zeplin and Invision App.
Through this Modern Web Design: From Wireframes to Style Guide course, you will get equipped with the fundamental skills to create a responsive web design. Our in-depth training will take you through organising your web design project, gathering information from clients, and designing for desktop. You will learn to plan for a responsive web design and make it compatible with mobiles and tablets. Finally, you will learn how to make a prototype on the Invision app and explore the steps to create and implement your own icon font.
Why Should You Choose Modern Web Design: From Wireframes to Style Guide
- Properly curated course with comprehensive syllabus
- 1 year accessibility to the course
- Full-time tutor support on working days (Monday – Friday)
- Efficient exam system, assessment and instant results
- Free e-Certificate
- Instant certificate validation facility
- Internationally recognised accredited qualification
- Access to the course content on mobile, tablet or desktop from anywhere anytime
- Eligible for **Student ID** card which gives you 1000’s of discounts from biggest companies.
Career path
This course opens a new door for you to enter the relevant job market and also gives you the opportunity to acquire extensive knowledge along with required skills to become successful in no time. You will be able to stand out in the crowd after completing this course. You will also be able to add our qualifications to your Resume and make yourself worthy in the competitive job industry.
FAQs
Who is this course for?
There is no experience or previous qualifications required for enrolment on this course. It is available to all students of all academic backgrounds.
Is this course accredited?
Yes, this course is accredited by CiQ and CPD Qualification Standards.
If I take the course, how will I be assessed?
Once you complete all the lessons/units, you are required to sit an exam which is multiple-choice. Pass mark is 60%.
Does this course include exams?
Yes, this course includes exams.
How can I achieve my certificate?
Once you successfully pass your exam you can obtain your certificate of achievement either in PDF or hard copy format, or both, for an additional fee. Â Certificates are also available as e-certificates.
Is there any charge for certification?
Yes, there is an additional charge for the certification service.  Certificates are £4 each for PDFs and £8 each for hard copies. If both PDF and hard copy certificates are ordered at the same time, the cost is £10. E-certificates are available from your learning portal completely free of charge.
Can anyone validate my certificate through your website?
Yes, there is a unique code issued for every certificate and anyone can validate your certificate by using this code through our website.
Are there any prerequisites for the course?
There are no prerequisites for this course and it is open to everyone.
How long until I receive the course confirmation details?
Once you purchase a course your account will be set up within 48 hours and you will receive an email with your account details.
For how long do I have access to the course?
You will have access to the course for one year following purchase.
What support do you offer?
We provide 24 hours live chat support and our customer service team is available during working hours to answer your phone calls.
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.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:07: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:11:00
- Assignment
- Assignment – Modern Web Design: From Wireframes to Style Guide
- 00:00:00
Course Reviews
N.A
- 5 stars0
- 4 stars0
- 3 stars0
- 2 stars0
- 1 stars0
No Reviews found for this course.
Related Courses

$410.45$28.65- 1 year
- Intermediate
- Course Certificate
- Number of Units63
- Number of Quizzes0
- 7 hours, 32 minutes Gift this course
WordPress database error: [Unknown column 'hide' in 'where clause']SELECT * FROM wp_grp_google_review WHERE google_place_id = 1 AND hide = '' AND language = 'en' ORDER BY time DESC /* From [www.adamsacademy.com/course/modern-web-design-from-wireframes-to-style-guide/] in [/nas/content/live/adamsa/wp-content/plugins/widget-google-reviews/grw-reviews.php:18] */