Graphic Design Principles PDF

## LESSON 1 ### What is Graphic Design? Graphic design is defined as "the art and practice of planning and projecting ideas and experiences with visual and textual content." In other terms, graphic design communicates certain ideas or messages in a visual way. These visuals can be as simple as a...

## LESSON 1 ### What is Graphic Design? Graphic design is defined as "the art and practice of planning and projecting ideas and experiences with visual and textual content." In other terms, graphic design communicates certain ideas or messages in a visual way. These visuals can be as simple as a business logo, or as complex as page layouts on a website. *(American Institute of Graphic Arts)* ### What is Visual Design? Visual design aims to improve a design's/product's aesthetic appeal and usability with suitable images, typography, space, layout and color. Visual design is about more than aesthetics. Designers place elements carefully to create interfaces that optimize user experience and drive conversion. *(Interaction Design Foundation)* "A visual designer goes beyond with a holistic aesthetic aiming to work consistently across multiple touchpoints, creating entire visual languages for a brand or product." *(Gordon Reid)* ## Infographic The term "infographic" is a short term for information graphic, which refers to an image that combines information, storytelling, and perceptions that help the cause of an individual or an institution to communicate a message to viewers. Images are very effective in communicating messages because they are easily understood. ## BASIC ELEMENTS ### Lines - Create Emphasis - Direct the Eye - Sense of Movement Lines can form shapes that can catch the attention of a viewer. They can be sharp, be made up of broken lines and fine or thick lines, and can create different impressions to viewers. ### Color One of the most powerful and influential elements. Using the right combination of colors can catch the attention of a passerby or even glancing viewers. - **Combining colors and having a good command on color mixtures and combinations can catch the attention of the viewers.** - **For example, red, orange, and yellow are strong or warm colors that can easily attract attention.** - **Blue, green, violet, and indigo are cool or soft colors.** ### Color Psychology - **Red:** Passion, excitement, love - **Pink:** Soft, reserved, earthy - **Purple:** Mysterious, noble, glamorous - **Blue:** Wisdom, hope, reason, peace - **Green:** Nature, growth, freshness - **Yellow:** Hope, joy, danger - **Orange:** Warmth, kindness, joy - **White:** Truth, indifference - **Black:** Noble, mysterious, cold *(Cherry, K. (2022, November 29). Can color affect your mood and behavior?. Verywell Mind. https://www.verywellmind.com/color-psychology-2795824)* ### Color Theory **Formula:** - **Monochromatic** **HUE | SATURATION | VALUE** ### Analogous A colour scheme that uses colours that are next to each other on the colour wheel ### Complementary Uses two colours that are opposite each other on the colour wheel. ### Split Complementary Like the complementary scheme but instead of using the colour directly opposite the base colour, use the two colours that are either side of it. ### Triadic Uses 3 colours that are evenly spaced around the colour wheel. ### Shape - **These are defined by the enclosure created by a combination of multiple lines.** - **Shapes express different colors.** - **Shapes are universal symbols that do not require language, but they can give a specific meaning regardless of the background and ethnicity of the viewer** **Geometric shapes** - Triangle - Rectangle - Circle - Heptagon - Square - 5 Point Star - Cube - Octagon - Parallelogram - Diamond - Pentagon - Nonagon - Ellipse - Hexagon - Pie - Decagon **GEOMETRIC** **ORGANIC** **FREE FORM** ### Typography - Style or appearance of text - The Art of Working with Text - Style or appearance of text - THE ART OF WORKING WITH TEXT - Style or appearance of text - The art of working with text ### Serif Fonts Serif fonts have little strokes called serifs attached to the main part of the letter. Because of their classic look, they're a good choice for more traditional projects. They're also common in print publications, like magazines and newspapers. ### Sans Serif Fonts Sans serif fonts don't have that extra stroke -hence the name, which is French for without serif. Sans Serif fonts tend to be easier to read on tablets and phones. **Pair your fonts like this:** - **TAN MON CHERI** - **maleah** - **LEAGUE SPARTAN** - **moontime** - **kollektif** - **moontime** - **OSWALD** - **source sans pro** ### Display Display fonts come in many different styles, like script, blackletter, all caps, and are just plain fancy. - **Script** - **Blackletter** - **ALL CAPS** **FANCY** Because of their decorative nature, display fonts are best for small amounts of text, like titles and headers and more graphic-heavy designs. ## Graphics and Layout **6 Principles** - **THINK LIKE A DESIGNER** ### Balance Refers to how elements are evenly arranged throughout the screen. It means that no part of the screen is given too much weight as compared to any parts unless it is intentional. - **Balance: Symmetrical** - **Balance Asymmetrical** ### Emphasis Refers to giving more weight or focus to some elements on the screen. It is used to focus attention on a certain part or an element. **Creating a Focal Point** ### Proximity and Unity Are principles of design where closely related elements (e.g., graphics, text) should be placed together so that they will be perceived as one unit of the design. Alignment gives order to the design. In graphic design, alignment is used to group and organize elements to supports balance. It also creates connections between elements to support proximity and unity. ### Pattern, Repetition, and Rhythm Are the repetition of visual element or pattern in an image that supports proximity and unity. Rhythm is when visual elements create a sense of organized movement. **PATTERN** ### Proportion Refers to the relative sizes and scales of the different elements of the design in connection to the overall design. Its composition, to be said proportionate, must be wellsized and thoughtfully positioned on its right place. the viewer's attention. ### Variety Variety refers to how the design must contain different elements to catch prevents the design from being monotonous. ## LESSON 2 ### Grade 12 Applied Subject ### Principles and Basic Techniques of Image Manipulation - **Exposure** - **Contrast** - **Saturation** ### Definition Image Manipulation is the process of editing and modifying an image using various methods, techniques and software to achieve the desired result. By manipulating an image, the resulting image better satisfies the communicative purpose it was edited or modified for. ### When manipulating images, one must attend to these aspects - **Background Color** Background color must match and complement the image. If the contrast between the image and background color is not good, background color must be changed to enhance the actual image. - **Shadow** Shadows are added to add realism to the image. It will also add aesthetic value to the entire image - **Proportion** In multiple images, pictures must be resized to make the combined images more realistic. Also, they must be proportionate with each other and to the space they occupy. This is not only to make them fit, but to help convey message of the image better. - **Blending Colors** The colors used in the image should complement each other. Also, the blending of colors must enrich the message the image conveys. - **Emphasis on Detail** Be sure that the most crucial part of the image is given more focus. Every part is important, but there is a part that contributes in bringing the message across. ### Basic Techniques in Image Manipulation These are the basic techniques to manipulate an image. - **Changing Background and Colors** Changing colors is done to improve the blending of colors within the image. Background colors can also be changed to blend or match with the image. - **Cropping Image** Cropping is cutting an unimportant part of an image. - **Resizing Image** Resizing is changing the original size of the image. It can enlarge or shrink the image. This is done to ensure proportion or to make the image fit on where it will be placed. - **Inserting Images** Inserting images is adding another image to an existing image. This is used to integrate objects that are necessary in the image but are not originally in it. - **Changing Contrast** Contrast is modified to improve the color difference and even brightness between different objects within an image. This is performed to improve the visibility of objects in the image. - **Changing Brightness** Brightness is modified to improve the visibility of the entire image. This can be done for different reasons such as to emphasize the message of the image or to improve the quality of light in the image ## LESSON 3 ### ICT and SOCIAL RESPONSIBILITY ### ON AIR ### ICT for Advocacy and Developmental Communication ICT for development or ICT4D is the use of information and communications technology in the field of international development, socioeconomic development, and human rights. The idea behind this is using ICT for the welfare of less fortunate individuals, enabling the development of society. **DICT** *(DEPARTMENT OF INFORMATION AND COMMUNICATIONS TECHNOLOGY - 2016)* The Philippines has been called the "ICT Hub of Asia" because of the rapid growth of ICT-related business in it. Hence, the government created an ICT Department that will plan, develop, and promote ICT for national development. ### ICT4D There are several success factors for ICT4D. First is the community or the group that ICT would solicit support from. Another is the creation and the use of facilities that the ICT application offers. Last, the target of the advocacy should be understood. Such target or purpose includes poverty, education, health care, or governance. ICT4D success factors are heavily project dependent. So the cited success factors here aren't true for all ICT4D cases. By using ICT, the current conditions of the target advocacy can be studied by the community. The aim is to bridge the community with the aid of ICT to the marginalized group or the target group **HORIZONTAL AREAS** - INFRASTRUCTURE - GENERIC SERVICES - REG. FRAMEWORK - FINANCING - **HUMAN CAPITAL** **DIAGONAL AREAS** - e-Business - e-Government - e-Health - e-Culture - e-Learning - e-Media **VERTICAL SECTORS** ICT can be used to channel the benefits directly to less privileged people through the efforts of the government, NGOs, businesses, and other institutions. This principle can be visualized by the ICT4D cube. It represents social transformations that results from the combined effect of appropriate technology and effective policy. In short, it is a three-way interaction among technology, society, and policy. The ICT4D cube describes the fusion of different aspects of the society and their interaction with ICT Government services can be products. Generic or basic services are those thata strengthened and improved by certain government ofice provides. The generic services integrating ICT into them. are partnered with the infrastructure because this is the basic requirement to provide these respective services. **Fig. 7.1. The ICT4D cube** ### ICT4D (Cont.) These parameters are supported by human capital, financing. and framework. Human capital refers to the manpower dedicated to fulfill the tasks and activities for development. This can be either government officials and personnel, or NGO volunteers. Financing refers to the funding or money that supports the expenses on carrying out activities for development. Finally, the framework refers to the structure of the services and resources dedicated for development. On the front side of the cube, additional support is provided by ICT. This support can be in the form of e-business, e-governnment, e-health, e-culture, e-learning, or e-media. All of these are catalysts for the efficiency of human capital, financing. and framework. E-business is an ICT facility that can handle financial transactions online that benefits the recipient of the development. E-health is an ICT facility that provides health services. It may include online NER health transactions such as diagnoses, laboratory results, and health records maintenance. E-culture is a facility of ICT to promote the customs of an ethnic group or local citizens. Furthermore, local food, religion, and traditions are part of this parameter. E-learning refers to the facility of ICT to educate individuals in the methods of development framework. Finally, e-media refers to the ICT arm in disseminating and informing the public about the development of the program ### The Power of Social Media The development and improvement of communication is continuouslyy evolving. The introduction of mobile devices, faster computers, and faster Internet connections paved the way for more accessible and available Web applications. Today, mobile phones and social media are everyday norms. Issues and posts shared in a social media Web site can reach milions of users within a shorter period of time as compared to conventional methods. Photos of some abusive individuals and their crimes have been posted on social media, so that people are informed. Some users also post images of missing people. Some people even share posts about other people doing good deeds that are often unnoticed. ## LESSON 4 ### Empowerment Technologies ### Team Structure and Dynamics of ICT Content ### Introduction The computer age has provided us with different tools on how to accomplish tasks easier. Nowadays, writing reports, making slide presentations, and organizing and analyzing spreadsheets data have never been easier and more efficient using software. We can now communicate instantaneously with others using instant messengers, video conferencing tools, and emails. The latest development in the world of information and technology is the rise in popularity of online collaboration. ### Online Collaboration Through online collaboration, teams can now work together remotely that makes accomplishing tasks and finishing projects more convenient. Using available online collaboration tools changes the way how we work at office or even at home. It also changes the ways of studying. Now, a student can communicate with his or her teacher even if he or she is not at school, and quizzes and exams can now be taken and submitted online ### Team Structure and Dynamics of ICT Content Online collaboration is a process where a team or group of people work on projects/contents, does review and modifications, and shares modifications made to the entire team via online platform, so that the team will always have an update on the project or content status ### Team Manager Team manager (Team Leader or Content Strategist) - The team manager oversees how the entire team operates. As the key strategist of the team, he or she ensures that the team is organized, that the work of every team member is in synched with everyone, and that every team member is motivated. He or she sets priorities and ensures that these are followed. ### Editorial Manager The editorial manager implements the plan. He or she is the one who determines who will be the content writers, content producers, and designers. The editorial manager ensures that the team's work is done on time. ### Content Curator The content curator suggests inputs on what content will be included in the project. A content curator must always be updated on the latest and interesting news, development, and resources regarding the matter at hand, especially the matter of the content. ### Content Syndicator The content syndicator enables the content to be shared to external sites or third-party sites or even social media. The process of content syndication will increase the exposure of the teams' content. ### Analytics Expert The analytic expert studies the data and ensures that the content is achieving its objectives. An analytics expert studies what part of the content must be retained, updated, or deleted from the project contents. ### Website Manager The website manager makes the content available to public. This may include publishing the content to a website, to a social media site, or to a video streaming site. The website manager updates the site and ensures that only updated information is included. He or she also ensures that the website has all the functionality needed for it to achieve better performance and achieve the site's objectives. ### Nature and Purpose of Online Platforms In ICT, a platform is an environment or group of technologies used as based on which software, processes, or technologies are developed. It is the environment from which one can run software. Platforms can be defined as the technology that supports other technologies. In developing software and many other applications, it is always a must to consider which platform it will work with. Nowadays, software and applications are created with different versions that work in different platforms. ### Examples of platforms, but not limited to... 1. **Operating systems like Windows and Mac OS allow many software and applications to be installed in personal computers.** 2. **Mobile platforms allow the installation and running of mobile applications in mobile phones.** 3. **Browsers may also be considered a platform. There are websites and web applications that are specifically created for a specific browser. Sometimes, users will encounter website that specifically suggests what specific browser is preferred.** 4. **A gaming system is another type of platform. These gaming platforms allow playing games Of third-party game developers. Examples of these are games specifically created for Xbox or PlayStation platforms.** **An application or software that is built for a specific platform can be, by itself, considered a platform. To elaborate, a web browser which is created for a specific operating system platform may be the platform of some websites which prefer that web browser. These websites can also be a platform for some web applications.** **A platform is important since it will be the based on which a particular software will work from. Without a platform, the users would not be able to use the software that they want** ### What is an Online Platform? An online platform is is a group of technologies especially created to support other technologies in the online environment. In simple statement online platform is a tool which user can use to launch his or her ICT content into the web. ### Some examples of online platforms: * **Social media sites** These provide an avenue in which one can share ideas, videos, pictures, and other multimedia contents. Facebook and Twitter are examples of social media sites. * **Cloud servers** They provide a platform in which one can save and retrieve all their data or files in as long as there is an internet connection, and there are necessary devices to access the cloud servers. Google Drive, Dropbox, and OneDrive are commonly used cloud servers. * **Website building/creation sites** Iln simple terms, these are the websites that enable users to create their own website or webpage. Weeby, Wordpress, and Wix are the most used website building platforms. * **Video Sharing Sites** They primarily provide the platform from which a user can share his or videos. YouTube is one of the most popular platforms that are considered video sharing site. ### Basic Web Principles and Elements? To be effective in communicating information, similar with the principles learned in creating effective slide presentation and infographics, there are basic design principles that must be considered when creating a website. These can be very helpful reminders to keep the design simple and understandable. ### Basic Principles and Elements of Web Design 1. **Uniqueness** 2. **Simplicity** 3. **Consistency** 4. **Understandability** 5. **Platform Compatibility** 6. **Visuality** 7. **Interactivity** 8. **Fast Loading Capability** 9. **Accessibility** 10. **Communicativeness** ### Web Design Templates using WYSIWYG There are various platforms that can be used to create a webpage. These platforms offer you predesigned pages to choose from. Other platforms enable users to create webpage based on their own design by using familiar tools like Microsoft Word. Examples of this website creation sites are Weebly, Wordpress, and Wix. ## LESSON 5 ### Website Creation Ethical Considerations ### Empowerment Technologies 12 ### Website Mining **29 Nov** Website Mining in relation to Cybercrime *(Posted at 12:27h in dndfeature by Disini & Disini Law Office)* **1. Cryptocurrency Mining.** The recent years have seen a huge boom in the use of cryptocurrencies driving their prices up and introducing people to a new investment opportunity. Among the mean to obtain cryptocurrency is through mining. Mining is analogous to mining gold, there being a finite number of coins per cryptocurrency. Mining requires the use of immense amounts of computing power. Miners often utilize multiple Graphics Processing Units in one computer just to get to a point where they can obtain a profit. The term mining describes how a coin is received. The computer will try to solve a hash function-a one-way encryption without a key. There is no definite way to solve thi key will to a hash function. The computer will go through trial and error, attempting random combinations in order to get the right one. This is akin to how miners hack a wall randomly till they strike gold. Needless to say, for a computer to repeatedly try random sequences of solutions, a lot of computing power will be needed. This is why miners utilize extremely powerful rigs which consume exorbitant amounts of power to run and to keep within a safe operating temperature. Running a cryptocurrency mining program pins the Graphics Processing Unit and the Central Processing Unit of a computer at maximum utilization. This already puts heavy strain on the components, wearing them down, more so if the computer is not adequately cooled. ### Using Ethics in Web Design *(Morten Rand-Hendriksen | Mar 22, 2018)* Every design decision is a decision made on behalf of other people, those we often refer to as "end-users." As the creators of designed experiences used by people all over the world, it is our responsibility to think carefully about how our decisions impact the person on the other end of the conversation. Even small and seemingly insignificant decisions can have enormous implications, and ethics can help ensure the longevity of our designs and help us carve paths to better futures for everyone. **WE MAKE THINGS** **(Using Ethics In Web Design Developers and designers need to initiate a conversation about the ethics of web design, i.e. how do we define and measure goodness and rightness in the digital realm? It's important to discuss responsibilities... Smashing Magazine/Mar 22, 2018)** ### Project Management for ICT Content Project management for ICT contents, just like any projects in general, follows the standard phase of project management life cycle. However, there may be some differences in some phases due to the uniqueness of each project. ### Initiation - The main goals and objectives of the project are identified in this phase. In here, all possible problems are determined to ensure that their effect could be minimized or eliminated ### Planning - The specific steps or action plan on how to achieve the main goals or objectives set in the initiation phase are identified in this phase. The action plan, set in the initial planning phase, maybe revised, as the project goes on since the actual information that may affect the project is now available. Revision in action plan is done to ensure that the objectives and the original timeline can still be achieved. ### Development and Implementation This is the phase where the plan is executed, so that the goals and objectives can be achieved Here, the specifics of the project as planned are developed. Following the development is the implementation phase where the developed project is executed. In case of online ICT projects, this can be the online publishing of the project. ### Monitoring and Controlling This phase is done in order to ensure that the project goals and objectives are achieved. In here, the plans are compared with the actual results so that any necessary corrections can be done in case the planned results are not achieved. Monitoring and controlling are a continuous process to ensure that the project achieves its goals and objectives. ### Closing This involves the evaluation of whether the project achieves its desired result or its goals and objectives. It is also done to ensure that all the required works have been performed.