We use HTML to tell stories and communicate vast amounts of information—and animation helps us do both better. Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Rachel Nabors explains her fascination with CSS3 animations, Canvas, SVG, the web audio API, webGL, and all the rest, and explains why we need web animation—and web animators.
Topic: Graphic Design
Designing for Breakpoints
Text, navigation, and tables, oh, my! What’s a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketch minor breakpoints? How should you think about content while sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.
Material Honesty on the Web
Material honesty—the idea that a substance should be itself, rather than mimic something else—has guided everyone from Ruskin to Charles and Ray Eames. How might material honesty apply to our immaterial (digital) projects? What light might its principles shed on such aesthetic debates as flat versus skeumorphic web design? And how might a materially honest approach change how we conceive and sell our projects? Kevin Goldman forecasts increased longevity for our work and even our careers if we apply the principles of material honesty to our digital world.
The Era of Symbol Fonts
Welcome to the third epoch in web performance optimization: symbol fonts. Everything from bullets and arrows to feed and social media icons can now be bundled into a single, tiny font file that can be cached and rendered at various sizes without needing multiple images or colors. This has the same caching and file size benefits as a CSS sprite, plus additional benefits we’re only now realizing with high-resolution displays. Discover the advantages and explore the challenges you’ll encounter when using a symbol font.
Artistic Distance
Pimpin’ ain’t easy; neither is self-critique. If you are passionate about what you create, it is impossible to completely disassociate yourself from your work in order to objectively evaluate and then improve it. But the ability to achieve “artistic distance” that is, to attain a place that allows you to contemplate your design on its own merits, will enable you to improve your own work immeasurably and, ultimately, to cast off the immature shackles of ego. Learn to let your work shine by letting go of it. Acquire the knack of achieving artistic distance.
Style Tiles and How They Work
How do you involve your client in a successful design process? Many of our processes date back to print design and advertising. It’s time we evolved our deliverables to make clients a more active participant in the process. The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered alongside a site map, wireframes, and other user experience artifacts. Learn how style tiles can align client and designer expectations, expedite project timelines, involve stakeholders in the brainstorming process, and serve an essential role in responsive design.
A Pixel Identity Crisis
The pixel has long been the atomic particle of screen based design: a knowable, concrete unit of measurement. But layouts based on the hardware pixel are fast becoming an endangered species. Even the introduction of a new, W3C standard reference pixel, although it promises stability in the long-term, can’t help us navigate the current chaos. Consider the two “standard” pixel definitions and 500 “standard” viewports your user’s Android device may support. To create designs that transcend platform differences, the promise of the web and standards, you must normalize pixels across devices. Scott Kellum shows how math and media queries can keep you sane and help you design consistently across platforms.
Personality in Design
Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design. In an exclusive excerpt from his spanking new book Designing For Emotion, Aarron Walter shows us how to create a strong human connection in human-computer interaction by turning our design interactions into conversations, imbuing mechanical “interactions” with distinctively human elements, and using design and language techniques to craft a living personality for your website.
Demystifying Design
Mystifying design with jargon only we understand makes us feel like heroes and creates a sense of job security. But it also creates an “us and them” atmosphere which excludes non-designers, obscures the true value of design, and generates antagonism when only cooperation will yield the best product. By revealing our process and inviting others into our world, we can create a team that is invested in the success of our work, and deliver better design. Jeff Gothelf discusses the steps we can take to increase the value of our practice and of ourselves as practitioners.
Marry Your Clients
Do you consistently work to stay engaged, or do you get comfortable with clients? With new projects, it’s easy to make the extra effort. The longer you work together, the easier it becomes to feel satisfied with the status quo, while giving your best energy to the shiny new client. Rather than pretend this won’t happen, prepare for it and create a strategy to combat it. Shane Pearlman shows us how.
