Author Archives: onno

01 OpenAI Text/DALL·E

Posted on by
DALL·E 2023-01-26 06.04.23 - oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City
Prompt: oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City

OpenAI Chat: Website for Product Design Student

Image and chat response created by artificial intelligence

Me:

Can you turn the following into a website? I am a student product designer looking for work?

ChatGPT:

Yes, I can help you create a website to showcase your work as a student product designer. However, as a language model, I do not have the capability to create a website directly. I can provide you with the information and guidance you need to create a website, such as tips on design, layout, and content. You will need to use a website builder or hire a web developer to create the website for you.

Me:

How do I start?

ChatGPT:

To start creating a website, you will need to decide on a few key things:

  1. Purpose: What is the main goal of your website? Is it to showcase your portfolio, promote your services, or provide information about your work?
  2. Domain and hosting: You will need to purchase a domain name (e.g. www.yourdomain.com) and find a hosting provider to host your website.
  3. Platform: There are several different website builders and platforms available, such as WordPress, Wix, and Squarespace. You will need to choose one that best fits your needs and skills.
  4. Design and layout: Think about the overall design and layout of your website, including colors, fonts, and images. You should also consider how to organize your content in a way that is easy to navigate.
  5. Content: Create the content for your website, including text, images, and videos that showcase your work.

Once you have decided on these things, you can start building your website. You can also hire a web developer to help you with the process.

Also, you can showcase your work using online portfolio platforms like Behance, Dribbble, etc which will make the process easier for you.

Me:

how important are websites for job recruitment?

ChatGPT:

Websites can be an important tool for job recruitment, both for job seekers and employers.

For job seekers, a website can be a great way to showcase their skills, qualifications, and work experience. It can also be an easy way for potential employers to find job candidates and get a sense of their qualifications and experience.

For employers, a website can be a powerful recruitment tool as it allows them to reach a wide audience of potential job candidates and to provide detailed information about job requirements, company culture, and benefits. Additionally, many companies use their website as a way to post job listings and accept online job applications.

Having a website can also give a sense of credibility to the job seeker and employer, as well as it can be a way to share more than what a resume can show, like online portfolio, videos, projects, etc.

Overall, a website can be a valuable tool for both job seekers and employers in the recruitment process.

Me:

In product design, what do employers look for in a website

ChatGPT:

In product design, employers typically look for a few key things when reviewing a candidate’s website:

  1. A clear and well-designed portfolio: Employers want to see a clear and well-organized portfolio that showcases the candidate’s best work. This should include detailed images, descriptions, and any relevant information about the design process.
  2. A strong online presence: Employers want to see that the candidate has a strong online presence, including a professional website, social media profiles, and an active blog. This shows that the candidate is up-to-date with the latest industry trends and technologies.
  3. A clear understanding of the design process: Employers want to see that the candidate has a clear understanding of the design process, including research, concept development, prototyping, and user testing. This can be demonstrated through case studies, design diaries, or other documentation of the design process.
  4. Relevant skills and experience: Employers want to see that the candidate has the relevant skills and experience to do the job. This should be highlighted in the portfolio and on the website, and should include information about the candidate’s education, work experience, and any relevant certifications.
  5. Strong communication and presentation skills: Employers want to see that the candidate can effectively communicate and present their ideas, and this can be demonstrated through the website’s writing, videos, and images.
  6. Strong attention to details: Employers want to see that the candidate has strong attention to details, this can be seen in the design of the website, the way the portfolio is presented, the way the information is organized, etc.

Overall, employers want to see a website that is professional, well-designed, and effectively communicates the candidate’s skills, qualifications, and experience.

Me:

If I only have two years of school work to show, what is the best work to show my skillset and problem solving abilities.

ChatGPT:

