From 62913aa300eb8416bbba4e8bc83004495cd8fe6e Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Tue, 21 Jun 2022 18:01:30 -0400 Subject: [PATCH] Add some more information on the recommended process. --- public/index.html | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 4db3991..3a8ebc3 100644 --- a/public/index.html +++ b/public/index.html @@ -44,25 +44,28 @@

About blockstart.css

-

The blockstart.css file gives you a simple set of basic layout primitives to get started. It allows you to follow a process similar to painters:

+

The blockstart.css file gives you a simple set of basic layout primitives to get started. It allows you to follow a simple process:

    -
  1. Organize the big "gross" structure without details in monochrome.
    2. -
  2. Develop a first statement with a meaningful structure and a simplified monochrome design.
    3. -
  3. Refine a second statement by filling in the structure with content and additional refinements for that content.
    4. -
  4. Complete a third statement with further refined details, fonts, and color schemes.
    5. +
  5. Create a general monochrome block layout with little to no detail.
    6. +
  6. Divide these simple layout blocks with smaller elements.
    7. +
  7. Refine these smaller elements with fake (or real) content, and refine the smaller elements based on the content.
    8. +
  8. Finalize the design with further details and make everything fit together as a whole (the + gestalt).
-

In practical terms this means:

+

This is a similar process to the one used by many painters and other artists. The theory behind this process is to reduce the amount of information you need to manage to only the information that's needed at that stage. For example, there's no point in worrying about colors and fonts if you have no idea where the big blocks of text will go. In practical terms this means:

    -
  1. Use blockstart.css to get a "chunky" boxes and grids layout.
    2. -
  2. Replace the blockstart.css with semantic HTML tags and your own CSS, adding first refinements.
    3. -
  3. Fill in your blocks with media so you have something to design around that's real, refining further.
    4. -
  4. Develop this last stage of the design with font choices, color, and other details that fit the content.
    5. +
  5. Layout -- Large blocks divide the page, most likely 4-5 blocks.
    6. +
  6. First statement -- Contents of each layout block placed as small blocks and visual elements, most likely the layout blocks are invisible now.
    7. +
  7. Second statement -- Fake (or real) content such as media, lorem ipsum, real copy, text, icons, fonts, and possibly colors.
    8. +
  8. Third statement -- More small details worked out, but more importantly everything works as a whole, which is called the "gestalt."
-

The blockstart.css file helps with this process by giving you the minimum necessary blocks to create the first statement. There is almost nothing in the CSS, making it easy to replace in later stages...if you want.

+

A "statement" is another term from painting which means "an attempt at saying what you want for that stage of the work." Each step isn't a final complete step, but rather an attempt to say something, which you'll refine later as you try to "say" more. I like this way of looking at artistic processes because paintings, web pages, and other visual art is a communication medium, and it's usually trying to "state" or "say" something.

+ +

The blockstart.css file helps with the Layout and First statement parts of the process by giving you the minimum necessary blocks to create the first statement. There is almost nothing in the CSS, making it easy to replace in later stages...if you want.I actually recommend not keeping the markup and CSS from blockstart.css.

Blocks