When marketing managers, IT administrators, copywriters, designers and developers come together to hash out project plans and timelines, things go more smoothly when everyone can speak the same language.
So what do you do if you don’t know your duotone from your parallax? We can help.
If you’re about to kick off a web design project, or just want to be able to speak intelligently when you work with your design team or agency, knowing these buzzwords will help you chime in confidently. Here are some of-the-moment web design terms that can help you better understand the look, feel and functionality of your new site.
1. Card layouts
As simplicity and responsiveness continue their reign in the field of web design, card layouts have become a popular tool for chunking out information into small modules that can be easily sorted, personalized, flipped through and swiped. As a refinement of the tile layouts popularized in recent years, cards add new layers of richness and interactivity with animations and hover effects. Card layouts lend themselves to a variety of applications, especially news sites, blogs, product catalogs and community platforms.
“The usefulness of the card UI pattern goes beyond loading times and translating across different screen sizes,” writes Jerry Cao for Designmodo. “Bite-sized content matches the attention span of most web users (especially on mobile devices).”
A keen editing eye is crucial to effective design, and that applies to color as much as content. Duotone images are essentially made up of two dominant tones, created by generating a grayscale image and replacing highlights or midtones with contrasting colors.
With duotone images, designers can inject mood and personality into a web layout using a restrained, sophisticated color palette. These visual touches can hold together a site’s look and feel, offering cohesion and consistency while communicating aspects of a brand’s identity, or the energy or tone of a piece of content.
3. Dynamic storytelling
Web marketing today is all about connecting with your audience and making them feel something for your brand. Dynamic storytelling is a means to this end, combining the use of imagery, graphics, videos and text to weave a compelling narrative about a company’s product or service, or to show the humans behind the business.
Rich storytelling like this requires a greater time investment in storyboarding, writing and multimedia asset creation. But it can pay off when these content marketing endeavors deliver heightened engagement and loyalty for your brand.
4. Flat design
Flat design essentially scales back digital graphics and design elements from 3-D to 2-D. By limiting or eliminating the use of realism-based design effects like drop shadows, gradients and textures, designers can emphasize usability and speed up page load times across devices. Flat design techniques use minimalism, solid colors and crisp edges to simplify the user experience and let the content shine.
The evolution of Google’s logo is a prime example of the trend toward flat design. As shown below, Google’s logo has progressed from prominent drop shadows and beveled edges to a much simpler two-dimensional logo with a cleaner, sans serif font. This movement toward minimalism is echoed across the modern web as designers pare down stylistic elements to the bare basics.
5. Graceful degradation and progressive enhancement
Graceful degradation describes a design approach that arose in the last decade. As browsers, operating systems and screen sizes proliferated, it created a challenge for designers, who sought to maintain the integrity of their designs for all users.
In the graceful degradation approach, designers created an optimal experience for modern browsers and full-sized screens, but then built safeguards into their code to ensure a site remained functional on older browsers and mobile screens, albeit with some features omitted. The downside to this approach is that those with older technology or smaller screens could end up with a subpar experience. For this reason, graceful degradation has largely been eclipsed by a contrasting approach called progressive enhancement.
With progressive enhancement, designers start with the smallest and simplest web experience, typically for mobile devices. This mindshift forces them to prioritize content and features to create a great design for a broad audience. From there, they add features and functionality, progressively enhancing the interface for larger screens or more advanced browsers. The benefit is that smaller screen users are no longer an afterthought—they’re top priority.
6. Growth-driven design
Traditionally, website redesigns happened every several years and took about three to six months to complete. Once a new site had launched, designers and marketers would hope for the best and make the most of their new site until they restarted the process a few years later.
Growth-driven design offers an enticing alternative to the old-school design process. The GDD approach involves a shorter planning and development time, allowing businesses to launch a new site more quickly, then make ongoing data-driven optimizations as designers learn how the new site is performing. This process is becoming the standard for modern web designers because it allows for more nimbleness, and uses time and budget more efficiently.
7. Hamburger menu
With the rise of mobile web design came a need to condense site navigation menus into something more compact and expandable for miniature screens. Enter the hamburger menu—the design world’s kitschy name for those three stacked horizontal lines you’ve come to know. It’s usually found in the top left-hand or right-hand corner of a user interface, and is also called a side menu, flyout menu or navigation drawer.
Some criticize the hamburger menu for obscuring navigation options or for increasing the number of taps users must complete to reach their destination. But like many UX standards, the menu has become ingrained across the web, and users have now come to expect it. Still, viable mobile-friendly alternatives to the hamburger menu include traditional top menus with fewer items; tabbed menus; scrolling menus; or dropdowns.