If you only have two years of school work to show, it’s important to choose the projects that best demonstrate your skillset and problem-solving abilities. Consider the following when selecting projects to showcase:

  1. Complexity: Choose projects that demonstrate your ability to tackle complex problems and design solutions. These should be projects that required you to use a variety of design techniques, tools, and methodologies.
  2. Originality: Choose projects that demonstrate your ability to come up with original ideas and designs. This could be projects where you had to solve a unique problem or create something that hasn’t been done before.
  3. Design process: Choose projects that demonstrate your ability to follow a design process, including research, concept development, prototyping, and user testing. Provide information about your research, the design process, and the results.
  4. Relevance: Choose projects that are relevant to the type of product design you want to work in. If you want to work in industrial design, for example, choose projects that demonstrate your ability to design physical products.
  5. Problem solving: Choose projects where you had to demonstrate problem-solving skills. This could be projects where you had to find innovative solutions to difficult challenges.
  6. Show the outcome: Choose projects that have clear outcomes, and demonstrate the impact of your design, for example, a product that was manufactured, a service that was launched, etc.

It’s also important to have a clear and well-organized portfolio, with detailed images, descriptions, and any relevant information about the design process, and a clear way of navigation. It’s also helpful if you can provide examples of how your designs have been received by users or customers.

Me:

How important is it for my website to stand out and be memorable? What can I do to make it that way?

ChatGPT:

It is important for your website to stand out and be memorable because it is often the first point of contact potential employers will have with you. A well-designed and memorable website can help you make a strong first impression and increase your chances of getting hired.

Here are a few things you can do to make your website stand out and be memorable:

  1. Be unique: Showcase your personal style, point of view, and personality on your website. This will help you stand out from other candidates and make a lasting impression on potential employers.
  2. Make it visually appealing: Use a clean, modern, and visually appealing design. Use high-quality images, typography, and layout to make your website look polished and professional.
  3. Make it easy to navigate: Make it easy for potential employers to find what they’re looking for on your website. Use clear and consistent navigation, and make sure your portfolio is easy to find.
  4. Show your process: Employers are interested in seeing the design process, not only the final product. Share your design process, research, sketches, and iterations, this will make your portfolio more interesting and unique.
  5. Show your impact: Highlight the impact of your designs, for example, if a product you designed was manufactured, or if a service you designed was launched, etc.
  6. Show your skills: Make sure your website showcases your skills and qualifications, and highlight any relevant work experience or education.
  7. Use multimedia: Use videos, images, and animations to make your website more engaging and interactive.
  8. Make sure your website is mobile-friendly, as many people use their mobile devices to browse the web.

Overall, a memorable website should be visually appealing, easy to navigate, and effectively communicate your skills, qualifications, and experience. It should showcase your unique style, personality and process, as well as the impact of your designs, and be mobile-friendly.

DALL·E claymation sculptures of product design students at parsons having a wild and crazy time in New York City
Prompt: claymation sculptures of product design students at parsons having a wild and crazy time in New York City

Me:

Will a more generic templated design suffice or does that make it look like what too many other people in my field offer?

ChatGPT:

Using a more generic templated design for your website may make it look similar to other websites in your field, which can make it less memorable and less effective in standing out to potential employers. While it’s understandable to use templates to save time and effort, it’s important to remember that a template often used by others may not be able to reflect your unique style, personality, and design process.

Using a pre-made template can make it harder to showcase your individuality and skillset. It’s also less likely to reflect your design process, design thinking, and problem-solving abilities, which are important for product design.

That being said, it’s not impossible to make a templated website stand out. You can customize it by changing the colors, typography, images and layout, to reflect your style and personality, and by adding multimedia elements, like videos and animations. Additionally, you can make sure that the navigation and the portfolio are easy to find and well-organized.

It’s also important to remember that the content of your website, like the portfolio, case studies, and writing, is the most important aspect. Even if the template is generic, if the content is well-presented, engaging, and effectively communicates your skills, qualifications, and experience, it can still make a strong impression on potential employers.

In summary, while a generic templated design may save time and effort, it can make it harder to stand out and make a memorable impression. Customizing the template and making sure the content effectively communicates your skills, qualifications, and experience is important to make it stand out.

Me:

So you think it is best to hand code websites for maximum creative impact and originality, and to show my problem solving skills.

ChatGPT:

Hand coding a website can have a greater creative impact and originality than using a pre-made template, as it allows you to create a unique and personalized design that truly reflects your style, personality, and problem-solving abilities. It also allows you to have more control over the website’s layout, functionality, and overall user experience.

