BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
Imaging and Design For the Online Environment covering
to the topics of:
Introduction to Imaging and Design
for the Online Environment
Basic Principles of Graphics
1. Lines- are fundamental building blocks of
visual design. They can be used to create
structure, define boundaries, guide the eye,
evoke specific emotions. Lines can be straight,
curved, thick, thin, dashed, or dotted, each
creating a different visual impact.
2. Shapes- are closed lines, creating forms with
distinct outlines. They can be geometric (squares,
circles, triangles, etc.) or organic (free-flowing
curves). Shapes play a vital role in composition,
creating balance, contrast, and visual interest.
3. Textures- textures add depth and visual
richness to a design. They can be physical
(rough wood, smooth silk, etc.) or simulated
(digital patterns). Textures create a tactile
experience, inviting users to interact with
the visual elements.
4. Patterns- are repetitive design that
visual rhythm and interest. They can be
geometric,, organic, abstract, or
representational. Patterns can be used for
backgrounds, borders, or even to create
focal points within a design.
Fundamentals of Layout and
Composition
Grid Systems Visual Hierarchy White Space
Grid systems provide a Visual hierarchy is the White space, or negative
structured framework for process of organizing space, is the empty area
organizing content on a elements on a page to around design elements. It
webpage. They help create guide the user’s eye and helps to create visual
visual harmony and ensure emphasize important breathing room, improve
consistency across different information. This can be readability, and enhance the
sections. Grids can be achieved through size, overall aesthetic appeal of a
simple or complex, color, contrast, and design.
depending on the complexity placement of elements.
of the design.
Color Theory and Palettes
Color Wheel
The color wheel is a fundamental tool for
understanding color relationships. It depicts the
spectrum of colors and their relationships, such
as primary, secondary, and tertiary colors.
Color Harmony
Refers to pleasing combinations of colors that
create visual appeal. Common color harmonies
include complementary, analogous, triadic, and
monochromatic.
Color Psychology
Colors evoke specific emotions and
associations. For instance, red is often
associated with passion and energy, while
blue evokes calmness and tranquility.
Color Contrast
Color contrast is the difference in lightness
or darkness between two colors. High
contrast makes text and images more
readable and visually appealing, while low
contrast can make a design difficult to read.
Typography and Font Selection
Font Family Characteristics Uses
Serif Traditional fonts with decorative Body text, book covers, magazines
strokes at the ends of letterforms.
They are often considered more
formal and elegant.
Sans Serif Modern fonts without decorative Headings, titles, web design
strokes. They are often considered
cleaner and more minimalist.
Script Fonts that resemble handwriting. Invitations, logos, signatures
They can add a personal and
decorative touch to a design.
Monospaced Fonts where each character occupies Coding, spreadsheets, terminal
the same width. They are often used output
for code and technical documents
Imagery and Visual Assets
1. Stock Photography – stock photography is a convenient source of images
for websites and other online projects. Websites like Shutterstock, Adobe
Stock, and Unsplash offer a vast library of images for a range of topics and
styles.
2. Custom Illustrations – custom illustrations can provide a unique visual
identity and enhance brand recognition. They can be commissioned from
freelance artists or created using design tools like Adobe Illustrator.
3. Icons – icons are small graphical symbols used to represent actions,
objects, or concepts. They enhance usability and improve user experience
by providing clear visual cues.
4. Video Content – video content is increasingly popular online. It can be
used to explain concepts, showcase products, or tell stories. Websites
often incorporate video embeds from platforms like YouTube, Tiktok, Viu,
WeTv, or Vimeo.
User Interface (UI) Design
• Usability -
usability refers to the ease with which users can interact with a
website or application. A good UI design prioritizes intuitive
1 navigation, clear labeling, and consistent interactions.
• Accessibility
- accessibility is crucial for ensuing that websites and application
are accessible to all users, regardless of their abilities. It includes
2 factors like color contrast, keyboard navigation, and screen reader
compatibility.
• Aesthetics
- aesthetics play a role in user experience, but they should not
3 overshadow functionality. A well-designed UI strikes a balance
between visual appeal and usability.
Responsive and Adaptive Design
Tablet Optimization – Tablet devices offer a unique screen size and
orientation, requiring specific design considerations to ensure optimal
viewing and interaction.
Mobile First Design – mobile-fit design is a strategy where designers
prioritize the mobile experience, building the websites from the ground up to
be responsive and user-friendly on smaller screens.
Desktop Layout – desktop layout typically have more screen real estate,
allowing for more complex designs and learner amounts of content.
THANK YOU FOR LISTENING!
