Workflow of Modern Web Design
0( 0 REVIEWS )
155 STUDENTS
Overview: The job role of a web designer is no longer traditional of the years gone by. Now web designers …
Overview:
The job role of a web designer is no longer traditional of the years gone by. Now web designers must learn how to create responsive web design, an interactive design for every screen. There are many questions web designers will need to find answers to, for example, how do I change the layout, how do I set-up grids, and so on. The Workflow of Modern Web Design course is a comprehensive training that will cover all these elements of modern-day web design and development. The course will enable designers on how to collaborate with developers to achieve the maximum potential to solve these problems.
The course will teach designers how to gather project requirements from their clients, sketch ideas early on in the project, wire-frame those ideas, getting styles and specification guides for developers to follow through and creating prototypes to indicate flow and interaction.
The Workflow of Modern Web Design course will also teach designers and developers all about responsive web design, understanding design briefs and creating sketches. Once learners have grasped the basics of responsive web design, the course will enable designers and developers to take their career in design and development to the next level.
- Why consider learning at Study 365?
- Learning Outcomes
- Access Duration
- Who is this Course aimed at?
- Entry Requirement
- Method of Assessment
- Certification & Awarding Body
- Presenter Information
- Progression and Career Path
- Other Benefits
With so many commitments in our lives, we may not have the time to learn new skills. The beauty of studying online is that you get to find this balance between your education and your daily commitments
Study 365 offers hundreds of online courses to students across the world. Gaining new skills has never been this easy as many of our courses are open to students with little or no qualifications or previous experience. All the courses are up-to-date, relevant, affordable, and will build on existing expertise or give you a jump-start to a new career. The courses are meticulously designed and equals what is offered in a classroom setting. With a solid reputation that has established and made us made us one of the most trusted and reliable online course providers we offer the most convenient path to gain recognised skills and training that will give you the opportunity to put into practice your knowledge and expertise in your chosen career. You can learn at your own pace at Study 365 and you will be provided with all the necessary material, tutorials, qualified course instructor, narrated e-learning modules, interactive quizzes and free resources which include Free CV writing pack, free career support and course demo to make your learning experience enriching and more rewarding.
- Learn the professional process of responsive web design project
- Learn what a design brief should contain
- Understand IDEATION process
- Learn to design Wireframes using Balsamiq Mockups
- Learn to build prototypes to show website flow and interaction
- Learn about building and using Mood Boards in the project
- Learn how to set-up Grids and Guides
- Use Zeplin to create online style guide
- Learn how to design and develop Coded Style Guide
The course will be directly delivered to you, and you have 12 months access to the online learning platform from the date you joined the course. The course is self-paced and you can complete it in stages, revisiting the lectures at any time.
- Web Designer
- Graphic Designer
- UI Designers
- Web Developer
- Creative Director
- Project Manager
- Good knowledge of Adobe Photoshop CC
At the end of the course, you will have one assignment to be submitted (you need a mark of 65% to pass) and you can submit the assignment at any time. You will only need to pay £19 for assessment and certification when you submit the assignment. You will receive the results within 72 hours of submittal, and will be sent a certificate in 7-14 days if you have successfully passed.
Those who successfully complete the course will be awarded the Workflow of Modern Web Design certificate by CPD & iAP. The qualification will make you valuable to employers, and your motivation at gaining new skills will be recognised.
Muhammad Ahsan Pervaiz is an award-winning, multi-talented designer. His hunger for perfecting the User Interface from all aspects has led him to work with clients all over the world, including the USA, Australia, UK, and United Arab Emirates. With a career spanning over 10 years, his work includes projects for FORTUNE 500 companies such as INTEL, PANASONIC and Coca Cola.
Muhammad’s experience includes improving the User Experience of the UK GP Tools Mobile App, games and e-commerce websites, and creating new design patterns for showing passwords safely in password fields. He’s worked from App Icon Design to App UI Design, and from wireframes and prototypes to mockup design.
His ultimate goal is to make more awesome UI Designers, and ease the pain of learning for newcomers in this field of UI Design.
Once you successfully complete the Workflow of Modern Web Design you will be qualified to work in the following positions. The qualification will also put you in line to demand a higher salary or job promotion. The average UK salary per annum according to https://www.payscale.com/career-path-planner is given below.
- Written and designed by the industry’s finest expert instructors with over 15 years of experience
- Repeat and rewind all your lectures and enjoy a personalised learning experience
- Gain access to quality video tutorials
- Unlimited 12 months access from anywhere, anytime
- Save time and money on travel
- Learn at your convenience and leisure
- Quizzes, tests mock exams, practice exams to ensure you are 100% ready
- Eligible for TOTUM discount card
Course Curriculum
| 1: Introduction | |||
| 1.1 Introduction to Modern Web Design Workflow | |||
| 1.2 What Will You Learn in this Course? | |||
| 2: Requirements | |||
| 2.1 Skills and Apps you Need to Take This Course | |||
| 2.2 Adobe Photoshop Extensions Needed | |||
| 3: Organizing Your Web Design Project | |||
| 3.1 How to Organize a Design Project | |||
| 3.2 Naming PSD Files, Layers, and Groups | |||
| 3.3 Matching Naming Conventions with Developers | |||
| 4: Gathering Project Info From Client | |||
| 4.1 What are Design Briefs? | |||
| 4.2 Getting Client’s Initial Sketches and Ideas | |||
| 4.3 Questions to Ask Your Clients | |||
| 4.4 Using Content Gathering Template for Site Content | |||
| 5: Sketching, Wireframing & More | |||
| 5.1 Using Mood Boards | |||
| 5.2 Sketching and Ideation | |||
| 5.3 Intro to Balsamiq Mockups | |||
| 5.4 Wireframing in Balsamiq, Part 1 | |||
| 5.5 Wireframing in Balsamiq, Part 2 | |||
| 5.6 Atomic Design Framework | |||
| 5.7 8-Point Grid System | |||
| 6: Style Guides, Colors, And Typographical Scales | |||
| 6.1 Experimenting with Colors and Font Combinations | |||
| 6.2 What are UI Style Guides? | |||
| 6.3 UI Style Guides Examples | |||
| 6.4 Creating UI Style Guide in Photoshop | |||
| 6.5 Selecting Type Scale for Responsive Web Design | |||
| 7: Designing For Desktop/Large View | |||
| 7.1 Calculating Grids and Guides Using Online Tools | |||
| 7.2 Planning Your Grid for Desktop View | |||
| 7.3 Using White Space in Your Design | |||
| 7.4 Setting Up Artboards in Photoshop | |||
| 7.5 Designing Heading/Hero Area, Part 1 | |||
| 7.6 Designing Heading/Hero Area, Part 2 | |||
| 7.7 Designing Steps Section, Part 1 | |||
| 7.8 Designing Steps Section, Part 2 | |||
| 7.9 Designing User Reviews Section | |||
| 7.10 Adjusting White Space & Vertical Rhythm | |||
| 7.11 Designing Team Section, Part 1 | |||
| 7.12 Designing Team Section, Part 2 | |||
| 7.13 Designing Footer Section, Part 1 | |||
| 7.14 Designing Footer Section, Part 2 | |||
| 8: Planning Responsive Design | |||
| 8.1 Responsive Web Design Considerations, Part 1 | |||
| 8.2 Responsive Web Design Considerations, Part 2 | |||
| 9: Designing For Tablet/Medium View | |||
| 9.1 Planning the Grid for Tablet/Medium View | |||
| 9.2 Designing Header/Hero Area | |||
| 9.3 Designing Steps Section – How it Works | |||
| 9.4 Designing and Adjusting Team Section | |||
| 9.5 Designing Footer for Tablet View | |||
| 10: Designing For Mobile/Small View | |||
| 10.1 Setting Up Artboard and Grids for Mobile View | |||
| 10.2 Designing Header for Small Devices | |||
| 10.3 Designing Steps Section for Small Devices | |||
| 10.4 Designing Team Section for Small Devices | |||
| 10.5 Designing Footer for Small Devices | |||
| 11: Designing For Developers | |||
| 11.1 What Developers Need to Know about Web Design | |||
| 11.2 Generating Red Line Spacing Specifications for Developers, Part 1 | |||
| 11.3 Generating Red Line Spacing Specifications for Developers, Part 2 | |||
| 11.4 Converting Layer Styles to Code – HTML | |||
| 11.5 Installing Zeplin for Web Design Collaboration | |||
| 11.6 Creating UI Style Guides with Code Using Zeplin | |||
| 11.7 Comparing Tools: Zeplin vs. Avocode | |||
| 11.8 Comparing Tools: Avocode vs. Sympli | |||
| 12: Prototyping With Invision App | |||
| 12.1 What are Prototypes? | |||
| 12.2 Getting Familiar with Invision App for Prototyping | |||
| 12.3 Building an Interactive Prototype with Invision App | |||
| 13: Svg Icons And Fonts | |||
| 13.1 Creating Custom Icon Fonts with Iconmoon App | |||
| 13.2 Using and Exporting SVG Graphics | |||
No Reviews found for this course.