Graphics Design  ·  Level 6
User Experience Design
Chapter 3: Create visual design
📚 0 Topics
⚑ What you will be able to do

By the end of this chapter, you will be able to:

  • Develop a clear content strategy that supports both project goals and user needs.
  • Create and organize content accurately to meet all project requirements.

These skills will help you design user experiences that are not only visually appealing but also meaningful and effective in real-world projects.

Visual design is a fundamental component of user experience design, especially in the field of graphics design where the aesthetic and functional presentation of information directly influences user engagement and satisfaction. In Kenya’s dynamic creative industry, visual design principles help graphics designers create compelling interfaces that resonate with local users while meeting international standards. This chapter delves into the core concepts of visual design, providing graphics design professionals with the knowledge to craft visually appealing and effective user experiences.

1.1 Introduction to Visual Design

Visual design is the art and practice of strategically arranging visual elements to communicate a message clearly and attractively. It plays a critical role in graphics design by shaping how users perceive and interact with digital and print media. For Kenyan graphics designers working in diverse sectors such as advertising agencies, publishing houses, and digital media firms, mastering visual design principles ensures that their work not only appeals aesthetically but also enhances usability and brand recognition.

1.1.1 Understanding Visual Design and Its Role in Graphics Design

Visual design refers to the deliberate use of imagery, color, typography, space, and layout to create a visually coherent and engaging experience. In graphics design, it serves as the bridge between content and the audience, enabling effective communication through visual storytelling.

  • Communication through visuals: Visual design translates complex information into understandable graphics, crucial in educational materials produced by institutions like KNEC or health campaigns by county hospitals.
  • Brand identity establishment: Designers develop logos, color schemes, and typography that reflect the brand values of organizations such as Equity Bank or Safaricom.
  • Enhancement of usability: Proper visual hierarchy guides users through interfaces intuitively, improving navigation on websites or mobile apps.
  • Emotional connection: Visual elements evoke feelings and moods that influence user decisions, important in marketing campaigns for hotels or retail businesses.
  • Competitive differentiation: Unique visual styles help businesses stand out in Kenya’s crowded market, such as artisanal cooperatives showcasing their products online.

1.1.2 Principles of Visual Design

Visual design is governed by foundational principles that ensure clarity, coherence, and aesthetic appeal. These principles assist graphics designers in maintaining consistency and effectiveness across projects.

Balance

Balance involves distributing visual weight evenly or asymmetrically to create stability. In Kenyan advertising billboards, symmetrical balance might be used to convey formality, while asymmetrical balance can evoke dynamism and creativity.

Contrast

Contrast highlights differences between elements, such as color, size, or shape, to draw attention and improve readability. For example, using bold colors against muted backgrounds in hospital signage improves visibility.

Alignment

Alignment organizes elements along common edges or centers to create a structured and professional appearance, critical in corporate reports produced by county government offices.

Repetition

Repetition reinforces consistency by reusing design elements, which strengthens brand identity in materials like SACCO newsletters or banking mobile interfaces.

Proximity

Proximity groups related items together to indicate their relationship, enhancing information hierarchy in educational brochures or user manuals.

1.1.3 Elements of Visual Design

The elements of visual design are the building blocks that, when combined using the principles above, create effective graphics. Each element contributes uniquely to the overall composition.

Color

Color influences mood, conveys meaning, and attracts attention. Kenyan designers often use culturally significant colors, such as green for agriculture cooperatives or red for emergency services, to communicate effectively.

Typography

Typography involves selecting fonts and arranging text to ensure legibility and style. For instance, clear sans-serif fonts are preferred in financial reports by banks like KCB to maintain professionalism.

Imagery

Imagery includes photographs, illustrations, and icons that support the message. Tourism boards in Kenya use vibrant images of landscapes to attract visitors.

Space

Space, or white space, provides breathing room around elements, preventing clutter and improving focus. Well-spaced layouts in university prospectuses enhance readability.

Shape and Form

Shapes create structure and can symbolize ideas, such as circles indicating unity used by cooperatives or sharp angles conveying innovation in tech startups.

