Graphic Designing UI/UX Course Outline

This course offers a broad, cross-disciplinary learning experience for students looking to pursue careers in Advertising Design, Graphic Design,, and Illustration, to name a few — all disciplines that focus on effective and arresting visual communication. The course is designed to span a wide range of visual communication in a digital platform.

In this course, students are introduced to key aspects of the design process, from research/strategy, creative brief development, and campaign development to teamwork and presentation and content creation so that they can enter the design market as strong candidates for beginner to intermediate level design jobs.

Main Expectations:

In short, the course under reference should be delivered by professional instructors in such a robust hands-on manner that the trainees are comfortably able to employ their skills for earning money (through wage/self-employment) at its conclusion.

This course thus clearly goes beyond the domain of the traditional training practices in vogue and underscores an expectation that a market-centric approach will be adopted as the main driving force while delivering it. The instructors should therefore be experienced enough to be able to identify the training needs for the possible market roles available out there. Moreover, they should also know the strengths and weaknesses of each trainee to prepare them for such market roles during/after the training.

i.          Specially designed practical tasks to be performed by the trainees have been included in the Annexure-I to this document. The record of all tasks performed individually or in groups must be preserved by the management of the training Institute clearly labeling name, trade, session, etc so that these are ready to be physically inspected/verified through monitoring visits from time to time. The weekly distribution of tasks has also been indicated in the weekly lesson plan given in this document.

ii.          To materialize the main expectations, a special module on Job Search & Entrepreneurial Skills has been included in the latter part of this course (5^th & 6^th month) through which, the trainees will be made aware of the Job search techniques in the local as well as international job markets (Gulf countries). Awareness around the visa process and immigration laws of the most favored labor destination countries also form a part of this module. Moreover, the trainees would also be encouraged to venture into self-employment and exposed to the main requirements in this regard.  It is also expected that a sense of civic

duties/roles and responsibilities will also be inculcated in the trainees to

iii.          A module on Work Place Ethics has also been included to highlight the importance of good and positive behavior in the workplace in the line with the best practices elsewhere in the world. An outline of such qualities has been given in the Appendix to this document. Its importance should be conveyed in a format that is attractive and interesting for the trainees such as through PPT slides +short video documentaries. Needless to say that if the training provider puts his heart and soul into these otherwise non-technical components, the image of the Pakistani workforce would undergo a positive transformation in the local as well as international job markets.

To maintain interest and motivation of the trainees throughout the course, modern techniques such as:

•              Motivational Lectures

•              Success Stories

•              Case Studies

These techniques would be employed as an additional training tool wherever possible (these are explained in the subsequent section on Training Methodology).

Lastly, evaluation of the competencies acquired by the trainees will be done objectively at various stages of the training and a proper record of the same will be maintained. Suffice to say that for such evaluations, practical tasks would be designed by the training providers to gauge the problem-solving abilities of the trainees.

(i)           Motivational Lectures

The proposed methodology for the training under reference employs motivation as a tool. Hence besides the purely technical content, a trainer is required to include elements of motivation in his/her lecture. To inspire the trainees to utilize the training opportunity to the full and strive towards professional excellence. Motivational lectures may also include general topics such as the importance of moral values and civic role & responsibilities as a Pakistani. A motivational lecture should be delivered with enough zeal to produce a deep impact on the trainees. It may comprise of the following:

·         Clear Purpose to convey the message to trainees effectively.

·         Personal Story to quote as an example to follow.

·         Trainees Fit so that the situation is actionable by trainees and not represent a just idealism.

·         Ending Points to persuade the trainees on changing themselves.

A good motivational lecture should help drive creativity, curiosity, and spark the desire needed for trainees to want to learn more.

The impact of a successful motivational strategy is amongst others commonly visible in increased class participation ratios. It increases the trainees‘ willingness to be engaged on the practical tasks for a longer time without boredom and loss of interest because they can see in their mind’s eye where their hard work would take them in short (1-3 years); medium (3 -10 years) and long term (more than 10 years).

As this tool is expected that the training providers would make arrangements for regular well planned motivational lectures as part of a coordinated strategy interspersed throughout the training period as suggested in the weekly lesson

Course-related motivational lectures online link is available in Annexure-II.

(ii)          Success Stories

Another effective way of motivating the trainees is using Success Stories. Its inclusion in the weekly lesson plan at regular intervals has been recommended till the end of the training.

