Design conveys perspective. It is a robust, accessible language that can be shaped to appropriately suit any context. “To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” – Paul Rand,designer
As a designer, I am drawn to minimalist systems and works that surface and amplify unique points of view. For instance, I adore Sweedeedee, a Portland, Oregon-based bakery and restaurant. Their craft is simple-yet-sublime: think a poppy-seed cinnamon roll, the cashier pausing to flip a record before capturing your order, an assortment of locally produced ceramic mugs arranged on open shelving.
I have had the opportunity to create and evolve various mission-oriented brands, from a multi-million-dollar, community-owned grocery to an educational technology collaborative. Additionally, I have curated various immersive conference and workshop experiences, fabricated goods, and shaped physical and digital spaces. I approach design from a holistic, communication-centered perspective. My process demands that I constantly center the needs of my intended audience or audiences. I aim to create unfussy and genuine companies, campaigns, artifacts, and properties that inspire connection.
Well-designed, one-page websites require disciplined and distinctive storytelling. They reject the confines of traditional website design –– which largely mimics print conventions –– and elevate web-native experiences like interactivity and responsiveness. While one-page websites can hobble Search Engine Optimization (SEO) efforts and are arguably ineffective containers for robust and differentiated content, they offer powerful ways to engage viewers in immersive narratives. Let’s take a look a closer look at three exceptional one-page sites.
Pomorilla | An Animated Pizza Site with Pizzaz (Sorry. :/)
An Italian pizza restaurant, Pomorilla celebrates the pie lifecycle (pie-cycle?), from naturally leavened dough to carefully selected ingredients and, finally, the dreamy consumption part. The eatery’s one-page website employs three shapes, each of which corresponds with the form a pizza takes at various milestones in its journey, from raw to cooked. Crust-colored, 1980s-inspired circles, triangles, and squares boogie in the background as a viewer scrolls down the page. Additionally, an overlaid dough-like blob contorts itself as the story unfolds. The property’s warm, four-colored palette, hand-drawn imagery, and patchwork fonts convey a thoughtful wackiness. Like a spirited weirdo, this is the kind of joint you want to get to know.
What’s most striking about Pomorilla’s one-page website design is that it effectively spotlights the brand’s values, character, and offering without the aid of polished food photography. It beckons joyful eaters who appreciate thoughtful, unfussy craft.
Me Too Rising | A Data Visualization and Resource Site
Me Too Rising is a one-page visualization of the global Me Too movement, a social justice campaign dedicated to helping sexual assault survivors heal. Once the site loads, a cream-colored, serif font quote appears on an expansive black background. It reads, “What would happen if one woman told the truth about her life? The world would split open.” Murial Rukeyser’s words slowly fade and reveal a rotating planet Earth, from which animated points of light float toward space; these illuminations correspond with real-time site users. The header includes links to sexual assault resources and social media channels, and the footer displays site traffic trends.
The one-page website’s somber darkness is offset by a choral soundtrack and ember-like animations that evoke momentum and possibility (think: the weight and hope associated with a candlelight vigil). Its imagery is reminiscent of NASA’s galleries, which highlight earthly and space-related phenomena. Me Too Rising’s design effectively accomplishes two things: it demonstrates the movement’s breadth, and it compels viewers to access trauma support. As it does not define the whats and whys of Me Too, the property is intended for survivors already familiar with the campaign.
Ueno | A 3-D-Modeled Interview Microsite
Ueno is a full-service creative agency working on highly visible digital products, brands, and experiences. The firm’s pedigree naturally attracts heaps of talented prospective workers; therefore, to give candidates a taste of the Ueno culture, a one-page, interactive interview property was erected.
As a viewer enters the site, they immediately encounter birds chirping and animated characters inviting the prospect to begin the interview process. Once the viewer consents to the interview, they are greeted by intentionally cheesy video game music and dropped into a brightly colored office-scape dotted with various workers. The only action permitted is clicking on one of the illuminated characters, reminiscent of Lego Minifigures sans legs. Once clicked, the viewer (represented by a hot dog !!!), embarks on a choose-your-own-adventure chat experience with each Ueno employee and eventually the big boss. Once the final chat closes, the viewer is prompted to visit the ‘Careers at Ueno’ page.
The site clearly serves a singular audience: people interested in applying for a job at Ueno. Its design deftly showcases the agency’s creative and technical acumen, as well as the brand’s personality: hilarious, overachieving, and familial.
Design to Watch
The one-page website is a flexible, multi-sensory storytelling medium that has the power to share well-organized information in imaginative, 21st Century ways. Its impact on website design principles is something to watch. Keep those eyes peeled, creatives.
The ubiquity and utility of mobile phones and tablets have forever changed website design. When these Wi-Fi connected technologies first emerged, the mobile user experience was crude, at best. Over time, however, ever more sophisticated design practices have been perfected, elevating the mobile user experience to wow status (or so dang fluid, you don’t even consider the design).
Mobile Friendliness
Since 2015, Google’s almighty search ranking algorithm has assigned priority to mobile-friendly websites. Such properties, which are essentially small-scale, largely static replicas of desktop sites, meet the industry minimum for delivering a mobile experience: Users can technically access the site content on a small screen. (To see if your website meets Google’s mobile-friendly standard, check out the technology monolith’s webmaster tool.) However, the ‘friendliness’ of this design wears thin when a user is subjected to miniature font, fails to access or elegantly view multimedia assets, or fumbles interaction with a dropdown menu or form. Enter mobile-optimization.
Mobile Optimization
As mobile use began to rival, and eventually outpace, desktop use, (check out Tech Crunch’s 2018 statistics) designers began intentionally designing for mobile devices. Optimized design centers touch –– instead of click –– interaction, graphic size reduction for improved site loading time, mobile-unique functionality (think ’swipe right’), and site reformatting that delivers a simplified-yet-cohesive navigational experience.
Responsive Design
Mobile-optimized design represented the first considered mobile user experiences; however, responsive design now reigns supreme. It’s in the name: Responsive design ensures websites effectively ‘respond’ to screen size, immediately reorganizing content to utilize available real estate. This approach ensures the accessibility of a property’s unabridged content, and it doesn’t force the user to exact awkward-on-small-screen commands, like zooming or scrolling.
Future Thinking
The evolution of mobile design, from friendly to responsive, is an interesting study in how human behavior and preferences dictate experience design parameters. Now that mobile use has eclipsed desktop use, mobile-first design is certain to see its golden age.
This poster, designed by British firm Bibliothèque, dynamically employs grid-based design. The graphic summarizes Dieter Rams’Ten Principles for Good Design and showcases various products created by the iconic industrial designer. The minimalist poster is comprised of large numerical typeface, a sans serif font (with regular and bolded styling) and high-resolution images. The dominant black-and-white palette is punctuated by veins of color, such as the radio’s red channel lines.
While the written copy is conformed to one-column width, the size and orientation of each image differs. In two cases, the photographs are square, while the remaining eight images are precise cutouts with unique dimensions. The lilt of the numerical arrangement –– cascading downward, jutting upward, then progressively descending –– and the surprising, asymmetrical white space create a natural organizational system that offsets the poster’s brutalism. This grid-based design delights both the rational and arational sides of my brain, as it communicates a controlled chaos.
Paria Radikal, a self-identified “experimental and progressive” graphic design firm breaks the grid through cacophonous image placement and layering. The site represents the Paria Radikal portfolio, comprised of upside-down numbers and letters, hand-drawn and digital works, artifacts, indiscernible art, and a spectrum of clashing colors set against a black background. They applied a bolded sans serif font (with all caps and lowercase styling).
Overall, the design conveys a wackiness I enjoy. It communicates a frenetic creative urgency that makes me want to become familiar with the designers’ processes, influences, and sources of inspiration. The live site is comprised of GIFs, which convey a randomized Christmas light effect. This playful touch invites the visitor to explore the landing page in its entirety.
Arngren is a Norwegian commerce site dedicated to all-terrain and military vehicles, motorized bikes, drones, robots, and science fiction-inspired products. While the landing page utilizes a grid-based design, the absurd combination of haphazardly applied product outlining, myriad background and font colors (the live site includes a Christmas animation), unnecessary product details, and chaotic navigation are panic inducing. The hyperactive layout and accidental palette make me feel as though I am trapped in a toy store moonlighting as a confectionary (get me out of here, please).
The site was neither engineered in concert with human-centered design principles nor visual discipline. Despite the application of grid-based design, the landing page presents far too much information in a uncategorized and dizzying manner.
Getting the specification of the thing to be defined is one of the most difficult parts of the design, so much so that the HCD principle is to avoid specifying the problem as long as possible but instead to iterate upon repeated approximations. –– Don Norman
In The Design of Everyday Things, Norman spotlights the importance of discoverability. Effective design encourages and allows humans to easily discover how an artifact is used. Careful attention to four principles of interaction –– affordances, signifiers, mapping, and feedback –– lead to competent, translatable design. To better understand the facets of these principles, I assessed how the Museum of Modern Art-inducted Alessi 9090 stovetop espresso coffee maker (pictured right) stands up against Norman’s definitions.
Affordances
An affordance describes the relationship between a physical object and an agent of interaction, be they human, animal, machine, or robot.
An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could
possibly be used. A chair affords (“is for”) support and, therefore, affords sitting. –– Don Norman
The Alessi 9090, comprised of three separate components –– the base, the basket, and the vessel –– affords liquid storage, heat conduction, percolation, and liquid pouring. Additionally, it affords assembly and disassembly.
Signifiers
A signifier amplifies usage by indicating where and how a particular interaction should occur.
Affordances determine what actions are possible. Signifiers communicate where the action should take place. –– Don Norman (emphasis mine)
The Alessi 9090 boasts various signifiers, not all of which are effective.
The hollow base includes a screw that can be seen from the outside and inside of the product. To avoid overfilling the base, one must fill it with water to the bottom of the screw and no fuller. I cannot remember how I learned this fact, whether it was knowledge conveyed by a salesperson or contained in a manual. To me, however, it is not intuitive. Norman believes simple appliances should not require written instructions; their uses and functionalities should be readily understood. By that standard, the Alessi 9090 trips up where the screw-as-water-line is concerned.
The basket, which holds ground espresso beans, sits perfectly atop the base. There is no other way to arrange the basket (hooray!).
The vessel contains a handle fixed by a hinge at the top and loose at the bottom. The spout side of the vessel includes a cutout that neatly fits around a small piece of metal on the base. The handle is hollow and its bottom securely clicks onto a handle-side piece of metal on the base. These signifiers are brilliant. A human can quickly deduce how to secure the vessel to the base.
The lid includes two signifiers: a triangular spout and a metal tab that encourages pushing. The former tells a person how to situate the coffee maker to nonviolently pour the coffee, and the latter encourages the agent to push the tab to see if the coffee is done and the machine is working properly. Once a finger is released from the tab, the lid closes via gravity.
Mapping
Mapping aids a human in understanding how controls work, meaning what they control and how they can be manipulated to influence different outcomes.
Mapping is an important concept in the design and layout of controls and displays. When the mapping uses spatial correspondence between the layout of the controls and the devices being controlled, it is easy to determine how to use them. –– Don Norman
The Alessi 9090 maps metal tabs on either side of the base to indicate how the spout-side and handle-side of the vessel should be secured to the base.
Feedback
Feedback tells a human that a particular process is working and, optimally, indicates the process stage. For instance, when one takes an online survey, they often see a progress bar that showcases what they have done and how much more they have to accomplish before the activity is completed.
Feedback [communicates] the result of an action. –– Don Norman
The Alessi 9090 provides feedback in two prominent ways.
When the vessel is clipped into the base on both the spout and handle sides, a distinctive click can be heard. This tells an agent the coffee maker is secured and ready to use.
As percolation occurs and coffee fills the vessel, one can hear a bubbling noise which indicates the coffee is brewing. Once the bubbling noise ceases, one knows the coffee maker should be removed from heat and the coffee consumed.
The four principles of interaction provide a framework for engineers, designers, and makers of all variety to build humane designs that center the organic behaviors and needs of their intended audiences. Up with Norman! Up with empathetic design!
Evaluating the blog’s role in modern online culture is an interesting exercise. My early interactions with blogs were initiated through organic search (think “how to make Marcella Hazan’s genius tomato sauce”): I would encounter them as I sought answers to specific questions. However, my frequent internet inquiries eventually revealed preferred authors and content outlets. I subscribed to various blogs, like this one dedicated to whole foods cooking, and incorporated reading posts into my morning ritual. I fell in love with writers’ unique voices, expertise, and use of the medium.
While blogging is evolving to complement newer social channels by offering evermore niche content in visually compelling ways, one attribute of the storytelling platform has remained constant: a well-constructed blog urges the reader to develop a multidimensional relationship with a writer or writers. Blogs offer practical, inspiring, and evocative information with emotional generosity, differentiating them from online forums that encourage superficiality. Even a blog about design, when thoughtfully curated, can deepen human connection –– an important act in today’s fragmented world.