1.1.4 Visual Design Process in Graphics Design

The process of creating visual designs is methodical, ensuring that the final product meets user needs and client objectives through iterative refinement.

  1. Research and analysis: Understanding the target audience, project goals, and context. For example, designing a campaign for NEMA requires knowledge of environmental concerns and public awareness levels.
  2. Concept development: Sketching initial ideas and exploring visual styles that align with the brand and message.
  3. Design creation: Using tools like Adobe Illustrator or CorelDRAW to develop detailed visual compositions.
  4. Review and feedback: Presenting prototypes to clients or stakeholders such as county government officials to gather input.
  5. Revisions: Refining the design based on feedback to improve clarity, aesthetics, and usability.
  6. Final delivery: Preparing files for print or digital deployment, ensuring correct formats and resolutions.

Practice Questions

  1. Explain how the principles of balance and contrast influence the effectiveness of visual design in Kenyan retail advertising. (10 marks)

  2. Describe five elements of visual design and discuss how each can be applied in creating a user-friendly interface for a banking mobile app. (15 marks)

  3. Outline the six steps involved in the visual design process and explain the importance of each step in ensuring project success. (15 marks)

The rest of this chapter
🔒

Create a free account to open more of this chapter.

Free: practical guides, quick cards, workplace scenarios and more.

Create a free account
🔒1.1 Meaning of Terms

In the field of graphic design, especially within the Kenyan professional context, understanding the precise meaning of key terms related to visual design is essential. These terms form the foundation of communication among designers, clients, and stakeholders…

🔒1.1 Introduction to Visual Design

Visual design is a fundamental aspect of user experience (UX) design, particularly for graphics design professionals in Kenya who must create compelling and effective interfaces that resonate with diverse users. It involves the strategic use of color, typograp…

🔒1.1 Visual design software tools

Visual design software tools are essential for graphics design professionals in Kenya to create compelling and effective user experiences. These tools enable designers to translate concepts into visual forms that communicate brand messages, enhance usability,…

🔒4.1 Visual Design Software Techniques

Visual design software is essential for graphics designers in Kenya to create compelling and effective user experiences. Mastery of software techniques enables professionals to translate creative ideas into polished visual outputs that engage target audiences…

Chapter Summary

This chapter provided a comprehensive introduction to visual design, establishing its foundational role in creating engaging and effective user experiences. Key terms related to visual design were clearly defined to build a strong conceptual understanding. The chapter then explored the principles and elements that constitute visual design, emphasizing how they contribute to the overall aesthetic and functionality of digital interfaces. Various visual design software tools were introduced, highlighting their capabilities and relevance in modern design workflows. Additionally, the chapter examined essential software techniques that enhance the creation and refinement of visual elements. Together, these topics equip learners with the knowledge and skills necessary to produce visually appealing and user-friendly designs.

Self-Assessment

🔒 PDFDownload this self-assessment, with answers

A. Written Assessment

  1. What does the term "visual hierarchy" mean in graphic design? (2 marks)
  2. Identify three key principles of visual design and briefly explain each. (6 marks)
🔒20 more in this section.

Chapter Examination Questions

🔒 PDFDownload these examination questions, with worked answers

SECTION A (40 Marks) - Answer ALL Questions

  1. Define the term visual hierarchy and explain its importance in creating effective graphic designs for a Kenyan retail brand such as Tuskys. (4 marks)
  2. Differentiate between raster and vector graphics, citing examples of when each would be appropriate in designing logos for Kenyan SACCOs. (4 marks)
🔒18 more in this section.

Chapter Practical Activities

Practical 1: Develop wireframes for a mobile banking app user interface

Graphics Design · Level 6
User Experience Design
PRACTICAL ASSESSMENT
TIME: 4 HOURS
⬇ PDFCandidate Instructions (Candidate Tool)

Type: Individual