A success story may be disseminated orally, through a presentation, or using a video/documentary of someone that has risen to fortune, acclaim, or brilliant achievement. A success story shows how a person achieved his goal through hard work, dedication, and devotion. An inspiring success story contains compelling and significant facts articulated clearly and easily comprehendible words. Moreover, it is helpful if it is assumed that the reader/listener knows nothing of what is being revealed. The optimum impact is created when the story is revealed in the form of:-

·         Directly in person (At least 2-3 cases must be arranged by the training institute)

·         Through an audio/ videotaped message (2-3 high-quality videos must be arranged by the training institute)

It is expected that the training provider would collect relevant high-quality success stories for inclusion in the training as suggested in the weekly lesson plan given in this document.

The suggestive structure and sequence of a sample success story and its various shapes can be seen in Annexure III.

(iii)        Case Studies

Where a situation allows, case studies can also be presented to the trainees to widen their understanding of the real-life specific problem/situation and to explore the solutions.

In simple terms, the case study method of teaching uses a real-life case example/a typical case to demonstrate a phenomenon in action and explain theoretical as well as practical aspects of the knowledge related to the same. It is an effective way to help the trainees comprehend in depth both the theoretical and practical aspects of the complex phenomenon in depth with ease. Case teaching can also stimulate the trainees to participate in discussions and thereby boost their confidence. It also makes the classroom atmosphere interesting thus maintaining the trainee interest in training till the end of the course.

Depending on suitability to the trade, the weekly lesson plan in this document may suggest case studies be presented to the trainees. The trainer may adopt a PowerPoint presentation or video format for such case studies whichever is deemed suitable but only those cases must be selected that are relevant and of a learning value.

The Trainees should be required and supervised to carefully analyze the cases.

For this purpose, they must be encouraged to inquire and collect specific information/data, actively participate in the discussions, and intended solutions to the problem/situation.

Case studies can be implemented in the following ways: –

i.              A good quality trade-specific documentary ( At least 2-3 documentaries must be arranged by the training institute)

iii.           Field visits( At least one visit to a trade-specific major industry/ site must be arranged by the training institute)

·         Communicate ideas through artworks by selecting and applying media techniques and processes, subject matter, and themes

·         Demonstrate a verbal-working use of the vocabulary relating to design

·         Develop an understanding of the properties and the preparation of graphic design

·         Communicate ideas through artworks by selecting and applying the elements of art and principles of design

·         Respond aesthetically to artworks based upon their personal experience and cultural values

·         Analyze, interpret, and evaluate the quality of artwork through art criticism

·         Understand the role and functions of art in history and culture

·         Students will produce a portfolio of art using a variety of graphic design techniques, styles, and media.

Class hours: 4 hours per day

Theory: 20%

Practical: 80%

Weekly hours: 20 hours per week

Total contact hours: 260 hours

2.    Advertising and Marketing firms

3.    Game Design Studios

4.    Freelancing Websites

5.    Book/magazine publishers

6.    Interior/furniture design houses

7.    Textile design studios

8.    Independent creators

·         Graphic Designer

·         Illustrator

·         Logo creator

https://en.wikipedia.org/wiki/Visual_design_elements_and_principles Blog (teacher resource) on Cultural Influences in Design –

http://www.core77.com/posts/21455/Does-CultureMatter-for-Product-Design History of Graphic Design Website – http://www.designhistory.org/

History of Graphic Design Website – http://www.historygraphicdesign.com Blog on Cultural Influences in Graphic Design – http://boldthinkcreative.com/culturedesign/

UK Essays (How Graphic Design Affects Culture) – https://www.ukessays.com/essays/culturalstudies/how-graphicdesign-affects- culturecultural-studies-essay.php

World Press.com (article) – https://www.ukessays.com/essays/cultural- studies/how-graphic-design-affects-culture-cultural-studies-essay.php Best Examples of Typography Website – http://www.awwwards.com/websites/typography/

Creative Blog – 18 Typography resources – http://www.creativebloq.com/typography/top-typographyresources-912816 Photoshop Tutorials – https://helpx.adobe.com/photoshop/tutorials.html PDF from Getty Center (Principles of Design) –

https://www.getty.edu/education/teachers/building_lessons/principles_design.p df

PDF from Getty Center (Elements of Art) – https://www.getty.edu/education/teachers/building_lessons/elements_art.pdf WordPress.com – Article on Designing Digital Magazines – http://www.adobepress.com/articles/article.asp?p=1987679

Digital Layout resource – http://design.tutsplus.com/articles/15-indesign- tutorials-for- magazine-and-layout-design–vector-5456

