In this sixth instalment of Inspired Design Decisions, Andy Clarke will explore how British art director Neville Brody and in particular his work on The Face Magazine inspires his designs for the web. How do we use blend modes to add depth to our designs? How do we use vertical text for impact? How can we use clipping paths to bring in character and energy to a design? In this article, Andrew Clarke will explore just that.
Read more…
Brand illustrations are an adaptable and effective way to build a company’s visual brand. In this article, Yihui Liu outlines her process for developing a strong brand illustration system. Her approach has been refined over 10 years of study and professional experience in China and Europe, and draws examples from her latest work as Lead Designer at Spacebase.
Read more…
In this fifth installment of Inspired Design Decisions, Andy Clarke will teach you about Bea Feitler, who directed Harper’s Bazaar throughout the 1960s and has been described as “the pioneering female art director you’ve never heard of.” Andy will teach you about Feitler’s confident work and show you how to apply some of her design techniques to the work you make for the web. In this article, you’ll learn how to emphasize scale and maintain its contrast on even the smallest screens. Andy will teach you how to make confident color choices, and how to use pattern and texture to add depth to your designs.
Read more…
In this fourth instalment of Inspired Design Decisions, Andy Clarke will teach you about Alexey Brodovitch, one of the most influential art directors of the twentieth century. Andy will teach you about Brodovitch’s iconic work and show you how to apply some of his design techniques to the work you make for the web. In this article, you’ll learn how scattering images will fill your designs with movement. Andy will teach you how to mirror pictures and text, and how to carve text into shapes using CSS Shapes.
Read more…
In this third instalment of Inspired Design Decisions, Andy Clarke will teach you how to use frameworks to create layouts as engaging as in the well-known Ernest Journal. All it takes is an understanding of layout design and imagination. Curiosity keeps a creative mind open to new possibilities, and that’s what Ernest Journal magazine — the inspiration for this issue — is all about. Ernest Journal’s design is successful because although each article has its own distinctive elements which connect the visual style with the content, those articles use a consistent grid system and foundation styles.
Read more…
In this second installment of Inspired Design Decisions, Andy Clarke will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. This article will change the way you think about designing with grids.
Read more…
Through this unique “Inspired design decisions” series of article and webinars, Andy Clarke will change that. In the first edition of Inspired Design Decisions, Andy will “Say hello to skinny columns,” a technique which adds one extra narrow column to an otherwise conventional column grid. He explains how to design with, then implement skinny columns using meaningful markup and efficient CSS. He also explains how to design using modular grids to fill your designs with energy.
Read more…
The web is more than predictable compositions of rectangles, circles and triangles. With CSS Grid Layout, CSS Shapes and a bit of art direction we can achieve remarkable results — we just need a front-end strategy how to get there. That’s why we created “Art Direction for the Web,” a new Smashing Book for breaking out of generic experiences on the web. Now we can study the once uncharted territory of layout, type treatment and composition that print designers have skillfully and meticulously conquered, and explore which lessons from print we could bring to our web experiences today.
Read more…
A lead capture page greatly differs from a traditional web page in a number of ways. Put that lead generating page on mobile and you’ll see those differences expand and even test the limits of what you thought was possible for mobile. In this article, Suzanne Scacca is going to look at some tips for utilizing those differences to improve how well your lead capture pages convert on mobile. She’ll also analyze a number of landing pages on mobile so you can see how the design criteria may change based on what you’re promoting and who you’re trying to promote it to.
Read more…
Last year, Rachel Andrew wrote “Take A New Look At CSS Shapes” where she reintroduced readers to the basics of using CSS Shapes. In this new tutorial, Andy Clarke expands on the topic of “Art Direction for the Web” with CSS Shapes to create exciting and inspired new design ideas. Andy is going to show you how to use CSS Shapes to create the following five different types of layout: v-shapes, z-patterns, curved shapes, diagonal shapes, and rotated shapes.
Read more…