By hand coding a website, you can create a design that is tailored to your specific needs, and that showcases your problem-solving skills. You can also take into account the latest web design trends and technologies, and ensure that your website is fully responsive and optimized for different devices and screen sizes.

That being said, hand coding a website does require a certain level of technical skill and knowledge, as well as time and effort to develop. It’s important to consider your own skills and resources before deciding to hand code a website. Additionally, it’s not only the website design that makes the difference, but also the content. An effective website should have a clear message, easy to understand and well-organized, and should showcase your skills, qualifications and experience.

Overall, hand coding a website can have a greater creative impact and originality, and can showcase your problem-solving skills. However, it also requires a certain level of technical skill, and time and effort to develop. It’s important to consider your own skills and resources, and also focus on creating a clear, well-organized and effective website content.

Me:

What are the current trends in product design?

ChatGPT:

Here are a few current trends in product design:

  1. Sustainable design: There is an increasing focus on designing products that are environmentally friendly and sustainable. This includes using sustainable materials, designing for disassembly and recycling, and reducing energy consumption.
  2. Human-centered design: Product designers are increasingly using human-centered design methods to create products that are tailored to the needs, wants, and preferences of users. This includes user research, prototyping, and testing to ensure that products are easy to use and meet the needs of their intended users.
  3. Technology integration: Product designers are incorporating new technologies, such as IoT, AI, and AR/VR, into products to enhance their functionality and user experience. This is particularly relevant in areas such as smart home, wearables, and transportation.
  4. Accessibility: There is a growing awareness of the importance of designing products that are accessible to people with disabilities. This includes designing products that are easy to use for people with physical, visual, auditory, or cognitive impairments.
  5. Minimalism: The minimalistic design trend is still popular in product design, characterized by simple and clean lines, and a focus on the essential elements of a product. This helps to create a sense of elegance, simplicity and timelessness.
  6. Personalization: Product designers are increasingly creating products that can be customized to the individual preferences of users. This includes using 3D printing and other technologies to create personalized products.
  7. Virtual and Augmented Reality: These technologies are increasingly used in product design to create immersive experiences, virtual prototypes and simulations, as well as to enable remote collaboration and remote product testing.
  8. Material Innovation: Product designers

Me:

What is the best advice you can give a product design student?

ChatGPT:

Here is some advice for a product design student:

  1. Develop a strong design process: Having a clear and well-defined design process is essential for effective problem-solving and creating successful designs. This includes understanding the problem, researching and gathering information, generating ideas, prototyping and testing, and iterating on your designs.
  2. Learn from other designers: Study the work of other designers, both past and present, to understand different design styles and approaches, and to gain inspiration for your own work.
  3. Be open to feedback: Always be willing to receive feedback on your work and to use it to improve your designs. Feedback can come from your professors, peers, and professionals in the industry.
  4. Stay informed: Stay up-to-date with the latest trends, technologies, and materials in the field of product design. This will help you to create designs that are innovative and relevant.
  5. Don’t be afraid to experiment: Experimentation and exploration are key to developing your own unique style and voice as a designer. Don’t be afraid to try new things and take risks.
  6. Network and collaborate: Network with other designers and professionals in the industry, and seek out opportunities to collaborate with them on projects. This will help you to gain valuable experience and to make connections that can be beneficial for your future career.
  7. Show your work: Document and share your work through a portfolio or website, this will help you to showcase your skills and qualifications to potential employers.
  8. Keep learning: Remember that learning never stops, continue to seek out opportunities for

Me:

I will be competing for jobs with many other like minded and like skilled students, what are the best ways to stand out?

ChatGPT:

Here are some ways to stand out as a product design student competing for jobs:

  1. Develop a strong portfolio: A well-crafted portfolio is essential for showcasing your skills and qualifications to potential employers. Make sure that your portfolio is well-organized, visually appealing, and that it effectively communicates the design process and thought behind your work.
  2. Build a personal brand: Develop a personal brand that reflects your unique style and personality. This can include a personal website, social media presence, and a consistent design aesthetic.
  3. Specialize in a specific area: Consider specializing in a specific area of product design, such as a certain industry or type of product. This will allow you to become an expert in that area and to differentiate yourself from other designers.
  4. Showcase your problem-solving skills: Emphasize your problem-solving skills in your portfolio and during interviews. Highlight how you approached and solved complex design problems, and how you used research, prototyping, and testing to arrive at your final design.
  5. Showcase your experience: If you have any relevant experience, such as internships or freelance work, make sure to include it in your portfolio and highlight it during interviews. This will demonstrate to potential employers that you have real-world experience and that you are capable of working on projects from start to finish.
  6. Be proactive and take initiative: Don’t wait for opportunities to come to you, actively seek out opportunities for internships, collaborations, or freelance work. This will give you valuable experience and help you to build a network of contacts in the industry.
  7. Be adaptable and flexible: Be open to new ideas and be willing to learn new skills and technologies. This will help you to stay current and relevant in the industry.
DALL·E oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City
Prompt: oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City

Me:

Thank you for your advice

ChatGPT:

You’re welcome! I hope my advice will be helpful for you as you continue to pursue a career in product design. Remember that success in the field of product design often comes down to hard work, persistence, and a willingness to learn and adapt. Keep honing your skills, showcasing your work, and networking with others in the industry. Good luck!

08 Portfolio Presentation

Posted on by

Congratulations on completing your projects. Even if you’re not totally done/things are broken, present what you have and talk through your design decisions and code, starting with first assignment, eight steps, typography poster, issue website, and last but not least, your portfolio where you sell yourself to the rest of the class. As long as you’re in class, presenting your project, you’re welcome to resubmit it by the end of the semester.

Structure

I will assign in class a first responder (1R), second responder (2R), and notetaker (N). The first responder (1R) will kick off our discussion as soon as the presenter has finished sharing their work, covering design issues. The second responder (2R) will add, subtract, and expand on the first responder, focusing on the code. The notetaker will listen carefully and document the highlights of the critique in a class document for later reflection by the presenter. Class engagement is a requirement, so let us all work together to make each one of us the best that they can possibly be.

When critiquing, these are the questions that need to be considered:

  • Design considerations:

    1. Does the portfolio stand out?
    2. How would the target audience respond. Contextualize your answer.
    3. What is the narrative? Could the story be told better?
    4. How is the graphic design? Scale? White space? Typography?
    5. What is the inspiration/research behind it, How is the content supported?
    6. Do the layout and navigation support the goals for viewing the collection?

  • Code Considerations:

    1. Is the markup valid and semantically correct HTML5 ?
    2. Are images the correct format and size ?
    3. Are UX concerns driving the design process ?
    4. Are all 7 steps articulated in the design process for portfolio and final ?
    5. Is the CSS valid, clean, external, and using structural selectors wherever possible ?
    6. Are various layout strategies used to construct the layout ? Document Flow ? Positioning ? Floats ? Flex Box ? CSS Grid ?
    7. Is the website responsive to a change in viewport size, from smart phone to the standard web browser ?

Recorded Lectures

Posted on by

Lectures are recoded and will remain up for 30 days. Copy the pass code and click the link. You may wish to download the lecture if you think you will refer back to it, or if you were absent that day. 30 days goes by quickly and only the last three or four lectures are available. If you wish to refer back to the material covered in the first two lectures, there is a makeup lecture available.

I will not save any lectures after the 5th, because only these lectures contain the fundamental issues you need to be familiar with to understand everything else.

Week 5:

Recorded: Week 5 Passcode: $gQpG!M9m5

Week 4:

Recorded: Week 4 Passcode: M8La8GnxQ*

Week 3:

Recorded: Week 3 Passcode: Je89xVCS=u

Week 2:

Recorded: Week 2 Passcode: s##2PqB8bv

04 How CSS Works ( w3.org)

Posted on by

CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas(such as your screen, a piece of paper, or an audio stream). To do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Each box in the box treerepresents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.

To create the box tree, CSS first uses cascading and inheritance, to assign a computed value for each CSS property to each element and text node in the source tree. (See [CSS3-CASCADE].)

