GDL

Revised Requirements (18/06/2025)

1
Godrej Design Lab

What this document covers

  1. Henry's proposed changes
  2. Our proposed changes
  3. Clarifications on certain things
  4. Implementation details
2
Godrej Design Lab

Table of Contents

I. Design

II. CMS

3
Godrej Design Lab

~ I ~

Design

4
Godrej Design Lab

Design

  1. Main content area
  2. List-ish sections
  3. Quotes
  4. Content container widths
5
Godrej Design Lab

~ 1 ~

Main Content Area

6
Godrej Design Lab
Exhibit A: Spans 10 columns
7
Godrej Design Lab
Exhibit B: Spans 9 columns
8
Godrej Design Lab

What's changing?

  • Have it span 9 columns on all pages.
9
Godrej Design Lab

~ 2 ~

List-ish Sections

10
Godrej Design Lab
Various manifestations of these across the design
11
Godrej Design Lab

What's changing?

  • Designs: This will be normalised (for the above displayed sections). The horizontal space that the image and the content areas take up will be pre-determined and won't be configurable.
  • Horizontal rules: These will be automatically added in between list items.
  • Heading color: This won't be configurable. Have to settle for Either black or the primary color. Will need a decision on this.
  • Image alignment: Can be configured to be either on the left or the right
  • Image width: Not configurable. Will always span 3 columns, regardless, and not 2 columns, or 2 columns + 1 gutter (as seen in the current design).
  • Image aspect ratio: This remains configurable — square (1:1) or natural
  • CMS: This UI will be powered a new "Highlight Deck" component. More on that later.
12
Godrej Design Lab

~ 3 ~

Quotes

13
Godrej Design Lab
Quote variations
14
Godrej Design Lab

Clarifications

  • Are quotes to be normalised as well? Or are both variations to be supported?
15
Godrej Design Lab

~ 4 ~

Content Area Widths

16
Godrej Design Lab
Narrow width
Full width
17
Godrej Design Lab

Clarifications

  • Are both the full-width and narrow-width layouts to be supported?
18
Godrej Design Lab
19
Godrej Design Lab

~ II ~

CMS

20
Godrej Design Lab

CMS

  1. Heading
  2. Section
  3. Image and Gallery
  4. WYSIWYG
  5. Featured post
  6. Layout
  7. Table
  8. Post list
  9. Post query
  10. Highlight deck
  11. Spec list
21
Godrej Design Lab

~ 1 ~

Heading

22
Godrej Design Lab
From the component picker
23
Godrej Design Lab

What's changing?

  • The heading component will no longer be independently accessible. It will only manifest embedded within the section component. This is because they appear to be no scenarios where sub-headings would be need to implemented using a dedicated heading component.
  • The heading text fields will be renamed to line 1 (secondary color) and line 2 (primary color).
24
Godrej Design Lab

~ 2 ~

Section

25
Godrej Design Lab
Source: Henry's notes
26
Godrej Design Lab

Response to the notes

  • Body field: This cannot simply just be a rich-text field.

    A variety of designs/layouts need to be accommodated. And Strapi's rich-text field is:

    a) Limited in what it can do, and

    b) Is not extensible

    Therefore, the field has to be a "container" to which various content blocks are inserted into. This is how it works presently.
27
Godrej Design Lab

What's changing?

  • Horizontal rule: One of these will automatically be included after the section's content.

    Hence, no need to add one manually like how it is done now.
28
Godrej Design Lab

~ 3 ~

Image and Gallery

29
Godrej Design Lab

What's changing?

  • Image captions: Support for this can be added.

    No design reference for this exists presently. But will whip up something basic and minimal.
30
Godrej Design Lab

~ 4 ~

WYSIWYG

31
Godrej Design Lab
Exhibit A: normal spacing
Exhibit B: compact spacing
32
Godrej Design Lab

What's changing?

  • Spacing modes: Are both these spacing modes (normal and compact) to be supported?
33
Godrej Design Lab

~ 5 ~

Featured post

34
Godrej Design Lab
Featured post + blurb
35
Godrej Design Lab

Clarifications

  • Is the featured post portion a link? Or just inert content?
36
Godrej Design Lab

~ 6 ~

Layout

37
Godrej Design Lab

What's this?

These are the "1-column Layout" and "2-column Layout" components, which establish 1-column and 2-column layout contexts respectively.

38
Godrej Design Lab

What's changing?

2-Column Layout
  • This will be retained.
  • Custom width-ratios: These will no longer be configurable. All 2-column layouts will have a 1:2 ratio.
  • Purpose of column 1: Despite mentioning that the first column will only ever hold a square image, we will leave it as a generic content container. In the future, if more than just a square image needs to be added to the first column, it can be done.
1-Column Layout

  • This will be replaced with two new components — "Column (full-width)" and "Column (narrow-width)".

    This depends on whether both these content widths need to be supported (see the "Content Area Widths" slide above).
39
Godrej Design Lab

~ 7 ~

Table

40
Godrej Design Lab
desktop
mobile
41
Godrej Design Lab

Proposed changes

  • Number of columns: There's no limit to this.
  • Columns names: These are specified explicitly.
42
Godrej Design Lab

Issues with proposal

  • Column widths: How will this be determined?
  • Columns stacking on mobile: The columns stack in an order different from what you see on the desktop.
  • Horizontal rule b/w fellow names: This will no longer be possible. One will have to manually hit the Enter key and input the second name on the second line. But no horizontal rules will show up in between the lines.
43
Godrej Design Lab

~ 8 ~

Post list

44
Godrej Design Lab

What's this?

  • A new component, that replaces the existing post query component.
  • One populates a list of "post tiles" — putting in a thumbnail, a heading, author byline, reading time, and an excerpt.
  • This is similar (in concept) to what is already in place on the "Fellowships" page.
45
Godrej Design Lab
featured post (full-width)
2-column layout
3-column layout
46
Godrej Design Lab

Schema

Component-level
  • layout: 2-column, 3-column
  • feature_first_post: Makes the first post span the full-width
Post tile-level
  • image
  • content: a rich-text field that supports any kind of text content — heading, byline, excerpt
47
Godrej Design Lab

~ 9 ~

Post query

48
Godrej Design Lab

What's this?

This component is a "dynamic content block".

Ones specifies the content-type, a category and how many "posts" are needed (ex. 2), and a list of posts that meet the specified criteria will be returned (on the frontend).

49
Godrej Design Lab
How it looks in Strapi
What it outputs
50
Godrej Design Lab

What's changing?

  • This component will be removed and replaced with the "Post List" component that favours a manual construction of the list.
51
Godrej Design Lab

~ 10 ~

Highlight Deck

52
Godrej Design Lab
Various instances of these across the design
53
Godrej Design Lab

What's this?

  • A new component that'll allow one to populate a deck of "highlights".
  • A highlight comprises of an image on one side, and arbitrary text content on the other.
  • This differs from the "Post list" component in that the content is inert and does not navigate away when clicked on.
54
Godrej Design Lab

~ 11 ~

Spec List

55
Godrej Design Lab
56
Godrej Design Lab

What's this?

  • A new component, similar to the highlight deck.
  • Instead of an image, there is a heading.
  • Heading always goes on the left.
57
Godrej Design Lab

Issues

  • 2-column bulleted list: This won't be possible unless the text content field is a generic content block container.

    2-column layouts aren't possible within a rich-text field.
58
Godrej Design Lab
59
Godrej Design Lab

~ fin ~

60
Godrej Design Lab