INSTRUCTIONS TO CANDIDATE:
1.  You are required to perform the following task:
i.  Develop wireframes for a mobile banking app user interface with screen dimensions of 1080mm x 1920mm as per the provided design brief.
2.  You have been provided with the following resources for the practical task:
Tools & EquipmentMaterials
Computer with professional design software and word processing software and internet connectivityA4 printing paper
Pencils
Eraser
Ink pens/ball pens
Colored pencils
⬇ PDFResources Required (Cutting List)
S/NItemQuantity
1Computer with professional design software and word processing software and internet connectivity1 Computer Per Candidate
2A4 printing paper5 Pieces Per Candidate
3Pencils1 Set Per Candidate
4Eraser1 Pc Per Candidate
5Ink pens/ball pens2 Pcs Per Candidate
6Colored pencils1 Set Per Candidate
⬇ PDFAssessor Guide
Items to be EvaluatedMarks AvailableMarks ObtainedComments
TASK 1: Conduct user research and prepare research brief
Conducted user research relevant to mobile banking applications
(Award 2 marks for comprehensive research, 0 if incomplete)
2
Collected and documented user data effectively
(Award 2 marks for clear data collection, 0 if missing)
2
Analyzed research findings to identify user needs
(Award 2 marks for correct analysis, 0 if inaccurate)
2
Prepared a clear and concise research brief
(Award 2 marks for well-prepared brief, 0 if insufficient)
2
Sub-Total8
TASK 2: Develop wireframes for user interface
Created wireframes showing clear layout of navigation and content
(Award 3 marks for logical and user-centric layout, 0 if poor)
3
Applied elements of design such as balance, contrast, and alignment
(Award 3 marks for effective use of design elements, 0 if missing)
3
Applied principles of design including hierarchy and consistency
(Award 3 marks for correct application of principles, 0 if poor)
3
Demonstrated creativity and visual impact in wireframes
(Award 3 marks for creative and impactful design, 0 if lacking)
3
Sub-Total12
TASK 3: Incorporate micro-interactions in wireframes
Included purposeful micro-interactions to enhance usability
(Award 2 marks for relevant micro-interactions, 0 if absent)
2
Ensured responsiveness of micro-interactions in design
(Award 2 marks for responsive design, 0 if not evident)
2
Designed micro-interactions to delight users
(Award 2 marks for user delight considerations, 0 if missing)
2
Maintained consistency of micro-interactions across wireframes
(Award 2 marks for consistent micro-interactions, 0 if inconsistent)
2
Sub-Total8
TASK 4: Present final wireframe deliverables
Presented wireframes in PDF or PNG format with clear labelling
(Award 2 marks for well-labelled deliverables, 0 if incomplete)
2
Submitted a typed research brief in Word document format
(Award 2 marks for proper submission, 0 if missing)
2
Sub-Total4
PRODUCT CHECKLIST
Wireframes match specified screen dimensions of 1080mm x 1920mm
(Award 2 marks if dimensions match, 0 if incorrect)
2
Wireframes show logical and intuitive user flow
(Award 3 marks for clear user flow, 0 if confusing)
3
Design demonstrates consistent application of design elements and principles
(Award 3 marks for consistency, 0 if inconsistent)
3
Micro-interactions are clearly indicated and enhance usability
(Award 2 marks if micro-interactions are clear, 0 if missing)
2
Sub-Total10
GRAND TOTAL42
ASSESSMENT OUTCOME:   ☐ Competent    ☐ Not Yet Competent (competent if at least 50%)

Practical 2: Design color schemes for a mobile banking app interface 1080mm x 1920mm

Graphics Design · Level 6
User Experience Design
PRACTICAL ASSESSMENT
TIME: 4 HOURS
⬇ PDFCandidate Instructions (Candidate Tool)

Type: Individual