Then, for each element, CSS generates zero or more boxes as specified by that element’s display property. Typically, an element generates a single box, the principal box, which represents itself and contains its contents in the box tree. However, some display values (e.g. display: list-item) generate more than one box (e.g. a principal block box and a child marker box). And some values (such as none or contents) cause the elementand/or its descendants to not generate any boxes at all. Boxes are often referred to by their display type—e.g. a box generated by an element with display: block is called a “block box” or just a “block”.

A box is assigned the same styles as its generating element, unless otherwise indicated. In general, inherited properties are assigned to the principal box, and then inherit through the box tree to any other boxes generated by the same element. Non-inherited properties default to applying to the principal box, but when the element generates multiple boxes, are sometimes defined to apply to a different box: for example, the border properties applied to a table element are applied to its table grid box, not to its principal table wrapper box. If the value computation process alters the styles of those boxes, and the element’s style is requested (such as through getComputedStyle()), the element reflects, for each property, the value from the box to which that property was applied.

Similarly, each contiguous sequence of sibling text nodes generates a text run containing their text contents, which is assigned the same styles as the generating text nodes. If the sequence contains no text, however, it does not generate a text run.

In constructing the box tree, boxes generated by an element are descendants of the principal box of any ancestor elements. In the general case, the direct parent box of an element’s principal box is the principal box of its nearest ancestor element that generates a box; however, there are some exceptions, such as for run-inboxes, display types (like tables) that generate multiple container boxes, and intervening anonymous boxes.

An anonymous box is a box that is not associated with any element. Anonymous boxes are generated in certain circumstances to fix up the box tree when it requires a particular nested structure that is not provided by the boxes generated from the element tree. For example, a table cell box requires a particular type of parent box (the table row box), and will generate an anonymous table row box around itself if its parent is not a table row box. (See [CSS2] § 17.2.1.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) inherit through their box tree parentage.

In the course of layout, boxes and text runs can be broken into multiple fragments. This happens, for example, when an inline box and/or text run is broken across lines, or when a block box is broken across pages or columns, in a process called fragmentation. It can also happen due to bidi reordering of text (see Applying the Bidirectional Reorderign Algorithm in CSS Writing Modes) or higher-level display type box splitting, e.g. block-in-inline splitting (see CSS2§9.2) or column-spanner-in-block splitting (see CSS Multi-column Layout). A boxtherefore consists of one or more box fragments, and a text run consists of one or more text fragments. See [CSS3-BREAK] for more information on fragmentation.

10 CSS Calc

Posted on by

CSS calc() performs simple calculations to determine CSS property values. The calc() function allows mathematical expressions with addition ( + ), subtraction ( – ), multiplication ( * ), and division ( / ) to be used to create a value. A useful feature of this function is the ability to mix percentages and absolute values or to mix different units. Pixels can be subtracted from percentages and viewport widths can be added to pixels, for example.

CSS calc() can be used anywhere there’s a css length or number in your stylesheet. .item { width: calc(100% - 60px);} Notice that the operator has a space on either side. That is a requirement for + and - . Leaving it out renders the calculation void. Dividing by 0 voids the result as well.

CSS Tricks has a Complete Guide to Calc

For those of you that are mathematically inclined, calculate sine, cosine, tangent. Check out this trig functions in CSS article.

CSS Code View

using calc to change text size

10 CSS Variables

Posted on by

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. Variables or CSS Custom Properties for Cascading Variables have a precursor of sorts in curentcolor. Currentcolor sets the current color as a variable with that name. It was originally introduced by Opera. Various CSS preprocessors are popular because they implemented variables.

Variables save time and help in the organization of complex documents. It is part of the computer programer’s ethic known as DRY or don’t repeat yourself. Create a variable for colors used in developing the website. To change a color only the definition has to be updated. CSS variables work like any other CSS custom property, like normal CSS properties. CSS variables can be used almost everywhere there are values, including in @media queries.
The variable is defined by -- dash dash, like an empty prefix. Think of it as -webkit- without webkit. The variable is case sensitive and defined as a :root pseudo-class . For example: :root { --main-color: orange;}.

The variable is then applied as a value: background-color: var(--main-bg-color);

