Course Code: CS-104
Course Title: Graphics & Web Design (UI Layout Design)
Course Duration: Three (03) months
Sessions Duration: 02 hour
Graphic design is all around us, in a myriad of forms, both on screen and in print, yet it is always made up of images and words to create a communication goal. This course sequence exposes students to the fundamental skills required to make sophisticated graphic design: process, historical context, and communication through image-making and typography. The sequence is completed by a capstone project that applies the skills of each course and peer feedback in a finished branding project suitable for a professional portfolio.
The goal of this specialization is to equip learners with a set of transferable formal and conceptual tools for “making and communicating” in the field of graphic design. This core skill set will equip learners for formal studies in graphic design, and a starting point for further work in interface design, motion graphics, and editorial design.
This course introduces students to basic web design using HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). The course does not require any prior knowledge of HTML or web design. Throughout the course students are introduced to planning and designing effective web pages; implementing web pages by writing HTML and CSS code; enhancing web pages with the use of page layout techniques, text formatting, graphics, images, and multimedia; and producing a functional, multi-page website.
1. Apply computer resources for academic and official uses.
2. Making projects based on branding ideas.
3. Having complete ideas about illustration a.
4. Making Design based on print media.
5. Integrate Adobe products for use in industry.
1. Recognize and understand HTML web page elements.
2. Know how to write HTML code.
3. Understand and apply effective web design principles.
4. Enhance web pages using text formatting, color, graphics, images, and multimedia.
5. Incorporate forms into web pages.
6. Understand and apply CSS to format web page elements.
7. Plan, design, and publish a multi-page website.
Session Topics Covered Assessment Techniques
1 Orientation| Welcoming| Introductory Topics| User Interface Introduction| Software installation | Running Applications| Customize Workspace| Image Size Details| Working with Selection
2 Getting started with layers| More Selections| Layers Panel| working with Crop Tool| working with type tool | Brush Tool| Clone Stamp Tool | Healing Tools| History Panel and History Brush Tool| Layer Mask
3 Working With pen tool with Real time project | Working with path shape and blending option with a Real time project| Working with 3d
4 Getting Started with illustrator| Selection Tool| Direct Selection Tool| Pen Tool| Pen Tool and Shape Builder Tool| Transform Panel and Transform Each | All About Strokes| Rotate Tool + Wrist Watch Illustration| Learn Scale, Shear, Reshape and Free Transform Tools
5 Learning Pathfinder and making Icons| Type Tool Part 1| Type Tool Part 2| Typography| Types of Masks| Color and Pattern Swatches| Custom Brushes | Mesh Tool Part 1| Mesh Tool Part 2 (Tracing with Mesh) | Mesh Tool Part 3 |All about Layers Panel
6 Talking about Working areas in Graphic design
Final Lab test
7 Introduction about course | environment setup | UI design principle continue from graphic design course | Basic HTML Tags | Browser developer tool usage
8 Basic CSS design | CSS positioning | CSS box model | CSS display property | CSS grid | Responsive Web Design - Media Queries
9 CSS Pseudo-classes | CSS Pseudo-elements | CSS Navigation Bar | CSS Dropdowns | CSS Forms
10 Introduction to Bootstrap | Bootstrap 4 Colors | Bootstrap 4 Tables | Bootstrap 4 Images | Bootstrap 4 Alerts | Bootstrap 4 Buttons | Bootstrap 4 Progress Bars | Bootstrap 4 Cards | Bootstrap 4 Dropdowns
11 Bootstrap 4 Navs | Bootstrap 4 Navigation Bar | Bootstrap 4 Forms | Bootstrap 4 Carousel | Bootstrap 4 Icons | Bootstrap 4 Modal
12 Introduction to Bootstrap Grid system
13 Lab Final | Closing Ceremony
Recommended resources (Required):
Follow to tutorials from pixel imperfect, GFX mentor.
Recommended Software (Required):
(Adobe Photoshop , Adobe illustrator , Sublime Text 3,Google Chrome)