How do you display unconventional web design techniques?

1 Experiment with layout

One way to display unconventional web design techniques is to experiment with layout. Instead of following the traditional grid system, you can use asymmetry, overlap, white space, and animation to create dynamic and unique compositions. For example, you can use CSS grid, flexbox, and transform properties to arrange your elements in different shapes, sizes, and orientations. You can also use JavaScript libraries like ScrollTrigger or ScrollMagic to animate your layout based on scroll position. However, make sure that your layout is still responsive, readable, and navigable on different devices and browsers.

2 Play with typography

Another way to display unconventional web design techniques is to play with typography. Typography is not only a way to convey information, but also a way to express your personality, style, and tone. You can use typography to create contrast, hierarchy, and emphasis in your design. For example, you can use custom fonts, variable fonts, or web fonts to choose the right typeface for your message. You can also use CSS properties like font-size, font-weight, line-height, letter-spacing, and text-transform to adjust the appearance and spacing of your text. You can also use CSS animations, transitions, and effects to add some movement and interactivity to your typography. However, make sure that your typography is still legible, accessible, and consistent across your design.

3 Incorporate illustration

A third way to display unconventional web design techniques is to incorporate illustration. Illustration is a powerful tool to communicate your brand identity, tell a story, and evoke emotions. You can use illustration to add some color, texture, and personality to your design. For example, you can use SVG, canvas, or CSS shapes to create custom graphics, icons, and patterns. You can also use JavaScript libraries like p5.js, Three.js, or D3.js to create interactive and generative illustrations. However, make sure that your illustration is still relevant, clear, and optimized for your design.

4 Use 3D elements

A fourth way to display unconventional web design techniques is to use 3D elements. 3D elements can add some depth, realism, and immersion to your design. You can use 3D elements to create stunning visuals, showcase your products, or enhance your user experience. For example, you can use WebGL, CSS 3D transforms, or 3D models to create realistic and interactive 3D scenes. You can also use JavaScript libraries like A-Frame, Babylon.js, or Three.js to create 3D animations, effects, and interactions. However, make sure that your 3D elements are still compatible, performant, and user-friendly for your design.

5 Mix media

A fifth way to display unconventional web design techniques is to mix media. Mixing media can help you create a rich and diverse design that appeals to different senses and preferences. You can mix media to create contrast, harmony, and variety in your design. For example, you can use images, videos, audio, text, and animations to create a multimedia story. You can also use CSS filters, blend modes, and masks to manipulate and combine different media. However, make sure that your media is still coherent, relevant, and optimized for your design.

6 Break the rules

A sixth way to display unconventional web design techniques is to break the rules. Breaking the rules can help you challenge the conventions, explore the possibilities, and express your vision. You can break the rules to create a memorable and surprising design that catches your attention and curiosity. For example, you can use unexpected colors, shapes, sizes, or interactions to create a contrast or a tension in your design. You can also use humor, irony, or satire to create a playful or a provocative design. However, make sure that your design is still functional, ethical, and respectful for your audience.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?