Magazine Digest Creating Digital Design – http://www.magazinedesigning.com/ Trade Show resources – http://tradeshowresources.com/

Trade show digest digital magazine – http://www.tsnn.com/

Ed Tech Digital Portfolio resource – http://gettingsmart.com/2015/06/every student-should-have-a-digital-portfolio/

Digital Portfolio Best Practices resource – https://www.roberthalf.com/blog/writing-a-resume/3-digital-portfolio-best- practices-how-to-make-a-portfolio-that-pops

Royalty-Free Photos www.pexels.com Free Font Downloads www.dafont.com

Free Photoshop Brushes and Patterns www.brushking.eu www.brusheezy.com

Free Vectors and Assets www.freepik.com

Social Media Sizing Guidelines File Format Glossary

Weeks

Course Introduction Course Introduction

Exploring Adobe Photoshop

· Task 2

· Task 3

· Task 4

· Task 5

Graphic design and the immense professional opportunities it provides

·         Type

·         Select

·         Effect

·         View

·         WindowFile

·         Object

·         Type

·         Select

·         Effect

·         View

·         WindowFile

·         Object

·         Type

·         Select

·         Effect

·         View

·         Window

the meaning of color and its use in various cultures

the meaning of color and its use in various cultures

the meaning of color and its use in various cultures

color theory color wheel

the knowledge of different types of color perception

the color vocabulary needed to communicate as a designer ways in which color is created, manipulated and applied using software

manipulated and applied using software

Crop and straighten a photo to improve composition

Improve contrast and brightness in a photo with levels

Adjust the intensity of colors in a photo

·  Task 6

·  Task 7

·  Task 8

Combine images with a smooth transition

Create a composite with blend modes

Match color in a composite

Photography and photo manipulation

Students are introduced to: Adobe Photoshop and its user interface

·  Task 10

·  Task 11

create/open/save/import/export

the function of the toolbox and various menus

·         Change the image size

·         Work with layers

·         Work Adjust the image quality

·         Make Selections

·         Retouch Images

·         Use Colors

·         Add text and shapes

·         Combine Images, Apply filters

Use the touch shortcut for quick access

·         Open images and work with cloud documents in Photoshop

·         Make a composite with layers

·         Use selections to make a composite

·         Create a composite with a layer mask

·         Edit with adjustment layers Remove objects from photos: Remove objects with content- aware fill

clean up imperfections with the Spot healing

Retouch photos with the healing brush tool

Remove object with the clone stamp tool

Hide unwanted content with the patch tool

·         the basic tools for photography

its vocabulary, resolution, and file formats

the impact of various photographic compositions

the process of cropping and manipulate photographs to enhance meaning

layout and advert design/editorial design

professional layout examples and why some are more effective than others

Students are introduced to:

·         the fundamentals of two- dimensional design

the foundation of art, graphic design, and visual communication

the foundation of art, graphic design, and visual communication

·  Task 12

·  Task 13

·  Task 14

Details may be seen at Annexure-I

thumbnail sketches, rough sketches, and comprehensive design, the building blocks of the design process

the practice of creation of thumbnail sketches, rough sketches, and comprehensive design, the building blocks of the design process

the process of using a deliberate design process for generating ideas, and solving authentic

real-world problems

§  line

§  shapes

§  value

§  rhythm

§  textures

§  balance

§  unity

§  space

§  contrast

§  emphasis

§  repetition

§  space

§  contrast

§  emphasis

§  repetition

·         Adobe Illustrator and its user interface

·         the following functions: create/open/save/import/export

new file using Illustrator as per design requirements

the function of the toolbox and various menus

the concept of shapes, paths, and other shape building tools

the concept of masking in Illustrator

the concept of layers in Illustrator

Students are introduced to use the various tool in Toolbar:

·         Selection tool Direct selection tool

Magic wand tool

·  Task 15

·  Task 16 Details may be seen at Annexure-I

Designing different logotypes

Students are introduced to: what branding means

various fields of design that fall within branding

various fields of design that fall within branding

·         Task 17

·         Task 18

·         Task 19

·         Task 20

·         Task 21

·         Task 22

·         Task 23

·         Task 24

·         Task 25

Details may be – seen at Annexure-I

projects created by professionals in the field of identity design

what is the process of creating branding for a client/project

projects created by professionals in the field of identity design

vocabulary associated with logotypes

the tools they can use to create logotypes

vocabulary associated with logotypes

