You know, we use ad-blockers as well.
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. our 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.
Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement, the role of CSS or, most recently, web design itself being dead. All these articles raise valid points, but I'd argue that they often lack objectivity and balance, preferring one side of the argument over another one.
These discussions are great for testing the boundaries of what we think is (or is not) possible, and they challenge how we approach our craft, but they don't help us as a community to evolve together. They divide us into groups and sometimes even isolate us in small camps. Chris Coyier has published a fantastic post recently covering the debate on the role of CSS in light of growing popularity of React.js, extensively and objectively. That's the quality discussions we need, and that's what keeps us evolving as a growing and maturing community.
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.