Design Thinking and Planning

Defining context

Context refers to the overall design of the website, including its look-and-feel and structure. A well-defined context ensures that the design (UI/UX) aligns well with the purpose and audience of the website.

Purpose

A website needs to have more than just fancy appearance, it needs to have a clear purpose. Having a well-defined purpose is crucial as it will dictate the design language, from colors to interactions.

Audience analysis

Understanding your target audience is essential for creating an effective website. This involves researching demographics, psychographics, user behavior, and preferences. Key considerations include:

• Age range and generational characteristics
• Technical proficiency
• Devices commonly used to access the web
• Interests and lifestyle factors
• Pain points and needs the website can address

A thorough audience analysis helps ensure that the website’s design, content, and functionality cater to the specific needs and expectations of its intended users.

Marketing goals

Clearly defined marketing goals help shape the website’s structure and features. Common marketing goals for websites include:

• Increasing brand awareness
• Generating leads
• Driving sales or conversions
• Providing information or education
• Building customer loyalty
• Enhancing customer support

The website’s design should support these goals by incorporating appropriate calls-to-action, user flows, and content strategies that align with the overall marketing objectives.

Brand Identity

A website should be a strong representation of the brand it represents. Key elements of brand identity to consider in website design include:

• Logo and visual elements
• Color palette
• Typography
• Tone of voice in written content
• Imagery style (photos, illustrations, icons)
• Brand values and personality

Consistency in these elements across the website helps reinforce brand recognition and builds trust with visitors.

Understanding WordPress Site Editor as a designer

Before we can start designing, we need to understand the fundamental philosophy of the site editor. This will influence our designs greatly.

Blocks

Site editor is based on the concept of blocks. A block (Figure 1.1) is the fundamental (logical) design unit which can be used standalone or in combination with other blocks, often called a ‘component’ in design systems.

Blocks can be made up of atomic design elements, but the key difference between an atomic design element and a block is that an atomic design element does not make much sense when it is used standalone.

Figure 1.2 shows the various atomic elements (highlighted in yellow) that make up our card block. Our card block is made up of various text and heading variants, and a button.

Patterns

Often, designs require common combinations of blocks. These combinations usually serve a single purpose. In WordPress, such combinations are called ‘patterns’. Such patterns are usually composed of layout blocks and content blocks.

Figure 1.3 shows a Call-To-Action pattern. It is composed of three content blocks: 

1. Heading block
2. Paragraph block
3. Button block

These blocks are held together by a simple container block, known as a ‘group’ in WordPress.

There are multiple layout options we can choose from (see: Designing Blocks section). Some patterns may involve multiple nested layouts, e.g., Figure 1.4 shows a two-column layout. Notice that, holistically, the entire pattern serves the same purpose.

Templates and Template Parts

Consistency is one of the 7Cs of website design. By promoting consistency, we enhance the design’s usability. In a design system, we need to define a consistent structure of the pages. For that, we have template parts and templates in WordPress.

Imagine a website which has multiple blog posts. Every blog post page may have different content, but ideally they share a consistent structure. Now, you may be thinking of creating a pattern, but patterns do not define structure, they define content. Essentially, we want the user to have freedom over content but not over the layout/structure.

Template parts are combinations of blocks and/or patterns. They define a section of the webpage, such as the header, footer, and the content area. A combination of template parts, patterns, and/or blocks creates a template.

In Figure 1.5, we can see a single blog post template. It is composed of template parts (header), patterns (content area 1), blocks (content area 2), and a sidebar. Now, this structure will be shared across all the single blog post pages.

Common Deliverables

Following are the most common deliverables that a design exercise should have:

• Style guide
• Component library (blocks)
• Pattern library (patterns, template parts, and templates)
• Design documentation and decisions
• Interactions