DES 250 Digital Media Design II
DES 250 Digital Media Design II

Assignment 1_1: Responsive Layouts with Text Only

In this assignment you'll create six responsive layouts using the recipe text.

We first focus on the Design for a smartphone ("Mobile First" approach). After we established designs that work on small screens we make decisions on how the designs need to adjust/adapt/respond to work on tablet and desktop size screens.

There are numerous smartphone sizes, of course. Small, medium, large, extra large phones. 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.

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).

Rules

Within our restrictions we can assign ourself certain rules for experimentation. Our goal is to create contrast and hierarchy. Define the rules before you design. Be prepared to tell me what those rules are for each composition. Examples:

Design Tasks

Develop your layouts by adding or altering CSS rules in your CSS files. Start with the smallest size adjust the layout progressively for bigger screens. Focus on the following:

The "tools" you have available for now are:

Since we design for multiple screen sizes think about this as a design system with certain conditions rather than a layout in a traditional sense. Ask yourself the following questions:

Example: When I'm using font weights to define information such as headlines and paragraphs (create hierarchy), do I really need to use different font sizes additionally or can I just design with the weights only? Do I need to use spaces to separate information? What are my options?

Sketches

Parallel to coding I encourage to make sketches either with pencil on paper or more refined layouts in Adobe Illustrator. This will help communicating certain ideas and coding issues. You may run into issues with the coding and looking at a sketch will clarify what your intentions/ideas are.

Download this PDF which contains 3 Illustrator templates (art boards) for the 3 sizes we design for. After you downloaded the file, open it up in Illustrator. Before you do that please make sure you have the Proxima Nova desktop font installed. You'll find the font files in the fonts folder you already downloaded.

Template for Illustrator 5 (zip).

Template for Illustrator 5.

Variations

Develop different ideas. But we'll only be coding 3 of those . Try different things. Be bold. Go explore the extremes (big and small text and elements, heavy and light, busy and clean, simple and complex, etc. Think about how placement, size and composition can visualize certain aspects of the dish, the cooking activities, the ingredients etc.

Screen/Device Sizes

CSS Declarations for Assignment 1_1

Example: The rule below is styling a headline with 3 declarations combined: font-size, making and letter-spacing.

CSS code:
h1 {<br>   font-size: 32px;<br>   margin: 5%;<br>   letter-spacing: 10px;<br> }<br>

The first part of Assignment 1 is to create different compositions with just text. You can use the CSS declaration listed below for styling.

Don't use the following declarations:

CSS measurements: Fixed pixel values vs percentage based values

Percentage values for element widths make often more sense than fixed pixels values (in the CSS). For example if the distance between a paragraph and the edge of your browser is defined with percentage values it will appear relatively similar, no matter if you're viewing on a small or big screen. On the other hand, if you would use pixel amounts and apply the desired distance to small phone layout it may look to narrow on a bigger screen.

Recources

Read the article about CSS Basics carefully.

Also read this article about Media Queries (define screen sizes where style changes happen).

This PDF I prepared will help you during this assignment. .

Further Readings (CSS Basics)

Download and read this PDF with an excerpt about CSS Basics from the book "HTML & CSS – design and build websites").

Further Readings (Process, Design, Composition)

Working with Constraints

Graphic designers have used modular elements to pro­duce 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 pro­vided 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 transforma­tion 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 ad­hering 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.
—Emil Ruder

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. Typog­raphy is restricted to two-dimensional space. Even with a single value the problem of proportion still arises, for the rela­tionship 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 im­portant, 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 experi­ence 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 typog­rapher 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 relation­ship 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