Design 250 | Tu + Thu 9—11:40a

Project 2_1: Responsive Grid Layout: Text Only

In this assignment you'll create three responsive grid layouts using the given lineup template. One of those three designs will be used as a starting point for assignment 2_2.

**2_1 Due End Of Class Thursday September 12**

Below is 2_1 — focus on text only:


Design / CSS Rules

Focus on the following:


Since we design for multiple screen sizes and aspect ratio we need to pay attention to the relation between font sizes and placements and then apply those relationships within the different sizes and orientations . When the screen size changes, the font sizes and their placement likely need to be adjusted as well. It's quite challenging not to have a fixed page size in a traditional sense. How should things adapt while keeping the overall integrity of the design? The design should somewhat be consistent across multiple screen sizes and aspect ratios. Although elements will certainly need adjustments, it should not look like a completely different design when viewed on another screen size.


Ask yourself the following questions:

Variations

Try different things. Be bold. Go explore the extremes (contrasting big and small text, heavy and light, dense and sparse, simple and complex, etc.). Although only 3 variations are required for assignment 2_1 in the end, please feel free to experiment with more.

Overall Restrictions

Exploring design possibilities systematically is really only possible within certain given restrictions and rules. Playing with possibilities within constrains are more likely to produce unpredictable or "unimagined" results. Restrictions or constraints also help to create visual order (instead of chaos).


Restrictions per Layout

Our goal is to create contrast and hierarchy. How can that be achieved in the simplest way without mixing too many "elements" together?

About font sizes and CSS size units/values

A browser's default font size is 16px. So everything that is not defined with another tag (h1, h2...) as well as paragraphs (p-tag) appears in this size. It's a comfortable reading size. Don't get smaller than 14px for paragraphs. There could be elements of text, such as a footnote, than can go as small as 12px. Anything below is too small and hard to read.

Instead of px values it's recommended to use "rem" values instead. The rem value is directly connected to the default font size 16px. If not specified differently 1rem = 16px, 2rem = 24px, 3rem = 32px, 0.5rem = 8px etc. Font sizes often need to adjusted on smaller screens. When using the rem values it's much easier to scale font sizes relative to another. You only need to change the overall default size to a smaller value. Then all em values change relative to that smaller size.

Em values are relative to the nearest parent element, while rem values are relative to the foot font-size of the html element. The rem value is therefore may be easier to control compared to em but it's a personal preference in the end.

There's really no limit in regards to how large you can go with headlines or paragraphs, as long as you can fit it in the layout. It's in general a good idea to come up with a certain size ratio. For example 16px for paragraphs, 24px for secondary headers and 32px for top hierarchy headers. That would be an 8px increase per element. But choose the sizes as needed.

Example of em value:

See the Pen font sizes: EM values by Oliver Roeger (@uic-des) on CodePen.


Example of rem value:

See the Pen font sizes: REM values by Oliver Roeger (@uic-des) on CodePen.


Increasing grid item-height

In some cases it may be necessary to increase the height of the item boxes (which contain artist names and times) in the grid.


Approximate Screen/Device Sizes


Note that these are CSS px values and not the actual resolution of the screens.

There are more and more screen sizes available (big smartphones, small tablets...) and designing for specific product sizes is not practical anymore. The three sizes mentioned above are average screens sizes that will help us make certain design decisions.

The Safari browser has a "Develop Tab" that include a "Responsive Design Mode". If active, you can choose between apple phones, tablets and desktop screen sizes and the browser size will adjust itself to the device selected. That's an easy and quick way to view/test your layout on your computer.

Info about responsive grids

Please take a look:

Responsive Grids

Further Readings (Process, Design, Composition)

Working with Constraints

Graphic designers have used modular elements to produce unpredictable results. Try looking at familiar systems from a fresh angle. Given the constraints of any system, how can you play with the rules to make something new?

A child’s set of alphabet blocks looks a certain way, for example, because the blocks are made from perfect cubes. But what if alphabet blocks were made from rectangles instead of cubes? The oddly proportioned faces of the blocks at left provided a framework for designing new letterforms in response to the constraints provided by the blocks of wood.

Standard materials such as laser paper are often used in generic ways. A standard sheet of office paper can be very dull indeed. Yet with creative thinking, an ordinary piece of paper can be used for dramatic effect.


Variations

Variation involves change—the vitality of transformation, in contrast to constancy —the fixity of the invariable. In music variation means the mutation of a musical idea, the transformation of a theme or a mean value. Variation involves singling out a mean value and calls for the ability to put this mean value through as many transformations as possible.

The aim is to devise hundreds of arrangements while adhering strictly to the theme in question, and it is a good plan to sketch out these various ideas in preprinted squares. Elementary exercises like these help the typographer to develop versatility and the ability to see a given theme in a multitude of different ways and to tackle it from different angles.


Proportions

Every means at the disposal of man in his creative activities has its value and its extent. In architecture we have the surfaces which enclose space and the volume thus enclosed. Typography is restricted to two-dimensional space. Even with a single value the problem of proportion still arises, for the relationship of length, breadth and depth has to be settled. Once a plurality of means is used, the real problem of proportion must be faced: the organization of several things in a certain relationship of size.

For centuries, from the number mysticism of the Middle Ages, through the proportional systems of the Renaissance, down to Le Corbusier’s module, man has endeavoured to subject objects of different dimensions to certain rules and fixed numerical systems. These efforts have had two results: Work created out of feeling and intuition and subsequently subordinated to a numerical pattern has been erroneously placed with works constructed on a principle reached by calculation. More important, however, is the fact that proportional systems based on calculation have barred the way to creative work; they have become crutches to support the incompetent. Le Corbusier’s module came at the end of a long, creative life, rich in experience and insights; but for the young student of architecture the same module is a pitfall and a hazard. Ostwald’s extensive efforts to number all colours and to bring the “right” colours together has made no contribution whatever to a real colour culture.

No system of ratios, however ingenious. can relieve the typographer of deciding how one value should be related to another. He must first recognize the individual value before he can work with it. He must spare no effort to tutor his feeling for proportion so that he can judge how much a given ratio can bear. He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony. Whether the tension should be strong or weak is a decision which the typographer must make for himself in the light of the problem he is seeking to solve. This is an argument against a rigid numerical principle such as the Golden Section of 3:5:8: 13, for this principle may be right for one work but wrong for another.

Typographical design calls for the recognition of values which become visible during the setting process and have to be organized according to the following criteria: What is the relationship between one value and another? How is a given type size related to a second or third ? What are the relations between the printed and unprinted areas? What is the relationship between the colour value and quality and the grey of the type matter? How do the various tones of grey compare? The proper observation of these principles is crucial for the beauty of a printed work, and for its formal and functional qualities.

—Emil Ruder