We’ve all heard about form and function. Each are different, yet both are necessary at the same time. Form and function can be found literally everywhere, from kitchen appliances to nature, from cars to graphic design.
In my many years of web and graphic design experience, I’ve seen projects where there’s an imbalance between form and function. When this happens, it can be the difference between a project communicating clearly, or leaving the door open for misinterpretation. I’ve seen some people be so concerned about function, that they neglect form…and vice versa. However, both are needed at once. So, how’s this possible? Where’s that balance?
Let’s consider what each one are:
Form is that which makes something aesthetically pleasing, or beautiful.
Function is that which is purely structural, how something works.
For those who tend toward the emotional, free-flowing side, form is king. For those who tend toward the structural, rule-following side, function is king.
When the two come together, they balance each other, and make for a more powerful outcome. For both types of thinkers, each thinker needs to see things not only from the other’s perspective, but to understand that form can be structural, and function can be beautiful. How is this possible?
Below is a screen shot of a web page that I designed for a local church (scroll past the image to read the analysis…)
The page is visually pleasing because of the use of color, fonts, photography, sizing of elements, use of icons, etc. The page is also structurally logical: lead-in, video, brief Gospel message, salvation prayer, and contact.
As you scroll down the page, it tells a story. The graphics and text engage the reader, and make it easy to read, easy to understand, and peaceful. Form takes on the roll of not just beauty, but function. If a reader doesn’t feel engaged or some other sort of emotion that you’re trying to communicate, then they won’t want to continue interacting with the, in this case, web page. They won’t get the message, or at least won’t understand it in the way that was intended. And without structure and organization, the content would be difficult to read, maybe even misplaced. However, structure also brings a beauty to the page, showing a hierarchy, alignment of graphics and text and their relationship to each other, and creating a sense of balance. In this scenario, the page is successful because both form and function are working together. Form is beautiful and serves a purpose, and function is structural and gives balance.
Form is beautiful and serves a purpose, and function is structural and gives balance.
Like most designers, I love typography. I look at and think about type a lot. I think about how to make type more interesting, what I can do differently with a font to make it more unique in any given scenario. Whether that is a pull quote, heading, lead-in paragraph, headline, promotional detail info, etc. I like to make my type different, yet solid, yet balanced, yet have personality, yet retain a hierarchy.
Here’s an example of a quote done creatively that takes into consideration hierarchy, yet fulfills the roles of both form and function:
The quote on the left is purely functional. It’s accurate in grammar, spelling, and punctuation. The quote on the right takes on more of an aesthetic approach, and stylizes the font, leading, kerning, and even leaves out some punctuation. Both are correct. Why? The hierarchy is intact in both quotations, and even though the emdash and ending quotation are missing on the right quote (and the first quotation mark is not inline with the text), it is still understood that the text on top is the quote and the text below is the citation.
This is a good example of both form and function working together. While the quote on the left is accurate, the stylized version of the quote on the right is also accurate (but more successful). The stylized quote is easier to read because the font makes the text more interesting, spacing adds breathing room, and presents a personality all while retaining the function portion of hierarchy. Both form and function are in balance here.
What do you think?
Is combining form and function easy or difficult to achieve? Can you have form without function? Can you have function without form? Let me know what you think! I’d love to have a convo with you! Scroll down to leave a comment.
4 years ago | Apr 21, 2021 | Leave a Comment