how dynamic logotypes are made

manipulate letterforms to create legible dynamic and meaningful logotypes

the creative process of logo design and will learn how to use it to create, analyze and manage concepts

·         Modern Logo

·         Vintage/Retro Logo

·         Texture logo

·         Minimalist Logo

·         Signature Logo

·         Emblem Logo

·         Mascots Logo

·         Abstract Logo

·         Modern Logo

·         Vintage/Retro Logo

·         Texture logo

·         Minimalist Logo

·         Signature Logo

·         Emblem Logo

·         Mascots Logo

·         Abstract Logo

Students are introduced to: what branding means

various fields of design that fall within branding

various fields of design that fall within branding

·  Task 26

Details may be seen at Annexure-I

·         Introduction to Corel Draw

·         Features of Corel Draw

·         Corel Draw Interface

·         Tool Box

·         Moving from Adobe Illustrator to Corel Draw

·         Common Tasks

·         Selecting Objects

·         Creating Basic Shapes

·         Reshaping Objects

·         Organizing objects

·         Linking Text to Objects

·​

·         Mastering with Text

·         Introduction Text Tool

·         Artistic and paragraph text

·         Wrapping Text around Object

·  Task 27

·  Task 28

Details may be seen at Annexure-I

·         How to make notable CV. Dos and Don‘ts of CV making.

·         Embedding Objects into text

·         Modern Logo

·         Vintage/Retro Logo

·         Texture logo

·         Minimalist Logo

·​

·         Emblem Logo

·         Mascots Logo

·         Abstract Logo

·         Motivational Lecture( For further detail please see Page No: 4)

·         Fundamentals of Motion Graphics

·         RGB Color Model

·         Frame Size

·         Resolution

·         Pixel Aspect Ratio Alpha Channels

·         Frame Rate

·         Time Code

·         Interpreting Footag How After Effects Works

·         Overview of panels Creating a project and

· Task 29

· Task 30 Details may be seen at Annexure-I

·         Creating a composition and arranging layers

·         Adding effects and modifying layer properties

·         Animating the composition

·           Previewing your work

·           Optimizing performance in After Effects

·         Customizing workspaces importing footage

·         Creating a composition and arranging layers

·         Adding effects and modifying layer properties

·         Animating the composition

·         Previewing your work

·         Optimizing performance in After Effects

·         Customizing workspaces

·         Controlling the brightness of the user interface

·         Finding resources for using After Effect

·         Creating a Basic Animation Using Effects and Presets

·         Importing footage using Adobe Bridge

·           Importing video clips

·           Importing stills

·         Importing a sequence of stills (interpreting)

·         Workplace ethics (See details at annexure II)

·         Creating a new composition

·           Applying effects to a layer

·         Changing parameters globally

·         Creating key frames

·         Key frame interpolation: auto, continuous, and Bezier interpolation

·         Temporal and spatial Interpolation

·         Success story (For further detail please see Page No: 5 and Annexure-III at the end)

·         Working With Masks

·         About masks

·         Creating a mask with the Pen tool

·         Editing a mask

·         Feathering the edges of a mask

·         Replacing the content of the mask

·         Animating Text

·         About text layers

·         Creating and formatting point text vs paragraph text

·         Using a text animation preset

·         Text on a path

·         Animating imported Photoshop text

·           Case Study (For further

detail please see Page No: 6)

Details may be seen at Annexure-I

·         Working with Shape Layers

·         Adding a shape layer

·         Creating custom shapes

·         Creating stars

·         Default properties of shape layers

·         Add properties FVTLM003 Page 18

·         Creating Groups

·         Time remapping

·         Motion sketch

·         The smoother

·         The wiggler

·         Auto orient

·         Distorting Objects with the Puppet Tools

·         About the Puppet tools

·         Adding Deform pins

·         Defining areas of overlap

·         Stiffening an area

·         Animating pin positions

·         Recording animation

·         Case Study (For further detail please see Page No: 6)

Introduction to Freelancing the concept of freelancing

how to become freelance and create a sustainable income

the ethical and professional way of becoming a productive freelancer

resources available for freelancing in the field of design

how to join freelancing sites

Creating portfolio on Facebook Instagram before creating profile on fiverr and upwork

Creating portfolio on Facebook Instagram before creating profile on fiverr and upwork Creating profile on upwork and fiverr

Creating profile on upwork and fiverr

Creating profile on upwork and fiverr

Creating profile on upwork and fiverr