CSS Code View

10 Responsive Images and Video

Posted on by

Images and videos can be resized the same way that background images can be resized. Videos can maintain their proportion in what is a boon for responsive design. The object-fit and object-position properties define how an element responds to the height and width of its content box. The object-fit property implements cover and contain to determine the size of an image based on its longest or shortest length. There is also a scale-down value that keeps an image in proportion as it is resized (think video). The object-position property allows placement of the image in the box. The default is 50% 50% which centers the image. In the following demo, the images is enlarged to fill the box using cover, pinned to the left side center. The image will resize proportionally with a change in the box’s size.

CSS Code View

Taiyo in image size demonstration

Video

It is important to keep video ratio in proportion. Previous hacks used percentage based bottom padding of the parent container’s width and stretched the video to that ratio. It’s now possible to specify contain or scale-down.

04 Multiple Columns

Posted on by

CSS3 provides several new ways to do layout. The easiest is multiple columns within an element. It’s easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. Using media queries a small screens gets one column, tablets get two and computer monitors get three or more columns.

Multi-Columns Interactive

CSS Code View

Live Demo

What is “Fun?”

“I’ll know it when I see it.”

As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: “The site needs to be ‘cool,’” “It should be ‘exciting,’” “I want it to ‘pop.’” When we ask them to clarify, the answer we get back sounds a lot like “I can’t tell you what it is, but I’ll know it when I see it.”

“Fun” is a particularly difficult concept to define. And we’re starting to hear it a lot more from clients as we design for different contexts of use.

So what’s a designer to do?

04 Grids and Whitespace

Posted on by

CSS Grid is revolutionary. Up to 2018, the exploration of web layout strategies has been along the lines of a word processor. You start at the top and create content vertically as elements stack like blocks, which is easy, and horizontally, by limiting the width of the elements so you can go from left to right. The activity of designing web pages as if one were designing in Microsoft Word has come to an end! CSS Grid is here! You create the grid and then populate it in any way and in any order you see fit, creating white space wherever you deem esthetically pleasing or communicatively correct.

Allow Massimo Vignelli to introduce grids.

Grids

For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature. Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.

There are infinite kinds of grids but just one – the most appropriate – for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate. The basic understanding is that the smaller the module of the grid the least helpful it could be. We could say that an empty page is a page with an infinitesimal small grid. Therefore, it is equivalent to not being there. Conversely, a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to find the proper kind of grid for the job at hand. Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that, we divide the page in a certain number of columns according to the content, three, two, four, five, six, etc. Columns provide only one kind of consistency but we also need to have a horizontal frame of reference to assure certain levels of continuity throughout the publication. Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need. Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are infinite ways of doing this and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results.

Vignelli’s cannon
The Vignelli Canon

Vignelli has plenty to say about grids, margins, columns, and modules in his book The Vignelli Canon (pages 40 to 53) He provides a clear illustration of how to use a grid. Grid for the web is similar enough, except it is not just an organization principle but a layout tool. You will learn to use the CSS grid by using it.

Massimo Vignelli concludes his Canon with the power of white space.

WHITE SPACE

I often say that in typography the white space is more important than the black of the type. The white space on the printed page is the correspondent of space in architecture. In both situations space is what qualifies the context. Naturally, the organization of information needs a structure to hold together, but one should not underestimate the importance of white space to better define the hierarchy of every component. White space, non only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page. Tight type setting transforms words into lines just as loose type settings transform words in to dots. Decreasing or increasing the letter spacing (kearning) confers very distinctive character and expression to the words. All this is space manipulation and it is this device that is used in layouts to achieve a desired expression. The relationship between the size of type and the space around it is one of the most delicate and precious elements of a composition. I must say that the masterful handling of white space on a printed page is perhaps the most peculiar attribute of American graphic design. Just like space is the protagonist in Frank Lloyd Wright’s architecture. Somehow, it relates to the epic grandeur of the American landscapes.

For many artists white space is the essential element of the composition. It is the fundamental qualifier and protagonist of the image. Almost all the great American graphic designers have used white space as the significant silence to better hear their message loud and clear.

Such is indeed the power of the white space.