We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.
This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
Last year I read Jan Constantin’s post “Typographic Design Patterns and Current Practices” and straightaway wanted to do something similar with email. At the time I was studying responsive typography on the web, trying to break down the websites I liked in order to understand what made the typography work so well, then attempting to apply those findings to email design.
After seeing Constantin’s work, I also wanted to explore how other email designers were handling responsive typography. So, I amassed 50 emails across various industries that I think do a good job with typography to see if any patterns emerged. You can skip straight to the Google Doc showing the raw data and results.
CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s.
Nevertheless, the future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes, from widescreen TVs to smartphones — and even devices as yet unimagined. Browser support is fantastic (except you-know-who). Yep, it’s a great time to jump into flexbox if you haven't done so yet.
Has web design lost its soul? And is responsive design to blame? These questions, posed by my friend and colleague Noah Stokes, are provocative to say the least. After all, the responsive web has made browsing on our ever increasing collection of Internet-connected screens not only possible, but enjoyable.
Our priority as designers must be to solve problems; perhaps more than anything else, this is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we're called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio.
A balanced composition feels right. It feels stable and aesthetically pleasing. While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t see the other areas.
Balancing a composition involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum.
Galileo knew it. Every ancient culture that left traces of knowledge in their art knew it. Basic shapes compose the fundamental geometry of the universe. We can take credit for a lot of things, but human beings did not invent geometric shapes. We discovered them through the observation of nature. Understanding basic shapes and their functions have taught us to mark time and space in a variety of ways, inspiring mathematics, technology, language and ever-evolving civilization.
A handful of simple shapes have been used throughout time in the art of all cultures: the circle, intersecting lines, the triangle, the square and the spiral. Cultural anthropologist Angeles Arrien researched and documented commonalities in cultural art forms over several decades and found consistent geometric shapes embedded in all art. She called them the “five universal shapes.”
There are only a handful of fundamental patterns that create all of the natural diversity around us. Nature’s patterns perform three basic tasks that get the work of the universe done by moving, storing and connecting energy.
Nature communicates within an interconnected and intricate system of checks and balances to weave patterns and processes together for perfect and purposeful outcomes. Nature is the ultimate economist when it comes to creating so much from so little. Everything gets used in this supremely elegant system. Nothing is wasted. And all of it happens in the moment. We covered Symbols, Metaphors And The Power Of Intuition in the first post of the series last week; this week let's take a closer look into nature's patterns.
Animation, like any other facet of the web, mustbedesigned. As web developers, we think about the effects of typography, layout, interaction, and shifting viewports, but when incorporating animation we have another factor to consider: time.
It’s not just an extra aspect to consider, either: it increases the complexity of each of the aforementioned parameters exponentially. Rather than viewing this as a heavy mass of ideas, we can bake animation into the core of our user experience process to create dazzling, exciting, and engaging work that pushes boundaries and collectively elevates the medium of the web.
No designer creates wow work 100% of the time. There’s no question that creating good design takes significant exertion, but generating the wow factor in your work can also be fairly effortless. Many designers follow their intuition during the creative process and incorporate universal symbols and metaphors simply because it “feels right.” Intuition — accessible to all people and most especially useful to those engaged in creative pursuits — guides designers towards solutions that align with a universal knowing.
Adding a universal quality to a logo provides the broadest communicative reach, what almost all identities are intended to accomplish. The intellectual exercise of connecting the dots of “thinking” is not irrelevant in design, of course — particularly when it comes to branding — but by combining the intuitive immediacy of symbols and metaphors with strategic thinking, you integrate essential information that helps your logo stand out and be remembered.
Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, I feel like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now that thousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? I believe so.
As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.