How to get job on fiverr and upwork

How to get job on fiverr and upwork

How to get job on fiverr and upwork

How to get job on fiverr and upwork

How to get job on fiverr and upwork

How to get job on fiverr and upwork

Week 1

professionalism related to your course

4.

·         Install Adobe Photoshop

·         Patch the software

5.

·         Import shapes from different files

·         Perform image tracing to create shapes and art

6.

reflection explaining the elements you put in your work

Week 2

7.

http://www.photoshopessentials.com/

photoshop-text/text-effects/image-in-text-photoshop- cs6/

http://www.instructables.com/id/Image-inside-text- using-photoshop/?ALLSTEPS

8.

Use a mask in PhotoShop to create crazy scribble line portraits, watch this very short tutorial

VIDEO: https://vimeo.com/33344753

9.

·         Fix white balance, crop, and exposure using photo editing software as per requirements

·         Perform hue, saturation, and luminance adjustments using photo editing software as per requirements

·         Perform sharpening, noise reduction, grain, and lens correction using photo editing software as per requirements

·         Perform edits in a raw photo using photo editing software as per requirements

Week 3

10.

·         Blend multiple images and shapes in a single photo using photo editing software as per requirements

·         Perform shadows, light source, light reflection, and motion in the manipulated photo using

photo editing software as per requirements

11.

·         Export photos in different formats using photo editing software as per requirements

·         Export Photos in jpeg, png, tiff, and gif format

12.

·         Install Adobe Illustrator

·         Patch the software

·         Draw geometric diagram

Week 4

13.

·         Draw shapes with brushes

·         Create and import new brushes

14.

·         Use the Pen tool to trace the spider man icon

·         (For help: https://www.behance.net/gallery/29099185/Pe n-Tool-Exercises

15.

·         Use lines and shapes to create an illustration

·         Add color from the color library in an illustration

Week 5

16.

Go through the usual design process: sketch thumbnails, refine, and revise Choose a color scheme. Pick type. What sort of illustrations might you include? Photos, drawings, patterns… or maybe it‘s all type. I am looking for a comprehensive identity program here, something that can be applied to any number of promotional components, whether 2D, 3D, or digital. Next, apply the identity to these items:

•  Bag for coffee beans

•  Cup

•  Sleeve for the cup

•  Sample of packaging to transport baked good(s)

•  Reloadable payment card (similar to Starbucks‘)

•  One-page Brand Identity Guide listing typefaces, color

·         the scheme, etc.

Week 6

26.

●     Perform different tools in toolbar using adobe after effects as per requirements

●     Create shapes, text, camera, layers, and lights using adobe after effects as per requirements

●     Import data including videos, images, animations, and audio into project window using adobe after effects as per requirements

●     Perform animations, effects, and presets on layers using adobe after effects as per requirements

●     Install different plugins to generate effects using Adobe After effects as per requirements

Week 7

27.

§  Bayt.com – The Middle East Leading Job Site

§  Monster Gulf – The International Job Portal

§  Gulf Talent – Jobs in Dubai and the Middle East

·         Find the handy ‗search‘ option at the top of your homepage to search for the jobs that best suit your skills.

·         Select the job type from the first ‗Job Type‘ drop-down menu, next, select the location from the second drop-down menu.

·         Enter any keywords you want to use to find suitable job vacancies.

·         On the results page you can search for part- time jobs only, full-time jobs only, employers only, or agencies only. Tick the boxes as appropriate to your search.

·         Search for jobs by:

§  Company

§  Category

§  Location

§  All jobs

§  AgencyIndustry

29.

Step 1: Personal Info Step 2: Professional Info Step 3: Linked Accounts

Sep 4: Account Security

Week10

30.

·         Add Personal Information

·         Add Educational details

·         Add Experience/Portfolio Add contact details/profile links

Week11

31.

§  Bayt.com – The Middle East Leading Job Site

§  Monster Gulf – The International Job Portal

§  Gulf Talent – Jobs in Dubai and the Middle East

·         Find the handy ‗search‘ option at the top of your homepage to search for the jobs that best suit your skills.

·         Select the job type from the first ‗Job Type‘ drop-down menu, next, select the location from the second drop-down menu.

·         Enter any keywords you want to use to find suitable job vacancies.

·         On the results page you can search for part- time jobs only, full-time jobs only, employers only, or agencies only. Tick the boxes as appropriate to your search.

·         Search for jobs by:

§  Company

§  Category

§  Location

§  All jobs

§  Agency