INSTRUCTIONS TO CANDIDATE:
1.  You are required to perform the following task:
i.  Design and deliver a color scheme mood board and a mobile app interface color layout sized 1080mm x 1920mm for a digital banking app.
2.  You have been provided with the following resources for the practical task:
Tools & EquipmentMaterials
Computer with professional design software (Adobe XD, Figma)Glossy printing papers
Internet connectivityA4 printing paper
Pencils
Eraser
Colored pencils
Ink pens/ball pens
⬇ PDFResources Required (Cutting List)
S/NItemQuantity
1Computer with professional design software (Adobe XD, Figma) and word processing software1 Computer per Candidate
2Internet connectivity1 Connection per Candidate
3Glossy printing papers2 Pieces per Candidate
4A4 printing paper5 Pieces per Candidate
5Pencils1 Set per Candidate
6Eraser1 Pc per Candidate
7Colored pencils1 Set per Candidate
8Ink pens/ball pens2 Pcs per Candidate
9Dust coat1 Pc per Candidate
⬇ PDFAssessor Guide
Items to be EvaluatedMarks AvailableMarks ObtainedComments
TASK 1: Conduct user research and prepare research brief
Conducted user research on color preferences and usability
(Award 1 mark for each correctly conducted research method)
2
Collected and analyzed research data
(Award 1 mark each for data collection and analysis)
2
Prepared a clear and concise research brief in Word document
(Award marks based on clarity and relevance)
2
Sub-Total6
TASK 2: Develop a color scheme mood board
Selected appropriate color palettes with usability and aesthetics in mind
(Award 1 mark for each appropriate palette selected)
3
Created a visually appealing and well-organized mood board
(Award marks for layout and clarity)
2
Demonstrated knowledge of color theory and accessibility (contrast, harmony)
(Award marks for correct application)
3
Sub-Total8
TASK 3: Apply color scheme to mobile app interface
Applied the chosen color scheme consistently across the 1080mm x 1920mm interface
(Award marks for consistency and accuracy)
3
Ensured usability through adequate contrast and readability
(Award marks for accessibility compliance)
3
Demonstrated creative and visual impact enhancing user experience
(Award marks for creativity and user-centric design)
4
Sub-Total10
TASK 4: Present and submit final deliverables
Submitted a well-labelled digital mood board in PDF or PNG format
(Award marks for proper labelling and format)
2
Submitted a well-labelled interface color layout in PDF or PNG format sized 1080mm x 1920mm
(Award marks for accuracy and labelling)
2
Presented final work clearly and professionally
(Award marks for presentation skills)
2
Sub-Total6
PRODUCT CHECKLIST
Mood board includes at least three distinct, harmonious color schemes
(Award 1 mark for each distinct scheme correctly applied)
3
Mobile app interface color layout measures exactly 1080mm x 1920mm
(Award marks for correct dimensions)
2
Consistent use of selected color scheme across interface
(Award marks for consistency and application)
3
Color scheme enhances usability with good contrast and readability
(Award marks for accessibility and user experience)
4
Sub-Total12
GRAND TOTAL42
ASSESSMENT OUTCOME:   ☐ Competent    ☐ Not Yet Competent (competent if at least 50%)
🔒

Free: practical guides, quick cards, workplace scenarios and more.

Create a free account
🔒Create typography hierarchy for a mobile app welcome screenPractical 3
🔒Design and integrate navigation icons for a mobile applicationPractical 4
🔒Develop an Interactive Prototype for a Mobile Banking AppPractical 5
🔒Create layout grids for a mobile app interface design 1080mm x 1920mmPractical 6
🔒Apply Visual Design Principles in Interface MockupsPractical 7
🔒Design responsive interface elements for multi-device usabilityPractical 8
🔒Create a comprehensive style guide for UI components with defined colors, fonts, and usagePractical 9
🔒Design Visual Feedback Elements for a Mobile App InterfacePractical 10
Flashcards 20 cards Study deck ▾
Question
1

↻ Tap card to reveal answer
🔒

18 more in this section.

Create a free account
Test Yourself 19 questions Start quiz ▾
0%
0 / 2
🔒

17 more in this section.

Create a free account
Am I competent?

At the start of this chapter we promised you would be able to:

  • Develop a clear content strategy that supports both project goals and user needs.
  • Create and organize content accurately to meet all project requirements.

Tick each one you can genuinely do.

So, are you there yet?

You're competent when you can confidently do 50% or more of what this chapter promised.

Sign in to record how you're doing.